@neynar/ui 0.1.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/LICENSE +21 -0
- package/README.md +195 -0
- package/dist/components/ui/accordion.d.ts +229 -0
- package/dist/components/ui/accordion.d.ts.map +1 -0
- package/dist/components/ui/alert-dialog.d.ts +247 -0
- package/dist/components/ui/alert-dialog.d.ts.map +1 -0
- package/dist/components/ui/alert.d.ts +187 -0
- package/dist/components/ui/alert.d.ts.map +1 -0
- package/dist/components/ui/aspect-ratio.d.ts +94 -0
- package/dist/components/ui/aspect-ratio.d.ts.map +1 -0
- package/dist/components/ui/avatar.d.ts +244 -0
- package/dist/components/ui/avatar.d.ts.map +1 -0
- package/dist/components/ui/badge.d.ts +163 -0
- package/dist/components/ui/badge.d.ts.map +1 -0
- package/dist/components/ui/breadcrumb.d.ts +281 -0
- package/dist/components/ui/breadcrumb.d.ts.map +1 -0
- package/dist/components/ui/button.d.ts +129 -0
- package/dist/components/ui/button.d.ts.map +1 -0
- package/dist/components/ui/calendar.d.ts +169 -0
- package/dist/components/ui/calendar.d.ts.map +1 -0
- package/dist/components/ui/card.d.ts +365 -0
- package/dist/components/ui/card.d.ts.map +1 -0
- package/dist/components/ui/carousel.d.ts +369 -0
- package/dist/components/ui/carousel.d.ts.map +1 -0
- package/dist/components/ui/chart.d.ts +442 -0
- package/dist/components/ui/chart.d.ts.map +1 -0
- package/dist/components/ui/checkbox.d.ts +88 -0
- package/dist/components/ui/checkbox.d.ts.map +1 -0
- package/dist/components/ui/collapsible.d.ts +182 -0
- package/dist/components/ui/collapsible.d.ts.map +1 -0
- package/dist/components/ui/combobox.d.ts +270 -0
- package/dist/components/ui/combobox.d.ts.map +1 -0
- package/dist/components/ui/command.d.ts +355 -0
- package/dist/components/ui/command.d.ts.map +1 -0
- package/dist/components/ui/container.d.ts +102 -0
- package/dist/components/ui/container.d.ts.map +1 -0
- package/dist/components/ui/context-menu.d.ts +339 -0
- package/dist/components/ui/context-menu.d.ts.map +1 -0
- package/dist/components/ui/date-picker.d.ts +145 -0
- package/dist/components/ui/date-picker.d.ts.map +1 -0
- package/dist/components/ui/dialog.d.ts +322 -0
- package/dist/components/ui/dialog.d.ts.map +1 -0
- package/dist/components/ui/drawer.d.ts +154 -0
- package/dist/components/ui/drawer.d.ts.map +1 -0
- package/dist/components/ui/dropdown-menu.d.ts +349 -0
- package/dist/components/ui/dropdown-menu.d.ts.map +1 -0
- package/dist/components/ui/empty-state.d.ts +133 -0
- package/dist/components/ui/empty-state.d.ts.map +1 -0
- package/dist/components/ui/hover-card.d.ts +109 -0
- package/dist/components/ui/hover-card.d.ts.map +1 -0
- package/dist/components/ui/input.d.ts +89 -0
- package/dist/components/ui/input.d.ts.map +1 -0
- package/dist/components/ui/label.d.ts +93 -0
- package/dist/components/ui/label.d.ts.map +1 -0
- package/dist/components/ui/menubar.d.ts +306 -0
- package/dist/components/ui/menubar.d.ts.map +1 -0
- package/dist/components/ui/navigation-menu.d.ts +318 -0
- package/dist/components/ui/navigation-menu.d.ts.map +1 -0
- package/dist/components/ui/pagination.d.ts +343 -0
- package/dist/components/ui/pagination.d.ts.map +1 -0
- package/dist/components/ui/popover.d.ts +178 -0
- package/dist/components/ui/popover.d.ts.map +1 -0
- package/dist/components/ui/progress.d.ts +64 -0
- package/dist/components/ui/progress.d.ts.map +1 -0
- package/dist/components/ui/radio-group.d.ts +144 -0
- package/dist/components/ui/radio-group.d.ts.map +1 -0
- package/dist/components/ui/resizable.d.ts +164 -0
- package/dist/components/ui/resizable.d.ts.map +1 -0
- package/dist/components/ui/scroll-area.d.ts +82 -0
- package/dist/components/ui/scroll-area.d.ts.map +1 -0
- package/dist/components/ui/select.d.ts +316 -0
- package/dist/components/ui/select.d.ts.map +1 -0
- package/dist/components/ui/separator.d.ts +80 -0
- package/dist/components/ui/separator.d.ts.map +1 -0
- package/dist/components/ui/sheet.d.ts +346 -0
- package/dist/components/ui/sheet.d.ts.map +1 -0
- package/dist/components/ui/sidebar.d.ts +1561 -0
- package/dist/components/ui/sidebar.d.ts.map +1 -0
- package/dist/components/ui/skeleton.d.ts +66 -0
- package/dist/components/ui/skeleton.d.ts.map +1 -0
- package/dist/components/ui/slider.d.ts +95 -0
- package/dist/components/ui/slider.d.ts.map +1 -0
- package/dist/components/ui/sonner.d.ts +101 -0
- package/dist/components/ui/sonner.d.ts.map +1 -0
- package/dist/components/ui/stack.d.ts +192 -0
- package/dist/components/ui/stack.d.ts.map +1 -0
- package/dist/components/ui/stories/accordion.stories.d.ts +71 -0
- package/dist/components/ui/stories/accordion.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/alert-dialog.stories.d.ts +39 -0
- package/dist/components/ui/stories/alert-dialog.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/alert.stories.d.ts +48 -0
- package/dist/components/ui/stories/alert.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/aspect-ratio.stories.d.ts +53 -0
- package/dist/components/ui/stories/aspect-ratio.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/avatar.stories.d.ts +49 -0
- package/dist/components/ui/stories/avatar.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/badge.stories.d.ts +64 -0
- package/dist/components/ui/stories/badge.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/breadcrumb.stories.d.ts +27 -0
- package/dist/components/ui/stories/breadcrumb.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/button.stories.d.ts +92 -0
- package/dist/components/ui/stories/button.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/calendar.stories.d.ts +94 -0
- package/dist/components/ui/stories/calendar.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/card.stories.d.ts +29 -0
- package/dist/components/ui/stories/card.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/carousel.stories.d.ts +42 -0
- package/dist/components/ui/stories/carousel.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/chart.stories.d.ts +51 -0
- package/dist/components/ui/stories/chart.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/checkbox.stories.d.ts +72 -0
- package/dist/components/ui/stories/checkbox.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/cn.stories.d.ts +19 -0
- package/dist/components/ui/stories/cn.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/collapsible.stories.d.ts +51 -0
- package/dist/components/ui/stories/collapsible.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/colors.stories.d.ts +31 -0
- package/dist/components/ui/stories/colors.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/combobox.stories.d.ts +89 -0
- package/dist/components/ui/stories/combobox.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/command.stories.d.ts +69 -0
- package/dist/components/ui/stories/command.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/container.stories.d.ts +42 -0
- package/dist/components/ui/stories/container.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/context-menu.stories.d.ts +32 -0
- package/dist/components/ui/stories/context-menu.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/date-picker.stories.d.ts +67 -0
- package/dist/components/ui/stories/date-picker.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/dialog.stories.d.ts +48 -0
- package/dist/components/ui/stories/dialog.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/drawer.stories.d.ts +33 -0
- package/dist/components/ui/stories/drawer.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/dropdown-menu.stories.d.ts +31 -0
- package/dist/components/ui/stories/dropdown-menu.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/empty-state.stories.d.ts +74 -0
- package/dist/components/ui/stories/empty-state.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/hover-card.stories.d.ts +35 -0
- package/dist/components/ui/stories/hover-card.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/input.stories.d.ts +69 -0
- package/dist/components/ui/stories/input.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/label.stories.d.ts +47 -0
- package/dist/components/ui/stories/label.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/menubar.stories.d.ts +39 -0
- package/dist/components/ui/stories/menubar.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/navigation-menu.stories.d.ts +44 -0
- package/dist/components/ui/stories/navigation-menu.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/pagination.stories.d.ts +33 -0
- package/dist/components/ui/stories/pagination.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/popover.stories.d.ts +36 -0
- package/dist/components/ui/stories/popover.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/progress.stories.d.ts +38 -0
- package/dist/components/ui/stories/progress.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/radio-group.stories.d.ts +76 -0
- package/dist/components/ui/stories/radio-group.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/resizable.stories.d.ts +49 -0
- package/dist/components/ui/stories/resizable.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/scroll-area.stories.d.ts +35 -0
- package/dist/components/ui/stories/scroll-area.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/select.stories.d.ts +51 -0
- package/dist/components/ui/stories/select.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/separator.stories.d.ts +58 -0
- package/dist/components/ui/stories/separator.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/sheet.stories.d.ts +43 -0
- package/dist/components/ui/stories/sheet.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/sidebar.stories.d.ts +60 -0
- package/dist/components/ui/stories/sidebar.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/skeleton.stories.d.ts +42 -0
- package/dist/components/ui/stories/skeleton.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/slider.stories.d.ts +99 -0
- package/dist/components/ui/stories/slider.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/sonner.stories.d.ts +9 -0
- package/dist/components/ui/stories/sonner.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/stack.stories.d.ts +39 -0
- package/dist/components/ui/stories/stack.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/switch.stories.d.ts +71 -0
- package/dist/components/ui/stories/switch.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/table.stories.d.ts +40 -0
- package/dist/components/ui/stories/table.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/tabs.stories.d.ts +62 -0
- package/dist/components/ui/stories/tabs.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/text-field.stories.d.ts +78 -0
- package/dist/components/ui/stories/text-field.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/textarea.stories.d.ts +57 -0
- package/dist/components/ui/stories/textarea.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/theme-toggle.stories.d.ts +71 -0
- package/dist/components/ui/stories/theme-toggle.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/theme.stories.d.ts +51 -0
- package/dist/components/ui/stories/theme.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/toggle-group.stories.d.ts +71 -0
- package/dist/components/ui/stories/toggle-group.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/toggle.stories.d.ts +78 -0
- package/dist/components/ui/stories/toggle.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/tooltip.stories.d.ts +37 -0
- package/dist/components/ui/stories/tooltip.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/typography.stories.d.ts +137 -0
- package/dist/components/ui/stories/typography.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/use-mobile.stories.d.ts +20 -0
- package/dist/components/ui/stories/use-mobile.stories.d.ts.map +1 -0
- package/dist/components/ui/stories/use-theme.stories.d.ts +23 -0
- package/dist/components/ui/stories/use-theme.stories.d.ts.map +1 -0
- package/dist/components/ui/switch.d.ts +84 -0
- package/dist/components/ui/switch.d.ts.map +1 -0
- package/dist/components/ui/table.d.ts +321 -0
- package/dist/components/ui/table.d.ts.map +1 -0
- package/dist/components/ui/tabs.d.ts +260 -0
- package/dist/components/ui/tabs.d.ts.map +1 -0
- package/dist/components/ui/text-field.d.ts +157 -0
- package/dist/components/ui/text-field.d.ts.map +1 -0
- package/dist/components/ui/textarea.d.ts +84 -0
- package/dist/components/ui/textarea.d.ts.map +1 -0
- package/dist/components/ui/theme-toggle.d.ts +105 -0
- package/dist/components/ui/theme-toggle.d.ts.map +1 -0
- package/dist/components/ui/theme.d.ts +110 -0
- package/dist/components/ui/theme.d.ts.map +1 -0
- package/dist/components/ui/toggle-group.d.ts +133 -0
- package/dist/components/ui/toggle-group.d.ts.map +1 -0
- package/dist/components/ui/toggle.d.ts +84 -0
- package/dist/components/ui/toggle.d.ts.map +1 -0
- package/dist/components/ui/tooltip.d.ts +202 -0
- package/dist/components/ui/tooltip.d.ts.map +1 -0
- package/dist/components/ui/typography.d.ts +287 -0
- package/dist/components/ui/typography.d.ts.map +1 -0
- package/dist/hooks/use-mobile.d.ts +74 -0
- package/dist/hooks/use-mobile.d.ts.map +1 -0
- package/dist/hooks/use-theme.d.ts +142 -0
- package/dist/hooks/use-theme.d.ts.map +1 -0
- package/dist/index.d.ts +57 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +27498 -0
- package/dist/index.js.map +1 -0
- package/dist/lib/utils.d.ts +43 -0
- package/dist/lib/utils.d.ts.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/docs/llm/colors.md +273 -0
- package/docs/llm/components/buttons.md +68 -0
- package/docs/llm/components/cards.md +53 -0
- package/docs/llm/components/display.md +134 -0
- package/docs/llm/components/feedback.md +96 -0
- package/docs/llm/components/forms.md +90 -0
- package/docs/llm/components/layout.md +59 -0
- package/docs/llm/components/menus.md +70 -0
- package/docs/llm/components/navigation.md +80 -0
- package/docs/llm/components/overlays.md +83 -0
- package/docs/llm/components/tables.md +73 -0
- package/docs/llm/components/typography.md +199 -0
- package/docs/llm/components/utilities.md +114 -0
- package/docs/llm/guide.md +165 -0
- package/llms.txt +122 -0
- package/package.json +104 -0
- package/src/components/ui/accordion.tsx +285 -0
- package/src/components/ui/alert-dialog.tsx +387 -0
- package/src/components/ui/alert.tsx +243 -0
- package/src/components/ui/aspect-ratio.tsx +99 -0
- package/src/components/ui/avatar.tsx +288 -0
- package/src/components/ui/badge.tsx +205 -0
- package/src/components/ui/breadcrumb.tsx +378 -0
- package/src/components/ui/button.tsx +195 -0
- package/src/components/ui/calendar.tsx +371 -0
- package/src/components/ui/card.tsx +447 -0
- package/src/components/ui/carousel.tsx +624 -0
- package/src/components/ui/chart.tsx +802 -0
- package/src/components/ui/checkbox.tsx +113 -0
- package/src/components/ui/collapsible.tsx +207 -0
- package/src/components/ui/combobox.tsx +373 -0
- package/src/components/ui/command.tsx +518 -0
- package/src/components/ui/container.tsx +114 -0
- package/src/components/ui/context-menu.tsx +563 -0
- package/src/components/ui/date-picker.tsx +213 -0
- package/src/components/ui/dialog.tsx +447 -0
- package/src/components/ui/drawer.tsx +273 -0
- package/src/components/ui/dropdown-menu.tsx +578 -0
- package/src/components/ui/empty-state.tsx +145 -0
- package/src/components/ui/hover-card.tsx +144 -0
- package/src/components/ui/input.tsx +106 -0
- package/src/components/ui/label.tsx +110 -0
- package/src/components/ui/menubar.tsx +553 -0
- package/src/components/ui/navigation-menu.tsx +471 -0
- package/src/components/ui/pagination.tsx +456 -0
- package/src/components/ui/popover.tsx +216 -0
- package/src/components/ui/progress.tsx +88 -0
- package/src/components/ui/radio-group.tsx +183 -0
- package/src/components/ui/resizable.tsx +209 -0
- package/src/components/ui/scroll-area.tsx +132 -0
- package/src/components/ui/select.tsx +485 -0
- package/src/components/ui/separator.tsx +101 -0
- package/src/components/ui/sheet.tsx +495 -0
- package/src/components/ui/sidebar.tsx +2211 -0
- package/src/components/ui/skeleton.tsx +76 -0
- package/src/components/ui/slider.tsx +147 -0
- package/src/components/ui/sonner.tsx +120 -0
- package/src/components/ui/stack.tsx +180 -0
- package/src/components/ui/stories/accordion.stories.tsx +429 -0
- package/src/components/ui/stories/alert-dialog.stories.tsx +519 -0
- package/src/components/ui/stories/alert.stories.tsx +228 -0
- package/src/components/ui/stories/aspect-ratio.stories.tsx +200 -0
- package/src/components/ui/stories/avatar.stories.tsx +317 -0
- package/src/components/ui/stories/badge.stories.tsx +260 -0
- package/src/components/ui/stories/breadcrumb.stories.tsx +482 -0
- package/src/components/ui/stories/button.stories.tsx +266 -0
- package/src/components/ui/stories/calendar.stories.tsx +375 -0
- package/src/components/ui/stories/card.stories.tsx +308 -0
- package/src/components/ui/stories/carousel.stories.tsx +328 -0
- package/src/components/ui/stories/chart.stories.tsx +430 -0
- package/src/components/ui/stories/checkbox.stories.tsx +297 -0
- package/src/components/ui/stories/cn.stories.tsx +433 -0
- package/src/components/ui/stories/collapsible.stories.tsx +256 -0
- package/src/components/ui/stories/colors.stories.tsx +502 -0
- package/src/components/ui/stories/combobox.stories.tsx +301 -0
- package/src/components/ui/stories/command.stories.tsx +632 -0
- package/src/components/ui/stories/container.stories.tsx +250 -0
- package/src/components/ui/stories/context-menu.stories.tsx +446 -0
- package/src/components/ui/stories/date-picker.stories.tsx +378 -0
- package/src/components/ui/stories/dialog.stories.tsx +535 -0
- package/src/components/ui/stories/drawer.stories.tsx +364 -0
- package/src/components/ui/stories/dropdown-menu.stories.tsx +374 -0
- package/src/components/ui/stories/empty-state.stories.tsx +244 -0
- package/src/components/ui/stories/hover-card.stories.tsx +355 -0
- package/src/components/ui/stories/input.stories.tsx +289 -0
- package/src/components/ui/stories/label.stories.tsx +294 -0
- package/src/components/ui/stories/menubar.stories.tsx +764 -0
- package/src/components/ui/stories/navigation-menu.stories.tsx +539 -0
- package/src/components/ui/stories/pagination.stories.tsx +604 -0
- package/src/components/ui/stories/popover.stories.tsx +392 -0
- package/src/components/ui/stories/progress.stories.tsx +218 -0
- package/src/components/ui/stories/radio-group.stories.tsx +400 -0
- package/src/components/ui/stories/resizable.stories.tsx +417 -0
- package/src/components/ui/stories/scroll-area.stories.tsx +180 -0
- package/src/components/ui/stories/select.stories.tsx +389 -0
- package/src/components/ui/stories/separator.stories.tsx +192 -0
- package/src/components/ui/stories/sheet.stories.tsx +468 -0
- package/src/components/ui/stories/sidebar.stories.tsx +731 -0
- package/src/components/ui/stories/skeleton.stories.tsx +216 -0
- package/src/components/ui/stories/slider.stories.tsx +321 -0
- package/src/components/ui/stories/sonner.stories.tsx +373 -0
- package/src/components/ui/stories/stack.stories.tsx +222 -0
- package/src/components/ui/stories/switch.stories.tsx +202 -0
- package/src/components/ui/stories/table.stories.tsx +541 -0
- package/src/components/ui/stories/tabs.stories.tsx +544 -0
- package/src/components/ui/stories/text-field.stories.tsx +280 -0
- package/src/components/ui/stories/textarea.stories.tsx +245 -0
- package/src/components/ui/stories/theme-toggle.stories.tsx +275 -0
- package/src/components/ui/stories/theme.stories.tsx +412 -0
- package/src/components/ui/stories/toggle-group.stories.tsx +337 -0
- package/src/components/ui/stories/toggle.stories.tsx +325 -0
- package/src/components/ui/stories/tooltip.stories.tsx +444 -0
- package/src/components/ui/stories/typography.stories.tsx +1586 -0
- package/src/components/ui/stories/use-mobile.stories.tsx +420 -0
- package/src/components/ui/stories/use-theme.stories.tsx +531 -0
- package/src/components/ui/switch.tsx +106 -0
- package/src/components/ui/table.tsx +424 -0
- package/src/components/ui/tabs.tsx +316 -0
- package/src/components/ui/text-field.tsx +206 -0
- package/src/components/ui/textarea.tsx +98 -0
- package/src/components/ui/theme-toggle.tsx +185 -0
- package/src/components/ui/theme.tsx +148 -0
- package/src/components/ui/toggle-group.tsx +196 -0
- package/src/components/ui/toggle.tsx +115 -0
- package/src/components/ui/tooltip.tsx +253 -0
- package/src/components/ui/typography.tsx +468 -0
- package/src/hooks/use-mobile.ts +91 -0
- package/src/hooks/use-theme.ts +319 -0
- package/src/index.ts +77 -0
- package/src/lib/utils.ts +57 -0
- package/src/styles/globals.css +160 -0
|
@@ -0,0 +1,322 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
3
|
+
/**
|
|
4
|
+
* Dialog - A modal dialog component for important content or actions
|
|
5
|
+
*
|
|
6
|
+
* A modal window overlay component built on Radix UI Dialog primitives that interrupts
|
|
7
|
+
* the user's workflow to capture their attention for important interactions. Dialogs render
|
|
8
|
+
* content in a layer above the main application with proper focus management and accessibility.
|
|
9
|
+
*
|
|
10
|
+
* Use dialogs for critical interactions, confirmations, forms, or detailed information that
|
|
11
|
+
* requires user focus and prevents interaction with the background content.
|
|
12
|
+
*
|
|
13
|
+
* @component
|
|
14
|
+
* @example
|
|
15
|
+
* ```tsx
|
|
16
|
+
* // Basic confirmation dialog
|
|
17
|
+
* <Dialog>
|
|
18
|
+
* <DialogTrigger asChild>
|
|
19
|
+
* <Button>Open Dialog</Button>
|
|
20
|
+
* </DialogTrigger>
|
|
21
|
+
* <DialogContent>
|
|
22
|
+
* <DialogHeader>
|
|
23
|
+
* <DialogTitle>Are you sure?</DialogTitle>
|
|
24
|
+
* <DialogDescription>
|
|
25
|
+
* This action cannot be undone.
|
|
26
|
+
* </DialogDescription>
|
|
27
|
+
* </DialogHeader>
|
|
28
|
+
* <DialogFooter>
|
|
29
|
+
* <Button variant="outline">Cancel</Button>
|
|
30
|
+
* <Button>Continue</Button>
|
|
31
|
+
* </DialogFooter>
|
|
32
|
+
* </DialogContent>
|
|
33
|
+
* </Dialog>
|
|
34
|
+
* ```
|
|
35
|
+
*
|
|
36
|
+
* @example
|
|
37
|
+
* ```tsx
|
|
38
|
+
* // Controlled dialog with form handling
|
|
39
|
+
* const [open, setOpen] = useState(false);
|
|
40
|
+
*
|
|
41
|
+
* <Dialog open={open} onOpenChange={setOpen}>
|
|
42
|
+
* <DialogTrigger asChild>
|
|
43
|
+
* <Button>Edit Profile</Button>
|
|
44
|
+
* </DialogTrigger>
|
|
45
|
+
* <DialogContent className="sm:max-w-[425px]">
|
|
46
|
+
* <DialogHeader>
|
|
47
|
+
* <DialogTitle>Edit profile</DialogTitle>
|
|
48
|
+
* <DialogDescription>
|
|
49
|
+
* Make changes to your profile here. Click save when you're done.
|
|
50
|
+
* </DialogDescription>
|
|
51
|
+
* </DialogHeader>
|
|
52
|
+
* <form onSubmit={handleSubmit}>
|
|
53
|
+
* <div className="grid gap-4 py-4">
|
|
54
|
+
* <Input label="Name" defaultValue="John Doe" />
|
|
55
|
+
* <Input label="Username" defaultValue="@johndoe" />
|
|
56
|
+
* </div>
|
|
57
|
+
* <DialogFooter>
|
|
58
|
+
* <Button type="submit">Save changes</Button>
|
|
59
|
+
* </DialogFooter>
|
|
60
|
+
* </form>
|
|
61
|
+
* </DialogContent>
|
|
62
|
+
* </Dialog>
|
|
63
|
+
* ```
|
|
64
|
+
*
|
|
65
|
+
* @example
|
|
66
|
+
* ```tsx
|
|
67
|
+
* // Custom close behavior
|
|
68
|
+
* <Dialog>
|
|
69
|
+
* <DialogTrigger asChild>
|
|
70
|
+
* <Button>Share Link</Button>
|
|
71
|
+
* </DialogTrigger>
|
|
72
|
+
* <DialogContent showCloseButton={false}>
|
|
73
|
+
* <DialogHeader>
|
|
74
|
+
* <DialogTitle>Share this link</DialogTitle>
|
|
75
|
+
* </DialogHeader>
|
|
76
|
+
* <div className="flex items-center space-x-2">
|
|
77
|
+
* <Input value="https://example.com" readOnly />
|
|
78
|
+
* <Button size="sm"><Copy className="h-4 w-4" /></Button>
|
|
79
|
+
* </div>
|
|
80
|
+
* <DialogFooter>
|
|
81
|
+
* <DialogClose asChild>
|
|
82
|
+
* <Button variant="secondary">Done</Button>
|
|
83
|
+
* </DialogClose>
|
|
84
|
+
* </DialogFooter>
|
|
85
|
+
* </DialogContent>
|
|
86
|
+
* </Dialog>
|
|
87
|
+
* ```
|
|
88
|
+
*
|
|
89
|
+
* @accessibility
|
|
90
|
+
* - Focus trapped within dialog when open using Radix UI focus management
|
|
91
|
+
* - Escape key closes the dialog (can be disabled with `modal={false}`)
|
|
92
|
+
* - Background scroll locked when dialog is open
|
|
93
|
+
* - Proper ARIA attributes including aria-labelledby and aria-describedby
|
|
94
|
+
* - Screen reader announcements when dialog opens/closes
|
|
95
|
+
* - Focus returns to trigger element when dialog closes
|
|
96
|
+
* - Background content becomes inert (non-interactive)
|
|
97
|
+
* - Keyboard navigation between focusable elements
|
|
98
|
+
*
|
|
99
|
+
* @param open - Controlled open state of the dialog
|
|
100
|
+
* @param onOpenChange - Callback fired when open state changes
|
|
101
|
+
* @param modal - Whether dialog is modal (default: true). Non-modal allows background interaction
|
|
102
|
+
* @param defaultOpen - Default open state for uncontrolled usage
|
|
103
|
+
*
|
|
104
|
+
* @see {@link https://ui.shadcn.com/docs/components/dialog} - shadcn/ui Dialog documentation
|
|
105
|
+
* @see {@link https://www.radix-ui.com/primitives/docs/components/dialog} - Radix UI Dialog primitives
|
|
106
|
+
* @see {@link AlertDialog} - For confirmation dialogs with specific alert semantics
|
|
107
|
+
* @see {@link Sheet} - For side panel overlays
|
|
108
|
+
* @see {@link Drawer} - For mobile-friendly bottom overlays
|
|
109
|
+
* @since 1.0.0
|
|
110
|
+
*/
|
|
111
|
+
declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
112
|
+
/**
|
|
113
|
+
* DialogTrigger - The element that opens the dialog when clicked
|
|
114
|
+
*
|
|
115
|
+
* Typically wraps a button or other interactive element. Use asChild
|
|
116
|
+
* prop to render as the child element instead of a button.
|
|
117
|
+
*
|
|
118
|
+
* @component
|
|
119
|
+
* @example
|
|
120
|
+
* ```tsx
|
|
121
|
+
* <DialogTrigger asChild>
|
|
122
|
+
* <Button>Open Dialog</Button>
|
|
123
|
+
* </DialogTrigger>
|
|
124
|
+
* ```
|
|
125
|
+
* @since 1.0.0
|
|
126
|
+
*/
|
|
127
|
+
declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
128
|
+
/**
|
|
129
|
+
* DialogPortal - Portal container for dialog content
|
|
130
|
+
*
|
|
131
|
+
* Renders dialog content in a React portal at the end of the document body.
|
|
132
|
+
* This ensures proper stacking context and prevents z-index issues.
|
|
133
|
+
*
|
|
134
|
+
* @component
|
|
135
|
+
* @since 1.0.0
|
|
136
|
+
*/
|
|
137
|
+
declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
|
|
138
|
+
/**
|
|
139
|
+
* DialogClose - A close button that dismisses the dialog
|
|
140
|
+
*
|
|
141
|
+
* Can be placed anywhere within DialogContent to provide a close action.
|
|
142
|
+
* Typically used for custom close buttons in addition to the default X button.
|
|
143
|
+
*
|
|
144
|
+
* @component
|
|
145
|
+
* @example
|
|
146
|
+
* ```tsx
|
|
147
|
+
* <DialogClose asChild>
|
|
148
|
+
* <Button variant="outline">Cancel</Button>
|
|
149
|
+
* </DialogClose>
|
|
150
|
+
* ```
|
|
151
|
+
* @since 1.0.0
|
|
152
|
+
*/
|
|
153
|
+
declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
|
|
154
|
+
/**
|
|
155
|
+
* DialogOverlay - The backdrop overlay behind the dialog
|
|
156
|
+
*
|
|
157
|
+
* Provides a semi-transparent background that covers the main content.
|
|
158
|
+
* Clicking the overlay will close the dialog by default.
|
|
159
|
+
*
|
|
160
|
+
* @component
|
|
161
|
+
* @accessibility
|
|
162
|
+
* - Prevents interaction with background content
|
|
163
|
+
* - Can be clicked to dismiss dialog (configurable)
|
|
164
|
+
* @since 1.0.0
|
|
165
|
+
*/
|
|
166
|
+
declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
|
|
167
|
+
/**
|
|
168
|
+
* DialogContent - The main content container for the dialog
|
|
169
|
+
*
|
|
170
|
+
* The primary container for dialog content that automatically includes the overlay and portal.
|
|
171
|
+
* Provides the visual dialog box with animations, positioning, and focus management.
|
|
172
|
+
* Includes a close button (X) by default which can be hidden using the showCloseButton prop.
|
|
173
|
+
*
|
|
174
|
+
* @component
|
|
175
|
+
* @example
|
|
176
|
+
* ```tsx
|
|
177
|
+
* // Standard content with header and footer
|
|
178
|
+
* <DialogContent>
|
|
179
|
+
* <DialogHeader>
|
|
180
|
+
* <DialogTitle>Dialog Title</DialogTitle>
|
|
181
|
+
* <DialogDescription>
|
|
182
|
+
* Detailed description of the dialog's purpose
|
|
183
|
+
* </DialogDescription>
|
|
184
|
+
* </DialogHeader>
|
|
185
|
+
* <div className="py-4">
|
|
186
|
+
* Main dialog content goes here
|
|
187
|
+
* </div>
|
|
188
|
+
* <DialogFooter>
|
|
189
|
+
* <Button variant="outline">Cancel</Button>
|
|
190
|
+
* <Button>Confirm</Button>
|
|
191
|
+
* </DialogFooter>
|
|
192
|
+
* </DialogContent>
|
|
193
|
+
* ```
|
|
194
|
+
*
|
|
195
|
+
* @example
|
|
196
|
+
* ```tsx
|
|
197
|
+
* // Custom sizing and scrollable content
|
|
198
|
+
* <DialogContent className="sm:max-w-[425px] max-h-[80vh] overflow-y-auto">
|
|
199
|
+
* <DialogHeader>
|
|
200
|
+
* <DialogTitle>Long Content</DialogTitle>
|
|
201
|
+
* </DialogHeader>
|
|
202
|
+
* <div className="space-y-4">
|
|
203
|
+
* // Long scrollable content
|
|
204
|
+
* </div>
|
|
205
|
+
* </DialogContent>
|
|
206
|
+
* ```
|
|
207
|
+
*
|
|
208
|
+
* @example
|
|
209
|
+
* ```tsx
|
|
210
|
+
* // Without default close button
|
|
211
|
+
* <DialogContent showCloseButton={false}>
|
|
212
|
+
* <DialogHeader>
|
|
213
|
+
* <DialogTitle>Custom Close</DialogTitle>
|
|
214
|
+
* </DialogHeader>
|
|
215
|
+
* <div>Content without X button</div>
|
|
216
|
+
* <DialogFooter>
|
|
217
|
+
* <DialogClose asChild>
|
|
218
|
+
* <Button>Close</Button>
|
|
219
|
+
* </DialogClose>
|
|
220
|
+
* </DialogFooter>
|
|
221
|
+
* </DialogContent>
|
|
222
|
+
* ```
|
|
223
|
+
*
|
|
224
|
+
* @accessibility
|
|
225
|
+
* - Automatically focuses first focusable element on open
|
|
226
|
+
* - Traps focus within the dialog using Radix UI focus management
|
|
227
|
+
* - Includes accessible close button with screen reader text ("Close")
|
|
228
|
+
* - Proper ARIA labeling automatically applied via DialogTitle and DialogDescription
|
|
229
|
+
* - ESC key support for closing (when modal={true})
|
|
230
|
+
* - Click outside to close (when modal={true})
|
|
231
|
+
*
|
|
232
|
+
* @param className - Additional CSS classes to apply to the content container
|
|
233
|
+
* @param children - Dialog content including header, body, and footer elements
|
|
234
|
+
* @param showCloseButton - Whether to show the X close button in top-right corner (default: true)
|
|
235
|
+
* @param ...props - All other props from Radix UI Dialog.Content including positioning and animation props
|
|
236
|
+
*
|
|
237
|
+
* @since 1.0.0
|
|
238
|
+
*/
|
|
239
|
+
declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
|
240
|
+
showCloseButton?: boolean;
|
|
241
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
242
|
+
/**
|
|
243
|
+
* DialogHeader - Container for dialog title and description
|
|
244
|
+
*
|
|
245
|
+
* Groups the dialog's title and description at the top of the dialog content.
|
|
246
|
+
* Provides consistent spacing and alignment for header elements.
|
|
247
|
+
*
|
|
248
|
+
* @component
|
|
249
|
+
* @example
|
|
250
|
+
* ```tsx
|
|
251
|
+
* <DialogHeader>
|
|
252
|
+
* <DialogTitle>Edit profile</DialogTitle>
|
|
253
|
+
* <DialogDescription>
|
|
254
|
+
* Make changes to your profile here. Click save when you're done.
|
|
255
|
+
* </DialogDescription>
|
|
256
|
+
* </DialogHeader>
|
|
257
|
+
* ```
|
|
258
|
+
* @since 1.0.0
|
|
259
|
+
*/
|
|
260
|
+
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
261
|
+
/**
|
|
262
|
+
* DialogFooter - Container for dialog action buttons
|
|
263
|
+
*
|
|
264
|
+
* Typically contains action buttons like Save, Cancel, or Submit.
|
|
265
|
+
* Automatically handles responsive layout with proper button alignment.
|
|
266
|
+
*
|
|
267
|
+
* @component
|
|
268
|
+
* @example
|
|
269
|
+
* ```tsx
|
|
270
|
+
* <DialogFooter>
|
|
271
|
+
* <Button variant="outline">Cancel</Button>
|
|
272
|
+
* <Button type="submit">Save changes</Button>
|
|
273
|
+
* </DialogFooter>
|
|
274
|
+
* ```
|
|
275
|
+
*
|
|
276
|
+
* @accessibility
|
|
277
|
+
* - Buttons are arranged in logical order for keyboard navigation
|
|
278
|
+
* - Mobile-responsive layout
|
|
279
|
+
* @since 1.0.0
|
|
280
|
+
*/
|
|
281
|
+
declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
282
|
+
/**
|
|
283
|
+
* DialogTitle - The main heading of the dialog
|
|
284
|
+
*
|
|
285
|
+
* Provides the accessible name for the dialog. Should clearly describe
|
|
286
|
+
* the dialog's purpose or the action being performed.
|
|
287
|
+
*
|
|
288
|
+
* @component
|
|
289
|
+
* @example
|
|
290
|
+
* ```tsx
|
|
291
|
+
* <DialogTitle>Delete Account</DialogTitle>
|
|
292
|
+
* ```
|
|
293
|
+
*
|
|
294
|
+
* @accessibility
|
|
295
|
+
* - Automatically sets aria-labelledby on the dialog
|
|
296
|
+
* - Should be descriptive and concise
|
|
297
|
+
* @since 1.0.0
|
|
298
|
+
*/
|
|
299
|
+
declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
|
|
300
|
+
/**
|
|
301
|
+
* DialogDescription - Supplementary description for the dialog
|
|
302
|
+
*
|
|
303
|
+
* Provides additional context or instructions for the dialog content.
|
|
304
|
+
* Helps users understand what action they're about to take.
|
|
305
|
+
*
|
|
306
|
+
* @component
|
|
307
|
+
* @example
|
|
308
|
+
* ```tsx
|
|
309
|
+
* <DialogDescription>
|
|
310
|
+
* This action cannot be undone. This will permanently delete your
|
|
311
|
+
* account and remove your data from our servers.
|
|
312
|
+
* </DialogDescription>
|
|
313
|
+
* ```
|
|
314
|
+
*
|
|
315
|
+
* @accessibility
|
|
316
|
+
* - Automatically sets aria-describedby on the dialog
|
|
317
|
+
* - Important for screen reader users to understand context
|
|
318
|
+
* @since 1.0.0
|
|
319
|
+
*/
|
|
320
|
+
declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
|
|
321
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
|
|
322
|
+
//# sourceMappingURL=dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2GG;AACH,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAEtD;AAED;;;;;;;;GAQG;AACH,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAErD;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED;;;;;;;;;;;GAWG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAWtD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,2CAyBA;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAQ1D;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Drawer as DrawerPrimitive } from "vaul";
|
|
3
|
+
/**
|
|
4
|
+
* Drawer component for mobile-optimized sliding panels
|
|
5
|
+
*
|
|
6
|
+
* A flexible drawer component built on Vaul that creates sliding panel interfaces
|
|
7
|
+
* from screen edges. Designed primarily for mobile experiences with touch gestures,
|
|
8
|
+
* swipe-to-dismiss functionality, and natural drag interactions. Supports multiple
|
|
9
|
+
* directions (top, bottom, left, right) and responsive behavior patterns.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* // Basic usage with trigger and content
|
|
14
|
+
* <Drawer>
|
|
15
|
+
* <DrawerTrigger asChild>
|
|
16
|
+
* <Button>Open Settings</Button>
|
|
17
|
+
* </DrawerTrigger>
|
|
18
|
+
* <DrawerContent>
|
|
19
|
+
* <DrawerHeader>
|
|
20
|
+
* <DrawerTitle>Settings</DrawerTitle>
|
|
21
|
+
* <DrawerDescription>
|
|
22
|
+
* Adjust your preferences below
|
|
23
|
+
* </DrawerDescription>
|
|
24
|
+
* </DrawerHeader>
|
|
25
|
+
* <div className="p-4">
|
|
26
|
+
* Content goes here
|
|
27
|
+
* </div>
|
|
28
|
+
* <DrawerFooter>
|
|
29
|
+
* <Button>Save</Button>
|
|
30
|
+
* <DrawerClose asChild>
|
|
31
|
+
* <Button variant="outline">Cancel</Button>
|
|
32
|
+
* </DrawerClose>
|
|
33
|
+
* </DrawerFooter>
|
|
34
|
+
* </DrawerContent>
|
|
35
|
+
* </Drawer>
|
|
36
|
+
* ```
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* ```tsx
|
|
40
|
+
* // Controlled drawer with state management
|
|
41
|
+
* const [open, setOpen] = useState(false)
|
|
42
|
+
*
|
|
43
|
+
* <Drawer open={open} onOpenChange={setOpen}>
|
|
44
|
+
* <DrawerContent>
|
|
45
|
+
* <DrawerHeader>
|
|
46
|
+
* <DrawerTitle>Controlled Drawer</DrawerTitle>
|
|
47
|
+
* </DrawerHeader>
|
|
48
|
+
* <div className="p-4">
|
|
49
|
+
* <Button onClick={() => setOpen(false)}>Close Programmatically</Button>
|
|
50
|
+
* </div>
|
|
51
|
+
* </DrawerContent>
|
|
52
|
+
* </Drawer>
|
|
53
|
+
* ```
|
|
54
|
+
*
|
|
55
|
+
* @accessibility
|
|
56
|
+
* - Focus management with focus trap when open
|
|
57
|
+
* - Keyboard navigation with Escape to close
|
|
58
|
+
* - Screen reader announcements for state changes
|
|
59
|
+
* - Touch gestures for swipe-to-dismiss
|
|
60
|
+
* - Backdrop click to close
|
|
61
|
+
* - ARIA attributes for modal behavior
|
|
62
|
+
* - Scroll lock on background content
|
|
63
|
+
*
|
|
64
|
+
* @see {@link https://ui.shadcn.com/docs/components/drawer} shadcn/ui Drawer documentation
|
|
65
|
+
* @since 1.0.0
|
|
66
|
+
* @see {@link Dialog} For modal overlays without slide animation
|
|
67
|
+
* @see {@link Sheet} For desktop-optimized side panels
|
|
68
|
+
*/
|
|
69
|
+
/**
|
|
70
|
+
* Root drawer component that manages the drawer state and context
|
|
71
|
+
*
|
|
72
|
+
* @param props - All props from Vaul's Drawer.Root component
|
|
73
|
+
* @param props.open - Whether the drawer is open (controlled mode)
|
|
74
|
+
* @param props.onOpenChange - Callback when drawer open state changes
|
|
75
|
+
* @param props.direction - Direction from which drawer slides ("bottom" | "top" | "left" | "right")
|
|
76
|
+
* @param props.modal - Whether drawer should be modal (default: true)
|
|
77
|
+
* @param props.dismissible - Whether drawer can be dismissed by dragging (default: true)
|
|
78
|
+
*/
|
|
79
|
+
declare function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
80
|
+
/**
|
|
81
|
+
* Trigger element that opens the drawer when activated
|
|
82
|
+
*
|
|
83
|
+
* @param props.asChild - Render as child element instead of button
|
|
84
|
+
*/
|
|
85
|
+
declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
86
|
+
/**
|
|
87
|
+
* Portal component for rendering drawer content outside the normal DOM tree
|
|
88
|
+
*
|
|
89
|
+
* @param props.container - Container element to render into (default: document.body)
|
|
90
|
+
*/
|
|
91
|
+
declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
|
|
92
|
+
/**
|
|
93
|
+
* Close trigger that dismisses the drawer when activated
|
|
94
|
+
*
|
|
95
|
+
* @param props.asChild - Render as child element instead of button
|
|
96
|
+
*/
|
|
97
|
+
declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
|
|
98
|
+
/**
|
|
99
|
+
* Overlay backdrop that appears behind the drawer content
|
|
100
|
+
*
|
|
101
|
+
* @param props.className - Additional CSS classes to apply
|
|
102
|
+
*/
|
|
103
|
+
declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
|
|
104
|
+
/**
|
|
105
|
+
* Main content container for the drawer with responsive positioning
|
|
106
|
+
*
|
|
107
|
+
* Automatically includes overlay and portal rendering. Supports four directions:
|
|
108
|
+
* - bottom: Slides up from bottom (default mobile pattern)
|
|
109
|
+
* - top: Slides down from top
|
|
110
|
+
* - left: Slides in from left edge
|
|
111
|
+
* - right: Slides in from right edge
|
|
112
|
+
*
|
|
113
|
+
* @param props.className - Additional CSS classes to apply
|
|
114
|
+
* @param props.children - Content to render inside the drawer
|
|
115
|
+
*/
|
|
116
|
+
declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
|
|
117
|
+
/**
|
|
118
|
+
* Header section of the drawer containing title and description
|
|
119
|
+
*
|
|
120
|
+
* Automatically centers text for bottom/top drawers and left-aligns for side drawers
|
|
121
|
+
* on larger screens. Should contain DrawerTitle and optionally DrawerDescription.
|
|
122
|
+
*
|
|
123
|
+
* @param props.className - Additional CSS classes to apply
|
|
124
|
+
*/
|
|
125
|
+
declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
126
|
+
/**
|
|
127
|
+
* Footer section of the drawer containing action buttons
|
|
128
|
+
*
|
|
129
|
+
* Positioned at the bottom of the drawer with automatic top margin to push
|
|
130
|
+
* content to the bottom. Typically contains primary actions and DrawerClose.
|
|
131
|
+
*
|
|
132
|
+
* @param props.className - Additional CSS classes to apply
|
|
133
|
+
*/
|
|
134
|
+
declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
135
|
+
/**
|
|
136
|
+
* Accessible title element for the drawer
|
|
137
|
+
*
|
|
138
|
+
* Required for accessibility - announces the drawer purpose to screen readers.
|
|
139
|
+
* Automatically styled with semibold font weight.
|
|
140
|
+
*
|
|
141
|
+
* @param props.className - Additional CSS classes to apply
|
|
142
|
+
*/
|
|
143
|
+
declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
|
|
144
|
+
/**
|
|
145
|
+
* Optional description element providing additional context
|
|
146
|
+
*
|
|
147
|
+
* Provides supplementary information about the drawer's content or purpose.
|
|
148
|
+
* Styled with muted foreground color and smaller text size.
|
|
149
|
+
*
|
|
150
|
+
* @param props.className - Additional CSS classes to apply
|
|
151
|
+
*/
|
|
152
|
+
declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
|
|
153
|
+
export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
|
|
154
|
+
//# sourceMappingURL=drawer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/ui/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAIjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH;;;;;;;;;GASG;AACH,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED;;;;GAIG;AACH,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAEtD;AAED;;;;GAIG;AACH,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAErD;AAED;;;;GAIG;AACH,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED;;;;GAIG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAWtD;AAED;;;;;;;;;;;GAWG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAqBtD;AAED;;;;;;;GAOG;AACH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED;;;;;;;GAOG;AACH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED;;;;;;;GAOG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED;;;;;;;GAOG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAQ1D;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}
|