@minidev.fun/ui 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/minidev.fun/color-mode/color-mode-initializer.js.map +1 -0
- package/dist/{src/components → components}/minidev.fun/color-mode/color-mode-toggle.js +6 -6
- package/dist/components/minidev.fun/color-mode/color-mode-toggle.js.map +1 -0
- package/dist/components/minidev.fun/color-mode/index.d.ts +4 -0
- package/dist/components/minidev.fun/color-mode/index.js +9 -0
- package/dist/components/minidev.fun/color-mode/use-color-mode.js.map +1 -0
- package/dist/components/minidev.fun/first-light/first-light-filters.js +114 -0
- package/dist/components/minidev.fun/first-light/first-light-filters.js.map +1 -0
- package/dist/components/minidev.fun/first-light/index.d.ts +2 -0
- package/dist/components/minidev.fun/first-light/index.js +5 -0
- package/dist/components/minidev.fun/first-light/index.js.map +1 -0
- package/dist/components/minidev.fun/typography/blockquote.js +23 -0
- package/dist/components/minidev.fun/typography/blockquote.js.map +1 -0
- package/dist/components/minidev.fun/typography/code.js +23 -0
- package/dist/components/minidev.fun/typography/code.js.map +1 -0
- package/dist/components/minidev.fun/typography/index.d.ts +6 -0
- package/dist/components/minidev.fun/typography/index.js +15 -0
- package/dist/components/minidev.fun/typography/index.js.map +1 -0
- package/dist/components/minidev.fun/typography/list-item.js +19 -0
- package/dist/components/minidev.fun/typography/list-item.js.map +1 -0
- package/dist/components/minidev.fun/typography/text.js +59 -0
- package/dist/components/minidev.fun/typography/text.js.map +1 -0
- package/dist/components/minidev.fun/typography/title.js +47 -0
- package/dist/components/minidev.fun/typography/title.js.map +1 -0
- package/dist/components/ui/accordion.d.ts +27 -0
- package/dist/components/ui/{src/components/ui/accordion.js → accordion.js} +8 -8
- package/dist/components/ui/accordion.js.map +1 -0
- package/dist/components/ui/alert-dialog.d.ts +47 -0
- package/dist/components/ui/{src/components/ui/alert-dialog.js → alert-dialog.js} +9 -9
- package/dist/components/ui/alert-dialog.js.map +1 -0
- package/dist/components/ui/alert.d.ts +30 -0
- package/dist/components/ui/{src/components/ui/alert.js → alert.js} +2 -2
- package/dist/components/ui/alert.js.map +1 -0
- package/dist/components/ui/aspect-ratio.d.ts +11 -0
- package/dist/components/ui/{src/components/ui/aspect-ratio.js → aspect-ratio.js} +1 -1
- package/dist/components/ui/aspect-ratio.js.map +1 -0
- package/dist/components/ui/avatar.d.ts +42 -0
- package/dist/components/ui/{src/components/ui/avatar.js → avatar.js} +4 -4
- package/dist/components/ui/avatar.js.map +1 -0
- package/dist/components/ui/badge.d.ts +16 -0
- package/dist/components/ui/{src/components/ui/badge.js → badge.js} +4 -4
- package/dist/components/ui/badge.js.map +1 -0
- package/dist/components/ui/breadcrumb.d.ts +39 -0
- package/dist/components/ui/{src/components/ui/breadcrumb.js → breadcrumb.js} +5 -5
- package/dist/components/ui/breadcrumb.js.map +1 -0
- package/dist/components/ui/button-group.d.ts +26 -0
- package/dist/components/ui/{src/components/ui/button-group.js → button-group.js} +4 -4
- package/dist/components/ui/button-group.js.map +1 -0
- package/dist/components/ui/button.d.ts +41 -0
- package/dist/components/ui/{src/components/ui/button.js → button.js} +3 -3
- package/dist/components/ui/button.js.map +1 -0
- package/dist/components/ui/calendar.d.ts +20 -0
- package/dist/components/ui/{src/components/ui/calendar.js → calendar.js} +4 -4
- package/dist/components/ui/calendar.js.map +1 -0
- package/dist/components/ui/card.d.ts +30 -0
- package/dist/components/ui/{src/components/ui/card.js → card.js} +1 -1
- package/dist/components/ui/card.js.map +1 -0
- package/dist/components/ui/carousel.d.ts +56 -0
- package/dist/components/ui/{src/components/ui/carousel.js → carousel.js} +3 -3
- package/dist/components/ui/carousel.js.map +1 -0
- package/dist/components/ui/chart.d.ts +73 -0
- package/dist/components/ui/{src/components/ui/chart.js → chart.js} +1 -1
- package/dist/components/ui/chart.js.map +1 -0
- package/dist/components/ui/checkbox.d.ts +11 -0
- package/dist/components/ui/{src/components/ui/checkbox.js → checkbox.js} +4 -4
- package/dist/components/ui/checkbox.js.map +1 -0
- package/dist/components/ui/collapsible.d.ts +21 -0
- package/dist/components/ui/{src/components/ui/collapsible.js → collapsible.js} +3 -3
- package/dist/components/ui/collapsible.js.map +1 -0
- package/dist/components/ui/combobox.d.ts +80 -0
- package/dist/components/ui/{src/components/ui/combobox.js → combobox.js} +23 -23
- package/dist/components/ui/combobox.js.map +1 -0
- package/dist/components/ui/command.d.ts +63 -0
- package/dist/components/ui/{src/components/ui/command.js → command.js} +4 -4
- package/dist/components/ui/command.js.map +1 -0
- package/dist/components/ui/context-menu.d.ts +64 -0
- package/dist/components/ui/{src/components/ui/context-menu.js → context-menu.js} +20 -20
- package/dist/components/ui/context-menu.js.map +1 -0
- package/dist/components/ui/dialog.d.ts +69 -0
- package/dist/components/ui/{src/components/ui/dialog.js → dialog.js} +10 -10
- package/dist/components/ui/dialog.js.map +1 -0
- package/dist/components/ui/drawer.d.ts +40 -0
- package/dist/components/ui/{src/components/ui/drawer.js → drawer.js} +2 -2
- package/dist/components/ui/drawer.js.map +1 -0
- package/dist/components/ui/dropdown-menu.d.ts +88 -0
- package/dist/components/ui/{src/components/ui/dropdown-menu.js → dropdown-menu.js} +20 -20
- package/dist/components/ui/dropdown-menu.js.map +1 -0
- package/dist/components/ui/empty.d.ts +41 -0
- package/dist/components/ui/{src/components/ui/empty.js → empty.js} +2 -2
- package/dist/components/ui/empty.js.map +1 -0
- package/dist/components/ui/field.d.ts +78 -0
- package/dist/components/ui/{src/components/ui/field.js → field.js} +2 -2
- package/dist/components/ui/field.js.map +1 -0
- package/dist/components/ui/hover-card.d.ts +21 -0
- package/dist/components/ui/{src/components/ui/hover-card.js → hover-card.js} +6 -6
- package/dist/components/ui/hover-card.js.map +1 -0
- package/dist/components/ui/input-group.d.ts +50 -0
- package/dist/components/ui/{src/components/ui/input-group.js → input-group.js} +2 -2
- package/dist/components/ui/input-group.js.map +1 -0
- package/dist/components/ui/input-otp.d.ts +34 -0
- package/dist/components/ui/{src/components/ui/input-otp.js → input-otp.js} +2 -2
- package/dist/components/ui/input-otp.js.map +1 -0
- package/dist/components/ui/input.d.ts +11 -0
- package/dist/components/ui/{src/components/ui/input.js → input.js} +2 -2
- package/dist/components/ui/input.js.map +1 -0
- package/dist/components/ui/item.d.ts +69 -0
- package/dist/components/ui/{src/components/ui/item.js → item.js} +4 -4
- package/dist/components/ui/item.js.map +1 -0
- package/dist/components/ui/kbd.d.ts +14 -0
- package/dist/components/ui/{src/components/ui/kbd.js → kbd.js} +1 -1
- package/dist/components/ui/kbd.js.map +1 -0
- package/dist/components/ui/label.d.ts +9 -0
- package/dist/components/ui/{src/components/ui/label.js → label.js} +1 -1
- package/dist/components/ui/label.js.map +1 -0
- package/dist/components/ui/menubar.d.ts +87 -0
- package/dist/components/ui/{src/components/ui/menubar.js → menubar.js} +9 -9
- package/dist/components/ui/menubar.js.map +1 -0
- package/dist/components/ui/modal.d.ts +41 -0
- package/dist/components/ui/{src/components/ui/modal.js → modal.js} +9 -9
- package/dist/components/ui/modal.js.map +1 -0
- package/dist/components/ui/navigation-menu.d.ts +52 -0
- package/dist/components/ui/{src/components/ui/navigation-menu.js → navigation-menu.js} +14 -14
- package/dist/components/ui/navigation-menu.js.map +1 -0
- package/dist/components/ui/pagination.d.ts +42 -0
- package/dist/components/ui/{src/components/ui/pagination.js → pagination.js} +4 -4
- package/dist/components/ui/pagination.js.map +1 -0
- package/dist/components/ui/popover.d.ts +42 -0
- package/dist/components/ui/{src/components/ui/popover.js → popover.js} +8 -8
- package/dist/components/ui/popover.js.map +1 -0
- package/dist/components/ui/progress.d.ts +30 -0
- package/dist/components/ui/{src/components/ui/progress.js → progress.js} +6 -6
- package/dist/components/ui/progress.js.map +1 -0
- package/dist/components/ui/radio-group.d.ts +16 -0
- package/dist/components/ui/{src/components/ui/radio-group.js → radio-group.js} +5 -5
- package/dist/components/ui/radio-group.js.map +1 -0
- package/dist/components/ui/resizable.d.ts +38 -0
- package/dist/components/ui/{src/components/ui/resizable.js → resizable.js} +2 -2
- package/dist/components/ui/resizable.js.map +1 -0
- package/dist/components/ui/scroll-area.d.ts +64 -0
- package/dist/components/ui/{src/components/ui/scroll-area.js → scroll-area.js} +6 -6
- package/dist/components/ui/scroll-area.js.map +1 -0
- package/dist/components/ui/select.d.ts +58 -0
- package/dist/components/ui/{src/components/ui/select.js → select.js} +20 -20
- package/dist/components/ui/select.js.map +1 -0
- package/dist/components/ui/separator.d.ts +9 -0
- package/dist/components/ui/{src/components/ui/separator.js → separator.js} +2 -2
- package/dist/components/ui/separator.js.map +1 -0
- package/dist/components/ui/sheet.d.ts +51 -0
- package/dist/components/ui/{src/components/ui/sheet.js → sheet.js} +10 -10
- package/dist/components/ui/sheet.js.map +1 -0
- package/dist/components/ui/sidebar.d.ts +172 -0
- package/dist/components/ui/{src/components/ui/sidebar.js → sidebar.js} +6 -6
- package/dist/components/ui/sidebar.js.map +1 -0
- package/dist/components/ui/skeleton.d.ts +8 -0
- package/dist/components/ui/{src/components/ui/skeleton.js → skeleton.js} +1 -1
- package/dist/components/ui/skeleton.js.map +1 -0
- package/dist/components/ui/slider.d.ts +21 -0
- package/dist/components/ui/{src/components/ui/slider.js → slider.js} +6 -6
- package/dist/components/ui/slider.js.map +1 -0
- package/dist/components/ui/sonner.d.ts +21 -0
- package/dist/components/ui/{src/components/ui/sonner.js → sonner.js} +7 -7
- package/dist/components/ui/sonner.js.map +1 -0
- package/dist/components/ui/spinner.d.ts +8 -0
- package/dist/components/ui/{src/components/ui/spinner.js → spinner.js} +2 -2
- package/dist/components/ui/spinner.js.map +1 -0
- package/dist/components/ui/switch.d.ts +12 -0
- package/dist/components/ui/{src/components/ui/switch.js → switch.js} +3 -3
- package/dist/components/ui/switch.js.map +1 -0
- package/dist/components/ui/table.d.ts +51 -0
- package/dist/components/ui/{src/components/ui/table.js → table.js} +1 -1
- package/dist/components/ui/table.js.map +1 -0
- package/dist/components/ui/tabs.d.ts +31 -0
- package/dist/components/ui/{src/components/ui/tabs.js → tabs.js} +6 -6
- package/dist/components/ui/tabs.js.map +1 -0
- package/dist/components/ui/textarea.d.ts +18 -0
- package/dist/components/ui/{src/components/ui/textarea.js → textarea.js} +1 -1
- package/dist/components/ui/textarea.js.map +1 -0
- package/dist/components/ui/toast.d.ts +11 -0
- package/dist/components/ui/{src/components/ui/toast.js → toast.js} +6 -6
- package/dist/components/ui/toast.js.map +1 -0
- package/dist/components/ui/toggle-group.d.ts +26 -0
- package/dist/components/ui/{src/components/ui/toggle-group.js → toggle-group.js} +3 -3
- package/dist/components/ui/toggle-group.js.map +1 -0
- package/dist/components/ui/toggle.d.ts +14 -0
- package/dist/components/ui/{src/components/ui/toggle.js → toggle.js} +3 -3
- package/dist/components/ui/toggle.js.map +1 -0
- package/dist/components/ui/tooltip.d.ts +27 -0
- package/dist/components/ui/{src/components/ui/tooltip.js → tooltip.js} +8 -8
- package/dist/components/ui/tooltip.js.map +1 -0
- package/dist/hooks/use-mobile.d.ts +18 -0
- package/dist/hooks/use-mobile.js.map +1 -0
- package/dist/lib/utils.d.ts +23 -2
- package/dist/lib/variants.js +129 -0
- package/dist/lib/variants.js.map +1 -0
- package/package.json +1 -1
- package/dist/components/minidev.fun/undefined/index.d.ts +0 -2
- package/dist/components/minidev.fun/undefined/index.js +0 -9
- package/dist/components/ui/src/components/ui/accordion.d.ts +0 -2
- package/dist/components/ui/src/components/ui/accordion.js.map +0 -1
- package/dist/components/ui/src/components/ui/alert-dialog.d.ts +0 -2
- package/dist/components/ui/src/components/ui/alert-dialog.js.map +0 -1
- package/dist/components/ui/src/components/ui/alert.d.ts +0 -2
- package/dist/components/ui/src/components/ui/alert.js.map +0 -1
- package/dist/components/ui/src/components/ui/aspect-ratio.d.ts +0 -2
- package/dist/components/ui/src/components/ui/aspect-ratio.js.map +0 -1
- package/dist/components/ui/src/components/ui/avatar.d.ts +0 -2
- package/dist/components/ui/src/components/ui/avatar.js.map +0 -1
- package/dist/components/ui/src/components/ui/badge.d.ts +0 -2
- package/dist/components/ui/src/components/ui/badge.js.map +0 -1
- package/dist/components/ui/src/components/ui/breadcrumb.d.ts +0 -2
- package/dist/components/ui/src/components/ui/breadcrumb.js.map +0 -1
- package/dist/components/ui/src/components/ui/button-group.d.ts +0 -2
- package/dist/components/ui/src/components/ui/button-group.js.map +0 -1
- package/dist/components/ui/src/components/ui/button.d.ts +0 -2
- package/dist/components/ui/src/components/ui/button.js.map +0 -1
- package/dist/components/ui/src/components/ui/calendar.d.ts +0 -2
- package/dist/components/ui/src/components/ui/calendar.js.map +0 -1
- package/dist/components/ui/src/components/ui/card.d.ts +0 -2
- package/dist/components/ui/src/components/ui/card.js.map +0 -1
- package/dist/components/ui/src/components/ui/carousel.d.ts +0 -2
- package/dist/components/ui/src/components/ui/carousel.js.map +0 -1
- package/dist/components/ui/src/components/ui/chart.d.ts +0 -2
- package/dist/components/ui/src/components/ui/chart.js.map +0 -1
- package/dist/components/ui/src/components/ui/checkbox.d.ts +0 -2
- package/dist/components/ui/src/components/ui/checkbox.js.map +0 -1
- package/dist/components/ui/src/components/ui/collapsible.d.ts +0 -2
- package/dist/components/ui/src/components/ui/collapsible.js.map +0 -1
- package/dist/components/ui/src/components/ui/combobox.d.ts +0 -2
- package/dist/components/ui/src/components/ui/combobox.js.map +0 -1
- package/dist/components/ui/src/components/ui/command.d.ts +0 -2
- package/dist/components/ui/src/components/ui/command.js.map +0 -1
- package/dist/components/ui/src/components/ui/context-menu.d.ts +0 -2
- package/dist/components/ui/src/components/ui/context-menu.js.map +0 -1
- package/dist/components/ui/src/components/ui/dialog.d.ts +0 -2
- package/dist/components/ui/src/components/ui/dialog.js.map +0 -1
- package/dist/components/ui/src/components/ui/drawer.d.ts +0 -2
- package/dist/components/ui/src/components/ui/drawer.js.map +0 -1
- package/dist/components/ui/src/components/ui/dropdown-menu.d.ts +0 -2
- package/dist/components/ui/src/components/ui/dropdown-menu.js.map +0 -1
- package/dist/components/ui/src/components/ui/empty.d.ts +0 -2
- package/dist/components/ui/src/components/ui/empty.js.map +0 -1
- package/dist/components/ui/src/components/ui/field.d.ts +0 -2
- package/dist/components/ui/src/components/ui/field.js.map +0 -1
- package/dist/components/ui/src/components/ui/hover-card.d.ts +0 -2
- package/dist/components/ui/src/components/ui/hover-card.js.map +0 -1
- package/dist/components/ui/src/components/ui/input-group.d.ts +0 -2
- package/dist/components/ui/src/components/ui/input-group.js.map +0 -1
- package/dist/components/ui/src/components/ui/input-otp.d.ts +0 -2
- package/dist/components/ui/src/components/ui/input-otp.js.map +0 -1
- package/dist/components/ui/src/components/ui/input.d.ts +0 -2
- package/dist/components/ui/src/components/ui/input.js.map +0 -1
- package/dist/components/ui/src/components/ui/item.d.ts +0 -2
- package/dist/components/ui/src/components/ui/item.js.map +0 -1
- package/dist/components/ui/src/components/ui/kbd.d.ts +0 -2
- package/dist/components/ui/src/components/ui/kbd.js.map +0 -1
- package/dist/components/ui/src/components/ui/label.d.ts +0 -2
- package/dist/components/ui/src/components/ui/label.js.map +0 -1
- package/dist/components/ui/src/components/ui/menubar.d.ts +0 -2
- package/dist/components/ui/src/components/ui/menubar.js.map +0 -1
- package/dist/components/ui/src/components/ui/modal.d.ts +0 -2
- package/dist/components/ui/src/components/ui/modal.js.map +0 -1
- package/dist/components/ui/src/components/ui/navigation-menu.d.ts +0 -2
- package/dist/components/ui/src/components/ui/navigation-menu.js.map +0 -1
- package/dist/components/ui/src/components/ui/pagination.d.ts +0 -2
- package/dist/components/ui/src/components/ui/pagination.js.map +0 -1
- package/dist/components/ui/src/components/ui/popover.d.ts +0 -2
- package/dist/components/ui/src/components/ui/popover.js.map +0 -1
- package/dist/components/ui/src/components/ui/progress.d.ts +0 -2
- package/dist/components/ui/src/components/ui/progress.js.map +0 -1
- package/dist/components/ui/src/components/ui/radio-group.d.ts +0 -2
- package/dist/components/ui/src/components/ui/radio-group.js.map +0 -1
- package/dist/components/ui/src/components/ui/resizable.d.ts +0 -2
- package/dist/components/ui/src/components/ui/resizable.js.map +0 -1
- package/dist/components/ui/src/components/ui/scroll-area.d.ts +0 -2
- package/dist/components/ui/src/components/ui/scroll-area.js.map +0 -1
- package/dist/components/ui/src/components/ui/select.d.ts +0 -2
- package/dist/components/ui/src/components/ui/select.js.map +0 -1
- package/dist/components/ui/src/components/ui/separator.d.ts +0 -2
- package/dist/components/ui/src/components/ui/separator.js.map +0 -1
- package/dist/components/ui/src/components/ui/sheet.d.ts +0 -2
- package/dist/components/ui/src/components/ui/sheet.js.map +0 -1
- package/dist/components/ui/src/components/ui/sidebar.d.ts +0 -2
- package/dist/components/ui/src/components/ui/sidebar.js.map +0 -1
- package/dist/components/ui/src/components/ui/skeleton.d.ts +0 -2
- package/dist/components/ui/src/components/ui/skeleton.js.map +0 -1
- package/dist/components/ui/src/components/ui/slider.d.ts +0 -2
- package/dist/components/ui/src/components/ui/slider.js.map +0 -1
- package/dist/components/ui/src/components/ui/sonner.d.ts +0 -2
- package/dist/components/ui/src/components/ui/sonner.js.map +0 -1
- package/dist/components/ui/src/components/ui/spinner.d.ts +0 -2
- package/dist/components/ui/src/components/ui/spinner.js.map +0 -1
- package/dist/components/ui/src/components/ui/switch.d.ts +0 -2
- package/dist/components/ui/src/components/ui/switch.js.map +0 -1
- package/dist/components/ui/src/components/ui/table.d.ts +0 -2
- package/dist/components/ui/src/components/ui/table.js.map +0 -1
- package/dist/components/ui/src/components/ui/tabs.d.ts +0 -2
- package/dist/components/ui/src/components/ui/tabs.js.map +0 -1
- package/dist/components/ui/src/components/ui/textarea.d.ts +0 -2
- package/dist/components/ui/src/components/ui/textarea.js.map +0 -1
- package/dist/components/ui/src/components/ui/toast.d.ts +0 -2
- package/dist/components/ui/src/components/ui/toast.js.map +0 -1
- package/dist/components/ui/src/components/ui/toggle-group.d.ts +0 -2
- package/dist/components/ui/src/components/ui/toggle-group.js.map +0 -1
- package/dist/components/ui/src/components/ui/toggle.d.ts +0 -2
- package/dist/components/ui/src/components/ui/toggle.js.map +0 -1
- package/dist/components/ui/src/components/ui/tooltip.d.ts +0 -2
- package/dist/components/ui/src/components/ui/tooltip.js.map +0 -1
- package/dist/hooks/src/hooks/use-mobile.d.ts +0 -2
- package/dist/hooks/src/hooks/use-mobile.js.map +0 -1
- package/dist/src/components/minidev.fun/color-mode/color-mode-initializer.js.map +0 -1
- package/dist/src/components/minidev.fun/color-mode/color-mode-toggle.js.map +0 -1
- package/dist/src/components/minidev.fun/color-mode/use-color-mode.js.map +0 -1
- package/dist/src/lib/variants.js +0 -27
- package/dist/src/lib/variants.js.map +0 -1
- /package/dist/{src/components → components}/minidev.fun/color-mode/color-mode-initializer.js +0 -0
- /package/dist/components/minidev.fun/{undefined → color-mode}/index.js.map +0 -0
- /package/dist/{src/components → components}/minidev.fun/color-mode/use-color-mode.js +0 -0
- /package/dist/hooks/{src/hooks/use-mobile.js → use-mobile.js} +0 -0
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { Label } from './label';
|
|
3
|
+
type FieldSetProps = React.ComponentProps<"fieldset">;
|
|
4
|
+
/**
|
|
5
|
+
* Container for grouping related fields, provides semantic fieldset/legend structure.
|
|
6
|
+
* Use with FieldLegend for proper form semantics.
|
|
7
|
+
*/
|
|
8
|
+
declare function FieldSet({ className, ...props }: FieldSetProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
type FieldLegendProps = React.ComponentProps<"legend"> & {
|
|
10
|
+
/** Visual style variant for the legend. @default "legend" */
|
|
11
|
+
variant?: "legend" | "label";
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Legend for FieldSet, available in two visual styles.
|
|
15
|
+
* Use "legend" for section headers, "label" for form-like appearance.
|
|
16
|
+
*/
|
|
17
|
+
declare function FieldLegend({ className, variant, ...props }: FieldLegendProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
type FieldGroupProps = React.ComponentProps<"div">;
|
|
19
|
+
/**
|
|
20
|
+
* Container for multiple fields, provides consistent spacing and container queries.
|
|
21
|
+
* Use for grouping related fields without semantic fieldset.
|
|
22
|
+
*/
|
|
23
|
+
declare function FieldGroup({ className, ...props }: FieldGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
declare const fieldVariants: (props?: ({
|
|
25
|
+
orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
|
|
26
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
27
|
+
type FieldProps = React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>;
|
|
28
|
+
/**
|
|
29
|
+
* Base field wrapper with support for multiple orientation layouts.
|
|
30
|
+
* Supports vertical, horizontal, and responsive layouts. Use data-invalid attribute for error states.
|
|
31
|
+
*/
|
|
32
|
+
declare function Field({ className, orientation, ...props }: FieldProps): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
type FieldContentProps = React.ComponentProps<"div">;
|
|
34
|
+
/**
|
|
35
|
+
* Container for field input and helper elements (description, error).
|
|
36
|
+
* Groups the input control with its associated help text.
|
|
37
|
+
*/
|
|
38
|
+
declare function FieldContent({ className, ...props }: FieldContentProps): import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
type FieldLabelProps = React.ComponentProps<typeof Label>;
|
|
40
|
+
/**
|
|
41
|
+
* Label for field input, extends the Label component with field-specific styling.
|
|
42
|
+
* Supports disabled state and nested field patterns.
|
|
43
|
+
*/
|
|
44
|
+
declare function FieldLabel({ className, ...props }: FieldLabelProps): import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
type FieldTitleProps = React.ComponentProps<"div">;
|
|
46
|
+
/**
|
|
47
|
+
* Title text for fields with embedded controls (checkboxes, switches).
|
|
48
|
+
* Use inside FieldLabel alongside the control.
|
|
49
|
+
*/
|
|
50
|
+
declare function FieldTitle({ className, ...props }: FieldTitleProps): import("react/jsx-runtime").JSX.Element;
|
|
51
|
+
type FieldDescriptionProps = React.ComponentProps<"p">;
|
|
52
|
+
/**
|
|
53
|
+
* Helper text providing additional context for the field.
|
|
54
|
+
* Automatically styled for placement after inputs.
|
|
55
|
+
*/
|
|
56
|
+
declare function FieldDescription({ className, ...props }: FieldDescriptionProps): import("react/jsx-runtime").JSX.Element;
|
|
57
|
+
type FieldSeparatorProps = React.ComponentProps<"div"> & {
|
|
58
|
+
/** Optional label text to display on the separator line. */
|
|
59
|
+
children?: React.ReactNode;
|
|
60
|
+
};
|
|
61
|
+
/**
|
|
62
|
+
* Visual separator between field groups, optionally with label text.
|
|
63
|
+
* Use to organize sections within forms.
|
|
64
|
+
*/
|
|
65
|
+
declare function FieldSeparator({ children, className, ...props }: FieldSeparatorProps): import("react/jsx-runtime").JSX.Element;
|
|
66
|
+
type FieldErrorProps = React.ComponentProps<"div"> & {
|
|
67
|
+
/** Array of error objects with message property. Automatically deduplicates. */
|
|
68
|
+
errors?: Array<{
|
|
69
|
+
message?: string;
|
|
70
|
+
} | undefined>;
|
|
71
|
+
};
|
|
72
|
+
/**
|
|
73
|
+
* Error message display for fields. Accepts errors array or children.
|
|
74
|
+
* Automatically deduplicates multiple errors and displays as list.
|
|
75
|
+
*/
|
|
76
|
+
declare function FieldError({ className, children, errors, ...props }: FieldErrorProps): import("react/jsx-runtime").JSX.Element | null;
|
|
77
|
+
export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, type FieldProps, type FieldLabelProps, type FieldDescriptionProps, type FieldErrorProps, type FieldGroupProps, type FieldLegendProps, type FieldSeparatorProps, type FieldSetProps, type FieldContentProps, type FieldTitleProps, };
|
|
78
|
+
//# sourceMappingURL=field.d.ts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useMemo } from "react";
|
|
4
|
-
import { cva } from "
|
|
5
|
-
import { cn } from "
|
|
4
|
+
import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
|
|
5
|
+
import { cn } from "../../lib/utils.js";
|
|
6
6
|
import { Label } from "./label.js";
|
|
7
7
|
import { Separator } from "./separator.js";
|
|
8
8
|
function FieldSet({ className, ...props }) {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"field.js","sources":["../../../src/components/ui/field.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Label } from \"@/components/ui/label\";\nimport { Separator } from \"@/components/ui/separator\";\n\ntype FieldSetProps = React.ComponentProps<\"fieldset\">;\n\n/**\n * Container for grouping related fields, provides semantic fieldset/legend structure.\n * Use with FieldLegend for proper form semantics.\n */\nfunction FieldSet({ className, ...props }: FieldSetProps) {\n return (\n <fieldset\n data-slot=\"field-set\"\n className={cn(\n \"gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype FieldLegendProps = React.ComponentProps<\"legend\"> & {\n /** Visual style variant for the legend. @default \"legend\" */\n variant?: \"legend\" | \"label\";\n};\n\n/**\n * Legend for FieldSet, available in two visual styles.\n * Use \"legend\" for section headers, \"label\" for form-like appearance.\n */\nfunction FieldLegend({\n className,\n variant = \"legend\",\n ...props\n}: FieldLegendProps) {\n return (\n <legend\n data-slot=\"field-legend\"\n data-variant={variant}\n className={cn(\n \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype FieldGroupProps = React.ComponentProps<\"div\">;\n\n/**\n * Container for multiple fields, provides consistent spacing and container queries.\n * Use for grouping related fields without semantic fieldset.\n */\nfunction FieldGroup({ className, ...props }: FieldGroupProps) {\n return (\n <div\n data-slot=\"field-group\"\n className={cn(\n \"gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n className,\n )}\n {...props}\n />\n );\n}\n\nconst fieldVariants = cva(\n \"data-[invalid=true]:text-destructive gap-3 group/field flex w-full\",\n {\n variants: {\n orientation: {\n vertical: \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n horizontal:\n \"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n responsive:\n \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n },\n },\n defaultVariants: {\n orientation: \"vertical\",\n },\n },\n);\n\ntype FieldProps = React.ComponentProps<\"div\"> &\n VariantProps<typeof fieldVariants>;\n\n/**\n * Base field wrapper with support for multiple orientation layouts.\n * Supports vertical, horizontal, and responsive layouts. Use data-invalid attribute for error states.\n */\nfunction Field({ className, orientation = \"vertical\", ...props }: FieldProps) {\n return (\n <div\n role=\"group\"\n data-slot=\"field\"\n data-orientation={orientation}\n className={cn(fieldVariants({ orientation }), className)}\n {...props}\n />\n );\n}\n\ntype FieldContentProps = React.ComponentProps<\"div\">;\n\n/**\n * Container for field input and helper elements (description, error).\n * Groups the input control with its associated help text.\n */\nfunction FieldContent({ className, ...props }: FieldContentProps) {\n return (\n <div\n data-slot=\"field-content\"\n className={cn(\n \"gap-1 group/field-content flex flex-1 flex-col leading-snug\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype FieldLabelProps = React.ComponentProps<typeof Label>;\n\n/**\n * Label for field input, extends the Label component with field-specific styling.\n * Supports disabled state and nested field patterns.\n */\nfunction FieldLabel({ className, ...props }: FieldLabelProps) {\n return (\n <Label\n data-slot=\"field-label\"\n className={cn(\n \"has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit leading-snug\",\n \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype FieldTitleProps = React.ComponentProps<\"div\">;\n\n/**\n * Title text for fields with embedded controls (checkboxes, switches).\n * Use inside FieldLabel alongside the control.\n */\nfunction FieldTitle({ className, ...props }: FieldTitleProps) {\n return (\n <div\n data-slot=\"field-label\"\n className={cn(\n \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype FieldDescriptionProps = React.ComponentProps<\"p\">;\n\n/**\n * Helper text providing additional context for the field.\n * Automatically styled for placement after inputs.\n */\nfunction FieldDescription({ className, ...props }: FieldDescriptionProps) {\n return (\n <p\n data-slot=\"field-description\"\n className={cn(\n \"text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n \"last:mt-0 nth-last-2:-mt-1\",\n \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype FieldSeparatorProps = React.ComponentProps<\"div\"> & {\n /** Optional label text to display on the separator line. */\n children?: React.ReactNode;\n};\n\n/**\n * Visual separator between field groups, optionally with label text.\n * Use to organize sections within forms.\n */\nfunction FieldSeparator({\n children,\n className,\n ...props\n}: FieldSeparatorProps) {\n return (\n <div\n data-slot=\"field-separator\"\n data-content={!!children}\n className={cn(\n \"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\",\n className,\n )}\n {...props}\n >\n <Separator className=\"absolute inset-0 top-1/2\" />\n {children && (\n <span\n className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\n data-slot=\"field-separator-content\"\n >\n {children}\n </span>\n )}\n </div>\n );\n}\n\ntype FieldErrorProps = React.ComponentProps<\"div\"> & {\n /** Array of error objects with message property. Automatically deduplicates. */\n errors?: Array<{ message?: string } | undefined>;\n};\n\n/**\n * Error message display for fields. Accepts errors array or children.\n * Automatically deduplicates multiple errors and displays as list.\n */\nfunction FieldError({\n className,\n children,\n errors,\n ...props\n}: FieldErrorProps) {\n const content = useMemo(() => {\n if (children) {\n return children;\n }\n\n if (!errors?.length) {\n return null;\n }\n\n const uniqueErrors = [\n ...new Map(errors.map((error) => [error?.message, error])).values(),\n ];\n\n if (uniqueErrors?.length == 1) {\n return uniqueErrors[0]?.message;\n }\n\n return (\n <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n {uniqueErrors.map(\n (error, index) =>\n error?.message && <li key={index}>{error.message}</li>,\n )}\n </ul>\n );\n }, [children, errors]);\n\n if (!content) {\n return null;\n }\n\n return (\n <div\n role=\"alert\"\n data-slot=\"field-error\"\n className={cn(\"text-destructive text-sm font-normal\", className)}\n {...props}\n >\n {content}\n </div>\n );\n}\n\nexport {\n Field,\n FieldLabel,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLegend,\n FieldSeparator,\n FieldSet,\n FieldContent,\n FieldTitle,\n type FieldProps,\n type FieldLabelProps,\n type FieldDescriptionProps,\n type FieldErrorProps,\n type FieldGroupProps,\n type FieldLegendProps,\n type FieldSeparatorProps,\n type FieldSetProps,\n type FieldContentProps,\n type FieldTitleProps,\n};\n"],"names":[],"mappings":";;;;;;;AAeA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAWA;AAAqB;AACnB;AACU;AAEZ;AACE;AACE;AAAC;AAAA;AACW;AACI;AACH;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAQA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAEA;AAAsB;AACpB;AACA;AACY;AACK;AACD;AAER;AAEA;AAAA;AACJ;AAEe;AACF;AAAA;AAGnB;AASA;AACE;AACE;AAAC;AAAA;AACM;AACK;AACQ;AACqC;AACnD;AAAA;AAGV;AAQA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAQA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AACA;AAAA;AAEE;AAAA;AAGV;AAQA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAQA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AACA;AACA;AAAA;AAEE;AAAA;AAGV;AAWA;AAAwB;AACtB;AACA;AAEF;AACE;AACE;AAAC;AAAA;AACW;AACM;AACL;AACT;AACA;AAAA;AAEE;AAEJ;AAAgD;AAE9C;AAAC;AAAA;AACW;AACA;AAET;AAAA;AAAA;AACH;AAAA;AAIR;AAWA;AAAoB;AAClB;AACA;AACA;AAEF;AACE;AACE;AACE;AAAO;AAGT;AACE;AAAO;AAGT;AAAqB;AACwC;AAG7D;AACE;AAAwB;AAG1B;AAEkB;AAEuC;AAEvD;AAIJ;AACE;AAAO;AAGT;AACE;AAAC;AAAA;AACM;AACK;AACqD;AAC3D;AAEH;AAAA;AAGP;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
|
|
2
|
+
type HoverCardProps = PreviewCardPrimitive.Root.Props;
|
|
3
|
+
/**
|
|
4
|
+
* HoverCard root container - manages state and hover interactions.
|
|
5
|
+
* Wrap trigger and content with this component.
|
|
6
|
+
*/
|
|
7
|
+
declare function HoverCard({ ...props }: HoverCardProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
type HoverCardTriggerProps = PreviewCardPrimitive.Trigger.Props;
|
|
9
|
+
/**
|
|
10
|
+
* Element that triggers the hover card on hover.
|
|
11
|
+
* Use `render` prop to customize the trigger element.
|
|
12
|
+
*/
|
|
13
|
+
declare function HoverCardTrigger({ ...props }: HoverCardTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
type HoverCardContentProps = PreviewCardPrimitive.Popup.Props & Pick<PreviewCardPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">;
|
|
15
|
+
/**
|
|
16
|
+
* HoverCard content container with automatic portal, positioning, and animations.
|
|
17
|
+
* Supports positioning on all sides with alignment options.
|
|
18
|
+
*/
|
|
19
|
+
declare function HoverCardContent({ className, side, sideOffset, align, alignOffset, ...props }: HoverCardContentProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export { HoverCard, HoverCardTrigger, HoverCardContent, type HoverCardProps, type HoverCardTriggerProps, type HoverCardContentProps, };
|
|
21
|
+
//# sourceMappingURL=hover-card.d.ts.map
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { cn } from "
|
|
4
|
-
import { PreviewCardRoot } from "
|
|
5
|
-
import { PreviewCardPortal } from "
|
|
6
|
-
import { PreviewCardPositioner } from "
|
|
7
|
-
import { PreviewCardPopup } from "
|
|
8
|
-
import { PreviewCardTrigger } from "
|
|
3
|
+
import { cn } from "../../lib/utils.js";
|
|
4
|
+
import { PreviewCardRoot } from "../../node_modules/@base-ui/react/esm/preview-card/root/PreviewCardRoot.js";
|
|
5
|
+
import { PreviewCardPortal } from "../../node_modules/@base-ui/react/esm/preview-card/portal/PreviewCardPortal.js";
|
|
6
|
+
import { PreviewCardPositioner } from "../../node_modules/@base-ui/react/esm/preview-card/positioner/PreviewCardPositioner.js";
|
|
7
|
+
import { PreviewCardPopup } from "../../node_modules/@base-ui/react/esm/preview-card/popup/PreviewCardPopup.js";
|
|
8
|
+
import { PreviewCardTrigger } from "../../node_modules/@base-ui/react/esm/preview-card/trigger/PreviewCardTrigger.js";
|
|
9
9
|
function HoverCard({ ...props }) {
|
|
10
10
|
return /* @__PURE__ */ jsx(PreviewCardRoot, { "data-slot": "hover-card", ...props });
|
|
11
11
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hover-card.js","sources":["../../../src/components/ui/hover-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype HoverCardProps = PreviewCardPrimitive.Root.Props;\n\n/**\n * HoverCard root container - manages state and hover interactions.\n * Wrap trigger and content with this component.\n */\nfunction HoverCard({ ...props }: HoverCardProps) {\n return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\ntype HoverCardTriggerProps = PreviewCardPrimitive.Trigger.Props;\n\n/**\n * Element that triggers the hover card on hover.\n * Use `render` prop to customize the trigger element.\n */\nfunction HoverCardTrigger({ ...props }: HoverCardTriggerProps) {\n return (\n <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n );\n}\n\ntype HoverCardContentProps = PreviewCardPrimitive.Popup.Props &\n Pick<\n PreviewCardPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n >;\n\n/**\n * HoverCard content container with automatic portal, positioning, and animations.\n * Supports positioning on all sides with alignment options.\n */\nfunction HoverCardContent({\n className,\n side = \"bottom\",\n sideOffset = 4,\n align = \"center\",\n alignOffset = 4,\n ...props\n}: HoverCardContentProps) {\n return (\n <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n <PreviewCardPrimitive.Positioner\n align={align}\n alignOffset={alignOffset}\n side={side}\n sideOffset={sideOffset}\n className=\"isolate z-50\"\n >\n <PreviewCardPrimitive.Popup\n data-slot=\"hover-card-content\"\n className={cn(\n \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-5xl p-4 text-sm shadow-md ring-1 duration-100 z-50 origin-(--transform-origin) outline-hidden\",\n className,\n )}\n {...props}\n />\n </PreviewCardPrimitive.Positioner>\n </PreviewCardPrimitive.Portal>\n );\n}\n\nexport {\n HoverCard,\n HoverCardTrigger,\n HoverCardContent,\n type HoverCardProps,\n type HoverCardTriggerProps,\n type HoverCardContentProps,\n};\n"],"names":["PreviewCardPrimitive.Positioner","PreviewCardPrimitive.Popup"],"mappings":";;;;;;;;AAYA;AACE;AACF;AAQA;AACE;AAGF;AAYA;AAA0B;AACxB;AACO;AACM;AACL;AACM;AAEhB;AACE;AAEI;AAACA;AAAA;AACC;AACA;AACA;AACA;AACU;AAEV;AAACC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAAA;AACN;AAIR;;;;;;"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { Button } from './button';
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
type InputGroupProps = React.ComponentProps<"div">;
|
|
5
|
+
/**
|
|
6
|
+
* Container for input with addons (icons, text, buttons) at start/end.
|
|
7
|
+
* Manages focus ring, validation states, and addon alignment.
|
|
8
|
+
*/
|
|
9
|
+
declare function InputGroup({ className, ...props }: InputGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
declare const inputGroupAddonVariants: (props?: ({
|
|
11
|
+
align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
|
|
12
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
13
|
+
type InputGroupAddonProps = React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>;
|
|
14
|
+
/**
|
|
15
|
+
* Addon container for icons, text, or buttons at input start/end.
|
|
16
|
+
* Clicking the addon focuses the input (unless clicking a button).
|
|
17
|
+
*/
|
|
18
|
+
declare function InputGroupAddon({ className, align, ...props }: InputGroupAddonProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
declare const inputGroupButtonVariants: (props?: ({
|
|
20
|
+
size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
|
|
21
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
22
|
+
type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
|
|
23
|
+
/** Button type. @default "button" */
|
|
24
|
+
type?: "button" | "submit" | "reset";
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Button sized for use within InputGroupAddon.
|
|
28
|
+
* Defaults to ghost variant and extra-small size.
|
|
29
|
+
*/
|
|
30
|
+
declare function InputGroupButton({ className, type, variant, size, ...props }: InputGroupButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
type InputGroupTextProps = React.ComponentProps<"span">;
|
|
32
|
+
/**
|
|
33
|
+
* Text label/prefix/suffix for use within InputGroupAddon.
|
|
34
|
+
* Commonly used for URL schemes (https://), units (USD, MB), or format indicators (@, /).
|
|
35
|
+
*/
|
|
36
|
+
declare function InputGroupText({ className, ...props }: InputGroupTextProps): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
type InputGroupInputProps = React.ComponentProps<"input">;
|
|
38
|
+
/**
|
|
39
|
+
* Input styled for use within InputGroup.
|
|
40
|
+
* Removes border/shadow/ring to integrate with group container styling.
|
|
41
|
+
*/
|
|
42
|
+
declare function InputGroupInput({ className, ...props }: InputGroupInputProps): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
type InputGroupTextareaProps = React.ComponentProps<"textarea">;
|
|
44
|
+
/**
|
|
45
|
+
* Textarea styled for use within InputGroup.
|
|
46
|
+
* Removes border/shadow/ring to integrate with group container styling.
|
|
47
|
+
*/
|
|
48
|
+
declare function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps): import("react/jsx-runtime").JSX.Element;
|
|
49
|
+
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, type InputGroupProps, type InputGroupAddonProps, type InputGroupButtonProps, type InputGroupTextProps, type InputGroupInputProps, type InputGroupTextareaProps, };
|
|
50
|
+
//# sourceMappingURL=input-group.d.ts.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { cva } from "
|
|
4
|
-
import { cn } from "
|
|
3
|
+
import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
|
|
4
|
+
import { cn } from "../../lib/utils.js";
|
|
5
5
|
import { Button } from "./button.js";
|
|
6
6
|
import { Input } from "./input.js";
|
|
7
7
|
import { Textarea } from "./textarea.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-group.js","sources":["../../../src/components/ui/input-group.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\ntype InputGroupProps = React.ComponentProps<\"div\">;\n\n/**\n * Container for input with addons (icons, text, buttons) at start/end.\n * Manages focus ring, validation states, and addon alignment.\n */\nfunction InputGroup({ className, ...props }: InputGroupProps) {\n return (\n <div\n data-slot=\"input-group\"\n role=\"group\"\n className={cn(\n \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-lg border shadow-xs transition-[color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n className,\n )}\n {...props}\n />\n );\n}\n\nconst inputGroupAddonVariants = cva(\n \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n {\n variants: {\n align: {\n \"inline-start\":\n \"pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n \"inline-end\":\n \"pr-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n \"block-start\":\n \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n \"block-end\":\n \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n },\n);\n\ntype InputGroupAddonProps = React.ComponentProps<\"div\"> &\n VariantProps<typeof inputGroupAddonVariants>;\n\n/**\n * Addon container for icons, text, or buttons at input start/end.\n * Clicking the addon focuses the input (unless clicking a button).\n */\nfunction InputGroupAddon({\n className,\n align = \"inline-start\",\n ...props\n}: InputGroupAddonProps) {\n return (\n <div\n role=\"group\"\n data-slot=\"input-group-addon\"\n data-align={align}\n className={cn(inputGroupAddonVariants({ align }), className)}\n onClick={(e) => {\n if ((e.target as HTMLElement).closest(\"button\")) {\n return;\n }\n e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n }}\n {...props}\n />\n );\n}\n\nconst inputGroupButtonVariants = cva(\n \"gap-2 text-sm shadow-none flex items-center\",\n {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: \"\",\n \"icon-xs\":\n \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n },\n);\n\ntype InputGroupButtonProps = Omit<\n React.ComponentProps<typeof Button>,\n \"size\" | \"type\"\n> &\n VariantProps<typeof inputGroupButtonVariants> & {\n /** Button type. @default \"button\" */\n type?: \"button\" | \"submit\" | \"reset\";\n };\n\n/**\n * Button sized for use within InputGroupAddon.\n * Defaults to ghost variant and extra-small size.\n */\nfunction InputGroupButton({\n className,\n type = \"button\",\n variant = \"ghost\",\n size = \"xs\",\n ...props\n}: InputGroupButtonProps) {\n return (\n <Button\n type={type}\n data-size={size}\n variant={variant}\n className={cn(inputGroupButtonVariants({ size }), className)}\n {...props}\n />\n );\n}\n\ntype InputGroupTextProps = React.ComponentProps<\"span\">;\n\n/**\n * Text label/prefix/suffix for use within InputGroupAddon.\n * Commonly used for URL schemes (https://), units (USD, MB), or format indicators (@, /).\n */\nfunction InputGroupText({ className, ...props }: InputGroupTextProps) {\n return (\n <span\n className={cn(\n \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype InputGroupInputProps = React.ComponentProps<\"input\">;\n\n/**\n * Input styled for use within InputGroup.\n * Removes border/shadow/ring to integrate with group container styling.\n */\nfunction InputGroupInput({ className, ...props }: InputGroupInputProps) {\n return (\n <Input\n data-slot=\"input-group-control\"\n className={cn(\n \"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype InputGroupTextareaProps = React.ComponentProps<\"textarea\">;\n\n/**\n * Textarea styled for use within InputGroup.\n * Removes border/shadow/ring to integrate with group container styling.\n */\nfunction InputGroupTextarea({ className, ...props }: InputGroupTextareaProps) {\n return (\n <Textarea\n data-slot=\"input-group-control\"\n className={cn(\n \"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n inputGroupAddonVariants,\n inputGroupButtonVariants,\n type InputGroupProps,\n type InputGroupAddonProps,\n type InputGroupButtonProps,\n type InputGroupTextProps,\n type InputGroupInputProps,\n type InputGroupTextareaProps,\n};\n"],"names":[],"mappings":";;;;;;;AAcA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAM,0BAA0B;AAAA,EAC9B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,gBACE;AAAA,QACF,cACE;AAAA,QACF,eACE;AAAA,QACF,aACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AASA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAyB;AACvB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAW,GAAG,wBAAwB,EAAE,MAAA,CAAO,GAAG,SAAS;AAAA,MAC3D,SAAS,CAAC,MAAM;AACd,YAAK,EAAE,OAAuB,QAAQ,QAAQ,GAAG;AAC/C;AAAA,QACF;AACA,UAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAA;AAAA,MACzD;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAM,2BAA2B;AAAA,EAC/B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,WACE;AAAA,QACF,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAeA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MACA,WAAW,GAAG,yBAAyB,EAAE,KAAA,CAAM,GAAG,SAAS;AAAA,MAC1D,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,eAAe,EAAE,WAAW,GAAG,SAA8B;AACpE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AACtE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAkC;AAC5E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { OTPInput } from 'input-otp';
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
type InputOTPProps = React.ComponentProps<typeof OTPInput> & {
|
|
4
|
+
/** Additional class names for the container element. */
|
|
5
|
+
containerClassName?: string;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* One-time password input with individual character slots.
|
|
9
|
+
* Built on input-otp library with styled slots and separators.
|
|
10
|
+
*/
|
|
11
|
+
declare function InputOTP({ className, containerClassName, ...props }: InputOTPProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
type InputOTPGroupProps = React.ComponentProps<"div">;
|
|
13
|
+
/**
|
|
14
|
+
* Groups multiple InputOTPSlot components together.
|
|
15
|
+
* Supports error state via aria-invalid.
|
|
16
|
+
*/
|
|
17
|
+
declare function InputOTPGroup({ className, ...props }: InputOTPGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
type InputOTPSlotProps = React.ComponentProps<"div"> & {
|
|
19
|
+
/** Zero-based index of this slot in the OTP sequence. */
|
|
20
|
+
index: number;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* Individual character slot for OTP input.
|
|
24
|
+
* Displays current character, active state, and animated caret.
|
|
25
|
+
*/
|
|
26
|
+
declare function InputOTPSlot({ index, className, ...props }: InputOTPSlotProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
type InputOTPSeparatorProps = React.ComponentProps<"div">;
|
|
28
|
+
/**
|
|
29
|
+
* Visual separator between InputOTPGroup components.
|
|
30
|
+
* Renders a minus icon by default.
|
|
31
|
+
*/
|
|
32
|
+
declare function InputOTPSeparator({ ...props }: InputOTPSeparatorProps): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, type InputOTPProps, type InputOTPGroupProps, type InputOTPSlotProps, type InputOTPSeparatorProps, };
|
|
34
|
+
//# sourceMappingURL=input-otp.d.ts.map
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { OTPInput, OTPInputContext } from "input-otp";
|
|
5
|
-
import { cn } from "
|
|
6
|
-
import Minus from "
|
|
5
|
+
import { cn } from "../../lib/utils.js";
|
|
6
|
+
import Minus from "../../node_modules/lucide-react/dist/esm/icons/minus.js";
|
|
7
7
|
function InputOTP({ className, containerClassName, ...props }) {
|
|
8
8
|
return /* @__PURE__ */ jsx(
|
|
9
9
|
OTPInput,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input-otp.js","sources":["../../../src/components/ui/input-otp.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { OTPInput, OTPInputContext } from \"input-otp\";\n\nimport { cn } from \"@/lib/utils\";\nimport { MinusIcon } from \"lucide-react\";\n\ntype InputOTPProps = React.ComponentProps<typeof OTPInput> & {\n /** Additional class names for the container element. */\n containerClassName?: string;\n};\n\n/**\n * One-time password input with individual character slots.\n * Built on input-otp library with styled slots and separators.\n */\nfunction InputOTP({ className, containerClassName, ...props }: InputOTPProps) {\n return (\n <OTPInput\n data-slot=\"input-otp\"\n containerClassName={cn(\n \"cn-input-otp flex items-center has-disabled:opacity-50\",\n containerClassName,\n )}\n spellCheck={false}\n className={cn(\"disabled:cursor-not-allowed\", className)}\n {...props}\n />\n );\n}\n\ntype InputOTPGroupProps = React.ComponentProps<\"div\">;\n\n/**\n * Groups multiple InputOTPSlot components together.\n * Supports error state via aria-invalid.\n */\nfunction InputOTPGroup({ className, ...props }: InputOTPGroupProps) {\n return (\n <div\n data-slot=\"input-otp-group\"\n className={cn(\n \"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[3px] flex items-center\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype InputOTPSlotProps = React.ComponentProps<\"div\"> & {\n /** Zero-based index of this slot in the OTP sequence. */\n index: number;\n};\n\n/**\n * Individual character slot for OTP input.\n * Displays current character, active state, and animated caret.\n */\nfunction InputOTPSlot({ index, className, ...props }: InputOTPSlotProps) {\n const inputOTPContext = React.useContext(OTPInputContext);\n const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};\n\n return (\n <div\n data-slot=\"input-otp-slot\"\n data-active={isActive}\n className={cn(\n \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-xl first:border-l last:rounded-r-xl data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\n className,\n )}\n {...props}\n >\n {char}\n {hasFakeCaret && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\n </div>\n )}\n </div>\n );\n}\n\ntype InputOTPSeparatorProps = React.ComponentProps<\"div\">;\n\n/**\n * Visual separator between InputOTPGroup components.\n * Renders a minus icon by default.\n */\nfunction InputOTPSeparator({ ...props }: InputOTPSeparatorProps) {\n return (\n <div\n data-slot=\"input-otp-separator\"\n className=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\n role=\"separator\"\n {...props}\n >\n <MinusIcon />\n </div>\n );\n}\n\nexport {\n InputOTP,\n InputOTPGroup,\n InputOTPSlot,\n InputOTPSeparator,\n type InputOTPProps,\n type InputOTPGroupProps,\n type InputOTPSlotProps,\n type InputOTPSeparatorProps,\n};\n"],"names":[],"mappings":";;;;;;AAiBA;AACE;AACE;AAAC;AAAA;AACW;AACU;AAClB;AACA;AAAA;AAEU;AAC0C;AAClD;AAAA;AAGV;AAQA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAWA;AACE;AACA;AAEA;AACE;AAAC;AAAA;AACW;AACG;AACF;AACT;AACA;AAAA;AAEE;AAEH;AAAA;AAIC;AAAA;AAAA;AAIR;AAQA;AACE;AACE;AAAC;AAAA;AACW;AACA;AACL;AACD;AAEO;AAAA;AAGjB;;;;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
type InputProps = React.ComponentProps<"input">;
|
|
3
|
+
/**
|
|
4
|
+
* Text input field with support for all HTML input types.
|
|
5
|
+
*
|
|
6
|
+
* Supports text, email, password, number, tel, url, search, date, time, file, and other input types.
|
|
7
|
+
* Includes built-in validation styling via `aria-invalid` attribute.
|
|
8
|
+
*/
|
|
9
|
+
declare function Input({ className, type, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { Input, type InputProps };
|
|
11
|
+
//# sourceMappingURL=input.d.ts.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { cn } from "
|
|
4
|
-
import { Input as Input$1 } from "
|
|
3
|
+
import { cn } from "../../lib/utils.js";
|
|
4
|
+
import { Input as Input$1 } from "../../node_modules/@base-ui/react/esm/input/Input.js";
|
|
5
5
|
function Input({ className, type, ...props }) {
|
|
6
6
|
return /* @__PURE__ */ jsx(
|
|
7
7
|
Input$1,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"input.js","sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype InputProps = React.ComponentProps<\"input\">;\n\n/**\n * Text input field with support for all HTML input types.\n *\n * Supports text, email, password, number, tel, url, search, date, time, file, and other input types.\n * Includes built-in validation styling via `aria-invalid` attribute.\n */\nfunction Input({ className, type, ...props }: InputProps) {\n return (\n <InputPrimitive\n type={type}\n data-slot=\"input\"\n className={cn(\n \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive h-10 rounded-lg border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[0.5px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Input, type InputProps };\n"],"names":["InputPrimitive"],"mappings":";;;;AAaA,SAAS,MAAM,EAAE,WAAW,MAAM,GAAG,SAAqB;AACxD,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { Separator } from './separator';
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
type ItemGroupProps = React.ComponentProps<"div">;
|
|
6
|
+
/**
|
|
7
|
+
* Container for organizing related items in a vertical list.
|
|
8
|
+
* Automatically adjusts gap based on child item sizes.
|
|
9
|
+
*/
|
|
10
|
+
declare function ItemGroup({ className, ...props }: ItemGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
type ItemSeparatorProps = React.ComponentProps<typeof Separator>;
|
|
12
|
+
/**
|
|
13
|
+
* Horizontal separator for dividing items within an ItemGroup.
|
|
14
|
+
*/
|
|
15
|
+
declare function ItemSeparator({ className, ...props }: ItemSeparatorProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare const itemVariants: (props?: ({
|
|
17
|
+
variant?: "default" | "outline" | "muted" | null | undefined;
|
|
18
|
+
size?: "default" | "sm" | "xs" | null | undefined;
|
|
19
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
20
|
+
type ItemProps = useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>;
|
|
21
|
+
/**
|
|
22
|
+
* Flexible list item component for displaying structured content.
|
|
23
|
+
* Use `render` prop to customize the underlying element (e.g., `<a>`, `<button>`).
|
|
24
|
+
*/
|
|
25
|
+
declare function Item({ className, variant, size, render, ...props }: ItemProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
26
|
+
declare const itemMediaVariants: (props?: ({
|
|
27
|
+
variant?: "image" | "default" | "icon" | null | undefined;
|
|
28
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
29
|
+
type ItemMediaProps = React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>;
|
|
30
|
+
/**
|
|
31
|
+
* Media container for icons, images, or avatars in an item.
|
|
32
|
+
* Automatically aligns with description text when present.
|
|
33
|
+
*/
|
|
34
|
+
declare function ItemMedia({ className, variant, ...props }: ItemMediaProps): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
type ItemContentProps = React.ComponentProps<"div">;
|
|
36
|
+
/**
|
|
37
|
+
* Main content area for title and description.
|
|
38
|
+
* Flexes to fill available space.
|
|
39
|
+
*/
|
|
40
|
+
declare function ItemContent({ className, ...props }: ItemContentProps): import("react/jsx-runtime").JSX.Element;
|
|
41
|
+
type ItemTitleProps = React.ComponentProps<"div">;
|
|
42
|
+
/**
|
|
43
|
+
* Title text with medium weight.
|
|
44
|
+
* Supports inline badges and icons.
|
|
45
|
+
*/
|
|
46
|
+
declare function ItemTitle({ className, ...props }: ItemTitleProps): import("react/jsx-runtime").JSX.Element;
|
|
47
|
+
type ItemDescriptionProps = React.ComponentProps<"p">;
|
|
48
|
+
/**
|
|
49
|
+
* Secondary description text.
|
|
50
|
+
* Automatically truncates after 2 lines.
|
|
51
|
+
*/
|
|
52
|
+
declare function ItemDescription({ className, ...props }: ItemDescriptionProps): import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
type ItemActionsProps = React.ComponentProps<"div">;
|
|
54
|
+
/**
|
|
55
|
+
* Container for action buttons or controls.
|
|
56
|
+
*/
|
|
57
|
+
declare function ItemActions({ className, ...props }: ItemActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
58
|
+
type ItemHeaderProps = React.ComponentProps<"div">;
|
|
59
|
+
/**
|
|
60
|
+
* Full-width header section for complex item layouts.
|
|
61
|
+
*/
|
|
62
|
+
declare function ItemHeader({ className, ...props }: ItemHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
63
|
+
type ItemFooterProps = React.ComponentProps<"div">;
|
|
64
|
+
/**
|
|
65
|
+
* Full-width footer section for additional information.
|
|
66
|
+
*/
|
|
67
|
+
declare function ItemFooter({ className, ...props }: ItemFooterProps): import("react/jsx-runtime").JSX.Element;
|
|
68
|
+
export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, type ItemProps, type ItemMediaProps, type ItemContentProps, type ItemActionsProps, type ItemGroupProps, type ItemSeparatorProps, type ItemTitleProps, type ItemDescriptionProps, type ItemHeaderProps, type ItemFooterProps, };
|
|
69
|
+
//# sourceMappingURL=item.d.ts.map
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { cva } from "
|
|
4
|
-
import { cn } from "
|
|
3
|
+
import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
|
|
4
|
+
import { cn } from "../../lib/utils.js";
|
|
5
5
|
import { Separator } from "./separator.js";
|
|
6
|
-
import { useRender } from "
|
|
7
|
-
import { mergeProps } from "
|
|
6
|
+
import { useRender } from "../../node_modules/@base-ui/react/esm/use-render/useRender.js";
|
|
7
|
+
import { mergeProps } from "../../node_modules/@base-ui/react/esm/merge-props/mergeProps.js";
|
|
8
8
|
function ItemGroup({ className, ...props }) {
|
|
9
9
|
return /* @__PURE__ */ jsx(
|
|
10
10
|
"div",
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"item.js","sources":["../../../src/components/ui/item.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\n\ntype ItemGroupProps = React.ComponentProps<\"div\">;\n\n/**\n * Container for organizing related items in a vertical list.\n * Automatically adjusts gap based on child item sizes.\n */\nfunction ItemGroup({ className, ...props }: ItemGroupProps) {\n return (\n <div\n role=\"list\"\n data-slot=\"item-group\"\n className={cn(\n \"gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype ItemSeparatorProps = React.ComponentProps<typeof Separator>;\n\n/**\n * Horizontal separator for dividing items within an ItemGroup.\n */\nfunction ItemSeparator({ className, ...props }: ItemSeparatorProps) {\n return (\n <Separator\n data-slot=\"item-separator\"\n orientation=\"horizontal\"\n className={cn(\"my-2\", className)}\n {...props}\n />\n );\n}\n\nconst itemVariants = cva(\n \"[a]:hover:bg-muted rounded-6xl border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n {\n variants: {\n variant: {\n default: \"border-transparent\",\n outline: \"border-border\",\n muted: \"bg-muted/50 border-transparent\",\n },\n size: {\n default: \"gap-3.5 px-4 py-3.5\",\n sm: \"gap-2.5 px-3 py-2.5\",\n xs: \"gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\ntype ItemProps = useRender.ComponentProps<\"div\"> &\n VariantProps<typeof itemVariants>;\n\n/**\n * Flexible list item component for displaying structured content.\n * Use `render` prop to customize the underlying element (e.g., `<a>`, `<button>`).\n */\nfunction Item({\n className,\n variant = \"default\",\n size = \"default\",\n render,\n ...props\n}: ItemProps) {\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(\n {\n className: cn(itemVariants({ variant, size, className })),\n },\n props,\n ),\n render,\n state: {\n slot: \"item\",\n variant,\n size,\n },\n });\n}\n\nconst itemMediaVariants = cva(\n \"gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n icon: \"[&_svg:not([class*='size-'])]:size-4\",\n image:\n \"size-10 overflow-hidden rounded-full group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\ntype ItemMediaProps = React.ComponentProps<\"div\"> &\n VariantProps<typeof itemMediaVariants>;\n\n/**\n * Media container for icons, images, or avatars in an item.\n * Automatically aligns with description text when present.\n */\nfunction ItemMedia({\n className,\n variant = \"default\",\n ...props\n}: ItemMediaProps) {\n return (\n <div\n data-slot=\"item-media\"\n data-variant={variant}\n className={cn(itemMediaVariants({ variant, className }))}\n {...props}\n />\n );\n}\n\ntype ItemContentProps = React.ComponentProps<\"div\">;\n\n/**\n * Main content area for title and description.\n * Flexes to fill available space.\n */\nfunction ItemContent({ className, ...props }: ItemContentProps) {\n return (\n <div\n data-slot=\"item-content\"\n className={cn(\n \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype ItemTitleProps = React.ComponentProps<\"div\">;\n\n/**\n * Title text with medium weight.\n * Supports inline badges and icons.\n */\nfunction ItemTitle({ className, ...props }: ItemTitleProps) {\n return (\n <div\n data-slot=\"item-title\"\n className={cn(\n \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype ItemDescriptionProps = React.ComponentProps<\"p\">;\n\n/**\n * Secondary description text.\n * Automatically truncates after 2 lines.\n */\nfunction ItemDescription({ className, ...props }: ItemDescriptionProps) {\n return (\n <p\n data-slot=\"item-description\"\n className={cn(\n \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype ItemActionsProps = React.ComponentProps<\"div\">;\n\n/**\n * Container for action buttons or controls.\n */\nfunction ItemActions({ className, ...props }: ItemActionsProps) {\n return (\n <div\n data-slot=\"item-actions\"\n className={cn(\"gap-2 flex items-center\", className)}\n {...props}\n />\n );\n}\n\ntype ItemHeaderProps = React.ComponentProps<\"div\">;\n\n/**\n * Full-width header section for complex item layouts.\n */\nfunction ItemHeader({ className, ...props }: ItemHeaderProps) {\n return (\n <div\n data-slot=\"item-header\"\n className={cn(\n \"gap-2 flex basis-full items-center justify-between\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype ItemFooterProps = React.ComponentProps<\"div\">;\n\n/**\n * Full-width footer section for additional information.\n */\nfunction ItemFooter({ className, ...props }: ItemFooterProps) {\n return (\n <div\n data-slot=\"item-footer\"\n className={cn(\n \"gap-2 flex basis-full items-center justify-between\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport {\n Item,\n ItemMedia,\n ItemContent,\n ItemActions,\n ItemGroup,\n ItemSeparator,\n ItemTitle,\n ItemDescription,\n ItemHeader,\n ItemFooter,\n type ItemProps,\n type ItemMediaProps,\n type ItemContentProps,\n type ItemActionsProps,\n type ItemGroupProps,\n type ItemSeparatorProps,\n type ItemTitleProps,\n type ItemDescriptionProps,\n type ItemHeaderProps,\n type ItemFooterProps,\n};\n"],"names":[],"mappings":";;;;;;;AAcA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAOA,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAY;AAAA,MACZ,WAAW,GAAG,QAAQ,SAAS;AAAA,MAC9B,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,MAET,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AASA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAc;AACZ,SAAO,UAAU;AAAA,IACf,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACL;AAAA,QACE,WAAW,GAAG,aAAa,EAAE,SAAS,MAAM,WAAW,CAAC;AAAA,MAAA;AAAA,MAE1D;AAAA,IAAA;AAAA,IAEF;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EACF,CACD;AACH;AAEA,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AASA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,kBAAkB,EAAE,SAAS,UAAA,CAAW,CAAC;AAAA,MACtD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AACtE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAOA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,2BAA2B,SAAS;AAAA,MACjD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAOA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAOA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
type KbdProps = React.ComponentProps<"kbd">;
|
|
2
|
+
/**
|
|
3
|
+
* Keyboard key display component for showing keyboard shortcuts and key combinations.
|
|
4
|
+
* Supports text and icon content (e.g., Command, Arrow keys).
|
|
5
|
+
*/
|
|
6
|
+
declare function Kbd({ className, ...props }: KbdProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
type KbdGroupProps = React.ComponentProps<"div">;
|
|
8
|
+
/**
|
|
9
|
+
* Container for grouping multiple Kbd components to represent key combinations.
|
|
10
|
+
* Use for shortcuts like Cmd+K or sequential keys like G→H.
|
|
11
|
+
*/
|
|
12
|
+
declare function KbdGroup({ className, ...props }: KbdGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export { Kbd, KbdGroup, type KbdProps, type KbdGroupProps };
|
|
14
|
+
//# sourceMappingURL=kbd.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kbd.js","sources":["../../../src/components/ui/kbd.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\";\n\ntype KbdProps = React.ComponentProps<\"kbd\">;\n\n/**\n * Keyboard key display component for showing keyboard shortcuts and key combinations.\n * Supports text and icon content (e.g., Command, Arrow keys).\n */\nfunction Kbd({ className, ...props }: KbdProps) {\n return (\n <kbd\n data-slot=\"kbd\"\n className={cn(\n \"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\n className,\n )}\n {...props}\n />\n );\n}\n\ntype KbdGroupProps = React.ComponentProps<\"div\">;\n\n/**\n * Container for grouping multiple Kbd components to represent key combinations.\n * Use for shortcuts like Cmd+K or sequential keys like G→H.\n */\nfunction KbdGroup({ className, ...props }: KbdGroupProps) {\n return (\n <kbd\n data-slot=\"kbd-group\"\n className={cn(\"gap-1 inline-flex items-center\", className)}\n {...props}\n />\n );\n}\n\nexport { Kbd, KbdGroup, type KbdProps, type KbdGroupProps };\n"],"names":[],"mappings":";;AAQA,SAAS,IAAI,EAAE,WAAW,GAAG,SAAmB;AAC9C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,kCAAkC,SAAS;AAAA,MACxD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
type LabelProps = React.ComponentProps<"label">;
|
|
3
|
+
/**
|
|
4
|
+
* Accessible label component that associates with form controls.
|
|
5
|
+
* Automatically styles for disabled states via peer and group data attributes.
|
|
6
|
+
*/
|
|
7
|
+
declare function Label({ className, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export { Label, type LabelProps };
|
|
9
|
+
//# sourceMappingURL=label.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"label.js","sources":["../../../src/components/ui/label.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype LabelProps = React.ComponentProps<\"label\">;\n\n/**\n * Accessible label component that associates with form controls.\n * Automatically styles for disabled states via peer and group data attributes.\n */\nfunction Label({ className, ...props }: LabelProps) {\n return (\n <label\n data-slot=\"label\"\n className={cn(\n \"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Label, type LabelProps };\n"],"names":[],"mappings":";;;;AAYA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;;;;"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { Menu as MenuPrimitive } from '@base-ui/react/menu';
|
|
2
|
+
import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
|
|
3
|
+
import { MenuItemVariant } from '../../lib/variants';
|
|
4
|
+
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './dropdown-menu';
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
type MenubarProps = MenubarPrimitive.Props;
|
|
7
|
+
/**
|
|
8
|
+
* Horizontal menubar for application-level navigation and actions.
|
|
9
|
+
* Typically used at the top of an application with File, Edit, View, Help menus.
|
|
10
|
+
*/
|
|
11
|
+
declare function Menubar({ className, ...props }: MenubarProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
type MenubarMenuProps = React.ComponentProps<typeof DropdownMenu>;
|
|
13
|
+
/** Individual menu within the menubar. Manages open/close state for a single menu. */
|
|
14
|
+
declare function MenubarMenu({ ...props }: MenubarMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
type MenubarGroupProps = React.ComponentProps<typeof DropdownMenuGroup>;
|
|
16
|
+
/** Groups related menu items together with optional label. */
|
|
17
|
+
declare function MenubarGroup({ ...props }: MenubarGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
type MenubarPortalProps = React.ComponentProps<typeof DropdownMenuPortal>;
|
|
19
|
+
/** Renders menu content in a portal. Automatically used by MenubarContent. */
|
|
20
|
+
declare function MenubarPortal({ ...props }: MenubarPortalProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
type MenubarTriggerProps = React.ComponentProps<typeof DropdownMenuTrigger>;
|
|
22
|
+
/** Button that opens a menu. Use `render` prop to customize. */
|
|
23
|
+
declare function MenubarTrigger({ className, ...props }: MenubarTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
type MenubarContentProps = React.ComponentProps<typeof DropdownMenuContent>;
|
|
25
|
+
/**
|
|
26
|
+
* Menu content container with automatic portal rendering.
|
|
27
|
+
* Includes backdrop blur (frosted glass effect) and smooth animations.
|
|
28
|
+
*/
|
|
29
|
+
declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: MenubarContentProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
type MenubarItemProps = MenuPrimitive.Item.Props & {
|
|
31
|
+
/** Adds left padding for items in menus with leading icons/checkboxes. */
|
|
32
|
+
inset?: boolean;
|
|
33
|
+
/** Visual variant for different action types. @default "default" */
|
|
34
|
+
variant?: MenuItemVariant;
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* Interactive menu item. Supports variants (default, destructive, success, warning, info).
|
|
38
|
+
* Use `inset` for items in menus with icons/checkboxes.
|
|
39
|
+
*/
|
|
40
|
+
declare function MenubarItem({ className, inset, variant, ...props }: MenubarItemProps): import("react/jsx-runtime").JSX.Element;
|
|
41
|
+
type MenubarCheckboxItemProps = MenuPrimitive.CheckboxItem.Props;
|
|
42
|
+
/**
|
|
43
|
+
* Menu item with checkbox for toggling independent boolean options.
|
|
44
|
+
* Displays checkmark when checked. Use for multiple toggleable settings.
|
|
45
|
+
*/
|
|
46
|
+
declare function MenubarCheckboxItem({ className, children, checked, ...props }: MenubarCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
|
|
47
|
+
type MenubarRadioGroupProps = React.ComponentProps<typeof DropdownMenuRadioGroup>;
|
|
48
|
+
/** Container for radio items. Manages single selection from mutually exclusive options. */
|
|
49
|
+
declare function MenubarRadioGroup({ ...props }: MenubarRadioGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
50
|
+
type MenubarRadioItemProps = MenuPrimitive.RadioItem.Props;
|
|
51
|
+
/**
|
|
52
|
+
* Menu item with radio button for selecting one option from a group.
|
|
53
|
+
* Must be wrapped in MenubarRadioGroup. Displays checkmark when selected.
|
|
54
|
+
*/
|
|
55
|
+
declare function MenubarRadioItem({ className, children, ...props }: MenubarRadioItemProps): import("react/jsx-runtime").JSX.Element;
|
|
56
|
+
type MenubarLabelProps = React.ComponentProps<typeof DropdownMenuLabel>;
|
|
57
|
+
/** Non-interactive label for grouping menu items. Use inside MenubarGroup. */
|
|
58
|
+
declare function MenubarLabel({ className, inset, ...props }: MenubarLabelProps): import("react/jsx-runtime").JSX.Element;
|
|
59
|
+
type MenubarSeparatorProps = React.ComponentProps<typeof DropdownMenuSeparator>;
|
|
60
|
+
/** Visual separator between menu items or groups. */
|
|
61
|
+
declare function MenubarSeparator({ className, ...props }: MenubarSeparatorProps): import("react/jsx-runtime").JSX.Element;
|
|
62
|
+
type MenubarShortcutProps = React.ComponentProps<typeof DropdownMenuShortcut>;
|
|
63
|
+
/**
|
|
64
|
+
* Keyboard shortcut hint displayed on the right side of menu items.
|
|
65
|
+
* Shows in muted color, highlights on focus. For display only, doesn't bind keys.
|
|
66
|
+
*/
|
|
67
|
+
declare function MenubarShortcut({ className, ...props }: MenubarShortcutProps): import("react/jsx-runtime").JSX.Element;
|
|
68
|
+
type MenubarSubProps = React.ComponentProps<typeof DropdownMenuSub>;
|
|
69
|
+
/** Container for nested submenu. Manages open/close state for the submenu. */
|
|
70
|
+
declare function MenubarSub({ ...props }: MenubarSubProps): import("react/jsx-runtime").JSX.Element;
|
|
71
|
+
type MenubarSubTriggerProps = React.ComponentProps<typeof DropdownMenuSubTrigger> & {
|
|
72
|
+
/** Adds left padding for alignment with items that have icons/checkboxes. */
|
|
73
|
+
inset?: boolean;
|
|
74
|
+
};
|
|
75
|
+
/**
|
|
76
|
+
* Menu item that opens a submenu on hover or click.
|
|
77
|
+
* Displays chevron icon automatically. Use inside MenubarSub.
|
|
78
|
+
*/
|
|
79
|
+
declare function MenubarSubTrigger({ className, inset, ...props }: MenubarSubTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
80
|
+
type MenubarSubContentProps = React.ComponentProps<typeof DropdownMenuSubContent>;
|
|
81
|
+
/**
|
|
82
|
+
* Content container for submenu items.
|
|
83
|
+
* Positioned relative to trigger, includes backdrop blur and animations.
|
|
84
|
+
*/
|
|
85
|
+
declare function MenubarSubContent({ className, ...props }: MenubarSubContentProps): import("react/jsx-runtime").JSX.Element;
|
|
86
|
+
export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, type MenubarProps, type MenubarPortalProps, type MenubarMenuProps, type MenubarTriggerProps, type MenubarContentProps, type MenubarGroupProps, type MenubarSeparatorProps, type MenubarLabelProps, type MenubarItemProps, type MenubarShortcutProps, type MenubarCheckboxItemProps, type MenubarRadioGroupProps, type MenubarRadioItemProps, type MenubarSubProps, type MenubarSubTriggerProps, type MenubarSubContentProps, };
|
|
87
|
+
//# sourceMappingURL=menubar.d.ts.map
|