From aee10914fed4799b318826ec9da0410f336ec28c Mon Sep 17 00:00:00 2001 From: shadcn Date: Wed, 14 Jan 2026 09:25:14 +0400 Subject: [PATCH] feat: add more examples --- apps/v4/components/component-preview-tabs.tsx | 2 +- apps/v4/examples/__index__.tsx | 9104 +++++++++++++++++ apps/v4/examples/base/accordion-basic.tsx | 39 + apps/v4/examples/base/accordion-in-card.tsx | 142 + apps/v4/examples/base/accordion-multiple.tsx | 60 +- .../examples/base/accordion-with-borders.tsx | 59 + .../examples/base/accordion-with-disabled.tsx | 52 + apps/v4/examples/base/alert-dialog-basic.tsx | 33 + .../base/alert-dialog-destructive.tsx | 40 + .../examples/base/alert-dialog-in-dialog.tsx | 61 + .../base/alert-dialog-small-with-media.tsx | 40 + apps/v4/examples/base/alert-dialog-small.tsx | 32 + .../examples/base/alert-dialog-with-media.tsx | 40 + apps/v4/examples/base/alert-example1.tsx | 22 + apps/v4/examples/base/alert-example2.tsx | 62 + apps/v4/examples/base/alert-example3.tsx | 31 + apps/v4/examples/base/alert-example4.tsx | 34 + apps/v4/examples/base/aspect-ratio16x9.tsx | 15 + apps/v4/examples/base/aspect-ratio1x1.tsx | 15 + apps/v4/examples/base/aspect-ratio21x9.tsx | 15 + apps/v4/examples/base/aspect-ratio9x16.tsx | 15 + .../v4/examples/base/avatar-group-example.tsx | 73 + .../examples/base/avatar-group-with-count.tsx | 77 + .../base/avatar-group-with-icon-count.tsx | 90 + apps/v4/examples/base/avatar-in-empty.tsx | 67 + apps/v4/examples/base/avatar-sizes.tsx | 33 + .../examples/base/avatar-with-badge-icon.tsx | 66 + apps/v4/examples/base/avatar-with-badge.tsx | 53 + apps/v4/examples/base/badge-as-link.tsx | 40 + apps/v4/examples/base/badge-custom-colors.tsx | 35 + apps/v4/examples/base/badge-long-text.tsx | 11 + apps/v4/examples/base/badge-variants.tsx | 14 + .../v4/examples/base/badge-with-icon-left.tsx | 33 + .../examples/base/badge-with-icon-right.tsx | 33 + apps/v4/examples/base/badge-with-spinner.tsx | 33 + apps/v4/examples/base/breadcrumb-basic.tsx | 28 + .../base/breadcrumb-with-dropdown.tsx | 52 + .../v4/examples/base/breadcrumb-with-link.tsx | 34 + apps/v4/examples/base/button-examples.tsx | 24 + apps/v4/examples/base/button-group-basic.tsx | 13 + .../examples/base/button-group-navigation.tsx | 23 + apps/v4/examples/base/button-group-nested.tsx | 48 +- .../base/button-group-pagination-split.tsx | 35 + .../examples/base/button-group-pagination.tsx | 33 + .../base/button-group-text-alignment.tsx | 26 + .../base/button-group-vertical-nested.tsx | 45 + .../examples/base/button-group-vertical.tsx | 22 + .../base/button-group-with-dropdown.tsx | 90 + .../base/button-group-with-fields.tsx | 41 + .../examples/base/button-group-with-icons.tsx | 25 + .../base/button-group-with-input-group.tsx | 20 + .../examples/base/button-group-with-input.tsx | 18 + .../examples/base/button-group-with-like.tsx | 22 + .../button-group-with-select-and-input.tsx | 39 + .../base/button-group-with-select.tsx | 48 + .../examples/base/button-group-with-text.tsx | 21 + apps/v4/examples/base/button-icon-left.tsx | 89 + apps/v4/examples/base/button-icon-only.tsx | 89 + apps/v4/examples/base/button-icon-right.tsx | 90 + .../examples/base/button-invalid-states.tsx | 86 + .../base/button-variants-and-sizes.tsx | 70 + .../examples/base/calendar-booked-dates.tsx | 36 + .../v4/examples/base/calendar-custom-days.tsx | 50 + apps/v4/examples/base/calendar-multiple.tsx | 12 + .../base/calendar-range-multiple-months.tsx | 31 + apps/v4/examples/base/calendar-range.tsx | 31 + apps/v4/examples/base/calendar-single.tsx | 23 + .../examples/base/calendar-week-numbers.tsx | 25 + .../examples/base/calendar-with-presets.tsx | 57 + apps/v4/examples/base/calendar-with-time.tsx | 65 + apps/v4/examples/base/card-default.tsx | 33 + .../base/card-footer-with-border-small.tsx | 20 + .../examples/base/card-footer-with-border.tsx | 20 + .../base/card-header-with-border-small.tsx | 26 + .../examples/base/card-header-with-border.tsx | 26 + apps/v4/examples/base/card-login.tsx | 65 + apps/v4/examples/base/card-meeting-notes.tsx | 73 + apps/v4/examples/base/card-small.tsx | 33 + .../examples/base/card-with-image-small.tsx | 35 + apps/v4/examples/base/card-with-image.tsx | 35 + apps/v4/examples/base/carousel-basic.tsx | 30 + apps/v4/examples/base/carousel-multiple.tsx | 35 + apps/v4/examples/base/carousel-with-gap.tsx | 30 + apps/v4/examples/base/chart-area-example.tsx | 90 + apps/v4/examples/base/chart-bar-example.tsx | 75 + apps/v4/examples/base/chart-line-example.tsx | 96 + apps/v4/examples/base/chart-pie-example.tsx | 126 + apps/v4/examples/base/chart-radar-example.tsx | 78 + .../v4/examples/base/chart-radial-example.tsx | 103 + apps/v4/examples/base/checkbox-basic.tsx | 11 + apps/v4/examples/base/checkbox-disabled.tsx | 16 +- apps/v4/examples/base/checkbox-fields.tsx | 91 + apps/v4/examples/base/checkbox-group.tsx | 46 + apps/v4/examples/base/checkbox-in-table.tsx | 105 + apps/v4/examples/base/checkbox-invalid.tsx | 11 + .../base/checkbox-with-description.tsx | 21 + apps/v4/examples/base/checkbox-with-title.tsx | 38 + .../examples/base/collapsible-file-tree.tsx | 121 + .../v4/examples/base/collapsible-settings.tsx | 71 + .../examples/base/combobox-auto-highlight.tsx | 70 + apps/v4/examples/base/combobox-basic.tsx | 70 + apps/v4/examples/base/combobox-disabled.tsx | 70 + apps/v4/examples/base/combobox-in-dialog.tsx | 128 + apps/v4/examples/base/combobox-in-popup.tsx | 488 + apps/v4/examples/base/combobox-invalid.tsx | 100 + apps/v4/examples/base/combobox-large-list.tsx | 65 + .../base/combobox-multiple-disabled.tsx | 94 + .../base/combobox-multiple-invalid.tsx | 141 + .../base/combobox-multiple-no-remove.tsx | 95 + apps/v4/examples/base/combobox-multiple.tsx | 93 + apps/v4/examples/base/combobox-with-clear.tsx | 71 + .../base/combobox-with-custom-items.tsx | 491 + apps/v4/examples/base/combobox-with-form.tsx | 107 + .../combobox-with-groups-and-separator.tsx | 110 + .../v4/examples/base/combobox-with-groups.tsx | 108 + .../base/combobox-with-other-inputs.tsx | 115 + .../examples/base/comboxbox-input-addon.tsx | 115 + apps/v4/examples/base/command-basic.tsx | 38 + apps/v4/examples/base/command-many-items.tsx | 181 + apps/v4/examples/base/command-with-groups.tsx | 75 + .../examples/base/command-with-shortcuts.tsx | 52 + apps/v4/examples/base/context-menu-basic.tsx | 24 + .../examples/base/context-menu-in-dialog.tsx | 89 + .../base/context-menu-with-checkboxes.tsx | 28 + .../base/context-menu-with-destructive.tsx | 42 + .../base/context-menu-with-groups.tsx | 71 + .../examples/base/context-menu-with-icons.tsx | 47 + .../examples/base/context-menu-with-radio.tsx | 46 + .../base/context-menu-with-shortcuts.tsx | 46 + .../examples/base/context-menu-with-sides.tsx | 62 + .../base/context-menu-with-submenu.tsx | 52 + .../base/data-picker-with-dropdowns.tsx | 58 + apps/v4/examples/base/date-picker-simple.tsx | 40 + .../examples/base/date-picker-with-range.tsx | 26 +- apps/v4/examples/base/default-item-group.tsx | 32 + .../v4/examples/base/dialog-chat-settings.tsx | 429 + .../examples/base/dialog-no-close-button.tsx | 37 + .../base/dialog-scrollable-content.tsx | 45 + apps/v4/examples/base/dialog-with-form.tsx | 50 + .../base/dialog-with-sticky-footer.tsx | 52 + .../base/drawer-scrollable-content.tsx | 49 + apps/v4/examples/base/drawer-with-sides.tsx | 65 + apps/v4/examples/base/dropdown-menu-basic.tsx | 36 + .../examples/base/dropdown-menu-complex.tsx | 292 + .../examples/base/dropdown-menu-in-dialog.tsx | 85 + .../base/dropdown-menu-with-avatar.tsx | 90 + .../dropdown-menu-with-checkboxes-icons.tsx | 65 + .../base/dropdown-menu-with-checkboxes.tsx | 58 + .../base/dropdown-menu-with-destructive.tsx | 42 + .../base/dropdown-menu-with-icons.tsx | 47 + .../base/dropdown-menu-with-radio-icons.tsx | 52 + .../base/dropdown-menu-with-radio.tsx | 52 + .../base/dropdown-menu-with-shortcuts.tsx | 51 + .../base/dropdown-menu-with-submenu.tsx | 48 + apps/v4/examples/base/empty-basic.tsx | 39 + apps/v4/examples/base/empty-in-card.tsx | 43 + apps/v4/examples/base/empty-with-border.tsx | 42 + apps/v4/examples/base/empty-with-icon.tsx | 33 + .../base/empty-with-muted-background-alt.tsx | 42 + .../base/empty-with-muted-background.tsx | 33 + apps/v4/examples/base/file-upload-list.tsx | 68 + .../v4/examples/base/hover-card-in-dialog.tsx | 52 + apps/v4/examples/base/hover-card-sides.tsx | 32 + apps/v4/examples/base/input-basic.tsx | 5 + apps/v4/examples/base/input-disabled.tsx | 15 +- apps/v4/examples/base/input-fields.tsx | 80 + apps/v4/examples/base/input-form.tsx | 64 + apps/v4/examples/base/input-group-basic.tsx | 42 + apps/v4/examples/base/input-group-in-card.tsx | 78 + .../base/input-group-textarea-examples.tsx | 155 + .../examples/base/input-group-with-addons.tsx | 132 + .../base/input-group-with-buttons.tsx | 60 + .../v4/examples/base/input-group-with-kbd.tsx | 131 + .../base/input-group-with-tooltip.tsx | 159 + apps/v4/examples/base/input-invalid.tsx | 5 + .../examples/base/input-otp-alphanumeric.tsx | 34 + apps/v4/examples/base/input-otp-disabled.tsx | 28 + apps/v4/examples/base/input-otp-fields.tsx | 135 + apps/v4/examples/base/input-otp-form.tsx | 76 + .../examples/base/input-otp-four-digits.tsx | 24 + apps/v4/examples/base/input-otp-invalid.tsx | 45 + apps/v4/examples/base/input-otp-pattern.tsx | 30 +- apps/v4/examples/base/input-otp-simple.tsx | 28 + .../base/input-otp-with-separator.tsx | 41 + apps/v4/examples/base/input-types.tsx | 49 + apps/v4/examples/base/input-with-button.tsx | 10 +- .../examples/base/input-with-description.tsx | 18 + apps/v4/examples/base/input-with-label.tsx | 16 +- .../base/input-with-native-select.tsx | 19 + apps/v4/examples/base/input-with-select.tsx | 26 + .../base/item-default-extra-small.tsx | 112 + apps/v4/examples/base/item-default-small.tsx | 112 + .../examples/base/item-default-with-image.tsx | 74 + apps/v4/examples/base/item-default.tsx | 108 + .../v4/examples/base/item-footer-examples.tsx | 54 + .../base/item-header-and-footer-examples.tsx | 66 + .../v4/examples/base/item-header-examples.tsx | 50 + apps/v4/examples/base/item-link-default.tsx | 65 + apps/v4/examples/base/item-link-muted.tsx | 65 + apps/v4/examples/base/item-link-outline.tsx | 65 + .../examples/base/item-muted-extra-small.tsx | 112 + apps/v4/examples/base/item-muted-small.tsx | 112 + .../examples/base/item-muted-with-image.tsx | 74 + apps/v4/examples/base/item-muted.tsx | 108 + .../base/item-outline-extra-small.tsx | 112 + apps/v4/examples/base/item-outline-small.tsx | 112 + .../item-outline-with-image-extra-small.tsx | 66 + .../base/item-outline-with-image-small.tsx | 74 + .../examples/base/item-outline-with-image.tsx | 74 + apps/v4/examples/base/item-outline.tsx | 108 + .../examples/base/item-separator-example.tsx | 56 + apps/v4/examples/base/kbd-arrow-keys.tsx | 12 + apps/v4/examples/base/kbd-basic.tsx | 11 + apps/v4/examples/base/kbd-group-example.tsx | 11 + apps/v4/examples/base/kbd-in-input-group.tsx | 17 + apps/v4/examples/base/kbd-in-tooltip.tsx | 25 + apps/v4/examples/base/kbd-modifier-keys.tsx | 10 + .../examples/base/kbd-with-icons-and-text.tsx | 17 + apps/v4/examples/base/kbd-with-icons.tsx | 18 + apps/v4/examples/base/kbd-with-samp.tsx | 9 + apps/v4/examples/base/label-disabled.tsx | 12 + apps/v4/examples/base/label-with-checkbox.tsx | 12 + apps/v4/examples/base/label-with-input.tsx | 12 + apps/v4/examples/base/label-with-textarea.tsx | 12 + apps/v4/examples/base/menubar-basic.tsx | 47 + apps/v4/examples/base/menubar-destructive.tsx | 65 + apps/v4/examples/base/menubar-format.tsx | 48 + apps/v4/examples/base/menubar-in-dialog.tsx | 93 + apps/v4/examples/base/menubar-insert.tsx | 64 + .../examples/base/menubar-with-checkboxes.tsx | 41 + apps/v4/examples/base/menubar-with-icons.tsx | 56 + apps/v4/examples/base/menubar-with-radio.tsx | 46 + .../examples/base/menubar-with-shortcuts.tsx | 51 + .../v4/examples/base/menubar-with-submenu.tsx | 60 + apps/v4/examples/base/muted-item-group.tsx | 49 + apps/v4/examples/base/native-select-basic.tsx | 19 + .../examples/base/native-select-disabled.tsx | 11 +- .../v4/examples/base/native-select-fields.tsx | 101 + .../examples/base/native-select-invalid.tsx | 11 +- apps/v4/examples/base/native-select-sizes.tsx | 23 + .../base/native-select-with-field.tsx | 21 + .../base/native-select-with-groups.tsx | 23 + .../examples/base/navigation-menu-basic.tsx | 152 + apps/v4/examples/base/outline-item-group.tsx | 43 + apps/v4/examples/base/pagination-basic.tsx | 38 + .../examples/base/pagination-icons-only.tsx | 49 + apps/v4/examples/base/pagination-simple.tsx | 32 + apps/v4/examples/base/popover-alignments.tsx | 39 + apps/v4/examples/base/popover-basic.tsx | 29 + apps/v4/examples/base/popover-in-dialog.tsx | 53 + apps/v4/examples/base/popover-with-form.tsx | 45 + apps/v4/examples/base/progress-controlled.tsx | 22 + apps/v4/examples/base/progress-values.tsx | 13 + apps/v4/examples/base/progress-with-label.tsx | 14 + apps/v4/examples/base/radio-fields.tsx | 149 + apps/v4/examples/base/radio-group-basic.tsx | 27 + .../v4/examples/base/radio-group-disabled.tsx | 27 + apps/v4/examples/base/radio-group-grid.tsx | 33 + apps/v4/examples/base/radio-group-invalid.tsx | 39 + .../base/radio-group-with-descriptions.tsx | 41 + .../base/radio-group-with-field-set.tsx | 37 + .../v4/examples/base/resizable-controlled.tsx | 34 + .../v4/examples/base/resizable-horizontal.tsx | 26 + apps/v4/examples/base/resizable-nested.tsx | 33 + apps/v4/examples/base/resizable-vertical.tsx | 4 +- .../examples/base/resizable-with-handle.tsx | 26 + .../examples/base/scroll-area-horizontal.tsx | 46 + .../v4/examples/base/scroll-area-vertical.tsx | 23 + apps/v4/examples/base/select-basic.tsx | 35 + apps/v4/examples/base/select-disabled.tsx | 39 + apps/v4/examples/base/select-fields.tsx | 147 + apps/v4/examples/base/select-in-dialog.tsx | 59 + apps/v4/examples/base/select-inline.tsx | 47 + apps/v4/examples/base/select-invalid.tsx | 56 + apps/v4/examples/base/select-item-aligned.tsx | 40 + apps/v4/examples/base/select-large-list.tsx | 35 + apps/v4/examples/base/select-multiple.tsx | 46 + apps/v4/examples/base/select-plan.tsx | 66 + apps/v4/examples/base/select-sizes.tsx | 49 + apps/v4/examples/base/select-with-button.tsx | 58 + apps/v4/examples/base/select-with-field.tsx | 42 + apps/v4/examples/base/select-with-groups.tsx | 54 + apps/v4/examples/base/select-with-icons.tsx | 82 + .../v4/examples/base/separator-horizontal.tsx | 19 + apps/v4/examples/base/separator-in-list.tsx | 22 + .../examples/base/separator-vertical-menu.tsx | 26 + apps/v4/examples/base/separator-vertical.tsx | 13 + .../examples/base/sheet-no-close-button.tsx | 30 + apps/v4/examples/base/sheet-with-form.tsx | 48 + apps/v4/examples/base/sheet-with-sides.tsx | 64 + apps/v4/examples/base/skeleton-avatar.tsx | 13 + apps/v4/examples/base/skeleton-card.tsx | 17 +- apps/v4/examples/base/skeleton-form.tsx | 17 + apps/v4/examples/base/skeleton-table.tsx | 23 + apps/v4/examples/base/skeleton-text.tsx | 11 + apps/v4/examples/base/slider-basic.tsx | 5 + apps/v4/examples/base/slider-controlled.tsx | 28 + apps/v4/examples/base/slider-disabled.tsx | 5 + apps/v4/examples/base/slider-fields.tsx | 119 + apps/v4/examples/base/slider-multiple.tsx | 5 + apps/v4/examples/base/slider-range.tsx | 5 + apps/v4/examples/base/slider-vertical.tsx | 22 + apps/v4/examples/base/sonner-basic.tsx | 14 + .../examples/base/sonner-with-description.tsx | 18 + apps/v4/examples/base/spinner-basic.tsx | 3 +- apps/v4/examples/base/spinner-in-badges.tsx | 25 + apps/v4/examples/base/spinner-in-buttons.tsx | 22 + apps/v4/examples/base/spinner-in-empty.tsx | 44 + .../examples/base/spinner-in-input-group.tsx | 21 + apps/v4/examples/base/switch-basic.tsx | 11 + apps/v4/examples/base/switch-disabled.tsx | 17 + apps/v4/examples/base/switch-fields.tsx | 77 + apps/v4/examples/base/switch-sizes.tsx | 17 + .../examples/base/switch-with-description.tsx | 25 + apps/v4/examples/base/switch-with-label.tsx | 11 + apps/v4/examples/base/table-basic.tsx | 80 + apps/v4/examples/base/table-simple.tsx | 39 + apps/v4/examples/base/table-with-actions.tsx | 107 + apps/v4/examples/base/table-with-badges.tsx | 63 + apps/v4/examples/base/table-with-footer.tsx | 87 + apps/v4/examples/base/table-with-input.tsx | 61 + apps/v4/examples/base/table-with-select.tsx | 87 + apps/v4/examples/base/tabs-basic.tsx | 12 + apps/v4/examples/base/tabs-disabled.tsx | 14 + apps/v4/examples/base/tabs-icon-only.tsx | 20 + apps/v4/examples/base/tabs-line-disabled.tsx | 15 + .../examples/base/tabs-line-with-content.tsx | 29 + apps/v4/examples/base/tabs-line.tsx | 13 + apps/v4/examples/base/tabs-multiple.tsx | 14 + .../base/tabs-variants-comparison.tsx | 20 + apps/v4/examples/base/tabs-vertical.tsx | 31 + apps/v4/examples/base/tabs-with-content.tsx | 29 + apps/v4/examples/base/tabs-with-dropdown.tsx | 57 + apps/v4/examples/base/tabs-with-icons.tsx | 19 + .../base/tabs-with-input-and-button.tsx | 36 + apps/v4/examples/base/textarea-basic.tsx | 5 + apps/v4/examples/base/textarea-disabled.tsx | 14 +- apps/v4/examples/base/textarea-fields.tsx | 67 + apps/v4/examples/base/textarea-invalid.tsx | 5 + .../base/textarea-with-description.tsx | 18 + apps/v4/examples/base/textarea-with-label.tsx | 16 +- apps/v4/examples/base/toggle-basic.tsx | 18 + apps/v4/examples/base/toggle-disabled.tsx | 12 +- apps/v4/examples/base/toggle-group-basic.tsx | 18 + .../examples/base/toggle-group-date-range.tsx | 25 + apps/v4/examples/base/toggle-group-filter.tsx | 20 + .../base/toggle-group-outline-with-icons.tsx | 18 + .../v4/examples/base/toggle-group-outline.tsx | 14 +- apps/v4/examples/base/toggle-group-sizes.tsx | 36 + apps/v4/examples/base/toggle-group-sort.tsx | 21 + .../v4/examples/base/toggle-group-spacing.tsx | 33 +- ...ggle-group-vertical-outline-with-icons.tsx | 18 + .../base/toggle-group-vertical-outline.tsx | 25 + .../toggle-group-vertical-with-spacing.tsx | 26 + .../examples/base/toggle-group-vertical.tsx | 18 + .../examples/base/toggle-group-with-icons.tsx | 33 + .../toggle-group-with-input-and-select.tsx | 45 + apps/v4/examples/base/toggle-outline.tsx | 15 +- apps/v4/examples/base/toggle-sizes.tsx | 17 + .../base/toggle-with-button-icon-text.tsx | 44 + .../examples/base/toggle-with-button-icon.tsx | 38 + .../examples/base/toggle-with-button-text.tsx | 33 + apps/v4/examples/base/toggle-with-icon.tsx | 16 + apps/v4/examples/base/tooltip-basic.tsx | 21 + apps/v4/examples/base/tooltip-disabled.tsx | 23 + apps/v4/examples/base/tooltip-formatted.tsx | 24 + .../v4/examples/base/tooltip-long-content.tsx | 22 + apps/v4/examples/base/tooltip-on-link.tsx | 26 + apps/v4/examples/base/tooltip-sides.tsx | 25 + apps/v4/examples/base/tooltip-with-icon.tsx | 23 + .../examples/base/tooltip-with-keyboard.tsx | 25 + apps/v4/examples/radix/accordion-basic.tsx | 39 + apps/v4/examples/radix/accordion-in-card.tsx | 143 + apps/v4/examples/radix/accordion-multiple.tsx | 60 +- .../examples/radix/accordion-with-borders.tsx | 63 + .../radix/accordion-with-disabled.tsx | 56 + apps/v4/examples/radix/alert-dialog-basic.tsx | 35 + .../radix/alert-dialog-destructive.tsx | 40 + .../examples/radix/alert-dialog-in-dialog.tsx | 59 + .../radix/alert-dialog-small-with-media.tsx | 39 + apps/v4/examples/radix/alert-dialog-small.tsx | 34 + .../radix/alert-dialog-with-media.tsx | 40 + apps/v4/examples/radix/alert-example1.tsx | 22 + apps/v4/examples/radix/alert-example2.tsx | 62 + apps/v4/examples/radix/alert-example3.tsx | 31 + apps/v4/examples/radix/alert-example4.tsx | 34 + apps/v4/examples/radix/aspect-ratio16x9.tsx | 15 + apps/v4/examples/radix/aspect-ratio1x1.tsx | 15 + apps/v4/examples/radix/aspect-ratio21x9.tsx | 15 + apps/v4/examples/radix/aspect-ratio9x16.tsx | 15 + .../examples/radix/avatar-group-example.tsx | 73 + .../radix/avatar-group-with-count.tsx | 77 + .../radix/avatar-group-with-icon-count.tsx | 90 + apps/v4/examples/radix/avatar-in-empty.tsx | 67 + apps/v4/examples/radix/avatar-sizes.tsx | 33 + .../examples/radix/avatar-with-badge-icon.tsx | 66 + apps/v4/examples/radix/avatar-with-badge.tsx | 53 + apps/v4/examples/radix/badge-as-link.tsx | 39 + .../v4/examples/radix/badge-custom-colors.tsx | 35 + apps/v4/examples/radix/badge-long-text.tsx | 11 + apps/v4/examples/radix/badge-variants.tsx | 14 + .../examples/radix/badge-with-icon-left.tsx | 33 + .../examples/radix/badge-with-icon-right.tsx | 33 + apps/v4/examples/radix/badge-with-spinner.tsx | 33 + apps/v4/examples/radix/breadcrumb-basic.tsx | 28 + .../radix/breadcrumb-with-dropdown.tsx | 52 + .../examples/radix/breadcrumb-with-link.tsx | 38 + apps/v4/examples/radix/button-examples.tsx | 21 + apps/v4/examples/radix/button-group-basic.tsx | 13 + .../radix/button-group-navigation.tsx | 23 + .../v4/examples/radix/button-group-nested.tsx | 50 +- .../radix/button-group-pagination-split.tsx | 35 + .../radix/button-group-pagination.tsx | 33 + .../radix/button-group-text-alignment.tsx | 26 + .../radix/button-group-vertical-nested.tsx | 45 + .../examples/radix/button-group-vertical.tsx | 22 + .../radix/button-group-with-dropdown.tsx | 86 + .../radix/button-group-with-fields.tsx | 41 + .../radix/button-group-with-icons.tsx | 25 + .../radix/button-group-with-input-group.tsx | 20 + .../radix/button-group-with-input.tsx | 18 + .../examples/radix/button-group-with-like.tsx | 16 + .../button-group-with-select-and-input.tsx | 28 + .../radix/button-group-with-select.tsx | 43 + .../examples/radix/button-group-with-text.tsx | 21 + apps/v4/examples/radix/button-icon-left.tsx | 89 + apps/v4/examples/radix/button-icon-only.tsx | 89 + apps/v4/examples/radix/button-icon-right.tsx | 90 + .../examples/radix/button-invalid-states.tsx | 86 + .../radix/button-variants-and-sizes.tsx | 70 + .../examples/radix/calendar-booked-dates.tsx | 36 + .../examples/radix/calendar-custom-days.tsx | 50 + apps/v4/examples/radix/calendar-multiple.tsx | 12 + .../radix/calendar-range-multiple-months.tsx | 31 + apps/v4/examples/radix/calendar-range.tsx | 31 + apps/v4/examples/radix/calendar-single.tsx | 23 + .../examples/radix/calendar-week-numbers.tsx | 25 + .../examples/radix/calendar-with-presets.tsx | 57 + apps/v4/examples/radix/calendar-with-time.tsx | 65 + apps/v4/examples/radix/card-default.tsx | 33 + .../radix/card-footer-with-border-small.tsx | 20 + .../radix/card-footer-with-border.tsx | 20 + .../radix/card-header-with-border-small.tsx | 26 + .../radix/card-header-with-border.tsx | 26 + apps/v4/examples/radix/card-login.tsx | 65 + apps/v4/examples/radix/card-meeting-notes.tsx | 73 + apps/v4/examples/radix/card-small.tsx | 33 + .../examples/radix/card-with-image-small.tsx | 35 + apps/v4/examples/radix/card-with-image.tsx | 35 + apps/v4/examples/radix/carousel-basic.tsx | 30 + apps/v4/examples/radix/carousel-multiple.tsx | 35 + apps/v4/examples/radix/carousel-with-gap.tsx | 30 + apps/v4/examples/radix/chart-area-example.tsx | 90 + apps/v4/examples/radix/chart-bar-example.tsx | 75 + apps/v4/examples/radix/chart-line-example.tsx | 96 + apps/v4/examples/radix/chart-pie-example.tsx | 126 + .../v4/examples/radix/chart-radar-example.tsx | 78 + .../examples/radix/chart-radial-example.tsx | 103 + apps/v4/examples/radix/checkbox-basic.tsx | 11 + apps/v4/examples/radix/checkbox-disabled.tsx | 16 +- apps/v4/examples/radix/checkbox-fields.tsx | 91 + apps/v4/examples/radix/checkbox-group.tsx | 46 + apps/v4/examples/radix/checkbox-in-table.tsx | 105 + apps/v4/examples/radix/checkbox-invalid.tsx | 11 + .../radix/checkbox-with-description.tsx | 21 + .../v4/examples/radix/checkbox-with-title.tsx | 38 + .../examples/radix/collapsible-file-tree.tsx | 119 + .../examples/radix/collapsible-settings.tsx | 73 + .../radix/combobox-auto-highlight.tsx | 35 + apps/v4/examples/radix/combobox-basic.tsx | 35 + apps/v4/examples/radix/combobox-disabled.tsx | 35 + apps/v4/examples/radix/combobox-in-dialog.tsx | 91 + apps/v4/examples/radix/combobox-in-popup.tsx | 453 + apps/v4/examples/radix/combobox-invalid.tsx | 65 + .../v4/examples/radix/combobox-large-list.tsx | 29 + .../radix/combobox-multiple-disabled.tsx | 58 + .../radix/combobox-multiple-invalid.tsx | 105 + .../radix/combobox-multiple-no-remove.tsx | 59 + apps/v4/examples/radix/combobox-multiple.tsx | 57 + .../v4/examples/radix/combobox-with-clear.tsx | 36 + .../radix/combobox-with-custom-items.tsx | 456 + apps/v4/examples/radix/combobox-with-form.tsx | 72 + .../combobox-with-groups-and-separator.tsx | 75 + .../examples/radix/combobox-with-groups.tsx | 73 + .../radix/combobox-with-other-inputs.tsx | 80 + .../examples/radix/comboxbox-input-addon.tsx | 80 + apps/v4/examples/radix/command-basic.tsx | 38 + apps/v4/examples/radix/command-many-items.tsx | 181 + .../v4/examples/radix/command-with-groups.tsx | 75 + .../examples/radix/command-with-shortcuts.tsx | 52 + apps/v4/examples/radix/context-menu-basic.tsx | 24 + .../examples/radix/context-menu-in-dialog.tsx | 87 + .../radix/context-menu-with-checkboxes.tsx | 46 + .../radix/context-menu-with-destructive.tsx | 42 + .../radix/context-menu-with-groups.tsx | 69 + .../radix/context-menu-with-icons.tsx | 47 + .../radix/context-menu-with-radio.tsx | 46 + .../radix/context-menu-with-shortcuts.tsx | 46 + .../radix/context-menu-with-sides.tsx | 62 + .../radix/context-menu-with-submenu.tsx | 52 + .../radix/data-picker-with-dropdowns.tsx | 56 + apps/v4/examples/radix/date-picker-simple.tsx | 38 + .../examples/radix/date-picker-with-range.tsx | 26 +- apps/v4/examples/radix/default-item-group.tsx | 32 + .../examples/radix/dialog-chat-settings.tsx | 396 + .../examples/radix/dialog-no-close-button.tsx | 35 + .../radix/dialog-scrollable-content.tsx | 43 + apps/v4/examples/radix/dialog-with-form.tsx | 50 + .../radix/dialog-with-sticky-footer.tsx | 50 + .../radix/drawer-scrollable-content.tsx | 49 + apps/v4/examples/radix/drawer-with-sides.tsx | 65 + .../v4/examples/radix/dropdown-menu-basic.tsx | 36 + .../examples/radix/dropdown-menu-complex.tsx | 290 + .../radix/dropdown-menu-in-dialog.tsx | 92 + .../radix/dropdown-menu-with-avatar.tsx | 86 + .../dropdown-menu-with-checkboxes-icons.tsx | 63 + .../radix/dropdown-menu-with-checkboxes.tsx | 56 + .../radix/dropdown-menu-with-destructive.tsx | 45 + .../radix/dropdown-menu-with-icons.tsx | 50 + .../radix/dropdown-menu-with-radio-icons.tsx | 48 + .../radix/dropdown-menu-with-radio.tsx | 47 + .../radix/dropdown-menu-with-shortcuts.tsx | 51 + .../radix/dropdown-menu-with-submenu.tsx | 50 + apps/v4/examples/radix/empty-basic.tsx | 36 + apps/v4/examples/radix/empty-in-card.tsx | 40 + apps/v4/examples/radix/empty-with-border.tsx | 42 + apps/v4/examples/radix/empty-with-icon.tsx | 33 + .../radix/empty-with-muted-background-alt.tsx | 42 + .../radix/empty-with-muted-background.tsx | 30 + apps/v4/examples/radix/file-upload-list.tsx | 68 + .../examples/radix/hover-card-in-dialog.tsx | 48 + apps/v4/examples/radix/hover-card-sides.tsx | 30 + apps/v4/examples/radix/input-basic.tsx | 5 + apps/v4/examples/radix/input-disabled.tsx | 15 +- apps/v4/examples/radix/input-fields.tsx | 80 + apps/v4/examples/radix/input-form.tsx | 64 + apps/v4/examples/radix/input-group-basic.tsx | 42 + .../v4/examples/radix/input-group-in-card.tsx | 78 + .../radix/input-group-textarea-examples.tsx | 155 + .../radix/input-group-with-addons.tsx | 132 + .../radix/input-group-with-buttons.tsx | 60 + .../examples/radix/input-group-with-kbd.tsx | 131 + .../radix/input-group-with-tooltip.tsx | 155 + apps/v4/examples/radix/input-invalid.tsx | 5 + .../examples/radix/input-otp-alphanumeric.tsx | 34 + apps/v4/examples/radix/input-otp-disabled.tsx | 28 + apps/v4/examples/radix/input-otp-fields.tsx | 135 + apps/v4/examples/radix/input-otp-form.tsx | 76 + .../examples/radix/input-otp-four-digits.tsx | 24 + apps/v4/examples/radix/input-otp-invalid.tsx | 45 + apps/v4/examples/radix/input-otp-pattern.tsx | 30 +- apps/v4/examples/radix/input-otp-simple.tsx | 28 + .../radix/input-otp-with-separator.tsx | 41 + apps/v4/examples/radix/input-types.tsx | 49 + apps/v4/examples/radix/input-with-button.tsx | 10 +- .../examples/radix/input-with-description.tsx | 18 + apps/v4/examples/radix/input-with-label.tsx | 16 +- .../radix/input-with-native-select.tsx | 19 + apps/v4/examples/radix/input-with-select.tsx | 26 + .../radix/item-default-extra-small.tsx | 95 + apps/v4/examples/radix/item-default-small.tsx | 112 + .../radix/item-default-with-image.tsx | 74 + apps/v4/examples/radix/item-default.tsx | 108 + .../examples/radix/item-footer-examples.tsx | 54 + .../radix/item-header-and-footer-examples.tsx | 66 + .../examples/radix/item-header-examples.tsx | 50 + apps/v4/examples/radix/item-link-default.tsx | 73 + apps/v4/examples/radix/item-link-muted.tsx | 73 + apps/v4/examples/radix/item-link-outline.tsx | 73 + .../examples/radix/item-muted-extra-small.tsx | 95 + apps/v4/examples/radix/item-muted-small.tsx | 112 + .../examples/radix/item-muted-with-image.tsx | 74 + apps/v4/examples/radix/item-muted.tsx | 108 + .../radix/item-outline-extra-small.tsx | 95 + apps/v4/examples/radix/item-outline-small.tsx | 112 + .../item-outline-with-image-extra-small.tsx | 66 + .../radix/item-outline-with-image-small.tsx | 74 + .../radix/item-outline-with-image.tsx | 74 + apps/v4/examples/radix/item-outline.tsx | 108 + .../examples/radix/item-separator-example.tsx | 56 + apps/v4/examples/radix/kbd-arrow-keys.tsx | 12 + apps/v4/examples/radix/kbd-basic.tsx | 11 + apps/v4/examples/radix/kbd-group-example.tsx | 11 + apps/v4/examples/radix/kbd-in-input-group.tsx | 17 + apps/v4/examples/radix/kbd-in-tooltip.tsx | 25 + apps/v4/examples/radix/kbd-modifier-keys.tsx | 10 + .../radix/kbd-with-icons-and-text.tsx | 17 + apps/v4/examples/radix/kbd-with-icons.tsx | 18 + apps/v4/examples/radix/kbd-with-samp.tsx | 9 + apps/v4/examples/radix/label-disabled.tsx | 12 + .../v4/examples/radix/label-with-checkbox.tsx | 12 + apps/v4/examples/radix/label-with-input.tsx | 12 + .../v4/examples/radix/label-with-textarea.tsx | 12 + apps/v4/examples/radix/menubar-basic.tsx | 56 + .../v4/examples/radix/menubar-destructive.tsx | 76 + apps/v4/examples/radix/menubar-format.tsx | 55 + apps/v4/examples/radix/menubar-in-dialog.tsx | 102 + apps/v4/examples/radix/menubar-insert.tsx | 71 + .../radix/menubar-with-checkboxes.tsx | 46 + apps/v4/examples/radix/menubar-with-icons.tsx | 60 + apps/v4/examples/radix/menubar-with-radio.tsx | 49 + .../examples/radix/menubar-with-shortcuts.tsx | 58 + .../examples/radix/menubar-with-submenu.tsx | 71 + apps/v4/examples/radix/muted-item-group.tsx | 49 + .../v4/examples/radix/native-select-basic.tsx | 19 + .../examples/radix/native-select-disabled.tsx | 11 +- .../examples/radix/native-select-fields.tsx | 101 + .../examples/radix/native-select-invalid.tsx | 11 +- .../v4/examples/radix/native-select-sizes.tsx | 23 + .../radix/native-select-with-field.tsx | 21 + .../radix/native-select-with-groups.tsx | 23 + .../radix/navigation-menu-with-viewport.tsx | 115 + .../navigation-menu-without-viewport.tsx | 147 + apps/v4/examples/radix/outline-item-group.tsx | 43 + apps/v4/examples/radix/pagination-basic.tsx | 38 + .../examples/radix/pagination-icons-only.tsx | 49 + apps/v4/examples/radix/pagination-simple.tsx | 32 + apps/v4/examples/radix/popover-alignments.tsx | 43 + apps/v4/examples/radix/popover-basic.tsx | 27 + apps/v4/examples/radix/popover-in-dialog.tsx | 51 + apps/v4/examples/radix/popover-with-form.tsx | 43 + .../v4/examples/radix/progress-controlled.tsx | 22 + apps/v4/examples/radix/progress-values.tsx | 13 + .../v4/examples/radix/progress-with-label.tsx | 14 + apps/v4/examples/radix/radio-fields.tsx | 149 + apps/v4/examples/radix/radio-group-basic.tsx | 27 + .../examples/radix/radio-group-disabled.tsx | 27 + apps/v4/examples/radix/radio-group-grid.tsx | 33 + .../v4/examples/radix/radio-group-invalid.tsx | 39 + .../radix/radio-group-with-descriptions.tsx | 41 + .../radix/radio-group-with-field-set.tsx | 37 + .../examples/radix/resizable-controlled.tsx | 34 + .../examples/radix/resizable-horizontal.tsx | 26 + apps/v4/examples/radix/resizable-nested.tsx | 33 + apps/v4/examples/radix/resizable-vertical.tsx | 4 +- .../examples/radix/resizable-with-handle.tsx | 26 + .../examples/radix/scroll-area-horizontal.tsx | 46 + .../examples/radix/scroll-area-vertical.tsx | 23 + apps/v4/examples/radix/select-basic.tsx | 29 + apps/v4/examples/radix/select-disabled.tsx | 29 + apps/v4/examples/radix/select-fields.tsx | 95 + apps/v4/examples/radix/select-in-dialog.tsx | 49 + apps/v4/examples/radix/select-inline.tsx | 39 + apps/v4/examples/radix/select-invalid.tsx | 48 + .../v4/examples/radix/select-item-aligned.tsx | 29 + apps/v4/examples/radix/select-large-list.tsx | 28 + apps/v4/examples/radix/select-plan.tsx | 70 + apps/v4/examples/radix/select-sizes.tsx | 39 + apps/v4/examples/radix/select-with-button.tsx | 48 + apps/v4/examples/radix/select-with-field.tsx | 34 + apps/v4/examples/radix/select-with-groups.tsx | 35 + apps/v4/examples/radix/select-with-icons.tsx | 72 + .../examples/radix/separator-horizontal.tsx | 19 + apps/v4/examples/radix/separator-in-list.tsx | 22 + .../radix/separator-vertical-menu.tsx | 26 + apps/v4/examples/radix/separator-vertical.tsx | 13 + .../examples/radix/sheet-no-close-button.tsx | 28 + apps/v4/examples/radix/sheet-with-form.tsx | 49 + apps/v4/examples/radix/sheet-with-sides.tsx | 64 + apps/v4/examples/radix/skeleton-avatar.tsx | 13 + apps/v4/examples/radix/skeleton-card.tsx | 17 +- apps/v4/examples/radix/skeleton-form.tsx | 17 + apps/v4/examples/radix/skeleton-table.tsx | 23 + apps/v4/examples/radix/skeleton-text.tsx | 11 + apps/v4/examples/radix/slider-basic.tsx | 5 + apps/v4/examples/radix/slider-controlled.tsx | 28 + apps/v4/examples/radix/slider-disabled.tsx | 5 + apps/v4/examples/radix/slider-fields.tsx | 119 + apps/v4/examples/radix/slider-multiple.tsx | 5 + apps/v4/examples/radix/slider-range.tsx | 5 + apps/v4/examples/radix/slider-vertical.tsx | 22 + apps/v4/examples/radix/sonner-basic.tsx | 14 + .../radix/sonner-with-description.tsx | 18 + apps/v4/examples/radix/spinner-basic.tsx | 3 +- apps/v4/examples/radix/spinner-in-badges.tsx | 25 + apps/v4/examples/radix/spinner-in-buttons.tsx | 22 + apps/v4/examples/radix/spinner-in-empty.tsx | 41 + .../examples/radix/spinner-in-input-group.tsx | 21 + apps/v4/examples/radix/switch-basic.tsx | 11 + apps/v4/examples/radix/switch-disabled.tsx | 17 + apps/v4/examples/radix/switch-fields.tsx | 77 + apps/v4/examples/radix/switch-sizes.tsx | 17 + .../radix/switch-with-description.tsx | 25 + apps/v4/examples/radix/switch-with-label.tsx | 11 + apps/v4/examples/radix/table-basic.tsx | 80 + apps/v4/examples/radix/table-simple.tsx | 39 + apps/v4/examples/radix/table-with-actions.tsx | 99 + apps/v4/examples/radix/table-with-badges.tsx | 63 + apps/v4/examples/radix/table-with-footer.tsx | 87 + apps/v4/examples/radix/table-with-input.tsx | 61 + apps/v4/examples/radix/table-with-select.tsx | 89 + apps/v4/examples/radix/tabs-basic.tsx | 12 + apps/v4/examples/radix/tabs-disabled.tsx | 14 + apps/v4/examples/radix/tabs-icon-only.tsx | 20 + apps/v4/examples/radix/tabs-line-disabled.tsx | 15 + .../examples/radix/tabs-line-with-content.tsx | 29 + apps/v4/examples/radix/tabs-line.tsx | 13 + apps/v4/examples/radix/tabs-multiple.tsx | 14 + .../radix/tabs-variants-comparison.tsx | 20 + apps/v4/examples/radix/tabs-vertical.tsx | 31 + apps/v4/examples/radix/tabs-with-content.tsx | 29 + apps/v4/examples/radix/tabs-with-dropdown.tsx | 55 + apps/v4/examples/radix/tabs-with-icons.tsx | 19 + .../radix/tabs-with-input-and-button.tsx | 36 + apps/v4/examples/radix/textarea-basic.tsx | 5 + apps/v4/examples/radix/textarea-disabled.tsx | 14 +- apps/v4/examples/radix/textarea-fields.tsx | 67 + apps/v4/examples/radix/textarea-invalid.tsx | 5 + .../radix/textarea-with-description.tsx | 18 + .../v4/examples/radix/textarea-with-label.tsx | 16 +- apps/v4/examples/radix/toggle-basic.tsx | 18 + apps/v4/examples/radix/toggle-disabled.tsx | 12 +- apps/v4/examples/radix/toggle-group-basic.tsx | 18 + .../radix/toggle-group-date-range.tsx | 26 + .../v4/examples/radix/toggle-group-filter.tsx | 20 + .../radix/toggle-group-outline-with-icons.tsx | 18 + .../examples/radix/toggle-group-outline.tsx | 14 +- apps/v4/examples/radix/toggle-group-sizes.tsx | 36 + apps/v4/examples/radix/toggle-group-sort.tsx | 26 + .../examples/radix/toggle-group-spacing.tsx | 39 +- ...ggle-group-vertical-outline-with-icons.tsx | 23 + .../radix/toggle-group-vertical-outline.tsx | 26 + .../toggle-group-vertical-with-spacing.tsx | 27 + .../examples/radix/toggle-group-vertical.tsx | 18 + .../radix/toggle-group-with-icons.tsx | 33 + .../toggle-group-with-input-and-select.tsx | 38 + apps/v4/examples/radix/toggle-outline.tsx | 15 +- apps/v4/examples/radix/toggle-sizes.tsx | 17 + .../radix/toggle-with-button-icon-text.tsx | 44 + .../radix/toggle-with-button-icon.tsx | 38 + .../radix/toggle-with-button-text.tsx | 33 + apps/v4/examples/radix/toggle-with-icon.tsx | 16 + apps/v4/examples/radix/tooltip-basic.tsx | 21 + apps/v4/examples/radix/tooltip-disabled.tsx | 23 + apps/v4/examples/radix/tooltip-formatted.tsx | 24 + .../examples/radix/tooltip-long-content.tsx | 22 + apps/v4/examples/radix/tooltip-on-link.tsx | 24 + apps/v4/examples/radix/tooltip-sides.tsx | 25 + apps/v4/examples/radix/tooltip-with-icon.tsx | 23 + .../examples/radix/tooltip-with-keyboard.tsx | 25 + .../bases/base/components/example.tsx | 10 +- .../bases/radix/components/example.tsx | 10 +- apps/v4/styles/globals.css | 2 +- 743 files changed, 45514 insertions(+), 376 deletions(-) create mode 100644 apps/v4/examples/base/accordion-basic.tsx create mode 100644 apps/v4/examples/base/accordion-in-card.tsx create mode 100644 apps/v4/examples/base/accordion-with-borders.tsx create mode 100644 apps/v4/examples/base/accordion-with-disabled.tsx create mode 100644 apps/v4/examples/base/alert-dialog-basic.tsx create mode 100644 apps/v4/examples/base/alert-dialog-destructive.tsx create mode 100644 apps/v4/examples/base/alert-dialog-in-dialog.tsx create mode 100644 apps/v4/examples/base/alert-dialog-small-with-media.tsx create mode 100644 apps/v4/examples/base/alert-dialog-small.tsx create mode 100644 apps/v4/examples/base/alert-dialog-with-media.tsx create mode 100644 apps/v4/examples/base/alert-example1.tsx create mode 100644 apps/v4/examples/base/alert-example2.tsx create mode 100644 apps/v4/examples/base/alert-example3.tsx create mode 100644 apps/v4/examples/base/alert-example4.tsx create mode 100644 apps/v4/examples/base/aspect-ratio16x9.tsx create mode 100644 apps/v4/examples/base/aspect-ratio1x1.tsx create mode 100644 apps/v4/examples/base/aspect-ratio21x9.tsx create mode 100644 apps/v4/examples/base/aspect-ratio9x16.tsx create mode 100644 apps/v4/examples/base/avatar-group-example.tsx create mode 100644 apps/v4/examples/base/avatar-group-with-count.tsx create mode 100644 apps/v4/examples/base/avatar-group-with-icon-count.tsx create mode 100644 apps/v4/examples/base/avatar-in-empty.tsx create mode 100644 apps/v4/examples/base/avatar-sizes.tsx create mode 100644 apps/v4/examples/base/avatar-with-badge-icon.tsx create mode 100644 apps/v4/examples/base/avatar-with-badge.tsx create mode 100644 apps/v4/examples/base/badge-as-link.tsx create mode 100644 apps/v4/examples/base/badge-custom-colors.tsx create mode 100644 apps/v4/examples/base/badge-long-text.tsx create mode 100644 apps/v4/examples/base/badge-variants.tsx create mode 100644 apps/v4/examples/base/badge-with-icon-left.tsx create mode 100644 apps/v4/examples/base/badge-with-icon-right.tsx create mode 100644 apps/v4/examples/base/badge-with-spinner.tsx create mode 100644 apps/v4/examples/base/breadcrumb-basic.tsx create mode 100644 apps/v4/examples/base/breadcrumb-with-dropdown.tsx create mode 100644 apps/v4/examples/base/breadcrumb-with-link.tsx create mode 100644 apps/v4/examples/base/button-examples.tsx create mode 100644 apps/v4/examples/base/button-group-basic.tsx create mode 100644 apps/v4/examples/base/button-group-navigation.tsx create mode 100644 apps/v4/examples/base/button-group-pagination-split.tsx create mode 100644 apps/v4/examples/base/button-group-pagination.tsx create mode 100644 apps/v4/examples/base/button-group-text-alignment.tsx create mode 100644 apps/v4/examples/base/button-group-vertical-nested.tsx create mode 100644 apps/v4/examples/base/button-group-vertical.tsx create mode 100644 apps/v4/examples/base/button-group-with-dropdown.tsx create mode 100644 apps/v4/examples/base/button-group-with-fields.tsx create mode 100644 apps/v4/examples/base/button-group-with-icons.tsx create mode 100644 apps/v4/examples/base/button-group-with-input-group.tsx create mode 100644 apps/v4/examples/base/button-group-with-input.tsx create mode 100644 apps/v4/examples/base/button-group-with-like.tsx create mode 100644 apps/v4/examples/base/button-group-with-select-and-input.tsx create mode 100644 apps/v4/examples/base/button-group-with-select.tsx create mode 100644 apps/v4/examples/base/button-group-with-text.tsx create mode 100644 apps/v4/examples/base/button-icon-left.tsx create mode 100644 apps/v4/examples/base/button-icon-only.tsx create mode 100644 apps/v4/examples/base/button-icon-right.tsx create mode 100644 apps/v4/examples/base/button-invalid-states.tsx create mode 100644 apps/v4/examples/base/button-variants-and-sizes.tsx create mode 100644 apps/v4/examples/base/calendar-booked-dates.tsx create mode 100644 apps/v4/examples/base/calendar-custom-days.tsx create mode 100644 apps/v4/examples/base/calendar-multiple.tsx create mode 100644 apps/v4/examples/base/calendar-range-multiple-months.tsx create mode 100644 apps/v4/examples/base/calendar-range.tsx create mode 100644 apps/v4/examples/base/calendar-single.tsx create mode 100644 apps/v4/examples/base/calendar-week-numbers.tsx create mode 100644 apps/v4/examples/base/calendar-with-presets.tsx create mode 100644 apps/v4/examples/base/calendar-with-time.tsx create mode 100644 apps/v4/examples/base/card-default.tsx create mode 100644 apps/v4/examples/base/card-footer-with-border-small.tsx create mode 100644 apps/v4/examples/base/card-footer-with-border.tsx create mode 100644 apps/v4/examples/base/card-header-with-border-small.tsx create mode 100644 apps/v4/examples/base/card-header-with-border.tsx create mode 100644 apps/v4/examples/base/card-login.tsx create mode 100644 apps/v4/examples/base/card-meeting-notes.tsx create mode 100644 apps/v4/examples/base/card-small.tsx create mode 100644 apps/v4/examples/base/card-with-image-small.tsx create mode 100644 apps/v4/examples/base/card-with-image.tsx create mode 100644 apps/v4/examples/base/carousel-basic.tsx create mode 100644 apps/v4/examples/base/carousel-multiple.tsx create mode 100644 apps/v4/examples/base/carousel-with-gap.tsx create mode 100644 apps/v4/examples/base/chart-area-example.tsx create mode 100644 apps/v4/examples/base/chart-bar-example.tsx create mode 100644 apps/v4/examples/base/chart-line-example.tsx create mode 100644 apps/v4/examples/base/chart-pie-example.tsx create mode 100644 apps/v4/examples/base/chart-radar-example.tsx create mode 100644 apps/v4/examples/base/chart-radial-example.tsx create mode 100644 apps/v4/examples/base/checkbox-basic.tsx create mode 100644 apps/v4/examples/base/checkbox-fields.tsx create mode 100644 apps/v4/examples/base/checkbox-group.tsx create mode 100644 apps/v4/examples/base/checkbox-in-table.tsx create mode 100644 apps/v4/examples/base/checkbox-invalid.tsx create mode 100644 apps/v4/examples/base/checkbox-with-description.tsx create mode 100644 apps/v4/examples/base/checkbox-with-title.tsx create mode 100644 apps/v4/examples/base/collapsible-file-tree.tsx create mode 100644 apps/v4/examples/base/collapsible-settings.tsx create mode 100644 apps/v4/examples/base/combobox-auto-highlight.tsx create mode 100644 apps/v4/examples/base/combobox-basic.tsx create mode 100644 apps/v4/examples/base/combobox-disabled.tsx create mode 100644 apps/v4/examples/base/combobox-in-dialog.tsx create mode 100644 apps/v4/examples/base/combobox-in-popup.tsx create mode 100644 apps/v4/examples/base/combobox-invalid.tsx create mode 100644 apps/v4/examples/base/combobox-large-list.tsx create mode 100644 apps/v4/examples/base/combobox-multiple-disabled.tsx create mode 100644 apps/v4/examples/base/combobox-multiple-invalid.tsx create mode 100644 apps/v4/examples/base/combobox-multiple-no-remove.tsx create mode 100644 apps/v4/examples/base/combobox-multiple.tsx create mode 100644 apps/v4/examples/base/combobox-with-clear.tsx create mode 100644 apps/v4/examples/base/combobox-with-custom-items.tsx create mode 100644 apps/v4/examples/base/combobox-with-form.tsx create mode 100644 apps/v4/examples/base/combobox-with-groups-and-separator.tsx create mode 100644 apps/v4/examples/base/combobox-with-groups.tsx create mode 100644 apps/v4/examples/base/combobox-with-other-inputs.tsx create mode 100644 apps/v4/examples/base/comboxbox-input-addon.tsx create mode 100644 apps/v4/examples/base/command-basic.tsx create mode 100644 apps/v4/examples/base/command-many-items.tsx create mode 100644 apps/v4/examples/base/command-with-groups.tsx create mode 100644 apps/v4/examples/base/command-with-shortcuts.tsx create mode 100644 apps/v4/examples/base/context-menu-basic.tsx create mode 100644 apps/v4/examples/base/context-menu-in-dialog.tsx create mode 100644 apps/v4/examples/base/context-menu-with-checkboxes.tsx create mode 100644 apps/v4/examples/base/context-menu-with-destructive.tsx create mode 100644 apps/v4/examples/base/context-menu-with-groups.tsx create mode 100644 apps/v4/examples/base/context-menu-with-icons.tsx create mode 100644 apps/v4/examples/base/context-menu-with-radio.tsx create mode 100644 apps/v4/examples/base/context-menu-with-shortcuts.tsx create mode 100644 apps/v4/examples/base/context-menu-with-sides.tsx create mode 100644 apps/v4/examples/base/context-menu-with-submenu.tsx create mode 100644 apps/v4/examples/base/data-picker-with-dropdowns.tsx create mode 100644 apps/v4/examples/base/date-picker-simple.tsx create mode 100644 apps/v4/examples/base/default-item-group.tsx create mode 100644 apps/v4/examples/base/dialog-chat-settings.tsx create mode 100644 apps/v4/examples/base/dialog-no-close-button.tsx create mode 100644 apps/v4/examples/base/dialog-scrollable-content.tsx create mode 100644 apps/v4/examples/base/dialog-with-form.tsx create mode 100644 apps/v4/examples/base/dialog-with-sticky-footer.tsx create mode 100644 apps/v4/examples/base/drawer-scrollable-content.tsx create mode 100644 apps/v4/examples/base/drawer-with-sides.tsx create mode 100644 apps/v4/examples/base/dropdown-menu-basic.tsx create mode 100644 apps/v4/examples/base/dropdown-menu-complex.tsx create mode 100644 apps/v4/examples/base/dropdown-menu-in-dialog.tsx create mode 100644 apps/v4/examples/base/dropdown-menu-with-avatar.tsx create mode 100644 apps/v4/examples/base/dropdown-menu-with-checkboxes-icons.tsx create mode 100644 apps/v4/examples/base/dropdown-menu-with-checkboxes.tsx create mode 100644 apps/v4/examples/base/dropdown-menu-with-destructive.tsx create mode 100644 apps/v4/examples/base/dropdown-menu-with-icons.tsx create mode 100644 apps/v4/examples/base/dropdown-menu-with-radio-icons.tsx create mode 100644 apps/v4/examples/base/dropdown-menu-with-radio.tsx create mode 100644 apps/v4/examples/base/dropdown-menu-with-shortcuts.tsx create mode 100644 apps/v4/examples/base/dropdown-menu-with-submenu.tsx create mode 100644 apps/v4/examples/base/empty-basic.tsx create mode 100644 apps/v4/examples/base/empty-in-card.tsx create mode 100644 apps/v4/examples/base/empty-with-border.tsx create mode 100644 apps/v4/examples/base/empty-with-icon.tsx create mode 100644 apps/v4/examples/base/empty-with-muted-background-alt.tsx create mode 100644 apps/v4/examples/base/empty-with-muted-background.tsx create mode 100644 apps/v4/examples/base/file-upload-list.tsx create mode 100644 apps/v4/examples/base/hover-card-in-dialog.tsx create mode 100644 apps/v4/examples/base/hover-card-sides.tsx create mode 100644 apps/v4/examples/base/input-basic.tsx create mode 100644 apps/v4/examples/base/input-fields.tsx create mode 100644 apps/v4/examples/base/input-form.tsx create mode 100644 apps/v4/examples/base/input-group-basic.tsx create mode 100644 apps/v4/examples/base/input-group-in-card.tsx create mode 100644 apps/v4/examples/base/input-group-textarea-examples.tsx create mode 100644 apps/v4/examples/base/input-group-with-addons.tsx create mode 100644 apps/v4/examples/base/input-group-with-buttons.tsx create mode 100644 apps/v4/examples/base/input-group-with-kbd.tsx create mode 100644 apps/v4/examples/base/input-group-with-tooltip.tsx create mode 100644 apps/v4/examples/base/input-invalid.tsx create mode 100644 apps/v4/examples/base/input-otp-alphanumeric.tsx create mode 100644 apps/v4/examples/base/input-otp-disabled.tsx create mode 100644 apps/v4/examples/base/input-otp-fields.tsx create mode 100644 apps/v4/examples/base/input-otp-form.tsx create mode 100644 apps/v4/examples/base/input-otp-four-digits.tsx create mode 100644 apps/v4/examples/base/input-otp-invalid.tsx create mode 100644 apps/v4/examples/base/input-otp-simple.tsx create mode 100644 apps/v4/examples/base/input-otp-with-separator.tsx create mode 100644 apps/v4/examples/base/input-types.tsx create mode 100644 apps/v4/examples/base/input-with-description.tsx create mode 100644 apps/v4/examples/base/input-with-native-select.tsx create mode 100644 apps/v4/examples/base/input-with-select.tsx create mode 100644 apps/v4/examples/base/item-default-extra-small.tsx create mode 100644 apps/v4/examples/base/item-default-small.tsx create mode 100644 apps/v4/examples/base/item-default-with-image.tsx create mode 100644 apps/v4/examples/base/item-default.tsx create mode 100644 apps/v4/examples/base/item-footer-examples.tsx create mode 100644 apps/v4/examples/base/item-header-and-footer-examples.tsx create mode 100644 apps/v4/examples/base/item-header-examples.tsx create mode 100644 apps/v4/examples/base/item-link-default.tsx create mode 100644 apps/v4/examples/base/item-link-muted.tsx create mode 100644 apps/v4/examples/base/item-link-outline.tsx create mode 100644 apps/v4/examples/base/item-muted-extra-small.tsx create mode 100644 apps/v4/examples/base/item-muted-small.tsx create mode 100644 apps/v4/examples/base/item-muted-with-image.tsx create mode 100644 apps/v4/examples/base/item-muted.tsx create mode 100644 apps/v4/examples/base/item-outline-extra-small.tsx create mode 100644 apps/v4/examples/base/item-outline-small.tsx create mode 100644 apps/v4/examples/base/item-outline-with-image-extra-small.tsx create mode 100644 apps/v4/examples/base/item-outline-with-image-small.tsx create mode 100644 apps/v4/examples/base/item-outline-with-image.tsx create mode 100644 apps/v4/examples/base/item-outline.tsx create mode 100644 apps/v4/examples/base/item-separator-example.tsx create mode 100644 apps/v4/examples/base/kbd-arrow-keys.tsx create mode 100644 apps/v4/examples/base/kbd-basic.tsx create mode 100644 apps/v4/examples/base/kbd-group-example.tsx create mode 100644 apps/v4/examples/base/kbd-in-input-group.tsx create mode 100644 apps/v4/examples/base/kbd-in-tooltip.tsx create mode 100644 apps/v4/examples/base/kbd-modifier-keys.tsx create mode 100644 apps/v4/examples/base/kbd-with-icons-and-text.tsx create mode 100644 apps/v4/examples/base/kbd-with-icons.tsx create mode 100644 apps/v4/examples/base/kbd-with-samp.tsx create mode 100644 apps/v4/examples/base/label-disabled.tsx create mode 100644 apps/v4/examples/base/label-with-checkbox.tsx create mode 100644 apps/v4/examples/base/label-with-input.tsx create mode 100644 apps/v4/examples/base/label-with-textarea.tsx create mode 100644 apps/v4/examples/base/menubar-basic.tsx create mode 100644 apps/v4/examples/base/menubar-destructive.tsx create mode 100644 apps/v4/examples/base/menubar-format.tsx create mode 100644 apps/v4/examples/base/menubar-in-dialog.tsx create mode 100644 apps/v4/examples/base/menubar-insert.tsx create mode 100644 apps/v4/examples/base/menubar-with-checkboxes.tsx create mode 100644 apps/v4/examples/base/menubar-with-icons.tsx create mode 100644 apps/v4/examples/base/menubar-with-radio.tsx create mode 100644 apps/v4/examples/base/menubar-with-shortcuts.tsx create mode 100644 apps/v4/examples/base/menubar-with-submenu.tsx create mode 100644 apps/v4/examples/base/muted-item-group.tsx create mode 100644 apps/v4/examples/base/native-select-basic.tsx create mode 100644 apps/v4/examples/base/native-select-fields.tsx create mode 100644 apps/v4/examples/base/native-select-sizes.tsx create mode 100644 apps/v4/examples/base/native-select-with-field.tsx create mode 100644 apps/v4/examples/base/native-select-with-groups.tsx create mode 100644 apps/v4/examples/base/navigation-menu-basic.tsx create mode 100644 apps/v4/examples/base/outline-item-group.tsx create mode 100644 apps/v4/examples/base/pagination-basic.tsx create mode 100644 apps/v4/examples/base/pagination-icons-only.tsx create mode 100644 apps/v4/examples/base/pagination-simple.tsx create mode 100644 apps/v4/examples/base/popover-alignments.tsx create mode 100644 apps/v4/examples/base/popover-basic.tsx create mode 100644 apps/v4/examples/base/popover-in-dialog.tsx create mode 100644 apps/v4/examples/base/popover-with-form.tsx create mode 100644 apps/v4/examples/base/progress-controlled.tsx create mode 100644 apps/v4/examples/base/progress-values.tsx create mode 100644 apps/v4/examples/base/progress-with-label.tsx create mode 100644 apps/v4/examples/base/radio-fields.tsx create mode 100644 apps/v4/examples/base/radio-group-basic.tsx create mode 100644 apps/v4/examples/base/radio-group-disabled.tsx create mode 100644 apps/v4/examples/base/radio-group-grid.tsx create mode 100644 apps/v4/examples/base/radio-group-invalid.tsx create mode 100644 apps/v4/examples/base/radio-group-with-descriptions.tsx create mode 100644 apps/v4/examples/base/radio-group-with-field-set.tsx create mode 100644 apps/v4/examples/base/resizable-controlled.tsx create mode 100644 apps/v4/examples/base/resizable-horizontal.tsx create mode 100644 apps/v4/examples/base/resizable-nested.tsx create mode 100644 apps/v4/examples/base/resizable-with-handle.tsx create mode 100644 apps/v4/examples/base/scroll-area-horizontal.tsx create mode 100644 apps/v4/examples/base/scroll-area-vertical.tsx create mode 100644 apps/v4/examples/base/select-basic.tsx create mode 100644 apps/v4/examples/base/select-disabled.tsx create mode 100644 apps/v4/examples/base/select-fields.tsx create mode 100644 apps/v4/examples/base/select-in-dialog.tsx create mode 100644 apps/v4/examples/base/select-inline.tsx create mode 100644 apps/v4/examples/base/select-invalid.tsx create mode 100644 apps/v4/examples/base/select-item-aligned.tsx create mode 100644 apps/v4/examples/base/select-large-list.tsx create mode 100644 apps/v4/examples/base/select-multiple.tsx create mode 100644 apps/v4/examples/base/select-plan.tsx create mode 100644 apps/v4/examples/base/select-sizes.tsx create mode 100644 apps/v4/examples/base/select-with-button.tsx create mode 100644 apps/v4/examples/base/select-with-field.tsx create mode 100644 apps/v4/examples/base/select-with-groups.tsx create mode 100644 apps/v4/examples/base/select-with-icons.tsx create mode 100644 apps/v4/examples/base/separator-horizontal.tsx create mode 100644 apps/v4/examples/base/separator-in-list.tsx create mode 100644 apps/v4/examples/base/separator-vertical-menu.tsx create mode 100644 apps/v4/examples/base/separator-vertical.tsx create mode 100644 apps/v4/examples/base/sheet-no-close-button.tsx create mode 100644 apps/v4/examples/base/sheet-with-form.tsx create mode 100644 apps/v4/examples/base/sheet-with-sides.tsx create mode 100644 apps/v4/examples/base/skeleton-avatar.tsx create mode 100644 apps/v4/examples/base/skeleton-form.tsx create mode 100644 apps/v4/examples/base/skeleton-table.tsx create mode 100644 apps/v4/examples/base/skeleton-text.tsx create mode 100644 apps/v4/examples/base/slider-basic.tsx create mode 100644 apps/v4/examples/base/slider-controlled.tsx create mode 100644 apps/v4/examples/base/slider-disabled.tsx create mode 100644 apps/v4/examples/base/slider-fields.tsx create mode 100644 apps/v4/examples/base/slider-multiple.tsx create mode 100644 apps/v4/examples/base/slider-range.tsx create mode 100644 apps/v4/examples/base/slider-vertical.tsx create mode 100644 apps/v4/examples/base/sonner-basic.tsx create mode 100644 apps/v4/examples/base/sonner-with-description.tsx create mode 100644 apps/v4/examples/base/spinner-in-badges.tsx create mode 100644 apps/v4/examples/base/spinner-in-buttons.tsx create mode 100644 apps/v4/examples/base/spinner-in-empty.tsx create mode 100644 apps/v4/examples/base/spinner-in-input-group.tsx create mode 100644 apps/v4/examples/base/switch-basic.tsx create mode 100644 apps/v4/examples/base/switch-disabled.tsx create mode 100644 apps/v4/examples/base/switch-fields.tsx create mode 100644 apps/v4/examples/base/switch-sizes.tsx create mode 100644 apps/v4/examples/base/switch-with-description.tsx create mode 100644 apps/v4/examples/base/switch-with-label.tsx create mode 100644 apps/v4/examples/base/table-basic.tsx create mode 100644 apps/v4/examples/base/table-simple.tsx create mode 100644 apps/v4/examples/base/table-with-actions.tsx create mode 100644 apps/v4/examples/base/table-with-badges.tsx create mode 100644 apps/v4/examples/base/table-with-footer.tsx create mode 100644 apps/v4/examples/base/table-with-input.tsx create mode 100644 apps/v4/examples/base/table-with-select.tsx create mode 100644 apps/v4/examples/base/tabs-basic.tsx create mode 100644 apps/v4/examples/base/tabs-disabled.tsx create mode 100644 apps/v4/examples/base/tabs-icon-only.tsx create mode 100644 apps/v4/examples/base/tabs-line-disabled.tsx create mode 100644 apps/v4/examples/base/tabs-line-with-content.tsx create mode 100644 apps/v4/examples/base/tabs-line.tsx create mode 100644 apps/v4/examples/base/tabs-multiple.tsx create mode 100644 apps/v4/examples/base/tabs-variants-comparison.tsx create mode 100644 apps/v4/examples/base/tabs-vertical.tsx create mode 100644 apps/v4/examples/base/tabs-with-content.tsx create mode 100644 apps/v4/examples/base/tabs-with-dropdown.tsx create mode 100644 apps/v4/examples/base/tabs-with-icons.tsx create mode 100644 apps/v4/examples/base/tabs-with-input-and-button.tsx create mode 100644 apps/v4/examples/base/textarea-basic.tsx create mode 100644 apps/v4/examples/base/textarea-fields.tsx create mode 100644 apps/v4/examples/base/textarea-invalid.tsx create mode 100644 apps/v4/examples/base/textarea-with-description.tsx create mode 100644 apps/v4/examples/base/toggle-basic.tsx create mode 100644 apps/v4/examples/base/toggle-group-basic.tsx create mode 100644 apps/v4/examples/base/toggle-group-date-range.tsx create mode 100644 apps/v4/examples/base/toggle-group-filter.tsx create mode 100644 apps/v4/examples/base/toggle-group-outline-with-icons.tsx create mode 100644 apps/v4/examples/base/toggle-group-sizes.tsx create mode 100644 apps/v4/examples/base/toggle-group-sort.tsx create mode 100644 apps/v4/examples/base/toggle-group-vertical-outline-with-icons.tsx create mode 100644 apps/v4/examples/base/toggle-group-vertical-outline.tsx create mode 100644 apps/v4/examples/base/toggle-group-vertical-with-spacing.tsx create mode 100644 apps/v4/examples/base/toggle-group-vertical.tsx create mode 100644 apps/v4/examples/base/toggle-group-with-icons.tsx create mode 100644 apps/v4/examples/base/toggle-group-with-input-and-select.tsx create mode 100644 apps/v4/examples/base/toggle-sizes.tsx create mode 100644 apps/v4/examples/base/toggle-with-button-icon-text.tsx create mode 100644 apps/v4/examples/base/toggle-with-button-icon.tsx create mode 100644 apps/v4/examples/base/toggle-with-button-text.tsx create mode 100644 apps/v4/examples/base/toggle-with-icon.tsx create mode 100644 apps/v4/examples/base/tooltip-basic.tsx create mode 100644 apps/v4/examples/base/tooltip-disabled.tsx create mode 100644 apps/v4/examples/base/tooltip-formatted.tsx create mode 100644 apps/v4/examples/base/tooltip-long-content.tsx create mode 100644 apps/v4/examples/base/tooltip-on-link.tsx create mode 100644 apps/v4/examples/base/tooltip-sides.tsx create mode 100644 apps/v4/examples/base/tooltip-with-icon.tsx create mode 100644 apps/v4/examples/base/tooltip-with-keyboard.tsx create mode 100644 apps/v4/examples/radix/accordion-basic.tsx create mode 100644 apps/v4/examples/radix/accordion-in-card.tsx create mode 100644 apps/v4/examples/radix/accordion-with-borders.tsx create mode 100644 apps/v4/examples/radix/accordion-with-disabled.tsx create mode 100644 apps/v4/examples/radix/alert-dialog-basic.tsx create mode 100644 apps/v4/examples/radix/alert-dialog-destructive.tsx create mode 100644 apps/v4/examples/radix/alert-dialog-in-dialog.tsx create mode 100644 apps/v4/examples/radix/alert-dialog-small-with-media.tsx create mode 100644 apps/v4/examples/radix/alert-dialog-small.tsx create mode 100644 apps/v4/examples/radix/alert-dialog-with-media.tsx create mode 100644 apps/v4/examples/radix/alert-example1.tsx create mode 100644 apps/v4/examples/radix/alert-example2.tsx create mode 100644 apps/v4/examples/radix/alert-example3.tsx create mode 100644 apps/v4/examples/radix/alert-example4.tsx create mode 100644 apps/v4/examples/radix/aspect-ratio16x9.tsx create mode 100644 apps/v4/examples/radix/aspect-ratio1x1.tsx create mode 100644 apps/v4/examples/radix/aspect-ratio21x9.tsx create mode 100644 apps/v4/examples/radix/aspect-ratio9x16.tsx create mode 100644 apps/v4/examples/radix/avatar-group-example.tsx create mode 100644 apps/v4/examples/radix/avatar-group-with-count.tsx create mode 100644 apps/v4/examples/radix/avatar-group-with-icon-count.tsx create mode 100644 apps/v4/examples/radix/avatar-in-empty.tsx create mode 100644 apps/v4/examples/radix/avatar-sizes.tsx create mode 100644 apps/v4/examples/radix/avatar-with-badge-icon.tsx create mode 100644 apps/v4/examples/radix/avatar-with-badge.tsx create mode 100644 apps/v4/examples/radix/badge-as-link.tsx create mode 100644 apps/v4/examples/radix/badge-custom-colors.tsx create mode 100644 apps/v4/examples/radix/badge-long-text.tsx create mode 100644 apps/v4/examples/radix/badge-variants.tsx create mode 100644 apps/v4/examples/radix/badge-with-icon-left.tsx create mode 100644 apps/v4/examples/radix/badge-with-icon-right.tsx create mode 100644 apps/v4/examples/radix/badge-with-spinner.tsx create mode 100644 apps/v4/examples/radix/breadcrumb-basic.tsx create mode 100644 apps/v4/examples/radix/breadcrumb-with-dropdown.tsx create mode 100644 apps/v4/examples/radix/breadcrumb-with-link.tsx create mode 100644 apps/v4/examples/radix/button-examples.tsx create mode 100644 apps/v4/examples/radix/button-group-basic.tsx create mode 100644 apps/v4/examples/radix/button-group-navigation.tsx create mode 100644 apps/v4/examples/radix/button-group-pagination-split.tsx create mode 100644 apps/v4/examples/radix/button-group-pagination.tsx create mode 100644 apps/v4/examples/radix/button-group-text-alignment.tsx create mode 100644 apps/v4/examples/radix/button-group-vertical-nested.tsx create mode 100644 apps/v4/examples/radix/button-group-vertical.tsx create mode 100644 apps/v4/examples/radix/button-group-with-dropdown.tsx create mode 100644 apps/v4/examples/radix/button-group-with-fields.tsx create mode 100644 apps/v4/examples/radix/button-group-with-icons.tsx create mode 100644 apps/v4/examples/radix/button-group-with-input-group.tsx create mode 100644 apps/v4/examples/radix/button-group-with-input.tsx create mode 100644 apps/v4/examples/radix/button-group-with-like.tsx create mode 100644 apps/v4/examples/radix/button-group-with-select-and-input.tsx create mode 100644 apps/v4/examples/radix/button-group-with-select.tsx create mode 100644 apps/v4/examples/radix/button-group-with-text.tsx create mode 100644 apps/v4/examples/radix/button-icon-left.tsx create mode 100644 apps/v4/examples/radix/button-icon-only.tsx create mode 100644 apps/v4/examples/radix/button-icon-right.tsx create mode 100644 apps/v4/examples/radix/button-invalid-states.tsx create mode 100644 apps/v4/examples/radix/button-variants-and-sizes.tsx create mode 100644 apps/v4/examples/radix/calendar-booked-dates.tsx create mode 100644 apps/v4/examples/radix/calendar-custom-days.tsx create mode 100644 apps/v4/examples/radix/calendar-multiple.tsx create mode 100644 apps/v4/examples/radix/calendar-range-multiple-months.tsx create mode 100644 apps/v4/examples/radix/calendar-range.tsx create mode 100644 apps/v4/examples/radix/calendar-single.tsx create mode 100644 apps/v4/examples/radix/calendar-week-numbers.tsx create mode 100644 apps/v4/examples/radix/calendar-with-presets.tsx create mode 100644 apps/v4/examples/radix/calendar-with-time.tsx create mode 100644 apps/v4/examples/radix/card-default.tsx create mode 100644 apps/v4/examples/radix/card-footer-with-border-small.tsx create mode 100644 apps/v4/examples/radix/card-footer-with-border.tsx create mode 100644 apps/v4/examples/radix/card-header-with-border-small.tsx create mode 100644 apps/v4/examples/radix/card-header-with-border.tsx create mode 100644 apps/v4/examples/radix/card-login.tsx create mode 100644 apps/v4/examples/radix/card-meeting-notes.tsx create mode 100644 apps/v4/examples/radix/card-small.tsx create mode 100644 apps/v4/examples/radix/card-with-image-small.tsx create mode 100644 apps/v4/examples/radix/card-with-image.tsx create mode 100644 apps/v4/examples/radix/carousel-basic.tsx create mode 100644 apps/v4/examples/radix/carousel-multiple.tsx create mode 100644 apps/v4/examples/radix/carousel-with-gap.tsx create mode 100644 apps/v4/examples/radix/chart-area-example.tsx create mode 100644 apps/v4/examples/radix/chart-bar-example.tsx create mode 100644 apps/v4/examples/radix/chart-line-example.tsx create mode 100644 apps/v4/examples/radix/chart-pie-example.tsx create mode 100644 apps/v4/examples/radix/chart-radar-example.tsx create mode 100644 apps/v4/examples/radix/chart-radial-example.tsx create mode 100644 apps/v4/examples/radix/checkbox-basic.tsx create mode 100644 apps/v4/examples/radix/checkbox-fields.tsx create mode 100644 apps/v4/examples/radix/checkbox-group.tsx create mode 100644 apps/v4/examples/radix/checkbox-in-table.tsx create mode 100644 apps/v4/examples/radix/checkbox-invalid.tsx create mode 100644 apps/v4/examples/radix/checkbox-with-description.tsx create mode 100644 apps/v4/examples/radix/checkbox-with-title.tsx create mode 100644 apps/v4/examples/radix/collapsible-file-tree.tsx create mode 100644 apps/v4/examples/radix/collapsible-settings.tsx create mode 100644 apps/v4/examples/radix/combobox-auto-highlight.tsx create mode 100644 apps/v4/examples/radix/combobox-basic.tsx create mode 100644 apps/v4/examples/radix/combobox-disabled.tsx create mode 100644 apps/v4/examples/radix/combobox-in-dialog.tsx create mode 100644 apps/v4/examples/radix/combobox-in-popup.tsx create mode 100644 apps/v4/examples/radix/combobox-invalid.tsx create mode 100644 apps/v4/examples/radix/combobox-large-list.tsx create mode 100644 apps/v4/examples/radix/combobox-multiple-disabled.tsx create mode 100644 apps/v4/examples/radix/combobox-multiple-invalid.tsx create mode 100644 apps/v4/examples/radix/combobox-multiple-no-remove.tsx create mode 100644 apps/v4/examples/radix/combobox-multiple.tsx create mode 100644 apps/v4/examples/radix/combobox-with-clear.tsx create mode 100644 apps/v4/examples/radix/combobox-with-custom-items.tsx create mode 100644 apps/v4/examples/radix/combobox-with-form.tsx create mode 100644 apps/v4/examples/radix/combobox-with-groups-and-separator.tsx create mode 100644 apps/v4/examples/radix/combobox-with-groups.tsx create mode 100644 apps/v4/examples/radix/combobox-with-other-inputs.tsx create mode 100644 apps/v4/examples/radix/comboxbox-input-addon.tsx create mode 100644 apps/v4/examples/radix/command-basic.tsx create mode 100644 apps/v4/examples/radix/command-many-items.tsx create mode 100644 apps/v4/examples/radix/command-with-groups.tsx create mode 100644 apps/v4/examples/radix/command-with-shortcuts.tsx create mode 100644 apps/v4/examples/radix/context-menu-basic.tsx create mode 100644 apps/v4/examples/radix/context-menu-in-dialog.tsx create mode 100644 apps/v4/examples/radix/context-menu-with-checkboxes.tsx create mode 100644 apps/v4/examples/radix/context-menu-with-destructive.tsx create mode 100644 apps/v4/examples/radix/context-menu-with-groups.tsx create mode 100644 apps/v4/examples/radix/context-menu-with-icons.tsx create mode 100644 apps/v4/examples/radix/context-menu-with-radio.tsx create mode 100644 apps/v4/examples/radix/context-menu-with-shortcuts.tsx create mode 100644 apps/v4/examples/radix/context-menu-with-sides.tsx create mode 100644 apps/v4/examples/radix/context-menu-with-submenu.tsx create mode 100644 apps/v4/examples/radix/data-picker-with-dropdowns.tsx create mode 100644 apps/v4/examples/radix/date-picker-simple.tsx create mode 100644 apps/v4/examples/radix/default-item-group.tsx create mode 100644 apps/v4/examples/radix/dialog-chat-settings.tsx create mode 100644 apps/v4/examples/radix/dialog-no-close-button.tsx create mode 100644 apps/v4/examples/radix/dialog-scrollable-content.tsx create mode 100644 apps/v4/examples/radix/dialog-with-form.tsx create mode 100644 apps/v4/examples/radix/dialog-with-sticky-footer.tsx create mode 100644 apps/v4/examples/radix/drawer-scrollable-content.tsx create mode 100644 apps/v4/examples/radix/drawer-with-sides.tsx create mode 100644 apps/v4/examples/radix/dropdown-menu-basic.tsx create mode 100644 apps/v4/examples/radix/dropdown-menu-complex.tsx create mode 100644 apps/v4/examples/radix/dropdown-menu-in-dialog.tsx create mode 100644 apps/v4/examples/radix/dropdown-menu-with-avatar.tsx create mode 100644 apps/v4/examples/radix/dropdown-menu-with-checkboxes-icons.tsx create mode 100644 apps/v4/examples/radix/dropdown-menu-with-checkboxes.tsx create mode 100644 apps/v4/examples/radix/dropdown-menu-with-destructive.tsx create mode 100644 apps/v4/examples/radix/dropdown-menu-with-icons.tsx create mode 100644 apps/v4/examples/radix/dropdown-menu-with-radio-icons.tsx create mode 100644 apps/v4/examples/radix/dropdown-menu-with-radio.tsx create mode 100644 apps/v4/examples/radix/dropdown-menu-with-shortcuts.tsx create mode 100644 apps/v4/examples/radix/dropdown-menu-with-submenu.tsx create mode 100644 apps/v4/examples/radix/empty-basic.tsx create mode 100644 apps/v4/examples/radix/empty-in-card.tsx create mode 100644 apps/v4/examples/radix/empty-with-border.tsx create mode 100644 apps/v4/examples/radix/empty-with-icon.tsx create mode 100644 apps/v4/examples/radix/empty-with-muted-background-alt.tsx create mode 100644 apps/v4/examples/radix/empty-with-muted-background.tsx create mode 100644 apps/v4/examples/radix/file-upload-list.tsx create mode 100644 apps/v4/examples/radix/hover-card-in-dialog.tsx create mode 100644 apps/v4/examples/radix/hover-card-sides.tsx create mode 100644 apps/v4/examples/radix/input-basic.tsx create mode 100644 apps/v4/examples/radix/input-fields.tsx create mode 100644 apps/v4/examples/radix/input-form.tsx create mode 100644 apps/v4/examples/radix/input-group-basic.tsx create mode 100644 apps/v4/examples/radix/input-group-in-card.tsx create mode 100644 apps/v4/examples/radix/input-group-textarea-examples.tsx create mode 100644 apps/v4/examples/radix/input-group-with-addons.tsx create mode 100644 apps/v4/examples/radix/input-group-with-buttons.tsx create mode 100644 apps/v4/examples/radix/input-group-with-kbd.tsx create mode 100644 apps/v4/examples/radix/input-group-with-tooltip.tsx create mode 100644 apps/v4/examples/radix/input-invalid.tsx create mode 100644 apps/v4/examples/radix/input-otp-alphanumeric.tsx create mode 100644 apps/v4/examples/radix/input-otp-disabled.tsx create mode 100644 apps/v4/examples/radix/input-otp-fields.tsx create mode 100644 apps/v4/examples/radix/input-otp-form.tsx create mode 100644 apps/v4/examples/radix/input-otp-four-digits.tsx create mode 100644 apps/v4/examples/radix/input-otp-invalid.tsx create mode 100644 apps/v4/examples/radix/input-otp-simple.tsx create mode 100644 apps/v4/examples/radix/input-otp-with-separator.tsx create mode 100644 apps/v4/examples/radix/input-types.tsx create mode 100644 apps/v4/examples/radix/input-with-description.tsx create mode 100644 apps/v4/examples/radix/input-with-native-select.tsx create mode 100644 apps/v4/examples/radix/input-with-select.tsx create mode 100644 apps/v4/examples/radix/item-default-extra-small.tsx create mode 100644 apps/v4/examples/radix/item-default-small.tsx create mode 100644 apps/v4/examples/radix/item-default-with-image.tsx create mode 100644 apps/v4/examples/radix/item-default.tsx create mode 100644 apps/v4/examples/radix/item-footer-examples.tsx create mode 100644 apps/v4/examples/radix/item-header-and-footer-examples.tsx create mode 100644 apps/v4/examples/radix/item-header-examples.tsx create mode 100644 apps/v4/examples/radix/item-link-default.tsx create mode 100644 apps/v4/examples/radix/item-link-muted.tsx create mode 100644 apps/v4/examples/radix/item-link-outline.tsx create mode 100644 apps/v4/examples/radix/item-muted-extra-small.tsx create mode 100644 apps/v4/examples/radix/item-muted-small.tsx create mode 100644 apps/v4/examples/radix/item-muted-with-image.tsx create mode 100644 apps/v4/examples/radix/item-muted.tsx create mode 100644 apps/v4/examples/radix/item-outline-extra-small.tsx create mode 100644 apps/v4/examples/radix/item-outline-small.tsx create mode 100644 apps/v4/examples/radix/item-outline-with-image-extra-small.tsx create mode 100644 apps/v4/examples/radix/item-outline-with-image-small.tsx create mode 100644 apps/v4/examples/radix/item-outline-with-image.tsx create mode 100644 apps/v4/examples/radix/item-outline.tsx create mode 100644 apps/v4/examples/radix/item-separator-example.tsx create mode 100644 apps/v4/examples/radix/kbd-arrow-keys.tsx create mode 100644 apps/v4/examples/radix/kbd-basic.tsx create mode 100644 apps/v4/examples/radix/kbd-group-example.tsx create mode 100644 apps/v4/examples/radix/kbd-in-input-group.tsx create mode 100644 apps/v4/examples/radix/kbd-in-tooltip.tsx create mode 100644 apps/v4/examples/radix/kbd-modifier-keys.tsx create mode 100644 apps/v4/examples/radix/kbd-with-icons-and-text.tsx create mode 100644 apps/v4/examples/radix/kbd-with-icons.tsx create mode 100644 apps/v4/examples/radix/kbd-with-samp.tsx create mode 100644 apps/v4/examples/radix/label-disabled.tsx create mode 100644 apps/v4/examples/radix/label-with-checkbox.tsx create mode 100644 apps/v4/examples/radix/label-with-input.tsx create mode 100644 apps/v4/examples/radix/label-with-textarea.tsx create mode 100644 apps/v4/examples/radix/menubar-basic.tsx create mode 100644 apps/v4/examples/radix/menubar-destructive.tsx create mode 100644 apps/v4/examples/radix/menubar-format.tsx create mode 100644 apps/v4/examples/radix/menubar-in-dialog.tsx create mode 100644 apps/v4/examples/radix/menubar-insert.tsx create mode 100644 apps/v4/examples/radix/menubar-with-checkboxes.tsx create mode 100644 apps/v4/examples/radix/menubar-with-icons.tsx create mode 100644 apps/v4/examples/radix/menubar-with-radio.tsx create mode 100644 apps/v4/examples/radix/menubar-with-shortcuts.tsx create mode 100644 apps/v4/examples/radix/menubar-with-submenu.tsx create mode 100644 apps/v4/examples/radix/muted-item-group.tsx create mode 100644 apps/v4/examples/radix/native-select-basic.tsx create mode 100644 apps/v4/examples/radix/native-select-fields.tsx create mode 100644 apps/v4/examples/radix/native-select-sizes.tsx create mode 100644 apps/v4/examples/radix/native-select-with-field.tsx create mode 100644 apps/v4/examples/radix/native-select-with-groups.tsx create mode 100644 apps/v4/examples/radix/navigation-menu-with-viewport.tsx create mode 100644 apps/v4/examples/radix/navigation-menu-without-viewport.tsx create mode 100644 apps/v4/examples/radix/outline-item-group.tsx create mode 100644 apps/v4/examples/radix/pagination-basic.tsx create mode 100644 apps/v4/examples/radix/pagination-icons-only.tsx create mode 100644 apps/v4/examples/radix/pagination-simple.tsx create mode 100644 apps/v4/examples/radix/popover-alignments.tsx create mode 100644 apps/v4/examples/radix/popover-basic.tsx create mode 100644 apps/v4/examples/radix/popover-in-dialog.tsx create mode 100644 apps/v4/examples/radix/popover-with-form.tsx create mode 100644 apps/v4/examples/radix/progress-controlled.tsx create mode 100644 apps/v4/examples/radix/progress-values.tsx create mode 100644 apps/v4/examples/radix/progress-with-label.tsx create mode 100644 apps/v4/examples/radix/radio-fields.tsx create mode 100644 apps/v4/examples/radix/radio-group-basic.tsx create mode 100644 apps/v4/examples/radix/radio-group-disabled.tsx create mode 100644 apps/v4/examples/radix/radio-group-grid.tsx create mode 100644 apps/v4/examples/radix/radio-group-invalid.tsx create mode 100644 apps/v4/examples/radix/radio-group-with-descriptions.tsx create mode 100644 apps/v4/examples/radix/radio-group-with-field-set.tsx create mode 100644 apps/v4/examples/radix/resizable-controlled.tsx create mode 100644 apps/v4/examples/radix/resizable-horizontal.tsx create mode 100644 apps/v4/examples/radix/resizable-nested.tsx create mode 100644 apps/v4/examples/radix/resizable-with-handle.tsx create mode 100644 apps/v4/examples/radix/scroll-area-horizontal.tsx create mode 100644 apps/v4/examples/radix/scroll-area-vertical.tsx create mode 100644 apps/v4/examples/radix/select-basic.tsx create mode 100644 apps/v4/examples/radix/select-disabled.tsx create mode 100644 apps/v4/examples/radix/select-fields.tsx create mode 100644 apps/v4/examples/radix/select-in-dialog.tsx create mode 100644 apps/v4/examples/radix/select-inline.tsx create mode 100644 apps/v4/examples/radix/select-invalid.tsx create mode 100644 apps/v4/examples/radix/select-item-aligned.tsx create mode 100644 apps/v4/examples/radix/select-large-list.tsx create mode 100644 apps/v4/examples/radix/select-plan.tsx create mode 100644 apps/v4/examples/radix/select-sizes.tsx create mode 100644 apps/v4/examples/radix/select-with-button.tsx create mode 100644 apps/v4/examples/radix/select-with-field.tsx create mode 100644 apps/v4/examples/radix/select-with-groups.tsx create mode 100644 apps/v4/examples/radix/select-with-icons.tsx create mode 100644 apps/v4/examples/radix/separator-horizontal.tsx create mode 100644 apps/v4/examples/radix/separator-in-list.tsx create mode 100644 apps/v4/examples/radix/separator-vertical-menu.tsx create mode 100644 apps/v4/examples/radix/separator-vertical.tsx create mode 100644 apps/v4/examples/radix/sheet-no-close-button.tsx create mode 100644 apps/v4/examples/radix/sheet-with-form.tsx create mode 100644 apps/v4/examples/radix/sheet-with-sides.tsx create mode 100644 apps/v4/examples/radix/skeleton-avatar.tsx create mode 100644 apps/v4/examples/radix/skeleton-form.tsx create mode 100644 apps/v4/examples/radix/skeleton-table.tsx create mode 100644 apps/v4/examples/radix/skeleton-text.tsx create mode 100644 apps/v4/examples/radix/slider-basic.tsx create mode 100644 apps/v4/examples/radix/slider-controlled.tsx create mode 100644 apps/v4/examples/radix/slider-disabled.tsx create mode 100644 apps/v4/examples/radix/slider-fields.tsx create mode 100644 apps/v4/examples/radix/slider-multiple.tsx create mode 100644 apps/v4/examples/radix/slider-range.tsx create mode 100644 apps/v4/examples/radix/slider-vertical.tsx create mode 100644 apps/v4/examples/radix/sonner-basic.tsx create mode 100644 apps/v4/examples/radix/sonner-with-description.tsx create mode 100644 apps/v4/examples/radix/spinner-in-badges.tsx create mode 100644 apps/v4/examples/radix/spinner-in-buttons.tsx create mode 100644 apps/v4/examples/radix/spinner-in-empty.tsx create mode 100644 apps/v4/examples/radix/spinner-in-input-group.tsx create mode 100644 apps/v4/examples/radix/switch-basic.tsx create mode 100644 apps/v4/examples/radix/switch-disabled.tsx create mode 100644 apps/v4/examples/radix/switch-fields.tsx create mode 100644 apps/v4/examples/radix/switch-sizes.tsx create mode 100644 apps/v4/examples/radix/switch-with-description.tsx create mode 100644 apps/v4/examples/radix/switch-with-label.tsx create mode 100644 apps/v4/examples/radix/table-basic.tsx create mode 100644 apps/v4/examples/radix/table-simple.tsx create mode 100644 apps/v4/examples/radix/table-with-actions.tsx create mode 100644 apps/v4/examples/radix/table-with-badges.tsx create mode 100644 apps/v4/examples/radix/table-with-footer.tsx create mode 100644 apps/v4/examples/radix/table-with-input.tsx create mode 100644 apps/v4/examples/radix/table-with-select.tsx create mode 100644 apps/v4/examples/radix/tabs-basic.tsx create mode 100644 apps/v4/examples/radix/tabs-disabled.tsx create mode 100644 apps/v4/examples/radix/tabs-icon-only.tsx create mode 100644 apps/v4/examples/radix/tabs-line-disabled.tsx create mode 100644 apps/v4/examples/radix/tabs-line-with-content.tsx create mode 100644 apps/v4/examples/radix/tabs-line.tsx create mode 100644 apps/v4/examples/radix/tabs-multiple.tsx create mode 100644 apps/v4/examples/radix/tabs-variants-comparison.tsx create mode 100644 apps/v4/examples/radix/tabs-vertical.tsx create mode 100644 apps/v4/examples/radix/tabs-with-content.tsx create mode 100644 apps/v4/examples/radix/tabs-with-dropdown.tsx create mode 100644 apps/v4/examples/radix/tabs-with-icons.tsx create mode 100644 apps/v4/examples/radix/tabs-with-input-and-button.tsx create mode 100644 apps/v4/examples/radix/textarea-basic.tsx create mode 100644 apps/v4/examples/radix/textarea-fields.tsx create mode 100644 apps/v4/examples/radix/textarea-invalid.tsx create mode 100644 apps/v4/examples/radix/textarea-with-description.tsx create mode 100644 apps/v4/examples/radix/toggle-basic.tsx create mode 100644 apps/v4/examples/radix/toggle-group-basic.tsx create mode 100644 apps/v4/examples/radix/toggle-group-date-range.tsx create mode 100644 apps/v4/examples/radix/toggle-group-filter.tsx create mode 100644 apps/v4/examples/radix/toggle-group-outline-with-icons.tsx create mode 100644 apps/v4/examples/radix/toggle-group-sizes.tsx create mode 100644 apps/v4/examples/radix/toggle-group-sort.tsx create mode 100644 apps/v4/examples/radix/toggle-group-vertical-outline-with-icons.tsx create mode 100644 apps/v4/examples/radix/toggle-group-vertical-outline.tsx create mode 100644 apps/v4/examples/radix/toggle-group-vertical-with-spacing.tsx create mode 100644 apps/v4/examples/radix/toggle-group-vertical.tsx create mode 100644 apps/v4/examples/radix/toggle-group-with-icons.tsx create mode 100644 apps/v4/examples/radix/toggle-group-with-input-and-select.tsx create mode 100644 apps/v4/examples/radix/toggle-sizes.tsx create mode 100644 apps/v4/examples/radix/toggle-with-button-icon-text.tsx create mode 100644 apps/v4/examples/radix/toggle-with-button-icon.tsx create mode 100644 apps/v4/examples/radix/toggle-with-button-text.tsx create mode 100644 apps/v4/examples/radix/toggle-with-icon.tsx create mode 100644 apps/v4/examples/radix/tooltip-basic.tsx create mode 100644 apps/v4/examples/radix/tooltip-disabled.tsx create mode 100644 apps/v4/examples/radix/tooltip-formatted.tsx create mode 100644 apps/v4/examples/radix/tooltip-long-content.tsx create mode 100644 apps/v4/examples/radix/tooltip-on-link.tsx create mode 100644 apps/v4/examples/radix/tooltip-sides.tsx create mode 100644 apps/v4/examples/radix/tooltip-with-icon.tsx create mode 100644 apps/v4/examples/radix/tooltip-with-keyboard.tsx diff --git a/apps/v4/components/component-preview-tabs.tsx b/apps/v4/components/component-preview-tabs.tsx index 50394234b..5ac2ae2c5 100644 --- a/apps/v4/components/component-preview-tabs.tsx +++ b/apps/v4/components/component-preview-tabs.tsx @@ -22,7 +22,7 @@ export function ComponentPreviewTabs({ return (
> = { radix: { + "accordion-basic": { + name: "accordion-basic", + filePath: "examples/radix/accordion-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/accordion-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "accordion-basic" + return { default: mod.default || mod[exportName] } + }), + }, "accordion-borders": { name: "accordion-borders", filePath: "examples/radix/accordion-borders.tsx", @@ -57,6 +70,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "accordion-in-card": { + name: "accordion-in-card", + filePath: "examples/radix/accordion-in-card.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/accordion-in-card") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "accordion-in-card" + return { default: mod.default || mod[exportName] } + }), + }, "accordion-multiple": { name: "accordion-multiple", filePath: "examples/radix/accordion-multiple.tsx", @@ -70,6 +96,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "accordion-with-borders": { + name: "accordion-with-borders", + filePath: "examples/radix/accordion-with-borders.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/accordion-with-borders") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "accordion-with-borders" + return { default: mod.default || mod[exportName] } + }), + }, + "accordion-with-disabled": { + name: "accordion-with-disabled", + filePath: "examples/radix/accordion-with-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/accordion-with-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "accordion-with-disabled" + return { default: mod.default || mod[exportName] } + }), + }, "alert-demo": { name: "alert-demo", filePath: "examples/radix/alert-demo.tsx", @@ -96,6 +148,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "alert-dialog-basic": { + name: "alert-dialog-basic", + filePath: "examples/radix/alert-dialog-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/alert-dialog-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-dialog-basic" + return { default: mod.default || mod[exportName] } + }), + }, "alert-dialog-demo": { name: "alert-dialog-demo", filePath: "examples/radix/alert-dialog-demo.tsx", @@ -109,6 +174,123 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "alert-dialog-destructive": { + name: "alert-dialog-destructive", + filePath: "examples/radix/alert-dialog-destructive.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/alert-dialog-destructive") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-dialog-destructive" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-dialog-in-dialog": { + name: "alert-dialog-in-dialog", + filePath: "examples/radix/alert-dialog-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/alert-dialog-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-dialog-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-dialog-small-with-media": { + name: "alert-dialog-small-with-media", + filePath: "examples/radix/alert-dialog-small-with-media.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/alert-dialog-small-with-media") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-dialog-small-with-media" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-dialog-small": { + name: "alert-dialog-small", + filePath: "examples/radix/alert-dialog-small.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/alert-dialog-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-dialog-small" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-dialog-with-media": { + name: "alert-dialog-with-media", + filePath: "examples/radix/alert-dialog-with-media.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/alert-dialog-with-media") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-dialog-with-media" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-example1": { + name: "alert-example1", + filePath: "examples/radix/alert-example1.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/alert-example1") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-example1" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-example2": { + name: "alert-example2", + filePath: "examples/radix/alert-example2.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/alert-example2") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-example2" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-example3": { + name: "alert-example3", + filePath: "examples/radix/alert-example3.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/alert-example3") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-example3" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-example4": { + name: "alert-example4", + filePath: "examples/radix/alert-example4.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/alert-example4") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-example4" + return { default: mod.default || mod[exportName] } + }), + }, "aspect-ratio-demo": { name: "aspect-ratio-demo", filePath: "examples/radix/aspect-ratio-demo.tsx", @@ -122,6 +304,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "aspect-ratio16x9": { + name: "aspect-ratio16x9", + filePath: "examples/radix/aspect-ratio16x9.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/aspect-ratio16x9") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "aspect-ratio16x9" + return { default: mod.default || mod[exportName] } + }), + }, + "aspect-ratio1x1": { + name: "aspect-ratio1x1", + filePath: "examples/radix/aspect-ratio1x1.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/aspect-ratio1x1") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "aspect-ratio1x1" + return { default: mod.default || mod[exportName] } + }), + }, + "aspect-ratio21x9": { + name: "aspect-ratio21x9", + filePath: "examples/radix/aspect-ratio21x9.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/aspect-ratio21x9") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "aspect-ratio21x9" + return { default: mod.default || mod[exportName] } + }), + }, + "aspect-ratio9x16": { + name: "aspect-ratio9x16", + filePath: "examples/radix/aspect-ratio9x16.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/aspect-ratio9x16") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "aspect-ratio9x16" + return { default: mod.default || mod[exportName] } + }), + }, "avatar-demo": { name: "avatar-demo", filePath: "examples/radix/avatar-demo.tsx", @@ -135,6 +369,123 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "avatar-group-example": { + name: "avatar-group-example", + filePath: "examples/radix/avatar-group-example.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/avatar-group-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "avatar-group-example" + return { default: mod.default || mod[exportName] } + }), + }, + "avatar-group-with-count": { + name: "avatar-group-with-count", + filePath: "examples/radix/avatar-group-with-count.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/avatar-group-with-count") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "avatar-group-with-count" + return { default: mod.default || mod[exportName] } + }), + }, + "avatar-group-with-icon-count": { + name: "avatar-group-with-icon-count", + filePath: "examples/radix/avatar-group-with-icon-count.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/avatar-group-with-icon-count") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "avatar-group-with-icon-count" + return { default: mod.default || mod[exportName] } + }), + }, + "avatar-in-empty": { + name: "avatar-in-empty", + filePath: "examples/radix/avatar-in-empty.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/avatar-in-empty") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "avatar-in-empty" + return { default: mod.default || mod[exportName] } + }), + }, + "avatar-sizes": { + name: "avatar-sizes", + filePath: "examples/radix/avatar-sizes.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/avatar-sizes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "avatar-sizes" + return { default: mod.default || mod[exportName] } + }), + }, + "avatar-with-badge-icon": { + name: "avatar-with-badge-icon", + filePath: "examples/radix/avatar-with-badge-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/avatar-with-badge-icon") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "avatar-with-badge-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "avatar-with-badge": { + name: "avatar-with-badge", + filePath: "examples/radix/avatar-with-badge.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/avatar-with-badge") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "avatar-with-badge" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-as-link": { + name: "badge-as-link", + filePath: "examples/radix/badge-as-link.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/badge-as-link") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "badge-as-link" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-custom-colors": { + name: "badge-custom-colors", + filePath: "examples/radix/badge-custom-colors.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/badge-custom-colors") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "badge-custom-colors" + return { default: mod.default || mod[exportName] } + }), + }, "badge-demo": { name: "badge-demo", filePath: "examples/radix/badge-demo.tsx", @@ -161,6 +512,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "badge-long-text": { + name: "badge-long-text", + filePath: "examples/radix/badge-long-text.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/badge-long-text") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "badge-long-text" + return { default: mod.default || mod[exportName] } + }), + }, "badge-outline": { name: "badge-outline", filePath: "examples/radix/badge-outline.tsx", @@ -187,6 +551,71 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "badge-variants": { + name: "badge-variants", + filePath: "examples/radix/badge-variants.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/badge-variants") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "badge-variants" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-with-icon-left": { + name: "badge-with-icon-left", + filePath: "examples/radix/badge-with-icon-left.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/badge-with-icon-left") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "badge-with-icon-left" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-with-icon-right": { + name: "badge-with-icon-right", + filePath: "examples/radix/badge-with-icon-right.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/badge-with-icon-right") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "badge-with-icon-right" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-with-spinner": { + name: "badge-with-spinner", + filePath: "examples/radix/badge-with-spinner.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/badge-with-spinner") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "badge-with-spinner" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-basic": { + name: "breadcrumb-basic", + filePath: "examples/radix/breadcrumb-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/breadcrumb-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "breadcrumb-basic" + return { default: mod.default || mod[exportName] } + }), + }, "breadcrumb-demo": { name: "breadcrumb-demo", filePath: "examples/radix/breadcrumb-demo.tsx", @@ -265,6 +694,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "breadcrumb-with-dropdown": { + name: "breadcrumb-with-dropdown", + filePath: "examples/radix/breadcrumb-with-dropdown.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/breadcrumb-with-dropdown") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "breadcrumb-with-dropdown" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-with-link": { + name: "breadcrumb-with-link", + filePath: "examples/radix/breadcrumb-with-link.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/breadcrumb-with-link") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "breadcrumb-with-link" + return { default: mod.default || mod[exportName] } + }), + }, "button-as-child": { name: "button-as-child", filePath: "examples/radix/button-as-child.tsx", @@ -317,6 +772,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "button-examples": { + name: "button-examples", + filePath: "examples/radix/button-examples.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-examples") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-examples" + return { default: mod.default || mod[exportName] } + }), + }, "button-ghost": { name: "button-ghost", filePath: "examples/radix/button-ghost.tsx", @@ -330,6 +798,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "button-group-basic": { + name: "button-group-basic", + filePath: "examples/radix/button-group-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-basic" + return { default: mod.default || mod[exportName] } + }), + }, "button-group-demo": { name: "button-group-demo", filePath: "examples/radix/button-group-demo.tsx", @@ -382,6 +863,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "button-group-navigation": { + name: "button-group-navigation", + filePath: "examples/radix/button-group-navigation.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-navigation") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-navigation" + return { default: mod.default || mod[exportName] } + }), + }, "button-group-nested": { name: "button-group-nested", filePath: "examples/radix/button-group-nested.tsx", @@ -408,6 +902,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "button-group-pagination-split": { + name: "button-group-pagination-split", + filePath: "examples/radix/button-group-pagination-split.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-pagination-split") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-pagination-split" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-pagination": { + name: "button-group-pagination", + filePath: "examples/radix/button-group-pagination.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-pagination") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-pagination" + return { default: mod.default || mod[exportName] } + }), + }, "button-group-popover": { name: "button-group-popover", filePath: "examples/radix/button-group-popover.tsx", @@ -473,6 +993,201 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "button-group-text-alignment": { + name: "button-group-text-alignment", + filePath: "examples/radix/button-group-text-alignment.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-text-alignment") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-text-alignment" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-vertical-nested": { + name: "button-group-vertical-nested", + filePath: "examples/radix/button-group-vertical-nested.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-vertical-nested") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-vertical-nested" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-vertical": { + name: "button-group-vertical", + filePath: "examples/radix/button-group-vertical.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-vertical") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-vertical" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-dropdown": { + name: "button-group-with-dropdown", + filePath: "examples/radix/button-group-with-dropdown.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-with-dropdown") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-dropdown" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-fields": { + name: "button-group-with-fields", + filePath: "examples/radix/button-group-with-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-with-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-icons": { + name: "button-group-with-icons", + filePath: "examples/radix/button-group-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-input-group": { + name: "button-group-with-input-group", + filePath: "examples/radix/button-group-with-input-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-with-input-group") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-input-group" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-input": { + name: "button-group-with-input", + filePath: "examples/radix/button-group-with-input.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-with-input") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-input" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-like": { + name: "button-group-with-like", + filePath: "examples/radix/button-group-with-like.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-with-like") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-like" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-select-and-input": { + name: "button-group-with-select-and-input", + filePath: "examples/radix/button-group-with-select-and-input.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-with-select-and-input") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-select-and-input" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-select": { + name: "button-group-with-select", + filePath: "examples/radix/button-group-with-select.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-with-select") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-select" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-text": { + name: "button-group-with-text", + filePath: "examples/radix/button-group-with-text.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-group-with-text") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-text" + return { default: mod.default || mod[exportName] } + }), + }, + "button-icon-left": { + name: "button-icon-left", + filePath: "examples/radix/button-icon-left.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-icon-left") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-icon-left" + return { default: mod.default || mod[exportName] } + }), + }, + "button-icon-only": { + name: "button-icon-only", + filePath: "examples/radix/button-icon-only.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-icon-only") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-icon-only" + return { default: mod.default || mod[exportName] } + }), + }, + "button-icon-right": { + name: "button-icon-right", + filePath: "examples/radix/button-icon-right.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-icon-right") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-icon-right" + return { default: mod.default || mod[exportName] } + }), + }, "button-icon": { name: "button-icon", filePath: "examples/radix/button-icon.tsx", @@ -486,6 +1201,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "button-invalid-states": { + name: "button-invalid-states", + filePath: "examples/radix/button-invalid-states.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-invalid-states") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-invalid-states" + return { default: mod.default || mod[exportName] } + }), + }, "button-link": { name: "button-link", filePath: "examples/radix/button-link.tsx", @@ -564,6 +1292,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "button-variants-and-sizes": { + name: "button-variants-and-sizes", + filePath: "examples/radix/button-variants-and-sizes.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/button-variants-and-sizes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-variants-and-sizes" + return { default: mod.default || mod[exportName] } + }), + }, "button-with-icon": { name: "button-with-icon", filePath: "examples/radix/button-with-icon.tsx", @@ -577,6 +1318,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "calendar-booked-dates": { + name: "calendar-booked-dates", + filePath: "examples/radix/calendar-booked-dates.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/calendar-booked-dates") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-booked-dates" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-custom-days": { + name: "calendar-custom-days", + filePath: "examples/radix/calendar-custom-days.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/calendar-custom-days") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-custom-days" + return { default: mod.default || mod[exportName] } + }), + }, "calendar-demo": { name: "calendar-demo", filePath: "examples/radix/calendar-demo.tsx", @@ -603,6 +1370,110 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "calendar-multiple": { + name: "calendar-multiple", + filePath: "examples/radix/calendar-multiple.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/calendar-multiple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-multiple" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-range-multiple-months": { + name: "calendar-range-multiple-months", + filePath: "examples/radix/calendar-range-multiple-months.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/calendar-range-multiple-months") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-range-multiple-months" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-range": { + name: "calendar-range", + filePath: "examples/radix/calendar-range.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/calendar-range") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-range" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-single": { + name: "calendar-single", + filePath: "examples/radix/calendar-single.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/calendar-single") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-single" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-week-numbers": { + name: "calendar-week-numbers", + filePath: "examples/radix/calendar-week-numbers.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/calendar-week-numbers") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-week-numbers" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-with-presets": { + name: "calendar-with-presets", + filePath: "examples/radix/calendar-with-presets.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/calendar-with-presets") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-with-presets" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-with-time": { + name: "calendar-with-time", + filePath: "examples/radix/calendar-with-time.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/calendar-with-time") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-with-time" + return { default: mod.default || mod[exportName] } + }), + }, + "card-default": { + name: "card-default", + filePath: "examples/radix/card-default.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/card-default") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-default" + return { default: mod.default || mod[exportName] } + }), + }, "card-demo": { name: "card-demo", filePath: "examples/radix/card-demo.tsx", @@ -616,6 +1487,123 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "card-footer-with-border-small": { + name: "card-footer-with-border-small", + filePath: "examples/radix/card-footer-with-border-small.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/card-footer-with-border-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-footer-with-border-small" + return { default: mod.default || mod[exportName] } + }), + }, + "card-footer-with-border": { + name: "card-footer-with-border", + filePath: "examples/radix/card-footer-with-border.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/card-footer-with-border") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-footer-with-border" + return { default: mod.default || mod[exportName] } + }), + }, + "card-header-with-border-small": { + name: "card-header-with-border-small", + filePath: "examples/radix/card-header-with-border-small.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/card-header-with-border-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-header-with-border-small" + return { default: mod.default || mod[exportName] } + }), + }, + "card-header-with-border": { + name: "card-header-with-border", + filePath: "examples/radix/card-header-with-border.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/card-header-with-border") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-header-with-border" + return { default: mod.default || mod[exportName] } + }), + }, + "card-login": { + name: "card-login", + filePath: "examples/radix/card-login.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/card-login") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-login" + return { default: mod.default || mod[exportName] } + }), + }, + "card-meeting-notes": { + name: "card-meeting-notes", + filePath: "examples/radix/card-meeting-notes.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/card-meeting-notes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-meeting-notes" + return { default: mod.default || mod[exportName] } + }), + }, + "card-small": { + name: "card-small", + filePath: "examples/radix/card-small.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/card-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-small" + return { default: mod.default || mod[exportName] } + }), + }, + "card-with-image-small": { + name: "card-with-image-small", + filePath: "examples/radix/card-with-image-small.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/card-with-image-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-with-image-small" + return { default: mod.default || mod[exportName] } + }), + }, + "card-with-image": { + name: "card-with-image", + filePath: "examples/radix/card-with-image.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/card-with-image") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-with-image" + return { default: mod.default || mod[exportName] } + }), + }, "carousel-api": { name: "carousel-api", filePath: "examples/radix/carousel-api.tsx", @@ -629,6 +1617,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "carousel-basic": { + name: "carousel-basic", + filePath: "examples/radix/carousel-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/carousel-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "carousel-basic" + return { default: mod.default || mod[exportName] } + }), + }, "carousel-demo": { name: "carousel-demo", filePath: "examples/radix/carousel-demo.tsx", @@ -642,6 +1643,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "carousel-multiple": { + name: "carousel-multiple", + filePath: "examples/radix/carousel-multiple.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/carousel-multiple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "carousel-multiple" + return { default: mod.default || mod[exportName] } + }), + }, "carousel-orientation": { name: "carousel-orientation", filePath: "examples/radix/carousel-orientation.tsx", @@ -694,6 +1708,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "carousel-with-gap": { + name: "carousel-with-gap", + filePath: "examples/radix/carousel-with-gap.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/carousel-with-gap") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "carousel-with-gap" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-area-example": { + name: "chart-area-example", + filePath: "examples/radix/chart-area-example.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/chart-area-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "chart-area-example" + return { default: mod.default || mod[exportName] } + }), + }, "chart-bar-demo-axis": { name: "chart-bar-demo-axis", filePath: "examples/radix/chart-bar-demo-axis.tsx", @@ -759,6 +1799,71 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "chart-bar-example": { + name: "chart-bar-example", + filePath: "examples/radix/chart-bar-example.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/chart-bar-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "chart-bar-example" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-line-example": { + name: "chart-line-example", + filePath: "examples/radix/chart-line-example.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/chart-line-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "chart-line-example" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-pie-example": { + name: "chart-pie-example", + filePath: "examples/radix/chart-pie-example.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/chart-pie-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "chart-pie-example" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-radar-example": { + name: "chart-radar-example", + filePath: "examples/radix/chart-radar-example.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/chart-radar-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "chart-radar-example" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-radial-example": { + name: "chart-radial-example", + filePath: "examples/radix/chart-radial-example.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/chart-radial-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "chart-radial-example" + return { default: mod.default || mod[exportName] } + }), + }, "chart-tooltip-demo": { name: "chart-tooltip-demo", filePath: "examples/radix/chart-tooltip-demo.tsx", @@ -772,6 +1877,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "checkbox-basic": { + name: "checkbox-basic", + filePath: "examples/radix/checkbox-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/checkbox-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "checkbox-basic" + return { default: mod.default || mod[exportName] } + }), + }, "checkbox-demo": { name: "checkbox-demo", filePath: "examples/radix/checkbox-demo.tsx", @@ -798,6 +1916,71 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "checkbox-fields": { + name: "checkbox-fields", + filePath: "examples/radix/checkbox-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/checkbox-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "checkbox-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "checkbox-group": { + name: "checkbox-group", + filePath: "examples/radix/checkbox-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/checkbox-group") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "checkbox-group" + return { default: mod.default || mod[exportName] } + }), + }, + "checkbox-in-table": { + name: "checkbox-in-table", + filePath: "examples/radix/checkbox-in-table.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/checkbox-in-table") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "checkbox-in-table" + return { default: mod.default || mod[exportName] } + }), + }, + "checkbox-invalid": { + name: "checkbox-invalid", + filePath: "examples/radix/checkbox-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/checkbox-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "checkbox-invalid" + return { default: mod.default || mod[exportName] } + }), + }, + "checkbox-with-description": { + name: "checkbox-with-description", + filePath: "examples/radix/checkbox-with-description.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/checkbox-with-description") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "checkbox-with-description" + return { default: mod.default || mod[exportName] } + }), + }, "checkbox-with-text": { name: "checkbox-with-text", filePath: "examples/radix/checkbox-with-text.tsx", @@ -811,6 +1994,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "checkbox-with-title": { + name: "checkbox-with-title", + filePath: "examples/radix/checkbox-with-title.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/checkbox-with-title") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "checkbox-with-title" + return { default: mod.default || mod[exportName] } + }), + }, "collapsible-demo": { name: "collapsible-demo", filePath: "examples/radix/collapsible-demo.tsx", @@ -824,6 +2020,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "collapsible-file-tree": { + name: "collapsible-file-tree", + filePath: "examples/radix/collapsible-file-tree.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/collapsible-file-tree") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "collapsible-file-tree" + return { default: mod.default || mod[exportName] } + }), + }, + "collapsible-settings": { + name: "collapsible-settings", + filePath: "examples/radix/collapsible-settings.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/collapsible-settings") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "collapsible-settings" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-auto-highlight": { + name: "combobox-auto-highlight", + filePath: "examples/radix/combobox-auto-highlight.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-auto-highlight") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-auto-highlight" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-basic": { + name: "combobox-basic", + filePath: "examples/radix/combobox-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-basic" + return { default: mod.default || mod[exportName] } + }), + }, "combobox-demo": { name: "combobox-demo", filePath: "examples/radix/combobox-demo.tsx", @@ -837,6 +2085,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "combobox-disabled": { + name: "combobox-disabled", + filePath: "examples/radix/combobox-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-disabled" + return { default: mod.default || mod[exportName] } + }), + }, "combobox-dropdown-menu": { name: "combobox-dropdown-menu", filePath: "examples/radix/combobox-dropdown-menu.tsx", @@ -850,6 +2111,110 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "combobox-in-dialog": { + name: "combobox-in-dialog", + filePath: "examples/radix/combobox-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-in-popup": { + name: "combobox-in-popup", + filePath: "examples/radix/combobox-in-popup.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-in-popup") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-in-popup" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-invalid": { + name: "combobox-invalid", + filePath: "examples/radix/combobox-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-invalid" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-large-list": { + name: "combobox-large-list", + filePath: "examples/radix/combobox-large-list.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-large-list") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-large-list" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-multiple-disabled": { + name: "combobox-multiple-disabled", + filePath: "examples/radix/combobox-multiple-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-multiple-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-multiple-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-multiple-invalid": { + name: "combobox-multiple-invalid", + filePath: "examples/radix/combobox-multiple-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-multiple-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-multiple-invalid" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-multiple-no-remove": { + name: "combobox-multiple-no-remove", + filePath: "examples/radix/combobox-multiple-no-remove.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-multiple-no-remove") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-multiple-no-remove" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-multiple": { + name: "combobox-multiple", + filePath: "examples/radix/combobox-multiple.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-multiple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-multiple" + return { default: mod.default || mod[exportName] } + }), + }, "combobox-popover": { name: "combobox-popover", filePath: "examples/radix/combobox-popover.tsx", @@ -876,6 +2241,110 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "combobox-with-clear": { + name: "combobox-with-clear", + filePath: "examples/radix/combobox-with-clear.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-with-clear") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-with-clear" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-with-custom-items": { + name: "combobox-with-custom-items", + filePath: "examples/radix/combobox-with-custom-items.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-with-custom-items") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-with-custom-items" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-with-form": { + name: "combobox-with-form", + filePath: "examples/radix/combobox-with-form.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-with-form") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-with-form" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-with-groups-and-separator": { + name: "combobox-with-groups-and-separator", + filePath: "examples/radix/combobox-with-groups-and-separator.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-with-groups-and-separator") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-with-groups-and-separator" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-with-groups": { + name: "combobox-with-groups", + filePath: "examples/radix/combobox-with-groups.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-with-groups") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-with-groups" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-with-other-inputs": { + name: "combobox-with-other-inputs", + filePath: "examples/radix/combobox-with-other-inputs.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/combobox-with-other-inputs") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-with-other-inputs" + return { default: mod.default || mod[exportName] } + }), + }, + "comboxbox-input-addon": { + name: "comboxbox-input-addon", + filePath: "examples/radix/comboxbox-input-addon.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/comboxbox-input-addon") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "comboxbox-input-addon" + return { default: mod.default || mod[exportName] } + }), + }, + "command-basic": { + name: "command-basic", + filePath: "examples/radix/command-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/command-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "command-basic" + return { default: mod.default || mod[exportName] } + }), + }, "command-demo": { name: "command-demo", filePath: "examples/radix/command-demo.tsx", @@ -902,6 +2371,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "command-many-items": { + name: "command-many-items", + filePath: "examples/radix/command-many-items.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/command-many-items") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "command-many-items" + return { default: mod.default || mod[exportName] } + }), + }, + "command-with-groups": { + name: "command-with-groups", + filePath: "examples/radix/command-with-groups.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/command-with-groups") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "command-with-groups" + return { default: mod.default || mod[exportName] } + }), + }, + "command-with-shortcuts": { + name: "command-with-shortcuts", + filePath: "examples/radix/command-with-shortcuts.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/command-with-shortcuts") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "command-with-shortcuts" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-basic": { + name: "context-menu-basic", + filePath: "examples/radix/context-menu-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/context-menu-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-basic" + return { default: mod.default || mod[exportName] } + }), + }, "context-menu-demo": { name: "context-menu-demo", filePath: "examples/radix/context-menu-demo.tsx", @@ -915,6 +2436,136 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "context-menu-in-dialog": { + name: "context-menu-in-dialog", + filePath: "examples/radix/context-menu-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/context-menu-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-checkboxes": { + name: "context-menu-with-checkboxes", + filePath: "examples/radix/context-menu-with-checkboxes.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/context-menu-with-checkboxes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-checkboxes" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-destructive": { + name: "context-menu-with-destructive", + filePath: "examples/radix/context-menu-with-destructive.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/context-menu-with-destructive") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-destructive" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-groups": { + name: "context-menu-with-groups", + filePath: "examples/radix/context-menu-with-groups.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/context-menu-with-groups") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-groups" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-icons": { + name: "context-menu-with-icons", + filePath: "examples/radix/context-menu-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/context-menu-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-radio": { + name: "context-menu-with-radio", + filePath: "examples/radix/context-menu-with-radio.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/context-menu-with-radio") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-radio" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-shortcuts": { + name: "context-menu-with-shortcuts", + filePath: "examples/radix/context-menu-with-shortcuts.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/context-menu-with-shortcuts") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-shortcuts" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-sides": { + name: "context-menu-with-sides", + filePath: "examples/radix/context-menu-with-sides.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/context-menu-with-sides") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-sides" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-submenu": { + name: "context-menu-with-submenu", + filePath: "examples/radix/context-menu-with-submenu.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/context-menu-with-submenu") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-submenu" + return { default: mod.default || mod[exportName] } + }), + }, + "data-picker-with-dropdowns": { + name: "data-picker-with-dropdowns", + filePath: "examples/radix/data-picker-with-dropdowns.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/data-picker-with-dropdowns") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "data-picker-with-dropdowns" + return { default: mod.default || mod[exportName] } + }), + }, "data-table-demo": { name: "data-table-demo", filePath: "examples/radix/data-table-demo.tsx", @@ -941,6 +2592,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "date-picker-simple": { + name: "date-picker-simple", + filePath: "examples/radix/date-picker-simple.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/date-picker-simple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "date-picker-simple" + return { default: mod.default || mod[exportName] } + }), + }, "date-picker-with-presets": { name: "date-picker-with-presets", filePath: "examples/radix/date-picker-with-presets.tsx", @@ -967,6 +2631,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "default-item-group": { + name: "default-item-group", + filePath: "examples/radix/default-item-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/default-item-group") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "default-item-group" + return { default: mod.default || mod[exportName] } + }), + }, + "dialog-chat-settings": { + name: "dialog-chat-settings", + filePath: "examples/radix/dialog-chat-settings.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dialog-chat-settings") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dialog-chat-settings" + return { default: mod.default || mod[exportName] } + }), + }, "dialog-close-button": { name: "dialog-close-button", filePath: "examples/radix/dialog-close-button.tsx", @@ -993,6 +2683,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "dialog-no-close-button": { + name: "dialog-no-close-button", + filePath: "examples/radix/dialog-no-close-button.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dialog-no-close-button") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dialog-no-close-button" + return { default: mod.default || mod[exportName] } + }), + }, + "dialog-scrollable-content": { + name: "dialog-scrollable-content", + filePath: "examples/radix/dialog-scrollable-content.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dialog-scrollable-content") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dialog-scrollable-content" + return { default: mod.default || mod[exportName] } + }), + }, + "dialog-with-form": { + name: "dialog-with-form", + filePath: "examples/radix/dialog-with-form.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dialog-with-form") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dialog-with-form" + return { default: mod.default || mod[exportName] } + }), + }, + "dialog-with-sticky-footer": { + name: "dialog-with-sticky-footer", + filePath: "examples/radix/dialog-with-sticky-footer.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dialog-with-sticky-footer") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dialog-with-sticky-footer" + return { default: mod.default || mod[exportName] } + }), + }, "drawer-demo": { name: "drawer-demo", filePath: "examples/radix/drawer-demo.tsx", @@ -1019,6 +2761,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "drawer-scrollable-content": { + name: "drawer-scrollable-content", + filePath: "examples/radix/drawer-scrollable-content.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/drawer-scrollable-content") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "drawer-scrollable-content" + return { default: mod.default || mod[exportName] } + }), + }, + "drawer-with-sides": { + name: "drawer-with-sides", + filePath: "examples/radix/drawer-with-sides.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/drawer-with-sides") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "drawer-with-sides" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-basic": { + name: "dropdown-menu-basic", + filePath: "examples/radix/dropdown-menu-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-basic" + return { default: mod.default || mod[exportName] } + }), + }, "dropdown-menu-checkboxes": { name: "dropdown-menu-checkboxes", filePath: "examples/radix/dropdown-menu-checkboxes.tsx", @@ -1032,6 +2813,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "dropdown-menu-complex": { + name: "dropdown-menu-complex", + filePath: "examples/radix/dropdown-menu-complex.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-complex") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-complex" + return { default: mod.default || mod[exportName] } + }), + }, "dropdown-menu-demo": { name: "dropdown-menu-demo", filePath: "examples/radix/dropdown-menu-demo.tsx", @@ -1058,6 +2852,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "dropdown-menu-in-dialog": { + name: "dropdown-menu-in-dialog", + filePath: "examples/radix/dropdown-menu-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, "dropdown-menu-radio-group": { name: "dropdown-menu-radio-group", filePath: "examples/radix/dropdown-menu-radio-group.tsx", @@ -1071,6 +2878,123 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "dropdown-menu-with-avatar": { + name: "dropdown-menu-with-avatar", + filePath: "examples/radix/dropdown-menu-with-avatar.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-with-avatar") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-avatar" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-checkboxes-icons": { + name: "dropdown-menu-with-checkboxes-icons", + filePath: "examples/radix/dropdown-menu-with-checkboxes-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-with-checkboxes-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-checkboxes-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-checkboxes": { + name: "dropdown-menu-with-checkboxes", + filePath: "examples/radix/dropdown-menu-with-checkboxes.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-with-checkboxes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-checkboxes" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-destructive": { + name: "dropdown-menu-with-destructive", + filePath: "examples/radix/dropdown-menu-with-destructive.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-with-destructive") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-destructive" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-icons": { + name: "dropdown-menu-with-icons", + filePath: "examples/radix/dropdown-menu-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-radio-icons": { + name: "dropdown-menu-with-radio-icons", + filePath: "examples/radix/dropdown-menu-with-radio-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-with-radio-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-radio-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-radio": { + name: "dropdown-menu-with-radio", + filePath: "examples/radix/dropdown-menu-with-radio.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-with-radio") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-radio" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-shortcuts": { + name: "dropdown-menu-with-shortcuts", + filePath: "examples/radix/dropdown-menu-with-shortcuts.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-with-shortcuts") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-shortcuts" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-submenu": { + name: "dropdown-menu-with-submenu", + filePath: "examples/radix/dropdown-menu-with-submenu.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-with-submenu") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-submenu" + return { default: mod.default || mod[exportName] } + }), + }, "empty-avatar-group": { name: "empty-avatar-group", filePath: "examples/radix/empty-avatar-group.tsx", @@ -1110,6 +3034,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "empty-basic": { + name: "empty-basic", + filePath: "examples/radix/empty-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/empty-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "empty-basic" + return { default: mod.default || mod[exportName] } + }), + }, "empty-demo": { name: "empty-demo", filePath: "examples/radix/empty-demo.tsx", @@ -1136,6 +3073,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "empty-in-card": { + name: "empty-in-card", + filePath: "examples/radix/empty-in-card.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/empty-in-card") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "empty-in-card" + return { default: mod.default || mod[exportName] } + }), + }, "empty-input-group": { name: "empty-input-group", filePath: "examples/radix/empty-input-group.tsx", @@ -1162,6 +3112,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "empty-with-border": { + name: "empty-with-border", + filePath: "examples/radix/empty-with-border.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/empty-with-border") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "empty-with-border" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-with-icon": { + name: "empty-with-icon", + filePath: "examples/radix/empty-with-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/empty-with-icon") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "empty-with-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-with-muted-background-alt": { + name: "empty-with-muted-background-alt", + filePath: "examples/radix/empty-with-muted-background-alt.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/empty-with-muted-background-alt") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "empty-with-muted-background-alt" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-with-muted-background": { + name: "empty-with-muted-background", + filePath: "examples/radix/empty-with-muted-background.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/empty-with-muted-background") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "empty-with-muted-background" + return { default: mod.default || mod[exportName] } + }), + }, "field-checkbox": { name: "field-checkbox", filePath: "examples/radix/field-checkbox.tsx", @@ -1318,6 +3320,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "file-upload-list": { + name: "file-upload-list", + filePath: "examples/radix/file-upload-list.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/file-upload-list") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "file-upload-list" + return { default: mod.default || mod[exportName] } + }), + }, "hover-card-demo": { name: "hover-card-demo", filePath: "examples/radix/hover-card-demo.tsx", @@ -1331,6 +3346,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "hover-card-in-dialog": { + name: "hover-card-in-dialog", + filePath: "examples/radix/hover-card-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/hover-card-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "hover-card-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "hover-card-sides": { + name: "hover-card-sides", + filePath: "examples/radix/hover-card-sides.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/hover-card-sides") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "hover-card-sides" + return { default: mod.default || mod[exportName] } + }), + }, + "input-basic": { + name: "input-basic", + filePath: "examples/radix/input-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-basic" + return { default: mod.default || mod[exportName] } + }), + }, "input-demo": { name: "input-demo", filePath: "examples/radix/input-demo.tsx", @@ -1357,6 +3411,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-fields": { + name: "input-fields", + filePath: "examples/radix/input-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-fields" + return { default: mod.default || mod[exportName] } + }), + }, "input-file": { name: "input-file", filePath: "examples/radix/input-file.tsx", @@ -1370,6 +3437,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-form": { + name: "input-form", + filePath: "examples/radix/input-form.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-form") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-form" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-basic": { + name: "input-group-basic", + filePath: "examples/radix/input-group-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-group-basic" + return { default: mod.default || mod[exportName] } + }), + }, "input-group-button-group": { name: "input-group-button-group", filePath: "examples/radix/input-group-button-group.tsx", @@ -1448,6 +3541,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-group-in-card": { + name: "input-group-in-card", + filePath: "examples/radix/input-group-in-card.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-in-card") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-group-in-card" + return { default: mod.default || mod[exportName] } + }), + }, "input-group-label": { name: "input-group-label", filePath: "examples/radix/input-group-label.tsx", @@ -1487,6 +3593,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-group-textarea-examples": { + name: "input-group-textarea-examples", + filePath: "examples/radix/input-group-textarea-examples.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-textarea-examples") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-group-textarea-examples" + return { default: mod.default || mod[exportName] } + }), + }, "input-group-textarea": { name: "input-group-textarea", filePath: "examples/radix/input-group-textarea.tsx", @@ -1513,6 +3632,84 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-group-with-addons": { + name: "input-group-with-addons", + filePath: "examples/radix/input-group-with-addons.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-with-addons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-group-with-addons" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-with-buttons": { + name: "input-group-with-buttons", + filePath: "examples/radix/input-group-with-buttons.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-with-buttons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-group-with-buttons" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-with-kbd": { + name: "input-group-with-kbd", + filePath: "examples/radix/input-group-with-kbd.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-with-kbd") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-group-with-kbd" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-with-tooltip": { + name: "input-group-with-tooltip", + filePath: "examples/radix/input-group-with-tooltip.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-group-with-tooltip") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-group-with-tooltip" + return { default: mod.default || mod[exportName] } + }), + }, + "input-invalid": { + name: "input-invalid", + filePath: "examples/radix/input-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-invalid" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-alphanumeric": { + name: "input-otp-alphanumeric", + filePath: "examples/radix/input-otp-alphanumeric.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-otp-alphanumeric") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-alphanumeric" + return { default: mod.default || mod[exportName] } + }), + }, "input-otp-controlled": { name: "input-otp-controlled", filePath: "examples/radix/input-otp-controlled.tsx", @@ -1539,6 +3736,71 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-otp-disabled": { + name: "input-otp-disabled", + filePath: "examples/radix/input-otp-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-otp-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-fields": { + name: "input-otp-fields", + filePath: "examples/radix/input-otp-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-otp-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-form": { + name: "input-otp-form", + filePath: "examples/radix/input-otp-form.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-otp-form") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-form" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-four-digits": { + name: "input-otp-four-digits", + filePath: "examples/radix/input-otp-four-digits.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-otp-four-digits") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-four-digits" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-invalid": { + name: "input-otp-invalid", + filePath: "examples/radix/input-otp-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-otp-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-invalid" + return { default: mod.default || mod[exportName] } + }), + }, "input-otp-pattern": { name: "input-otp-pattern", filePath: "examples/radix/input-otp-pattern.tsx", @@ -1565,6 +3827,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-otp-simple": { + name: "input-otp-simple", + filePath: "examples/radix/input-otp-simple.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-otp-simple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-simple" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-with-separator": { + name: "input-otp-with-separator", + filePath: "examples/radix/input-otp-with-separator.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-otp-with-separator") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-with-separator" + return { default: mod.default || mod[exportName] } + }), + }, + "input-types": { + name: "input-types", + filePath: "examples/radix/input-types.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-types") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-types" + return { default: mod.default || mod[exportName] } + }), + }, "input-with-button": { name: "input-with-button", filePath: "examples/radix/input-with-button.tsx", @@ -1578,6 +3879,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-with-description": { + name: "input-with-description", + filePath: "examples/radix/input-with-description.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-with-description") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-with-description" + return { default: mod.default || mod[exportName] } + }), + }, "input-with-label": { name: "input-with-label", filePath: "examples/radix/input-with-label.tsx", @@ -1591,6 +3905,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-with-native-select": { + name: "input-with-native-select", + filePath: "examples/radix/input-with-native-select.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-with-native-select") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-with-native-select" + return { default: mod.default || mod[exportName] } + }), + }, + "input-with-select": { + name: "input-with-select", + filePath: "examples/radix/input-with-select.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/input-with-select") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-with-select" + return { default: mod.default || mod[exportName] } + }), + }, "input-with-text": { name: "input-with-text", filePath: "examples/radix/input-with-text.tsx", @@ -1617,6 +3957,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "item-default-extra-small": { + name: "item-default-extra-small", + filePath: "examples/radix/item-default-extra-small.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-default-extra-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-default-extra-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-default-small": { + name: "item-default-small", + filePath: "examples/radix/item-default-small.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-default-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-default-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-default-with-image": { + name: "item-default-with-image", + filePath: "examples/radix/item-default-with-image.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-default-with-image") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-default-with-image" + return { default: mod.default || mod[exportName] } + }), + }, + "item-default": { + name: "item-default", + filePath: "examples/radix/item-default.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-default") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-default" + return { default: mod.default || mod[exportName] } + }), + }, "item-demo": { name: "item-demo", filePath: "examples/radix/item-demo.tsx", @@ -1643,6 +4035,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "item-footer-examples": { + name: "item-footer-examples", + filePath: "examples/radix/item-footer-examples.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-footer-examples") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-footer-examples" + return { default: mod.default || mod[exportName] } + }), + }, "item-group": { name: "item-group", filePath: "examples/radix/item-group.tsx", @@ -1656,6 +4061,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "item-header-and-footer-examples": { + name: "item-header-and-footer-examples", + filePath: "examples/radix/item-header-and-footer-examples.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-header-and-footer-examples") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-header-and-footer-examples" + return { default: mod.default || mod[exportName] } + }), + }, + "item-header-examples": { + name: "item-header-examples", + filePath: "examples/radix/item-header-examples.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-header-examples") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-header-examples" + return { default: mod.default || mod[exportName] } + }), + }, "item-header": { name: "item-header", filePath: "examples/radix/item-header.tsx", @@ -1695,6 +4126,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "item-link-default": { + name: "item-link-default", + filePath: "examples/radix/item-link-default.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-link-default") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-link-default" + return { default: mod.default || mod[exportName] } + }), + }, + "item-link-muted": { + name: "item-link-muted", + filePath: "examples/radix/item-link-muted.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-link-muted") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-link-muted" + return { default: mod.default || mod[exportName] } + }), + }, + "item-link-outline": { + name: "item-link-outline", + filePath: "examples/radix/item-link-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-link-outline") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-link-outline" + return { default: mod.default || mod[exportName] } + }), + }, "item-link": { name: "item-link", filePath: "examples/radix/item-link.tsx", @@ -1708,6 +4178,149 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "item-muted-extra-small": { + name: "item-muted-extra-small", + filePath: "examples/radix/item-muted-extra-small.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-muted-extra-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-muted-extra-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-muted-small": { + name: "item-muted-small", + filePath: "examples/radix/item-muted-small.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-muted-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-muted-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-muted-with-image": { + name: "item-muted-with-image", + filePath: "examples/radix/item-muted-with-image.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-muted-with-image") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-muted-with-image" + return { default: mod.default || mod[exportName] } + }), + }, + "item-muted": { + name: "item-muted", + filePath: "examples/radix/item-muted.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-muted") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-muted" + return { default: mod.default || mod[exportName] } + }), + }, + "item-outline-extra-small": { + name: "item-outline-extra-small", + filePath: "examples/radix/item-outline-extra-small.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-outline-extra-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-outline-extra-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-outline-small": { + name: "item-outline-small", + filePath: "examples/radix/item-outline-small.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-outline-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-outline-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-outline-with-image-extra-small": { + name: "item-outline-with-image-extra-small", + filePath: "examples/radix/item-outline-with-image-extra-small.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-outline-with-image-extra-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-outline-with-image-extra-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-outline-with-image-small": { + name: "item-outline-with-image-small", + filePath: "examples/radix/item-outline-with-image-small.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-outline-with-image-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-outline-with-image-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-outline-with-image": { + name: "item-outline-with-image", + filePath: "examples/radix/item-outline-with-image.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-outline-with-image") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-outline-with-image" + return { default: mod.default || mod[exportName] } + }), + }, + "item-outline": { + name: "item-outline", + filePath: "examples/radix/item-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-outline") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-outline" + return { default: mod.default || mod[exportName] } + }), + }, + "item-separator-example": { + name: "item-separator-example", + filePath: "examples/radix/item-separator-example.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/item-separator-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-separator-example" + return { default: mod.default || mod[exportName] } + }), + }, "item-size": { name: "item-size", filePath: "examples/radix/item-size.tsx", @@ -1734,6 +4347,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "kbd-arrow-keys": { + name: "kbd-arrow-keys", + filePath: "examples/radix/kbd-arrow-keys.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/kbd-arrow-keys") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-arrow-keys" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-basic": { + name: "kbd-basic", + filePath: "examples/radix/kbd-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/kbd-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-basic" + return { default: mod.default || mod[exportName] } + }), + }, "kbd-button": { name: "kbd-button", filePath: "examples/radix/kbd-button.tsx", @@ -1760,6 +4399,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "kbd-group-example": { + name: "kbd-group-example", + filePath: "examples/radix/kbd-group-example.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/kbd-group-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-group-example" + return { default: mod.default || mod[exportName] } + }), + }, "kbd-group": { name: "kbd-group", filePath: "examples/radix/kbd-group.tsx", @@ -1773,6 +4425,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "kbd-in-input-group": { + name: "kbd-in-input-group", + filePath: "examples/radix/kbd-in-input-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/kbd-in-input-group") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-in-input-group" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-in-tooltip": { + name: "kbd-in-tooltip", + filePath: "examples/radix/kbd-in-tooltip.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/kbd-in-tooltip") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-in-tooltip" + return { default: mod.default || mod[exportName] } + }), + }, "kbd-input-group": { name: "kbd-input-group", filePath: "examples/radix/kbd-input-group.tsx", @@ -1786,6 +4464,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "kbd-modifier-keys": { + name: "kbd-modifier-keys", + filePath: "examples/radix/kbd-modifier-keys.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/kbd-modifier-keys") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-modifier-keys" + return { default: mod.default || mod[exportName] } + }), + }, "kbd-tooltip": { name: "kbd-tooltip", filePath: "examples/radix/kbd-tooltip.tsx", @@ -1799,6 +4490,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "kbd-with-icons-and-text": { + name: "kbd-with-icons-and-text", + filePath: "examples/radix/kbd-with-icons-and-text.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/kbd-with-icons-and-text") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-with-icons-and-text" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-with-icons": { + name: "kbd-with-icons", + filePath: "examples/radix/kbd-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/kbd-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-with-samp": { + name: "kbd-with-samp", + filePath: "examples/radix/kbd-with-samp.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/kbd-with-samp") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-with-samp" + return { default: mod.default || mod[exportName] } + }), + }, "label-demo": { name: "label-demo", filePath: "examples/radix/label-demo.tsx", @@ -1812,6 +4542,71 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "label-disabled": { + name: "label-disabled", + filePath: "examples/radix/label-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/label-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "label-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "label-with-checkbox": { + name: "label-with-checkbox", + filePath: "examples/radix/label-with-checkbox.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/label-with-checkbox") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "label-with-checkbox" + return { default: mod.default || mod[exportName] } + }), + }, + "label-with-input": { + name: "label-with-input", + filePath: "examples/radix/label-with-input.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/label-with-input") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "label-with-input" + return { default: mod.default || mod[exportName] } + }), + }, + "label-with-textarea": { + name: "label-with-textarea", + filePath: "examples/radix/label-with-textarea.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/label-with-textarea") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "label-with-textarea" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-basic": { + name: "menubar-basic", + filePath: "examples/radix/menubar-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/menubar-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-basic" + return { default: mod.default || mod[exportName] } + }), + }, "menubar-demo": { name: "menubar-demo", filePath: "examples/radix/menubar-demo.tsx", @@ -1825,6 +4620,149 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "menubar-destructive": { + name: "menubar-destructive", + filePath: "examples/radix/menubar-destructive.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/menubar-destructive") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-destructive" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-format": { + name: "menubar-format", + filePath: "examples/radix/menubar-format.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/menubar-format") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-format" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-in-dialog": { + name: "menubar-in-dialog", + filePath: "examples/radix/menubar-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/menubar-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-insert": { + name: "menubar-insert", + filePath: "examples/radix/menubar-insert.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/menubar-insert") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-insert" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-with-checkboxes": { + name: "menubar-with-checkboxes", + filePath: "examples/radix/menubar-with-checkboxes.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/menubar-with-checkboxes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-with-checkboxes" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-with-icons": { + name: "menubar-with-icons", + filePath: "examples/radix/menubar-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/menubar-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-with-radio": { + name: "menubar-with-radio", + filePath: "examples/radix/menubar-with-radio.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/menubar-with-radio") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-with-radio" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-with-shortcuts": { + name: "menubar-with-shortcuts", + filePath: "examples/radix/menubar-with-shortcuts.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/menubar-with-shortcuts") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-with-shortcuts" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-with-submenu": { + name: "menubar-with-submenu", + filePath: "examples/radix/menubar-with-submenu.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/menubar-with-submenu") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-with-submenu" + return { default: mod.default || mod[exportName] } + }), + }, + "muted-item-group": { + name: "muted-item-group", + filePath: "examples/radix/muted-item-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/muted-item-group") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "muted-item-group" + return { default: mod.default || mod[exportName] } + }), + }, + "native-select-basic": { + name: "native-select-basic", + filePath: "examples/radix/native-select-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/native-select-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "native-select-basic" + return { default: mod.default || mod[exportName] } + }), + }, "native-select-demo": { name: "native-select-demo", filePath: "examples/radix/native-select-demo.tsx", @@ -1851,6 +4789,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "native-select-fields": { + name: "native-select-fields", + filePath: "examples/radix/native-select-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/native-select-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "native-select-fields" + return { default: mod.default || mod[exportName] } + }), + }, "native-select-groups": { name: "native-select-groups", filePath: "examples/radix/native-select-groups.tsx", @@ -1877,6 +4828,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "native-select-sizes": { + name: "native-select-sizes", + filePath: "examples/radix/native-select-sizes.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/native-select-sizes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "native-select-sizes" + return { default: mod.default || mod[exportName] } + }), + }, + "native-select-with-field": { + name: "native-select-with-field", + filePath: "examples/radix/native-select-with-field.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/native-select-with-field") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "native-select-with-field" + return { default: mod.default || mod[exportName] } + }), + }, + "native-select-with-groups": { + name: "native-select-with-groups", + filePath: "examples/radix/native-select-with-groups.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/native-select-with-groups") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "native-select-with-groups" + return { default: mod.default || mod[exportName] } + }), + }, "navigation-menu-demo": { name: "navigation-menu-demo", filePath: "examples/radix/navigation-menu-demo.tsx", @@ -1890,6 +4880,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "navigation-menu-with-viewport": { + name: "navigation-menu-with-viewport", + filePath: "examples/radix/navigation-menu-with-viewport.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/navigation-menu-with-viewport") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "navigation-menu-with-viewport" + return { default: mod.default || mod[exportName] } + }), + }, + "navigation-menu-without-viewport": { + name: "navigation-menu-without-viewport", + filePath: "examples/radix/navigation-menu-without-viewport.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/navigation-menu-without-viewport") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "navigation-menu-without-viewport" + return { default: mod.default || mod[exportName] } + }), + }, + "outline-item-group": { + name: "outline-item-group", + filePath: "examples/radix/outline-item-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/outline-item-group") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "outline-item-group" + return { default: mod.default || mod[exportName] } + }), + }, + "pagination-basic": { + name: "pagination-basic", + filePath: "examples/radix/pagination-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/pagination-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "pagination-basic" + return { default: mod.default || mod[exportName] } + }), + }, "pagination-demo": { name: "pagination-demo", filePath: "examples/radix/pagination-demo.tsx", @@ -1903,6 +4945,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "pagination-icons-only": { + name: "pagination-icons-only", + filePath: "examples/radix/pagination-icons-only.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/pagination-icons-only") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "pagination-icons-only" + return { default: mod.default || mod[exportName] } + }), + }, + "pagination-simple": { + name: "pagination-simple", + filePath: "examples/radix/pagination-simple.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/pagination-simple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "pagination-simple" + return { default: mod.default || mod[exportName] } + }), + }, + "popover-alignments": { + name: "popover-alignments", + filePath: "examples/radix/popover-alignments.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/popover-alignments") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "popover-alignments" + return { default: mod.default || mod[exportName] } + }), + }, + "popover-basic": { + name: "popover-basic", + filePath: "examples/radix/popover-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/popover-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "popover-basic" + return { default: mod.default || mod[exportName] } + }), + }, "popover-demo": { name: "popover-demo", filePath: "examples/radix/popover-demo.tsx", @@ -1916,6 +5010,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "popover-in-dialog": { + name: "popover-in-dialog", + filePath: "examples/radix/popover-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/popover-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "popover-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "popover-with-form": { + name: "popover-with-form", + filePath: "examples/radix/popover-with-form.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/popover-with-form") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "popover-with-form" + return { default: mod.default || mod[exportName] } + }), + }, + "progress-controlled": { + name: "progress-controlled", + filePath: "examples/radix/progress-controlled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/progress-controlled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "progress-controlled" + return { default: mod.default || mod[exportName] } + }), + }, "progress-demo": { name: "progress-demo", filePath: "examples/radix/progress-demo.tsx", @@ -1929,6 +5062,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "progress-values": { + name: "progress-values", + filePath: "examples/radix/progress-values.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/progress-values") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "progress-values" + return { default: mod.default || mod[exportName] } + }), + }, + "progress-with-label": { + name: "progress-with-label", + filePath: "examples/radix/progress-with-label.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/progress-with-label") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "progress-with-label" + return { default: mod.default || mod[exportName] } + }), + }, + "radio-fields": { + name: "radio-fields", + filePath: "examples/radix/radio-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/radio-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "radio-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "radio-group-basic": { + name: "radio-group-basic", + filePath: "examples/radix/radio-group-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/radio-group-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "radio-group-basic" + return { default: mod.default || mod[exportName] } + }), + }, "radio-group-demo": { name: "radio-group-demo", filePath: "examples/radix/radio-group-demo.tsx", @@ -1942,6 +5127,84 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "radio-group-disabled": { + name: "radio-group-disabled", + filePath: "examples/radix/radio-group-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/radio-group-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "radio-group-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "radio-group-grid": { + name: "radio-group-grid", + filePath: "examples/radix/radio-group-grid.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/radio-group-grid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "radio-group-grid" + return { default: mod.default || mod[exportName] } + }), + }, + "radio-group-invalid": { + name: "radio-group-invalid", + filePath: "examples/radix/radio-group-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/radio-group-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "radio-group-invalid" + return { default: mod.default || mod[exportName] } + }), + }, + "radio-group-with-descriptions": { + name: "radio-group-with-descriptions", + filePath: "examples/radix/radio-group-with-descriptions.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/radio-group-with-descriptions") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "radio-group-with-descriptions" + return { default: mod.default || mod[exportName] } + }), + }, + "radio-group-with-field-set": { + name: "radio-group-with-field-set", + filePath: "examples/radix/radio-group-with-field-set.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/radio-group-with-field-set") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "radio-group-with-field-set" + return { default: mod.default || mod[exportName] } + }), + }, + "resizable-controlled": { + name: "resizable-controlled", + filePath: "examples/radix/resizable-controlled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/resizable-controlled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "resizable-controlled" + return { default: mod.default || mod[exportName] } + }), + }, "resizable-demo-with-handle": { name: "resizable-demo-with-handle", filePath: "examples/radix/resizable-demo-with-handle.tsx", @@ -1981,6 +5244,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "resizable-horizontal": { + name: "resizable-horizontal", + filePath: "examples/radix/resizable-horizontal.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/resizable-horizontal") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "resizable-horizontal" + return { default: mod.default || mod[exportName] } + }), + }, + "resizable-nested": { + name: "resizable-nested", + filePath: "examples/radix/resizable-nested.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/resizable-nested") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "resizable-nested" + return { default: mod.default || mod[exportName] } + }), + }, "resizable-vertical": { name: "resizable-vertical", filePath: "examples/radix/resizable-vertical.tsx", @@ -1994,6 +5283,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "resizable-with-handle": { + name: "resizable-with-handle", + filePath: "examples/radix/resizable-with-handle.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/resizable-with-handle") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "resizable-with-handle" + return { default: mod.default || mod[exportName] } + }), + }, "scroll-area-demo": { name: "scroll-area-demo", filePath: "examples/radix/scroll-area-demo.tsx", @@ -2020,6 +5322,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "scroll-area-horizontal": { + name: "scroll-area-horizontal", + filePath: "examples/radix/scroll-area-horizontal.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/scroll-area-horizontal") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "scroll-area-horizontal" + return { default: mod.default || mod[exportName] } + }), + }, + "scroll-area-vertical": { + name: "scroll-area-vertical", + filePath: "examples/radix/scroll-area-vertical.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/scroll-area-vertical") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "scroll-area-vertical" + return { default: mod.default || mod[exportName] } + }), + }, + "select-basic": { + name: "select-basic", + filePath: "examples/radix/select-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-basic" + return { default: mod.default || mod[exportName] } + }), + }, "select-demo": { name: "select-demo", filePath: "examples/radix/select-demo.tsx", @@ -2033,6 +5374,110 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "select-disabled": { + name: "select-disabled", + filePath: "examples/radix/select-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "select-fields": { + name: "select-fields", + filePath: "examples/radix/select-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "select-in-dialog": { + name: "select-in-dialog", + filePath: "examples/radix/select-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "select-inline": { + name: "select-inline", + filePath: "examples/radix/select-inline.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-inline") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-inline" + return { default: mod.default || mod[exportName] } + }), + }, + "select-invalid": { + name: "select-invalid", + filePath: "examples/radix/select-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-invalid" + return { default: mod.default || mod[exportName] } + }), + }, + "select-item-aligned": { + name: "select-item-aligned", + filePath: "examples/radix/select-item-aligned.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-item-aligned") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-item-aligned" + return { default: mod.default || mod[exportName] } + }), + }, + "select-large-list": { + name: "select-large-list", + filePath: "examples/radix/select-large-list.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-large-list") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-large-list" + return { default: mod.default || mod[exportName] } + }), + }, + "select-plan": { + name: "select-plan", + filePath: "examples/radix/select-plan.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-plan") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-plan" + return { default: mod.default || mod[exportName] } + }), + }, "select-scrollable": { name: "select-scrollable", filePath: "examples/radix/select-scrollable.tsx", @@ -2046,6 +5491,71 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "select-sizes": { + name: "select-sizes", + filePath: "examples/radix/select-sizes.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-sizes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-sizes" + return { default: mod.default || mod[exportName] } + }), + }, + "select-with-button": { + name: "select-with-button", + filePath: "examples/radix/select-with-button.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-with-button") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-with-button" + return { default: mod.default || mod[exportName] } + }), + }, + "select-with-field": { + name: "select-with-field", + filePath: "examples/radix/select-with-field.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-with-field") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-with-field" + return { default: mod.default || mod[exportName] } + }), + }, + "select-with-groups": { + name: "select-with-groups", + filePath: "examples/radix/select-with-groups.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-with-groups") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-with-groups" + return { default: mod.default || mod[exportName] } + }), + }, + "select-with-icons": { + name: "select-with-icons", + filePath: "examples/radix/select-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/select-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, "separator-demo": { name: "separator-demo", filePath: "examples/radix/separator-demo.tsx", @@ -2059,6 +5569,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "separator-horizontal": { + name: "separator-horizontal", + filePath: "examples/radix/separator-horizontal.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/separator-horizontal") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "separator-horizontal" + return { default: mod.default || mod[exportName] } + }), + }, + "separator-in-list": { + name: "separator-in-list", + filePath: "examples/radix/separator-in-list.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/separator-in-list") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "separator-in-list" + return { default: mod.default || mod[exportName] } + }), + }, + "separator-vertical-menu": { + name: "separator-vertical-menu", + filePath: "examples/radix/separator-vertical-menu.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/separator-vertical-menu") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "separator-vertical-menu" + return { default: mod.default || mod[exportName] } + }), + }, + "separator-vertical": { + name: "separator-vertical", + filePath: "examples/radix/separator-vertical.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/separator-vertical") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "separator-vertical" + return { default: mod.default || mod[exportName] } + }), + }, "sheet-demo": { name: "sheet-demo", filePath: "examples/radix/sheet-demo.tsx", @@ -2072,6 +5634,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "sheet-no-close-button": { + name: "sheet-no-close-button", + filePath: "examples/radix/sheet-no-close-button.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/sheet-no-close-button") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "sheet-no-close-button" + return { default: mod.default || mod[exportName] } + }), + }, "sheet-side": { name: "sheet-side", filePath: "examples/radix/sheet-side.tsx", @@ -2085,6 +5660,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "sheet-with-form": { + name: "sheet-with-form", + filePath: "examples/radix/sheet-with-form.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/sheet-with-form") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "sheet-with-form" + return { default: mod.default || mod[exportName] } + }), + }, + "sheet-with-sides": { + name: "sheet-with-sides", + filePath: "examples/radix/sheet-with-sides.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/sheet-with-sides") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "sheet-with-sides" + return { default: mod.default || mod[exportName] } + }), + }, + "skeleton-avatar": { + name: "skeleton-avatar", + filePath: "examples/radix/skeleton-avatar.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/skeleton-avatar") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "skeleton-avatar" + return { default: mod.default || mod[exportName] } + }), + }, "skeleton-card": { name: "skeleton-card", filePath: "examples/radix/skeleton-card.tsx", @@ -2111,6 +5725,71 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "skeleton-form": { + name: "skeleton-form", + filePath: "examples/radix/skeleton-form.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/skeleton-form") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "skeleton-form" + return { default: mod.default || mod[exportName] } + }), + }, + "skeleton-table": { + name: "skeleton-table", + filePath: "examples/radix/skeleton-table.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/skeleton-table") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "skeleton-table" + return { default: mod.default || mod[exportName] } + }), + }, + "skeleton-text": { + name: "skeleton-text", + filePath: "examples/radix/skeleton-text.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/skeleton-text") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "skeleton-text" + return { default: mod.default || mod[exportName] } + }), + }, + "slider-basic": { + name: "slider-basic", + filePath: "examples/radix/slider-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/slider-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "slider-basic" + return { default: mod.default || mod[exportName] } + }), + }, + "slider-controlled": { + name: "slider-controlled", + filePath: "examples/radix/slider-controlled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/slider-controlled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "slider-controlled" + return { default: mod.default || mod[exportName] } + }), + }, "slider-demo": { name: "slider-demo", filePath: "examples/radix/slider-demo.tsx", @@ -2124,6 +5803,84 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "slider-disabled": { + name: "slider-disabled", + filePath: "examples/radix/slider-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/slider-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "slider-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "slider-fields": { + name: "slider-fields", + filePath: "examples/radix/slider-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/slider-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "slider-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "slider-multiple": { + name: "slider-multiple", + filePath: "examples/radix/slider-multiple.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/slider-multiple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "slider-multiple" + return { default: mod.default || mod[exportName] } + }), + }, + "slider-range": { + name: "slider-range", + filePath: "examples/radix/slider-range.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/slider-range") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "slider-range" + return { default: mod.default || mod[exportName] } + }), + }, + "slider-vertical": { + name: "slider-vertical", + filePath: "examples/radix/slider-vertical.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/slider-vertical") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "slider-vertical" + return { default: mod.default || mod[exportName] } + }), + }, + "sonner-basic": { + name: "sonner-basic", + filePath: "examples/radix/sonner-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/sonner-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "sonner-basic" + return { default: mod.default || mod[exportName] } + }), + }, "sonner-demo": { name: "sonner-demo", filePath: "examples/radix/sonner-demo.tsx", @@ -2150,6 +5907,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "sonner-with-description": { + name: "sonner-with-description", + filePath: "examples/radix/sonner-with-description.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/sonner-with-description") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "sonner-with-description" + return { default: mod.default || mod[exportName] } + }), + }, "spinner-badge": { name: "spinner-badge", filePath: "examples/radix/spinner-badge.tsx", @@ -2241,6 +6011,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "spinner-in-badges": { + name: "spinner-in-badges", + filePath: "examples/radix/spinner-in-badges.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/spinner-in-badges") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "spinner-in-badges" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-in-buttons": { + name: "spinner-in-buttons", + filePath: "examples/radix/spinner-in-buttons.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/spinner-in-buttons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "spinner-in-buttons" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-in-empty": { + name: "spinner-in-empty", + filePath: "examples/radix/spinner-in-empty.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/spinner-in-empty") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "spinner-in-empty" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-in-input-group": { + name: "spinner-in-input-group", + filePath: "examples/radix/spinner-in-input-group.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/spinner-in-input-group") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "spinner-in-input-group" + return { default: mod.default || mod[exportName] } + }), + }, "spinner-input-group": { name: "spinner-input-group", filePath: "examples/radix/spinner-input-group.tsx", @@ -2280,6 +6102,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "switch-basic": { + name: "switch-basic", + filePath: "examples/radix/switch-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/switch-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "switch-basic" + return { default: mod.default || mod[exportName] } + }), + }, "switch-demo": { name: "switch-demo", filePath: "examples/radix/switch-demo.tsx", @@ -2293,6 +6128,84 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "switch-disabled": { + name: "switch-disabled", + filePath: "examples/radix/switch-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/switch-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "switch-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "switch-fields": { + name: "switch-fields", + filePath: "examples/radix/switch-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/switch-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "switch-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "switch-sizes": { + name: "switch-sizes", + filePath: "examples/radix/switch-sizes.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/switch-sizes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "switch-sizes" + return { default: mod.default || mod[exportName] } + }), + }, + "switch-with-description": { + name: "switch-with-description", + filePath: "examples/radix/switch-with-description.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/switch-with-description") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "switch-with-description" + return { default: mod.default || mod[exportName] } + }), + }, + "switch-with-label": { + name: "switch-with-label", + filePath: "examples/radix/switch-with-label.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/switch-with-label") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "switch-with-label" + return { default: mod.default || mod[exportName] } + }), + }, + "table-basic": { + name: "table-basic", + filePath: "examples/radix/table-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/table-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "table-basic" + return { default: mod.default || mod[exportName] } + }), + }, "table-demo": { name: "table-demo", filePath: "examples/radix/table-demo.tsx", @@ -2306,6 +6219,97 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "table-simple": { + name: "table-simple", + filePath: "examples/radix/table-simple.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/table-simple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "table-simple" + return { default: mod.default || mod[exportName] } + }), + }, + "table-with-actions": { + name: "table-with-actions", + filePath: "examples/radix/table-with-actions.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/table-with-actions") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "table-with-actions" + return { default: mod.default || mod[exportName] } + }), + }, + "table-with-badges": { + name: "table-with-badges", + filePath: "examples/radix/table-with-badges.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/table-with-badges") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "table-with-badges" + return { default: mod.default || mod[exportName] } + }), + }, + "table-with-footer": { + name: "table-with-footer", + filePath: "examples/radix/table-with-footer.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/table-with-footer") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "table-with-footer" + return { default: mod.default || mod[exportName] } + }), + }, + "table-with-input": { + name: "table-with-input", + filePath: "examples/radix/table-with-input.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/table-with-input") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "table-with-input" + return { default: mod.default || mod[exportName] } + }), + }, + "table-with-select": { + name: "table-with-select", + filePath: "examples/radix/table-with-select.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/table-with-select") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "table-with-select" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-basic": { + name: "tabs-basic", + filePath: "examples/radix/tabs-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tabs-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-basic" + return { default: mod.default || mod[exportName] } + }), + }, "tabs-demo": { name: "tabs-demo", filePath: "examples/radix/tabs-demo.tsx", @@ -2319,6 +6323,175 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "tabs-disabled": { + name: "tabs-disabled", + filePath: "examples/radix/tabs-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tabs-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-icon-only": { + name: "tabs-icon-only", + filePath: "examples/radix/tabs-icon-only.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tabs-icon-only") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-icon-only" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-line-disabled": { + name: "tabs-line-disabled", + filePath: "examples/radix/tabs-line-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tabs-line-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-line-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-line-with-content": { + name: "tabs-line-with-content", + filePath: "examples/radix/tabs-line-with-content.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tabs-line-with-content") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-line-with-content" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-line": { + name: "tabs-line", + filePath: "examples/radix/tabs-line.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tabs-line") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-line" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-multiple": { + name: "tabs-multiple", + filePath: "examples/radix/tabs-multiple.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tabs-multiple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-multiple" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-variants-comparison": { + name: "tabs-variants-comparison", + filePath: "examples/radix/tabs-variants-comparison.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tabs-variants-comparison") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-variants-comparison" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-vertical": { + name: "tabs-vertical", + filePath: "examples/radix/tabs-vertical.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tabs-vertical") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-vertical" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-with-content": { + name: "tabs-with-content", + filePath: "examples/radix/tabs-with-content.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tabs-with-content") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-with-content" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-with-dropdown": { + name: "tabs-with-dropdown", + filePath: "examples/radix/tabs-with-dropdown.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tabs-with-dropdown") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-with-dropdown" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-with-icons": { + name: "tabs-with-icons", + filePath: "examples/radix/tabs-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tabs-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-with-input-and-button": { + name: "tabs-with-input-and-button", + filePath: "examples/radix/tabs-with-input-and-button.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tabs-with-input-and-button") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-with-input-and-button" + return { default: mod.default || mod[exportName] } + }), + }, + "textarea-basic": { + name: "textarea-basic", + filePath: "examples/radix/textarea-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/textarea-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "textarea-basic" + return { default: mod.default || mod[exportName] } + }), + }, "textarea-demo": { name: "textarea-demo", filePath: "examples/radix/textarea-demo.tsx", @@ -2345,6 +6518,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "textarea-fields": { + name: "textarea-fields", + filePath: "examples/radix/textarea-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/textarea-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "textarea-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "textarea-invalid": { + name: "textarea-invalid", + filePath: "examples/radix/textarea-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/textarea-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "textarea-invalid" + return { default: mod.default || mod[exportName] } + }), + }, "textarea-with-button": { name: "textarea-with-button", filePath: "examples/radix/textarea-with-button.tsx", @@ -2358,6 +6557,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "textarea-with-description": { + name: "textarea-with-description", + filePath: "examples/radix/textarea-with-description.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/textarea-with-description") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "textarea-with-description" + return { default: mod.default || mod[exportName] } + }), + }, "textarea-with-label": { name: "textarea-with-label", filePath: "examples/radix/textarea-with-label.tsx", @@ -2384,6 +6596,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-basic": { + name: "toggle-basic", + filePath: "examples/radix/toggle-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-basic" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-demo": { name: "toggle-demo", filePath: "examples/radix/toggle-demo.tsx", @@ -2410,6 +6635,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-group-basic": { + name: "toggle-group-basic", + filePath: "examples/radix/toggle-group-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-basic" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-date-range": { + name: "toggle-group-date-range", + filePath: "examples/radix/toggle-group-date-range.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-date-range") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-date-range" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-group-demo": { name: "toggle-group-demo", filePath: "examples/radix/toggle-group-demo.tsx", @@ -2436,6 +6687,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-group-filter": { + name: "toggle-group-filter", + filePath: "examples/radix/toggle-group-filter.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-filter") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-filter" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-group-lg": { name: "toggle-group-lg", filePath: "examples/radix/toggle-group-lg.tsx", @@ -2449,6 +6713,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-group-outline-with-icons": { + name: "toggle-group-outline-with-icons", + filePath: "examples/radix/toggle-group-outline-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-outline-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-outline-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-group-outline": { name: "toggle-group-outline", filePath: "examples/radix/toggle-group-outline.tsx", @@ -2475,6 +6752,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-group-sizes": { + name: "toggle-group-sizes", + filePath: "examples/radix/toggle-group-sizes.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-sizes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-sizes" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-group-sm": { name: "toggle-group-sm", filePath: "examples/radix/toggle-group-sm.tsx", @@ -2488,6 +6778,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-group-sort": { + name: "toggle-group-sort", + filePath: "examples/radix/toggle-group-sort.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-sort") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-sort" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-group-spacing": { name: "toggle-group-spacing", filePath: "examples/radix/toggle-group-spacing.tsx", @@ -2501,6 +6804,86 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-group-vertical-outline-with-icons": { + name: "toggle-group-vertical-outline-with-icons", + filePath: "examples/radix/toggle-group-vertical-outline-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import( + "./radix/toggle-group-vertical-outline-with-icons" + ) + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-vertical-outline-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-vertical-outline": { + name: "toggle-group-vertical-outline", + filePath: "examples/radix/toggle-group-vertical-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-vertical-outline") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-vertical-outline" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-vertical-with-spacing": { + name: "toggle-group-vertical-with-spacing", + filePath: "examples/radix/toggle-group-vertical-with-spacing.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-vertical-with-spacing") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-vertical-with-spacing" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-vertical": { + name: "toggle-group-vertical", + filePath: "examples/radix/toggle-group-vertical.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-vertical") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-vertical" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-with-icons": { + name: "toggle-group-with-icons", + filePath: "examples/radix/toggle-group-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-with-input-and-select": { + name: "toggle-group-with-input-and-select", + filePath: "examples/radix/toggle-group-with-input-and-select.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-group-with-input-and-select") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-with-input-and-select" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-lg": { name: "toggle-lg", filePath: "examples/radix/toggle-lg.tsx", @@ -2527,6 +6910,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-sizes": { + name: "toggle-sizes", + filePath: "examples/radix/toggle-sizes.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-sizes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-sizes" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-sm": { name: "toggle-sm", filePath: "examples/radix/toggle-sm.tsx", @@ -2540,6 +6936,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-with-button-icon-text": { + name: "toggle-with-button-icon-text", + filePath: "examples/radix/toggle-with-button-icon-text.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-with-button-icon-text") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-with-button-icon-text" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-with-button-icon": { + name: "toggle-with-button-icon", + filePath: "examples/radix/toggle-with-button-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-with-button-icon") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-with-button-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-with-button-text": { + name: "toggle-with-button-text", + filePath: "examples/radix/toggle-with-button-text.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-with-button-text") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-with-button-text" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-with-icon": { + name: "toggle-with-icon", + filePath: "examples/radix/toggle-with-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/toggle-with-icon") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-with-icon" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-with-text": { name: "toggle-with-text", filePath: "examples/radix/toggle-with-text.tsx", @@ -2553,6 +7001,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "tooltip-basic": { + name: "tooltip-basic", + filePath: "examples/radix/tooltip-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tooltip-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-basic" + return { default: mod.default || mod[exportName] } + }), + }, "tooltip-demo": { name: "tooltip-demo", filePath: "examples/radix/tooltip-demo.tsx", @@ -2566,6 +7027,97 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "tooltip-disabled": { + name: "tooltip-disabled", + filePath: "examples/radix/tooltip-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tooltip-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "tooltip-formatted": { + name: "tooltip-formatted", + filePath: "examples/radix/tooltip-formatted.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tooltip-formatted") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-formatted" + return { default: mod.default || mod[exportName] } + }), + }, + "tooltip-long-content": { + name: "tooltip-long-content", + filePath: "examples/radix/tooltip-long-content.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tooltip-long-content") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-long-content" + return { default: mod.default || mod[exportName] } + }), + }, + "tooltip-on-link": { + name: "tooltip-on-link", + filePath: "examples/radix/tooltip-on-link.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tooltip-on-link") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-on-link" + return { default: mod.default || mod[exportName] } + }), + }, + "tooltip-sides": { + name: "tooltip-sides", + filePath: "examples/radix/tooltip-sides.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tooltip-sides") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-sides" + return { default: mod.default || mod[exportName] } + }), + }, + "tooltip-with-icon": { + name: "tooltip-with-icon", + filePath: "examples/radix/tooltip-with-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tooltip-with-icon") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-with-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "tooltip-with-keyboard": { + name: "tooltip-with-keyboard", + filePath: "examples/radix/tooltip-with-keyboard.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/tooltip-with-keyboard") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-with-keyboard" + return { default: mod.default || mod[exportName] } + }), + }, "typography-blockquote": { name: "typography-blockquote", filePath: "examples/radix/typography-blockquote.tsx", @@ -2750,6 +7302,19 @@ export const ExamplesIndex: Record> = { }, }, base: { + "accordion-basic": { + name: "accordion-basic", + filePath: "examples/base/accordion-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/accordion-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "accordion-basic" + return { default: mod.default || mod[exportName] } + }), + }, "accordion-borders": { name: "accordion-borders", filePath: "examples/base/accordion-borders.tsx", @@ -2802,6 +7367,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "accordion-in-card": { + name: "accordion-in-card", + filePath: "examples/base/accordion-in-card.tsx", + component: React.lazy(async () => { + const mod = await import("./base/accordion-in-card") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "accordion-in-card" + return { default: mod.default || mod[exportName] } + }), + }, "accordion-multiple": { name: "accordion-multiple", filePath: "examples/base/accordion-multiple.tsx", @@ -2815,6 +7393,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "accordion-with-borders": { + name: "accordion-with-borders", + filePath: "examples/base/accordion-with-borders.tsx", + component: React.lazy(async () => { + const mod = await import("./base/accordion-with-borders") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "accordion-with-borders" + return { default: mod.default || mod[exportName] } + }), + }, + "accordion-with-disabled": { + name: "accordion-with-disabled", + filePath: "examples/base/accordion-with-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/accordion-with-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "accordion-with-disabled" + return { default: mod.default || mod[exportName] } + }), + }, "alert-demo": { name: "alert-demo", filePath: "examples/base/alert-demo.tsx", @@ -2841,6 +7445,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "alert-dialog-basic": { + name: "alert-dialog-basic", + filePath: "examples/base/alert-dialog-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/alert-dialog-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-dialog-basic" + return { default: mod.default || mod[exportName] } + }), + }, "alert-dialog-demo": { name: "alert-dialog-demo", filePath: "examples/base/alert-dialog-demo.tsx", @@ -2854,6 +7471,123 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "alert-dialog-destructive": { + name: "alert-dialog-destructive", + filePath: "examples/base/alert-dialog-destructive.tsx", + component: React.lazy(async () => { + const mod = await import("./base/alert-dialog-destructive") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-dialog-destructive" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-dialog-in-dialog": { + name: "alert-dialog-in-dialog", + filePath: "examples/base/alert-dialog-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./base/alert-dialog-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-dialog-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-dialog-small-with-media": { + name: "alert-dialog-small-with-media", + filePath: "examples/base/alert-dialog-small-with-media.tsx", + component: React.lazy(async () => { + const mod = await import("./base/alert-dialog-small-with-media") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-dialog-small-with-media" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-dialog-small": { + name: "alert-dialog-small", + filePath: "examples/base/alert-dialog-small.tsx", + component: React.lazy(async () => { + const mod = await import("./base/alert-dialog-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-dialog-small" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-dialog-with-media": { + name: "alert-dialog-with-media", + filePath: "examples/base/alert-dialog-with-media.tsx", + component: React.lazy(async () => { + const mod = await import("./base/alert-dialog-with-media") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-dialog-with-media" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-example1": { + name: "alert-example1", + filePath: "examples/base/alert-example1.tsx", + component: React.lazy(async () => { + const mod = await import("./base/alert-example1") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-example1" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-example2": { + name: "alert-example2", + filePath: "examples/base/alert-example2.tsx", + component: React.lazy(async () => { + const mod = await import("./base/alert-example2") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-example2" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-example3": { + name: "alert-example3", + filePath: "examples/base/alert-example3.tsx", + component: React.lazy(async () => { + const mod = await import("./base/alert-example3") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-example3" + return { default: mod.default || mod[exportName] } + }), + }, + "alert-example4": { + name: "alert-example4", + filePath: "examples/base/alert-example4.tsx", + component: React.lazy(async () => { + const mod = await import("./base/alert-example4") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "alert-example4" + return { default: mod.default || mod[exportName] } + }), + }, "aspect-ratio-demo": { name: "aspect-ratio-demo", filePath: "examples/base/aspect-ratio-demo.tsx", @@ -2867,6 +7601,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "aspect-ratio16x9": { + name: "aspect-ratio16x9", + filePath: "examples/base/aspect-ratio16x9.tsx", + component: React.lazy(async () => { + const mod = await import("./base/aspect-ratio16x9") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "aspect-ratio16x9" + return { default: mod.default || mod[exportName] } + }), + }, + "aspect-ratio1x1": { + name: "aspect-ratio1x1", + filePath: "examples/base/aspect-ratio1x1.tsx", + component: React.lazy(async () => { + const mod = await import("./base/aspect-ratio1x1") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "aspect-ratio1x1" + return { default: mod.default || mod[exportName] } + }), + }, + "aspect-ratio21x9": { + name: "aspect-ratio21x9", + filePath: "examples/base/aspect-ratio21x9.tsx", + component: React.lazy(async () => { + const mod = await import("./base/aspect-ratio21x9") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "aspect-ratio21x9" + return { default: mod.default || mod[exportName] } + }), + }, + "aspect-ratio9x16": { + name: "aspect-ratio9x16", + filePath: "examples/base/aspect-ratio9x16.tsx", + component: React.lazy(async () => { + const mod = await import("./base/aspect-ratio9x16") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "aspect-ratio9x16" + return { default: mod.default || mod[exportName] } + }), + }, "avatar-demo": { name: "avatar-demo", filePath: "examples/base/avatar-demo.tsx", @@ -2880,6 +7666,123 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "avatar-group-example": { + name: "avatar-group-example", + filePath: "examples/base/avatar-group-example.tsx", + component: React.lazy(async () => { + const mod = await import("./base/avatar-group-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "avatar-group-example" + return { default: mod.default || mod[exportName] } + }), + }, + "avatar-group-with-count": { + name: "avatar-group-with-count", + filePath: "examples/base/avatar-group-with-count.tsx", + component: React.lazy(async () => { + const mod = await import("./base/avatar-group-with-count") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "avatar-group-with-count" + return { default: mod.default || mod[exportName] } + }), + }, + "avatar-group-with-icon-count": { + name: "avatar-group-with-icon-count", + filePath: "examples/base/avatar-group-with-icon-count.tsx", + component: React.lazy(async () => { + const mod = await import("./base/avatar-group-with-icon-count") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "avatar-group-with-icon-count" + return { default: mod.default || mod[exportName] } + }), + }, + "avatar-in-empty": { + name: "avatar-in-empty", + filePath: "examples/base/avatar-in-empty.tsx", + component: React.lazy(async () => { + const mod = await import("./base/avatar-in-empty") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "avatar-in-empty" + return { default: mod.default || mod[exportName] } + }), + }, + "avatar-sizes": { + name: "avatar-sizes", + filePath: "examples/base/avatar-sizes.tsx", + component: React.lazy(async () => { + const mod = await import("./base/avatar-sizes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "avatar-sizes" + return { default: mod.default || mod[exportName] } + }), + }, + "avatar-with-badge-icon": { + name: "avatar-with-badge-icon", + filePath: "examples/base/avatar-with-badge-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./base/avatar-with-badge-icon") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "avatar-with-badge-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "avatar-with-badge": { + name: "avatar-with-badge", + filePath: "examples/base/avatar-with-badge.tsx", + component: React.lazy(async () => { + const mod = await import("./base/avatar-with-badge") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "avatar-with-badge" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-as-link": { + name: "badge-as-link", + filePath: "examples/base/badge-as-link.tsx", + component: React.lazy(async () => { + const mod = await import("./base/badge-as-link") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "badge-as-link" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-custom-colors": { + name: "badge-custom-colors", + filePath: "examples/base/badge-custom-colors.tsx", + component: React.lazy(async () => { + const mod = await import("./base/badge-custom-colors") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "badge-custom-colors" + return { default: mod.default || mod[exportName] } + }), + }, "badge-demo": { name: "badge-demo", filePath: "examples/base/badge-demo.tsx", @@ -2906,6 +7809,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "badge-long-text": { + name: "badge-long-text", + filePath: "examples/base/badge-long-text.tsx", + component: React.lazy(async () => { + const mod = await import("./base/badge-long-text") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "badge-long-text" + return { default: mod.default || mod[exportName] } + }), + }, "badge-outline": { name: "badge-outline", filePath: "examples/base/badge-outline.tsx", @@ -2932,6 +7848,71 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "badge-variants": { + name: "badge-variants", + filePath: "examples/base/badge-variants.tsx", + component: React.lazy(async () => { + const mod = await import("./base/badge-variants") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "badge-variants" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-with-icon-left": { + name: "badge-with-icon-left", + filePath: "examples/base/badge-with-icon-left.tsx", + component: React.lazy(async () => { + const mod = await import("./base/badge-with-icon-left") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "badge-with-icon-left" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-with-icon-right": { + name: "badge-with-icon-right", + filePath: "examples/base/badge-with-icon-right.tsx", + component: React.lazy(async () => { + const mod = await import("./base/badge-with-icon-right") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "badge-with-icon-right" + return { default: mod.default || mod[exportName] } + }), + }, + "badge-with-spinner": { + name: "badge-with-spinner", + filePath: "examples/base/badge-with-spinner.tsx", + component: React.lazy(async () => { + const mod = await import("./base/badge-with-spinner") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "badge-with-spinner" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-basic": { + name: "breadcrumb-basic", + filePath: "examples/base/breadcrumb-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/breadcrumb-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "breadcrumb-basic" + return { default: mod.default || mod[exportName] } + }), + }, "breadcrumb-demo": { name: "breadcrumb-demo", filePath: "examples/base/breadcrumb-demo.tsx", @@ -3010,6 +7991,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "breadcrumb-with-dropdown": { + name: "breadcrumb-with-dropdown", + filePath: "examples/base/breadcrumb-with-dropdown.tsx", + component: React.lazy(async () => { + const mod = await import("./base/breadcrumb-with-dropdown") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "breadcrumb-with-dropdown" + return { default: mod.default || mod[exportName] } + }), + }, + "breadcrumb-with-link": { + name: "breadcrumb-with-link", + filePath: "examples/base/breadcrumb-with-link.tsx", + component: React.lazy(async () => { + const mod = await import("./base/breadcrumb-with-link") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "breadcrumb-with-link" + return { default: mod.default || mod[exportName] } + }), + }, "button-as-child": { name: "button-as-child", filePath: "examples/base/button-as-child.tsx", @@ -3062,6 +8069,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "button-examples": { + name: "button-examples", + filePath: "examples/base/button-examples.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-examples") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-examples" + return { default: mod.default || mod[exportName] } + }), + }, "button-ghost": { name: "button-ghost", filePath: "examples/base/button-ghost.tsx", @@ -3075,6 +8095,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "button-group-basic": { + name: "button-group-basic", + filePath: "examples/base/button-group-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-basic" + return { default: mod.default || mod[exportName] } + }), + }, "button-group-demo": { name: "button-group-demo", filePath: "examples/base/button-group-demo.tsx", @@ -3127,6 +8160,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "button-group-navigation": { + name: "button-group-navigation", + filePath: "examples/base/button-group-navigation.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-navigation") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-navigation" + return { default: mod.default || mod[exportName] } + }), + }, "button-group-nested": { name: "button-group-nested", filePath: "examples/base/button-group-nested.tsx", @@ -3153,6 +8199,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "button-group-pagination-split": { + name: "button-group-pagination-split", + filePath: "examples/base/button-group-pagination-split.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-pagination-split") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-pagination-split" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-pagination": { + name: "button-group-pagination", + filePath: "examples/base/button-group-pagination.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-pagination") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-pagination" + return { default: mod.default || mod[exportName] } + }), + }, "button-group-popover": { name: "button-group-popover", filePath: "examples/base/button-group-popover.tsx", @@ -3218,6 +8290,201 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "button-group-text-alignment": { + name: "button-group-text-alignment", + filePath: "examples/base/button-group-text-alignment.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-text-alignment") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-text-alignment" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-vertical-nested": { + name: "button-group-vertical-nested", + filePath: "examples/base/button-group-vertical-nested.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-vertical-nested") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-vertical-nested" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-vertical": { + name: "button-group-vertical", + filePath: "examples/base/button-group-vertical.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-vertical") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-vertical" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-dropdown": { + name: "button-group-with-dropdown", + filePath: "examples/base/button-group-with-dropdown.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-with-dropdown") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-dropdown" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-fields": { + name: "button-group-with-fields", + filePath: "examples/base/button-group-with-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-with-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-icons": { + name: "button-group-with-icons", + filePath: "examples/base/button-group-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-input-group": { + name: "button-group-with-input-group", + filePath: "examples/base/button-group-with-input-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-with-input-group") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-input-group" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-input": { + name: "button-group-with-input", + filePath: "examples/base/button-group-with-input.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-with-input") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-input" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-like": { + name: "button-group-with-like", + filePath: "examples/base/button-group-with-like.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-with-like") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-like" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-select-and-input": { + name: "button-group-with-select-and-input", + filePath: "examples/base/button-group-with-select-and-input.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-with-select-and-input") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-select-and-input" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-select": { + name: "button-group-with-select", + filePath: "examples/base/button-group-with-select.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-with-select") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-select" + return { default: mod.default || mod[exportName] } + }), + }, + "button-group-with-text": { + name: "button-group-with-text", + filePath: "examples/base/button-group-with-text.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-group-with-text") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-group-with-text" + return { default: mod.default || mod[exportName] } + }), + }, + "button-icon-left": { + name: "button-icon-left", + filePath: "examples/base/button-icon-left.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-icon-left") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-icon-left" + return { default: mod.default || mod[exportName] } + }), + }, + "button-icon-only": { + name: "button-icon-only", + filePath: "examples/base/button-icon-only.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-icon-only") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-icon-only" + return { default: mod.default || mod[exportName] } + }), + }, + "button-icon-right": { + name: "button-icon-right", + filePath: "examples/base/button-icon-right.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-icon-right") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-icon-right" + return { default: mod.default || mod[exportName] } + }), + }, "button-icon": { name: "button-icon", filePath: "examples/base/button-icon.tsx", @@ -3231,6 +8498,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "button-invalid-states": { + name: "button-invalid-states", + filePath: "examples/base/button-invalid-states.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-invalid-states") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-invalid-states" + return { default: mod.default || mod[exportName] } + }), + }, "button-link": { name: "button-link", filePath: "examples/base/button-link.tsx", @@ -3309,6 +8589,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "button-variants-and-sizes": { + name: "button-variants-and-sizes", + filePath: "examples/base/button-variants-and-sizes.tsx", + component: React.lazy(async () => { + const mod = await import("./base/button-variants-and-sizes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "button-variants-and-sizes" + return { default: mod.default || mod[exportName] } + }), + }, "button-with-icon": { name: "button-with-icon", filePath: "examples/base/button-with-icon.tsx", @@ -3322,6 +8615,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "calendar-booked-dates": { + name: "calendar-booked-dates", + filePath: "examples/base/calendar-booked-dates.tsx", + component: React.lazy(async () => { + const mod = await import("./base/calendar-booked-dates") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-booked-dates" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-custom-days": { + name: "calendar-custom-days", + filePath: "examples/base/calendar-custom-days.tsx", + component: React.lazy(async () => { + const mod = await import("./base/calendar-custom-days") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-custom-days" + return { default: mod.default || mod[exportName] } + }), + }, "calendar-demo": { name: "calendar-demo", filePath: "examples/base/calendar-demo.tsx", @@ -3348,6 +8667,110 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "calendar-multiple": { + name: "calendar-multiple", + filePath: "examples/base/calendar-multiple.tsx", + component: React.lazy(async () => { + const mod = await import("./base/calendar-multiple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-multiple" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-range-multiple-months": { + name: "calendar-range-multiple-months", + filePath: "examples/base/calendar-range-multiple-months.tsx", + component: React.lazy(async () => { + const mod = await import("./base/calendar-range-multiple-months") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-range-multiple-months" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-range": { + name: "calendar-range", + filePath: "examples/base/calendar-range.tsx", + component: React.lazy(async () => { + const mod = await import("./base/calendar-range") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-range" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-single": { + name: "calendar-single", + filePath: "examples/base/calendar-single.tsx", + component: React.lazy(async () => { + const mod = await import("./base/calendar-single") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-single" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-week-numbers": { + name: "calendar-week-numbers", + filePath: "examples/base/calendar-week-numbers.tsx", + component: React.lazy(async () => { + const mod = await import("./base/calendar-week-numbers") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-week-numbers" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-with-presets": { + name: "calendar-with-presets", + filePath: "examples/base/calendar-with-presets.tsx", + component: React.lazy(async () => { + const mod = await import("./base/calendar-with-presets") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-with-presets" + return { default: mod.default || mod[exportName] } + }), + }, + "calendar-with-time": { + name: "calendar-with-time", + filePath: "examples/base/calendar-with-time.tsx", + component: React.lazy(async () => { + const mod = await import("./base/calendar-with-time") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "calendar-with-time" + return { default: mod.default || mod[exportName] } + }), + }, + "card-default": { + name: "card-default", + filePath: "examples/base/card-default.tsx", + component: React.lazy(async () => { + const mod = await import("./base/card-default") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-default" + return { default: mod.default || mod[exportName] } + }), + }, "card-demo": { name: "card-demo", filePath: "examples/base/card-demo.tsx", @@ -3361,6 +8784,123 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "card-footer-with-border-small": { + name: "card-footer-with-border-small", + filePath: "examples/base/card-footer-with-border-small.tsx", + component: React.lazy(async () => { + const mod = await import("./base/card-footer-with-border-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-footer-with-border-small" + return { default: mod.default || mod[exportName] } + }), + }, + "card-footer-with-border": { + name: "card-footer-with-border", + filePath: "examples/base/card-footer-with-border.tsx", + component: React.lazy(async () => { + const mod = await import("./base/card-footer-with-border") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-footer-with-border" + return { default: mod.default || mod[exportName] } + }), + }, + "card-header-with-border-small": { + name: "card-header-with-border-small", + filePath: "examples/base/card-header-with-border-small.tsx", + component: React.lazy(async () => { + const mod = await import("./base/card-header-with-border-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-header-with-border-small" + return { default: mod.default || mod[exportName] } + }), + }, + "card-header-with-border": { + name: "card-header-with-border", + filePath: "examples/base/card-header-with-border.tsx", + component: React.lazy(async () => { + const mod = await import("./base/card-header-with-border") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-header-with-border" + return { default: mod.default || mod[exportName] } + }), + }, + "card-login": { + name: "card-login", + filePath: "examples/base/card-login.tsx", + component: React.lazy(async () => { + const mod = await import("./base/card-login") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-login" + return { default: mod.default || mod[exportName] } + }), + }, + "card-meeting-notes": { + name: "card-meeting-notes", + filePath: "examples/base/card-meeting-notes.tsx", + component: React.lazy(async () => { + const mod = await import("./base/card-meeting-notes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-meeting-notes" + return { default: mod.default || mod[exportName] } + }), + }, + "card-small": { + name: "card-small", + filePath: "examples/base/card-small.tsx", + component: React.lazy(async () => { + const mod = await import("./base/card-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-small" + return { default: mod.default || mod[exportName] } + }), + }, + "card-with-image-small": { + name: "card-with-image-small", + filePath: "examples/base/card-with-image-small.tsx", + component: React.lazy(async () => { + const mod = await import("./base/card-with-image-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-with-image-small" + return { default: mod.default || mod[exportName] } + }), + }, + "card-with-image": { + name: "card-with-image", + filePath: "examples/base/card-with-image.tsx", + component: React.lazy(async () => { + const mod = await import("./base/card-with-image") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "card-with-image" + return { default: mod.default || mod[exportName] } + }), + }, "carousel-api": { name: "carousel-api", filePath: "examples/base/carousel-api.tsx", @@ -3374,6 +8914,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "carousel-basic": { + name: "carousel-basic", + filePath: "examples/base/carousel-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/carousel-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "carousel-basic" + return { default: mod.default || mod[exportName] } + }), + }, "carousel-demo": { name: "carousel-demo", filePath: "examples/base/carousel-demo.tsx", @@ -3387,6 +8940,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "carousel-multiple": { + name: "carousel-multiple", + filePath: "examples/base/carousel-multiple.tsx", + component: React.lazy(async () => { + const mod = await import("./base/carousel-multiple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "carousel-multiple" + return { default: mod.default || mod[exportName] } + }), + }, "carousel-orientation": { name: "carousel-orientation", filePath: "examples/base/carousel-orientation.tsx", @@ -3439,6 +9005,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "carousel-with-gap": { + name: "carousel-with-gap", + filePath: "examples/base/carousel-with-gap.tsx", + component: React.lazy(async () => { + const mod = await import("./base/carousel-with-gap") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "carousel-with-gap" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-area-example": { + name: "chart-area-example", + filePath: "examples/base/chart-area-example.tsx", + component: React.lazy(async () => { + const mod = await import("./base/chart-area-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "chart-area-example" + return { default: mod.default || mod[exportName] } + }), + }, "chart-bar-demo-axis": { name: "chart-bar-demo-axis", filePath: "examples/base/chart-bar-demo-axis.tsx", @@ -3504,6 +9096,71 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "chart-bar-example": { + name: "chart-bar-example", + filePath: "examples/base/chart-bar-example.tsx", + component: React.lazy(async () => { + const mod = await import("./base/chart-bar-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "chart-bar-example" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-line-example": { + name: "chart-line-example", + filePath: "examples/base/chart-line-example.tsx", + component: React.lazy(async () => { + const mod = await import("./base/chart-line-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "chart-line-example" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-pie-example": { + name: "chart-pie-example", + filePath: "examples/base/chart-pie-example.tsx", + component: React.lazy(async () => { + const mod = await import("./base/chart-pie-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "chart-pie-example" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-radar-example": { + name: "chart-radar-example", + filePath: "examples/base/chart-radar-example.tsx", + component: React.lazy(async () => { + const mod = await import("./base/chart-radar-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "chart-radar-example" + return { default: mod.default || mod[exportName] } + }), + }, + "chart-radial-example": { + name: "chart-radial-example", + filePath: "examples/base/chart-radial-example.tsx", + component: React.lazy(async () => { + const mod = await import("./base/chart-radial-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "chart-radial-example" + return { default: mod.default || mod[exportName] } + }), + }, "chart-tooltip-demo": { name: "chart-tooltip-demo", filePath: "examples/base/chart-tooltip-demo.tsx", @@ -3517,6 +9174,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "checkbox-basic": { + name: "checkbox-basic", + filePath: "examples/base/checkbox-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/checkbox-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "checkbox-basic" + return { default: mod.default || mod[exportName] } + }), + }, "checkbox-demo": { name: "checkbox-demo", filePath: "examples/base/checkbox-demo.tsx", @@ -3543,6 +9213,71 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "checkbox-fields": { + name: "checkbox-fields", + filePath: "examples/base/checkbox-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./base/checkbox-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "checkbox-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "checkbox-group": { + name: "checkbox-group", + filePath: "examples/base/checkbox-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/checkbox-group") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "checkbox-group" + return { default: mod.default || mod[exportName] } + }), + }, + "checkbox-in-table": { + name: "checkbox-in-table", + filePath: "examples/base/checkbox-in-table.tsx", + component: React.lazy(async () => { + const mod = await import("./base/checkbox-in-table") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "checkbox-in-table" + return { default: mod.default || mod[exportName] } + }), + }, + "checkbox-invalid": { + name: "checkbox-invalid", + filePath: "examples/base/checkbox-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./base/checkbox-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "checkbox-invalid" + return { default: mod.default || mod[exportName] } + }), + }, + "checkbox-with-description": { + name: "checkbox-with-description", + filePath: "examples/base/checkbox-with-description.tsx", + component: React.lazy(async () => { + const mod = await import("./base/checkbox-with-description") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "checkbox-with-description" + return { default: mod.default || mod[exportName] } + }), + }, "checkbox-with-text": { name: "checkbox-with-text", filePath: "examples/base/checkbox-with-text.tsx", @@ -3556,6 +9291,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "checkbox-with-title": { + name: "checkbox-with-title", + filePath: "examples/base/checkbox-with-title.tsx", + component: React.lazy(async () => { + const mod = await import("./base/checkbox-with-title") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "checkbox-with-title" + return { default: mod.default || mod[exportName] } + }), + }, "collapsible-demo": { name: "collapsible-demo", filePath: "examples/base/collapsible-demo.tsx", @@ -3569,6 +9317,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "collapsible-file-tree": { + name: "collapsible-file-tree", + filePath: "examples/base/collapsible-file-tree.tsx", + component: React.lazy(async () => { + const mod = await import("./base/collapsible-file-tree") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "collapsible-file-tree" + return { default: mod.default || mod[exportName] } + }), + }, + "collapsible-settings": { + name: "collapsible-settings", + filePath: "examples/base/collapsible-settings.tsx", + component: React.lazy(async () => { + const mod = await import("./base/collapsible-settings") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "collapsible-settings" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-auto-highlight": { + name: "combobox-auto-highlight", + filePath: "examples/base/combobox-auto-highlight.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-auto-highlight") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-auto-highlight" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-basic": { + name: "combobox-basic", + filePath: "examples/base/combobox-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-basic" + return { default: mod.default || mod[exportName] } + }), + }, "combobox-demo": { name: "combobox-demo", filePath: "examples/base/combobox-demo.tsx", @@ -3582,6 +9382,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "combobox-disabled": { + name: "combobox-disabled", + filePath: "examples/base/combobox-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-disabled" + return { default: mod.default || mod[exportName] } + }), + }, "combobox-dropdown-menu": { name: "combobox-dropdown-menu", filePath: "examples/base/combobox-dropdown-menu.tsx", @@ -3595,6 +9408,110 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "combobox-in-dialog": { + name: "combobox-in-dialog", + filePath: "examples/base/combobox-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-in-popup": { + name: "combobox-in-popup", + filePath: "examples/base/combobox-in-popup.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-in-popup") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-in-popup" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-invalid": { + name: "combobox-invalid", + filePath: "examples/base/combobox-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-invalid" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-large-list": { + name: "combobox-large-list", + filePath: "examples/base/combobox-large-list.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-large-list") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-large-list" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-multiple-disabled": { + name: "combobox-multiple-disabled", + filePath: "examples/base/combobox-multiple-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-multiple-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-multiple-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-multiple-invalid": { + name: "combobox-multiple-invalid", + filePath: "examples/base/combobox-multiple-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-multiple-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-multiple-invalid" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-multiple-no-remove": { + name: "combobox-multiple-no-remove", + filePath: "examples/base/combobox-multiple-no-remove.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-multiple-no-remove") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-multiple-no-remove" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-multiple": { + name: "combobox-multiple", + filePath: "examples/base/combobox-multiple.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-multiple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-multiple" + return { default: mod.default || mod[exportName] } + }), + }, "combobox-popover": { name: "combobox-popover", filePath: "examples/base/combobox-popover.tsx", @@ -3621,6 +9538,110 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "combobox-with-clear": { + name: "combobox-with-clear", + filePath: "examples/base/combobox-with-clear.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-with-clear") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-with-clear" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-with-custom-items": { + name: "combobox-with-custom-items", + filePath: "examples/base/combobox-with-custom-items.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-with-custom-items") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-with-custom-items" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-with-form": { + name: "combobox-with-form", + filePath: "examples/base/combobox-with-form.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-with-form") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-with-form" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-with-groups-and-separator": { + name: "combobox-with-groups-and-separator", + filePath: "examples/base/combobox-with-groups-and-separator.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-with-groups-and-separator") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-with-groups-and-separator" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-with-groups": { + name: "combobox-with-groups", + filePath: "examples/base/combobox-with-groups.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-with-groups") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-with-groups" + return { default: mod.default || mod[exportName] } + }), + }, + "combobox-with-other-inputs": { + name: "combobox-with-other-inputs", + filePath: "examples/base/combobox-with-other-inputs.tsx", + component: React.lazy(async () => { + const mod = await import("./base/combobox-with-other-inputs") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "combobox-with-other-inputs" + return { default: mod.default || mod[exportName] } + }), + }, + "comboxbox-input-addon": { + name: "comboxbox-input-addon", + filePath: "examples/base/comboxbox-input-addon.tsx", + component: React.lazy(async () => { + const mod = await import("./base/comboxbox-input-addon") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "comboxbox-input-addon" + return { default: mod.default || mod[exportName] } + }), + }, + "command-basic": { + name: "command-basic", + filePath: "examples/base/command-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/command-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "command-basic" + return { default: mod.default || mod[exportName] } + }), + }, "command-demo": { name: "command-demo", filePath: "examples/base/command-demo.tsx", @@ -3647,6 +9668,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "command-many-items": { + name: "command-many-items", + filePath: "examples/base/command-many-items.tsx", + component: React.lazy(async () => { + const mod = await import("./base/command-many-items") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "command-many-items" + return { default: mod.default || mod[exportName] } + }), + }, + "command-with-groups": { + name: "command-with-groups", + filePath: "examples/base/command-with-groups.tsx", + component: React.lazy(async () => { + const mod = await import("./base/command-with-groups") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "command-with-groups" + return { default: mod.default || mod[exportName] } + }), + }, + "command-with-shortcuts": { + name: "command-with-shortcuts", + filePath: "examples/base/command-with-shortcuts.tsx", + component: React.lazy(async () => { + const mod = await import("./base/command-with-shortcuts") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "command-with-shortcuts" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-basic": { + name: "context-menu-basic", + filePath: "examples/base/context-menu-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/context-menu-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-basic" + return { default: mod.default || mod[exportName] } + }), + }, "context-menu-demo": { name: "context-menu-demo", filePath: "examples/base/context-menu-demo.tsx", @@ -3660,6 +9733,136 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "context-menu-in-dialog": { + name: "context-menu-in-dialog", + filePath: "examples/base/context-menu-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./base/context-menu-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-checkboxes": { + name: "context-menu-with-checkboxes", + filePath: "examples/base/context-menu-with-checkboxes.tsx", + component: React.lazy(async () => { + const mod = await import("./base/context-menu-with-checkboxes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-checkboxes" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-destructive": { + name: "context-menu-with-destructive", + filePath: "examples/base/context-menu-with-destructive.tsx", + component: React.lazy(async () => { + const mod = await import("./base/context-menu-with-destructive") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-destructive" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-groups": { + name: "context-menu-with-groups", + filePath: "examples/base/context-menu-with-groups.tsx", + component: React.lazy(async () => { + const mod = await import("./base/context-menu-with-groups") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-groups" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-icons": { + name: "context-menu-with-icons", + filePath: "examples/base/context-menu-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./base/context-menu-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-radio": { + name: "context-menu-with-radio", + filePath: "examples/base/context-menu-with-radio.tsx", + component: React.lazy(async () => { + const mod = await import("./base/context-menu-with-radio") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-radio" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-shortcuts": { + name: "context-menu-with-shortcuts", + filePath: "examples/base/context-menu-with-shortcuts.tsx", + component: React.lazy(async () => { + const mod = await import("./base/context-menu-with-shortcuts") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-shortcuts" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-sides": { + name: "context-menu-with-sides", + filePath: "examples/base/context-menu-with-sides.tsx", + component: React.lazy(async () => { + const mod = await import("./base/context-menu-with-sides") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-sides" + return { default: mod.default || mod[exportName] } + }), + }, + "context-menu-with-submenu": { + name: "context-menu-with-submenu", + filePath: "examples/base/context-menu-with-submenu.tsx", + component: React.lazy(async () => { + const mod = await import("./base/context-menu-with-submenu") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "context-menu-with-submenu" + return { default: mod.default || mod[exportName] } + }), + }, + "data-picker-with-dropdowns": { + name: "data-picker-with-dropdowns", + filePath: "examples/base/data-picker-with-dropdowns.tsx", + component: React.lazy(async () => { + const mod = await import("./base/data-picker-with-dropdowns") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "data-picker-with-dropdowns" + return { default: mod.default || mod[exportName] } + }), + }, "data-table-demo": { name: "data-table-demo", filePath: "examples/base/data-table-demo.tsx", @@ -3686,6 +9889,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "date-picker-simple": { + name: "date-picker-simple", + filePath: "examples/base/date-picker-simple.tsx", + component: React.lazy(async () => { + const mod = await import("./base/date-picker-simple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "date-picker-simple" + return { default: mod.default || mod[exportName] } + }), + }, "date-picker-with-presets": { name: "date-picker-with-presets", filePath: "examples/base/date-picker-with-presets.tsx", @@ -3712,6 +9928,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "default-item-group": { + name: "default-item-group", + filePath: "examples/base/default-item-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/default-item-group") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "default-item-group" + return { default: mod.default || mod[exportName] } + }), + }, + "dialog-chat-settings": { + name: "dialog-chat-settings", + filePath: "examples/base/dialog-chat-settings.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dialog-chat-settings") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dialog-chat-settings" + return { default: mod.default || mod[exportName] } + }), + }, "dialog-close-button": { name: "dialog-close-button", filePath: "examples/base/dialog-close-button.tsx", @@ -3738,6 +9980,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "dialog-no-close-button": { + name: "dialog-no-close-button", + filePath: "examples/base/dialog-no-close-button.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dialog-no-close-button") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dialog-no-close-button" + return { default: mod.default || mod[exportName] } + }), + }, + "dialog-scrollable-content": { + name: "dialog-scrollable-content", + filePath: "examples/base/dialog-scrollable-content.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dialog-scrollable-content") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dialog-scrollable-content" + return { default: mod.default || mod[exportName] } + }), + }, + "dialog-with-form": { + name: "dialog-with-form", + filePath: "examples/base/dialog-with-form.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dialog-with-form") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dialog-with-form" + return { default: mod.default || mod[exportName] } + }), + }, + "dialog-with-sticky-footer": { + name: "dialog-with-sticky-footer", + filePath: "examples/base/dialog-with-sticky-footer.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dialog-with-sticky-footer") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dialog-with-sticky-footer" + return { default: mod.default || mod[exportName] } + }), + }, "drawer-demo": { name: "drawer-demo", filePath: "examples/base/drawer-demo.tsx", @@ -3764,6 +10058,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "drawer-scrollable-content": { + name: "drawer-scrollable-content", + filePath: "examples/base/drawer-scrollable-content.tsx", + component: React.lazy(async () => { + const mod = await import("./base/drawer-scrollable-content") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "drawer-scrollable-content" + return { default: mod.default || mod[exportName] } + }), + }, + "drawer-with-sides": { + name: "drawer-with-sides", + filePath: "examples/base/drawer-with-sides.tsx", + component: React.lazy(async () => { + const mod = await import("./base/drawer-with-sides") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "drawer-with-sides" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-basic": { + name: "dropdown-menu-basic", + filePath: "examples/base/dropdown-menu-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-basic" + return { default: mod.default || mod[exportName] } + }), + }, "dropdown-menu-checkboxes": { name: "dropdown-menu-checkboxes", filePath: "examples/base/dropdown-menu-checkboxes.tsx", @@ -3777,6 +10110,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "dropdown-menu-complex": { + name: "dropdown-menu-complex", + filePath: "examples/base/dropdown-menu-complex.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-complex") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-complex" + return { default: mod.default || mod[exportName] } + }), + }, "dropdown-menu-demo": { name: "dropdown-menu-demo", filePath: "examples/base/dropdown-menu-demo.tsx", @@ -3803,6 +10149,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "dropdown-menu-in-dialog": { + name: "dropdown-menu-in-dialog", + filePath: "examples/base/dropdown-menu-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, "dropdown-menu-radio-group": { name: "dropdown-menu-radio-group", filePath: "examples/base/dropdown-menu-radio-group.tsx", @@ -3816,6 +10175,123 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "dropdown-menu-with-avatar": { + name: "dropdown-menu-with-avatar", + filePath: "examples/base/dropdown-menu-with-avatar.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-with-avatar") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-avatar" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-checkboxes-icons": { + name: "dropdown-menu-with-checkboxes-icons", + filePath: "examples/base/dropdown-menu-with-checkboxes-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-with-checkboxes-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-checkboxes-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-checkboxes": { + name: "dropdown-menu-with-checkboxes", + filePath: "examples/base/dropdown-menu-with-checkboxes.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-with-checkboxes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-checkboxes" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-destructive": { + name: "dropdown-menu-with-destructive", + filePath: "examples/base/dropdown-menu-with-destructive.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-with-destructive") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-destructive" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-icons": { + name: "dropdown-menu-with-icons", + filePath: "examples/base/dropdown-menu-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-radio-icons": { + name: "dropdown-menu-with-radio-icons", + filePath: "examples/base/dropdown-menu-with-radio-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-with-radio-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-radio-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-radio": { + name: "dropdown-menu-with-radio", + filePath: "examples/base/dropdown-menu-with-radio.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-with-radio") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-radio" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-shortcuts": { + name: "dropdown-menu-with-shortcuts", + filePath: "examples/base/dropdown-menu-with-shortcuts.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-with-shortcuts") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-shortcuts" + return { default: mod.default || mod[exportName] } + }), + }, + "dropdown-menu-with-submenu": { + name: "dropdown-menu-with-submenu", + filePath: "examples/base/dropdown-menu-with-submenu.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-with-submenu") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-with-submenu" + return { default: mod.default || mod[exportName] } + }), + }, "empty-avatar-group": { name: "empty-avatar-group", filePath: "examples/base/empty-avatar-group.tsx", @@ -3855,6 +10331,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "empty-basic": { + name: "empty-basic", + filePath: "examples/base/empty-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/empty-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "empty-basic" + return { default: mod.default || mod[exportName] } + }), + }, "empty-demo": { name: "empty-demo", filePath: "examples/base/empty-demo.tsx", @@ -3881,6 +10370,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "empty-in-card": { + name: "empty-in-card", + filePath: "examples/base/empty-in-card.tsx", + component: React.lazy(async () => { + const mod = await import("./base/empty-in-card") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "empty-in-card" + return { default: mod.default || mod[exportName] } + }), + }, "empty-input-group": { name: "empty-input-group", filePath: "examples/base/empty-input-group.tsx", @@ -3907,6 +10409,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "empty-with-border": { + name: "empty-with-border", + filePath: "examples/base/empty-with-border.tsx", + component: React.lazy(async () => { + const mod = await import("./base/empty-with-border") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "empty-with-border" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-with-icon": { + name: "empty-with-icon", + filePath: "examples/base/empty-with-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./base/empty-with-icon") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "empty-with-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-with-muted-background-alt": { + name: "empty-with-muted-background-alt", + filePath: "examples/base/empty-with-muted-background-alt.tsx", + component: React.lazy(async () => { + const mod = await import("./base/empty-with-muted-background-alt") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "empty-with-muted-background-alt" + return { default: mod.default || mod[exportName] } + }), + }, + "empty-with-muted-background": { + name: "empty-with-muted-background", + filePath: "examples/base/empty-with-muted-background.tsx", + component: React.lazy(async () => { + const mod = await import("./base/empty-with-muted-background") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "empty-with-muted-background" + return { default: mod.default || mod[exportName] } + }), + }, "field-checkbox": { name: "field-checkbox", filePath: "examples/base/field-checkbox.tsx", @@ -4063,6 +10617,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "file-upload-list": { + name: "file-upload-list", + filePath: "examples/base/file-upload-list.tsx", + component: React.lazy(async () => { + const mod = await import("./base/file-upload-list") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "file-upload-list" + return { default: mod.default || mod[exportName] } + }), + }, "hover-card-demo": { name: "hover-card-demo", filePath: "examples/base/hover-card-demo.tsx", @@ -4076,6 +10643,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "hover-card-in-dialog": { + name: "hover-card-in-dialog", + filePath: "examples/base/hover-card-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./base/hover-card-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "hover-card-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "hover-card-sides": { + name: "hover-card-sides", + filePath: "examples/base/hover-card-sides.tsx", + component: React.lazy(async () => { + const mod = await import("./base/hover-card-sides") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "hover-card-sides" + return { default: mod.default || mod[exportName] } + }), + }, + "input-basic": { + name: "input-basic", + filePath: "examples/base/input-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-basic" + return { default: mod.default || mod[exportName] } + }), + }, "input-demo": { name: "input-demo", filePath: "examples/base/input-demo.tsx", @@ -4102,6 +10708,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-fields": { + name: "input-fields", + filePath: "examples/base/input-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-fields" + return { default: mod.default || mod[exportName] } + }), + }, "input-file": { name: "input-file", filePath: "examples/base/input-file.tsx", @@ -4115,6 +10734,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-form": { + name: "input-form", + filePath: "examples/base/input-form.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-form") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-form" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-basic": { + name: "input-group-basic", + filePath: "examples/base/input-group-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-group-basic" + return { default: mod.default || mod[exportName] } + }), + }, "input-group-button-group": { name: "input-group-button-group", filePath: "examples/base/input-group-button-group.tsx", @@ -4193,6 +10838,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-group-in-card": { + name: "input-group-in-card", + filePath: "examples/base/input-group-in-card.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-in-card") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-group-in-card" + return { default: mod.default || mod[exportName] } + }), + }, "input-group-label": { name: "input-group-label", filePath: "examples/base/input-group-label.tsx", @@ -4232,6 +10890,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-group-textarea-examples": { + name: "input-group-textarea-examples", + filePath: "examples/base/input-group-textarea-examples.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-textarea-examples") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-group-textarea-examples" + return { default: mod.default || mod[exportName] } + }), + }, "input-group-textarea": { name: "input-group-textarea", filePath: "examples/base/input-group-textarea.tsx", @@ -4258,6 +10929,84 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-group-with-addons": { + name: "input-group-with-addons", + filePath: "examples/base/input-group-with-addons.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-with-addons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-group-with-addons" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-with-buttons": { + name: "input-group-with-buttons", + filePath: "examples/base/input-group-with-buttons.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-with-buttons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-group-with-buttons" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-with-kbd": { + name: "input-group-with-kbd", + filePath: "examples/base/input-group-with-kbd.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-with-kbd") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-group-with-kbd" + return { default: mod.default || mod[exportName] } + }), + }, + "input-group-with-tooltip": { + name: "input-group-with-tooltip", + filePath: "examples/base/input-group-with-tooltip.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-group-with-tooltip") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-group-with-tooltip" + return { default: mod.default || mod[exportName] } + }), + }, + "input-invalid": { + name: "input-invalid", + filePath: "examples/base/input-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-invalid" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-alphanumeric": { + name: "input-otp-alphanumeric", + filePath: "examples/base/input-otp-alphanumeric.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-otp-alphanumeric") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-alphanumeric" + return { default: mod.default || mod[exportName] } + }), + }, "input-otp-controlled": { name: "input-otp-controlled", filePath: "examples/base/input-otp-controlled.tsx", @@ -4284,6 +11033,71 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-otp-disabled": { + name: "input-otp-disabled", + filePath: "examples/base/input-otp-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-otp-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-fields": { + name: "input-otp-fields", + filePath: "examples/base/input-otp-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-otp-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-form": { + name: "input-otp-form", + filePath: "examples/base/input-otp-form.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-otp-form") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-form" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-four-digits": { + name: "input-otp-four-digits", + filePath: "examples/base/input-otp-four-digits.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-otp-four-digits") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-four-digits" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-invalid": { + name: "input-otp-invalid", + filePath: "examples/base/input-otp-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-otp-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-invalid" + return { default: mod.default || mod[exportName] } + }), + }, "input-otp-pattern": { name: "input-otp-pattern", filePath: "examples/base/input-otp-pattern.tsx", @@ -4310,6 +11124,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-otp-simple": { + name: "input-otp-simple", + filePath: "examples/base/input-otp-simple.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-otp-simple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-simple" + return { default: mod.default || mod[exportName] } + }), + }, + "input-otp-with-separator": { + name: "input-otp-with-separator", + filePath: "examples/base/input-otp-with-separator.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-otp-with-separator") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-otp-with-separator" + return { default: mod.default || mod[exportName] } + }), + }, + "input-types": { + name: "input-types", + filePath: "examples/base/input-types.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-types") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-types" + return { default: mod.default || mod[exportName] } + }), + }, "input-with-button": { name: "input-with-button", filePath: "examples/base/input-with-button.tsx", @@ -4323,6 +11176,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-with-description": { + name: "input-with-description", + filePath: "examples/base/input-with-description.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-with-description") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-with-description" + return { default: mod.default || mod[exportName] } + }), + }, "input-with-label": { name: "input-with-label", filePath: "examples/base/input-with-label.tsx", @@ -4336,6 +11202,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "input-with-native-select": { + name: "input-with-native-select", + filePath: "examples/base/input-with-native-select.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-with-native-select") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-with-native-select" + return { default: mod.default || mod[exportName] } + }), + }, + "input-with-select": { + name: "input-with-select", + filePath: "examples/base/input-with-select.tsx", + component: React.lazy(async () => { + const mod = await import("./base/input-with-select") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "input-with-select" + return { default: mod.default || mod[exportName] } + }), + }, "input-with-text": { name: "input-with-text", filePath: "examples/base/input-with-text.tsx", @@ -4362,6 +11254,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "item-default-extra-small": { + name: "item-default-extra-small", + filePath: "examples/base/item-default-extra-small.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-default-extra-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-default-extra-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-default-small": { + name: "item-default-small", + filePath: "examples/base/item-default-small.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-default-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-default-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-default-with-image": { + name: "item-default-with-image", + filePath: "examples/base/item-default-with-image.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-default-with-image") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-default-with-image" + return { default: mod.default || mod[exportName] } + }), + }, + "item-default": { + name: "item-default", + filePath: "examples/base/item-default.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-default") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-default" + return { default: mod.default || mod[exportName] } + }), + }, "item-demo": { name: "item-demo", filePath: "examples/base/item-demo.tsx", @@ -4388,6 +11332,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "item-footer-examples": { + name: "item-footer-examples", + filePath: "examples/base/item-footer-examples.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-footer-examples") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-footer-examples" + return { default: mod.default || mod[exportName] } + }), + }, "item-group": { name: "item-group", filePath: "examples/base/item-group.tsx", @@ -4401,6 +11358,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "item-header-and-footer-examples": { + name: "item-header-and-footer-examples", + filePath: "examples/base/item-header-and-footer-examples.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-header-and-footer-examples") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-header-and-footer-examples" + return { default: mod.default || mod[exportName] } + }), + }, + "item-header-examples": { + name: "item-header-examples", + filePath: "examples/base/item-header-examples.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-header-examples") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-header-examples" + return { default: mod.default || mod[exportName] } + }), + }, "item-header": { name: "item-header", filePath: "examples/base/item-header.tsx", @@ -4440,6 +11423,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "item-link-default": { + name: "item-link-default", + filePath: "examples/base/item-link-default.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-link-default") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-link-default" + return { default: mod.default || mod[exportName] } + }), + }, + "item-link-muted": { + name: "item-link-muted", + filePath: "examples/base/item-link-muted.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-link-muted") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-link-muted" + return { default: mod.default || mod[exportName] } + }), + }, + "item-link-outline": { + name: "item-link-outline", + filePath: "examples/base/item-link-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-link-outline") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-link-outline" + return { default: mod.default || mod[exportName] } + }), + }, "item-link": { name: "item-link", filePath: "examples/base/item-link.tsx", @@ -4453,6 +11475,149 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "item-muted-extra-small": { + name: "item-muted-extra-small", + filePath: "examples/base/item-muted-extra-small.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-muted-extra-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-muted-extra-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-muted-small": { + name: "item-muted-small", + filePath: "examples/base/item-muted-small.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-muted-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-muted-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-muted-with-image": { + name: "item-muted-with-image", + filePath: "examples/base/item-muted-with-image.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-muted-with-image") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-muted-with-image" + return { default: mod.default || mod[exportName] } + }), + }, + "item-muted": { + name: "item-muted", + filePath: "examples/base/item-muted.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-muted") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-muted" + return { default: mod.default || mod[exportName] } + }), + }, + "item-outline-extra-small": { + name: "item-outline-extra-small", + filePath: "examples/base/item-outline-extra-small.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-outline-extra-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-outline-extra-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-outline-small": { + name: "item-outline-small", + filePath: "examples/base/item-outline-small.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-outline-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-outline-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-outline-with-image-extra-small": { + name: "item-outline-with-image-extra-small", + filePath: "examples/base/item-outline-with-image-extra-small.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-outline-with-image-extra-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-outline-with-image-extra-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-outline-with-image-small": { + name: "item-outline-with-image-small", + filePath: "examples/base/item-outline-with-image-small.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-outline-with-image-small") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-outline-with-image-small" + return { default: mod.default || mod[exportName] } + }), + }, + "item-outline-with-image": { + name: "item-outline-with-image", + filePath: "examples/base/item-outline-with-image.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-outline-with-image") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-outline-with-image" + return { default: mod.default || mod[exportName] } + }), + }, + "item-outline": { + name: "item-outline", + filePath: "examples/base/item-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-outline") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-outline" + return { default: mod.default || mod[exportName] } + }), + }, + "item-separator-example": { + name: "item-separator-example", + filePath: "examples/base/item-separator-example.tsx", + component: React.lazy(async () => { + const mod = await import("./base/item-separator-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "item-separator-example" + return { default: mod.default || mod[exportName] } + }), + }, "item-size": { name: "item-size", filePath: "examples/base/item-size.tsx", @@ -4479,6 +11644,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "kbd-arrow-keys": { + name: "kbd-arrow-keys", + filePath: "examples/base/kbd-arrow-keys.tsx", + component: React.lazy(async () => { + const mod = await import("./base/kbd-arrow-keys") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-arrow-keys" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-basic": { + name: "kbd-basic", + filePath: "examples/base/kbd-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/kbd-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-basic" + return { default: mod.default || mod[exportName] } + }), + }, "kbd-button": { name: "kbd-button", filePath: "examples/base/kbd-button.tsx", @@ -4505,6 +11696,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "kbd-group-example": { + name: "kbd-group-example", + filePath: "examples/base/kbd-group-example.tsx", + component: React.lazy(async () => { + const mod = await import("./base/kbd-group-example") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-group-example" + return { default: mod.default || mod[exportName] } + }), + }, "kbd-group": { name: "kbd-group", filePath: "examples/base/kbd-group.tsx", @@ -4518,6 +11722,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "kbd-in-input-group": { + name: "kbd-in-input-group", + filePath: "examples/base/kbd-in-input-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/kbd-in-input-group") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-in-input-group" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-in-tooltip": { + name: "kbd-in-tooltip", + filePath: "examples/base/kbd-in-tooltip.tsx", + component: React.lazy(async () => { + const mod = await import("./base/kbd-in-tooltip") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-in-tooltip" + return { default: mod.default || mod[exportName] } + }), + }, "kbd-input-group": { name: "kbd-input-group", filePath: "examples/base/kbd-input-group.tsx", @@ -4531,6 +11761,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "kbd-modifier-keys": { + name: "kbd-modifier-keys", + filePath: "examples/base/kbd-modifier-keys.tsx", + component: React.lazy(async () => { + const mod = await import("./base/kbd-modifier-keys") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-modifier-keys" + return { default: mod.default || mod[exportName] } + }), + }, "kbd-tooltip": { name: "kbd-tooltip", filePath: "examples/base/kbd-tooltip.tsx", @@ -4544,6 +11787,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "kbd-with-icons-and-text": { + name: "kbd-with-icons-and-text", + filePath: "examples/base/kbd-with-icons-and-text.tsx", + component: React.lazy(async () => { + const mod = await import("./base/kbd-with-icons-and-text") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-with-icons-and-text" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-with-icons": { + name: "kbd-with-icons", + filePath: "examples/base/kbd-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./base/kbd-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "kbd-with-samp": { + name: "kbd-with-samp", + filePath: "examples/base/kbd-with-samp.tsx", + component: React.lazy(async () => { + const mod = await import("./base/kbd-with-samp") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "kbd-with-samp" + return { default: mod.default || mod[exportName] } + }), + }, "label-demo": { name: "label-demo", filePath: "examples/base/label-demo.tsx", @@ -4557,6 +11839,71 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "label-disabled": { + name: "label-disabled", + filePath: "examples/base/label-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/label-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "label-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "label-with-checkbox": { + name: "label-with-checkbox", + filePath: "examples/base/label-with-checkbox.tsx", + component: React.lazy(async () => { + const mod = await import("./base/label-with-checkbox") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "label-with-checkbox" + return { default: mod.default || mod[exportName] } + }), + }, + "label-with-input": { + name: "label-with-input", + filePath: "examples/base/label-with-input.tsx", + component: React.lazy(async () => { + const mod = await import("./base/label-with-input") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "label-with-input" + return { default: mod.default || mod[exportName] } + }), + }, + "label-with-textarea": { + name: "label-with-textarea", + filePath: "examples/base/label-with-textarea.tsx", + component: React.lazy(async () => { + const mod = await import("./base/label-with-textarea") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "label-with-textarea" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-basic": { + name: "menubar-basic", + filePath: "examples/base/menubar-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/menubar-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-basic" + return { default: mod.default || mod[exportName] } + }), + }, "menubar-demo": { name: "menubar-demo", filePath: "examples/base/menubar-demo.tsx", @@ -4570,6 +11917,149 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "menubar-destructive": { + name: "menubar-destructive", + filePath: "examples/base/menubar-destructive.tsx", + component: React.lazy(async () => { + const mod = await import("./base/menubar-destructive") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-destructive" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-format": { + name: "menubar-format", + filePath: "examples/base/menubar-format.tsx", + component: React.lazy(async () => { + const mod = await import("./base/menubar-format") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-format" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-in-dialog": { + name: "menubar-in-dialog", + filePath: "examples/base/menubar-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./base/menubar-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-insert": { + name: "menubar-insert", + filePath: "examples/base/menubar-insert.tsx", + component: React.lazy(async () => { + const mod = await import("./base/menubar-insert") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-insert" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-with-checkboxes": { + name: "menubar-with-checkboxes", + filePath: "examples/base/menubar-with-checkboxes.tsx", + component: React.lazy(async () => { + const mod = await import("./base/menubar-with-checkboxes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-with-checkboxes" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-with-icons": { + name: "menubar-with-icons", + filePath: "examples/base/menubar-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./base/menubar-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-with-radio": { + name: "menubar-with-radio", + filePath: "examples/base/menubar-with-radio.tsx", + component: React.lazy(async () => { + const mod = await import("./base/menubar-with-radio") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-with-radio" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-with-shortcuts": { + name: "menubar-with-shortcuts", + filePath: "examples/base/menubar-with-shortcuts.tsx", + component: React.lazy(async () => { + const mod = await import("./base/menubar-with-shortcuts") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-with-shortcuts" + return { default: mod.default || mod[exportName] } + }), + }, + "menubar-with-submenu": { + name: "menubar-with-submenu", + filePath: "examples/base/menubar-with-submenu.tsx", + component: React.lazy(async () => { + const mod = await import("./base/menubar-with-submenu") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "menubar-with-submenu" + return { default: mod.default || mod[exportName] } + }), + }, + "muted-item-group": { + name: "muted-item-group", + filePath: "examples/base/muted-item-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/muted-item-group") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "muted-item-group" + return { default: mod.default || mod[exportName] } + }), + }, + "native-select-basic": { + name: "native-select-basic", + filePath: "examples/base/native-select-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/native-select-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "native-select-basic" + return { default: mod.default || mod[exportName] } + }), + }, "native-select-demo": { name: "native-select-demo", filePath: "examples/base/native-select-demo.tsx", @@ -4596,6 +12086,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "native-select-fields": { + name: "native-select-fields", + filePath: "examples/base/native-select-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./base/native-select-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "native-select-fields" + return { default: mod.default || mod[exportName] } + }), + }, "native-select-groups": { name: "native-select-groups", filePath: "examples/base/native-select-groups.tsx", @@ -4622,6 +12125,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "native-select-sizes": { + name: "native-select-sizes", + filePath: "examples/base/native-select-sizes.tsx", + component: React.lazy(async () => { + const mod = await import("./base/native-select-sizes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "native-select-sizes" + return { default: mod.default || mod[exportName] } + }), + }, + "native-select-with-field": { + name: "native-select-with-field", + filePath: "examples/base/native-select-with-field.tsx", + component: React.lazy(async () => { + const mod = await import("./base/native-select-with-field") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "native-select-with-field" + return { default: mod.default || mod[exportName] } + }), + }, + "native-select-with-groups": { + name: "native-select-with-groups", + filePath: "examples/base/native-select-with-groups.tsx", + component: React.lazy(async () => { + const mod = await import("./base/native-select-with-groups") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "native-select-with-groups" + return { default: mod.default || mod[exportName] } + }), + }, + "navigation-menu-basic": { + name: "navigation-menu-basic", + filePath: "examples/base/navigation-menu-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/navigation-menu-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "navigation-menu-basic" + return { default: mod.default || mod[exportName] } + }), + }, "navigation-menu-demo": { name: "navigation-menu-demo", filePath: "examples/base/navigation-menu-demo.tsx", @@ -4635,6 +12190,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "outline-item-group": { + name: "outline-item-group", + filePath: "examples/base/outline-item-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/outline-item-group") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "outline-item-group" + return { default: mod.default || mod[exportName] } + }), + }, + "pagination-basic": { + name: "pagination-basic", + filePath: "examples/base/pagination-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/pagination-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "pagination-basic" + return { default: mod.default || mod[exportName] } + }), + }, "pagination-demo": { name: "pagination-demo", filePath: "examples/base/pagination-demo.tsx", @@ -4648,6 +12229,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "pagination-icons-only": { + name: "pagination-icons-only", + filePath: "examples/base/pagination-icons-only.tsx", + component: React.lazy(async () => { + const mod = await import("./base/pagination-icons-only") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "pagination-icons-only" + return { default: mod.default || mod[exportName] } + }), + }, + "pagination-simple": { + name: "pagination-simple", + filePath: "examples/base/pagination-simple.tsx", + component: React.lazy(async () => { + const mod = await import("./base/pagination-simple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "pagination-simple" + return { default: mod.default || mod[exportName] } + }), + }, + "popover-alignments": { + name: "popover-alignments", + filePath: "examples/base/popover-alignments.tsx", + component: React.lazy(async () => { + const mod = await import("./base/popover-alignments") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "popover-alignments" + return { default: mod.default || mod[exportName] } + }), + }, + "popover-basic": { + name: "popover-basic", + filePath: "examples/base/popover-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/popover-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "popover-basic" + return { default: mod.default || mod[exportName] } + }), + }, "popover-demo": { name: "popover-demo", filePath: "examples/base/popover-demo.tsx", @@ -4661,6 +12294,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "popover-in-dialog": { + name: "popover-in-dialog", + filePath: "examples/base/popover-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./base/popover-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "popover-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "popover-with-form": { + name: "popover-with-form", + filePath: "examples/base/popover-with-form.tsx", + component: React.lazy(async () => { + const mod = await import("./base/popover-with-form") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "popover-with-form" + return { default: mod.default || mod[exportName] } + }), + }, + "progress-controlled": { + name: "progress-controlled", + filePath: "examples/base/progress-controlled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/progress-controlled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "progress-controlled" + return { default: mod.default || mod[exportName] } + }), + }, "progress-demo": { name: "progress-demo", filePath: "examples/base/progress-demo.tsx", @@ -4674,6 +12346,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "progress-values": { + name: "progress-values", + filePath: "examples/base/progress-values.tsx", + component: React.lazy(async () => { + const mod = await import("./base/progress-values") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "progress-values" + return { default: mod.default || mod[exportName] } + }), + }, + "progress-with-label": { + name: "progress-with-label", + filePath: "examples/base/progress-with-label.tsx", + component: React.lazy(async () => { + const mod = await import("./base/progress-with-label") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "progress-with-label" + return { default: mod.default || mod[exportName] } + }), + }, + "radio-fields": { + name: "radio-fields", + filePath: "examples/base/radio-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./base/radio-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "radio-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "radio-group-basic": { + name: "radio-group-basic", + filePath: "examples/base/radio-group-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/radio-group-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "radio-group-basic" + return { default: mod.default || mod[exportName] } + }), + }, "radio-group-demo": { name: "radio-group-demo", filePath: "examples/base/radio-group-demo.tsx", @@ -4687,6 +12411,84 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "radio-group-disabled": { + name: "radio-group-disabled", + filePath: "examples/base/radio-group-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/radio-group-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "radio-group-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "radio-group-grid": { + name: "radio-group-grid", + filePath: "examples/base/radio-group-grid.tsx", + component: React.lazy(async () => { + const mod = await import("./base/radio-group-grid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "radio-group-grid" + return { default: mod.default || mod[exportName] } + }), + }, + "radio-group-invalid": { + name: "radio-group-invalid", + filePath: "examples/base/radio-group-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./base/radio-group-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "radio-group-invalid" + return { default: mod.default || mod[exportName] } + }), + }, + "radio-group-with-descriptions": { + name: "radio-group-with-descriptions", + filePath: "examples/base/radio-group-with-descriptions.tsx", + component: React.lazy(async () => { + const mod = await import("./base/radio-group-with-descriptions") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "radio-group-with-descriptions" + return { default: mod.default || mod[exportName] } + }), + }, + "radio-group-with-field-set": { + name: "radio-group-with-field-set", + filePath: "examples/base/radio-group-with-field-set.tsx", + component: React.lazy(async () => { + const mod = await import("./base/radio-group-with-field-set") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "radio-group-with-field-set" + return { default: mod.default || mod[exportName] } + }), + }, + "resizable-controlled": { + name: "resizable-controlled", + filePath: "examples/base/resizable-controlled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/resizable-controlled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "resizable-controlled" + return { default: mod.default || mod[exportName] } + }), + }, "resizable-demo-with-handle": { name: "resizable-demo-with-handle", filePath: "examples/base/resizable-demo-with-handle.tsx", @@ -4726,6 +12528,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "resizable-horizontal": { + name: "resizable-horizontal", + filePath: "examples/base/resizable-horizontal.tsx", + component: React.lazy(async () => { + const mod = await import("./base/resizable-horizontal") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "resizable-horizontal" + return { default: mod.default || mod[exportName] } + }), + }, + "resizable-nested": { + name: "resizable-nested", + filePath: "examples/base/resizable-nested.tsx", + component: React.lazy(async () => { + const mod = await import("./base/resizable-nested") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "resizable-nested" + return { default: mod.default || mod[exportName] } + }), + }, "resizable-vertical": { name: "resizable-vertical", filePath: "examples/base/resizable-vertical.tsx", @@ -4739,6 +12567,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "resizable-with-handle": { + name: "resizable-with-handle", + filePath: "examples/base/resizable-with-handle.tsx", + component: React.lazy(async () => { + const mod = await import("./base/resizable-with-handle") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "resizable-with-handle" + return { default: mod.default || mod[exportName] } + }), + }, "scroll-area-demo": { name: "scroll-area-demo", filePath: "examples/base/scroll-area-demo.tsx", @@ -4765,6 +12606,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "scroll-area-horizontal": { + name: "scroll-area-horizontal", + filePath: "examples/base/scroll-area-horizontal.tsx", + component: React.lazy(async () => { + const mod = await import("./base/scroll-area-horizontal") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "scroll-area-horizontal" + return { default: mod.default || mod[exportName] } + }), + }, + "scroll-area-vertical": { + name: "scroll-area-vertical", + filePath: "examples/base/scroll-area-vertical.tsx", + component: React.lazy(async () => { + const mod = await import("./base/scroll-area-vertical") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "scroll-area-vertical" + return { default: mod.default || mod[exportName] } + }), + }, + "select-basic": { + name: "select-basic", + filePath: "examples/base/select-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-basic" + return { default: mod.default || mod[exportName] } + }), + }, "select-demo": { name: "select-demo", filePath: "examples/base/select-demo.tsx", @@ -4778,6 +12658,123 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "select-disabled": { + name: "select-disabled", + filePath: "examples/base/select-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "select-fields": { + name: "select-fields", + filePath: "examples/base/select-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "select-in-dialog": { + name: "select-in-dialog", + filePath: "examples/base/select-in-dialog.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-in-dialog") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-in-dialog" + return { default: mod.default || mod[exportName] } + }), + }, + "select-inline": { + name: "select-inline", + filePath: "examples/base/select-inline.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-inline") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-inline" + return { default: mod.default || mod[exportName] } + }), + }, + "select-invalid": { + name: "select-invalid", + filePath: "examples/base/select-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-invalid" + return { default: mod.default || mod[exportName] } + }), + }, + "select-item-aligned": { + name: "select-item-aligned", + filePath: "examples/base/select-item-aligned.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-item-aligned") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-item-aligned" + return { default: mod.default || mod[exportName] } + }), + }, + "select-large-list": { + name: "select-large-list", + filePath: "examples/base/select-large-list.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-large-list") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-large-list" + return { default: mod.default || mod[exportName] } + }), + }, + "select-multiple": { + name: "select-multiple", + filePath: "examples/base/select-multiple.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-multiple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-multiple" + return { default: mod.default || mod[exportName] } + }), + }, + "select-plan": { + name: "select-plan", + filePath: "examples/base/select-plan.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-plan") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-plan" + return { default: mod.default || mod[exportName] } + }), + }, "select-scrollable": { name: "select-scrollable", filePath: "examples/base/select-scrollable.tsx", @@ -4791,6 +12788,71 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "select-sizes": { + name: "select-sizes", + filePath: "examples/base/select-sizes.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-sizes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-sizes" + return { default: mod.default || mod[exportName] } + }), + }, + "select-with-button": { + name: "select-with-button", + filePath: "examples/base/select-with-button.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-with-button") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-with-button" + return { default: mod.default || mod[exportName] } + }), + }, + "select-with-field": { + name: "select-with-field", + filePath: "examples/base/select-with-field.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-with-field") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-with-field" + return { default: mod.default || mod[exportName] } + }), + }, + "select-with-groups": { + name: "select-with-groups", + filePath: "examples/base/select-with-groups.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-with-groups") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-with-groups" + return { default: mod.default || mod[exportName] } + }), + }, + "select-with-icons": { + name: "select-with-icons", + filePath: "examples/base/select-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./base/select-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "select-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, "separator-demo": { name: "separator-demo", filePath: "examples/base/separator-demo.tsx", @@ -4804,6 +12866,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "separator-horizontal": { + name: "separator-horizontal", + filePath: "examples/base/separator-horizontal.tsx", + component: React.lazy(async () => { + const mod = await import("./base/separator-horizontal") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "separator-horizontal" + return { default: mod.default || mod[exportName] } + }), + }, + "separator-in-list": { + name: "separator-in-list", + filePath: "examples/base/separator-in-list.tsx", + component: React.lazy(async () => { + const mod = await import("./base/separator-in-list") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "separator-in-list" + return { default: mod.default || mod[exportName] } + }), + }, + "separator-vertical-menu": { + name: "separator-vertical-menu", + filePath: "examples/base/separator-vertical-menu.tsx", + component: React.lazy(async () => { + const mod = await import("./base/separator-vertical-menu") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "separator-vertical-menu" + return { default: mod.default || mod[exportName] } + }), + }, + "separator-vertical": { + name: "separator-vertical", + filePath: "examples/base/separator-vertical.tsx", + component: React.lazy(async () => { + const mod = await import("./base/separator-vertical") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "separator-vertical" + return { default: mod.default || mod[exportName] } + }), + }, "sheet-demo": { name: "sheet-demo", filePath: "examples/base/sheet-demo.tsx", @@ -4817,6 +12931,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "sheet-no-close-button": { + name: "sheet-no-close-button", + filePath: "examples/base/sheet-no-close-button.tsx", + component: React.lazy(async () => { + const mod = await import("./base/sheet-no-close-button") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "sheet-no-close-button" + return { default: mod.default || mod[exportName] } + }), + }, "sheet-side": { name: "sheet-side", filePath: "examples/base/sheet-side.tsx", @@ -4830,6 +12957,45 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "sheet-with-form": { + name: "sheet-with-form", + filePath: "examples/base/sheet-with-form.tsx", + component: React.lazy(async () => { + const mod = await import("./base/sheet-with-form") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "sheet-with-form" + return { default: mod.default || mod[exportName] } + }), + }, + "sheet-with-sides": { + name: "sheet-with-sides", + filePath: "examples/base/sheet-with-sides.tsx", + component: React.lazy(async () => { + const mod = await import("./base/sheet-with-sides") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "sheet-with-sides" + return { default: mod.default || mod[exportName] } + }), + }, + "skeleton-avatar": { + name: "skeleton-avatar", + filePath: "examples/base/skeleton-avatar.tsx", + component: React.lazy(async () => { + const mod = await import("./base/skeleton-avatar") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "skeleton-avatar" + return { default: mod.default || mod[exportName] } + }), + }, "skeleton-card": { name: "skeleton-card", filePath: "examples/base/skeleton-card.tsx", @@ -4856,6 +13022,71 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "skeleton-form": { + name: "skeleton-form", + filePath: "examples/base/skeleton-form.tsx", + component: React.lazy(async () => { + const mod = await import("./base/skeleton-form") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "skeleton-form" + return { default: mod.default || mod[exportName] } + }), + }, + "skeleton-table": { + name: "skeleton-table", + filePath: "examples/base/skeleton-table.tsx", + component: React.lazy(async () => { + const mod = await import("./base/skeleton-table") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "skeleton-table" + return { default: mod.default || mod[exportName] } + }), + }, + "skeleton-text": { + name: "skeleton-text", + filePath: "examples/base/skeleton-text.tsx", + component: React.lazy(async () => { + const mod = await import("./base/skeleton-text") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "skeleton-text" + return { default: mod.default || mod[exportName] } + }), + }, + "slider-basic": { + name: "slider-basic", + filePath: "examples/base/slider-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/slider-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "slider-basic" + return { default: mod.default || mod[exportName] } + }), + }, + "slider-controlled": { + name: "slider-controlled", + filePath: "examples/base/slider-controlled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/slider-controlled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "slider-controlled" + return { default: mod.default || mod[exportName] } + }), + }, "slider-demo": { name: "slider-demo", filePath: "examples/base/slider-demo.tsx", @@ -4869,6 +13100,84 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "slider-disabled": { + name: "slider-disabled", + filePath: "examples/base/slider-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/slider-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "slider-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "slider-fields": { + name: "slider-fields", + filePath: "examples/base/slider-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./base/slider-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "slider-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "slider-multiple": { + name: "slider-multiple", + filePath: "examples/base/slider-multiple.tsx", + component: React.lazy(async () => { + const mod = await import("./base/slider-multiple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "slider-multiple" + return { default: mod.default || mod[exportName] } + }), + }, + "slider-range": { + name: "slider-range", + filePath: "examples/base/slider-range.tsx", + component: React.lazy(async () => { + const mod = await import("./base/slider-range") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "slider-range" + return { default: mod.default || mod[exportName] } + }), + }, + "slider-vertical": { + name: "slider-vertical", + filePath: "examples/base/slider-vertical.tsx", + component: React.lazy(async () => { + const mod = await import("./base/slider-vertical") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "slider-vertical" + return { default: mod.default || mod[exportName] } + }), + }, + "sonner-basic": { + name: "sonner-basic", + filePath: "examples/base/sonner-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/sonner-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "sonner-basic" + return { default: mod.default || mod[exportName] } + }), + }, "sonner-demo": { name: "sonner-demo", filePath: "examples/base/sonner-demo.tsx", @@ -4895,6 +13204,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "sonner-with-description": { + name: "sonner-with-description", + filePath: "examples/base/sonner-with-description.tsx", + component: React.lazy(async () => { + const mod = await import("./base/sonner-with-description") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "sonner-with-description" + return { default: mod.default || mod[exportName] } + }), + }, "spinner-badge": { name: "spinner-badge", filePath: "examples/base/spinner-badge.tsx", @@ -4986,6 +13308,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "spinner-in-badges": { + name: "spinner-in-badges", + filePath: "examples/base/spinner-in-badges.tsx", + component: React.lazy(async () => { + const mod = await import("./base/spinner-in-badges") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "spinner-in-badges" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-in-buttons": { + name: "spinner-in-buttons", + filePath: "examples/base/spinner-in-buttons.tsx", + component: React.lazy(async () => { + const mod = await import("./base/spinner-in-buttons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "spinner-in-buttons" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-in-empty": { + name: "spinner-in-empty", + filePath: "examples/base/spinner-in-empty.tsx", + component: React.lazy(async () => { + const mod = await import("./base/spinner-in-empty") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "spinner-in-empty" + return { default: mod.default || mod[exportName] } + }), + }, + "spinner-in-input-group": { + name: "spinner-in-input-group", + filePath: "examples/base/spinner-in-input-group.tsx", + component: React.lazy(async () => { + const mod = await import("./base/spinner-in-input-group") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "spinner-in-input-group" + return { default: mod.default || mod[exportName] } + }), + }, "spinner-input-group": { name: "spinner-input-group", filePath: "examples/base/spinner-input-group.tsx", @@ -5025,6 +13399,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "switch-basic": { + name: "switch-basic", + filePath: "examples/base/switch-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/switch-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "switch-basic" + return { default: mod.default || mod[exportName] } + }), + }, "switch-demo": { name: "switch-demo", filePath: "examples/base/switch-demo.tsx", @@ -5038,6 +13425,84 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "switch-disabled": { + name: "switch-disabled", + filePath: "examples/base/switch-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/switch-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "switch-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "switch-fields": { + name: "switch-fields", + filePath: "examples/base/switch-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./base/switch-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "switch-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "switch-sizes": { + name: "switch-sizes", + filePath: "examples/base/switch-sizes.tsx", + component: React.lazy(async () => { + const mod = await import("./base/switch-sizes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "switch-sizes" + return { default: mod.default || mod[exportName] } + }), + }, + "switch-with-description": { + name: "switch-with-description", + filePath: "examples/base/switch-with-description.tsx", + component: React.lazy(async () => { + const mod = await import("./base/switch-with-description") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "switch-with-description" + return { default: mod.default || mod[exportName] } + }), + }, + "switch-with-label": { + name: "switch-with-label", + filePath: "examples/base/switch-with-label.tsx", + component: React.lazy(async () => { + const mod = await import("./base/switch-with-label") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "switch-with-label" + return { default: mod.default || mod[exportName] } + }), + }, + "table-basic": { + name: "table-basic", + filePath: "examples/base/table-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/table-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "table-basic" + return { default: mod.default || mod[exportName] } + }), + }, "table-demo": { name: "table-demo", filePath: "examples/base/table-demo.tsx", @@ -5051,6 +13516,97 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "table-simple": { + name: "table-simple", + filePath: "examples/base/table-simple.tsx", + component: React.lazy(async () => { + const mod = await import("./base/table-simple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "table-simple" + return { default: mod.default || mod[exportName] } + }), + }, + "table-with-actions": { + name: "table-with-actions", + filePath: "examples/base/table-with-actions.tsx", + component: React.lazy(async () => { + const mod = await import("./base/table-with-actions") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "table-with-actions" + return { default: mod.default || mod[exportName] } + }), + }, + "table-with-badges": { + name: "table-with-badges", + filePath: "examples/base/table-with-badges.tsx", + component: React.lazy(async () => { + const mod = await import("./base/table-with-badges") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "table-with-badges" + return { default: mod.default || mod[exportName] } + }), + }, + "table-with-footer": { + name: "table-with-footer", + filePath: "examples/base/table-with-footer.tsx", + component: React.lazy(async () => { + const mod = await import("./base/table-with-footer") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "table-with-footer" + return { default: mod.default || mod[exportName] } + }), + }, + "table-with-input": { + name: "table-with-input", + filePath: "examples/base/table-with-input.tsx", + component: React.lazy(async () => { + const mod = await import("./base/table-with-input") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "table-with-input" + return { default: mod.default || mod[exportName] } + }), + }, + "table-with-select": { + name: "table-with-select", + filePath: "examples/base/table-with-select.tsx", + component: React.lazy(async () => { + const mod = await import("./base/table-with-select") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "table-with-select" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-basic": { + name: "tabs-basic", + filePath: "examples/base/tabs-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tabs-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-basic" + return { default: mod.default || mod[exportName] } + }), + }, "tabs-demo": { name: "tabs-demo", filePath: "examples/base/tabs-demo.tsx", @@ -5064,6 +13620,175 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "tabs-disabled": { + name: "tabs-disabled", + filePath: "examples/base/tabs-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tabs-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-icon-only": { + name: "tabs-icon-only", + filePath: "examples/base/tabs-icon-only.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tabs-icon-only") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-icon-only" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-line-disabled": { + name: "tabs-line-disabled", + filePath: "examples/base/tabs-line-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tabs-line-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-line-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-line-with-content": { + name: "tabs-line-with-content", + filePath: "examples/base/tabs-line-with-content.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tabs-line-with-content") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-line-with-content" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-line": { + name: "tabs-line", + filePath: "examples/base/tabs-line.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tabs-line") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-line" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-multiple": { + name: "tabs-multiple", + filePath: "examples/base/tabs-multiple.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tabs-multiple") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-multiple" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-variants-comparison": { + name: "tabs-variants-comparison", + filePath: "examples/base/tabs-variants-comparison.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tabs-variants-comparison") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-variants-comparison" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-vertical": { + name: "tabs-vertical", + filePath: "examples/base/tabs-vertical.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tabs-vertical") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-vertical" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-with-content": { + name: "tabs-with-content", + filePath: "examples/base/tabs-with-content.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tabs-with-content") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-with-content" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-with-dropdown": { + name: "tabs-with-dropdown", + filePath: "examples/base/tabs-with-dropdown.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tabs-with-dropdown") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-with-dropdown" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-with-icons": { + name: "tabs-with-icons", + filePath: "examples/base/tabs-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tabs-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "tabs-with-input-and-button": { + name: "tabs-with-input-and-button", + filePath: "examples/base/tabs-with-input-and-button.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tabs-with-input-and-button") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tabs-with-input-and-button" + return { default: mod.default || mod[exportName] } + }), + }, + "textarea-basic": { + name: "textarea-basic", + filePath: "examples/base/textarea-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/textarea-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "textarea-basic" + return { default: mod.default || mod[exportName] } + }), + }, "textarea-demo": { name: "textarea-demo", filePath: "examples/base/textarea-demo.tsx", @@ -5090,6 +13815,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "textarea-fields": { + name: "textarea-fields", + filePath: "examples/base/textarea-fields.tsx", + component: React.lazy(async () => { + const mod = await import("./base/textarea-fields") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "textarea-fields" + return { default: mod.default || mod[exportName] } + }), + }, + "textarea-invalid": { + name: "textarea-invalid", + filePath: "examples/base/textarea-invalid.tsx", + component: React.lazy(async () => { + const mod = await import("./base/textarea-invalid") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "textarea-invalid" + return { default: mod.default || mod[exportName] } + }), + }, "textarea-with-button": { name: "textarea-with-button", filePath: "examples/base/textarea-with-button.tsx", @@ -5103,6 +13854,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "textarea-with-description": { + name: "textarea-with-description", + filePath: "examples/base/textarea-with-description.tsx", + component: React.lazy(async () => { + const mod = await import("./base/textarea-with-description") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "textarea-with-description" + return { default: mod.default || mod[exportName] } + }), + }, "textarea-with-label": { name: "textarea-with-label", filePath: "examples/base/textarea-with-label.tsx", @@ -5129,6 +13893,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-basic": { + name: "toggle-basic", + filePath: "examples/base/toggle-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-basic" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-demo": { name: "toggle-demo", filePath: "examples/base/toggle-demo.tsx", @@ -5155,6 +13932,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-group-basic": { + name: "toggle-group-basic", + filePath: "examples/base/toggle-group-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-basic" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-date-range": { + name: "toggle-group-date-range", + filePath: "examples/base/toggle-group-date-range.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-date-range") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-date-range" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-group-demo": { name: "toggle-group-demo", filePath: "examples/base/toggle-group-demo.tsx", @@ -5181,6 +13984,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-group-filter": { + name: "toggle-group-filter", + filePath: "examples/base/toggle-group-filter.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-filter") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-filter" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-group-lg": { name: "toggle-group-lg", filePath: "examples/base/toggle-group-lg.tsx", @@ -5194,6 +14010,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-group-outline-with-icons": { + name: "toggle-group-outline-with-icons", + filePath: "examples/base/toggle-group-outline-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-outline-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-outline-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-group-outline": { name: "toggle-group-outline", filePath: "examples/base/toggle-group-outline.tsx", @@ -5220,6 +14049,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-group-sizes": { + name: "toggle-group-sizes", + filePath: "examples/base/toggle-group-sizes.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-sizes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-sizes" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-group-sm": { name: "toggle-group-sm", filePath: "examples/base/toggle-group-sm.tsx", @@ -5233,6 +14075,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-group-sort": { + name: "toggle-group-sort", + filePath: "examples/base/toggle-group-sort.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-sort") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-sort" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-group-spacing": { name: "toggle-group-spacing", filePath: "examples/base/toggle-group-spacing.tsx", @@ -5246,6 +14101,86 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-group-vertical-outline-with-icons": { + name: "toggle-group-vertical-outline-with-icons", + filePath: "examples/base/toggle-group-vertical-outline-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import( + "./base/toggle-group-vertical-outline-with-icons" + ) + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-vertical-outline-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-vertical-outline": { + name: "toggle-group-vertical-outline", + filePath: "examples/base/toggle-group-vertical-outline.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-vertical-outline") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-vertical-outline" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-vertical-with-spacing": { + name: "toggle-group-vertical-with-spacing", + filePath: "examples/base/toggle-group-vertical-with-spacing.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-vertical-with-spacing") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-vertical-with-spacing" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-vertical": { + name: "toggle-group-vertical", + filePath: "examples/base/toggle-group-vertical.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-vertical") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-vertical" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-with-icons": { + name: "toggle-group-with-icons", + filePath: "examples/base/toggle-group-with-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-with-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-with-icons" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-group-with-input-and-select": { + name: "toggle-group-with-input-and-select", + filePath: "examples/base/toggle-group-with-input-and-select.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-group-with-input-and-select") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-group-with-input-and-select" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-lg": { name: "toggle-lg", filePath: "examples/base/toggle-lg.tsx", @@ -5272,6 +14207,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-sizes": { + name: "toggle-sizes", + filePath: "examples/base/toggle-sizes.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-sizes") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-sizes" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-sm": { name: "toggle-sm", filePath: "examples/base/toggle-sm.tsx", @@ -5285,6 +14233,58 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "toggle-with-button-icon-text": { + name: "toggle-with-button-icon-text", + filePath: "examples/base/toggle-with-button-icon-text.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-with-button-icon-text") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-with-button-icon-text" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-with-button-icon": { + name: "toggle-with-button-icon", + filePath: "examples/base/toggle-with-button-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-with-button-icon") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-with-button-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-with-button-text": { + name: "toggle-with-button-text", + filePath: "examples/base/toggle-with-button-text.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-with-button-text") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-with-button-text" + return { default: mod.default || mod[exportName] } + }), + }, + "toggle-with-icon": { + name: "toggle-with-icon", + filePath: "examples/base/toggle-with-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./base/toggle-with-icon") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "toggle-with-icon" + return { default: mod.default || mod[exportName] } + }), + }, "toggle-with-text": { name: "toggle-with-text", filePath: "examples/base/toggle-with-text.tsx", @@ -5298,6 +14298,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "tooltip-basic": { + name: "tooltip-basic", + filePath: "examples/base/tooltip-basic.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tooltip-basic") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-basic" + return { default: mod.default || mod[exportName] } + }), + }, "tooltip-demo": { name: "tooltip-demo", filePath: "examples/base/tooltip-demo.tsx", @@ -5311,6 +14324,97 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "tooltip-disabled": { + name: "tooltip-disabled", + filePath: "examples/base/tooltip-disabled.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tooltip-disabled") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-disabled" + return { default: mod.default || mod[exportName] } + }), + }, + "tooltip-formatted": { + name: "tooltip-formatted", + filePath: "examples/base/tooltip-formatted.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tooltip-formatted") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-formatted" + return { default: mod.default || mod[exportName] } + }), + }, + "tooltip-long-content": { + name: "tooltip-long-content", + filePath: "examples/base/tooltip-long-content.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tooltip-long-content") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-long-content" + return { default: mod.default || mod[exportName] } + }), + }, + "tooltip-on-link": { + name: "tooltip-on-link", + filePath: "examples/base/tooltip-on-link.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tooltip-on-link") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-on-link" + return { default: mod.default || mod[exportName] } + }), + }, + "tooltip-sides": { + name: "tooltip-sides", + filePath: "examples/base/tooltip-sides.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tooltip-sides") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-sides" + return { default: mod.default || mod[exportName] } + }), + }, + "tooltip-with-icon": { + name: "tooltip-with-icon", + filePath: "examples/base/tooltip-with-icon.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tooltip-with-icon") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-with-icon" + return { default: mod.default || mod[exportName] } + }), + }, + "tooltip-with-keyboard": { + name: "tooltip-with-keyboard", + filePath: "examples/base/tooltip-with-keyboard.tsx", + component: React.lazy(async () => { + const mod = await import("./base/tooltip-with-keyboard") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "tooltip-with-keyboard" + return { default: mod.default || mod[exportName] } + }), + }, "typography-blockquote": { name: "typography-blockquote", filePath: "examples/base/typography-blockquote.tsx", diff --git a/apps/v4/examples/base/accordion-basic.tsx b/apps/v4/examples/base/accordion-basic.tsx new file mode 100644 index 000000000..623626299 --- /dev/null +++ b/apps/v4/examples/base/accordion-basic.tsx @@ -0,0 +1,39 @@ +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/examples/base/ui/accordion" + +export function AccordionBasic() { + const items = [ + { + value: "item-1", + trigger: "Is it accessible?", + content: "Yes. It adheres to the WAI-ARIA design pattern.", + }, + { + value: "item-2", + trigger: "Is it styled?", + content: + "Yes. It comes with default styles that matches the other components' aesthetic.", + }, + { + value: "item-3", + trigger: "Is it animated?", + content: + "Yes. It's animated by default, but you can disable it if you prefer.", + }, + ] + + return ( + + {items.map((item) => ( + + {item.trigger} + {item.content} + + ))} + + ) +} diff --git a/apps/v4/examples/base/accordion-in-card.tsx b/apps/v4/examples/base/accordion-in-card.tsx new file mode 100644 index 000000000..a835e281c --- /dev/null +++ b/apps/v4/examples/base/accordion-in-card.tsx @@ -0,0 +1,142 @@ +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/examples/base/ui/accordion" +import { Button } from "@/examples/base/ui/button" +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" +import { ArrowUpRightIcon } from "lucide-react" + +export function AccordionInCard() { + const items = [ + { + value: "plans", + trigger: "What subscription plans do you offer?", + content: ( + <> +

+ We offer three subscription tiers: Starter ($9/month), Professional + ($29/month), and Enterprise ($99/month). Each plan includes + increasing storage limits, API access, priority support, and team + collaboration features. +

+

+ Annual billing is available with a 20% discount. All + plans include a 14-day free trial with no credit card required. +

+ + + ), + }, + { + value: "billing", + trigger: "How does billing work?", + content: ( + <> +

+ Billing occurs automatically at the start of each billing cycle. We + accept all major credit cards, PayPal, and ACH transfers for + enterprise customers. +

+

+ You'll receive an invoice via email after each payment. You can + update your payment method or billing information anytime in your + account settings. Failed payments will trigger automated retry + attempts and email notifications. +

+ + ), + }, + { + value: "upgrade", + trigger: "Can I upgrade or downgrade my plan?", + content: ( + <> +

+ Yes, you can change your plan at any time. When upgrading, + you'll be charged a prorated amount for the remainder of your + billing cycle and immediately gain access to new features. +

+

+ When downgrading, the change takes effect at the end of your current + billing period, and you'll retain access to premium features + until then. No refunds are provided for downgrades. +

+ + ), + }, + { + value: "cancel", + trigger: "How do I cancel my subscription?", + content: ( + <> +

+ You can cancel your subscription anytime from your account settings. + There are no cancellation fees or penalties. Your access will + continue until the end of your current billing period. +

+

+ After cancellation, your data is retained for 30 days in case you + want to reactivate. You can export all your data before or after + canceling. We'd love to hear your feedback about why + you're leaving. +

+ + ), + }, + { + value: "refund", + trigger: "What is your refund policy?", + content: ( + <> +

+ We offer a 30-day money-back guarantee for new subscriptions. If + you're not satisfied within the first 30 days, contact our + support team for a full refund. +

+

+ After 30 days, we don't provide refunds for partial billing + periods, but you can cancel anytime to avoid future charges. + Enterprise customers have custom refund terms outlined in their + contracts. +

+ + ), + }, + ] + + return ( + + + Subscription & Billing + + Common questions about your account, plans, and payments + + + + + {items.map((item) => ( + + {item.trigger} + {item.content} + + ))} + + + + ) +} diff --git a/apps/v4/examples/base/accordion-multiple.tsx b/apps/v4/examples/base/accordion-multiple.tsx index 809644f3d..94a6fd33d 100644 --- a/apps/v4/examples/base/accordion-multiple.tsx +++ b/apps/v4/examples/base/accordion-multiple.tsx @@ -5,42 +5,32 @@ import { AccordionTrigger, } from "@/examples/base/ui/accordion" -export default function AccordionMultiple() { +export function AccordionMultiple() { + const items = [ + { + value: "item-1", + trigger: + "What are the key considerations when implementing a comprehensive enterprise-level authentication system?", + content: + "Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.", + }, + { + value: "item-2", + trigger: + "How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?", + content: + "Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.", + }, + ] + return ( - - - - What are the key considerations when implementing a comprehensive - enterprise-level authentication system? - - - Implementing a robust enterprise authentication system requires - careful consideration of multiple factors. This includes secure - password hashing and storage, multi-factor authentication (MFA) - implementation, session management, OAuth2 and SSO integration, - regular security audits, rate limiting to prevent brute force attacks, - and maintaining detailed audit logs. Additionally, you'll need to - consider scalability, performance impact, and compliance with relevant - data protection regulations such as GDPR or HIPAA. - - - - - How does modern distributed system architecture handle eventual - consistency and data synchronization across multiple regions? - - - Modern distributed systems employ various strategies to maintain data - consistency across regions. This often involves using techniques like - CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip - protocols. Systems might implement event sourcing patterns, utilize - message queues for asynchronous updates, and employ sophisticated - conflict resolution strategies. Popular solutions like Amazon's - DynamoDB and Google's Spanner demonstrate different approaches to - solving these challenges, balancing between consistency, availability, - and partition tolerance as described in the CAP theorem. - - + + {items.map((item) => ( + + {item.trigger} + {item.content} + + ))} ) } diff --git a/apps/v4/examples/base/accordion-with-borders.tsx b/apps/v4/examples/base/accordion-with-borders.tsx new file mode 100644 index 000000000..7e271f681 --- /dev/null +++ b/apps/v4/examples/base/accordion-with-borders.tsx @@ -0,0 +1,59 @@ +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/examples/base/ui/accordion" + +export function AccordionWithBorders() { + const items = [ + { + value: "billing", + trigger: "How does billing work?", + content: + "We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.", + }, + { + value: "security", + trigger: "Is my data secure?", + content: + "Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.", + }, + { + value: "integration", + trigger: "What integrations do you support?", + content: ( + <> +

+ We integrate with 500+ popular tools including Slack, Zapier, + Salesforce, HubSpot, and more. You can also build custom + integrations using our REST API and webhooks.{" "} +

+

+ Our API documentation includes code examples in 10+ programming + languages. +

+ + ), + }, + ] + + return ( + + {items.map((item) => ( + + + {item.trigger} + + + {item.content} + + + ))} + + ) +} diff --git a/apps/v4/examples/base/accordion-with-disabled.tsx b/apps/v4/examples/base/accordion-with-disabled.tsx new file mode 100644 index 000000000..ace185f31 --- /dev/null +++ b/apps/v4/examples/base/accordion-with-disabled.tsx @@ -0,0 +1,52 @@ +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/examples/base/ui/accordion" + +export function AccordionWithDisabled() { + const items = [ + { + value: "item-1", + trigger: "Can I access my account history?", + content: + "Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.", + disabled: false, + }, + { + value: "item-2", + trigger: "Premium feature information", + content: + "This section contains information about premium features. Upgrade your plan to access this content.", + disabled: true, + }, + { + value: "item-3", + trigger: "How do I update my email address?", + content: + "You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.", + disabled: false, + }, + ] + + return ( + + {items.map((item) => ( + + + {item.trigger} + + + {item.content} + + + ))} + + ) +} diff --git a/apps/v4/examples/base/alert-dialog-basic.tsx b/apps/v4/examples/base/alert-dialog-basic.tsx new file mode 100644 index 000000000..b2fa0336c --- /dev/null +++ b/apps/v4/examples/base/alert-dialog-basic.tsx @@ -0,0 +1,33 @@ +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/examples/base/ui/alert-dialog" +import { Button } from "@/examples/base/ui/button" + +export function AlertDialogBasic() { + return ( + + Default} /> + + + Are you absolutely sure? + + This action cannot be undone. This will permanently delete your + account and remove your data from our servers. + + + + Cancel + Continue + + + + ) +} diff --git a/apps/v4/examples/base/alert-dialog-destructive.tsx b/apps/v4/examples/base/alert-dialog-destructive.tsx new file mode 100644 index 000000000..b622b066f --- /dev/null +++ b/apps/v4/examples/base/alert-dialog-destructive.tsx @@ -0,0 +1,40 @@ +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogMedia, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/examples/base/ui/alert-dialog" +import { Button } from "@/examples/base/ui/button" +import { Trash2Icon } from "lucide-react" + +export function AlertDialogDestructive() { + return ( + + Delete Chat} + /> + + + + + + Delete chat? + + This will permanently delete this chat conversation. View{" "} + Settings delete any memories saved during this chat. + + + + Cancel + Delete + + + + ) +} diff --git a/apps/v4/examples/base/alert-dialog-in-dialog.tsx b/apps/v4/examples/base/alert-dialog-in-dialog.tsx new file mode 100644 index 000000000..39a24212c --- /dev/null +++ b/apps/v4/examples/base/alert-dialog-in-dialog.tsx @@ -0,0 +1,61 @@ +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/examples/base/ui/alert-dialog" +import { Button } from "@/examples/base/ui/button" +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/examples/base/ui/dialog" + +export function AlertDialogInDialog() { + return ( + <> + + }> + Open Dialog + + + + Alert Dialog Example + + Click the button below to open an alert dialog. + + + + + }> + Open Alert Dialog + + + + Are you absolutely sure? + + This action cannot be undone. This will permanently delete + your account and remove your data from our servers. + + + + Cancel + Continue + + + + + + + + ) +} diff --git a/apps/v4/examples/base/alert-dialog-small-with-media.tsx b/apps/v4/examples/base/alert-dialog-small-with-media.tsx new file mode 100644 index 000000000..c14e524a1 --- /dev/null +++ b/apps/v4/examples/base/alert-dialog-small-with-media.tsx @@ -0,0 +1,40 @@ +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogMedia, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/examples/base/ui/alert-dialog" +import { Button } from "@/examples/base/ui/button" +import { BluetoothIcon } from "lucide-react" + +export function AlertDialogSmallWithMedia() { + return ( + + Small (Media)} + /> + + + + + + + Allow accessory to connect? + + Do you want to allow the USB accessory to connect to this device? + + + + Don't allow + Allow + + + + ) +} diff --git a/apps/v4/examples/base/alert-dialog-small.tsx b/apps/v4/examples/base/alert-dialog-small.tsx new file mode 100644 index 000000000..1718fd5fe --- /dev/null +++ b/apps/v4/examples/base/alert-dialog-small.tsx @@ -0,0 +1,32 @@ +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/examples/base/ui/alert-dialog" +import { Button } from "@/examples/base/ui/button" + +export function AlertDialogSmall() { + return ( + + Small} /> + + + Allow accessory to connect? + + Do you want to allow the USB accessory to connect to this device? + + + + Don't allow + Allow + + + + ) +} diff --git a/apps/v4/examples/base/alert-dialog-with-media.tsx b/apps/v4/examples/base/alert-dialog-with-media.tsx new file mode 100644 index 000000000..b74bd8d2c --- /dev/null +++ b/apps/v4/examples/base/alert-dialog-with-media.tsx @@ -0,0 +1,40 @@ +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogMedia, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/examples/base/ui/alert-dialog" +import { Button } from "@/examples/base/ui/button" +import { BluetoothIcon } from "lucide-react" + +export function AlertDialogWithMedia() { + return ( + + Default (Media)} + /> + + + + + + Are you absolutely sure? + + This will permanently delete your account and remove your data from + our servers. + + + + Cancel + Continue + + + + ) +} diff --git a/apps/v4/examples/base/alert-example1.tsx b/apps/v4/examples/base/alert-example1.tsx new file mode 100644 index 000000000..2b5972a65 --- /dev/null +++ b/apps/v4/examples/base/alert-example1.tsx @@ -0,0 +1,22 @@ +import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert" + +export function AlertExample1() { + return ( +
+ + Success! Your changes have been saved. + + + Success! Your changes have been saved. + + This is an alert with title and description. + + + + + This one has a description only. No title. No icon. + + +
+ ) +} diff --git a/apps/v4/examples/base/alert-example2.tsx b/apps/v4/examples/base/alert-example2.tsx new file mode 100644 index 000000000..16a82c915 --- /dev/null +++ b/apps/v4/examples/base/alert-example2.tsx @@ -0,0 +1,62 @@ +import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert" +import { CircleAlertIcon } from "lucide-react" + +export function AlertExample2() { + return ( +
+ + + + Let's try one with icon, title and a link. + + + + + + This one has an icon and a description only. No title.{" "} + But it has a link and a second link. + + + + + + Success! Your changes have been saved + + This is an alert with icon, title and description. + + + + + + This is a very long alert title that demonstrates how the component + handles extended text content and potentially wraps across multiple + lines + + + + + + This is a very long alert description that demonstrates how the + component handles extended text content and potentially wraps across + multiple lines + + + + + + This is an extremely long alert title that spans multiple lines to + demonstrate how the component handles very lengthy headings while + maintaining readability and proper text wrapping behavior + + + This is an equally long description that contains detailed information + about the alert. It shows how the component can accommodate extensive + content while preserving proper spacing, alignment, and readability + across different screen sizes and viewport widths. This helps ensure + the user experience remains consistent regardless of the content + length. + + +
+ ) +} diff --git a/apps/v4/examples/base/alert-example3.tsx b/apps/v4/examples/base/alert-example3.tsx new file mode 100644 index 000000000..23ae7d7c7 --- /dev/null +++ b/apps/v4/examples/base/alert-example3.tsx @@ -0,0 +1,31 @@ +import { Alert, AlertDescription, AlertTitle } from "@/examples/base/ui/alert" +import { CircleAlertIcon } from "lucide-react" + +export function AlertExample3() { + return ( +
+ + + Something went wrong! + + Your session has expired. Please log in again. + + + + + Unable to process your payment. + +

+ Please verify your billing information and try + again. +

+
    +
  • Check your card details
    • +
  • Ensure sufficient funds
    • +
  • Verify billing address
    • +
+ + +
+ ) +} diff --git a/apps/v4/examples/base/alert-example4.tsx b/apps/v4/examples/base/alert-example4.tsx new file mode 100644 index 000000000..bc92ef73e --- /dev/null +++ b/apps/v4/examples/base/alert-example4.tsx @@ -0,0 +1,34 @@ +import { + Alert, + AlertAction, + AlertDescription, + AlertTitle, +} from "@/examples/base/ui/alert" +import { Badge } from "@/examples/base/ui/badge" +import { Button } from "@/examples/base/ui/button" +import { CircleAlertIcon } from "lucide-react" + +export function AlertExample4() { + return ( +
+ + + The selected emails have been marked as spam. + + + + + + + The selected emails have been marked as spam. + + This is a very long alert title that demonstrates how the component + handles extended text content. + + + Badge + + +
+ ) +} diff --git a/apps/v4/examples/base/aspect-ratio16x9.tsx b/apps/v4/examples/base/aspect-ratio16x9.tsx new file mode 100644 index 000000000..b1c364b7a --- /dev/null +++ b/apps/v4/examples/base/aspect-ratio16x9.tsx @@ -0,0 +1,15 @@ +import Image from "next/image" +import { AspectRatio } from "@/examples/base/ui/aspect-ratio" + +export function AspectRatio16x9() { + return ( + + Photo + + ) +} diff --git a/apps/v4/examples/base/aspect-ratio1x1.tsx b/apps/v4/examples/base/aspect-ratio1x1.tsx new file mode 100644 index 000000000..50b082091 --- /dev/null +++ b/apps/v4/examples/base/aspect-ratio1x1.tsx @@ -0,0 +1,15 @@ +import Image from "next/image" +import { AspectRatio } from "@/examples/base/ui/aspect-ratio" + +export function AspectRatio1x1() { + return ( + + Photo + + ) +} diff --git a/apps/v4/examples/base/aspect-ratio21x9.tsx b/apps/v4/examples/base/aspect-ratio21x9.tsx new file mode 100644 index 000000000..102cad54f --- /dev/null +++ b/apps/v4/examples/base/aspect-ratio21x9.tsx @@ -0,0 +1,15 @@ +import Image from "next/image" +import { AspectRatio } from "@/examples/base/ui/aspect-ratio" + +export function AspectRatio21x9() { + return ( + + Photo + + ) +} diff --git a/apps/v4/examples/base/aspect-ratio9x16.tsx b/apps/v4/examples/base/aspect-ratio9x16.tsx new file mode 100644 index 000000000..e81b55ff6 --- /dev/null +++ b/apps/v4/examples/base/aspect-ratio9x16.tsx @@ -0,0 +1,15 @@ +import Image from "next/image" +import { AspectRatio } from "@/examples/base/ui/aspect-ratio" + +export function AspectRatio9x16() { + return ( + + Photo + + ) +} diff --git a/apps/v4/examples/base/avatar-group-example.tsx b/apps/v4/examples/base/avatar-group-example.tsx new file mode 100644 index 000000000..bd4564bfb --- /dev/null +++ b/apps/v4/examples/base/avatar-group-example.tsx @@ -0,0 +1,73 @@ +import { + Avatar, + AvatarFallback, + AvatarGroup, + AvatarImage, +} from "@/examples/base/ui/avatar" + +export function AvatarGroupExample() { + return ( + <> + + + + CN + + + + LR + + + + ER + + + + + + CN + + + + LR + + + + ER + + + + + + CN + + + + LR + + + + ER + + + + ) +} diff --git a/apps/v4/examples/base/avatar-group-with-count.tsx b/apps/v4/examples/base/avatar-group-with-count.tsx new file mode 100644 index 000000000..9034275a0 --- /dev/null +++ b/apps/v4/examples/base/avatar-group-with-count.tsx @@ -0,0 +1,77 @@ +import { + Avatar, + AvatarFallback, + AvatarGroup, + AvatarGroupCount, + AvatarImage, +} from "@/examples/base/ui/avatar" + +export function AvatarGroupWithCount() { + return ( + <> + + + + CN + + + + LR + + + + ER + + +3 + + + + + CN + + + + LR + + + + ER + + +3 + + + + + CN + + + + LR + + + + ER + + +3 + + + ) +} diff --git a/apps/v4/examples/base/avatar-group-with-icon-count.tsx b/apps/v4/examples/base/avatar-group-with-icon-count.tsx new file mode 100644 index 000000000..439288e19 --- /dev/null +++ b/apps/v4/examples/base/avatar-group-with-icon-count.tsx @@ -0,0 +1,90 @@ +import { + Avatar, + AvatarFallback, + AvatarGroup, + AvatarGroupCount, + AvatarImage, +} from "@/examples/base/ui/avatar" +import { PlusIcon } from "lucide-react" + +export function AvatarGroupWithIconCount() { + return ( + <> + + + + CN + + + + LR + + + + ER + + + + + + + + + CN + + + + LR + + + + ER + + + + + + + + + CN + + + + LR + + + + ER + + + + + + + ) +} diff --git a/apps/v4/examples/base/avatar-in-empty.tsx b/apps/v4/examples/base/avatar-in-empty.tsx new file mode 100644 index 000000000..6d21fa8c1 --- /dev/null +++ b/apps/v4/examples/base/avatar-in-empty.tsx @@ -0,0 +1,67 @@ +import { + Avatar, + AvatarFallback, + AvatarGroup, + AvatarGroupCount, + AvatarImage, +} from "@/examples/base/ui/avatar" +import { Button } from "@/examples/base/ui/button" +import { + Empty, + EmptyContent, + EmptyDescription, + EmptyHeader, + EmptyMedia, + EmptyTitle, +} from "@/examples/base/ui/empty" +import { PlusIcon } from "lucide-react" + +export function AvatarInEmpty() { + return ( + + + + + + + CN + + + + LR + + + + ER + + + + + + + No Team Members + + Invite your team to collaborate on this project. + + + + + + + ) +} diff --git a/apps/v4/examples/base/avatar-sizes.tsx b/apps/v4/examples/base/avatar-sizes.tsx new file mode 100644 index 000000000..ae87e6f27 --- /dev/null +++ b/apps/v4/examples/base/avatar-sizes.tsx @@ -0,0 +1,33 @@ +import { Avatar, AvatarFallback, AvatarImage } from "@/examples/base/ui/avatar" + +export function AvatarSizes() { + return ( + <> +
+ + + CN + + + + CN + + + + CN + +
+
+ + CN + + + CN + + + CN + +
+ + ) +} diff --git a/apps/v4/examples/base/avatar-with-badge-icon.tsx b/apps/v4/examples/base/avatar-with-badge-icon.tsx new file mode 100644 index 000000000..442ba46c0 --- /dev/null +++ b/apps/v4/examples/base/avatar-with-badge-icon.tsx @@ -0,0 +1,66 @@ +import { + Avatar, + AvatarBadge, + AvatarFallback, + AvatarImage, +} from "@/examples/base/ui/avatar" +import { CheckIcon, PlusIcon } from "lucide-react" + +export function AvatarWithBadgeIcon() { + return ( + <> +
+ + + PP + + + + + + + PP + + + + + + + PP + + + + +
+
+ + PP + + + + + + PP + + + + + + PP + + + + +
+ + ) +} diff --git a/apps/v4/examples/base/avatar-with-badge.tsx b/apps/v4/examples/base/avatar-with-badge.tsx new file mode 100644 index 000000000..47d67d20f --- /dev/null +++ b/apps/v4/examples/base/avatar-with-badge.tsx @@ -0,0 +1,53 @@ +import { + Avatar, + AvatarBadge, + AvatarFallback, + AvatarImage, +} from "@/examples/base/ui/avatar" + +export function AvatarWithBadge() { + return ( + <> +
+ + + JZ + + + + + JZ + + + + + JZ + + +
+
+ + JZ + + + + JZ + + + + JZ + + +
+ + ) +} diff --git a/apps/v4/examples/base/badge-as-link.tsx b/apps/v4/examples/base/badge-as-link.tsx new file mode 100644 index 000000000..7d3075314 --- /dev/null +++ b/apps/v4/examples/base/badge-as-link.tsx @@ -0,0 +1,40 @@ +import { Badge } from "@/examples/base/ui/badge" +import { ArrowUpRightIcon } from "lucide-react" + +export function BadgeAsLink() { + return ( +
+ + Link + + } + /> + + Link + + } + /> + + Link + + } + /> + + Link + + } + /> +
+ ) +} diff --git a/apps/v4/examples/base/badge-custom-colors.tsx b/apps/v4/examples/base/badge-custom-colors.tsx new file mode 100644 index 000000000..63893a3a6 --- /dev/null +++ b/apps/v4/examples/base/badge-custom-colors.tsx @@ -0,0 +1,35 @@ +import { Badge } from "@/examples/base/ui/badge" + +export function BadgeCustomColors() { + return ( +
+ + Blue + + + Green + + + Sky + + + Purple + + + Blue + + + Green + + + Sky + + + Purple + + + Red + +
+ ) +} diff --git a/apps/v4/examples/base/badge-long-text.tsx b/apps/v4/examples/base/badge-long-text.tsx new file mode 100644 index 000000000..52d8ba062 --- /dev/null +++ b/apps/v4/examples/base/badge-long-text.tsx @@ -0,0 +1,11 @@ +import { Badge } from "@/examples/base/ui/badge" + +export function BadgeLongText() { + return ( +
+ + A badge with a lot of text to see how it wraps + +
+ ) +} diff --git a/apps/v4/examples/base/badge-variants.tsx b/apps/v4/examples/base/badge-variants.tsx new file mode 100644 index 000000000..01d5e8f07 --- /dev/null +++ b/apps/v4/examples/base/badge-variants.tsx @@ -0,0 +1,14 @@ +import { Badge } from "@/examples/base/ui/badge" + +export function BadgeVariants() { + return ( +
+ Default + Secondary + Destructive + Outline + Ghost + Link +
+ ) +} diff --git a/apps/v4/examples/base/badge-with-icon-left.tsx b/apps/v4/examples/base/badge-with-icon-left.tsx new file mode 100644 index 000000000..9806d0dc8 --- /dev/null +++ b/apps/v4/examples/base/badge-with-icon-left.tsx @@ -0,0 +1,33 @@ +import { Badge } from "@/examples/base/ui/badge" +import { BadgeCheck } from "lucide-react" + +export function BadgeWithIconLeft() { + return ( +
+ + + Default + + + + Secondary + + + + Destructive + + + + Outline + + + + Ghost + + + + Link + +
+ ) +} diff --git a/apps/v4/examples/base/badge-with-icon-right.tsx b/apps/v4/examples/base/badge-with-icon-right.tsx new file mode 100644 index 000000000..3717a7c3e --- /dev/null +++ b/apps/v4/examples/base/badge-with-icon-right.tsx @@ -0,0 +1,33 @@ +import { Badge } from "@/examples/base/ui/badge" +import { ArrowRightIcon } from "lucide-react" + +export function BadgeWithIconRight() { + return ( +
+ + Default + + + + Secondary + + + + Destructive + + + + Outline + + + + Ghost + + + + Link + + +
+ ) +} diff --git a/apps/v4/examples/base/badge-with-spinner.tsx b/apps/v4/examples/base/badge-with-spinner.tsx new file mode 100644 index 000000000..fe1f661e7 --- /dev/null +++ b/apps/v4/examples/base/badge-with-spinner.tsx @@ -0,0 +1,33 @@ +import { Badge } from "@/examples/base/ui/badge" +import { Spinner } from "@/examples/base/ui/spinner" + +export function BadgeWithSpinner() { + return ( +
+ + + Default + + + + Secondary + + + + Destructive + + + + Outline + + + + Ghost + + + + Link + +
+ ) +} diff --git a/apps/v4/examples/base/breadcrumb-basic.tsx b/apps/v4/examples/base/breadcrumb-basic.tsx new file mode 100644 index 000000000..da3856ad5 --- /dev/null +++ b/apps/v4/examples/base/breadcrumb-basic.tsx @@ -0,0 +1,28 @@ +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/examples/base/ui/breadcrumb" + +export function BreadcrumbBasic() { + return ( + + + + Home + + + + Components + + + + Breadcrumb + + + + ) +} diff --git a/apps/v4/examples/base/breadcrumb-with-dropdown.tsx b/apps/v4/examples/base/breadcrumb-with-dropdown.tsx new file mode 100644 index 000000000..0e4b1b942 --- /dev/null +++ b/apps/v4/examples/base/breadcrumb-with-dropdown.tsx @@ -0,0 +1,52 @@ +import { + Breadcrumb, + BreadcrumbEllipsis, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/examples/base/ui/breadcrumb" +import { Button } from "@/examples/base/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/examples/base/ui/dropdown-menu" + +export function BreadcrumbWithDropdown() { + return ( + + + + Home + + + + + } + > + + Toggle menu + + + Documentation + Themes + GitHub + + + + + + Components + + + + Breadcrumb + + + + ) +} diff --git a/apps/v4/examples/base/breadcrumb-with-link.tsx b/apps/v4/examples/base/breadcrumb-with-link.tsx new file mode 100644 index 000000000..05350dd16 --- /dev/null +++ b/apps/v4/examples/base/breadcrumb-with-link.tsx @@ -0,0 +1,34 @@ +import Link from "next/link" +import { + Breadcrumb, + BreadcrumbEllipsis, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/examples/base/ui/breadcrumb" + +export function BreadcrumbWithLink() { + return ( + + + + Home} /> + + + + + + + + Components} /> + + + + Breadcrumb + + + + ) +} diff --git a/apps/v4/examples/base/button-examples.tsx b/apps/v4/examples/base/button-examples.tsx new file mode 100644 index 000000000..5916dd86c --- /dev/null +++ b/apps/v4/examples/base/button-examples.tsx @@ -0,0 +1,24 @@ +import { Button } from "@/examples/base/ui/button" +import { ArrowRightIcon } from "lucide-react" + +export function ButtonExamples() { + return ( +
+
+ + +
+
+ + +
+ +
+ ) +} diff --git a/apps/v4/examples/base/button-group-basic.tsx b/apps/v4/examples/base/button-group-basic.tsx new file mode 100644 index 000000000..149b5fcb4 --- /dev/null +++ b/apps/v4/examples/base/button-group-basic.tsx @@ -0,0 +1,13 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" + +export function ButtonGroupBasic() { + return ( +
+ + + + +
+ ) +} diff --git a/apps/v4/examples/base/button-group-navigation.tsx b/apps/v4/examples/base/button-group-navigation.tsx new file mode 100644 index 000000000..ad5908e3a --- /dev/null +++ b/apps/v4/examples/base/button-group-navigation.tsx @@ -0,0 +1,23 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react" + +export function ButtonGroupNavigation() { + return ( + + + + + + + + + + ) +} diff --git a/apps/v4/examples/base/button-group-nested.tsx b/apps/v4/examples/base/button-group-nested.tsx index 8aeeee9ab..1590c091d 100644 --- a/apps/v4/examples/base/button-group-nested.tsx +++ b/apps/v4/examples/base/button-group-nested.tsx @@ -1,36 +1,36 @@ -"use client" - import { Button } from "@/examples/base/ui/button" import { ButtonGroup } from "@/examples/base/ui/button-group" -import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react" +import { Input } from "@/examples/base/ui/input" +import { + InputGroup, + InputGroupAddon, + InputGroupInput, +} from "@/examples/base/ui/input-group" +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/examples/base/ui/tooltip" +import { AudioLinesIcon, PlusIcon } from "lucide-react" -export default function ButtonGroupNested() { +export function ButtonGroupNested() { return ( - - - - - - - + + + + }> + + + Voice Mode + + ) diff --git a/apps/v4/examples/base/button-group-pagination-split.tsx b/apps/v4/examples/base/button-group-pagination-split.tsx new file mode 100644 index 000000000..113fead12 --- /dev/null +++ b/apps/v4/examples/base/button-group-pagination-split.tsx @@ -0,0 +1,35 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react" + +export function ButtonGroupPaginationSplit() { + return ( + + + + + + + + + + + + + + ) +} diff --git a/apps/v4/examples/base/button-group-pagination.tsx b/apps/v4/examples/base/button-group-pagination.tsx new file mode 100644 index 000000000..53505fb04 --- /dev/null +++ b/apps/v4/examples/base/button-group-pagination.tsx @@ -0,0 +1,33 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react" + +export function ButtonGroupPagination() { + return ( + + + + + + + + + + ) +} diff --git a/apps/v4/examples/base/button-group-text-alignment.tsx b/apps/v4/examples/base/button-group-text-alignment.tsx new file mode 100644 index 000000000..8aeffd0ed --- /dev/null +++ b/apps/v4/examples/base/button-group-text-alignment.tsx @@ -0,0 +1,26 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { Field } from "@/examples/base/ui/field" +import { Label } from "@/examples/base/ui/label" + +export function ButtonGroupTextAlignment() { + return ( + + + + + + + + + + ) +} diff --git a/apps/v4/examples/base/button-group-vertical-nested.tsx b/apps/v4/examples/base/button-group-vertical-nested.tsx new file mode 100644 index 000000000..c8a5b4ff9 --- /dev/null +++ b/apps/v4/examples/base/button-group-vertical-nested.tsx @@ -0,0 +1,45 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { + CopyIcon, + FlipHorizontalIcon, + FlipVerticalIcon, + RotateCwIcon, + SearchIcon, + ShareIcon, + TrashIcon, +} from "lucide-react" + +export function ButtonGroupVerticalNested() { + return ( + + + + + + + + + + + + + + + + ) +} diff --git a/apps/v4/examples/base/button-group-vertical.tsx b/apps/v4/examples/base/button-group-vertical.tsx new file mode 100644 index 000000000..752f13914 --- /dev/null +++ b/apps/v4/examples/base/button-group-vertical.tsx @@ -0,0 +1,22 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { MinusIcon, PlusIcon } from "lucide-react" + +export function ButtonGroupVertical() { + return ( +
+ + + + +
+ ) +} diff --git a/apps/v4/examples/base/button-group-with-dropdown.tsx b/apps/v4/examples/base/button-group-with-dropdown.tsx new file mode 100644 index 000000000..6239bec91 --- /dev/null +++ b/apps/v4/examples/base/button-group-with-dropdown.tsx @@ -0,0 +1,90 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/examples/base/ui/dropdown-menu" +import { + AlertTriangleIcon, + CheckIcon, + ChevronDownIcon, + CopyIcon, + ShareIcon, + TrashIcon, + UserRoundXIcon, + VolumeX, +} from "lucide-react" + +export function ButtonGroupWithDropdown() { + return ( + <> +
+ + + + } + > + + + + Disable + + Uninstall + + + + + + + + } + > + + + + + + + Mute Conversation + + + + Mark as Read + + + + Report Conversation + + + + Block User + + + + Share Conversation + + + + Copy Conversation + + + + + + + Delete Conversation + + + + + +
+ + ) +} diff --git a/apps/v4/examples/base/button-group-with-fields.tsx b/apps/v4/examples/base/button-group-with-fields.tsx new file mode 100644 index 000000000..b65fa816c --- /dev/null +++ b/apps/v4/examples/base/button-group-with-fields.tsx @@ -0,0 +1,41 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { Field, FieldGroup } from "@/examples/base/ui/field" +import { Input } from "@/examples/base/ui/input" +import { + InputGroup, + InputGroupAddon, + InputGroupInput, +} from "@/examples/base/ui/input-group" +import { Label } from "@/examples/base/ui/label" +import { MinusIcon, PlusIcon } from "lucide-react" + +export function ButtonGroupWithFields() { + return ( + + + + + + + + W + + + px + + + + + + + + ) +} diff --git a/apps/v4/examples/base/button-group-with-icons.tsx b/apps/v4/examples/base/button-group-with-icons.tsx new file mode 100644 index 000000000..7b4df54a2 --- /dev/null +++ b/apps/v4/examples/base/button-group-with-icons.tsx @@ -0,0 +1,25 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { + FlipHorizontalIcon, + FlipVerticalIcon, + RotateCwIcon, +} from "lucide-react" + +export function ButtonGroupWithIcons() { + return ( +
+ + + + + +
+ ) +} diff --git a/apps/v4/examples/base/button-group-with-input-group.tsx b/apps/v4/examples/base/button-group-with-input-group.tsx new file mode 100644 index 000000000..0c7e74564 --- /dev/null +++ b/apps/v4/examples/base/button-group-with-input-group.tsx @@ -0,0 +1,20 @@ +import { Input } from "@/examples/base/ui/input" +import { + InputGroup, + InputGroupAddon, + InputGroupInput, +} from "@/examples/base/ui/input-group" +import { SearchIcon } from "lucide-react" + +export function ButtonGroupWithInputGroup() { + return ( +
+ + + + + + +
+ ) +} diff --git a/apps/v4/examples/base/button-group-with-input.tsx b/apps/v4/examples/base/button-group-with-input.tsx new file mode 100644 index 000000000..79cd7be12 --- /dev/null +++ b/apps/v4/examples/base/button-group-with-input.tsx @@ -0,0 +1,18 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { Input } from "@/examples/base/ui/input" + +export function ButtonGroupWithInput() { + return ( +
+ + + + + + + + +
+ ) +} diff --git a/apps/v4/examples/base/button-group-with-like.tsx b/apps/v4/examples/base/button-group-with-like.tsx new file mode 100644 index 000000000..e48eb3d84 --- /dev/null +++ b/apps/v4/examples/base/button-group-with-like.tsx @@ -0,0 +1,22 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { HeartIcon } from "lucide-react" + +export function ButtonGroupWithLike() { + return ( + + + + + ) +} diff --git a/apps/v4/examples/base/button-group-with-select-and-input.tsx b/apps/v4/examples/base/button-group-with-select-and-input.tsx new file mode 100644 index 000000000..524304002 --- /dev/null +++ b/apps/v4/examples/base/button-group-with-select-and-input.tsx @@ -0,0 +1,39 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { Input } from "@/examples/base/ui/input" +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/examples/base/ui/select" + +const durationItems = [ + { label: "Hours", value: "hours" }, + { label: "Days", value: "days" }, + { label: "Weeks", value: "weeks" }, +] + +export function ButtonGroupWithSelectAndInput() { + return ( + + + + + ) +} diff --git a/apps/v4/examples/base/button-group-with-select.tsx b/apps/v4/examples/base/button-group-with-select.tsx new file mode 100644 index 000000000..75ff7a8b0 --- /dev/null +++ b/apps/v4/examples/base/button-group-with-select.tsx @@ -0,0 +1,48 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup } from "@/examples/base/ui/button-group" +import { Field } from "@/examples/base/ui/field" +import { Input } from "@/examples/base/ui/input" +import { Label } from "@/examples/base/ui/label" +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/examples/base/ui/select" +import { ArrowRightIcon } from "lucide-react" + +const currencyItems = [ + { label: "$", value: "$" }, + { label: "€", value: "€" }, + { label: "£", value: "£" }, +] + +export function ButtonGroupWithSelect() { + return ( + + + + + + + + + ) +} diff --git a/apps/v4/examples/base/button-group-with-text.tsx b/apps/v4/examples/base/button-group-with-text.tsx new file mode 100644 index 000000000..89c619d35 --- /dev/null +++ b/apps/v4/examples/base/button-group-with-text.tsx @@ -0,0 +1,21 @@ +import { Button } from "@/examples/base/ui/button" +import { ButtonGroup, ButtonGroupText } from "@/examples/base/ui/button-group" +import { Input } from "@/examples/base/ui/input" +import { Label } from "@/examples/base/ui/label" + +export function ButtonGroupWithText() { + return ( +
+ + Text + + + + }> + GPU Size + + + +
+ ) +} diff --git a/apps/v4/examples/base/button-icon-left.tsx b/apps/v4/examples/base/button-icon-left.tsx new file mode 100644 index 000000000..26fd4e3f3 --- /dev/null +++ b/apps/v4/examples/base/button-icon-left.tsx @@ -0,0 +1,89 @@ +import { Button } from "@/examples/base/ui/button" +import { ArrowLeftCircleIcon } from "lucide-react" + +export function ButtonIconLeft() { + return ( + <> +
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+ + ) +} diff --git a/apps/v4/examples/base/button-icon-only.tsx b/apps/v4/examples/base/button-icon-only.tsx new file mode 100644 index 000000000..768250f5a --- /dev/null +++ b/apps/v4/examples/base/button-icon-only.tsx @@ -0,0 +1,89 @@ +import { Button } from "@/examples/base/ui/button" +import { ArrowRightIcon } from "lucide-react" + +export function ButtonIconOnly() { + return ( + <> +
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+ + ) +} diff --git a/apps/v4/examples/base/button-icon-right.tsx b/apps/v4/examples/base/button-icon-right.tsx new file mode 100644 index 000000000..617922307 --- /dev/null +++ b/apps/v4/examples/base/button-icon-right.tsx @@ -0,0 +1,90 @@ +import { Button } from "@/examples/base/ui/button" +import { ArrowRightIcon } from "lucide-react" + +export function ButtonIconRight() { + return ( + <> +
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+ + ) +} diff --git a/apps/v4/examples/base/button-invalid-states.tsx b/apps/v4/examples/base/button-invalid-states.tsx new file mode 100644 index 000000000..2d9374194 --- /dev/null +++ b/apps/v4/examples/base/button-invalid-states.tsx @@ -0,0 +1,86 @@ +import { Button } from "@/examples/base/ui/button" + +export function ButtonInvalidStates() { + return ( + <> +
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+ + ) +} diff --git a/apps/v4/examples/base/button-variants-and-sizes.tsx b/apps/v4/examples/base/button-variants-and-sizes.tsx new file mode 100644 index 000000000..48c709256 --- /dev/null +++ b/apps/v4/examples/base/button-variants-and-sizes.tsx @@ -0,0 +1,70 @@ +import { Button } from "@/examples/base/ui/button" + +export function ButtonVariantsAndSizes() { + return ( + <> +
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+
+ + + + + + +
+ + ) +} diff --git a/apps/v4/examples/base/calendar-booked-dates.tsx b/apps/v4/examples/base/calendar-booked-dates.tsx new file mode 100644 index 000000000..7d97c395d --- /dev/null +++ b/apps/v4/examples/base/calendar-booked-dates.tsx @@ -0,0 +1,36 @@ +"use client" + +import * as React from "react" +import { Calendar } from "@/examples/base/ui/calendar" +import { Card, CardContent } from "@/examples/base/ui/card" +import { es } from "react-day-picker/locale" + +export function CalendarBookedDates() { + const [date, setDate] = React.useState( + new Date(new Date().getFullYear(), 1, 3) + ) + const bookedDates = Array.from( + { length: 15 }, + (_, i) => new Date(new Date().getFullYear(), 1, 12 + i) + ) + + return ( + + + button]:line-through opacity-100", + }} + /> + + + ) +} diff --git a/apps/v4/examples/base/calendar-custom-days.tsx b/apps/v4/examples/base/calendar-custom-days.tsx new file mode 100644 index 000000000..589176c28 --- /dev/null +++ b/apps/v4/examples/base/calendar-custom-days.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import { Calendar, CalendarDayButton } from "@/examples/base/ui/calendar" +import { Card, CardContent } from "@/examples/base/ui/card" +import { addDays } from "date-fns" +import { type DateRange } from "react-day-picker" + +export function CalendarCustomDays() { + const [range, setRange] = React.useState({ + from: new Date(new Date().getFullYear(), 11, 8), + to: addDays(new Date(new Date().getFullYear(), 11, 8), 10), + }) + + return ( + + + { + return date.toLocaleString("default", { month: "long" }) + }, + }} + components={{ + DayButton: ({ children, modifiers, day, ...props }) => { + const isWeekend = + day.date.getDay() === 0 || day.date.getDay() === 6 + + return ( + + {children} + {!modifiers.outside && ( + {isWeekend ? "$120" : "$100"} + )} + + ) + }, + }} + /> + + + ) +} diff --git a/apps/v4/examples/base/calendar-multiple.tsx b/apps/v4/examples/base/calendar-multiple.tsx new file mode 100644 index 000000000..4506ceafc --- /dev/null +++ b/apps/v4/examples/base/calendar-multiple.tsx @@ -0,0 +1,12 @@ +import { Calendar } from "@/examples/base/ui/calendar" +import { Card, CardContent } from "@/examples/base/ui/card" + +export function CalendarMultiple() { + return ( + + + + + + ) +} diff --git a/apps/v4/examples/base/calendar-range-multiple-months.tsx b/apps/v4/examples/base/calendar-range-multiple-months.tsx new file mode 100644 index 000000000..8e0f801b3 --- /dev/null +++ b/apps/v4/examples/base/calendar-range-multiple-months.tsx @@ -0,0 +1,31 @@ +"use client" + +import * as React from "react" +import { Calendar } from "@/examples/base/ui/calendar" +import { Card, CardContent } from "@/examples/base/ui/card" +import { addDays } from "date-fns" +import { type DateRange } from "react-day-picker" +import { es } from "react-day-picker/locale" + +export function CalendarRangeMultipleMonths() { + const [range, setRange] = React.useState({ + from: new Date(new Date().getFullYear(), 3, 12), + to: addDays(new Date(new Date().getFullYear(), 3, 12), 60), + }) + + return ( + + + + + + ) +} diff --git a/apps/v4/examples/base/calendar-range.tsx b/apps/v4/examples/base/calendar-range.tsx new file mode 100644 index 000000000..c11ed75fd --- /dev/null +++ b/apps/v4/examples/base/calendar-range.tsx @@ -0,0 +1,31 @@ +"use client" + +import * as React from "react" +import { Calendar } from "@/examples/base/ui/calendar" +import { Card, CardContent } from "@/examples/base/ui/card" +import { addDays } from "date-fns" +import { type DateRange } from "react-day-picker" + +export function CalendarRange() { + const [dateRange, setDateRange] = React.useState({ + from: new Date(new Date().getFullYear(), 0, 12), + to: addDays(new Date(new Date().getFullYear(), 0, 12), 30), + }) + + return ( + + + + date > new Date() || date < new Date("1900-01-01") + } + /> + + + ) +} diff --git a/apps/v4/examples/base/calendar-single.tsx b/apps/v4/examples/base/calendar-single.tsx new file mode 100644 index 000000000..67f3b18d7 --- /dev/null +++ b/apps/v4/examples/base/calendar-single.tsx @@ -0,0 +1,23 @@ +"use client" + +import * as React from "react" +import { Calendar } from "@/examples/base/ui/calendar" +import { Card, CardContent } from "@/examples/base/ui/card" + +export function CalendarSingle() { + const [date, setDate] = React.useState( + new Date(new Date().getFullYear(), new Date().getMonth(), 12) + ) + return ( + + + + + + ) +} diff --git a/apps/v4/examples/base/calendar-week-numbers.tsx b/apps/v4/examples/base/calendar-week-numbers.tsx new file mode 100644 index 000000000..a5077d827 --- /dev/null +++ b/apps/v4/examples/base/calendar-week-numbers.tsx @@ -0,0 +1,25 @@ +"use client" + +import * as React from "react" +import { Calendar } from "@/examples/base/ui/calendar" +import { Card, CardContent } from "@/examples/base/ui/card" + +export function CalendarWeekNumbers() { + const [date, setDate] = React.useState( + new Date(new Date().getFullYear(), 1, 3) + ) + + return ( + + + + + + ) +} diff --git a/apps/v4/examples/base/calendar-with-presets.tsx b/apps/v4/examples/base/calendar-with-presets.tsx new file mode 100644 index 000000000..794cc6ff7 --- /dev/null +++ b/apps/v4/examples/base/calendar-with-presets.tsx @@ -0,0 +1,57 @@ +"use client" + +import * as React from "react" +import { Button } from "@/examples/base/ui/button" +import { Calendar } from "@/examples/base/ui/calendar" +import { Card, CardContent, CardFooter } from "@/examples/base/ui/card" +import { addDays } from "date-fns" + +export function CalendarWithPresets() { + const [date, setDate] = React.useState( + new Date(new Date().getFullYear(), 1, 12) + ) + const [currentMonth, setCurrentMonth] = React.useState( + new Date(new Date().getFullYear(), new Date().getMonth(), 1) + ) + + return ( + + + + + + {[ + { label: "Today", value: 0 }, + { label: "Tomorrow", value: 1 }, + { label: "In 3 days", value: 3 }, + { label: "In a week", value: 7 }, + { label: "In 2 weeks", value: 14 }, + ].map((preset) => ( + + ))} + + + ) +} diff --git a/apps/v4/examples/base/calendar-with-time.tsx b/apps/v4/examples/base/calendar-with-time.tsx new file mode 100644 index 000000000..2a044442b --- /dev/null +++ b/apps/v4/examples/base/calendar-with-time.tsx @@ -0,0 +1,65 @@ +"use client" + +import * as React from "react" +import { Calendar } from "@/examples/base/ui/calendar" +import { Card, CardContent, CardFooter } from "@/examples/base/ui/card" +import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field" +import { + InputGroup, + InputGroupAddon, + InputGroupInput, +} from "@/examples/base/ui/input-group" +import { Clock2Icon } from "lucide-react" + +export function CalendarWithTime() { + const [date, setDate] = React.useState( + new Date(new Date().getFullYear(), new Date().getMonth(), 12) + ) + + return ( + + + + + + + + Start Time + + + + + + + + + End Time + + + + + + + + + + + ) +} diff --git a/apps/v4/examples/base/card-default.tsx b/apps/v4/examples/base/card-default.tsx new file mode 100644 index 000000000..d758d47f5 --- /dev/null +++ b/apps/v4/examples/base/card-default.tsx @@ -0,0 +1,33 @@ +import { Button } from "@/examples/base/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" + +export function CardDefault() { + return ( + + + Default Card + + This card uses the default size variant. + + + +

+ The card component supports a size prop that defaults to + "default" for standard spacing and sizing. +

+ + + + + + ) +} diff --git a/apps/v4/examples/base/card-footer-with-border-small.tsx b/apps/v4/examples/base/card-footer-with-border-small.tsx new file mode 100644 index 000000000..2cd234b4f --- /dev/null +++ b/apps/v4/examples/base/card-footer-with-border-small.tsx @@ -0,0 +1,20 @@ +import { Button } from "@/examples/base/ui/button" +import { Card, CardContent, CardFooter } from "@/examples/base/ui/card" + +export function CardFooterWithBorderSmall() { + return ( + + +

+ The footer has a border-t class applied, creating a visual separation + between the content and footer sections. +

+ + + + + + ) +} diff --git a/apps/v4/examples/base/card-footer-with-border.tsx b/apps/v4/examples/base/card-footer-with-border.tsx new file mode 100644 index 000000000..a43f2c356 --- /dev/null +++ b/apps/v4/examples/base/card-footer-with-border.tsx @@ -0,0 +1,20 @@ +import { Button } from "@/examples/base/ui/button" +import { Card, CardContent, CardFooter } from "@/examples/base/ui/card" + +export function CardFooterWithBorder() { + return ( + + +

+ The footer has a border-t class applied, creating a visual separation + between the content and footer sections. +

+ + + + + + ) +} diff --git a/apps/v4/examples/base/card-header-with-border-small.tsx b/apps/v4/examples/base/card-header-with-border-small.tsx new file mode 100644 index 000000000..158fd85c3 --- /dev/null +++ b/apps/v4/examples/base/card-header-with-border-small.tsx @@ -0,0 +1,26 @@ +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" + +export function CardHeaderWithBorderSmall() { + return ( + + + Header with Border + + This is a small card with a header that has a bottom border. + + + +

+ The header has a border-b class applied, creating a visual separation + between the header and content sections. +

+ + + ) +} diff --git a/apps/v4/examples/base/card-header-with-border.tsx b/apps/v4/examples/base/card-header-with-border.tsx new file mode 100644 index 000000000..32fb9605e --- /dev/null +++ b/apps/v4/examples/base/card-header-with-border.tsx @@ -0,0 +1,26 @@ +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" + +export function CardHeaderWithBorder() { + return ( + + + Header with Border + + This is a card with a header that has a bottom border. + + + +

+ The header has a border-b class applied, creating a visual separation + between the header and content sections. +

+ + + ) +} diff --git a/apps/v4/examples/base/card-login.tsx b/apps/v4/examples/base/card-login.tsx new file mode 100644 index 000000000..425843f2d --- /dev/null +++ b/apps/v4/examples/base/card-login.tsx @@ -0,0 +1,65 @@ +import { Button } from "@/examples/base/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" +import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field" +import { Input } from "@/examples/base/ui/input" + +export function CardLogin() { + return ( + + + Login to your account + + Enter your email below to login to your account + + + +
+ + + Email + + + + + + + +
+ + + + +
+ Don't have an account?{" "} + + Sign up + +
+ + + ) +} diff --git a/apps/v4/examples/base/card-meeting-notes.tsx b/apps/v4/examples/base/card-meeting-notes.tsx new file mode 100644 index 000000000..184480319 --- /dev/null +++ b/apps/v4/examples/base/card-meeting-notes.tsx @@ -0,0 +1,73 @@ +import { + Avatar, + AvatarFallback, + AvatarGroup, + AvatarGroupCount, + AvatarImage, +} from "@/examples/base/ui/avatar" +import { Button } from "@/examples/base/ui/button" +import { + Card, + CardAction, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" +import { CaptionsIcon } from "lucide-react" + +export function CardMeetingNotes() { + return ( + + + Meeting Notes + + Transcript from the meeting with the client. + + + + + + +

+ Client requested dashboard redesign with focus on mobile + responsiveness. +

+
    +
  1. New analytics widgets for daily/weekly metrics
    2. +
  2. Simplified navigation menu
    3. +
  3. Dark mode support
    4. +
  4. Timeline: 6 weeks
    5. +
  5. Follow-up meeting scheduled for next Tuesday
    6. +
+ + + + + + CN + + + + LR + + + + ER + + +8 + + + + ) +} diff --git a/apps/v4/examples/base/card-small.tsx b/apps/v4/examples/base/card-small.tsx new file mode 100644 index 000000000..2af149a7e --- /dev/null +++ b/apps/v4/examples/base/card-small.tsx @@ -0,0 +1,33 @@ +import { Button } from "@/examples/base/ui/button" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" + +export function CardSmall() { + return ( + + + Small Card + + This card uses the small size variant. + + + +

+ The card component supports a size prop that can be set to + "sm" for a more compact appearance. +

+ + + + + + ) +} diff --git a/apps/v4/examples/base/card-with-image-small.tsx b/apps/v4/examples/base/card-with-image-small.tsx new file mode 100644 index 000000000..bb6275a8c --- /dev/null +++ b/apps/v4/examples/base/card-with-image-small.tsx @@ -0,0 +1,35 @@ +import { Button } from "@/examples/base/ui/button" +import { + Card, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" +import { PlusIcon } from "lucide-react" + +export function CardWithImageSmall() { + return ( + +
+ Photo by mymind on Unsplash + + Beautiful Landscape + + A stunning view that captures the essence of natural beauty. + + + + + + + ) +} diff --git a/apps/v4/examples/base/card-with-image.tsx b/apps/v4/examples/base/card-with-image.tsx new file mode 100644 index 000000000..f3a966e76 --- /dev/null +++ b/apps/v4/examples/base/card-with-image.tsx @@ -0,0 +1,35 @@ +import { Button } from "@/examples/base/ui/button" +import { + Card, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" +import { PlusIcon } from "lucide-react" + +export function CardWithImage() { + return ( + +
+ Photo by mymind on Unsplash + + Beautiful Landscape + + A stunning view that captures the essence of natural beauty. + + + + + + + ) +} diff --git a/apps/v4/examples/base/carousel-basic.tsx b/apps/v4/examples/base/carousel-basic.tsx new file mode 100644 index 000000000..fc3e9ccae --- /dev/null +++ b/apps/v4/examples/base/carousel-basic.tsx @@ -0,0 +1,30 @@ +import { Card, CardContent } from "@/examples/base/ui/card" +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/examples/base/ui/carousel" + +export function CarouselBasic() { + return ( + + + {Array.from({ length: 5 }).map((_, index) => ( + +
+ + + {index + 1} + + +
+ + ))} + + + + + ) +} diff --git a/apps/v4/examples/base/carousel-multiple.tsx b/apps/v4/examples/base/carousel-multiple.tsx new file mode 100644 index 000000000..e0b96001e --- /dev/null +++ b/apps/v4/examples/base/carousel-multiple.tsx @@ -0,0 +1,35 @@ +import { Card, CardContent } from "@/examples/base/ui/card" +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/examples/base/ui/carousel" + +export function CarouselMultiple() { + return ( + + + {Array.from({ length: 5 }).map((_, index) => ( + +
+ + + {index + 1} + + +
+ + ))} + + + + + ) +} diff --git a/apps/v4/examples/base/carousel-with-gap.tsx b/apps/v4/examples/base/carousel-with-gap.tsx new file mode 100644 index 000000000..23b654498 --- /dev/null +++ b/apps/v4/examples/base/carousel-with-gap.tsx @@ -0,0 +1,30 @@ +import { Card, CardContent } from "@/examples/base/ui/card" +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/examples/base/ui/carousel" + +export function CarouselWithGap() { + return ( + + + {Array.from({ length: 5 }).map((_, index) => ( + +
+ + + {index + 1} + + +
+ + ))} + + + + + ) +} diff --git a/apps/v4/examples/base/chart-area-example.tsx b/apps/v4/examples/base/chart-area-example.tsx new file mode 100644 index 000000000..cdc348f1d --- /dev/null +++ b/apps/v4/examples/base/chart-area-example.tsx @@ -0,0 +1,90 @@ +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, + type ChartConfig, +} from "@/examples/base/ui/chart" +import { TrendingUpIcon } from "lucide-react" +import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" + +const areaChartData = [ + { month: "January", desktop: 186 }, + { month: "February", desktop: 305 }, + { month: "March", desktop: 237 }, + { month: "April", desktop: 73 }, + { month: "May", desktop: 209 }, + { month: "June", desktop: 214 }, +] + +const areaChartConfig = { + desktop: { + label: "Desktop", + color: "var(--chart-1)", + }, +} satisfies ChartConfig + +export function ChartAreaExample() { + return ( + + + Area Chart + + Showing total visitors for the last 6 months + + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + +
+
+
+ Trending up by 5.2% this month{" "} + +
+
+ January - June 2024 +
+
+
+ + + ) +} diff --git a/apps/v4/examples/base/chart-bar-example.tsx b/apps/v4/examples/base/chart-bar-example.tsx new file mode 100644 index 000000000..bfcc0e168 --- /dev/null +++ b/apps/v4/examples/base/chart-bar-example.tsx @@ -0,0 +1,75 @@ +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, + type ChartConfig, +} from "@/examples/base/ui/chart" +import { TrendingUpIcon } from "lucide-react" +import { Bar, BarChart, CartesianGrid, XAxis } from "recharts" + +const barChartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const barChartConfig = { + desktop: { + label: "Desktop", + color: "var(--chart-1)", + }, + mobile: { + label: "Mobile", + color: "var(--chart-2)", + }, +} satisfies ChartConfig + +export function ChartBarExample() { + return ( + + + Bar Chart - Multiple + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/v4/examples/base/chart-line-example.tsx b/apps/v4/examples/base/chart-line-example.tsx new file mode 100644 index 000000000..35bfc7c80 --- /dev/null +++ b/apps/v4/examples/base/chart-line-example.tsx @@ -0,0 +1,96 @@ +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, + type ChartConfig, +} from "@/examples/base/ui/chart" +import { TrendingUpIcon } from "lucide-react" +import { CartesianGrid, Line, LineChart, XAxis } from "recharts" + +const lineChartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const lineChartConfig = { + desktop: { + label: "Desktop", + color: "var(--chart-1)", + }, + mobile: { + label: "Mobile", + color: "var(--chart-2)", + }, +} satisfies ChartConfig + +export function ChartLineExample() { + return ( + + + Line Chart - Multiple + January - June 2024 + + + + + + value.slice(0, 3)} + /> + } /> + + + + + + +
+
+
+ Trending up by 5.2% this month{" "} + +
+
+ Showing total visitors for the last 6 months +
+
+
+ + + ) +} diff --git a/apps/v4/examples/base/chart-pie-example.tsx b/apps/v4/examples/base/chart-pie-example.tsx new file mode 100644 index 000000000..0307d5fab --- /dev/null +++ b/apps/v4/examples/base/chart-pie-example.tsx @@ -0,0 +1,126 @@ +"use client" + +import * as React from "react" +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, + type ChartConfig, +} from "@/examples/base/ui/chart" +import { TrendingUpIcon } from "lucide-react" +import { Label, Pie, PieChart } from "recharts" + +const pieChartData = [ + { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, + { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, + { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" }, + { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, + { browser: "other", visitors: 190, fill: "var(--color-other)" }, +] + +const pieChartConfig = { + visitors: { + label: "Visitors", + }, + chrome: { + label: "Chrome", + color: "var(--chart-1)", + }, + safari: { + label: "Safari", + color: "var(--chart-2)", + }, + firefox: { + label: "Firefox", + color: "var(--chart-3)", + }, + edge: { + label: "Edge", + color: "var(--chart-4)", + }, + other: { + label: "Other", + color: "var(--chart-5)", + }, +} satisfies ChartConfig + +export function ChartPieExample() { + const totalVisitors = React.useMemo(() => { + return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0) + }, []) + + return ( + + + Pie Chart - Donut with Text + January - June 2024 + + + + + } + /> + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/v4/examples/base/chart-radar-example.tsx b/apps/v4/examples/base/chart-radar-example.tsx new file mode 100644 index 000000000..26aac6196 --- /dev/null +++ b/apps/v4/examples/base/chart-radar-example.tsx @@ -0,0 +1,78 @@ +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" +import { + ChartContainer, + ChartTooltip, + ChartTooltipContent, + type ChartConfig, +} from "@/examples/base/ui/chart" +import { TrendingUpIcon } from "lucide-react" +import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts" + +const radarChartData = [ + { month: "January", desktop: 186, mobile: 80 }, + { month: "February", desktop: 305, mobile: 200 }, + { month: "March", desktop: 237, mobile: 120 }, + { month: "April", desktop: 73, mobile: 190 }, + { month: "May", desktop: 209, mobile: 130 }, + { month: "June", desktop: 214, mobile: 140 }, +] + +const radarChartConfig = { + desktop: { + label: "Desktop", + color: "var(--chart-1)", + }, + mobile: { + label: "Mobile", + color: "var(--chart-2)", + }, +} satisfies ChartConfig + +export function ChartRadarExample() { + return ( + + + Radar Chart - Multiple + + Showing total visitors for the last 6 months + + + + + + } + /> + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ January - June 2024 +
+ + + ) +} diff --git a/apps/v4/examples/base/chart-radial-example.tsx b/apps/v4/examples/base/chart-radial-example.tsx new file mode 100644 index 000000000..f197af041 --- /dev/null +++ b/apps/v4/examples/base/chart-radial-example.tsx @@ -0,0 +1,103 @@ +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" +import { ChartContainer, type ChartConfig } from "@/examples/base/ui/chart" +import { TrendingUpIcon } from "lucide-react" +import { + Label, + PolarGrid, + PolarRadiusAxis, + RadialBar, + RadialBarChart, +} from "recharts" + +const radialChartData = [ + { browser: "safari", visitors: 1260, fill: "var(--color-safari)" }, +] + +const radialChartConfig = { + visitors: { + label: "Visitors", + }, + safari: { + label: "Safari", + color: "var(--chart-2)", + }, +} satisfies ChartConfig + +export function ChartRadialExample() { + return ( + + + Radial Chart - Shape + January - June 2024 + + + + + + + + + + + + +
+ Trending up by 5.2% this month +
+
+ Showing total visitors for the last 6 months +
+ + + ) +} diff --git a/apps/v4/examples/base/checkbox-basic.tsx b/apps/v4/examples/base/checkbox-basic.tsx new file mode 100644 index 000000000..9637005a6 --- /dev/null +++ b/apps/v4/examples/base/checkbox-basic.tsx @@ -0,0 +1,11 @@ +import { Checkbox } from "@/examples/base/ui/checkbox" +import { Field, FieldLabel } from "@/examples/base/ui/field" + +export function CheckboxBasic() { + return ( + + + Accept terms and conditions + + ) +} diff --git a/apps/v4/examples/base/checkbox-disabled.tsx b/apps/v4/examples/base/checkbox-disabled.tsx index 54c101012..ad6f0dae9 100644 --- a/apps/v4/examples/base/checkbox-disabled.tsx +++ b/apps/v4/examples/base/checkbox-disabled.tsx @@ -1,15 +1,11 @@ import { Checkbox } from "@/examples/base/ui/checkbox" +import { Field, FieldLabel } from "@/examples/base/ui/field" -export default function CheckboxDisabled() { +export function CheckboxDisabled() { return ( -
- - -
+ + + Enable notifications + ) } diff --git a/apps/v4/examples/base/checkbox-fields.tsx b/apps/v4/examples/base/checkbox-fields.tsx new file mode 100644 index 000000000..3926b1a7e --- /dev/null +++ b/apps/v4/examples/base/checkbox-fields.tsx @@ -0,0 +1,91 @@ +import { Checkbox } from "@/examples/base/ui/checkbox" +import { + Field, + FieldContent, + FieldDescription, + FieldGroup, + FieldLabel, + FieldLegend, + FieldSet, + FieldTitle, +} from "@/examples/base/ui/field" +import { Select } from "@/examples/base/ui/select" + +export function CheckboxFields() { + return ( + + + + + I agree to the terms and conditions + + + + + Accept terms and conditions + + + + + + + + Subscribe to newsletter + + + Receive weekly updates about new features and promotions. + + + + + + + + Enable Touch ID + + Enable Touch ID to quickly unlock your device. + + + + +
+ Preferences + + Select all that apply to customize your experience. + + + + + + Dark mode + + + + + + Compact view + + + + + + Enable notifications + + + +
+ + + + Invalid checkbox + + + + + + Disabled checkbox + + + + ) +} diff --git a/apps/v4/examples/base/checkbox-group.tsx b/apps/v4/examples/base/checkbox-group.tsx new file mode 100644 index 000000000..f0aac655f --- /dev/null +++ b/apps/v4/examples/base/checkbox-group.tsx @@ -0,0 +1,46 @@ +import { Checkbox } from "@/examples/base/ui/checkbox" +import { Field, FieldLabel } from "@/examples/base/ui/field" + +export function CheckboxGroup() { + return ( + + Show these items on the desktop: + + + + Hard disks + + + + + + External disks + + + + + + CDs, DVDs, and iPods + + + + + + Connected servers + + + + ) +} diff --git a/apps/v4/examples/base/checkbox-in-table.tsx b/apps/v4/examples/base/checkbox-in-table.tsx new file mode 100644 index 000000000..8ff1c89d4 --- /dev/null +++ b/apps/v4/examples/base/checkbox-in-table.tsx @@ -0,0 +1,105 @@ +"use client" + +import * as React from "react" +import { Checkbox } from "@/examples/base/ui/checkbox" +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/examples/base/ui/table" + +const tableData = [ + { + id: "1", + name: "Sarah Chen", + email: "sarah.chen@example.com", + role: "Admin", + }, + { + id: "2", + name: "Marcus Rodriguez", + email: "marcus.rodriguez@example.com", + role: "User", + }, + { + id: "3", + name: "Priya Patel", + email: "priya.patel@example.com", + role: "User", + }, + { + id: "4", + name: "David Kim", + email: "david.kim@example.com", + role: "Editor", + }, +] + +export function CheckboxInTable() { + const [selectedRows, setSelectedRows] = React.useState>( + new Set(["1"]) + ) + + const selectAll = selectedRows.size === tableData.length + + const handleSelectAll = (checked: boolean) => { + if (checked) { + setSelectedRows(new Set(tableData.map((row) => row.id))) + } else { + setSelectedRows(new Set()) + } + } + + const handleSelectRow = (id: string, checked: boolean) => { + const newSelected = new Set(selectedRows) + if (checked) { + newSelected.add(id) + } else { + newSelected.delete(id) + } + setSelectedRows(newSelected) + } + + return ( + + + + + + + Name + Email + Role + + + + {tableData.map((row) => ( + + + + handleSelectRow(row.id, checked === true) + } + /> + + {row.name} + {row.email} + {row.role} + + ))} + +
+ ) +} diff --git a/apps/v4/examples/base/checkbox-invalid.tsx b/apps/v4/examples/base/checkbox-invalid.tsx new file mode 100644 index 000000000..164f4d026 --- /dev/null +++ b/apps/v4/examples/base/checkbox-invalid.tsx @@ -0,0 +1,11 @@ +import { Checkbox } from "@/examples/base/ui/checkbox" +import { Field, FieldLabel } from "@/examples/base/ui/field" + +export function CheckboxInvalid() { + return ( + + + Accept terms and conditions + + ) +} diff --git a/apps/v4/examples/base/checkbox-with-description.tsx b/apps/v4/examples/base/checkbox-with-description.tsx new file mode 100644 index 000000000..47c79687d --- /dev/null +++ b/apps/v4/examples/base/checkbox-with-description.tsx @@ -0,0 +1,21 @@ +import { Checkbox } from "@/examples/base/ui/checkbox" +import { + Field, + FieldContent, + FieldDescription, + FieldLabel, +} from "@/examples/base/ui/field" + +export function CheckboxWithDescription() { + return ( + + + + Accept terms and conditions + + By clicking this checkbox, you agree to the terms and conditions. + + + + ) +} diff --git a/apps/v4/examples/base/checkbox-with-title.tsx b/apps/v4/examples/base/checkbox-with-title.tsx new file mode 100644 index 000000000..5d31e8914 --- /dev/null +++ b/apps/v4/examples/base/checkbox-with-title.tsx @@ -0,0 +1,38 @@ +import { Checkbox } from "@/examples/base/ui/checkbox" +import { + Field, + FieldContent, + FieldDescription, + FieldGroup, + FieldLabel, + FieldTitle, +} from "@/examples/base/ui/field" + +export function CheckboxWithTitle() { + return ( + + + + + + Enable notifications + + You can enable or disable notifications at any time. + + + + + + + + + Enable notifications + + You can enable or disable notifications at any time. + + + + + + ) +} diff --git a/apps/v4/examples/base/collapsible-file-tree.tsx b/apps/v4/examples/base/collapsible-file-tree.tsx new file mode 100644 index 000000000..17b705388 --- /dev/null +++ b/apps/v4/examples/base/collapsible-file-tree.tsx @@ -0,0 +1,121 @@ +import { Button } from "@/examples/base/ui/button" +import { Card, CardContent, CardHeader } from "@/examples/base/ui/card" +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/examples/base/ui/collapsible" +import { Tabs, TabsList, TabsTrigger } from "@/examples/base/ui/tabs" +import { ChevronRightIcon, FileIcon, FolderIcon } from "lucide-react" + +type FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] } + +export function CollapsibleFileTree() { + const fileTree: FileTreeItem[] = [ + { + name: "components", + items: [ + { + name: "ui", + items: [ + { name: "button.tsx" }, + { name: "card.tsx" }, + { name: "dialog.tsx" }, + { name: "input.tsx" }, + { name: "select.tsx" }, + { name: "table.tsx" }, + ], + }, + { name: "login-form.tsx" }, + { name: "register-form.tsx" }, + ], + }, + { + name: "lib", + items: [{ name: "utils.ts" }, { name: "cn.ts" }, { name: "api.ts" }], + }, + { + name: "hooks", + items: [ + { name: "use-media-query.ts" }, + { name: "use-debounce.ts" }, + { name: "use-local-storage.ts" }, + ], + }, + { + name: "types", + items: [{ name: "index.d.ts" }, { name: "api.d.ts" }], + }, + { + name: "public", + items: [ + { name: "favicon.ico" }, + { name: "logo.svg" }, + { name: "images" }, + ], + }, + { name: "app.tsx" }, + { name: "layout.tsx" }, + { name: "globals.css" }, + { name: "package.json" }, + { name: "tsconfig.json" }, + { name: "README.md" }, + { name: ".gitignore" }, + ] + + const renderItem = (fileItem: FileTreeItem) => { + if ("items" in fileItem) { + return ( + + + } + > + + + {fileItem.name} + + +
+ {fileItem.items.map((child) => renderItem(child))} +
+ + + ) + } + return ( + + ) + } + + return ( + + + + + Explorer + Outline + + + + +
+ {fileTree.map((item) => renderItem(item))} +
+ + + ) +} diff --git a/apps/v4/examples/base/collapsible-settings.tsx b/apps/v4/examples/base/collapsible-settings.tsx new file mode 100644 index 000000000..f1e8067fe --- /dev/null +++ b/apps/v4/examples/base/collapsible-settings.tsx @@ -0,0 +1,71 @@ +"use client" + +import * as React from "react" +import { Button } from "@/examples/base/ui/button" +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/examples/base/ui/card" +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/examples/base/ui/collapsible" +import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field" +import { Input } from "@/examples/base/ui/input" +import { MaximizeIcon, MinimizeIcon } from "lucide-react" + +export function CollapsibleSettings() { + const [isOpen, setIsOpen] = React.useState(false) + + return ( + + + Radius + Set the corner radius of the element. + + + + + + + Radius X + + + + + + Radius Y + + + + + + + Radius X + + + + + + Radius Y + + + + + + }> + {isOpen ? : } + + + + + ) +} diff --git a/apps/v4/examples/base/combobox-auto-highlight.tsx b/apps/v4/examples/base/combobox-auto-highlight.tsx new file mode 100644 index 000000000..0a9c07ca7 --- /dev/null +++ b/apps/v4/examples/base/combobox-auto-highlight.tsx @@ -0,0 +1,70 @@ +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/examples/base/ui/combobox" +import { Select } from "@/examples/base/ui/select" + +const frameworks = [ + "Next.js", + "SvelteKit", + "Nuxt.js", + "Remix", + "Astro", +] as const + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxAutoHighlight() { + return ( + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + ) +} diff --git a/apps/v4/examples/base/combobox-basic.tsx b/apps/v4/examples/base/combobox-basic.tsx new file mode 100644 index 000000000..bcf42b521 --- /dev/null +++ b/apps/v4/examples/base/combobox-basic.tsx @@ -0,0 +1,70 @@ +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/examples/base/ui/combobox" +import { Select } from "@/examples/base/ui/select" + +const frameworks = [ + "Next.js", + "SvelteKit", + "Nuxt.js", + "Remix", + "Astro", +] as const + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxBasic() { + return ( + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + ) +} diff --git a/apps/v4/examples/base/combobox-disabled.tsx b/apps/v4/examples/base/combobox-disabled.tsx new file mode 100644 index 000000000..5eaaa476d --- /dev/null +++ b/apps/v4/examples/base/combobox-disabled.tsx @@ -0,0 +1,70 @@ +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/examples/base/ui/combobox" +import { Select } from "@/examples/base/ui/select" + +const frameworks = [ + "Next.js", + "SvelteKit", + "Nuxt.js", + "Remix", + "Astro", +] as const + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxDisabled() { + return ( + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + ) +} diff --git a/apps/v4/examples/base/combobox-in-dialog.tsx b/apps/v4/examples/base/combobox-in-dialog.tsx new file mode 100644 index 000000000..072d56fb8 --- /dev/null +++ b/apps/v4/examples/base/combobox-in-dialog.tsx @@ -0,0 +1,128 @@ +"use client" + +import * as React from "react" +import { Button } from "@/examples/base/ui/button" +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/examples/base/ui/combobox" +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/examples/base/ui/dialog" +import { Field, FieldLabel } from "@/examples/base/ui/field" +import { Select } from "@/examples/base/ui/select" +import { toast } from "sonner" + +const frameworks = [ + "Next.js", + "SvelteKit", + "Nuxt.js", + "Remix", + "Astro", +] as const + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxInDialog() { + const [open, setOpen] = React.useState(false) + + return ( + <> + + }> + Open Dialog + + + + Select Framework + + Choose your preferred framework from the list below. + + + + + Framework + + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + + + + + + + + + ) +} diff --git a/apps/v4/examples/base/combobox-in-popup.tsx b/apps/v4/examples/base/combobox-in-popup.tsx new file mode 100644 index 000000000..ef823674a --- /dev/null +++ b/apps/v4/examples/base/combobox-in-popup.tsx @@ -0,0 +1,488 @@ +import { Button } from "@/examples/base/ui/button" +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, + ComboboxTrigger, + ComboboxValue, +} from "@/examples/base/ui/combobox" +import { Select } from "@/examples/base/ui/select" + +const countries = [ + { code: "", value: "", continent: "", label: "Select country" }, + { code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" }, + { code: "al", value: "albania", label: "Albania", continent: "Europe" }, + { code: "dz", value: "algeria", label: "Algeria", continent: "Africa" }, + { code: "ad", value: "andorra", label: "Andorra", continent: "Europe" }, + { code: "ao", value: "angola", label: "Angola", continent: "Africa" }, + { + code: "ar", + value: "argentina", + label: "Argentina", + continent: "South America", + }, + { code: "am", value: "armenia", label: "Armenia", continent: "Asia" }, + { code: "au", value: "australia", label: "Australia", continent: "Oceania" }, + { code: "at", value: "austria", label: "Austria", continent: "Europe" }, + { code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" }, + { + code: "bs", + value: "bahamas", + label: "Bahamas", + continent: "North America", + }, + { code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" }, + { code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" }, + { + code: "bb", + value: "barbados", + label: "Barbados", + continent: "North America", + }, + { code: "by", value: "belarus", label: "Belarus", continent: "Europe" }, + { code: "be", value: "belgium", label: "Belgium", continent: "Europe" }, + { code: "bz", value: "belize", label: "Belize", continent: "North America" }, + { code: "bj", value: "benin", label: "Benin", continent: "Africa" }, + { code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" }, + { + code: "bo", + value: "bolivia", + label: "Bolivia", + continent: "South America", + }, + { + code: "ba", + value: "bosnia-and-herzegovina", + label: "Bosnia and Herzegovina", + continent: "Europe", + }, + { code: "bw", value: "botswana", label: "Botswana", continent: "Africa" }, + { code: "br", value: "brazil", label: "Brazil", continent: "South America" }, + { code: "bn", value: "brunei", label: "Brunei", continent: "Asia" }, + { code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" }, + { + code: "bf", + value: "burkina-faso", + label: "Burkina Faso", + continent: "Africa", + }, + { code: "bi", value: "burundi", label: "Burundi", continent: "Africa" }, + { code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" }, + { code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" }, + { code: "ca", value: "canada", label: "Canada", continent: "North America" }, + { code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" }, + { + code: "cf", + value: "central-african-republic", + label: "Central African Republic", + continent: "Africa", + }, + { code: "td", value: "chad", label: "Chad", continent: "Africa" }, + { code: "cl", value: "chile", label: "Chile", continent: "South America" }, + { code: "cn", value: "china", label: "China", continent: "Asia" }, + { + code: "co", + value: "colombia", + label: "Colombia", + continent: "South America", + }, + { code: "km", value: "comoros", label: "Comoros", continent: "Africa" }, + { code: "cg", value: "congo", label: "Congo", continent: "Africa" }, + { + code: "cr", + value: "costa-rica", + label: "Costa Rica", + continent: "North America", + }, + { code: "hr", value: "croatia", label: "Croatia", continent: "Europe" }, + { code: "cu", value: "cuba", label: "Cuba", continent: "North America" }, + { code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" }, + { + code: "cz", + value: "czech-republic", + label: "Czech Republic", + continent: "Europe", + }, + { code: "dk", value: "denmark", label: "Denmark", continent: "Europe" }, + { code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" }, + { + code: "dm", + value: "dominica", + label: "Dominica", + continent: "North America", + }, + { + code: "do", + value: "dominican-republic", + label: "Dominican Republic", + continent: "North America", + }, + { + code: "ec", + value: "ecuador", + label: "Ecuador", + continent: "South America", + }, + { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" }, + { + code: "sv", + value: "el-salvador", + label: "El Salvador", + continent: "North America", + }, + { + code: "gq", + value: "equatorial-guinea", + label: "Equatorial Guinea", + continent: "Africa", + }, + { code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" }, + { code: "ee", value: "estonia", label: "Estonia", continent: "Europe" }, + { code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" }, + { code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" }, + { code: "fi", value: "finland", label: "Finland", continent: "Europe" }, + { code: "fr", value: "france", label: "France", continent: "Europe" }, + { code: "ga", value: "gabon", label: "Gabon", continent: "Africa" }, + { code: "gm", value: "gambia", label: "Gambia", continent: "Africa" }, + { code: "ge", value: "georgia", label: "Georgia", continent: "Asia" }, + { code: "de", value: "germany", label: "Germany", continent: "Europe" }, + { code: "gh", value: "ghana", label: "Ghana", continent: "Africa" }, + { code: "gr", value: "greece", label: "Greece", continent: "Europe" }, + { + code: "gd", + value: "grenada", + label: "Grenada", + continent: "North America", + }, + { + code: "gt", + value: "guatemala", + label: "Guatemala", + continent: "North America", + }, + { code: "gn", value: "guinea", label: "Guinea", continent: "Africa" }, + { + code: "gw", + value: "guinea-bissau", + label: "Guinea-Bissau", + continent: "Africa", + }, + { code: "gy", value: "guyana", label: "Guyana", continent: "South America" }, + { code: "ht", value: "haiti", label: "Haiti", continent: "North America" }, + { + code: "hn", + value: "honduras", + label: "Honduras", + continent: "North America", + }, + { code: "hu", value: "hungary", label: "Hungary", continent: "Europe" }, + { code: "is", value: "iceland", label: "Iceland", continent: "Europe" }, + { code: "in", value: "india", label: "India", continent: "Asia" }, + { code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" }, + { code: "ir", value: "iran", label: "Iran", continent: "Asia" }, + { code: "iq", value: "iraq", label: "Iraq", continent: "Asia" }, + { code: "ie", value: "ireland", label: "Ireland", continent: "Europe" }, + { code: "il", value: "israel", label: "Israel", continent: "Asia" }, + { code: "it", value: "italy", label: "Italy", continent: "Europe" }, + { + code: "jm", + value: "jamaica", + label: "Jamaica", + continent: "North America", + }, + { code: "jp", value: "japan", label: "Japan", continent: "Asia" }, + { code: "jo", value: "jordan", label: "Jordan", continent: "Asia" }, + { code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" }, + { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" }, + { code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" }, + { code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" }, + { code: "la", value: "laos", label: "Laos", continent: "Asia" }, + { code: "lv", value: "latvia", label: "Latvia", continent: "Europe" }, + { code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" }, + { code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" }, + { code: "lr", value: "liberia", label: "Liberia", continent: "Africa" }, + { code: "ly", value: "libya", label: "Libya", continent: "Africa" }, + { + code: "li", + value: "liechtenstein", + label: "Liechtenstein", + continent: "Europe", + }, + { code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" }, + { code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" }, + { code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" }, + { code: "mw", value: "malawi", label: "Malawi", continent: "Africa" }, + { code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" }, + { code: "mv", value: "maldives", label: "Maldives", continent: "Asia" }, + { code: "ml", value: "mali", label: "Mali", continent: "Africa" }, + { code: "mt", value: "malta", label: "Malta", continent: "Europe" }, + { + code: "mh", + value: "marshall-islands", + label: "Marshall Islands", + continent: "Oceania", + }, + { code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" }, + { code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" }, + { code: "mx", value: "mexico", label: "Mexico", continent: "North America" }, + { + code: "fm", + value: "micronesia", + label: "Micronesia", + continent: "Oceania", + }, + { code: "md", value: "moldova", label: "Moldova", continent: "Europe" }, + { code: "mc", value: "monaco", label: "Monaco", continent: "Europe" }, + { code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" }, + { code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" }, + { code: "ma", value: "morocco", label: "Morocco", continent: "Africa" }, + { code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" }, + { code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" }, + { code: "na", value: "namibia", label: "Namibia", continent: "Africa" }, + { code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" }, + { code: "np", value: "nepal", label: "Nepal", continent: "Asia" }, + { + code: "nl", + value: "netherlands", + label: "Netherlands", + continent: "Europe", + }, + { + code: "nz", + value: "new-zealand", + label: "New Zealand", + continent: "Oceania", + }, + { + code: "ni", + value: "nicaragua", + label: "Nicaragua", + continent: "North America", + }, + { code: "ne", value: "niger", label: "Niger", continent: "Africa" }, + { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" }, + { code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" }, + { + code: "mk", + value: "north-macedonia", + label: "North Macedonia", + continent: "Europe", + }, + { code: "no", value: "norway", label: "Norway", continent: "Europe" }, + { code: "om", value: "oman", label: "Oman", continent: "Asia" }, + { code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" }, + { code: "pw", value: "palau", label: "Palau", continent: "Oceania" }, + { code: "ps", value: "palestine", label: "Palestine", continent: "Asia" }, + { code: "pa", value: "panama", label: "Panama", continent: "North America" }, + { + code: "pg", + value: "papua-new-guinea", + label: "Papua New Guinea", + continent: "Oceania", + }, + { + code: "py", + value: "paraguay", + label: "Paraguay", + continent: "South America", + }, + { code: "pe", value: "peru", label: "Peru", continent: "South America" }, + { code: "ph", value: "philippines", label: "Philippines", continent: "Asia" }, + { code: "pl", value: "poland", label: "Poland", continent: "Europe" }, + { code: "pt", value: "portugal", label: "Portugal", continent: "Europe" }, + { code: "qa", value: "qatar", label: "Qatar", continent: "Asia" }, + { code: "ro", value: "romania", label: "Romania", continent: "Europe" }, + { code: "ru", value: "russia", label: "Russia", continent: "Europe" }, + { code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" }, + { code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" }, + { code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" }, + { + code: "sa", + value: "saudi-arabia", + label: "Saudi Arabia", + continent: "Asia", + }, + { code: "sn", value: "senegal", label: "Senegal", continent: "Africa" }, + { code: "rs", value: "serbia", label: "Serbia", continent: "Europe" }, + { code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" }, + { + code: "sl", + value: "sierra-leone", + label: "Sierra Leone", + continent: "Africa", + }, + { code: "sg", value: "singapore", label: "Singapore", continent: "Asia" }, + { code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" }, + { code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" }, + { + code: "sb", + value: "solomon-islands", + label: "Solomon Islands", + continent: "Oceania", + }, + { code: "so", value: "somalia", label: "Somalia", continent: "Africa" }, + { + code: "za", + value: "south-africa", + label: "South Africa", + continent: "Africa", + }, + { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" }, + { + code: "ss", + value: "south-sudan", + label: "South Sudan", + continent: "Africa", + }, + { code: "es", value: "spain", label: "Spain", continent: "Europe" }, + { code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" }, + { code: "sd", value: "sudan", label: "Sudan", continent: "Africa" }, + { + code: "sr", + value: "suriname", + label: "Suriname", + continent: "South America", + }, + { code: "se", value: "sweden", label: "Sweden", continent: "Europe" }, + { + code: "ch", + value: "switzerland", + label: "Switzerland", + continent: "Europe", + }, + { code: "sy", value: "syria", label: "Syria", continent: "Asia" }, + { code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" }, + { code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" }, + { code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" }, + { code: "th", value: "thailand", label: "Thailand", continent: "Asia" }, + { code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" }, + { code: "tg", value: "togo", label: "Togo", continent: "Africa" }, + { code: "to", value: "tonga", label: "Tonga", continent: "Oceania" }, + { + code: "tt", + value: "trinidad-and-tobago", + label: "Trinidad and Tobago", + continent: "North America", + }, + { code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" }, + { code: "tr", value: "turkey", label: "Turkey", continent: "Asia" }, + { + code: "tm", + value: "turkmenistan", + label: "Turkmenistan", + continent: "Asia", + }, + { code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" }, + { code: "ug", value: "uganda", label: "Uganda", continent: "Africa" }, + { code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" }, + { + code: "ae", + value: "united-arab-emirates", + label: "United Arab Emirates", + continent: "Asia", + }, + { + code: "gb", + value: "united-kingdom", + label: "United Kingdom", + continent: "Europe", + }, + { + code: "us", + value: "united-states", + label: "United States", + continent: "North America", + }, + { + code: "uy", + value: "uruguay", + label: "Uruguay", + continent: "South America", + }, + { code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" }, + { code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" }, + { + code: "va", + value: "vatican-city", + label: "Vatican City", + continent: "Europe", + }, + { + code: "ve", + value: "venezuela", + label: "Venezuela", + continent: "South America", + }, + { code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" }, + { code: "ye", value: "yemen", label: "Yemen", continent: "Asia" }, + { code: "zm", value: "zambia", label: "Zambia", continent: "Africa" }, + { code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" }, +] + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxInPopup() { + return ( + <> + + + } + > + + + + + No items found. + + {(item) => ( + + {item.label} + + )} + + + + + ) +} diff --git a/apps/v4/examples/base/combobox-invalid.tsx b/apps/v4/examples/base/combobox-invalid.tsx new file mode 100644 index 000000000..ba3c9f231 --- /dev/null +++ b/apps/v4/examples/base/combobox-invalid.tsx @@ -0,0 +1,100 @@ +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/examples/base/ui/combobox" +import { + Field, + FieldDescription, + FieldError, + FieldLabel, +} from "@/examples/base/ui/field" +import { Select } from "@/examples/base/ui/select" + +const frameworks = [ + "Next.js", + "SvelteKit", + "Nuxt.js", + "Remix", + "Astro", +] as const + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxInvalid() { + return ( +
+ + + + No items found. + + {(item) => ( + + {item} + + )} + + + + + Framework + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + Please select a valid framework. + + +
+ ) +} diff --git a/apps/v4/examples/base/combobox-large-list.tsx b/apps/v4/examples/base/combobox-large-list.tsx new file mode 100644 index 000000000..c7fcc29ec --- /dev/null +++ b/apps/v4/examples/base/combobox-large-list.tsx @@ -0,0 +1,65 @@ +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/examples/base/ui/combobox" +import { Item } from "@/examples/base/ui/item" +import { Select } from "@/examples/base/ui/select" + +const largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`) + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxLargeList() { + return ( + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + ) +} diff --git a/apps/v4/examples/base/combobox-multiple-disabled.tsx b/apps/v4/examples/base/combobox-multiple-disabled.tsx new file mode 100644 index 000000000..9e58e4fa8 --- /dev/null +++ b/apps/v4/examples/base/combobox-multiple-disabled.tsx @@ -0,0 +1,94 @@ +import * as React from "react" +import { + Combobox, + ComboboxChip, + ComboboxChips, + ComboboxChipsInput, + ComboboxContent, + ComboboxEmpty, + ComboboxItem, + ComboboxList, + ComboboxValue, + useComboboxAnchor, +} from "@/examples/base/ui/combobox" +import { Select } from "@/examples/base/ui/select" + +const frameworks = [ + "Next.js", + "SvelteKit", + "Nuxt.js", + "Remix", + "Astro", +] as const + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxMultipleDisabled() { + const anchor = useComboboxAnchor() + + return ( + + + + {(values) => ( + + {values.map((value: string) => ( + {value} + ))} + + + )} + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + ) +} diff --git a/apps/v4/examples/base/combobox-multiple-invalid.tsx b/apps/v4/examples/base/combobox-multiple-invalid.tsx new file mode 100644 index 000000000..c8afbe755 --- /dev/null +++ b/apps/v4/examples/base/combobox-multiple-invalid.tsx @@ -0,0 +1,141 @@ +import * as React from "react" +import { + Combobox, + ComboboxChip, + ComboboxChips, + ComboboxChipsInput, + ComboboxContent, + ComboboxEmpty, + ComboboxItem, + ComboboxList, + ComboboxValue, + useComboboxAnchor, +} from "@/examples/base/ui/combobox" +import { + Field, + FieldDescription, + FieldError, + FieldLabel, +} from "@/examples/base/ui/field" +import { Select } from "@/examples/base/ui/select" + +const frameworks = [ + "Next.js", + "SvelteKit", + "Nuxt.js", + "Remix", + "Astro", +] as const + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxMultipleInvalid() { + const anchor1 = useComboboxAnchor() + const anchor2 = useComboboxAnchor() + + return ( +
+ + + + {(values) => ( + + {values.map((value: string) => ( + {value} + ))} + + + )} + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + + Frameworks + + + + {(values) => ( + + {values.map((value: string) => ( + {value} + ))} + + + )} + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + + Please select at least one framework. + + + +
+ ) +} diff --git a/apps/v4/examples/base/combobox-multiple-no-remove.tsx b/apps/v4/examples/base/combobox-multiple-no-remove.tsx new file mode 100644 index 000000000..6b3ab4ec3 --- /dev/null +++ b/apps/v4/examples/base/combobox-multiple-no-remove.tsx @@ -0,0 +1,95 @@ +import * as React from "react" +import { + Combobox, + ComboboxChip, + ComboboxChips, + ComboboxChipsInput, + ComboboxContent, + ComboboxEmpty, + ComboboxItem, + ComboboxList, + ComboboxValue, + useComboboxAnchor, +} from "@/examples/base/ui/combobox" +import { Select } from "@/examples/base/ui/select" + +const frameworks = [ + "Next.js", + "SvelteKit", + "Nuxt.js", + "Remix", + "Astro", +] as const + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxMultipleNoRemove() { + const anchor = useComboboxAnchor() + + return ( + + + + {(values) => ( + + {values.map((value: string) => ( + + {value} + + ))} + + + )} + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + ) +} diff --git a/apps/v4/examples/base/combobox-multiple.tsx b/apps/v4/examples/base/combobox-multiple.tsx new file mode 100644 index 000000000..c1951ac31 --- /dev/null +++ b/apps/v4/examples/base/combobox-multiple.tsx @@ -0,0 +1,93 @@ +import * as React from "react" +import { + Combobox, + ComboboxChip, + ComboboxChips, + ComboboxChipsInput, + ComboboxContent, + ComboboxEmpty, + ComboboxItem, + ComboboxList, + ComboboxValue, + useComboboxAnchor, +} from "@/examples/base/ui/combobox" +import { Select } from "@/examples/base/ui/select" + +const frameworks = [ + "Next.js", + "SvelteKit", + "Nuxt.js", + "Remix", + "Astro", +] as const + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxMultiple() { + const anchor = useComboboxAnchor() + + return ( + + + + {(values) => ( + + {values.map((value: string) => ( + {value} + ))} + + + )} + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + ) +} diff --git a/apps/v4/examples/base/combobox-with-clear.tsx b/apps/v4/examples/base/combobox-with-clear.tsx new file mode 100644 index 000000000..8bebfda48 --- /dev/null +++ b/apps/v4/examples/base/combobox-with-clear.tsx @@ -0,0 +1,71 @@ +import { Button } from "@/examples/base/ui/button" +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/examples/base/ui/combobox" +import { Select } from "@/examples/base/ui/select" + +const frameworks = [ + "Next.js", + "SvelteKit", + "Nuxt.js", + "Remix", + "Astro", +] as const + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxWithClear() { + return ( + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + ) +} diff --git a/apps/v4/examples/base/combobox-with-custom-items.tsx b/apps/v4/examples/base/combobox-with-custom-items.tsx new file mode 100644 index 000000000..3cab67466 --- /dev/null +++ b/apps/v4/examples/base/combobox-with-custom-items.tsx @@ -0,0 +1,491 @@ +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/examples/base/ui/combobox" +import { + Item, + ItemContent, + ItemDescription, + ItemTitle, +} from "@/examples/base/ui/item" +import { Select } from "@/examples/base/ui/select" + +const countries = [ + { code: "", value: "", continent: "", label: "Select country" }, + { code: "af", value: "afghanistan", label: "Afghanistan", continent: "Asia" }, + { code: "al", value: "albania", label: "Albania", continent: "Europe" }, + { code: "dz", value: "algeria", label: "Algeria", continent: "Africa" }, + { code: "ad", value: "andorra", label: "Andorra", continent: "Europe" }, + { code: "ao", value: "angola", label: "Angola", continent: "Africa" }, + { + code: "ar", + value: "argentina", + label: "Argentina", + continent: "South America", + }, + { code: "am", value: "armenia", label: "Armenia", continent: "Asia" }, + { code: "au", value: "australia", label: "Australia", continent: "Oceania" }, + { code: "at", value: "austria", label: "Austria", continent: "Europe" }, + { code: "az", value: "azerbaijan", label: "Azerbaijan", continent: "Asia" }, + { + code: "bs", + value: "bahamas", + label: "Bahamas", + continent: "North America", + }, + { code: "bh", value: "bahrain", label: "Bahrain", continent: "Asia" }, + { code: "bd", value: "bangladesh", label: "Bangladesh", continent: "Asia" }, + { + code: "bb", + value: "barbados", + label: "Barbados", + continent: "North America", + }, + { code: "by", value: "belarus", label: "Belarus", continent: "Europe" }, + { code: "be", value: "belgium", label: "Belgium", continent: "Europe" }, + { code: "bz", value: "belize", label: "Belize", continent: "North America" }, + { code: "bj", value: "benin", label: "Benin", continent: "Africa" }, + { code: "bt", value: "bhutan", label: "Bhutan", continent: "Asia" }, + { + code: "bo", + value: "bolivia", + label: "Bolivia", + continent: "South America", + }, + { + code: "ba", + value: "bosnia-and-herzegovina", + label: "Bosnia and Herzegovina", + continent: "Europe", + }, + { code: "bw", value: "botswana", label: "Botswana", continent: "Africa" }, + { code: "br", value: "brazil", label: "Brazil", continent: "South America" }, + { code: "bn", value: "brunei", label: "Brunei", continent: "Asia" }, + { code: "bg", value: "bulgaria", label: "Bulgaria", continent: "Europe" }, + { + code: "bf", + value: "burkina-faso", + label: "Burkina Faso", + continent: "Africa", + }, + { code: "bi", value: "burundi", label: "Burundi", continent: "Africa" }, + { code: "kh", value: "cambodia", label: "Cambodia", continent: "Asia" }, + { code: "cm", value: "cameroon", label: "Cameroon", continent: "Africa" }, + { code: "ca", value: "canada", label: "Canada", continent: "North America" }, + { code: "cv", value: "cape-verde", label: "Cape Verde", continent: "Africa" }, + { + code: "cf", + value: "central-african-republic", + label: "Central African Republic", + continent: "Africa", + }, + { code: "td", value: "chad", label: "Chad", continent: "Africa" }, + { code: "cl", value: "chile", label: "Chile", continent: "South America" }, + { code: "cn", value: "china", label: "China", continent: "Asia" }, + { + code: "co", + value: "colombia", + label: "Colombia", + continent: "South America", + }, + { code: "km", value: "comoros", label: "Comoros", continent: "Africa" }, + { code: "cg", value: "congo", label: "Congo", continent: "Africa" }, + { + code: "cr", + value: "costa-rica", + label: "Costa Rica", + continent: "North America", + }, + { code: "hr", value: "croatia", label: "Croatia", continent: "Europe" }, + { code: "cu", value: "cuba", label: "Cuba", continent: "North America" }, + { code: "cy", value: "cyprus", label: "Cyprus", continent: "Asia" }, + { + code: "cz", + value: "czech-republic", + label: "Czech Republic", + continent: "Europe", + }, + { code: "dk", value: "denmark", label: "Denmark", continent: "Europe" }, + { code: "dj", value: "djibouti", label: "Djibouti", continent: "Africa" }, + { + code: "dm", + value: "dominica", + label: "Dominica", + continent: "North America", + }, + { + code: "do", + value: "dominican-republic", + label: "Dominican Republic", + continent: "North America", + }, + { + code: "ec", + value: "ecuador", + label: "Ecuador", + continent: "South America", + }, + { code: "eg", value: "egypt", label: "Egypt", continent: "Africa" }, + { + code: "sv", + value: "el-salvador", + label: "El Salvador", + continent: "North America", + }, + { + code: "gq", + value: "equatorial-guinea", + label: "Equatorial Guinea", + continent: "Africa", + }, + { code: "er", value: "eritrea", label: "Eritrea", continent: "Africa" }, + { code: "ee", value: "estonia", label: "Estonia", continent: "Europe" }, + { code: "et", value: "ethiopia", label: "Ethiopia", continent: "Africa" }, + { code: "fj", value: "fiji", label: "Fiji", continent: "Oceania" }, + { code: "fi", value: "finland", label: "Finland", continent: "Europe" }, + { code: "fr", value: "france", label: "France", continent: "Europe" }, + { code: "ga", value: "gabon", label: "Gabon", continent: "Africa" }, + { code: "gm", value: "gambia", label: "Gambia", continent: "Africa" }, + { code: "ge", value: "georgia", label: "Georgia", continent: "Asia" }, + { code: "de", value: "germany", label: "Germany", continent: "Europe" }, + { code: "gh", value: "ghana", label: "Ghana", continent: "Africa" }, + { code: "gr", value: "greece", label: "Greece", continent: "Europe" }, + { + code: "gd", + value: "grenada", + label: "Grenada", + continent: "North America", + }, + { + code: "gt", + value: "guatemala", + label: "Guatemala", + continent: "North America", + }, + { code: "gn", value: "guinea", label: "Guinea", continent: "Africa" }, + { + code: "gw", + value: "guinea-bissau", + label: "Guinea-Bissau", + continent: "Africa", + }, + { code: "gy", value: "guyana", label: "Guyana", continent: "South America" }, + { code: "ht", value: "haiti", label: "Haiti", continent: "North America" }, + { + code: "hn", + value: "honduras", + label: "Honduras", + continent: "North America", + }, + { code: "hu", value: "hungary", label: "Hungary", continent: "Europe" }, + { code: "is", value: "iceland", label: "Iceland", continent: "Europe" }, + { code: "in", value: "india", label: "India", continent: "Asia" }, + { code: "id", value: "indonesia", label: "Indonesia", continent: "Asia" }, + { code: "ir", value: "iran", label: "Iran", continent: "Asia" }, + { code: "iq", value: "iraq", label: "Iraq", continent: "Asia" }, + { code: "ie", value: "ireland", label: "Ireland", continent: "Europe" }, + { code: "il", value: "israel", label: "Israel", continent: "Asia" }, + { code: "it", value: "italy", label: "Italy", continent: "Europe" }, + { + code: "jm", + value: "jamaica", + label: "Jamaica", + continent: "North America", + }, + { code: "jp", value: "japan", label: "Japan", continent: "Asia" }, + { code: "jo", value: "jordan", label: "Jordan", continent: "Asia" }, + { code: "kz", value: "kazakhstan", label: "Kazakhstan", continent: "Asia" }, + { code: "ke", value: "kenya", label: "Kenya", continent: "Africa" }, + { code: "kw", value: "kuwait", label: "Kuwait", continent: "Asia" }, + { code: "kg", value: "kyrgyzstan", label: "Kyrgyzstan", continent: "Asia" }, + { code: "la", value: "laos", label: "Laos", continent: "Asia" }, + { code: "lv", value: "latvia", label: "Latvia", continent: "Europe" }, + { code: "lb", value: "lebanon", label: "Lebanon", continent: "Asia" }, + { code: "ls", value: "lesotho", label: "Lesotho", continent: "Africa" }, + { code: "lr", value: "liberia", label: "Liberia", continent: "Africa" }, + { code: "ly", value: "libya", label: "Libya", continent: "Africa" }, + { + code: "li", + value: "liechtenstein", + label: "Liechtenstein", + continent: "Europe", + }, + { code: "lt", value: "lithuania", label: "Lithuania", continent: "Europe" }, + { code: "lu", value: "luxembourg", label: "Luxembourg", continent: "Europe" }, + { code: "mg", value: "madagascar", label: "Madagascar", continent: "Africa" }, + { code: "mw", value: "malawi", label: "Malawi", continent: "Africa" }, + { code: "my", value: "malaysia", label: "Malaysia", continent: "Asia" }, + { code: "mv", value: "maldives", label: "Maldives", continent: "Asia" }, + { code: "ml", value: "mali", label: "Mali", continent: "Africa" }, + { code: "mt", value: "malta", label: "Malta", continent: "Europe" }, + { + code: "mh", + value: "marshall-islands", + label: "Marshall Islands", + continent: "Oceania", + }, + { code: "mr", value: "mauritania", label: "Mauritania", continent: "Africa" }, + { code: "mu", value: "mauritius", label: "Mauritius", continent: "Africa" }, + { code: "mx", value: "mexico", label: "Mexico", continent: "North America" }, + { + code: "fm", + value: "micronesia", + label: "Micronesia", + continent: "Oceania", + }, + { code: "md", value: "moldova", label: "Moldova", continent: "Europe" }, + { code: "mc", value: "monaco", label: "Monaco", continent: "Europe" }, + { code: "mn", value: "mongolia", label: "Mongolia", continent: "Asia" }, + { code: "me", value: "montenegro", label: "Montenegro", continent: "Europe" }, + { code: "ma", value: "morocco", label: "Morocco", continent: "Africa" }, + { code: "mz", value: "mozambique", label: "Mozambique", continent: "Africa" }, + { code: "mm", value: "myanmar", label: "Myanmar", continent: "Asia" }, + { code: "na", value: "namibia", label: "Namibia", continent: "Africa" }, + { code: "nr", value: "nauru", label: "Nauru", continent: "Oceania" }, + { code: "np", value: "nepal", label: "Nepal", continent: "Asia" }, + { + code: "nl", + value: "netherlands", + label: "Netherlands", + continent: "Europe", + }, + { + code: "nz", + value: "new-zealand", + label: "New Zealand", + continent: "Oceania", + }, + { + code: "ni", + value: "nicaragua", + label: "Nicaragua", + continent: "North America", + }, + { code: "ne", value: "niger", label: "Niger", continent: "Africa" }, + { code: "ng", value: "nigeria", label: "Nigeria", continent: "Africa" }, + { code: "kp", value: "north-korea", label: "North Korea", continent: "Asia" }, + { + code: "mk", + value: "north-macedonia", + label: "North Macedonia", + continent: "Europe", + }, + { code: "no", value: "norway", label: "Norway", continent: "Europe" }, + { code: "om", value: "oman", label: "Oman", continent: "Asia" }, + { code: "pk", value: "pakistan", label: "Pakistan", continent: "Asia" }, + { code: "pw", value: "palau", label: "Palau", continent: "Oceania" }, + { code: "ps", value: "palestine", label: "Palestine", continent: "Asia" }, + { code: "pa", value: "panama", label: "Panama", continent: "North America" }, + { + code: "pg", + value: "papua-new-guinea", + label: "Papua New Guinea", + continent: "Oceania", + }, + { + code: "py", + value: "paraguay", + label: "Paraguay", + continent: "South America", + }, + { code: "pe", value: "peru", label: "Peru", continent: "South America" }, + { code: "ph", value: "philippines", label: "Philippines", continent: "Asia" }, + { code: "pl", value: "poland", label: "Poland", continent: "Europe" }, + { code: "pt", value: "portugal", label: "Portugal", continent: "Europe" }, + { code: "qa", value: "qatar", label: "Qatar", continent: "Asia" }, + { code: "ro", value: "romania", label: "Romania", continent: "Europe" }, + { code: "ru", value: "russia", label: "Russia", continent: "Europe" }, + { code: "rw", value: "rwanda", label: "Rwanda", continent: "Africa" }, + { code: "ws", value: "samoa", label: "Samoa", continent: "Oceania" }, + { code: "sm", value: "san-marino", label: "San Marino", continent: "Europe" }, + { + code: "sa", + value: "saudi-arabia", + label: "Saudi Arabia", + continent: "Asia", + }, + { code: "sn", value: "senegal", label: "Senegal", continent: "Africa" }, + { code: "rs", value: "serbia", label: "Serbia", continent: "Europe" }, + { code: "sc", value: "seychelles", label: "Seychelles", continent: "Africa" }, + { + code: "sl", + value: "sierra-leone", + label: "Sierra Leone", + continent: "Africa", + }, + { code: "sg", value: "singapore", label: "Singapore", continent: "Asia" }, + { code: "sk", value: "slovakia", label: "Slovakia", continent: "Europe" }, + { code: "si", value: "slovenia", label: "Slovenia", continent: "Europe" }, + { + code: "sb", + value: "solomon-islands", + label: "Solomon Islands", + continent: "Oceania", + }, + { code: "so", value: "somalia", label: "Somalia", continent: "Africa" }, + { + code: "za", + value: "south-africa", + label: "South Africa", + continent: "Africa", + }, + { code: "kr", value: "south-korea", label: "South Korea", continent: "Asia" }, + { + code: "ss", + value: "south-sudan", + label: "South Sudan", + continent: "Africa", + }, + { code: "es", value: "spain", label: "Spain", continent: "Europe" }, + { code: "lk", value: "sri-lanka", label: "Sri Lanka", continent: "Asia" }, + { code: "sd", value: "sudan", label: "Sudan", continent: "Africa" }, + { + code: "sr", + value: "suriname", + label: "Suriname", + continent: "South America", + }, + { code: "se", value: "sweden", label: "Sweden", continent: "Europe" }, + { + code: "ch", + value: "switzerland", + label: "Switzerland", + continent: "Europe", + }, + { code: "sy", value: "syria", label: "Syria", continent: "Asia" }, + { code: "tw", value: "taiwan", label: "Taiwan", continent: "Asia" }, + { code: "tj", value: "tajikistan", label: "Tajikistan", continent: "Asia" }, + { code: "tz", value: "tanzania", label: "Tanzania", continent: "Africa" }, + { code: "th", value: "thailand", label: "Thailand", continent: "Asia" }, + { code: "tl", value: "timor-leste", label: "Timor-Leste", continent: "Asia" }, + { code: "tg", value: "togo", label: "Togo", continent: "Africa" }, + { code: "to", value: "tonga", label: "Tonga", continent: "Oceania" }, + { + code: "tt", + value: "trinidad-and-tobago", + label: "Trinidad and Tobago", + continent: "North America", + }, + { code: "tn", value: "tunisia", label: "Tunisia", continent: "Africa" }, + { code: "tr", value: "turkey", label: "Turkey", continent: "Asia" }, + { + code: "tm", + value: "turkmenistan", + label: "Turkmenistan", + continent: "Asia", + }, + { code: "tv", value: "tuvalu", label: "Tuvalu", continent: "Oceania" }, + { code: "ug", value: "uganda", label: "Uganda", continent: "Africa" }, + { code: "ua", value: "ukraine", label: "Ukraine", continent: "Europe" }, + { + code: "ae", + value: "united-arab-emirates", + label: "United Arab Emirates", + continent: "Asia", + }, + { + code: "gb", + value: "united-kingdom", + label: "United Kingdom", + continent: "Europe", + }, + { + code: "us", + value: "united-states", + label: "United States", + continent: "North America", + }, + { + code: "uy", + value: "uruguay", + label: "Uruguay", + continent: "South America", + }, + { code: "uz", value: "uzbekistan", label: "Uzbekistan", continent: "Asia" }, + { code: "vu", value: "vanuatu", label: "Vanuatu", continent: "Oceania" }, + { + code: "va", + value: "vatican-city", + label: "Vatican City", + continent: "Europe", + }, + { + code: "ve", + value: "venezuela", + label: "Venezuela", + continent: "South America", + }, + { code: "vn", value: "vietnam", label: "Vietnam", continent: "Asia" }, + { code: "ye", value: "yemen", label: "Yemen", continent: "Asia" }, + { code: "zm", value: "zambia", label: "Zambia", continent: "Africa" }, + { code: "zw", value: "zimbabwe", label: "Zimbabwe", continent: "Africa" }, +] + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxWithCustomItems() { + return ( + country.code !== "")} + itemToStringValue={(country: (typeof countries)[number]) => country.label} + > + + + No countries found. + + {(country) => ( + + + + + {country.label} + + + {country.continent} ({country.code}) + + + + + )} + + + + ) +} diff --git a/apps/v4/examples/base/combobox-with-form.tsx b/apps/v4/examples/base/combobox-with-form.tsx new file mode 100644 index 000000000..3febdced0 --- /dev/null +++ b/apps/v4/examples/base/combobox-with-form.tsx @@ -0,0 +1,107 @@ +import * as React from "react" +import { Button } from "@/examples/base/ui/button" +import { Card, CardContent, CardFooter } from "@/examples/base/ui/card" +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/examples/base/ui/combobox" +import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field" +import { Select } from "@/examples/base/ui/select" +import { toast } from "sonner" + +const frameworks = [ + "Next.js", + "SvelteKit", + "Nuxt.js", + "Remix", + "Astro", +] as const + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxWithForm() { + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault() + const formData = new FormData(event.target as HTMLFormElement) + const framework = formData.get("framework") as string + toast(`You selected ${framework} as your framework.`) + } + + return ( + + +
+ + + Framework + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + + +
+ + + + + + ) +} diff --git a/apps/v4/examples/base/combobox-with-groups-and-separator.tsx b/apps/v4/examples/base/combobox-with-groups-and-separator.tsx new file mode 100644 index 000000000..a0ebad2cb --- /dev/null +++ b/apps/v4/examples/base/combobox-with-groups-and-separator.tsx @@ -0,0 +1,110 @@ +import { + Combobox, + ComboboxCollection, + ComboboxContent, + ComboboxEmpty, + ComboboxGroup, + ComboboxInput, + ComboboxItem, + ComboboxLabel, + ComboboxList, + ComboboxSeparator, +} from "@/examples/base/ui/combobox" +import { Select } from "@/examples/base/ui/select" + +const timezones = [ + { + value: "Americas", + items: [ + "(GMT-5) New York", + "(GMT-8) Los Angeles", + "(GMT-6) Chicago", + "(GMT-5) Toronto", + "(GMT-8) Vancouver", + "(GMT-3) São Paulo", + ], + }, + { + value: "Europe", + items: [ + "(GMT+0) London", + "(GMT+1) Paris", + "(GMT+1) Berlin", + "(GMT+1) Rome", + "(GMT+1) Madrid", + "(GMT+1) Amsterdam", + ], + }, + { + value: "Asia/Pacific", + items: [ + "(GMT+9) Tokyo", + "(GMT+8) Shanghai", + "(GMT+8) Singapore", + "(GMT+4) Dubai", + "(GMT+11) Sydney", + "(GMT+9) Seoul", + ], + }, +] as const + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxWithGroupsAndSeparator() { + return ( + + + + No timezones found. + + {(group) => ( + + {group.value} + + {(item) => ( + + {item} + + )} + + + + )} + + + + ) +} diff --git a/apps/v4/examples/base/combobox-with-groups.tsx b/apps/v4/examples/base/combobox-with-groups.tsx new file mode 100644 index 000000000..f978629fc --- /dev/null +++ b/apps/v4/examples/base/combobox-with-groups.tsx @@ -0,0 +1,108 @@ +import { + Combobox, + ComboboxCollection, + ComboboxContent, + ComboboxEmpty, + ComboboxGroup, + ComboboxInput, + ComboboxItem, + ComboboxLabel, + ComboboxList, +} from "@/examples/base/ui/combobox" +import { Select } from "@/examples/base/ui/select" + +const timezones = [ + { + value: "Americas", + items: [ + "(GMT-5) New York", + "(GMT-8) Los Angeles", + "(GMT-6) Chicago", + "(GMT-5) Toronto", + "(GMT-8) Vancouver", + "(GMT-3) São Paulo", + ], + }, + { + value: "Europe", + items: [ + "(GMT+0) London", + "(GMT+1) Paris", + "(GMT+1) Berlin", + "(GMT+1) Rome", + "(GMT+1) Madrid", + "(GMT+1) Amsterdam", + ], + }, + { + value: "Asia/Pacific", + items: [ + "(GMT+9) Tokyo", + "(GMT+8) Shanghai", + "(GMT+8) Singapore", + "(GMT+4) Dubai", + "(GMT+11) Sydney", + "(GMT+9) Seoul", + ], + }, +] as const + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxWithGroups() { + return ( + + + + No timezones found. + + {(group) => ( + + {group.value} + + {(item) => ( + + {item} + + )} + + + )} + + + + ) +} diff --git a/apps/v4/examples/base/combobox-with-other-inputs.tsx b/apps/v4/examples/base/combobox-with-other-inputs.tsx new file mode 100644 index 000000000..8126e6579 --- /dev/null +++ b/apps/v4/examples/base/combobox-with-other-inputs.tsx @@ -0,0 +1,115 @@ +import { Button } from "@/examples/base/ui/button" +import { + Combobox, + ComboboxContent, + ComboboxEmpty, + ComboboxInput, + ComboboxItem, + ComboboxList, +} from "@/examples/base/ui/combobox" +import { Input } from "@/examples/base/ui/input" +import { + InputGroup, + InputGroupAddon, + InputGroupInput, +} from "@/examples/base/ui/input-group" +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/examples/base/ui/select" +import { ChevronDownIcon } from "lucide-react" + +const frameworks = [ + "Next.js", + "SvelteKit", + "Nuxt.js", + "Remix", + "Astro", +] as const + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboboxWithOtherInputs() { + return ( + <> + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + + + + + + + + + + + ) +} diff --git a/apps/v4/examples/base/comboxbox-input-addon.tsx b/apps/v4/examples/base/comboxbox-input-addon.tsx new file mode 100644 index 000000000..8b9d4043b --- /dev/null +++ b/apps/v4/examples/base/comboxbox-input-addon.tsx @@ -0,0 +1,115 @@ +import { + Combobox, + ComboboxCollection, + ComboboxContent, + ComboboxEmpty, + ComboboxGroup, + ComboboxInput, + ComboboxItem, + ComboboxLabel, + ComboboxList, +} from "@/examples/base/ui/combobox" +import { Input } from "@/examples/base/ui/input" +import { InputGroup, InputGroupAddon } from "@/examples/base/ui/input-group" +import { Select } from "@/examples/base/ui/select" +import { GlobeIcon } from "lucide-react" + +const timezones = [ + { + value: "Americas", + items: [ + "(GMT-5) New York", + "(GMT-8) Los Angeles", + "(GMT-6) Chicago", + "(GMT-5) Toronto", + "(GMT-8) Vancouver", + "(GMT-3) São Paulo", + ], + }, + { + value: "Europe", + items: [ + "(GMT+0) London", + "(GMT+1) Paris", + "(GMT+1) Berlin", + "(GMT+1) Rome", + "(GMT+1) Madrid", + "(GMT+1) Amsterdam", + ], + }, + { + value: "Asia/Pacific", + items: [ + "(GMT+9) Tokyo", + "(GMT+8) Shanghai", + "(GMT+8) Singapore", + "(GMT+4) Dubai", + "(GMT+11) Sydney", + "(GMT+9) Seoul", + ], + }, +] as const + +const items = [ + { + label: "Select a framework", + value: null, + }, + { + label: "React", + value: "react", + }, + { + label: "Vue", + value: "vue", + }, + { + label: "Angular", + value: "angular", + }, + { + label: "Svelte", + value: "svelte", + }, + { + label: "Solid", + value: "solid", + }, + { + label: "Preact", + value: "preact", + }, + { + label: "Next.js", + value: "next.js", + }, +] + +export function ComboxboxInputAddon() { + return ( + + + + + + + + No timezones found. + + {(group) => ( + + {group.value} + + {(item) => ( + + {item} + + )} + + + )} + + + + ) +} diff --git a/apps/v4/examples/base/command-basic.tsx b/apps/v4/examples/base/command-basic.tsx new file mode 100644 index 000000000..984836011 --- /dev/null +++ b/apps/v4/examples/base/command-basic.tsx @@ -0,0 +1,38 @@ +"use client" + +import * as React from "react" +import { Button } from "@/examples/base/ui/button" +import { + Command, + CommandDialog, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, +} from "@/examples/base/ui/command" + +export function CommandBasic() { + const [open, setOpen] = React.useState(false) + + return ( +
+ + + + + + No results found. + + Calendar + Search Emoji + Calculator + + + + +
+ ) +} diff --git a/apps/v4/examples/base/command-many-items.tsx b/apps/v4/examples/base/command-many-items.tsx new file mode 100644 index 000000000..1118a6671 --- /dev/null +++ b/apps/v4/examples/base/command-many-items.tsx @@ -0,0 +1,181 @@ +"use client" + +import * as React from "react" +import { Button } from "@/examples/base/ui/button" +import { + Command, + CommandDialog, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, + CommandSeparator, + CommandShortcut, +} from "@/examples/base/ui/command" +import { + BellIcon, + CalculatorIcon, + CalendarIcon, + ClipboardPasteIcon, + CodeIcon, + CopyIcon, + CreditCardIcon, + FileTextIcon, + FolderIcon, + FolderPlusIcon, + HelpCircleIcon, + HomeIcon, + ImageIcon, + InboxIcon, + LayoutGridIcon, + ListIcon, + PlusIcon, + ScissorsIcon, + SettingsIcon, + TrashIcon, + UserIcon, + ZoomInIcon, + ZoomOutIcon, +} from "lucide-react" + +export function CommandManyItems() { + const [open, setOpen] = React.useState(false) + + return ( +
+ + + + + + No results found. + + + + Home + ⌘H + + + + Inbox + ⌘I + + + + Documents + ⌘D + + + + Folders + ⌘F + + + + + + + New File + ⌘N + + + + New Folder + ⇧⌘N + + + + Copy + ⌘C + + + + Cut + ⌘X + + + + Paste + ⌘V + + + + Delete + ⌫ + + + + + + + Grid View + + + + List View + + + + Zoom In + ⌘+ + + + + Zoom Out + ⌘- + + + + + + + Profile + ⌘P + + + + Billing + ⌘B + + + + Settings + ⌘S + + + + Notifications + + + + Help & Support + + + + + + + Calculator + + + + Calendar + + + + Image Editor + + + + Code Editor + + + + + +
+ ) +} diff --git a/apps/v4/examples/base/command-with-groups.tsx b/apps/v4/examples/base/command-with-groups.tsx new file mode 100644 index 000000000..6477cc370 --- /dev/null +++ b/apps/v4/examples/base/command-with-groups.tsx @@ -0,0 +1,75 @@ +"use client" + +import * as React from "react" +import { Button } from "@/examples/base/ui/button" +import { + Command, + CommandDialog, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, + CommandSeparator, + CommandShortcut, +} from "@/examples/base/ui/command" +import { + CalculatorIcon, + CalendarIcon, + CreditCardIcon, + SettingsIcon, + SmileIcon, + UserIcon, +} from "lucide-react" + +export function CommandWithGroups() { + const [open, setOpen] = React.useState(false) + + return ( +
+ + + + + + No results found. + + + + Calendar + + + + Search Emoji + + + + Calculator + + + + + + + Profile + ⌘P + + + + Billing + ⌘B + + + + Settings + ⌘S + + + + + +
+ ) +} diff --git a/apps/v4/examples/base/command-with-shortcuts.tsx b/apps/v4/examples/base/command-with-shortcuts.tsx new file mode 100644 index 000000000..58ffeeeac --- /dev/null +++ b/apps/v4/examples/base/command-with-shortcuts.tsx @@ -0,0 +1,52 @@ +"use client" + +import * as React from "react" +import { Button } from "@/examples/base/ui/button" +import { + Command, + CommandDialog, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, + CommandShortcut, +} from "@/examples/base/ui/command" +import { CreditCardIcon, SettingsIcon, UserIcon } from "lucide-react" + +export function CommandWithShortcuts() { + const [open, setOpen] = React.useState(false) + + return ( +
+ + + + + + No results found. + + + + Profile + ⌘P + + + + Billing + ⌘B + + + + Settings + ⌘S + + + + + +
+ ) +} diff --git a/apps/v4/examples/base/context-menu-basic.tsx b/apps/v4/examples/base/context-menu-basic.tsx new file mode 100644 index 000000000..f336e2905 --- /dev/null +++ b/apps/v4/examples/base/context-menu-basic.tsx @@ -0,0 +1,24 @@ +import { + ContextMenu, + ContextMenuContent, + ContextMenuGroup, + ContextMenuItem, + ContextMenuTrigger, +} from "@/examples/base/ui/context-menu" + +export function ContextMenuBasic() { + return ( + + + Right click here + + + + Back + Forward + Reload + + + + ) +} diff --git a/apps/v4/examples/base/context-menu-in-dialog.tsx b/apps/v4/examples/base/context-menu-in-dialog.tsx new file mode 100644 index 000000000..f21165692 --- /dev/null +++ b/apps/v4/examples/base/context-menu-in-dialog.tsx @@ -0,0 +1,89 @@ +import { Button } from "@/examples/base/ui/button" +import { + ContextMenu, + ContextMenuContent, + ContextMenuGroup, + ContextMenuItem, + ContextMenuSeparator, + ContextMenuSub, + ContextMenuSubContent, + ContextMenuSubTrigger, + ContextMenuTrigger, +} from "@/examples/base/ui/context-menu" +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/examples/base/ui/dialog" +import { + ClipboardPasteIcon, + CopyIcon, + ScissorsIcon, + TrashIcon, +} from "lucide-react" + +export function ContextMenuInDialog() { + return ( + <> + + }> + Open Dialog + + + + Context Menu Example + + Right click on the area below to see the context menu. + + + + + Right click here + + + + + + Copy + + + + Cut + + + + Paste + + + + + More Options + + + Save Page... + Create Shortcut... + Name Window... + + + + Developer Tools + + + + + + + + Delete + + + + + + + + ) +} diff --git a/apps/v4/examples/base/context-menu-with-checkboxes.tsx b/apps/v4/examples/base/context-menu-with-checkboxes.tsx new file mode 100644 index 000000000..aaf692b17 --- /dev/null +++ b/apps/v4/examples/base/context-menu-with-checkboxes.tsx @@ -0,0 +1,28 @@ +import { + ContextMenu, + ContextMenuCheckboxItem, + ContextMenuContent, + ContextMenuGroup, + ContextMenuTrigger, +} from "@/examples/base/ui/context-menu" + +export function ContextMenuWithCheckboxes() { + return ( + + + Right click here + + + + + Show Bookmarks Bar + + Show Full URLs + + Show Developer Tools + + + + + ) +} diff --git a/apps/v4/examples/base/context-menu-with-destructive.tsx b/apps/v4/examples/base/context-menu-with-destructive.tsx new file mode 100644 index 000000000..ada6af5c8 --- /dev/null +++ b/apps/v4/examples/base/context-menu-with-destructive.tsx @@ -0,0 +1,42 @@ +import { + ContextMenu, + ContextMenuContent, + ContextMenuGroup, + ContextMenuItem, + ContextMenuSeparator, + ContextMenuTrigger, +} from "@/examples/base/ui/context-menu" +import { ArchiveIcon, PencilIcon, ShareIcon, TrashIcon } from "lucide-react" + +export function ContextMenuWithDestructive() { + return ( + + + Right click here + + + + + + Edit + + + + Share + + + + + + + Archive + + + + Delete + + + + + ) +} diff --git a/apps/v4/examples/base/context-menu-with-groups.tsx b/apps/v4/examples/base/context-menu-with-groups.tsx new file mode 100644 index 000000000..4dd9b50b3 --- /dev/null +++ b/apps/v4/examples/base/context-menu-with-groups.tsx @@ -0,0 +1,71 @@ +import { + ContextMenu, + ContextMenuContent, + ContextMenuGroup, + ContextMenuItem, + ContextMenuLabel, + ContextMenuSeparator, + ContextMenuShortcut, + ContextMenuTrigger, +} from "@/examples/base/ui/context-menu" + +export function ContextMenuWithGroups() { + return ( + + + Right click here + + + + File + + New File + ⌘N + + + Open File + ⌘O + + + Save + ⌘S + + + + + Edit + + Undo + ⌘Z + + + Redo + ⇧⌘Z + + + + + + Cut + ⌘X + + + Copy + ⌘C + + + Paste + ⌘V + + + + + + Delete + ⌫ + + + + + ) +} diff --git a/apps/v4/examples/base/context-menu-with-icons.tsx b/apps/v4/examples/base/context-menu-with-icons.tsx new file mode 100644 index 000000000..f54faf3a5 --- /dev/null +++ b/apps/v4/examples/base/context-menu-with-icons.tsx @@ -0,0 +1,47 @@ +import { + ContextMenu, + ContextMenuContent, + ContextMenuGroup, + ContextMenuItem, + ContextMenuSeparator, + ContextMenuTrigger, +} from "@/examples/base/ui/context-menu" +import { + ClipboardPasteIcon, + CopyIcon, + ScissorsIcon, + TrashIcon, +} from "lucide-react" + +export function ContextMenuWithIcons() { + return ( + + + Right click here + + + + + + Copy + + + + Cut + + + + Paste + + + + + + + Delete + + + + + ) +} diff --git a/apps/v4/examples/base/context-menu-with-radio.tsx b/apps/v4/examples/base/context-menu-with-radio.tsx new file mode 100644 index 000000000..e1c962803 --- /dev/null +++ b/apps/v4/examples/base/context-menu-with-radio.tsx @@ -0,0 +1,46 @@ +"use client" + +import * as React from "react" +import { + ContextMenu, + ContextMenuContent, + ContextMenuGroup, + ContextMenuLabel, + ContextMenuRadioGroup, + ContextMenuRadioItem, + ContextMenuSeparator, + ContextMenuTrigger, +} from "@/examples/base/ui/context-menu" + +export function ContextMenuWithRadio() { + const [user, setUser] = React.useState("pedro") + const [theme, setTheme] = React.useState("light") + + return ( + + + Right click here + + + + People + + + Pedro Duarte + + Colm Tuite + + + + + Theme + + Light + Dark + System + + + + + ) +} diff --git a/apps/v4/examples/base/context-menu-with-shortcuts.tsx b/apps/v4/examples/base/context-menu-with-shortcuts.tsx new file mode 100644 index 000000000..c175fe54c --- /dev/null +++ b/apps/v4/examples/base/context-menu-with-shortcuts.tsx @@ -0,0 +1,46 @@ +import { + ContextMenu, + ContextMenuContent, + ContextMenuGroup, + ContextMenuItem, + ContextMenuSeparator, + ContextMenuShortcut, + ContextMenuTrigger, +} from "@/examples/base/ui/context-menu" + +export function ContextMenuWithShortcuts() { + return ( + + + Right click here + + + + + Back + ⌘[ + + + Forward + ⌘] + + + Reload + ⌘R + + + + + + Save + ⌘S + + + Save As... + ⇧⌘S + + + + + ) +} diff --git a/apps/v4/examples/base/context-menu-with-sides.tsx b/apps/v4/examples/base/context-menu-with-sides.tsx new file mode 100644 index 000000000..272ca47ec --- /dev/null +++ b/apps/v4/examples/base/context-menu-with-sides.tsx @@ -0,0 +1,62 @@ +import { + ContextMenu, + ContextMenuContent, + ContextMenuGroup, + ContextMenuItem, + ContextMenuTrigger, +} from "@/examples/base/ui/context-menu" + +export function ContextMenuWithSides() { + return ( +
+ + + Right click (top) + + + + Back + Forward + Reload + + + + + + Right click (right) + + + + Back + Forward + Reload + + + + + + Right click (bottom) + + + + Back + Forward + Reload + + + + + + Right click (left) + + + + Back + Forward + Reload + + + +
+ ) +} diff --git a/apps/v4/examples/base/context-menu-with-submenu.tsx b/apps/v4/examples/base/context-menu-with-submenu.tsx new file mode 100644 index 000000000..769270cfe --- /dev/null +++ b/apps/v4/examples/base/context-menu-with-submenu.tsx @@ -0,0 +1,52 @@ +import { + ContextMenu, + ContextMenuContent, + ContextMenuGroup, + ContextMenuItem, + ContextMenuSeparator, + ContextMenuShortcut, + ContextMenuSub, + ContextMenuSubContent, + ContextMenuSubTrigger, + ContextMenuTrigger, +} from "@/examples/base/ui/context-menu" + +export function ContextMenuWithSubmenu() { + return ( + + + Right click here + + + + + Copy + ⌘C + + + Cut + ⌘X + + + + More Tools + + + Save Page... + Create Shortcut... + Name Window... + + + + Developer Tools + + + + Delete + + + + + + ) +} diff --git a/apps/v4/examples/base/data-picker-with-dropdowns.tsx b/apps/v4/examples/base/data-picker-with-dropdowns.tsx new file mode 100644 index 000000000..d7c8b0259 --- /dev/null +++ b/apps/v4/examples/base/data-picker-with-dropdowns.tsx @@ -0,0 +1,58 @@ +"use client" + +import * as React from "react" +import { Button } from "@/examples/base/ui/button" +import { Calendar } from "@/examples/base/ui/calendar" +import { Field, FieldLabel } from "@/examples/base/ui/field" +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/examples/base/ui/popover" +import { format } from "date-fns" +import { ChevronDownIcon } from "lucide-react" + +export function DataPickerWithDropdowns() { + const [date, setDate] = React.useState() + const [open, setOpen] = React.useState(false) + + return ( + + + + Date + + + } + > + + {date ? format(date, "PPP") : Pick a date} + + + +
+ +
+ + + + ) +} diff --git a/apps/v4/examples/base/date-picker-simple.tsx b/apps/v4/examples/base/date-picker-simple.tsx new file mode 100644 index 000000000..60d36a71b --- /dev/null +++ b/apps/v4/examples/base/date-picker-simple.tsx @@ -0,0 +1,40 @@ +"use client" + +import * as React from "react" +import { Button } from "@/examples/base/ui/button" +import { Calendar } from "@/examples/base/ui/calendar" +import { Field, FieldLabel } from "@/examples/base/ui/field" +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/examples/base/ui/popover" +import { format } from "date-fns" +import { CalendarIcon } from "lucide-react" + +export function DatePickerSimple() { + const [date, setDate] = React.useState() + + return ( + + Date + + + } + > + + {date ? format(date, "PPP") : Pick a date} + + + + + + + ) +} diff --git a/apps/v4/examples/base/date-picker-with-range.tsx b/apps/v4/examples/base/date-picker-with-range.tsx index 26c515e28..1f335b50e 100644 --- a/apps/v4/examples/base/date-picker-with-range.tsx +++ b/apps/v4/examples/base/date-picker-with-range.tsx @@ -3,6 +3,7 @@ import * as React from "react" import { Button } from "@/examples/base/ui/button" import { Calendar } from "@/examples/base/ui/calendar" +import { Field, FieldLabel } from "@/examples/base/ui/field" import { Popover, PopoverContent, @@ -12,28 +13,22 @@ import { addDays, format } from "date-fns" import { CalendarIcon } from "lucide-react" import { type DateRange } from "react-day-picker" -import { cn } from "@/lib/utils" - -export function DatePickerWithRange({ - className, -}: React.HTMLAttributes) { +export function DatePickerWithRange() { const [date, setDate] = React.useState({ - from: new Date(2022, 0, 20), - to: addDays(new Date(2022, 0, 20), 20), + from: new Date(new Date().getFullYear(), 0, 20), + to: addDays(new Date(new Date().getFullYear(), 0, 20), 20), }) return ( -
+ + Date Picker Range } > @@ -53,7 +48,6 @@ export function DatePickerWithRange({ -
+ ) } diff --git a/apps/v4/examples/base/default-item-group.tsx b/apps/v4/examples/base/default-item-group.tsx new file mode 100644 index 000000000..be74af83b --- /dev/null +++ b/apps/v4/examples/base/default-item-group.tsx @@ -0,0 +1,32 @@ +import { + Item, + ItemContent, + ItemDescription, + ItemGroup, + ItemTitle, +} from "@/examples/base/ui/item" + +export function DefaultItemGroup() { + return ( + + + + Item 1 + First item in the group. + + + + + Item 2 + Second item in the group. + + + + + Item 3 + Third item in the group. + + + + ) +} diff --git a/apps/v4/examples/base/dialog-chat-settings.tsx b/apps/v4/examples/base/dialog-chat-settings.tsx new file mode 100644 index 000000000..c7f653d1d --- /dev/null +++ b/apps/v4/examples/base/dialog-chat-settings.tsx @@ -0,0 +1,429 @@ +"use client" + +import * as React from "react" +import { Button } from "@/examples/base/ui/button" +import { Checkbox } from "@/examples/base/ui/checkbox" +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/examples/base/ui/dialog" +import { + Field, + FieldContent, + FieldDescription, + FieldGroup, + FieldLabel, + FieldSeparator, + FieldSet, + FieldTitle, +} from "@/examples/base/ui/field" +import { Input } from "@/examples/base/ui/input" +import { + InputGroup, + InputGroupAddon, + InputGroupButton, + InputGroupInput, +} from "@/examples/base/ui/input-group" +import { Kbd } from "@/examples/base/ui/kbd" +import { + NativeSelect, + NativeSelectOption, +} from "@/examples/base/ui/native-select" +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/examples/base/ui/select" +import { Switch } from "@/examples/base/ui/switch" +import { + Tabs, + TabsContent, + TabsList, + TabsTrigger, +} from "@/examples/base/ui/tabs" +import { Textarea } from "@/examples/base/ui/textarea" +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/examples/base/ui/tooltip" +import { InfoIcon } from "lucide-react" + +const spokenLanguages = [ + { label: "Auto", value: "auto" }, + { label: "English", value: "en" }, + { label: "Spanish", value: "es" }, + { label: "French", value: "fr" }, + { label: "German", value: "de" }, + { label: "Italian", value: "it" }, + { label: "Portuguese", value: "pt" }, + { label: "Russian", value: "ru" }, + { label: "Chinese", value: "zh" }, + { label: "Japanese", value: "ja" }, + { label: "Korean", value: "ko" }, + { label: "Arabic", value: "ar" }, + { label: "Hindi", value: "hi" }, + { label: "Bengali", value: "bn" }, + { label: "Telugu", value: "te" }, + { label: "Marathi", value: "mr" }, + { label: "Kannada", value: "kn" }, + { label: "Malayalam", value: "ml" }, +] + +const voices = [ + { label: "Samantha", value: "samantha" }, + { label: "Alex", value: "alex" }, + { label: "Fred", value: "fred" }, + { label: "Victoria", value: "victoria" }, + { label: "Tom", value: "tom" }, + { label: "Karen", value: "karen" }, + { label: "Sam", value: "sam" }, + { label: "Daniel", value: "daniel" }, +] + +const themes = [ + { label: "Light", value: "light" }, + { label: "Dark", value: "dark" }, + { label: "System", value: "system" }, +] + +const accents = [ + { label: "Default", value: "default" }, + { label: "Red", value: "red" }, + { label: "Blue", value: "blue" }, + { label: "Green", value: "green" }, + { label: "Purple", value: "purple" }, + { label: "Pink", value: "pink" }, +] + +export function DialogChatSettings() { + const [tab, setTab] = React.useState("general") + const [theme, setTheme] = React.useState("system") + const [accentColor, setAccentColor] = React.useState("default") + const [spokenLanguage, setSpokenLanguage] = React.useState("en") + const [voice, setVoice] = React.useState("samantha") + + return ( + <> + + }> + Chat Settings + + + + Chat Settings + + Customize your chat settings: theme, accent color, spoken + language, voice, personality, and custom instructions. + + +
+ setTab(e.target.value)} + className="w-full md:hidden" + > + General + + Notifications + + + Personalization + + Security + + + + General + Notifications + + Personalization + + Security + +
+ +
+ + + Theme + + + + + + Accent Color + + + + + + + + Spoken Language + + + For best results, select the language you mainly + speak. If it's not listed, it may still be + supported via auto-detection. + + + + + + + Voice + + + +
+ + + +
+ Responses + + Get notified when ChatGPT responds to requests that take + time, like research or image generation. + + + + + + Push notifications + + + +
+ +
+ Tasks + + Get notified when tasks you've created have + updates. Manage tasks + + + + + + Push notifications + + + + + + Email notifications + + + +
+ + + + + + Nickname + + + + + } + > + + + + Used to identify you in the chat. N + + + + + + + + + More about you + + Tell us more about yourself. This will be used to help + us personalize your experience. + + +