@wheelhouse/ui 0.1.6 → 0.2.1
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/blocks/index.d.ts +2 -0
- package/dist/blocks/index.d.ts.map +1 -0
- package/dist/blocks/index.js +1 -0
- package/dist/blocks/navigation/index.d.ts +2 -0
- package/dist/blocks/navigation/index.d.ts.map +1 -0
- package/dist/blocks/navigation/index.js +1 -0
- package/dist/blocks/navigation/pattern-1/index.d.ts +3 -0
- package/dist/blocks/navigation/pattern-1/index.d.ts.map +1 -0
- package/dist/blocks/navigation/pattern-1/index.js +1 -0
- package/dist/blocks/navigation/pattern-1/pattern-1.config.d.ts +47 -0
- package/dist/blocks/navigation/pattern-1/pattern-1.config.d.ts.map +1 -0
- package/dist/blocks/navigation/pattern-1/pattern-1.config.js +55 -0
- package/dist/blocks/navigation/pattern-1/pattern-1.d.ts +7 -0
- package/dist/blocks/navigation/pattern-1/pattern-1.d.ts.map +1 -0
- package/dist/blocks/navigation/pattern-1/pattern-1.js +50 -0
- package/dist/blocks/navigation/pattern-1/pattern-1.stories.d.ts +16 -0
- package/dist/blocks/navigation/pattern-1/pattern-1.stories.d.ts.map +1 -0
- package/dist/blocks/navigation/pattern-1/pattern-1.stories.js +20 -0
- package/dist/components/accordion/accordion.d.ts +15 -0
- package/dist/components/accordion/accordion.d.ts.map +1 -0
- package/dist/components/accordion/accordion.js +18 -0
- package/dist/components/accordion/accordion.stories.d.ts +7 -0
- package/dist/components/accordion/accordion.stories.d.ts.map +1 -0
- package/dist/components/accordion/accordion.stories.js +17 -0
- package/dist/components/accordion/index.d.ts +3 -0
- package/dist/components/accordion/index.d.ts.map +1 -0
- package/dist/components/accordion/index.js +1 -0
- package/dist/components/alert/alert.d.ts +11 -0
- package/dist/components/alert/alert.d.ts.map +1 -0
- package/dist/components/alert/alert.js +28 -0
- package/dist/components/alert/alert.stories.d.ts +11 -0
- package/dist/components/alert/alert.stories.d.ts.map +1 -0
- package/dist/components/alert/alert.stories.js +35 -0
- package/dist/components/alert/index.d.ts +2 -0
- package/dist/components/alert/index.d.ts.map +1 -0
- package/dist/components/alert/index.js +1 -0
- package/dist/components/alert-dialog/alert-dialog.d.ts +44 -0
- package/dist/components/alert-dialog/alert-dialog.d.ts.map +1 -0
- package/dist/components/alert-dialog/alert-dialog.js +43 -0
- package/dist/components/alert-dialog/alert-dialog.stories.d.ts +9 -0
- package/dist/components/alert-dialog/alert-dialog.stories.d.ts.map +1 -0
- package/dist/components/alert-dialog/alert-dialog.stories.js +22 -0
- package/dist/components/alert-dialog/index.d.ts +3 -0
- package/dist/components/alert-dialog/index.d.ts.map +1 -0
- package/dist/components/alert-dialog/index.js +1 -0
- package/dist/components/aspect-ratio/aspect-ratio.d.ts +11 -0
- package/dist/components/aspect-ratio/aspect-ratio.d.ts.map +1 -0
- package/dist/components/aspect-ratio/aspect-ratio.js +9 -0
- package/dist/components/aspect-ratio/aspect-ratio.stories.d.ts +8 -0
- package/dist/components/aspect-ratio/aspect-ratio.stories.d.ts.map +1 -0
- package/dist/components/aspect-ratio/aspect-ratio.stories.js +26 -0
- package/dist/components/aspect-ratio/index.d.ts +3 -0
- package/dist/components/aspect-ratio/index.d.ts.map +1 -0
- package/dist/components/aspect-ratio/index.js +1 -0
- package/dist/components/avatar/avatar.d.ts +29 -0
- package/dist/components/avatar/avatar.d.ts.map +1 -0
- package/dist/components/avatar/avatar.js +24 -0
- package/dist/components/avatar/avatar.stories.d.ts +20 -0
- package/dist/components/avatar/avatar.stories.d.ts.map +1 -0
- package/dist/components/avatar/avatar.stories.js +40 -0
- package/dist/components/avatar/index.d.ts +2 -0
- package/dist/components/avatar/index.d.ts.map +1 -0
- package/dist/components/avatar/index.js +1 -0
- package/dist/components/badge/badge.d.ts +5 -4
- package/dist/components/badge/badge.d.ts.map +1 -1
- package/dist/components/badge/badge.js +3 -3
- package/dist/components/breadcrumb/breadcrumb.d.ts +25 -0
- package/dist/components/breadcrumb/breadcrumb.d.ts.map +1 -0
- package/dist/components/breadcrumb/breadcrumb.js +38 -0
- package/dist/components/breadcrumb/breadcrumb.stories.d.ts +16 -0
- package/dist/components/breadcrumb/breadcrumb.stories.d.ts.map +1 -0
- package/dist/components/breadcrumb/breadcrumb.stories.js +21 -0
- package/dist/components/breadcrumb/index.d.ts +2 -0
- package/dist/components/breadcrumb/index.d.ts.map +1 -0
- package/dist/components/breadcrumb/index.js +1 -0
- package/dist/components/button/button.d.ts +9 -6
- package/dist/components/button/button.d.ts.map +1 -1
- package/dist/components/button/button.js +3 -3
- package/dist/components/button-group/button-group.d.ts +3 -1
- package/dist/components/button-group/button-group.d.ts.map +1 -1
- package/dist/components/button-group/button-group.js +1 -1
- package/dist/components/button-group/button-group.stories.d.ts +1 -0
- package/dist/components/button-group/button-group.stories.d.ts.map +1 -1
- package/dist/components/button-group/button-group.stories.js +4 -0
- package/dist/components/button-group/index.d.ts +1 -0
- package/dist/components/button-group/index.d.ts.map +1 -1
- package/dist/components/calendar/calendar.d.ts +34 -0
- package/dist/components/calendar/calendar.d.ts.map +1 -0
- package/dist/components/calendar/calendar.js +82 -0
- package/dist/components/calendar/calendar.stories.d.ts +16 -0
- package/dist/components/calendar/calendar.stories.d.ts.map +1 -0
- package/dist/components/calendar/calendar.stories.js +33 -0
- package/dist/components/calendar/index.d.ts +3 -0
- package/dist/components/calendar/index.d.ts.map +1 -0
- package/dist/components/calendar/index.js +1 -0
- package/dist/components/card/card.d.ts +28 -0
- package/dist/components/card/card.d.ts.map +1 -0
- package/dist/components/card/card.js +25 -0
- package/dist/components/card/card.stories.d.ts +10 -0
- package/dist/components/card/card.stories.d.ts.map +1 -0
- package/dist/components/card/card.stories.js +30 -0
- package/dist/components/card/index.d.ts +2 -0
- package/dist/components/card/index.d.ts.map +1 -0
- package/dist/components/card/index.js +1 -0
- package/dist/components/checkbox/checkbox.d.ts +9 -0
- package/dist/components/checkbox/checkbox.d.ts.map +1 -0
- package/dist/components/checkbox/checkbox.js +9 -0
- package/dist/components/checkbox/checkbox.stories.d.ts +19 -0
- package/dist/components/checkbox/checkbox.stories.d.ts.map +1 -0
- package/dist/components/checkbox/checkbox.stories.js +31 -0
- package/dist/components/checkbox/index.d.ts +2 -0
- package/dist/components/checkbox/index.d.ts.map +1 -0
- package/dist/components/checkbox/index.js +1 -0
- package/dist/components/collapsible/collapsible.d.ts +17 -0
- package/dist/components/collapsible/collapsible.d.ts.map +1 -0
- package/dist/components/collapsible/collapsible.js +17 -0
- package/dist/components/collapsible/collapsible.stories.d.ts +16 -0
- package/dist/components/collapsible/collapsible.stories.d.ts.map +1 -0
- package/dist/components/collapsible/collapsible.stories.js +24 -0
- package/dist/components/collapsible/index.d.ts +3 -0
- package/dist/components/collapsible/index.d.ts.map +1 -0
- package/dist/components/collapsible/index.js +1 -0
- package/dist/components/combobox/combobox.d.ts +38 -0
- package/dist/components/combobox/combobox.d.ts.map +1 -0
- package/dist/components/combobox/combobox.js +63 -0
- package/dist/components/combobox/combobox.stories.d.ts +18 -0
- package/dist/components/combobox/combobox.stories.d.ts.map +1 -0
- package/dist/components/combobox/combobox.stories.js +46 -0
- package/dist/components/combobox/index.d.ts +3 -0
- package/dist/components/combobox/index.d.ts.map +1 -0
- package/dist/components/combobox/index.js +1 -0
- package/dist/components/command/command.d.ts +31 -0
- package/dist/components/command/command.d.ts.map +1 -0
- package/dist/components/command/command.js +36 -0
- package/dist/components/command/command.stories.d.ts +16 -0
- package/dist/components/command/command.stories.d.ts.map +1 -0
- package/dist/components/command/command.stories.js +26 -0
- package/dist/components/command/index.d.ts +2 -0
- package/dist/components/command/index.d.ts.map +1 -0
- package/dist/components/command/index.js +1 -0
- package/dist/components/context-menu/context-menu.d.ts +62 -0
- package/dist/components/context-menu/context-menu.d.ts.map +1 -0
- package/dist/components/context-menu/context-menu.js +52 -0
- package/dist/components/context-menu/context-menu.stories.d.ts +17 -0
- package/dist/components/context-menu/context-menu.stories.d.ts.map +1 -0
- package/dist/components/context-menu/context-menu.stories.js +27 -0
- package/dist/components/context-menu/index.d.ts +2 -0
- package/dist/components/context-menu/index.d.ts.map +1 -0
- package/dist/components/context-menu/index.js +1 -0
- package/dist/components/date-selector/date-selector-context.d.ts +6 -0
- package/dist/components/date-selector/date-selector-context.d.ts.map +1 -0
- package/dist/components/date-selector/date-selector-context.js +11 -0
- package/dist/components/date-selector/date-selector-parts.d.ts +68 -0
- package/dist/components/date-selector/date-selector-parts.d.ts.map +1 -0
- package/dist/components/date-selector/date-selector-parts.js +131 -0
- package/dist/components/date-selector/date-selector-types.d.ts +118 -0
- package/dist/components/date-selector/date-selector-types.d.ts.map +1 -0
- package/dist/components/date-selector/date-selector-types.js +32 -0
- package/dist/components/date-selector/date-selector-value.d.ts +47 -0
- package/dist/components/date-selector/date-selector-value.d.ts.map +1 -0
- package/dist/components/date-selector/date-selector-value.js +183 -0
- package/dist/components/date-selector/date-selector.d.ts +6 -0
- package/dist/components/date-selector/date-selector.d.ts.map +1 -0
- package/dist/components/date-selector/date-selector.js +144 -0
- package/dist/components/date-selector/date-selector.stories.d.ts +135 -0
- package/dist/components/date-selector/date-selector.stories.d.ts.map +1 -0
- package/dist/components/date-selector/date-selector.stories.js +144 -0
- package/dist/components/date-selector/index.d.ts +7 -0
- package/dist/components/date-selector/index.d.ts.map +1 -0
- package/dist/components/date-selector/index.js +5 -0
- package/dist/components/date-selector/use-date-selector.d.ts +50 -0
- package/dist/components/date-selector/use-date-selector.d.ts.map +1 -0
- package/dist/components/date-selector/use-date-selector.js +305 -0
- package/dist/components/dialog/dialog.d.ts +40 -0
- package/dist/components/dialog/dialog.d.ts.map +1 -0
- package/dist/components/dialog/dialog.js +38 -0
- package/dist/components/dialog/dialog.stories.d.ts +9 -0
- package/dist/components/dialog/dialog.stories.d.ts.map +1 -0
- package/dist/components/dialog/dialog.stories.js +22 -0
- package/dist/components/dialog/index.d.ts +3 -0
- package/dist/components/dialog/index.d.ts.map +1 -0
- package/dist/components/dialog/index.js +1 -0
- package/dist/components/direction/direction.d.ts +7 -0
- package/dist/components/direction/direction.d.ts.map +1 -0
- package/dist/components/direction/direction.js +5 -0
- package/dist/components/direction/direction.stories.d.ts +8 -0
- package/dist/components/direction/direction.stories.d.ts.map +1 -0
- package/dist/components/direction/direction.stories.js +23 -0
- package/dist/components/direction/index.d.ts +2 -0
- package/dist/components/direction/index.d.ts.map +1 -0
- package/dist/components/direction/index.js +1 -0
- package/dist/components/drawer/drawer.d.ts +25 -0
- package/dist/components/drawer/drawer.d.ts.map +1 -0
- package/dist/components/drawer/drawer.js +36 -0
- package/dist/components/drawer/drawer.stories.d.ts +7 -0
- package/dist/components/drawer/drawer.stories.d.ts.map +1 -0
- package/dist/components/drawer/drawer.stories.js +17 -0
- package/dist/components/drawer/index.d.ts +2 -0
- package/dist/components/drawer/index.d.ts.map +1 -0
- package/dist/components/drawer/index.js +1 -0
- package/dist/components/dropdown-menu/dropdown-menu.d.ts +65 -0
- package/dist/components/dropdown-menu/dropdown-menu.d.ts.map +1 -0
- package/dist/components/dropdown-menu/dropdown-menu.js +52 -0
- package/dist/components/dropdown-menu/dropdown-menu.stories.d.ts +18 -0
- package/dist/components/dropdown-menu/dropdown-menu.stories.d.ts.map +1 -0
- package/dist/components/dropdown-menu/dropdown-menu.stories.js +31 -0
- package/dist/components/dropdown-menu/index.d.ts +3 -0
- package/dist/components/dropdown-menu/index.d.ts.map +1 -0
- package/dist/components/dropdown-menu/index.js +1 -0
- package/dist/components/empty/empty.d.ts +25 -0
- package/dist/components/empty/empty.d.ts.map +1 -0
- package/dist/components/empty/empty.js +34 -0
- package/dist/components/empty/empty.stories.d.ts +7 -0
- package/dist/components/empty/empty.stories.d.ts.map +1 -0
- package/dist/components/empty/empty.stories.js +19 -0
- package/dist/components/empty/index.d.ts +3 -0
- package/dist/components/empty/index.d.ts.map +1 -0
- package/dist/components/empty/index.js +1 -0
- package/dist/components/field/field.d.ts +22 -0
- package/dist/components/field/field.d.ts.map +1 -0
- package/dist/components/field/field.js +34 -0
- package/dist/components/field/field.stories.d.ts +16 -0
- package/dist/components/field/field.stories.d.ts.map +1 -0
- package/dist/components/field/field.stories.js +26 -0
- package/dist/components/field/index.d.ts +2 -0
- package/dist/components/field/index.d.ts.map +1 -0
- package/dist/components/field/index.js +1 -0
- package/dist/components/filters/filters-defaults.d.ts +5 -0
- package/dist/components/filters/filters-defaults.d.ts.map +1 -0
- package/dist/components/filters/filters-defaults.js +97 -0
- package/dist/components/filters/filters-types.d.ts +135 -0
- package/dist/components/filters/filters-types.d.ts.map +1 -0
- package/dist/components/filters/filters-types.js +1 -0
- package/dist/components/filters/filters-utils.d.ts +4 -0
- package/dist/components/filters/filters-utils.d.ts.map +1 -0
- package/dist/components/filters/filters-utils.js +12 -0
- package/dist/components/filters/filters.d.ts +29 -0
- package/dist/components/filters/filters.d.ts.map +1 -0
- package/dist/components/filters/filters.js +733 -0
- package/dist/components/filters/filters.stories.d.ts +8 -0
- package/dist/components/filters/filters.stories.d.ts.map +1 -0
- package/dist/components/filters/filters.stories.js +48 -0
- package/dist/components/filters/index.d.ts +5 -0
- package/dist/components/filters/index.d.ts.map +1 -0
- package/dist/components/filters/index.js +4 -0
- package/dist/components/frame/frame.d.ts +65 -0
- package/dist/components/frame/frame.d.ts.map +1 -0
- package/dist/components/frame/frame.js +108 -0
- package/dist/components/frame/frame.stories.d.ts +14 -0
- package/dist/components/frame/frame.stories.d.ts.map +1 -0
- package/dist/components/frame/frame.stories.js +50 -0
- package/dist/components/frame/index.d.ts +3 -0
- package/dist/components/frame/index.d.ts.map +1 -0
- package/dist/components/frame/index.js +1 -0
- package/dist/components/hover-card/hover-card.d.ts +16 -0
- package/dist/components/hover-card/hover-card.d.ts.map +1 -0
- package/dist/components/hover-card/hover-card.js +14 -0
- package/dist/components/hover-card/hover-card.stories.d.ts +7 -0
- package/dist/components/hover-card/hover-card.stories.d.ts.map +1 -0
- package/dist/components/hover-card/hover-card.stories.js +15 -0
- package/dist/components/hover-card/index.d.ts +3 -0
- package/dist/components/hover-card/index.d.ts.map +1 -0
- package/dist/components/hover-card/index.js +1 -0
- package/dist/components/index.d.ts +51 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +51 -0
- package/dist/components/input/index.d.ts +2 -0
- package/dist/components/input/index.d.ts.map +1 -0
- package/dist/components/input/index.js +1 -0
- package/dist/components/input/input.d.ts +16 -0
- package/dist/components/input/input.d.ts.map +1 -0
- package/dist/components/input/input.js +22 -0
- package/dist/components/input/input.stories.d.ts +28 -0
- package/dist/components/input/input.stories.d.ts.map +1 -0
- package/dist/components/input/input.stories.js +33 -0
- package/dist/components/input-group/index.d.ts +3 -0
- package/dist/components/input-group/index.d.ts.map +1 -0
- package/dist/components/input-group/index.js +1 -0
- package/dist/components/input-group/input-group.d.ts +44 -0
- package/dist/components/input-group/input-group.d.ts.map +1 -0
- package/dist/components/input-group/input-group.js +72 -0
- package/dist/components/input-group/input-group.stories.d.ts +18 -0
- package/dist/components/input-group/input-group.stories.d.ts.map +1 -0
- package/dist/components/input-group/input-group.stories.js +29 -0
- package/dist/components/item/index.d.ts +3 -0
- package/dist/components/item/index.d.ts.map +1 -0
- package/dist/components/item/index.js +1 -0
- package/dist/components/item/item.d.ts +60 -0
- package/dist/components/item/item.d.ts.map +1 -0
- package/dist/components/item/item.js +95 -0
- package/dist/components/item/item.stories.d.ts +34 -0
- package/dist/components/item/item.stories.d.ts.map +1 -0
- package/dist/components/item/item.stories.js +40 -0
- package/dist/components/kbd/index.d.ts +3 -0
- package/dist/components/kbd/index.d.ts.map +1 -0
- package/dist/components/kbd/index.js +1 -0
- package/dist/components/kbd/kbd.d.ts +15 -0
- package/dist/components/kbd/kbd.d.ts.map +1 -0
- package/dist/components/kbd/kbd.js +16 -0
- package/dist/components/kbd/kbd.stories.d.ts +17 -0
- package/dist/components/kbd/kbd.stories.d.ts.map +1 -0
- package/dist/components/kbd/kbd.stories.js +25 -0
- package/dist/components/label/index.d.ts +2 -0
- package/dist/components/label/index.d.ts.map +1 -0
- package/dist/components/label/index.js +1 -0
- package/dist/components/label/label.d.ts +6 -0
- package/dist/components/label/label.d.ts.map +1 -0
- package/dist/components/label/label.js +10 -0
- package/dist/components/label/label.stories.d.ts +18 -0
- package/dist/components/label/label.stories.d.ts.map +1 -0
- package/dist/components/label/label.stories.js +29 -0
- package/dist/components/menubar/index.d.ts +3 -0
- package/dist/components/menubar/index.d.ts.map +1 -0
- package/dist/components/menubar/index.js +1 -0
- package/dist/components/menubar/menubar.d.ts +64 -0
- package/dist/components/menubar/menubar.d.ts.map +1 -0
- package/dist/components/menubar/menubar.js +56 -0
- package/dist/components/menubar/menubar.stories.d.ts +15 -0
- package/dist/components/menubar/menubar.stories.d.ts.map +1 -0
- package/dist/components/menubar/menubar.stories.js +18 -0
- package/dist/components/native-select/index.d.ts +2 -0
- package/dist/components/native-select/index.d.ts.map +1 -0
- package/dist/components/native-select/index.js +1 -0
- package/dist/components/native-select/native-select.d.ts +12 -0
- package/dist/components/native-select/native-select.d.ts.map +1 -0
- package/dist/components/native-select/native-select.js +14 -0
- package/dist/components/native-select/native-select.stories.d.ts +8 -0
- package/dist/components/native-select/native-select.stories.d.ts.map +1 -0
- package/dist/components/native-select/native-select.stories.js +19 -0
- package/dist/components/navigation-menu/index.d.ts +3 -0
- package/dist/components/navigation-menu/index.d.ts.map +1 -0
- package/dist/components/navigation-menu/index.js +1 -0
- package/dist/components/navigation-menu/navigation-menu.d.ts +33 -0
- package/dist/components/navigation-menu/navigation-menu.d.ts.map +1 -0
- package/dist/components/navigation-menu/navigation-menu.js +33 -0
- package/dist/components/navigation-menu/navigation-menu.stories.d.ts +14 -0
- package/dist/components/navigation-menu/navigation-menu.stories.d.ts.map +1 -0
- package/dist/components/navigation-menu/navigation-menu.stories.js +14 -0
- package/dist/components/pagination/index.d.ts +3 -0
- package/dist/components/pagination/index.d.ts.map +1 -0
- package/dist/components/pagination/index.js +1 -0
- package/dist/components/pagination/pagination.d.ts +31 -0
- package/dist/components/pagination/pagination.d.ts.map +1 -0
- package/dist/components/pagination/pagination.js +29 -0
- package/dist/components/pagination/pagination.stories.d.ts +14 -0
- package/dist/components/pagination/pagination.stories.d.ts.map +1 -0
- package/dist/components/pagination/pagination.stories.js +14 -0
- package/dist/components/popover/index.d.ts +2 -0
- package/dist/components/popover/index.d.ts.map +1 -0
- package/dist/components/popover/index.js +1 -0
- package/dist/components/popover/popover.d.ts +20 -0
- package/dist/components/popover/popover.d.ts.map +1 -0
- package/dist/components/popover/popover.js +24 -0
- package/dist/components/popover/popover.stories.d.ts +7 -0
- package/dist/components/popover/popover.stories.d.ts.map +1 -0
- package/dist/components/popover/popover.stories.js +17 -0
- package/dist/components/progress/index.d.ts +3 -0
- package/dist/components/progress/index.d.ts.map +1 -0
- package/dist/components/progress/index.js +1 -0
- package/dist/components/progress/progress.d.ts +18 -0
- package/dist/components/progress/progress.d.ts.map +1 -0
- package/dist/components/progress/progress.js +20 -0
- package/dist/components/progress/progress.stories.d.ts +9 -0
- package/dist/components/progress/progress.stories.d.ts.map +1 -0
- package/dist/components/progress/progress.stories.js +29 -0
- package/dist/components/radio-group/index.d.ts +3 -0
- package/dist/components/radio-group/index.d.ts.map +1 -0
- package/dist/components/radio-group/index.js +1 -0
- package/dist/components/radio-group/radio-group.d.ts +13 -0
- package/dist/components/radio-group/radio-group.d.ts.map +1 -0
- package/dist/components/radio-group/radio-group.js +12 -0
- package/dist/components/radio-group/radio-group.stories.d.ts +7 -0
- package/dist/components/radio-group/radio-group.stories.d.ts.map +1 -0
- package/dist/components/radio-group/radio-group.stories.js +18 -0
- package/dist/components/resizable/index.d.ts +2 -0
- package/dist/components/resizable/index.d.ts.map +1 -0
- package/dist/components/resizable/index.js +1 -0
- package/dist/components/resizable/resizable.d.ts +12 -0
- package/dist/components/resizable/resizable.d.ts.map +1 -0
- package/dist/components/resizable/resizable.js +14 -0
- package/dist/components/resizable/resizable.stories.d.ts +7 -0
- package/dist/components/resizable/resizable.stories.d.ts.map +1 -0
- package/dist/components/resizable/resizable.stories.js +16 -0
- package/dist/components/scroll-area/index.d.ts +2 -0
- package/dist/components/scroll-area/index.d.ts.map +1 -0
- package/dist/components/scroll-area/index.js +1 -0
- package/dist/components/scroll-area/scroll-area.d.ts +7 -0
- package/dist/components/scroll-area/scroll-area.d.ts.map +1 -0
- package/dist/components/scroll-area/scroll-area.js +11 -0
- package/dist/components/scroll-area/scroll-area.stories.d.ts +6 -0
- package/dist/components/scroll-area/scroll-area.stories.d.ts.map +1 -0
- package/dist/components/scroll-area/scroll-area.stories.js +13 -0
- package/dist/components/select/index.d.ts +3 -0
- package/dist/components/select/index.d.ts.map +1 -0
- package/dist/components/select/index.js +1 -0
- package/dist/components/select/select.d.ts +49 -0
- package/dist/components/select/select.d.ts.map +1 -0
- package/dist/components/select/select.js +50 -0
- package/dist/components/select/select.stories.d.ts +9 -0
- package/dist/components/select/select.stories.d.ts.map +1 -0
- package/dist/components/select/select.stories.js +20 -0
- package/dist/components/separator/index.d.ts +1 -0
- package/dist/components/separator/index.d.ts.map +1 -1
- package/dist/components/separator/separator.d.ts +3 -1
- package/dist/components/separator/separator.d.ts.map +1 -1
- package/dist/components/sheet/index.d.ts +2 -0
- package/dist/components/sheet/index.d.ts.map +1 -0
- package/dist/components/sheet/index.js +1 -0
- package/dist/components/sheet/sheet.d.ts +34 -0
- package/dist/components/sheet/sheet.d.ts.map +1 -0
- package/dist/components/sheet/sheet.js +38 -0
- package/dist/components/sheet/sheet.stories.d.ts +9 -0
- package/dist/components/sheet/sheet.stories.d.ts.map +1 -0
- package/dist/components/sheet/sheet.stories.js +21 -0
- package/dist/components/slider/index.d.ts +3 -0
- package/dist/components/slider/index.d.ts.map +1 -0
- package/dist/components/slider/index.js +1 -0
- package/dist/components/slider/slider.d.ts +15 -0
- package/dist/components/slider/slider.d.ts.map +1 -0
- package/dist/components/slider/slider.js +20 -0
- package/dist/components/slider/slider.stories.d.ts +11 -0
- package/dist/components/slider/slider.stories.d.ts.map +1 -0
- package/dist/components/slider/slider.stories.js +36 -0
- package/dist/components/sonner/index.d.ts +4 -0
- package/dist/components/sonner/index.d.ts.map +1 -0
- package/dist/components/sonner/index.js +2 -0
- package/dist/components/sonner/sonner.d.ts +12 -0
- package/dist/components/sonner/sonner.d.ts.map +1 -0
- package/dist/components/sonner/sonner.js +32 -0
- package/dist/components/sonner/sonner.stories.d.ts +8 -0
- package/dist/components/sonner/sonner.stories.d.ts.map +1 -0
- package/dist/components/sonner/sonner.stories.js +25 -0
- package/dist/components/sonner/toast.d.ts +2 -0
- package/dist/components/sonner/toast.d.ts.map +1 -0
- package/dist/components/sonner/toast.js +1 -0
- package/dist/components/sortable/index.d.ts +3 -0
- package/dist/components/sortable/index.d.ts.map +1 -0
- package/dist/components/sortable/index.js +1 -0
- package/dist/components/sortable/sortable.d.ts +94 -0
- package/dist/components/sortable/sortable.d.ts.map +1 -0
- package/dist/components/sortable/sortable.js +210 -0
- package/dist/components/sortable/sortable.stories.d.ts +14 -0
- package/dist/components/sortable/sortable.stories.d.ts.map +1 -0
- package/dist/components/sortable/sortable.stories.js +38 -0
- package/dist/components/spinner/index.d.ts +3 -0
- package/dist/components/spinner/index.d.ts.map +1 -0
- package/dist/components/spinner/index.js +1 -0
- package/dist/components/spinner/spinner.d.ts +13 -0
- package/dist/components/spinner/spinner.d.ts.map +1 -0
- package/dist/components/spinner/spinner.js +12 -0
- package/dist/components/spinner/spinner.stories.d.ts +9 -0
- package/dist/components/spinner/spinner.stories.d.ts.map +1 -0
- package/dist/components/spinner/spinner.stories.js +20 -0
- package/dist/components/status-indicator/index.d.ts +3 -0
- package/dist/components/status-indicator/index.d.ts.map +1 -0
- package/dist/components/status-indicator/index.js +1 -0
- package/dist/components/status-indicator/status-indicator.d.ts +51 -0
- package/dist/components/status-indicator/status-indicator.d.ts.map +1 -0
- package/dist/components/status-indicator/status-indicator.js +48 -0
- package/dist/components/status-indicator/status-indicator.stories.d.ts +20 -0
- package/dist/components/status-indicator/status-indicator.stories.d.ts.map +1 -0
- package/dist/components/status-indicator/status-indicator.stories.js +97 -0
- package/dist/components/switch/index.d.ts +2 -0
- package/dist/components/switch/index.d.ts.map +1 -0
- package/dist/components/switch/index.js +1 -0
- package/dist/components/switch/switch.d.ts +13 -0
- package/dist/components/switch/switch.d.ts.map +1 -0
- package/dist/components/switch/switch.js +8 -0
- package/dist/components/switch/switch.stories.d.ts +20 -0
- package/dist/components/switch/switch.stories.d.ts.map +1 -0
- package/dist/components/switch/switch.stories.js +46 -0
- package/dist/components/tabs/index.d.ts +3 -0
- package/dist/components/tabs/index.d.ts.map +1 -0
- package/dist/components/tabs/index.js +1 -0
- package/dist/components/tabs/tabs.d.ts +35 -0
- package/dist/components/tabs/tabs.d.ts.map +1 -0
- package/dist/components/tabs/tabs.js +34 -0
- package/dist/components/tabs/tabs.stories.d.ts +10 -0
- package/dist/components/tabs/tabs.stories.d.ts.map +1 -0
- package/dist/components/tabs/tabs.stories.js +29 -0
- package/dist/components/text/index.d.ts +3 -0
- package/dist/components/text/index.d.ts.map +1 -0
- package/dist/components/text/index.js +1 -0
- package/dist/components/text/text.d.ts +47 -0
- package/dist/components/text/text.d.ts.map +1 -0
- package/dist/components/text/text.js +53 -0
- package/dist/components/text/text.stories.d.ts +11 -0
- package/dist/components/text/text.stories.d.ts.map +1 -0
- package/dist/components/text/text.stories.js +84 -0
- package/dist/components/textarea/index.d.ts +2 -0
- package/dist/components/textarea/index.d.ts.map +1 -0
- package/dist/components/textarea/index.js +1 -0
- package/dist/components/textarea/textarea.d.ts +11 -0
- package/dist/components/textarea/textarea.d.ts.map +1 -0
- package/dist/components/textarea/textarea.js +10 -0
- package/dist/components/textarea/textarea.stories.d.ts +24 -0
- package/dist/components/textarea/textarea.stories.d.ts.map +1 -0
- package/dist/components/textarea/textarea.stories.js +32 -0
- package/dist/components/toggle/index.d.ts +3 -0
- package/dist/components/toggle/index.d.ts.map +1 -0
- package/dist/components/toggle/index.js +1 -0
- package/dist/components/toggle/toggle.d.ts +31 -0
- package/dist/components/toggle/toggle.d.ts.map +1 -0
- package/dist/components/toggle/toggle.js +33 -0
- package/dist/components/toggle/toggle.stories.d.ts +11 -0
- package/dist/components/toggle/toggle.stories.d.ts.map +1 -0
- package/dist/components/toggle/toggle.stories.js +60 -0
- package/dist/components/toggle-group/index.d.ts +3 -0
- package/dist/components/toggle-group/index.d.ts.map +1 -0
- package/dist/components/toggle-group/index.js +1 -0
- package/dist/components/toggle-group/toggle-group.d.ts +32 -0
- package/dist/components/toggle-group/toggle-group.d.ts.map +1 -0
- package/dist/components/toggle-group/toggle-group.js +33 -0
- package/dist/components/toggle-group/toggle-group.stories.d.ts +10 -0
- package/dist/components/toggle-group/toggle-group.stories.d.ts.map +1 -0
- package/dist/components/toggle-group/toggle-group.stories.js +28 -0
- package/dist/components/tooltip/index.d.ts +3 -0
- package/dist/components/tooltip/index.d.ts.map +1 -0
- package/dist/components/tooltip/index.js +1 -0
- package/dist/components/tooltip/tooltip.d.ts +22 -0
- package/dist/components/tooltip/tooltip.d.ts.map +1 -0
- package/dist/components/tooltip/tooltip.js +21 -0
- package/dist/components/tooltip/tooltip.stories.d.ts +11 -0
- package/dist/components/tooltip/tooltip.stories.d.ts.map +1 -0
- package/dist/components/tooltip/tooltip.stories.js +33 -0
- package/dist/hooks/use-mobile.d.ts +2 -0
- package/dist/hooks/use-mobile.d.ts.map +1 -0
- package/dist/hooks/use-mobile.js +15 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/llms.txt +21 -19
- package/package.json +17 -9
- package/src/styles/globals.css +6 -11
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Command } from 'lucide-react';
|
|
3
|
+
import { Kbd, KbdGroup } from '.';
|
|
4
|
+
const meta = {
|
|
5
|
+
title: 'UI/Kbd',
|
|
6
|
+
component: Kbd,
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
parameters: {
|
|
9
|
+
layout: 'centered',
|
|
10
|
+
},
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
export const Default = {
|
|
14
|
+
render: (args) => _jsx(Kbd, { ...args, children: "K" }),
|
|
15
|
+
};
|
|
16
|
+
export const Chord = {
|
|
17
|
+
render: () => (_jsxs(KbdGroup, { children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })),
|
|
18
|
+
};
|
|
19
|
+
export const WithIcon = {
|
|
20
|
+
render: () => (_jsxs(KbdGroup, { children: [_jsx(Kbd, { "aria-label": "Command", children: _jsx(Command, { className: "size-3", strokeWidth: 2.5 }) }), _jsx(Kbd, { children: "\u21E7" }), _jsx(Kbd, { children: "P" })] })),
|
|
21
|
+
};
|
|
22
|
+
export const Gallery = {
|
|
23
|
+
parameters: { layout: 'padded' },
|
|
24
|
+
render: () => (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Single keys" }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Kbd, { children: "Esc" }), _jsx(Kbd, { children: "Enter" }), _jsx(Kbd, { children: "Tab" }), _jsx(Kbd, { children: "Space" })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Shortcuts" }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsxs("span", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: ["Search", _jsxs(KbdGroup, { children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })] }), _jsxs("span", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: ["Save", _jsxs(KbdGroup, { children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "S" })] })] })] })] })] })),
|
|
25
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Label } from './label';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/** Props for `Label`. */
|
|
3
|
+
export type LabelProps = React.ComponentProps<'label'>;
|
|
4
|
+
declare function Label({ className, ...props }: React.ComponentProps<'label'>): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export { Label };
|
|
6
|
+
//# sourceMappingURL=label.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/label/label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,yBAAyB;AACzB,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAEvD,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,2CAYpE;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { cn } from '../../lib/utils';
|
|
5
|
+
function Label({ className, ...props }) {
|
|
6
|
+
return (
|
|
7
|
+
// eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
8
|
+
_jsx("label", { "data-slot": "label", className: cn('flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50', className), ...props }));
|
|
9
|
+
}
|
|
10
|
+
export { Label };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { Label } from './label';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof Label;
|
|
6
|
+
tags: string[];
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<typeof meta>;
|
|
13
|
+
export declare const Default: Story;
|
|
14
|
+
export declare const Gallery: Story;
|
|
15
|
+
export declare const WithCheckbox: Story;
|
|
16
|
+
export declare const WithSwitch: Story;
|
|
17
|
+
export declare const Disabled: Story;
|
|
18
|
+
//# sourceMappingURL=label.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"label.stories.d.ts","sourceRoot":"","sources":["../../../src/components/label/label.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAIhC,QAAA,MAAM,IAAI;;;;;;;CAOoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KA8CrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Label } from './label';
|
|
3
|
+
import { Checkbox } from '../checkbox';
|
|
4
|
+
import { Switch } from '../switch';
|
|
5
|
+
const meta = {
|
|
6
|
+
title: 'UI/Label',
|
|
7
|
+
component: Label,
|
|
8
|
+
tags: ['autodocs'],
|
|
9
|
+
parameters: {
|
|
10
|
+
layout: 'centered',
|
|
11
|
+
},
|
|
12
|
+
};
|
|
13
|
+
export default meta;
|
|
14
|
+
export const Default = {
|
|
15
|
+
render: (args) => (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "email", ...args, children: "Email address" }), _jsx("input", { id: "email", type: "email", placeholder: "you@example.com", className: "rounded-md border border-input bg-background px-3 py-1.5 text-sm outline-none focus:border-ring" })] })),
|
|
16
|
+
};
|
|
17
|
+
export const Gallery = {
|
|
18
|
+
parameters: { layout: 'padded' },
|
|
19
|
+
render: () => (_jsxs("div", { className: "flex flex-col gap-8", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With input" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "g-email", children: "Email address" }), _jsx("input", { id: "g-email", type: "email", placeholder: "you@example.com", className: "rounded-md border border-input bg-background px-3 py-1.5 text-sm outline-none focus:border-ring" })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With checkbox" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "g-terms" }), _jsx(Label, { htmlFor: "g-terms", children: "Accept terms and conditions" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "g-disabled-cb", disabled: true }), _jsx(Label, { htmlFor: "g-disabled-cb", children: "Unavailable option" })] })] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "With switch" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "g-notif" }), _jsx(Label, { htmlFor: "g-notif", children: "Enable notifications" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "g-disabled-sw", disabled: true }), _jsx(Label, { htmlFor: "g-disabled-sw", children: "Disabled setting" })] })] })] })] })),
|
|
20
|
+
};
|
|
21
|
+
export const WithCheckbox = {
|
|
22
|
+
render: (args) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "terms" }), _jsx(Label, { htmlFor: "terms", ...args, children: "Accept terms and conditions" })] })),
|
|
23
|
+
};
|
|
24
|
+
export const WithSwitch = {
|
|
25
|
+
render: (args) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "notifications" }), _jsx(Label, { htmlFor: "notifications", ...args, children: "Enable notifications" })] })),
|
|
26
|
+
};
|
|
27
|
+
export const Disabled = {
|
|
28
|
+
render: (args) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "disabled-cb", disabled: true }), _jsx(Label, { htmlFor: "disabled-cb", ...args, children: "Unavailable option" })] })),
|
|
29
|
+
};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, } from './menubar';
|
|
2
|
+
export type { MenubarProps, MenubarMenuProps, MenubarGroupProps, MenubarPortalProps, MenubarTriggerProps, MenubarContentProps, MenubarItemProps, MenubarCheckboxItemProps, MenubarRadioGroupProps, MenubarRadioItemProps, MenubarLabelProps, MenubarSeparatorProps, MenubarShortcutProps, MenubarSubProps, MenubarSubTriggerProps, MenubarSubContentProps, } from './menubar';
|
|
3
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/menubar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,OAAO,EACP,aAAa,EACb,WAAW,EACX,cAAc,EACd,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,iBAAiB,GACpB,MAAM,WAAW,CAAC;AAEnB,YAAY,EACR,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,GACzB,MAAM,WAAW,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, } from './menubar';
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { Menu as MenuPrimitive } from '@base-ui/react/menu';
|
|
2
|
+
import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
|
|
3
|
+
import type { DropdownMenuContentProps, DropdownMenuGroupProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuPortalProps, DropdownMenuProps, DropdownMenuRadioGroupProps, DropdownMenuSeparatorProps, DropdownMenuShortcutProps, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuTriggerProps } from '../dropdown-menu';
|
|
4
|
+
/**
|
|
5
|
+
* Props for `Menubar`. Horizontal bar container for nested menus; built on
|
|
6
|
+
* [Base UI Menubar](https://base-ui.com/react/components/menubar).
|
|
7
|
+
*/
|
|
8
|
+
type MenubarProps = MenubarPrimitive.Props;
|
|
9
|
+
/**
|
|
10
|
+
* Props for `MenubarMenu` — menu root for one top-level section (same behaviour as
|
|
11
|
+
* `DropdownMenu`).
|
|
12
|
+
*/
|
|
13
|
+
type MenubarMenuProps = DropdownMenuProps;
|
|
14
|
+
/** Props for `MenubarGroup`. */
|
|
15
|
+
type MenubarGroupProps = DropdownMenuGroupProps;
|
|
16
|
+
/** Props for `MenubarPortal`. */
|
|
17
|
+
type MenubarPortalProps = DropdownMenuPortalProps;
|
|
18
|
+
/** Props for `MenubarTrigger`. */
|
|
19
|
+
type MenubarTriggerProps = DropdownMenuTriggerProps;
|
|
20
|
+
/** Props for `MenubarContent`. */
|
|
21
|
+
type MenubarContentProps = DropdownMenuContentProps;
|
|
22
|
+
/** Props for `MenubarItem`. */
|
|
23
|
+
type MenubarItemProps = DropdownMenuItemProps;
|
|
24
|
+
/** Props for `MenubarCheckboxItem`. */
|
|
25
|
+
type MenubarCheckboxItemProps = MenuPrimitive.CheckboxItem.Props & {
|
|
26
|
+
inset?: boolean;
|
|
27
|
+
};
|
|
28
|
+
/** Props for `MenubarRadioGroup`. */
|
|
29
|
+
type MenubarRadioGroupProps = DropdownMenuRadioGroupProps;
|
|
30
|
+
/** Props for `MenubarRadioItem`. */
|
|
31
|
+
type MenubarRadioItemProps = MenuPrimitive.RadioItem.Props & {
|
|
32
|
+
inset?: boolean;
|
|
33
|
+
};
|
|
34
|
+
/** Props for `MenubarLabel`. */
|
|
35
|
+
type MenubarLabelProps = DropdownMenuLabelProps;
|
|
36
|
+
/** Props for `MenubarSeparator`. */
|
|
37
|
+
type MenubarSeparatorProps = DropdownMenuSeparatorProps;
|
|
38
|
+
/** Props for `MenubarShortcut`. */
|
|
39
|
+
type MenubarShortcutProps = DropdownMenuShortcutProps;
|
|
40
|
+
/** Props for `MenubarSub`. */
|
|
41
|
+
type MenubarSubProps = DropdownMenuSubProps;
|
|
42
|
+
/** Props for `MenubarSubTrigger`. */
|
|
43
|
+
type MenubarSubTriggerProps = DropdownMenuSubTriggerProps;
|
|
44
|
+
/** Props for `MenubarSubContent`. */
|
|
45
|
+
type MenubarSubContentProps = DropdownMenuSubContentProps;
|
|
46
|
+
declare function Menubar({ className, ...props }: MenubarProps): import("react/jsx-runtime").JSX.Element;
|
|
47
|
+
declare function MenubarMenu({ ...props }: MenubarMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
48
|
+
declare function MenubarGroup({ ...props }: MenubarGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
49
|
+
declare function MenubarPortal({ ...props }: MenubarPortalProps): import("react/jsx-runtime").JSX.Element;
|
|
50
|
+
declare function MenubarTrigger({ className, ...props }: MenubarTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
51
|
+
declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: MenubarContentProps): import("react/jsx-runtime").JSX.Element;
|
|
52
|
+
declare function MenubarItem({ className, inset, variant, ...props }: MenubarItemProps): import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
declare function MenubarCheckboxItem({ className, children, checked, inset, ...props }: MenubarCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
|
|
54
|
+
declare function MenubarRadioGroup({ ...props }: MenubarRadioGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
55
|
+
declare function MenubarRadioItem({ className, children, inset, ...props }: MenubarRadioItemProps): import("react/jsx-runtime").JSX.Element;
|
|
56
|
+
declare function MenubarLabel({ className, inset, ...props }: MenubarLabelProps): import("react/jsx-runtime").JSX.Element;
|
|
57
|
+
declare function MenubarSeparator({ className, ...props }: MenubarSeparatorProps): import("react/jsx-runtime").JSX.Element;
|
|
58
|
+
declare function MenubarShortcut({ className, ...props }: MenubarShortcutProps): import("react/jsx-runtime").JSX.Element;
|
|
59
|
+
declare function MenubarSub({ ...props }: MenubarSubProps): import("react/jsx-runtime").JSX.Element;
|
|
60
|
+
declare function MenubarSubTrigger({ className, inset, ...props }: MenubarSubTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
61
|
+
declare function MenubarSubContent({ className, ...props }: MenubarSubContentProps): import("react/jsx-runtime").JSX.Element;
|
|
62
|
+
export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, };
|
|
63
|
+
export type { MenubarProps, MenubarMenuProps, MenubarGroupProps, MenubarPortalProps, MenubarTriggerProps, MenubarContentProps, MenubarItemProps, MenubarCheckboxItemProps, MenubarRadioGroupProps, MenubarRadioItemProps, MenubarLabelProps, MenubarSeparatorProps, MenubarShortcutProps, MenubarSubProps, MenubarSubTriggerProps, MenubarSubContentProps, };
|
|
64
|
+
//# sourceMappingURL=menubar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../src/components/menubar/menubar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAkBrE,OAAO,KAAK,EACR,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,EACrB,sBAAsB,EACtB,uBAAuB,EACvB,iBAAiB,EACjB,2BAA2B,EAC3B,0BAA0B,EAC1B,yBAAyB,EACzB,2BAA2B,EAC3B,oBAAoB,EACpB,2BAA2B,EAC3B,wBAAwB,EAC3B,MAAM,kBAAkB,CAAC;AAG1B;;;GAGG;AACH,KAAK,YAAY,GAAG,gBAAgB,CAAC,KAAK,CAAC;AAE3C;;;GAGG;AACH,KAAK,gBAAgB,GAAG,iBAAiB,CAAC;AAE1C,gCAAgC;AAChC,KAAK,iBAAiB,GAAG,sBAAsB,CAAC;AAEhD,iCAAiC;AACjC,KAAK,kBAAkB,GAAG,uBAAuB,CAAC;AAElD,kCAAkC;AAClC,KAAK,mBAAmB,GAAG,wBAAwB,CAAC;AAEpD,kCAAkC;AAClC,KAAK,mBAAmB,GAAG,wBAAwB,CAAC;AAEpD,+BAA+B;AAC/B,KAAK,gBAAgB,GAAG,qBAAqB,CAAC;AAE9C,uCAAuC;AACvC,KAAK,wBAAwB,GAAG,aAAa,CAAC,YAAY,CAAC,KAAK,GAAG;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,qCAAqC;AACrC,KAAK,sBAAsB,GAAG,2BAA2B,CAAC;AAE1D,oCAAoC;AACpC,KAAK,qBAAqB,GAAG,aAAa,CAAC,SAAS,CAAC,KAAK,GAAG;IACzD,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,gCAAgC;AAChC,KAAK,iBAAiB,GAAG,sBAAsB,CAAC;AAEhD,oCAAoC;AACpC,KAAK,qBAAqB,GAAG,0BAA0B,CAAC;AAExD,mCAAmC;AACnC,KAAK,oBAAoB,GAAG,yBAAyB,CAAC;AAEtD,8BAA8B;AAC9B,KAAK,eAAe,GAAG,oBAAoB,CAAC;AAE5C,qCAAqC;AACrC,KAAK,sBAAsB,GAAG,2BAA2B,CAAC;AAE1D,qCAAqC;AACrC,KAAK,sBAAsB,GAAG,2BAA2B,CAAC;AAE1D,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,2CAErD;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAElD;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAEpD;AAED,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAEtD;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAWnE;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,KAAe,EAAE,WAAgB,EAAE,UAAc,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CActH;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAazF;AAED,iBAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,2CAoBvG;AAED,iBAAS,iBAAiB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAE9D;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAmBxF;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAStE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAEvE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAQrE;AAED,iBAAS,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAEhD;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAYhF;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAWzE;AAED,OAAO,EACH,OAAO,EACP,aAAa,EACb,WAAW,EACX,cAAc,EACd,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,iBAAiB,GACpB,CAAC;AAEF,YAAY,EACR,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,GACzB,CAAC"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Menu as MenuPrimitive } from '@base-ui/react/menu';
|
|
4
|
+
import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
|
|
5
|
+
import { cn } from '../../lib/utils';
|
|
6
|
+
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '../dropdown-menu';
|
|
7
|
+
import { Check } from 'lucide-react';
|
|
8
|
+
function Menubar({ className, ...props }) {
|
|
9
|
+
return _jsx(MenubarPrimitive, { "data-slot": "menubar", className: cn('flex h-8 items-center gap-0.5 rounded-lg border p-[3px]', className), ...props });
|
|
10
|
+
}
|
|
11
|
+
function MenubarMenu({ ...props }) {
|
|
12
|
+
return _jsx(DropdownMenu, { "data-slot": "menubar-menu", ...props });
|
|
13
|
+
}
|
|
14
|
+
function MenubarGroup({ ...props }) {
|
|
15
|
+
return _jsx(DropdownMenuGroup, { "data-slot": "menubar-group", ...props });
|
|
16
|
+
}
|
|
17
|
+
function MenubarPortal({ ...props }) {
|
|
18
|
+
return _jsx(DropdownMenuPortal, { "data-slot": "menubar-portal", ...props });
|
|
19
|
+
}
|
|
20
|
+
function MenubarTrigger({ className, ...props }) {
|
|
21
|
+
return (_jsx(DropdownMenuTrigger, { "data-slot": "menubar-trigger", className: cn('flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted', className), ...props }));
|
|
22
|
+
}
|
|
23
|
+
function MenubarContent({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }) {
|
|
24
|
+
return (_jsx(DropdownMenuContent, { "data-slot": "menubar-content", align: align, alignOffset: alignOffset, sideOffset: sideOffset, className: cn('min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95', className), ...props }));
|
|
25
|
+
}
|
|
26
|
+
function MenubarItem({ className, inset, variant = 'default', ...props }) {
|
|
27
|
+
return (_jsx(DropdownMenuItem, { "data-slot": "menubar-item", "data-inset": inset, "data-variant": variant, className: cn("group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!", className), ...props }));
|
|
28
|
+
}
|
|
29
|
+
function MenubarCheckboxItem({ className, children, checked, inset, ...props }) {
|
|
30
|
+
return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", "data-inset": inset, className: cn('relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(Check, {}) }) }), children] }));
|
|
31
|
+
}
|
|
32
|
+
function MenubarRadioGroup({ ...props }) {
|
|
33
|
+
return _jsx(DropdownMenuRadioGroup, { "data-slot": "menubar-radio-group", ...props });
|
|
34
|
+
}
|
|
35
|
+
function MenubarRadioItem({ className, children, inset, ...props }) {
|
|
36
|
+
return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "menubar-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(Check, {}) }) }), children] }));
|
|
37
|
+
}
|
|
38
|
+
function MenubarLabel({ className, inset, ...props }) {
|
|
39
|
+
return (_jsx(DropdownMenuLabel, { "data-slot": "menubar-label", "data-inset": inset, className: cn('px-1.5 py-1 text-sm font-medium data-inset:pl-7', className), ...props }));
|
|
40
|
+
}
|
|
41
|
+
function MenubarSeparator({ className, ...props }) {
|
|
42
|
+
return _jsx(DropdownMenuSeparator, { "data-slot": "menubar-separator", className: cn('-mx-1 my-1 h-px bg-border', className), ...props });
|
|
43
|
+
}
|
|
44
|
+
function MenubarShortcut({ className, ...props }) {
|
|
45
|
+
return (_jsx(DropdownMenuShortcut, { "data-slot": "menubar-shortcut", className: cn('ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground', className), ...props }));
|
|
46
|
+
}
|
|
47
|
+
function MenubarSub({ ...props }) {
|
|
48
|
+
return _jsx(DropdownMenuSub, { "data-slot": "menubar-sub", ...props });
|
|
49
|
+
}
|
|
50
|
+
function MenubarSubTrigger({ className, inset, ...props }) {
|
|
51
|
+
return (_jsx(DropdownMenuSubTrigger, { "data-slot": "menubar-sub-trigger", "data-inset": inset, className: cn("gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4", className), ...props }));
|
|
52
|
+
}
|
|
53
|
+
function MenubarSubContent({ className, ...props }) {
|
|
54
|
+
return (_jsx(DropdownMenuSubContent, { "data-slot": "menubar-sub-content", className: cn('min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props }));
|
|
55
|
+
}
|
|
56
|
+
export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { Menubar } from './menubar';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof Menubar;
|
|
6
|
+
tags: string[];
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<typeof meta>;
|
|
13
|
+
export declare const Default: Story;
|
|
14
|
+
export declare const WithSubmenu: Story;
|
|
15
|
+
//# sourceMappingURL=menubar.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menubar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/menubar/menubar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EACH,OAAO,EAUV,MAAM,WAAW,CAAC;AAEnB,QAAA,MAAM,IAAI;;;;;;;CAOsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAyBrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from '../button';
|
|
3
|
+
import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, } from './menubar';
|
|
4
|
+
const meta = {
|
|
5
|
+
title: 'UI/Menubar',
|
|
6
|
+
component: Menubar,
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
parameters: {
|
|
9
|
+
layout: 'centered',
|
|
10
|
+
},
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
export const Default = {
|
|
14
|
+
render: () => (_jsxs(Menubar, { className: "min-w-48", children: [_jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { render: _jsx(Button, { variant: "ghost", size: "sm", className: "h-7 px-2" }), children: "File" }), _jsxs(MenubarContent, { className: "min-w-40", children: [_jsx(MenubarItem, { children: "New tab" }), _jsx(MenubarItem, { children: "New window" }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { variant: "destructive", children: "Close" })] })] }), _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { render: _jsx(Button, { variant: "ghost", size: "sm", className: "h-7 px-2" }), children: "Edit" }), _jsxs(MenubarContent, { className: "min-w-44", children: [_jsxs(MenubarItem, { children: ["Undo ", _jsx(MenubarShortcut, { children: "\u2318Z" })] }), _jsxs(MenubarItem, { children: ["Redo ", _jsx(MenubarShortcut, { children: "\u21E7\u2318Z" })] })] })] })] })),
|
|
15
|
+
};
|
|
16
|
+
export const WithSubmenu = {
|
|
17
|
+
render: () => (_jsx(Menubar, { children: _jsxs(MenubarMenu, { children: [_jsx(MenubarTrigger, { render: _jsx(Button, { variant: "ghost", size: "sm", className: "h-7 px-2" }), children: "View" }), _jsxs(MenubarContent, { className: "min-w-44", children: [_jsxs(MenubarSub, { children: [_jsx(MenubarSubTrigger, { children: "Zoom" }), _jsxs(MenubarSubContent, { children: [_jsx(MenubarItem, { children: "100%" }), _jsx(MenubarItem, { children: "125%" })] })] }), _jsx(MenubarSeparator, {}), _jsx(MenubarItem, { children: "Full screen" })] })] }) })),
|
|
18
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/native-select/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './native-select';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {
|
|
3
|
+
/** Control height; maps to `data-size` on the wrapper and inner `select`. */
|
|
4
|
+
size?: 'sm' | 'default';
|
|
5
|
+
};
|
|
6
|
+
declare function NativeSelect({ className, size, ...props }: NativeSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export type NativeSelectOptionProps = React.ComponentProps<'option'>;
|
|
8
|
+
declare function NativeSelectOption({ className, ...props }: NativeSelectOptionProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export type NativeSelectOptGroupProps = React.ComponentProps<'optgroup'>;
|
|
10
|
+
declare function NativeSelectOptGroup({ className, ...props }: NativeSelectOptGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };
|
|
12
|
+
//# sourceMappingURL=native-select.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"native-select.d.ts","sourceRoot":"","sources":["../../../src/components/native-select/native-select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IAC3E,6EAA6E;IAC7E,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CAC3B,CAAC;AAEF,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAoBjF;AAED,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAErE,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAE3E;AAED,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;AAEzE,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,yBAAyB,2CAE/E;AAED,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { ChevronDown } from 'lucide-react';
|
|
4
|
+
import { cn } from '../../lib/utils';
|
|
5
|
+
function NativeSelect({ className, size = 'default', ...props }) {
|
|
6
|
+
return (_jsxs("div", { className: cn('group/native-select relative w-fit has-[select:disabled]:opacity-50', className), "data-slot": "native-select-wrapper", "data-size": size, children: [_jsx("select", { "data-slot": "native-select", "data-size": size, className: "h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", ...props }), _jsx(ChevronDown, { className: "pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none", "aria-hidden": "true", "data-slot": "native-select-icon" })] }));
|
|
7
|
+
}
|
|
8
|
+
function NativeSelectOption({ className, ...props }) {
|
|
9
|
+
return _jsx("option", { "data-slot": "native-select-option", className: cn('bg-[Canvas] text-[CanvasText]', className), ...props });
|
|
10
|
+
}
|
|
11
|
+
function NativeSelectOptGroup({ className, ...props }) {
|
|
12
|
+
return _jsx("optgroup", { "data-slot": "native-select-optgroup", className: cn('bg-[Canvas] text-[CanvasText]', className), ...props });
|
|
13
|
+
}
|
|
14
|
+
export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
declare const meta: Meta;
|
|
3
|
+
export default meta;
|
|
4
|
+
type Story = StoryObj;
|
|
5
|
+
export declare const Default: Story;
|
|
6
|
+
export declare const Small: Story;
|
|
7
|
+
export declare const WithGroups: Story;
|
|
8
|
+
//# sourceMappingURL=native-select.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"native-select.stories.d.ts","sourceRoot":"","sources":["../../../src/components/native-select/native-select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI,EAAE,IAMX,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from './native-select';
|
|
3
|
+
const meta = {
|
|
4
|
+
title: 'UI/Native select',
|
|
5
|
+
tags: ['autodocs'],
|
|
6
|
+
parameters: {
|
|
7
|
+
layout: 'centered',
|
|
8
|
+
},
|
|
9
|
+
};
|
|
10
|
+
export default meta;
|
|
11
|
+
export const Default = {
|
|
12
|
+
render: () => (_jsxs(NativeSelect, { defaultValue: "next", "aria-label": "Framework", children: [_jsx(NativeSelectOption, { value: "next", children: "Next.js" }), _jsx(NativeSelectOption, { value: "vite", children: "Vite" }), _jsx(NativeSelectOption, { value: "astro", children: "Astro" })] })),
|
|
13
|
+
};
|
|
14
|
+
export const Small = {
|
|
15
|
+
render: () => (_jsxs(NativeSelect, { size: "sm", defaultValue: "a", "aria-label": "Size sm", children: [_jsx(NativeSelectOption, { value: "a", children: "Option A" }), _jsx(NativeSelectOption, { value: "b", children: "Option B" })] })),
|
|
16
|
+
};
|
|
17
|
+
export const WithGroups = {
|
|
18
|
+
render: () => (_jsxs(NativeSelect, { defaultValue: "us", "aria-label": "Region", children: [_jsxs(NativeSelectOptGroup, { label: "North America", children: [_jsx(NativeSelectOption, { value: "us", children: "United States" }), _jsx(NativeSelectOption, { value: "ca", children: "Canada" })] }), _jsxs(NativeSelectOptGroup, { label: "Europe", children: [_jsx(NativeSelectOption, { value: "de", children: "Germany" }), _jsx(NativeSelectOption, { value: "fr", children: "France" })] })] })),
|
|
19
|
+
};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuPositioner, } from './navigation-menu';
|
|
2
|
+
export type { NavigationMenuProps, NavigationMenuListProps, NavigationMenuItemProps, NavigationMenuTriggerProps, NavigationMenuContentProps, NavigationMenuPositionerProps, NavigationMenuLinkProps, NavigationMenuIndicatorProps, } from './navigation-menu';
|
|
3
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,cAAc,EACd,qBAAqB,EACrB,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,0BAA0B,EAC1B,wBAAwB,GAC3B,MAAM,mBAAmB,CAAC;AAE3B,YAAY,EACR,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,0BAA0B,EAC1B,0BAA0B,EAC1B,6BAA6B,EAC7B,uBAAuB,EACvB,4BAA4B,GAC/B,MAAM,mBAAmB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuPositioner, } from './navigation-menu';
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
|
|
3
|
+
/**
|
|
4
|
+
* Props for `NavigationMenu`. Root with optional popup alignment; built on
|
|
5
|
+
* [Base UI Navigation Menu](https://base-ui.com/react/components/navigation-menu).
|
|
6
|
+
*/
|
|
7
|
+
type NavigationMenuProps = NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, 'align'>;
|
|
8
|
+
/** Props for `NavigationMenuList`. */
|
|
9
|
+
type NavigationMenuListProps = React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>;
|
|
10
|
+
/** Props for `NavigationMenuItem`. */
|
|
11
|
+
type NavigationMenuItemProps = React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>;
|
|
12
|
+
/** Props for `NavigationMenuTrigger`. */
|
|
13
|
+
type NavigationMenuTriggerProps = NavigationMenuPrimitive.Trigger.Props;
|
|
14
|
+
/** Props for `NavigationMenuContent`. */
|
|
15
|
+
type NavigationMenuContentProps = NavigationMenuPrimitive.Content.Props;
|
|
16
|
+
/** Props for `NavigationMenuPositioner` (portal + anchor positioning). */
|
|
17
|
+
type NavigationMenuPositionerProps = NavigationMenuPrimitive.Positioner.Props;
|
|
18
|
+
/** Props for `NavigationMenuLink`. */
|
|
19
|
+
type NavigationMenuLinkProps = NavigationMenuPrimitive.Link.Props;
|
|
20
|
+
/** Props for `NavigationMenuIndicator`. */
|
|
21
|
+
type NavigationMenuIndicatorProps = React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>;
|
|
22
|
+
declare function NavigationMenu({ align, className, children, ...props }: NavigationMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
declare function NavigationMenuList({ className, ...props }: NavigationMenuListProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
declare function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
26
|
+
declare function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
declare function NavigationMenuContent({ className, ...props }: NavigationMenuContentProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
declare function NavigationMenuPositioner({ className, side, sideOffset, align, alignOffset, ...props }: NavigationMenuPositionerProps): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
declare function NavigationMenuLink({ className, ...props }: NavigationMenuLinkProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
declare function NavigationMenuIndicator({ className, ...props }: NavigationMenuIndicatorProps): import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuPositioner, };
|
|
32
|
+
export type { NavigationMenuProps, NavigationMenuListProps, NavigationMenuItemProps, NavigationMenuTriggerProps, NavigationMenuContentProps, NavigationMenuPositionerProps, NavigationMenuLinkProps, NavigationMenuIndicatorProps, };
|
|
33
|
+
//# sourceMappingURL=navigation-menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-menu/navigation-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,IAAI,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAM3F;;;GAGG;AACH,KAAK,mBAAmB,GAAG,uBAAuB,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,uBAAuB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAExH,sCAAsC;AACtC,KAAK,uBAAuB,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,CAAC;AAEhG,sCAAsC;AACtC,KAAK,uBAAuB,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,CAAC;AAEhG,yCAAyC;AACzC,KAAK,0BAA0B,GAAG,uBAAuB,CAAC,OAAO,CAAC,KAAK,CAAC;AAExE,yCAAyC;AACzC,KAAK,0BAA0B,GAAG,uBAAuB,CAAC,OAAO,CAAC,KAAK,CAAC;AAExE,0EAA0E;AAC1E,KAAK,6BAA6B,GAAG,uBAAuB,CAAC,UAAU,CAAC,KAAK,CAAC;AAE9E,sCAAsC;AACtC,KAAK,uBAAuB,GAAG,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC;AAElE,2CAA2C;AAC3C,KAAK,4BAA4B,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,CAAC;AAErG,iBAAS,cAAc,CAAC,EAAE,KAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAW9F;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAQ3E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAE3E;AAED,QAAA,MAAM,0BAA0B,oFAE/B,CAAC;AAEF,iBAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,0BAA0B,2CAU3F;AAED,iBAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,0BAA0B,2CAWjF;AAED,iBAAS,wBAAwB,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,UAAc,EAAE,KAAe,EAAE,WAAe,EAAE,GAAG,KAAK,EAAE,EAAE,6BAA6B,2CAoB1J;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAW3E;AAED,iBAAS,uBAAuB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,4BAA4B,2CAarF;AAED,OAAO,EACH,cAAc,EACd,qBAAqB,EACrB,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,0BAA0B,EAC1B,wBAAwB,GAC3B,CAAC;AAEF,YAAY,EACR,mBAAmB,EACnB,uBAAuB,EACvB,uBAAuB,EACvB,0BAA0B,EAC1B,0BAA0B,EAC1B,6BAA6B,EAC7B,uBAAuB,EACvB,4BAA4B,GAC/B,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
|
|
5
|
+
import { cva } from 'class-variance-authority';
|
|
6
|
+
import { cn } from '../../lib/utils';
|
|
7
|
+
import { ChevronDown } from 'lucide-react';
|
|
8
|
+
function NavigationMenu({ align = 'start', className, children, ...props }) {
|
|
9
|
+
return (_jsxs(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", className: cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className), ...props, children: [children, _jsx(NavigationMenuPositioner, { align: align })] }));
|
|
10
|
+
}
|
|
11
|
+
function NavigationMenuList({ className, ...props }) {
|
|
12
|
+
return (_jsx(NavigationMenuPrimitive.List, { "data-slot": "navigation-menu-list", className: cn('group flex flex-1 list-none items-center justify-center gap-0', className), ...props }));
|
|
13
|
+
}
|
|
14
|
+
function NavigationMenuItem({ className, ...props }) {
|
|
15
|
+
return _jsx(NavigationMenuPrimitive.Item, { "data-slot": "navigation-menu-item", className: cn('relative', className), ...props });
|
|
16
|
+
}
|
|
17
|
+
const navigationMenuTriggerStyle = cva('group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted');
|
|
18
|
+
function NavigationMenuTrigger({ className, children, ...props }) {
|
|
19
|
+
return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), 'group', className), ...props, children: [children, ' ', _jsx(ChevronDown, { className: "relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180", "aria-hidden": "true" })] }));
|
|
20
|
+
}
|
|
21
|
+
function NavigationMenuContent({ className, ...props }) {
|
|
22
|
+
return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn('data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95', className), ...props }));
|
|
23
|
+
}
|
|
24
|
+
function NavigationMenuPositioner({ className, side = 'bottom', sideOffset = 8, align = 'start', alignOffset = 0, ...props }) {
|
|
25
|
+
return (_jsx(NavigationMenuPrimitive.Portal, { children: _jsx(NavigationMenuPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, className: cn('isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0', className), ...props, children: _jsx(NavigationMenuPrimitive.Popup, { className: "data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0", children: _jsx(NavigationMenuPrimitive.Viewport, { className: "relative size-full overflow-hidden" }) }) }) }));
|
|
26
|
+
}
|
|
27
|
+
function NavigationMenuLink({ className, ...props }) {
|
|
28
|
+
return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4", className), ...props }));
|
|
29
|
+
}
|
|
30
|
+
function NavigationMenuIndicator({ className, ...props }) {
|
|
31
|
+
return (_jsx(NavigationMenuPrimitive.Icon, { "data-slot": "navigation-menu-indicator", className: cn('top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in', className), ...props, children: _jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" }) }));
|
|
32
|
+
}
|
|
33
|
+
export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuPositioner, };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { NavigationMenu } from './navigation-menu';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof NavigationMenu;
|
|
6
|
+
tags: string[];
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<typeof meta>;
|
|
13
|
+
export declare const Default: Story;
|
|
14
|
+
//# sourceMappingURL=navigation-menu.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"navigation-menu.stories.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-menu/navigation-menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,cAAc,EAA4G,MAAM,mBAAmB,CAAC;AAE7J,QAAA,MAAM,IAAI;;;;;;;CAO6B,CAAC;AAExC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from './navigation-menu';
|
|
3
|
+
const meta = {
|
|
4
|
+
title: 'UI/NavigationMenu',
|
|
5
|
+
component: NavigationMenu,
|
|
6
|
+
tags: ['autodocs'],
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: 'centered',
|
|
9
|
+
},
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
export const Default = {
|
|
13
|
+
render: () => (_jsx(NavigationMenu, { children: _jsxs(NavigationMenuList, { children: [_jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Learn" }), _jsxs(NavigationMenuContent, { className: "min-w-[220px] gap-1 p-2", children: [_jsx(NavigationMenuLink, { href: "#", children: "Introduction" }), _jsx(NavigationMenuLink, { href: "#", children: "Installation" }), _jsx(NavigationMenuLink, { href: "#", children: "Theming" })] })] }), _jsxs(NavigationMenuItem, { children: [_jsx(NavigationMenuTrigger, { children: "Reference" }), _jsxs(NavigationMenuContent, { className: "min-w-[200px] gap-1 p-2", children: [_jsx(NavigationMenuLink, { href: "#", children: "Components" }), _jsx(NavigationMenuLink, { href: "#", children: "Hooks" })] })] })] }) })),
|
|
14
|
+
};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from './pagination';
|
|
2
|
+
export type { PaginationProps, PaginationContentProps, PaginationItemProps, PaginationLinkProps, PaginationNavLinkProps, PaginationEllipsisProps, } from './pagination';
|
|
3
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAErJ,YAAY,EACR,eAAe,EACf,sBAAsB,EACtB,mBAAmB,EACnB,mBAAmB,EACnB,sBAAsB,EACtB,uBAAuB,GAC1B,MAAM,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from './pagination';
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Button } from '../button';
|
|
3
|
+
/** Props for `Pagination` (`<nav>` wrapper). */
|
|
4
|
+
export type PaginationProps = React.ComponentProps<'nav'>;
|
|
5
|
+
/** Props for `PaginationContent` (the `<ul>` list). */
|
|
6
|
+
export type PaginationContentProps = React.ComponentProps<'ul'>;
|
|
7
|
+
/** Props for `PaginationItem` (a `<li>`). */
|
|
8
|
+
export type PaginationItemProps = React.ComponentProps<'li'>;
|
|
9
|
+
/**
|
|
10
|
+
* Props for `PaginationLink`. Renders a `Button` as an anchor; supports active page styling
|
|
11
|
+
* via `isActive`.
|
|
12
|
+
*/
|
|
13
|
+
export type PaginationLinkProps = {
|
|
14
|
+
isActive?: boolean;
|
|
15
|
+
} & Pick<React.ComponentProps<typeof Button>, 'size'> & React.ComponentProps<'a'>;
|
|
16
|
+
/** Props for `PaginationPrevious` and `PaginationNext` (link buttons with icons). */
|
|
17
|
+
export type PaginationNavLinkProps = PaginationLinkProps & {
|
|
18
|
+
/** Visible label (hidden on small screens except for screen readers via `aria-label`). */
|
|
19
|
+
text?: string;
|
|
20
|
+
};
|
|
21
|
+
/** Props for `PaginationEllipsis` (non-interactive gap indicator). */
|
|
22
|
+
export type PaginationEllipsisProps = React.ComponentProps<'span'>;
|
|
23
|
+
declare function Pagination({ className, ...props }: PaginationProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
declare function PaginationContent({ className, ...props }: PaginationContentProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
declare function PaginationItem({ ...props }: PaginationItemProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
declare function PaginationPrevious({ className, text, ...props }: PaginationNavLinkProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
declare function PaginationNext({ className, text, ...props }: PaginationNavLinkProps): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
declare function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
|
|
31
|
+
//# sourceMappingURL=pagination.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAGnC,gDAAgD;AAChD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1D,uDAAuD;AACvD,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAEhE,6CAA6C;AAC7C,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAE7D;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GACjD,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAE9B,qFAAqF;AACrF,MAAM,MAAM,sBAAsB,GAAG,mBAAmB,GAAG;IACvD,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,sEAAsE;AACtE,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAEnE,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAE3D;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAEzE;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAExD;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAa,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAa5F;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,IAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAO7F;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,IAAa,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAOrF;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAY3E;AAED,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAC"}
|