diff --git a/README.md b/README.md index e0bd989..10301cb 100644 --- a/README.md +++ b/README.md @@ -27,10 +27,34 @@ UI Library built in purpose to be used internally by Engineering Student Committ ## Components +- [ ] Accordion +- [ ] Alet Dialog +- [ ] Aspect Ratio +- [x] Avatar - [x] Button +- [x] Checkbox +- [x] Collapsible +- [ ] Command +- [x] Context Menu +- [ ] Dialog +- [x] Dropdown Menu +- [ ] Hover Card - [x] Input -- [x] Typography - [x] Label +- [x] Menubar +- [x] Navigation Menu +- [ ] Popover +- [x] Progress +- [x] Radio Group +- [x] Scroll Area +- [ ] Select +- [x] Seperator +- [ ] Slider +- [x] Switch +- [x] Tabs +- [x] Text Area +- [ ] Tooltip +- [x] Typography Please check the [storybook](https://esc-chula.github.io/esc-ui/) for more information. diff --git a/lib/components/Avatar/index.tsx b/lib/components/Avatar/index.tsx index 3fdd082..c15598c 100644 --- a/lib/components/Avatar/index.tsx +++ b/lib/components/Avatar/index.tsx @@ -25,7 +25,7 @@ const Avatar = React.forwardRef( /> {fallback?.split(' ').map((word) => word[0])} diff --git a/lib/components/Button/index.tsx b/lib/components/Button/index.tsx index f814a56..100c5df 100644 --- a/lib/components/Button/index.tsx +++ b/lib/components/Button/index.tsx @@ -13,7 +13,7 @@ const buttonVariants = cva( 'rounded-md', 'text-sm', 'font-medium', - 'ring-offset-background', + 'ring-offset-white', 'transition-colors', 'focus-visible:outline-none', 'focus-visible:ring-2', @@ -25,15 +25,13 @@ const buttonVariants = cva( { variants: { variant: { - default: 'bg-primary text-primary-foreground hover:bg-primary/90', - secondary: - 'bg-secondary text-secondary-foreground hover:bg-secondary/80', - destructive: - 'bg-destructive text-destructive-foreground hover:bg-destructive/90', + default: 'bg-carmine-500 text-white hover:bg-carmine-400', + secondary: 'bg-neutral-100 text-black hover:bg-neutral-200', + destructive: 'bg-red-500 text-white hover:bg-red-600', outline: - 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', - ghost: 'hover:bg-accent hover:text-accent-foreground', - link: 'text-primary underline-offset-4 hover:underline', + 'border border-neutral-200 bg-white hover:bg-neutral-100 hover:text-black', + ghost: 'hover:bg-neutral-100 hover:text-black', + link: 'text-black underline-offset-4 hover:underline', }, size: { default: 'h-10 px-4 py-2', diff --git a/lib/components/Checkbox/index.tsx b/lib/components/Checkbox/index.tsx index 485999c..fb471d4 100644 --- a/lib/components/Checkbox/index.tsx +++ b/lib/components/Checkbox/index.tsx @@ -19,7 +19,7 @@ const Checkbox = forwardRef< export const Default: Story = { - render: () => { + args: {}, + render: (args) => { const [isOpen, setIsOpen] = React.useState(false) return ( = { + title: 'Components/ContextMenu', + component: ContextMenu, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: {}, + render: (args) => ( + + + Trigger + + + Item 1 + Item 2 + Item 3 + + + ), +} diff --git a/lib/components/ContextMenu/index.tsx b/lib/components/ContextMenu/index.tsx new file mode 100644 index 0000000..38379c7 --- /dev/null +++ b/lib/components/ContextMenu/index.tsx @@ -0,0 +1,198 @@ +import * as ContextMenuPrimitive from '@radix-ui/react-context-menu' +import { Check, ChevronRight, Circle } from 'lucide-react' +import * as React from 'react' + +import { cn } from '@/utils' + +const ContextMenu = ContextMenuPrimitive.Root + +const ContextMenuTrigger = ContextMenuPrimitive.Trigger + +const ContextMenuGroup = ContextMenuPrimitive.Group + +const ContextMenuPortal = ContextMenuPrimitive.Portal + +const ContextMenuSub = ContextMenuPrimitive.Sub + +const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup + +const ContextMenuSubTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, children, ...props }, ref) => ( + + {children} + + +)) +ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName + +const ContextMenuSubContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName + +const ContextMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + +)) +ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName + +const ContextMenuItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName + +const ContextMenuCheckboxItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, checked, ...props }, ref) => ( + + + + + + + {children} + +)) +ContextMenuCheckboxItem.displayName = + ContextMenuPrimitive.CheckboxItem.displayName + +const ContextMenuRadioItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + {children} + +)) +ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName + +const ContextMenuLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName + +const ContextMenuSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName + +const ContextMenuShortcut = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( + + ) +} +ContextMenuShortcut.displayName = 'ContextMenuShortcut' + +export { + ContextMenu, + ContextMenuTrigger, + ContextMenuContent, + ContextMenuItem, + ContextMenuCheckboxItem, + ContextMenuRadioItem, + ContextMenuLabel, + ContextMenuSeparator, + ContextMenuShortcut, + ContextMenuGroup, + ContextMenuPortal, + ContextMenuSub, + ContextMenuSubContent, + ContextMenuSubTrigger, + ContextMenuRadioGroup, +} diff --git a/lib/components/DropdownMenu/index.stories.tsx b/lib/components/DropdownMenu/index.stories.tsx new file mode 100644 index 0000000..037f634 --- /dev/null +++ b/lib/components/DropdownMenu/index.stories.tsx @@ -0,0 +1,43 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from '.' +import { Button } from '../Button' + +const meta: Meta = { + title: 'Components/DropdownMenu', + component: DropdownMenu, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: {}, + render: (args) => ( + + + + + + My Account + + Profile + Billing + Team + Subscription + + + ), +} diff --git a/lib/components/DropdownMenu/index.tsx b/lib/components/DropdownMenu/index.tsx new file mode 100644 index 0000000..70773ca --- /dev/null +++ b/lib/components/DropdownMenu/index.tsx @@ -0,0 +1,198 @@ +import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu' +import { Check, ChevronRight, Circle } from 'lucide-react' +import * as React from 'react' + +import { cn } from '@/utils' + +const DropdownMenu = DropdownMenuPrimitive.Root + +const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger + +const DropdownMenuGroup = DropdownMenuPrimitive.Group + +const DropdownMenuPortal = DropdownMenuPrimitive.Portal + +const DropdownMenuSub = DropdownMenuPrimitive.Sub + +const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup + +const DropdownMenuSubTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, children, ...props }, ref) => ( + + {children} + + +)) +DropdownMenuSubTrigger.displayName = + DropdownMenuPrimitive.SubTrigger.displayName + +const DropdownMenuSubContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuSubContent.displayName = + DropdownMenuPrimitive.SubContent.displayName + +const DropdownMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + + + +)) +DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName + +const DropdownMenuItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName + +const DropdownMenuCheckboxItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, checked, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuCheckboxItem.displayName = + DropdownMenuPrimitive.CheckboxItem.displayName + +const DropdownMenuRadioItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName + +const DropdownMenuLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName + +const DropdownMenuSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName + +const DropdownMenuShortcut = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( + + ) +} +DropdownMenuShortcut.displayName = 'DropdownMenuShortcut' + +export { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuGroup, + DropdownMenuPortal, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuRadioGroup, +} diff --git a/lib/components/Input/index.tsx b/lib/components/Input/index.tsx index 67e3c90..c234d9a 100644 --- a/lib/components/Input/index.tsx +++ b/lib/components/Input/index.tsx @@ -11,7 +11,7 @@ export const Input = forwardRef( = { + title: 'Components/Menubar', + component: Menubar, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: {}, + render: (args) => ( + + + File + + + New Tab ⌘T + + + New Window ⌘N + + New Incognito Window + + + Share + + Email link + Messages + Notes + + + + + Print... ⌘P + + + + + Edit + + + Undo ⌘Z + + + Redo ⇧⌘Z + + + + Find + + Search the web + + Find... + Find Next + Find Previous + + + + Cut + Copy + Paste + + + + View + + Always Show Bookmarks Bar + + Always Show Full URLs + + + + Reload ⌘R + + + Force Reload ⇧⌘R + + + Toggle Fullscreen + + Hide Sidebar + + + + Profiles + + + Andy + Benoit + Luis + + + Edit... + + Add Profile... + + + + ), +} diff --git a/lib/components/Menubar/index.tsx b/lib/components/Menubar/index.tsx new file mode 100644 index 0000000..12232f8 --- /dev/null +++ b/lib/components/Menubar/index.tsx @@ -0,0 +1,234 @@ +import * as MenubarPrimitive from '@radix-ui/react-menubar' +import { Check, ChevronRight, Circle } from 'lucide-react' +import * as React from 'react' + +import { cn } from '@/utils' + +const MenubarMenu = MenubarPrimitive.Menu + +const MenubarGroup = MenubarPrimitive.Group + +const MenubarPortal = MenubarPrimitive.Portal + +const MenubarSub = MenubarPrimitive.Sub + +const MenubarRadioGroup = MenubarPrimitive.RadioGroup + +const Menubar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Menubar.displayName = MenubarPrimitive.Root.displayName + +const MenubarTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName + +const MenubarSubTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, children, ...props }, ref) => ( + + {children} + + +)) +MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName + +const MenubarSubContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName + +const MenubarContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }, + ref + ) => ( + + + + ) +) +MenubarContent.displayName = MenubarPrimitive.Content.displayName + +const MenubarItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +MenubarItem.displayName = MenubarPrimitive.Item.displayName + +const MenubarCheckboxItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, checked, ...props }, ref) => ( + + + + + + + {children} + +)) +MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName + +const MenubarRadioItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + {children} + +)) +MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName + +const MenubarLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +MenubarLabel.displayName = MenubarPrimitive.Label.displayName + +const MenubarSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName + +const MenubarShortcut = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( + + ) +} +MenubarShortcut.displayname = 'MenubarShortcut' + +export { + Menubar, + MenubarMenu, + MenubarTrigger, + MenubarContent, + MenubarItem, + MenubarSeparator, + MenubarLabel, + MenubarCheckboxItem, + MenubarRadioGroup, + MenubarRadioItem, + MenubarPortal, + MenubarSubContent, + MenubarSubTrigger, + MenubarGroup, + MenubarSub, + MenubarShortcut, +} diff --git a/lib/components/NavigationMenu/index.stories.tsx b/lib/components/NavigationMenu/index.stories.tsx new file mode 100644 index 0000000..771f3ae --- /dev/null +++ b/lib/components/NavigationMenu/index.stories.tsx @@ -0,0 +1,149 @@ +import type { Meta, StoryObj } from '@storybook/react' +import React from 'react' + +import { cn } from '@/utils' + +import { + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, +} from '.' + +const meta: Meta = { + title: 'Components/NavigationMenu', + component: NavigationMenu, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} + +export default meta + +type Story = StoryObj + +const components: { title: string; href: string; description: string }[] = [ + { + title: 'Alert Dialog', + href: '/docs/primitives/alert-dialog', + description: + 'A modal dialog that interrupts the user with important content and expects a response.', + }, + { + title: 'Hover Card', + href: '/docs/primitives/hover-card', + description: + 'For sighted users to preview content available behind a link.', + }, + { + title: 'Progress', + href: '/docs/primitives/progress', + description: + 'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.', + }, + { + title: 'Scroll-area', + href: '/docs/primitives/scroll-area', + description: 'Visually or semantically separates content.', + }, + { + title: 'Tabs', + href: '/docs/primitives/tabs', + description: + 'A set of layered sections of content—known as tab panels—that are displayed one at a time.', + }, + { + title: 'Tooltip', + href: '/docs/primitives/tooltip', + description: + 'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.', + }, +] + +const ListItem = React.forwardRef< + React.ElementRef<'a'>, + React.ComponentPropsWithoutRef<'a'> +>(({ className, title, children, ...props }, ref) => { + return ( +
  • + + +
    {title}
    +

    + {children} +

    +     +     +
    • + ) +}) +ListItem.displayName = 'ListItem' + +export const Default: Story = { + args: {}, + render: (args) => ( + + + + Getting started + + + + + + Components + +
      + {components.map((component) => ( + + {component.description} + + ))} +
    +     +     +     +     + ), +} diff --git a/lib/components/NavigationMenu/index.tsx b/lib/components/NavigationMenu/index.tsx new file mode 100644 index 0000000..257d6ce --- /dev/null +++ b/lib/components/NavigationMenu/index.tsx @@ -0,0 +1,125 @@ +import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu' +import { ChevronDown } from 'lucide-react' +import * as React from 'react' + +import { cn } from '@/utils' + +const NavigationMenu = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + + +)) +NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName + +const NavigationMenuList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName + +const NavigationMenuItem = NavigationMenuPrimitive.Item + +const NavigationMenuTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children}{' '} + +)) +NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName + +const NavigationMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName + +const NavigationMenuLink = NavigationMenuPrimitive.Link + +const NavigationMenuViewport = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( +
    + +
    +)) +NavigationMenuViewport.displayName = + NavigationMenuPrimitive.Viewport.displayName + +const NavigationMenuIndicator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +
    + +)) +NavigationMenuIndicator.displayName = + NavigationMenuPrimitive.Indicator.displayName + +export { + NavigationMenu, + NavigationMenuList, + NavigationMenuItem, + NavigationMenuContent, + NavigationMenuTrigger, + NavigationMenuLink, + NavigationMenuIndicator, + NavigationMenuViewport, +} diff --git a/lib/components/Progress/index.tsx b/lib/components/Progress/index.tsx index f2ee086..e911fd1 100644 --- a/lib/components/Progress/index.tsx +++ b/lib/components/Progress/index.tsx @@ -12,13 +12,13 @@ const Progress = React.forwardRef< diff --git a/lib/components/Radio/index.tsx b/lib/components/Radio/index.tsx index d50405c..d0bbbea 100644 --- a/lib/components/Radio/index.tsx +++ b/lib/components/Radio/index.tsx @@ -26,7 +26,7 @@ const RadioGroupItem = React.forwardRef< { height={400} />
    -
    +
    Photo by{' '} - - {artwork.artist} - + {artwork.artist}
    @@ -108,8 +106,8 @@ export const HorizontalDemo: Story = { export const MixedDemo: Story = { args: {}, - render: () => ( -
    + render: (args) => ( +

    Radix Primitives

    -

    +

    An open-source UI component library.

    diff --git a/lib/components/Switch/index.tsx b/lib/components/Switch/index.tsx index 881eaa5..856325f 100644 --- a/lib/components/Switch/index.tsx +++ b/lib/components/Switch/index.tsx @@ -11,7 +11,7 @@ export const Switch = React.forwardRef< >(({ className, ...props }, ref) => ( diff --git a/lib/components/Tabs/index.stories.tsx b/lib/components/Tabs/index.stories.tsx new file mode 100644 index 0000000..5925747 --- /dev/null +++ b/lib/components/Tabs/index.stories.tsx @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import { Tabs, TabsContent, TabsList, TabsTrigger } from '.' + +const meta: Meta = { + title: 'Components/Tabs', + component: Tabs, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} + +export default meta + +type Story = StoryObj + +export const Default: Story = { + args: {}, + render: (args) => ( + + + Account + Password + + + Make changes to your account here. + + Change your password here. + + ), +} diff --git a/lib/components/Tabs/index.tsx b/lib/components/Tabs/index.tsx new file mode 100644 index 0000000..52be7ae --- /dev/null +++ b/lib/components/Tabs/index.tsx @@ -0,0 +1,53 @@ +import * as TabsPrimitive from '@radix-ui/react-tabs' +import * as React from 'react' + +import { cn } from '@/utils' + +const Tabs = TabsPrimitive.Root + +const TabsList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsList.displayName = TabsPrimitive.List.displayName + +const TabsTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsTrigger.displayName = TabsPrimitive.Trigger.displayName + +const TabsContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsContent.displayName = TabsPrimitive.Content.displayName + +export { Tabs, TabsList, TabsTrigger, TabsContent } diff --git a/lib/components/Textarea/index.tsx b/lib/components/Textarea/index.tsx index 1cf69b1..78caf73 100644 --- a/lib/components/Textarea/index.tsx +++ b/lib/components/Textarea/index.tsx @@ -31,16 +31,14 @@ const Textarea = React.forwardRef( )}