) {
'group',
'hover:[&>td]:bg-background-hover data-[state=selected]:[&>td]:bg-background-hover',
'focus-within:[&>td]:bg-background-hover',
- '[&>td]:first:rounded-l-lg [&>td]:last:rounded-r-lg',
+ 'not-last:[&>td]:border-b not-last:[&>td]:border-border-normal',
className
)}
{...props}
@@ -76,9 +75,9 @@ function TableHead({ className, ...props }: ComponentProps<'th'>) {
| ) {
|
{direction === 'asc' ? (
-
+
) : (
-
+
)}
)
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index ae1badabd..f3ef6b072 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -1,7 +1,6 @@
import type { Meta, StoryObj } from '@storybook/react-vite'
import { Card } from '../Card/Card.js'
-import { Text } from '../Text/Text.js'
import { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs.js'
@@ -13,11 +12,7 @@ export default {
type Story = StoryObj
const Content = ({ children }: any) => (
-
-
- {children}
-
-
+ {children}
)
export const Default: Story = {
@@ -28,6 +23,9 @@ export const Default: Story = {
Coins
Collectibles
RWAs
+
+ Not available
+
Coins content
diff --git a/src/components/Tabs/Tabs.test.tsx b/src/components/Tabs/Tabs.test.tsx
index e3fc1fef3..282b6285d 100644
--- a/src/components/Tabs/Tabs.test.tsx
+++ b/src/components/Tabs/Tabs.test.tsx
@@ -42,19 +42,19 @@ describe('', () => {
expect(screen.queryByText('Content A')).toBeNull()
})
- it('marks the active tab with data-state', async () => {
+ it('marks the active tab with data-active', async () => {
const user = userEvent.setup()
render()
const tabA = screen.getByText('Tab A').closest('[data-slot=tabs-trigger]')!
const tabB = screen.getByText('Tab B').closest('[data-slot=tabs-trigger]')!
- expect(tabA).toHaveAttribute('data-state', 'active')
- expect(tabB).not.toHaveAttribute('data-state', 'active')
+ expect(tabA).toHaveAttribute('data-active')
+ expect(tabB).not.toHaveAttribute('data-active')
await user.click(screen.getByText('Tab B'))
- expect(tabA).not.toHaveAttribute('data-state', 'active')
- expect(tabB).toHaveAttribute('data-state', 'active')
+ expect(tabA).not.toHaveAttribute('data-active')
+ expect(tabB).toHaveAttribute('data-active')
})
})
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index ca2919f27..d147fb578 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -1,9 +1,8 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs'
-import { type ComponentProps, type ReactNode } from 'react'
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
+import type { ComponentProps, ReactNode } from 'react'
import { disabledStyle, focusRingVariants } from '../../styles.js'
import { cn } from '../../utils/classnames.js'
-import { textVariants } from '../Text/Text.js'
function Tabs({
className,
@@ -37,16 +36,17 @@ function TabsList({
function TabsTrigger({
className,
...props
-}: ComponentProps) {
+}: ComponentProps) {
return (
- ) {
+}: ComponentProps) {
return (
- {
{tabs.map(tab => (
-
{tab.label}
-
+
))}
)
diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx
index 34c46af1d..4b36a09fe 100644
--- a/src/components/Tag/Tag.stories.tsx
+++ b/src/components/Tag/Tag.stories.tsx
@@ -1,6 +1,5 @@
import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import { SettingsIcon } from '../../icons/index.js'
+import { SettingsIcon } from 'lucide-react'
import { Tag } from './Tag.js'
@@ -13,13 +12,17 @@ type Story = StoryObj
export const Default: Story = {
args: {
- label: 'ERC1155',
+ children: 'ERC1155',
},
}
export const WithIcon: Story = {
args: {
- label: 'ERC1155',
- icon: SettingsIcon,
+ children: (
+ <>
+
+ ERC1155
+
+ ),
},
}
diff --git a/src/components/Tag/Tag.test.tsx b/src/components/Tag/Tag.test.tsx
index 1d9143dff..27b24c0ba 100644
--- a/src/components/Tag/Tag.test.tsx
+++ b/src/components/Tag/Tag.test.tsx
@@ -5,7 +5,7 @@ import { Tag } from './Tag.js'
describe('', () => {
it('renders', () => {
- render()
+ render(ERC1155)
expect(screen.getByText('ERC1155')).toBeInTheDocument()
})
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
index 4f84d9a85..cbfc6e5c8 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -1,18 +1,18 @@
import { cva, type VariantProps } from 'class-variance-authority'
-import type { ComponentType } from 'react'
+import type { ComponentProps } from 'react'
-import type { IconProps } from '../../icons/types.js'
-import { Text } from '../Text/Text.js'
+import { cn } from '../../utils/classnames.js'
const tagVariants = cva(
[
- 'inline-flex',
- 'gap-1',
+ 'text-xxs font-bold',
+ 'inline-flex items-center',
+ 'gap-0.5',
'px-2',
'py-1',
'whitespace-nowrap',
'bg-background-active',
- 'text-secondary',
+ 'text-primary',
'rounded-xs',
],
{
@@ -22,19 +22,18 @@ const tagVariants = cva(
}
)
-interface TagProps extends VariantProps {
- label: string
- icon?: ComponentType
+interface TagProps
+ extends ComponentProps<'div'>,
+ VariantProps {
className?: string
}
export const Tag = (props: TagProps) => {
- const { icon: Icon, label, className, ...rest } = props
+ const { children, className, ...rest } = props
return (
-
- {Icon && }
- {label}
+
+ {children}
)
}
diff --git a/src/components/Text/Text.stories.tsx b/src/components/Text/Text.stories.tsx
deleted file mode 100644
index eef605c65..000000000
--- a/src/components/Text/Text.stories.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import { Text } from './Text.js'
-
-export default {
- title: 'Components/Text',
- component: Text,
-} as Meta
-
-type Story = StoryObj
-
-export const Heading1: Story = {
- args: {
- variant: 'xlarge',
- color: 'primary',
- children: 'Hello, world!',
- },
-}
-export const Heading2: Story = {
- args: {
- variant: 'large',
- color: 'primary',
- children: 'Hello, world!',
- },
-}
-export const Heading3: Story = {
- args: {
- variant: 'medium',
- color: 'primary',
- children: 'Hello, world!',
- },
-}
-export const Bold: Story = {
- args: {
- variant: 'normal',
- color: 'primary',
- fontWeight: 'bold',
- children: 'Hello, world!',
- },
-}
-export const BodyLarge: Story = {
- args: {
- variant: 'large',
- color: 'primary',
- children: 'Hello, world!',
- },
-}
-export const Body: Story = {
- args: {
- variant: 'normal',
- color: 'primary',
- children: 'Hello, world!',
- },
-}
-export const TextAsChild: Story = {
- args: {
- variant: 'normal',
- color: 'primary',
- children: (
- <>
-
- Hello
-
- {' World!'}
-
- ),
- },
-}
-export const Code: Story = {
- args: {
- variant: 'code',
- color: 'primary',
- children: 'Hello, world!',
- },
-}
diff --git a/src/components/Text/Text.test.tsx b/src/components/Text/Text.test.tsx
deleted file mode 100644
index b22892c6b..000000000
--- a/src/components/Text/Text.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { cleanup, render, screen } from '@testing-library/react'
-import { afterEach, describe, expect, it } from 'vitest'
-
-import { Text } from './Text.js'
-
-describe('', () => {
- afterEach(cleanup)
-
- it('renders', () => {
- render(Hello, World!)
- expect(screen.getByText(/Hello/i)).toBeInTheDocument()
- })
-})
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
deleted file mode 100644
index 4faed5b3c..000000000
--- a/src/components/Text/Text.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-import type { HTMLAttributes } from 'react'
-
-import { cn } from '../../utils/classnames.js'
-
-export const textVariants = cva('', {
- variants: {
- variant: {
- inherit: [
- 'font-inherit',
- 'text-inherit',
- 'leading-inherit',
- 'tracking-inherit',
- 'font-inherit',
- ],
- xxxlarge: [
- 'font-body',
- 'font-bold',
- 'text-6xl',
- 'tracking-normal',
- 'leading-15',
- ],
- xxlarge: [
- 'font-body',
- 'font-bold',
- 'text-4xl',
- 'tracking-widest',
- 'leading-10',
- ],
- xlarge: [
- 'font-body',
- 'font-bold',
- 'text-2xl',
- 'tracking-normal',
- 'leading-8',
- ],
- large: [
- 'font-body',
- 'font-semibold',
- 'text-xl',
- 'tracking-normal',
- 'leading-7',
- ],
- medium: [
- 'font-body',
- 'font-bold',
- 'text-base',
- 'tracking-normal',
- 'leading-6',
- ],
- 'normal-bold': [
- 'font-body',
- 'font-bold',
- 'text-sm',
- 'tracking-wide',
- 'leading-5',
- ],
- normal: [
- 'font-body',
- 'font-medium',
- 'text-sm',
- 'tracking-wide',
- 'leading-5',
- ],
- 'small-bold': [
- 'font-body',
- 'font-bold',
- 'text-xs',
- 'tracking-normal',
- 'leading-4',
- ],
- small: [
- 'font-body',
- 'font-medium',
- 'text-xs',
- 'tracking-wide',
- 'leading-4',
- ],
- 'xsmall-bold': [
- 'font-body',
- 'font-bold',
- 'text-[0.625rem]',
- 'tracking-wide',
- 'leading-4',
- ],
- xsmall: [
- 'font-body',
- 'font-bold',
- 'text-[0.625rem]',
- 'tracking-wide',
- 'leading-4',
- ],
- code: [
- 'font-mono',
- 'font-normal',
- 'text-sm',
- 'tracking-normal',
- 'leading-5',
- ],
- },
-
- fontWeight: {
- normal: 'font-normal',
- medium: 'font-medium',
- semibold: 'font-semibold',
- bold: 'font-bold',
- },
-
- color: {
- primary: 'text-primary',
- secondary: 'text-secondary',
- muted: 'text-muted',
- inverse: 'text-inverse',
- white: 'text-white',
- black: 'text-black',
- negative: 'text-negative',
- positive: 'text-positive',
- warning: 'text-warning',
- info: 'text-info',
-
- // backwards compatibility
- text100: 'text-primary',
- text80: 'text-secondary',
- text50: 'text-muted',
- inverse100: 'text-inverse',
- },
-
- ellipsis: {
- true: ['overflow-hidden', 'whitespace-nowrap', 'text-ellipsis'],
- },
-
- italic: {
- true: 'italic',
- },
-
- underline: {
- true: 'underline',
- },
-
- uppercase: {
- true: 'uppercase',
- },
-
- capitalize: {
- true: 'capitalize',
- },
-
- nowrap: {
- true: 'whitespace-nowrap',
- },
-
- block: {
- true: 'block',
- },
-
- hidden: {
- true: [
- 'border-0',
- 'clip-rect-0',
- 'h-[1px]',
- '-m-[1px]',
- 'overflow-hidden',
- 'p-0',
- 'absolute',
- 'w-[1px]',
- ],
- },
- },
- defaultVariants: {
- variant: 'inherit',
- },
-})
-
-export interface TextProps
- extends Omit, 'hidden' | 'color'>,
- VariantProps {
- asChild?: boolean
-}
-
-export const Text = (props: TextProps) => {
- const {
- asChild,
- variant = 'inherit',
- color,
- fontWeight,
- className,
- hidden,
- italic,
- underline,
- ellipsis,
- uppercase,
- capitalize,
- nowrap,
- block,
- ...rest
- } = props
-
- const Component = asChild ? Slot : 'span'
-
- return (
-
- )
-}
diff --git a/src/components/TextArea/ControlledTextArea.tsx b/src/components/TextArea/ControlledTextArea.tsx
deleted file mode 100644
index 42adaa4b8..000000000
--- a/src/components/TextArea/ControlledTextArea.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import type { ComponentProps } from 'react'
-import { Controller, type Control } from 'react-hook-form'
-
-import { TextArea } from './TextArea.js'
-
-type ControlledTextAreaProps = ComponentProps & {
- control: Control
- defaultValue?: string
- name: string
- rules?: {}
-}
-
-export const ControlledTextArea = ({
- defaultValue,
- name,
- control,
- rules,
- ...rest
-}: ControlledTextAreaProps) => (
- (
-
- )}
- />
-)
diff --git a/src/components/TextArea/TextArea.stories.tsx b/src/components/TextArea/TextArea.stories.tsx
index ff324179d..3b62a42fb 100644
--- a/src/components/TextArea/TextArea.stories.tsx
+++ b/src/components/TextArea/TextArea.stories.tsx
@@ -14,16 +14,16 @@ export const Default: Story = {
placeholder: 'Enter message...',
rows: 3,
resize: false,
- ['aria-invalid']: false,
+ 'aria-invalid': false,
disabled: false,
},
}
-export const Error: Story = {
+export const Invalid: Story = {
args: {
rows: 3,
placeholder: 'Enter message...',
resize: false,
- ['aria-invalid']: true,
+ 'aria-invalid': true,
},
}
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
index d4bc14769..c1335de20 100644
--- a/src/components/TextArea/TextArea.tsx
+++ b/src/components/TextArea/TextArea.tsx
@@ -1,12 +1,12 @@
import type { ComponentProps } from 'react'
+import { useIsKeyboardFocused } from '../../hooks/useIsKeyboardFocused.js'
import {
disabledStyle,
focusRingVariants,
inputBorderStyle,
} from '../../styles.js'
import { cn } from '../../utils/classnames.js'
-import { textVariants } from '../Text/Text.js'
function TextArea({
className,
@@ -15,16 +15,17 @@ function TextArea({
spellCheck = 'false',
...props
}: ComponentProps<'textarea'> & { resize?: boolean }) {
+ const isKeyboardFocused = useIsKeyboardFocused()
return (
|