diff --git a/.changeset/fifty-houses-act.md b/.changeset/fifty-houses-act.md new file mode 100644 index 00000000..9549e0ad --- /dev/null +++ b/.changeset/fifty-houses-act.md @@ -0,0 +1,18 @@ +--- +'@nerdfish/ui': major +--- + +## Namespacing components with dot notation + +Using the current way of using `Object.assign` to namespace components breaks consuming React Server Components. It also has limitations to tree-shaking capabilities. + +[https://github.com/vercel/next.js/issues/51593](See github issue) + +We need to change the way we namespace components to be compatible with React Server Components. + +Now, all components are being exported directly from the package, but also as a namespaced component in another way. +The limitations is that namespaced component now always have a `.Root` element. + +for example, a `Dialog` would now be available as `Dialog.Root`, which to why these are breaking changes. + + diff --git a/.changeset/green-cougars-rescue.md b/.changeset/green-cougars-rescue.md new file mode 100644 index 00000000..3773b3d6 --- /dev/null +++ b/.changeset/green-cougars-rescue.md @@ -0,0 +1,5 @@ +--- +'@nerdfish/ui': patch +--- + +fix the padding in `Alert` when there is an icon diff --git a/.changeset/wild-camels-grow.md b/.changeset/wild-camels-grow.md new file mode 100644 index 00000000..2301aad8 --- /dev/null +++ b/.changeset/wild-camels-grow.md @@ -0,0 +1,5 @@ +--- +'@nerdfish/ui': major +--- + +removed `DoubleLabelLink` diff --git a/apps/docs/content/components/accordion.mdx b/apps/docs/content/components/accordion.mdx index 5803fbcf..96dd9d70 100644 --- a/apps/docs/content/components/accordion.mdx +++ b/apps/docs/content/components/accordion.mdx @@ -21,7 +21,7 @@ import { Accordion } from '@nerdfishui/ui' ``` ```tsx - + Fish diff --git a/apps/docs/content/components/alert-dialog.mdx b/apps/docs/content/components/alert-dialog.mdx index 2ed56cfc..d4c64267 100644 --- a/apps/docs/content/components/alert-dialog.mdx +++ b/apps/docs/content/components/alert-dialog.mdx @@ -21,7 +21,7 @@ import { AlertDialog } from '@nerdfishui/ui' ``` ```tsx - + Open @@ -36,5 +36,5 @@ import { AlertDialog } from '@nerdfishui/ui' Continue - + ``` diff --git a/apps/docs/content/components/alert.mdx b/apps/docs/content/components/alert.mdx index f2e1bea4..8acc10c9 100644 --- a/apps/docs/content/components/alert.mdx +++ b/apps/docs/content/components/alert.mdx @@ -19,7 +19,10 @@ import { Alert } from '@nerdfish/ui' ``` ```tsx -Alert + + Example alert + Example description + ``` ## Examples diff --git a/apps/docs/content/components/avatar.mdx b/apps/docs/content/components/avatar.mdx index a13afa88..ed9cc940 100644 --- a/apps/docs/content/components/avatar.mdx +++ b/apps/docs/content/components/avatar.mdx @@ -22,11 +22,11 @@ import Image from 'next/image' ``` ```tsx - + DM - + ``` diff --git a/apps/docs/content/components/breadcrumb.mdx b/apps/docs/content/components/breadcrumb.mdx index 4ece9141..dc9e0a1b 100644 --- a/apps/docs/content/components/breadcrumb.mdx +++ b/apps/docs/content/components/breadcrumb.mdx @@ -21,14 +21,14 @@ import { Breadcrumb, DropdownMenu } from '@nerdfish/ui' ``` ```tsx - + Home - + Toggle menu @@ -38,7 +38,7 @@ import { Breadcrumb, DropdownMenu } from '@nerdfish/ui' Themes GitHub - + @@ -49,5 +49,5 @@ import { Breadcrumb, DropdownMenu } from '@nerdfish/ui' Breadcrumb - + ``` diff --git a/apps/docs/content/components/card.mdx b/apps/docs/content/components/card.mdx index 7f0d74c3..7895b2e1 100644 --- a/apps/docs/content/components/card.mdx +++ b/apps/docs/content/components/card.mdx @@ -22,16 +22,16 @@ import { Card } from '@nerdfish/ui' ``` ```tsx - - - Card Title - Card Description - - + + + Card Title + Card Description + +

Card Content

- - + +

Card Footer

- - + + ``` diff --git a/apps/docs/content/components/collapsible.mdx b/apps/docs/content/components/collapsible.mdx index a2fb0617..bc90b9fe 100644 --- a/apps/docs/content/components/collapsible.mdx +++ b/apps/docs/content/components/collapsible.mdx @@ -20,11 +20,11 @@ import Image from 'next/image' ``` ```tsx - + Can I use this in my project? Yes. Free to use for personal and commercial projects. No attribution required. - + ``` diff --git a/apps/docs/content/components/command.mdx b/apps/docs/content/components/command.mdx index b7b7ca19..10d756c2 100644 --- a/apps/docs/content/components/command.mdx +++ b/apps/docs/content/components/command.mdx @@ -20,7 +20,7 @@ import { Command } from '@nerdfish/ui' ``` ```tsx - + No results found. @@ -36,7 +36,7 @@ import { Command } from '@nerdfish/ui' Settings - + ``` ## Dialog diff --git a/apps/docs/content/components/dialog.mdx b/apps/docs/content/components/dialog.mdx index a3f65a19..043e56ff 100644 --- a/apps/docs/content/components/dialog.mdx +++ b/apps/docs/content/components/dialog.mdx @@ -21,7 +21,7 @@ import { Dialog } from '@nerdfish/ui' ``` ```tsx - + Remove order @@ -32,5 +32,5 @@ import { Dialog } from '@nerdfish/ui' - + ``` diff --git a/apps/docs/content/components/double-label-link.mdx b/apps/docs/content/components/double-label-link.mdx deleted file mode 100644 index 2a2d980c..00000000 --- a/apps/docs/content/components/double-label-link.mdx +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: DoubleLabelLink -description: - DoubleLabelLink is a link component with a double label. It can be used to - link to external websites. -component: true -type: Doc -package: - name: 'ui' - path: 'link.tsx' ---- - - - - - -## Usage - -```tsx -import { DoubleLabelLink } from '@nerdfish/ui' -``` - -```tsx - - label 1 - -``` diff --git a/apps/docs/content/components/drawer.mdx b/apps/docs/content/components/drawer.mdx index 90fecb4f..4b6c2cde 100644 --- a/apps/docs/content/components/drawer.mdx +++ b/apps/docs/content/components/drawer.mdx @@ -21,7 +21,7 @@ import { Drawer, Button } from '@nerdfish/ui' ``` ```tsx - + Open @@ -35,7 +35,7 @@ import { Drawer, Button } from '@nerdfish/ui' - + ``` ## Direction diff --git a/apps/docs/content/components/dropdown-menu.mdx b/apps/docs/content/components/dropdown-menu.mdx index e9853bbc..7582670e 100644 --- a/apps/docs/content/components/dropdown-menu.mdx +++ b/apps/docs/content/components/dropdown-menu.mdx @@ -19,7 +19,7 @@ import { DropdownMenu } from '@nerdfish/ui' ``` ```tsx - + Open Cake Flavors @@ -29,5 +29,5 @@ import { DropdownMenu } from '@nerdfish/ui' Strawberry Red Velvet - + ``` diff --git a/apps/docs/content/components/grid.mdx b/apps/docs/content/components/grid.mdx index 99007bf0..d3b5a3c5 100644 --- a/apps/docs/content/components/grid.mdx +++ b/apps/docs/content/components/grid.mdx @@ -19,12 +19,12 @@ import { Grid } from '@nerdfish/ui' ``` ```tsx - + Content Content - + ``` diff --git a/apps/docs/content/components/hover-card.mdx b/apps/docs/content/components/hover-card.mdx index 36e1f9dd..0575c705 100644 --- a/apps/docs/content/components/hover-card.mdx +++ b/apps/docs/content/components/hover-card.mdx @@ -22,7 +22,7 @@ import { HoverCard } from '@nerdfish/ui' ``` ```tsx - + Hover over the cake
@@ -33,5 +33,5 @@ import { HoverCard } from '@nerdfish/ui'

- + ``` diff --git a/apps/docs/content/components/indicator.mdx b/apps/docs/content/components/indicator.mdx index fa56ebf3..fd7dc6f9 100644 --- a/apps/docs/content/components/indicator.mdx +++ b/apps/docs/content/components/indicator.mdx @@ -19,14 +19,14 @@ import { Indicator } from '@nerdfish/ui' ``` ```tsx - +
content
- + ``` ## Item diff --git a/apps/docs/content/components/input-otp.mdx b/apps/docs/content/components/input-otp.mdx index 0ac5ba19..b95a6eb7 100644 --- a/apps/docs/content/components/input-otp.mdx +++ b/apps/docs/content/components/input-otp.mdx @@ -19,7 +19,7 @@ import { InputOTP } from '@nerdfish/ui' ``` ```tsx - ( <> diff --git a/apps/docs/content/components/input.mdx b/apps/docs/content/components/input.mdx index 8a295303..b49eddf8 100644 --- a/apps/docs/content/components/input.mdx +++ b/apps/docs/content/components/input.mdx @@ -34,12 +34,6 @@ import { Input } from '@nerdfish/ui' -## Error - - - - - ## Size diff --git a/apps/docs/content/components/navigation-list.mdx b/apps/docs/content/components/navigation-list.mdx index 444f5e06..7a640069 100644 --- a/apps/docs/content/components/navigation-list.mdx +++ b/apps/docs/content/components/navigation-list.mdx @@ -20,7 +20,7 @@ import { NavigationList } from '@nerdfish/ui' ``` ```tsx - + - + ``` diff --git a/apps/docs/content/components/navigation-menu.mdx b/apps/docs/content/components/navigation-menu.mdx index 12b8a46e..1b1e379d 100644 --- a/apps/docs/content/components/navigation-menu.mdx +++ b/apps/docs/content/components/navigation-menu.mdx @@ -21,7 +21,7 @@ import { NavigationMenu } from '@nerdfish/ui' ``` ```tsx - + Item One @@ -30,5 +30,5 @@ import { NavigationMenu } from '@nerdfish/ui' - + ``` diff --git a/apps/docs/content/components/popover.mdx b/apps/docs/content/components/popover.mdx index 8a838561..1d27c2d1 100644 --- a/apps/docs/content/components/popover.mdx +++ b/apps/docs/content/components/popover.mdx @@ -19,8 +19,8 @@ import { Popover } from '@nerdfish/ui' ``` ```tsx - - Open - Popover content - + + Open + Popover content + ``` diff --git a/apps/docs/content/components/radio-group.mdx b/apps/docs/content/components/radio-group.mdx index cb5a8c34..27d546be 100644 --- a/apps/docs/content/components/radio-group.mdx +++ b/apps/docs/content/components/radio-group.mdx @@ -15,22 +15,22 @@ package: ## Usage ```tsx -import { RadioGroup } from '@nerdfish/ui' +import { RadioGroup, FieldLabel } from '@nerdfish/ui' ``` ```tsx - +
- + Default
- + Comfortable
- + Compact
- + ``` diff --git a/apps/docs/content/components/slider.mdx b/apps/docs/content/components/slider.mdx index 18666651..b4360e56 100644 --- a/apps/docs/content/components/slider.mdx +++ b/apps/docs/content/components/slider.mdx @@ -19,7 +19,7 @@ import { Slider } from '@nerdfish/ui' ``` ```tsx - + - + ``` diff --git a/apps/docs/content/components/table.mdx b/apps/docs/content/components/table.mdx index ec00a005..0ef313e4 100644 --- a/apps/docs/content/components/table.mdx +++ b/apps/docs/content/components/table.mdx @@ -19,7 +19,7 @@ import { Table } from '@nerdfish/ui' ``` ```tsx - + A list of your recent invoices. @@ -37,5 +37,5 @@ import { Table } from '@nerdfish/ui' $250.00 -
+ ``` diff --git a/apps/docs/content/components/tabs.mdx b/apps/docs/content/components/tabs.mdx index b7f67cad..5cfda122 100644 --- a/apps/docs/content/components/tabs.mdx +++ b/apps/docs/content/components/tabs.mdx @@ -19,7 +19,7 @@ import { Tabs } from '@nerdfish/ui' ``` ```tsx - + General Privacy @@ -30,5 +30,5 @@ import { Tabs } from '@nerdfish/ui'

Privacy settings tab

 - + ``` diff --git a/apps/docs/content/components/tooltip.mdx b/apps/docs/content/components/tooltip.mdx index c419ffcd..a0716e17 100644 --- a/apps/docs/content/components/tooltip.mdx +++ b/apps/docs/content/components/tooltip.mdx @@ -20,11 +20,11 @@ import { Tooltip, TooltipProvider } from '@nerdfish/ui' ```tsx - - Hover - + + Hover +

Add to library

- - + + ``` diff --git a/apps/docs/src/components/app-demo.tsx b/apps/docs/src/components/app-demo.tsx index bf8df6ec..9240da19 100644 --- a/apps/docs/src/components/app-demo.tsx +++ b/apps/docs/src/components/app-demo.tsx @@ -119,7 +119,7 @@ function AppDemo() {
- + - +
- + - +
- +
@@ -215,7 +215,7 @@ function AppDemo() {
- +
diff --git a/apps/docs/src/components/code-block-wrapper.tsx b/apps/docs/src/components/code-block-wrapper.tsx index bc5f33a5..a36bf119 100644 --- a/apps/docs/src/components/code-block-wrapper.tsx +++ b/apps/docs/src/components/code-block-wrapper.tsx @@ -17,7 +17,7 @@ export function CodeBlockWrapper({ const [isOpened, setIsOpened] = React.useState(false) return ( - +
- + ) } diff --git a/apps/docs/src/components/component-example.tsx b/apps/docs/src/components/component-example.tsx index 64247626..0e11ee7f 100644 --- a/apps/docs/src/components/component-example.tsx +++ b/apps/docs/src/components/component-example.tsx @@ -40,7 +40,7 @@ export function ComponentExample({ className={cx('relative my-4 flex flex-col space-y-2', className)} {...props} > - +
Preview @@ -82,7 +82,7 @@ export function ComponentExample({ ) : null}
- + ) } diff --git a/apps/docs/src/components/copy-button.tsx b/apps/docs/src/components/copy-button.tsx index ad194b41..da0ab4fa 100644 --- a/apps/docs/src/components/copy-button.tsx +++ b/apps/docs/src/components/copy-button.tsx @@ -81,7 +81,7 @@ export function CopyWithClassNames({ }, []) return ( - + Classname - + ) } @@ -136,7 +136,7 @@ export function CopyNpmCommandButton({ }, []) return ( - + pnpm - + ) } diff --git a/apps/docs/src/components/examples/accordion/demo.tsx b/apps/docs/src/components/examples/accordion/demo.tsx index 06ef5de0..11ee944a 100644 --- a/apps/docs/src/components/examples/accordion/demo.tsx +++ b/apps/docs/src/components/examples/accordion/demo.tsx @@ -4,7 +4,7 @@ import { Accordion } from '@nerdfish/ui' export function AccordionDemo() { return ( - + Fish @@ -26,6 +26,6 @@ export function AccordionDemo() { natural ingredients. With the Goodness of 100% Natural Ingredients - + ) } diff --git a/apps/docs/src/components/examples/alert-dialog/demo.tsx b/apps/docs/src/components/examples/alert-dialog/demo.tsx index d8ef9efc..fbec28ff 100644 --- a/apps/docs/src/components/examples/alert-dialog/demo.tsx +++ b/apps/docs/src/components/examples/alert-dialog/demo.tsx @@ -4,7 +4,7 @@ import { AlertDialog, Button } from '@nerdfish/ui' export function AlertDialogDemo() { return ( - + @@ -21,6 +21,6 @@ export function AlertDialogDemo() { Continue - + ) } diff --git a/apps/docs/src/components/examples/alert/danger.tsx b/apps/docs/src/components/examples/alert/danger.tsx index bfdf033c..86f2735b 100644 --- a/apps/docs/src/components/examples/alert/danger.tsx +++ b/apps/docs/src/components/examples/alert/danger.tsx @@ -4,9 +4,9 @@ import { Alert } from '@nerdfish/ui' export function AlertDanger() { return ( - + Example alert Example description - + ) } diff --git a/apps/docs/src/components/examples/alert/demo.tsx b/apps/docs/src/components/examples/alert/demo.tsx index f51c5dc9..4164e6b7 100644 --- a/apps/docs/src/components/examples/alert/demo.tsx +++ b/apps/docs/src/components/examples/alert/demo.tsx @@ -4,9 +4,9 @@ import { Alert } from '@nerdfish/ui' export function AlertDemo() { return ( - + Example alert Example description - + ) } diff --git a/apps/docs/src/components/examples/alert/info.tsx b/apps/docs/src/components/examples/alert/info.tsx index 666743c6..709ea1a4 100644 --- a/apps/docs/src/components/examples/alert/info.tsx +++ b/apps/docs/src/components/examples/alert/info.tsx @@ -4,9 +4,9 @@ import { Alert } from '@nerdfish/ui' export function AlertInfo() { return ( - + Example alert Example description - + ) } diff --git a/apps/docs/src/components/examples/alert/success.tsx b/apps/docs/src/components/examples/alert/success.tsx index f3bcd2a6..04b18669 100644 --- a/apps/docs/src/components/examples/alert/success.tsx +++ b/apps/docs/src/components/examples/alert/success.tsx @@ -4,9 +4,9 @@ import { Alert } from '@nerdfish/ui' export function AlertSuccess() { return ( - + Example alert Example description - + ) } diff --git a/apps/docs/src/components/examples/alert/warning.tsx b/apps/docs/src/components/examples/alert/warning.tsx index b236cabb..dd447fb6 100644 --- a/apps/docs/src/components/examples/alert/warning.tsx +++ b/apps/docs/src/components/examples/alert/warning.tsx @@ -4,9 +4,9 @@ import { Alert } from '@nerdfish/ui' export function AlertWarning() { return ( - + Example alert Example description - + ) } diff --git a/apps/docs/src/components/examples/avatar/demo.tsx b/apps/docs/src/components/examples/avatar/demo.tsx index 45f394d9..b67af815 100644 --- a/apps/docs/src/components/examples/avatar/demo.tsx +++ b/apps/docs/src/components/examples/avatar/demo.tsx @@ -4,12 +4,12 @@ import { Avatar } from '@nerdfish/ui' export function AvatarDemo() { return ( - + DM - + ) } diff --git a/apps/docs/src/components/examples/breadcrumb/demo.tsx b/apps/docs/src/components/examples/breadcrumb/demo.tsx index 13116654..1e903238 100644 --- a/apps/docs/src/components/examples/breadcrumb/demo.tsx +++ b/apps/docs/src/components/examples/breadcrumb/demo.tsx @@ -4,14 +4,14 @@ import { Breadcrumb, DropdownMenu } from '@nerdfish/ui' export function BreadcrumbDemo() { return ( - + Home - + Toggle menu @@ -21,7 +21,7 @@ export function BreadcrumbDemo() { Themes GitHub - + @@ -32,6 +32,6 @@ export function BreadcrumbDemo() { Breadcrumb - + ) } diff --git a/apps/docs/src/components/examples/card/demo.tsx b/apps/docs/src/components/examples/card/demo.tsx index 8b971a6b..c34b1d58 100644 --- a/apps/docs/src/components/examples/card/demo.tsx +++ b/apps/docs/src/components/examples/card/demo.tsx @@ -18,11 +18,9 @@ const notifications = [ }, ] -type CardProps = React.ComponentProps - -export function CardDemo({ className, ...props }: CardProps) { +export function CardDemo({ className, ...props }: Card.RootProps) { return ( - + Cake Notifications You have 3 unread cake messages. @@ -60,6 +58,6 @@ export function CardDemo({ className, ...props }: CardProps) { Mark all as read - + ) } diff --git a/apps/docs/src/components/examples/collapsible/demo.tsx b/apps/docs/src/components/examples/collapsible/demo.tsx index 2dca1ccf..8cdb2634 100644 --- a/apps/docs/src/components/examples/collapsible/demo.tsx +++ b/apps/docs/src/components/examples/collapsible/demo.tsx @@ -8,7 +8,7 @@ export function CollapsibleDemo() { const [isOpen, setIsOpen] = React.useState(false) return ( - - + ) } diff --git a/apps/docs/src/components/examples/command/demo.tsx b/apps/docs/src/components/examples/command/demo.tsx index eade6cb6..537fb91a 100644 --- a/apps/docs/src/components/examples/command/demo.tsx +++ b/apps/docs/src/components/examples/command/demo.tsx @@ -12,7 +12,7 @@ import { export function CommandDemo() { return ( - + No results found. @@ -49,6 +49,6 @@ export function CommandDemo() { - + ) } diff --git a/apps/docs/src/components/examples/dialog/demo.tsx b/apps/docs/src/components/examples/dialog/demo.tsx index 586ecb9b..1ae35b60 100644 --- a/apps/docs/src/components/examples/dialog/demo.tsx +++ b/apps/docs/src/components/examples/dialog/demo.tsx @@ -1,10 +1,10 @@ 'use client' -import { Button, Dialog, Input, Label } from '@nerdfish/ui' +import { Button, Dialog, Input, FieldLabel } from '@nerdfish/ui' export function DialogDemo() { return ( - + @@ -18,17 +18,17 @@ export function DialogDemo() {
- +
- +
@@ -38,6 +38,6 @@ export function DialogDemo() { -
+ ) } diff --git a/apps/docs/src/components/examples/double-label-link/demo.tsx b/apps/docs/src/components/examples/double-label-link/demo.tsx deleted file mode 100644 index eacf5850..00000000 --- a/apps/docs/src/components/examples/double-label-link/demo.tsx +++ /dev/null @@ -1,11 +0,0 @@ -'use client' - -import { DoubleLabelLink } from '@nerdfish/ui' - -export function DoubleLabelLinkDemo() { - return ( - - label 1 - - ) -} diff --git a/apps/docs/src/components/examples/drawer/demo.tsx b/apps/docs/src/components/examples/drawer/demo.tsx index 6d638de6..edbb5b48 100644 --- a/apps/docs/src/components/examples/drawer/demo.tsx +++ b/apps/docs/src/components/examples/drawer/demo.tsx @@ -4,7 +4,7 @@ import { Button, Drawer } from '@nerdfish/ui' export function DrawerDemo() { return ( - + @@ -20,6 +20,6 @@ export function DrawerDemo() { - + ) } diff --git a/apps/docs/src/components/examples/drawer/direction.tsx b/apps/docs/src/components/examples/drawer/direction.tsx index e238094a..117115ff 100644 --- a/apps/docs/src/components/examples/drawer/direction.tsx +++ b/apps/docs/src/components/examples/drawer/direction.tsx @@ -5,7 +5,7 @@ import { Button, Drawer } from '@nerdfish/ui' export function DrawerDirection() { return (
- + @@ -23,8 +23,8 @@ export function DrawerDirection() { - - + + @@ -42,8 +42,8 @@ export function DrawerDirection() { - - + + @@ -61,8 +61,8 @@ export function DrawerDirection() { - - + + @@ -80,7 +80,7 @@ export function DrawerDirection() { - +
) } diff --git a/apps/docs/src/components/examples/drawer/responsive.tsx b/apps/docs/src/components/examples/drawer/responsive.tsx index dc3fd20c..06724f3a 100644 --- a/apps/docs/src/components/examples/drawer/responsive.tsx +++ b/apps/docs/src/components/examples/drawer/responsive.tsx @@ -10,7 +10,7 @@ export function DrawerResponsiveDemo() { if (isDesktop) { return ( - + @@ -24,12 +24,12 @@ export function DrawerResponsiveDemo() { - + ) } return ( - + @@ -47,7 +47,7 @@ export function DrawerResponsiveDemo() { - + ) } diff --git a/apps/docs/src/components/examples/dropdown-menu/demo.tsx b/apps/docs/src/components/examples/dropdown-menu/demo.tsx index 2806fb7e..6b22b9a4 100644 --- a/apps/docs/src/components/examples/dropdown-menu/demo.tsx +++ b/apps/docs/src/components/examples/dropdown-menu/demo.tsx @@ -20,7 +20,7 @@ import { export function DropdownMenuDemo() { return ( - + @@ -104,6 +104,6 @@ export function DropdownMenuDemo() { ⇧⌘Q - + ) } diff --git a/apps/docs/src/components/examples/grid/demo.tsx b/apps/docs/src/components/examples/grid/demo.tsx index 471ffcca..6865788b 100644 --- a/apps/docs/src/components/examples/grid/demo.tsx +++ b/apps/docs/src/components/examples/grid/demo.tsx @@ -127,13 +127,13 @@ const features: (ExtractProps & { export function GridDemo() { return (
- + {features.map(({ className, ...feature }) => ( ))} - +
) } diff --git a/apps/docs/src/components/examples/hover-card/demo.tsx b/apps/docs/src/components/examples/hover-card/demo.tsx index f386c098..09a56399 100644 --- a/apps/docs/src/components/examples/hover-card/demo.tsx +++ b/apps/docs/src/components/examples/hover-card/demo.tsx @@ -4,7 +4,7 @@ import { HoverCard } from '@nerdfish/ui' export function HoverCardDemo() { return ( - + Hover over the cake
@@ -15,6 +15,6 @@ export function HoverCardDemo() {

- + ) } diff --git a/apps/docs/src/components/examples/index.ts b/apps/docs/src/components/examples/index.ts index 65d1562d..70e7b315 100644 --- a/apps/docs/src/components/examples/index.ts +++ b/apps/docs/src/components/examples/index.ts @@ -37,7 +37,6 @@ import { DateRangePickerExample } from './date-picker/date-range-picker' import { DatePickerDemo } from './date-picker/demo' import { DatePickerWithInputExample } from './date-picker/with-input' import { DialogDemo } from './dialog/demo' -import { DoubleLabelLinkDemo } from './double-label-link/demo' import { DrawerDemo } from './drawer/demo' import { DrawerDirection } from './drawer/direction' import { DrawerResponsiveDemo } from './drawer/responsive' @@ -128,7 +127,6 @@ export const examples = { DatePickerWithInputExample, DateRangePickerExample, DialogDemo, - DoubleLabelLinkDemo, DrawerDemo, DrawerDirection, DrawerResponsiveDemo, diff --git a/apps/docs/src/components/examples/indicator/demo.tsx b/apps/docs/src/components/examples/indicator/demo.tsx index 7b459b40..3125a88b 100644 --- a/apps/docs/src/components/examples/indicator/demo.tsx +++ b/apps/docs/src/components/examples/indicator/demo.tsx @@ -4,11 +4,11 @@ import { Indicator } from '@nerdfish/ui' export function IndicatorDemo() { return ( - +
content
- + ) } diff --git a/apps/docs/src/components/examples/indicator/item.tsx b/apps/docs/src/components/examples/indicator/item.tsx index becd4c73..77ffaee4 100644 --- a/apps/docs/src/components/examples/indicator/item.tsx +++ b/apps/docs/src/components/examples/indicator/item.tsx @@ -4,11 +4,11 @@ import { Badge, Indicator } from '@nerdfish/ui' export function IndicatorItemDemo() { return ( - + 99+
content
- + ) } diff --git a/apps/docs/src/components/examples/indicator/positions.tsx b/apps/docs/src/components/examples/indicator/positions.tsx index 37409f8f..4335c86d 100644 --- a/apps/docs/src/components/examples/indicator/positions.tsx +++ b/apps/docs/src/components/examples/indicator/positions.tsx @@ -4,7 +4,7 @@ import { Badge, Indicator } from '@nerdfish/ui' export function IndicatorPositionsDemo() { return ( - + top left @@ -33,6 +33,6 @@ export function IndicatorPositionsDemo() { bottom right
content
- + ) } diff --git a/apps/docs/src/components/examples/input-otp/demo.tsx b/apps/docs/src/components/examples/input-otp/demo.tsx index 63d18db7..547acc30 100644 --- a/apps/docs/src/components/examples/input-otp/demo.tsx +++ b/apps/docs/src/components/examples/input-otp/demo.tsx @@ -2,7 +2,7 @@ import { InputOTP } from '@nerdfish/ui' export function InputOTPDemo() { return ( - ( <> diff --git a/apps/docs/src/components/examples/input-otp/field.tsx b/apps/docs/src/components/examples/input-otp/field.tsx index 2ec69460..05dfce7d 100644 --- a/apps/docs/src/components/examples/input-otp/field.tsx +++ b/apps/docs/src/components/examples/input-otp/field.tsx @@ -7,7 +7,7 @@ export function InputOTPFieldDemo() { htmlFor="otp" description="Enter the 6-digit code sent to your phone" > - ( diff --git a/apps/docs/src/components/examples/input-otp/patterns.tsx b/apps/docs/src/components/examples/input-otp/patterns.tsx index bb7b2e25..058389fa 100644 --- a/apps/docs/src/components/examples/input-otp/patterns.tsx +++ b/apps/docs/src/components/examples/input-otp/patterns.tsx @@ -2,7 +2,7 @@ import { InputOTP, inputOTPPatterns } from '@nerdfish/ui' export function InputOTPPatternsDemo() { return ( - ( diff --git a/apps/docs/src/components/examples/navigation-list/demo.tsx b/apps/docs/src/components/examples/navigation-list/demo.tsx index 27ad9321..3e9124ab 100644 --- a/apps/docs/src/components/examples/navigation-list/demo.tsx +++ b/apps/docs/src/components/examples/navigation-list/demo.tsx @@ -5,7 +5,7 @@ import { Icons } from '~/components/icons' export function NavigationListDemo() { return ( - + - + ) } diff --git a/apps/docs/src/components/examples/navigation-menu/demo.tsx b/apps/docs/src/components/examples/navigation-menu/demo.tsx index 80752036..bd44bbda 100644 --- a/apps/docs/src/components/examples/navigation-menu/demo.tsx +++ b/apps/docs/src/components/examples/navigation-menu/demo.tsx @@ -71,7 +71,7 @@ ListItem.displayName = 'ListItem' export function NavigationMenuDemo() { return ( - + Getting started @@ -113,6 +113,6 @@ export function NavigationMenuDemo() { - + ) } diff --git a/apps/docs/src/components/examples/popover/demo.tsx b/apps/docs/src/components/examples/popover/demo.tsx index 92bafcbe..33c57a84 100644 --- a/apps/docs/src/components/examples/popover/demo.tsx +++ b/apps/docs/src/components/examples/popover/demo.tsx @@ -1,11 +1,11 @@ 'use client' -import { Button, Input, Label, Popover } from '@nerdfish/ui' +import { Button, Input, FieldLabel, Popover } from '@nerdfish/ui' import { Cake } from 'lucide-react' export function PopoverDemo() { return ( - +
- + Diameter
- + Max. Layers
- + Height
- + Max. Toppings
- + ) } diff --git a/apps/docs/src/components/examples/radio-group/demo.tsx b/apps/docs/src/components/examples/radio-group/demo.tsx index 25ab39e0..a6d6a28e 100644 --- a/apps/docs/src/components/examples/radio-group/demo.tsx +++ b/apps/docs/src/components/examples/radio-group/demo.tsx @@ -1,24 +1,28 @@ -import { Description, Label, RadioGroup } from '@nerdfish/ui' +import { FieldDescription, FieldLabel, RadioGroup } from '@nerdfish/ui' export function RadioGroupDemo() { return ( - + - - + Default + This is a description for the Radio Group. It could be a very long description that can contain html elements. - +
- + Comfortable
- + Compact
- + ) } diff --git a/apps/docs/src/components/examples/slider/demo.tsx b/apps/docs/src/components/examples/slider/demo.tsx index 2d1735ab..331a5efa 100644 --- a/apps/docs/src/components/examples/slider/demo.tsx +++ b/apps/docs/src/components/examples/slider/demo.tsx @@ -4,11 +4,9 @@ import { Slider } from '@nerdfish/ui' import { cx } from '@nerdfish/utils' import * as React from 'react' -type SliderProps = React.ComponentProps - -export function SliderDemo({ className, ...props }: SliderProps) { +export function SliderDemo({ className, ...props }: Slider.RootProps) { return ( - - + ) } diff --git a/apps/docs/src/components/examples/switch/demo.tsx b/apps/docs/src/components/examples/switch/demo.tsx index 60d6b92b..a550da5a 100644 --- a/apps/docs/src/components/examples/switch/demo.tsx +++ b/apps/docs/src/components/examples/switch/demo.tsx @@ -1,12 +1,12 @@ 'use client' -import { Label, Switch } from '@nerdfish/ui' +import { FieldLabel, Switch } from '@nerdfish/ui' export function SwitchDemo() { return (
- + Sugar on cake
) } diff --git a/apps/docs/src/components/examples/table/demo.tsx b/apps/docs/src/components/examples/table/demo.tsx index e5c37be3..0ba47c16 100644 --- a/apps/docs/src/components/examples/table/demo.tsx +++ b/apps/docs/src/components/examples/table/demo.tsx @@ -47,7 +47,7 @@ const invoices = [ export function TableDemo() { return ( - + A list of your recent invoices. @@ -69,6 +69,6 @@ export function TableDemo() { ))} -
+ ) } diff --git a/apps/docs/src/components/examples/tabs/demo.tsx b/apps/docs/src/components/examples/tabs/demo.tsx index f238ea33..614a5a1c 100644 --- a/apps/docs/src/components/examples/tabs/demo.tsx +++ b/apps/docs/src/components/examples/tabs/demo.tsx @@ -4,7 +4,7 @@ import { Tabs } from '@nerdfish/ui' export function TabsDemo() { return ( - + General Privacy @@ -15,6 +15,6 @@ export function TabsDemo() {

Privacy settings tab

 - + ) } diff --git a/apps/docs/src/components/examples/toggle/group.tsx b/apps/docs/src/components/examples/toggle/group.tsx index 94be2b65..cbe2268d 100644 --- a/apps/docs/src/components/examples/toggle/group.tsx +++ b/apps/docs/src/components/examples/toggle/group.tsx @@ -6,12 +6,12 @@ import { Bold, Italic, Underline } from 'lucide-react' export function ToggleGroupDemo() { return (
- + A B C - - + + @@ -21,7 +21,7 @@ export function ToggleGroupDemo() { - +
) } diff --git a/apps/docs/src/components/examples/tooltip/demo.tsx b/apps/docs/src/components/examples/tooltip/demo.tsx index 15478c75..fd9e1c0a 100644 --- a/apps/docs/src/components/examples/tooltip/demo.tsx +++ b/apps/docs/src/components/examples/tooltip/demo.tsx @@ -4,7 +4,7 @@ import { Plus } from 'lucide-react' export function TooltipDemo() { return ( - + - { @@ -32,7 +32,7 @@ export function MobileNavigation() { - + ) } diff --git a/apps/docs/src/components/navigation.tsx b/apps/docs/src/components/navigation.tsx index 7110b5af..7adb6471 100644 --- a/apps/docs/src/components/navigation.tsx +++ b/apps/docs/src/components/navigation.tsx @@ -11,7 +11,7 @@ export function Navigation(props: React.ComponentPropsWithoutRef<'nav'>) { return ( ) } diff --git a/apps/docs/src/config/docs.ts b/apps/docs/src/config/docs.ts index 5940daf0..b69b4ba3 100644 --- a/apps/docs/src/config/docs.ts +++ b/apps/docs/src/config/docs.ts @@ -35,7 +35,6 @@ export const docs = { title: 'Buttons', links: [ { title: 'Button', href: '/button' }, - { title: 'DoubleLabelLink', href: '/double-label-link' }, { title: 'Link', href: '/link' }, ], }, diff --git a/packages/ui/src/accordion.tsx b/packages/ui/src/accordion/accordion.tsx similarity index 75% rename from packages/ui/src/accordion.tsx rename to packages/ui/src/accordion/accordion.tsx index 7ac89987..1d390684 100644 --- a/packages/ui/src/accordion.tsx +++ b/packages/ui/src/accordion/accordion.tsx @@ -5,7 +5,9 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion' import { ChevronDown } from 'lucide-react' import * as React from 'react' -const AccordionItem = React.forwardRef< +export const AccordionRoot = AccordionPrimitive.Root + +export const AccordionItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -20,7 +22,7 @@ const AccordionItem = React.forwardRef< )) AccordionItem.displayName = 'AccordionItem' -const AccordionTrigger = React.forwardRef< +export const AccordionTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( @@ -40,7 +42,7 @@ const AccordionTrigger = React.forwardRef< )) AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName -const AccordionContent = React.forwardRef< +export const AccordionContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( @@ -57,10 +59,15 @@ const AccordionContent = React.forwardRef< )) AccordionContent.displayName = AccordionPrimitive.Content.displayName -const Accordion = Object.assign(AccordionPrimitive.Root, { - Item: AccordionItem, - Trigger: AccordionTrigger, - Content: AccordionContent, -}) - -export { Accordion } +export type AccordionRootProps = React.ComponentPropsWithoutRef< + typeof AccordionRoot +> +export type AccordionItemProps = React.ComponentPropsWithoutRef< + typeof AccordionItem +> +export type AccordionTriggerProps = React.ComponentPropsWithoutRef< + typeof AccordionTrigger +> +export type AccordionContentProps = React.ComponentPropsWithoutRef< + typeof AccordionContent +> diff --git a/packages/ui/src/accordion/index.ts b/packages/ui/src/accordion/index.ts new file mode 100644 index 00000000..dcf163e4 --- /dev/null +++ b/packages/ui/src/accordion/index.ts @@ -0,0 +1,15 @@ +export { + AccordionRoot, + AccordionItem, + AccordionTrigger, + AccordionContent, +} from './accordion' + +export type { + AccordionRootProps, + AccordionItemProps, + AccordionTriggerProps, + AccordionContentProps, +} from './accordion' + +export * as Accordion from './namespace' diff --git a/packages/ui/src/accordion/namespace.ts b/packages/ui/src/accordion/namespace.ts new file mode 100644 index 00000000..11dbee80 --- /dev/null +++ b/packages/ui/src/accordion/namespace.ts @@ -0,0 +1,13 @@ +export { + AccordionRoot as Root, + AccordionContent as Content, + AccordionItem as Item, + AccordionTrigger as Trigger, +} from './accordion' + +export type { + AccordionRootProps as RootProps, + AccordionItemProps as ItemProps, + AccordionTriggerProps as TriggerProps, + AccordionContentProps as ContentProps, +} from './accordion' diff --git a/packages/ui/src/alert-dialog.tsx b/packages/ui/src/alert-dialog/alert-dialog.tsx similarity index 64% rename from packages/ui/src/alert-dialog.tsx rename to packages/ui/src/alert-dialog/alert-dialog.tsx index 562a5a21..69166f52 100644 --- a/packages/ui/src/alert-dialog.tsx +++ b/packages/ui/src/alert-dialog/alert-dialog.tsx @@ -4,7 +4,10 @@ import { cx } from '@nerdfish/utils' import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog' import * as React from 'react' -const AlertDialogPortal = ({ +export const AlertDialogRoot = AlertDialogPrimitive.Root +export const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +export const AlertDialogPortal = ({ className, children, ...props @@ -24,7 +27,7 @@ const AlertDialogPortal = ({ ) AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName -const AlertDialogOverlay = React.forwardRef< +export const AlertDialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( @@ -39,7 +42,7 @@ const AlertDialogOverlay = React.forwardRef< )) AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName -const DialogContent = React.forwardRef< +export const AlertDialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -55,9 +58,9 @@ const DialogContent = React.forwardRef< /> )) -DialogContent.displayName = AlertDialogPrimitive.Content.displayName +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName -const DialogHeader = ({ +export const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes) => ( @@ -69,9 +72,9 @@ const DialogHeader = ({ {...props} /> ) -DialogHeader.displayName = 'DialogHeader' +AlertDialogHeader.displayName = 'AlertDialogHeader' -const DialogFooter = ({ +export const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes) => ( @@ -83,9 +86,9 @@ const DialogFooter = ({ {...props} /> ) -DialogFooter.displayName = 'DialogFooter' +AlertDialogFooter.displayName = 'AlertDialogFooter' -const DialogTitle = React.forwardRef< +export const AlertDialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -95,9 +98,9 @@ const DialogTitle = React.forwardRef< {...props} /> )) -DialogTitle.displayName = AlertDialogPrimitive.Title.displayName +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName -const DialogDescription = React.forwardRef< +export const AlertDialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -107,9 +110,10 @@ const DialogDescription = React.forwardRef< {...props} /> )) -DialogDescription.displayName = AlertDialogPrimitive.Description.displayName +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName -const DialogAction = React.forwardRef< +export const AlertDialogAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -122,9 +126,9 @@ const DialogAction = React.forwardRef< {...props} /> )) -DialogAction.displayName = AlertDialogPrimitive.Action.displayName +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName -const DialogCancel = React.forwardRef< +export const AlertDialogCancel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -137,17 +141,38 @@ const DialogCancel = React.forwardRef< {...props} /> )) -DialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName - -const AlertDialog = Object.assign(AlertDialogPrimitive.Root, { - Trigger: AlertDialogPrimitive.Trigger, - Content: DialogContent, - Header: DialogHeader, - Footer: DialogFooter, - Title: DialogTitle, - Description: DialogDescription, - Action: DialogAction, - Cancel: DialogCancel, -}) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName -export { AlertDialog } +export type AlertDialogRootProps = React.ComponentPropsWithoutRef< + typeof AlertDialogRoot +> +export type AlertDialogPortalProps = React.ComponentPropsWithoutRef< + typeof AlertDialogPortal +> +export type AlertDialogOverlayProps = React.ComponentPropsWithoutRef< + typeof AlertDialogOverlay +> +export type AlertDialogTriggerProps = React.ComponentPropsWithoutRef< + typeof AlertDialogTrigger +> +export type AlertDialogContentProps = React.ComponentPropsWithoutRef< + typeof AlertDialogContent +> +export type AlertDialogHeaderProps = React.ComponentPropsWithoutRef< + typeof AlertDialogHeader +> +export type AlertDialogFooterProps = React.ComponentPropsWithoutRef< + typeof AlertDialogFooter +> +export type AlertDialogTitleProps = React.ComponentPropsWithoutRef< + typeof AlertDialogTitle +> +export type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef< + typeof AlertDialogDescription +> +export type AlertDialogActionProps = React.ComponentPropsWithoutRef< + typeof AlertDialogAction +> +export type AlertDialogCancelProps = React.ComponentPropsWithoutRef< + typeof AlertDialogCancel +> diff --git a/packages/ui/src/alert-dialog/index.ts b/packages/ui/src/alert-dialog/index.ts new file mode 100644 index 00000000..46acc24e --- /dev/null +++ b/packages/ui/src/alert-dialog/index.ts @@ -0,0 +1,29 @@ +export { + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogOverlay, + AlertDialogPortal, + AlertDialogRoot, + AlertDialogTitle, + AlertDialogTrigger, +} from './alert-dialog' + +export type { + AlertDialogActionProps, + AlertDialogCancelProps, + AlertDialogContentProps, + AlertDialogDescriptionProps, + AlertDialogFooterProps, + AlertDialogHeaderProps, + AlertDialogOverlayProps, + AlertDialogPortalProps, + AlertDialogRootProps, + AlertDialogTitleProps, + AlertDialogTriggerProps, +} from './alert-dialog' + +export * as AlertDialog from './namespace' diff --git a/packages/ui/src/alert-dialog/namespace.ts b/packages/ui/src/alert-dialog/namespace.ts new file mode 100644 index 00000000..0302929a --- /dev/null +++ b/packages/ui/src/alert-dialog/namespace.ts @@ -0,0 +1,25 @@ +export { + AlertDialogAction as Action, + AlertDialogCancel as Cancel, + AlertDialogContent as Content, + AlertDialogDescription as Description, + AlertDialogFooter as Footer, + AlertDialogHeader as Header, + AlertDialogOverlay as Overlay, + AlertDialogPortal as Portal, + AlertDialogRoot as Root, + AlertDialogTitle as Title, + AlertDialogTrigger as Trigger, +} from './alert-dialog' + +export type { + AlertDialogRootProps as RootProps, + AlertDialogContentProps as ContentProps, + AlertDialogDescriptionProps as DescriptionProps, + AlertDialogFooterProps as FooterProps, + AlertDialogHeaderProps as HeaderProps, + AlertDialogOverlayProps as OverlayProps, + AlertDialogPortalProps as PortalProps, + AlertDialogTitleProps as TitleProps, + AlertDialogTriggerProps as TriggerProps, +} from './alert-dialog' diff --git a/packages/ui/src/alert.tsx b/packages/ui/src/alert/alert.tsx similarity index 80% rename from packages/ui/src/alert.tsx rename to packages/ui/src/alert/alert.tsx index 0020538e..866859e8 100644 --- a/packages/ui/src/alert.tsx +++ b/packages/ui/src/alert/alert.tsx @@ -6,8 +6,8 @@ import * as React from 'react' const DEFAULT_VARIANT = 'info' -const alertVariants = cva( - 'relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-current [&>svg~*]:pl-7', +export const alertVariants = cva( + 'relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-current [&>svg~]*]:pl-7', { variants: { variant: { @@ -33,7 +33,7 @@ const IconMap: Record< info: Info, } -const AlertTitle = React.forwardRef< +export const AlertTitle = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( @@ -45,7 +45,7 @@ const AlertTitle = React.forwardRef< )) AlertTitle.displayName = 'AlertTitle' -const AlertDescription = React.forwardRef< +export const AlertDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => ( @@ -71,7 +71,7 @@ function AlertIcon({ return } -const RawAlert = React.forwardRef< +export const AlertRoot = React.forwardRef< HTMLDivElement, React.ComponentPropsWithRef<'div'> & { variant?: VariantProps['variant'] @@ -80,7 +80,7 @@ const RawAlert = React.forwardRef< children?: React.ReactNode description?: string } ->(function Alert( +>(function AlertRoot( { className, variant, hideIcon, title, children, description, ...props }, ref, ) { @@ -96,7 +96,11 @@ const RawAlert = React.forwardRef< return (
@@ -106,11 +110,10 @@ const RawAlert = React.forwardRef<
) }) -RawAlert.displayName = 'Alert' +AlertRoot.displayName = 'Alert' -const Alert = Object.assign(RawAlert, { - Title: AlertTitle, - Description: AlertDescription, -}) - -export { Alert } +export type AlertRootProps = React.ComponentPropsWithoutRef +export type AlertTitleProps = React.ComponentPropsWithoutRef +export type AlertDescriptionProps = React.ComponentPropsWithoutRef< + typeof AlertDescription +> diff --git a/packages/ui/src/alert/index.ts b/packages/ui/src/alert/index.ts new file mode 100644 index 00000000..17f14c5a --- /dev/null +++ b/packages/ui/src/alert/index.ts @@ -0,0 +1,9 @@ +export { alertVariants, AlertRoot, AlertTitle, AlertDescription } from './alert' + +export type { + AlertRootProps, + AlertTitleProps, + AlertDescriptionProps, +} from './alert' + +export * as Alert from './namespace' diff --git a/packages/ui/src/alert/namespace.ts b/packages/ui/src/alert/namespace.ts new file mode 100644 index 00000000..408e9de7 --- /dev/null +++ b/packages/ui/src/alert/namespace.ts @@ -0,0 +1,11 @@ +export { + AlertRoot as Root, + AlertTitle as Title, + AlertDescription as Description, +} from './alert' + +export type { + AlertRootProps as RootProps, + AlertTitleProps as TitleProps, + AlertDescriptionProps as DescriptionProps, +} from './alert' diff --git a/packages/ui/src/aspect-ratio.tsx b/packages/ui/src/aspect-ratio.tsx index 794c6f4c..7cc17f6d 100644 --- a/packages/ui/src/aspect-ratio.tsx +++ b/packages/ui/src/aspect-ratio.tsx @@ -2,6 +2,6 @@ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio' -const AspectRatio = AspectRatioPrimitive.Root +export const AspectRatio = AspectRatioPrimitive.Root -export { AspectRatio } +export type AspectRatioProps = AspectRatioPrimitive.AspectRatioProps diff --git a/packages/ui/src/avatar.tsx b/packages/ui/src/avatar/avatar.tsx similarity index 75% rename from packages/ui/src/avatar.tsx rename to packages/ui/src/avatar/avatar.tsx index c0fe072b..3b45885d 100644 --- a/packages/ui/src/avatar.tsx +++ b/packages/ui/src/avatar/avatar.tsx @@ -4,7 +4,7 @@ import { cx } from '@nerdfish/utils' import * as AvatarPrimitive from '@radix-ui/react-avatar' import * as React from 'react' -const AvatarRoot = React.forwardRef< +export const AvatarRoot = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -19,7 +19,7 @@ const AvatarRoot = React.forwardRef< )) AvatarRoot.displayName = AvatarPrimitive.Root.displayName -const AvatarImage = React.forwardRef< +export const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -31,7 +31,7 @@ const AvatarImage = React.forwardRef< )) AvatarImage.displayName = AvatarPrimitive.Image.displayName -const AvatarFallback = React.forwardRef< +export const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( @@ -46,9 +46,10 @@ const AvatarFallback = React.forwardRef< )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName -const Avatar = Object.assign(AvatarRoot, { - Image: AvatarImage, - Fallback: AvatarFallback, -}) - -export { Avatar } +export type AvatarRootProps = React.ComponentPropsWithoutRef +export type AvatarImageProps = React.ComponentPropsWithoutRef< + typeof AvatarImage +> +export type AvatarFallbackProps = React.ComponentPropsWithoutRef< + typeof AvatarFallback +> diff --git a/packages/ui/src/avatar/index.ts b/packages/ui/src/avatar/index.ts new file mode 100644 index 00000000..7a511fa4 --- /dev/null +++ b/packages/ui/src/avatar/index.ts @@ -0,0 +1,9 @@ +export { AvatarRoot, AvatarImage, AvatarFallback } from './avatar' + +export type { + AvatarRootProps, + AvatarImageProps, + AvatarFallbackProps, +} from './avatar' + +export * as Avatar from './namespace' diff --git a/packages/ui/src/avatar/namespace.ts b/packages/ui/src/avatar/namespace.ts new file mode 100644 index 00000000..5a05e70d --- /dev/null +++ b/packages/ui/src/avatar/namespace.ts @@ -0,0 +1,11 @@ +export { + AvatarRoot as Root, + AvatarImage as Image, + AvatarFallback as Fallback, +} from './avatar' + +export type { + AvatarRootProps as RootProps, + AvatarImageProps as ImageProps, + AvatarFallbackProps as FallbackProps, +} from './avatar' diff --git a/packages/ui/src/badge.tsx b/packages/ui/src/badge.tsx index d734cead..86ae5592 100644 --- a/packages/ui/src/badge.tsx +++ b/packages/ui/src/badge.tsx @@ -3,7 +3,7 @@ import { cva, cx, type VariantProps } from '@nerdfish/utils' import * as React from 'react' -const badgeVariants = cva( +export const badgeVariants = cva( 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors', { variants: { @@ -23,14 +23,18 @@ const badgeVariants = cva( }, ) -export interface BadgeProps - extends React.HTMLAttributes, - VariantProps {} - -function Badge({ className, variant, ...props }: BadgeProps) { +export const Badge = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => { return ( -
+
) -} +}) +Badge.displayName = 'Badge' -export { Badge, badgeVariants } +export type BadgeProps = React.ComponentPropsWithoutRef diff --git a/packages/ui/src/breadcrumb.tsx b/packages/ui/src/breadcrumb/breadcrumb.tsx similarity index 68% rename from packages/ui/src/breadcrumb.tsx rename to packages/ui/src/breadcrumb/breadcrumb.tsx index ef56dcf0..b567b203 100644 --- a/packages/ui/src/breadcrumb.tsx +++ b/packages/ui/src/breadcrumb/breadcrumb.tsx @@ -5,15 +5,15 @@ import { Slot } from '@radix-ui/react-slot' import { ChevronRight, MoreHorizontal } from 'lucide-react' import * as React from 'react' -const BaseBreadcrumb = React.forwardRef< +export const BreadcrumbRoot = React.forwardRef< HTMLElement, React.ComponentPropsWithoutRef<'nav'> & { separator?: React.ReactNode } >(({ ...props }, ref) =>