shapes-ui 0.4.2 → 0.6.0

package/examples/__index.tsx

@@ -14,9 +14,11 @@ type Example = {
 };
 
 export const examples: ExampleRegistry = {
-  "accordion": {
+  accordion: {
     title: "Accordion",
-    code: lazy(() => import("../src/components/ui/accordion").then(m => ({ default: m.Accordion }))),
+    code: lazy(() =>
+      import("../src/components/ui/accordion").then((m) => ({ default: m.Accordion })),
+    ),
     examples: [
       {
         name: "accordion-surface",
@@ -45,9 +47,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "alert": {
+  alert: {
     title: "Alert",
-    code: lazy(() => import("../src/components/ui/alert").then(m => ({ default: m.Alert }))),
+    code: lazy(() => import("../src/components/ui/alert").then((m) => ({ default: m.Alert }))),
     examples: [
       {
         name: "alert-warning",
@@ -98,7 +100,9 @@ export const examples: ExampleRegistry = {
   },
   "alert-dialog": {
     title: "Alert Dialog",
-    code: lazy(() => import("../src/components/ui/alert-dialog").then(m => ({ default: m.AlertDialog }))),
+    code: lazy(() =>
+      import("../src/components/ui/alert-dialog").then((m) => ({ default: m.AlertDialog })),
+    ),
     examples: [
       {
         name: "alert-dialog-icon",
@@ -117,10 +121,32 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "autocomplete": {
+  autocomplete: {
     title: "Autocomplete",
-    code: lazy(() => import("../src/components/ui/autocomplete").then(m => ({ default: m.Autocomplete }))),
+    code: lazy(() =>
+      import("../src/components/ui/autocomplete").then((m) => ({ default: m.Autocomplete })),
+    ),
     examples: [
+      {
+        name: "autocomplete-groups",
+        title: "Groups",
+        code: lazy(() => import("./autocomplete-groups")),
+      },
+      {
+        name: "autocomplete-no-clear",
+        title: "No Clear",
+        code: lazy(() => import("./autocomplete-no-clear")),
+      },
+      {
+        name: "autocomplete-align",
+        title: "Alignment",
+        code: lazy(() => import("./autocomplete-align")),
+      },
+      {
+        name: "autocomplete-controlled",
+        title: "Controlled",
+        code: lazy(() => import("./autocomplete-controlled")),
+      },
       {
         name: "autocomplete-demo",
         title: "Demo",
@@ -128,9 +154,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "avatar": {
+  avatar: {
     title: "Avatar",
-    code: lazy(() => import("../src/components/ui/avatar").then(m => ({ default: m.Avatar }))),
+    code: lazy(() => import("../src/components/ui/avatar").then((m) => ({ default: m.Avatar }))),
     examples: [
       {
         name: "avatar-demo",
@@ -139,9 +165,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "badge": {
+  badge: {
     title: "Badge",
-    code: lazy(() => import("../src/components/ui/badge").then(m => ({ default: m.Badge }))),
+    code: lazy(() => import("../src/components/ui/badge").then((m) => ({ default: m.Badge }))),
     examples: [
       {
         name: "badge-variants",
@@ -165,9 +191,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "button": {
+  button: {
     title: "Button",
-    code: lazy(() => import("../src/components/ui/button").then(m => ({ default: m.Button }))),
+    code: lazy(() => import("../src/components/ui/button").then((m) => ({ default: m.Button }))),
     examples: [
       {
         name: "button-warning",
@@ -228,7 +254,9 @@ export const examples: ExampleRegistry = {
   },
   "button-group": {
     title: "Button Group",
-    code: lazy(() => import("../src/components/ui/button-group").then(m => ({ default: m.ButtonGroup }))),
+    code: lazy(() =>
+      import("../src/components/ui/button-group").then((m) => ({ default: m.ButtonGroup })),
+    ),
     examples: [
       {
         name: "button-group-vertical",
@@ -252,9 +280,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "card": {
+  card: {
     title: "Card",
-    code: lazy(() => import("../src/components/ui/card").then(m => ({ default: m.Card }))),
+    code: lazy(() => import("../src/components/ui/card").then((m) => ({ default: m.Card }))),
     examples: [
       {
         name: "card-demo",
@@ -263,9 +291,11 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "checkbox": {
+  checkbox: {
     title: "Checkbox",
-    code: lazy(() => import("../src/components/ui/checkbox").then(m => ({ default: m.Checkbox }))),
+    code: lazy(() =>
+      import("../src/components/ui/checkbox").then((m) => ({ default: m.Checkbox })),
+    ),
     examples: [
       {
         name: "checkbox-with-text",
@@ -299,9 +329,11 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "collapsible": {
+  collapsible: {
     title: "Collapsible",
-    code: lazy(() => import("../src/components/ui/collapsible").then(m => ({ default: m.Collapsible }))),
+    code: lazy(() =>
+      import("../src/components/ui/collapsible").then((m) => ({ default: m.Collapsible })),
+    ),
     examples: [
       {
         name: "collapsible-demo",
@@ -310,9 +342,11 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "combobox": {
+  combobox: {
     title: "Combobox",
-    code: lazy(() => import("../src/components/ui/combobox").then(m => ({ default: m.Combobox }))),
+    code: lazy(() =>
+      import("../src/components/ui/combobox").then((m) => ({ default: m.Combobox })),
+    ),
     examples: [
       {
         name: "combobox-demo",
@@ -323,7 +357,9 @@ export const examples: ExampleRegistry = {
   },
   "context-menu": {
     title: "Context Menu",
-    code: lazy(() => import("../src/components/ui/context-menu").then(m => ({ default: m.ContextMenu }))),
+    code: lazy(() =>
+      import("../src/components/ui/context-menu").then((m) => ({ default: m.ContextMenu })),
+    ),
     examples: [
       {
         name: "context-menu-demo",
@@ -332,9 +368,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "dialog": {
+  dialog: {
     title: "Dialog",
-    code: lazy(() => import("../src/components/ui/dialog").then(m => ({ default: m.Dialog }))),
+    code: lazy(() => import("../src/components/ui/dialog").then((m) => ({ default: m.Dialog }))),
     examples: [
       {
         name: "dialog-demo",
@@ -343,9 +379,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "drawer": {
+  drawer: {
     title: "Drawer",
-    code: lazy(() => import("../src/components/ui/drawer").then(m => ({ default: m.Drawer }))),
+    code: lazy(() => import("../src/components/ui/drawer").then((m) => ({ default: m.Drawer }))),
     examples: [
       {
         name: "drawer-snap-points",
@@ -374,9 +410,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "field": {
+  field: {
     title: "Field",
-    code: lazy(() => import("../src/components/ui/field").then(m => ({ default: m.Field }))),
+    code: lazy(() => import("../src/components/ui/field").then((m) => ({ default: m.Field }))),
     examples: [
       {
         name: "field-validation",
@@ -405,9 +441,11 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "fieldset": {
+  fieldset: {
     title: "Fieldset",
-    code: lazy(() => import("../src/components/ui/fieldset").then(m => ({ default: m.Fieldset }))),
+    code: lazy(() =>
+      import("../src/components/ui/fieldset").then((m) => ({ default: m.Fieldset })),
+    ),
     examples: [
       {
         name: "fieldset-nested",
@@ -421,9 +459,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "form": {
+  form: {
     title: "Form",
-    code: lazy(() => import("../src/components/ui/form").then(m => ({ default: m.Form }))),
+    code: lazy(() => import("../src/components/ui/form").then((m) => ({ default: m.Form }))),
     examples: [
       {
         name: "form-demo",
@@ -432,9 +470,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "input": {
+  input: {
     title: "Input",
-    code: lazy(() => import("../src/components/ui/input").then(m => ({ default: m.Input }))),
+    code: lazy(() => import("../src/components/ui/input").then((m) => ({ default: m.Input }))),
     examples: [
       {
         name: "input-required",
@@ -475,7 +513,9 @@ export const examples: ExampleRegistry = {
   },
   "input-group": {
     title: "Input Group",
-    code: lazy(() => import("../src/components/ui/input-group").then(m => ({ default: m.InputGroup }))),
+    code: lazy(() =>
+      import("../src/components/ui/input-group").then((m) => ({ default: m.InputGroup })),
+    ),
     examples: [
       {
         name: "input-group-with-prefix",
@@ -524,9 +564,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "menu": {
+  menu: {
     title: "Menu",
-    code: lazy(() => import("../src/components/ui/menu").then(m => ({ default: m.Menu }))),
+    code: lazy(() => import("../src/components/ui/menu").then((m) => ({ default: m.Menu }))),
     examples: [
       {
         name: "menu-submenu",
@@ -565,9 +605,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "menubar": {
+  menubar: {
     title: "Menubar",
-    code: lazy(() => import("../src/components/ui/menubar").then(m => ({ default: m.Menubar }))),
+    code: lazy(() => import("../src/components/ui/menubar").then((m) => ({ default: m.Menubar }))),
     examples: [
       {
         name: "menubar-demo",
@@ -581,9 +621,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "meter": {
+  meter: {
     title: "Meter",
-    code: lazy(() => import("../src/components/ui/meter").then(m => ({ default: m.Meter }))),
+    code: lazy(() => import("../src/components/ui/meter").then((m) => ({ default: m.Meter }))),
     examples: [
       {
         name: "meter-no-value",
@@ -609,7 +649,9 @@ export const examples: ExampleRegistry = {
   },
   "navigation-menu": {
     title: "Navigation Menu",
-    code: lazy(() => import("../src/components/ui/navigation-menu").then(m => ({ default: m.NavigationMenu }))),
+    code: lazy(() =>
+      import("../src/components/ui/navigation-menu").then((m) => ({ default: m.NavigationMenu })),
+    ),
     examples: [
       {
         name: "navigation-menu-demo",
@@ -620,7 +662,9 @@ export const examples: ExampleRegistry = {
   },
   "number-field": {
     title: "Number Field",
-    code: lazy(() => import("../src/components/ui/number-field").then(m => ({ default: m.NumberField }))),
+    code: lazy(() =>
+      import("../src/components/ui/number-field").then((m) => ({ default: m.NumberField })),
+    ),
     examples: [
       {
         name: "number-field-scrub",
@@ -639,9 +683,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "popover": {
+  popover: {
     title: "Popover",
-    code: lazy(() => import("../src/components/ui/popover").then(m => ({ default: m.Popover }))),
+    code: lazy(() => import("../src/components/ui/popover").then((m) => ({ default: m.Popover }))),
     examples: [
       {
         name: "popover-positions",
@@ -662,7 +706,9 @@ export const examples: ExampleRegistry = {
   },
   "preview-card": {
     title: "Preview Card",
-    code: lazy(() => import("../src/components/ui/preview-card").then(m => ({ default: m.PreviewCard }))),
+    code: lazy(() =>
+      import("../src/components/ui/preview-card").then((m) => ({ default: m.PreviewCard })),
+    ),
     examples: [
       {
         name: "preview-card-links",
@@ -676,9 +722,11 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "progress": {
+  progress: {
     title: "Progress",
-    code: lazy(() => import("../src/components/ui/progress").then(m => ({ default: m.Progress }))),
+    code: lazy(() =>
+      import("../src/components/ui/progress").then((m) => ({ default: m.Progress })),
+    ),
     examples: [
       {
         name: "progress-demo",
@@ -687,20 +735,37 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "radio": {
+  radio: {
     title: "Radio",
-    code: lazy(() => import("../src/components/ui/radio").then(m => ({ default: m.Radio }))),
+    code: lazy(() => import("../src/components/ui/radio").then((m) => ({ default: m.Radio }))),
     examples: [
+      {
+        name: "radio-orientation",
+        title: "Orientation",
+        code: lazy(() => import("./radio-orientation")),
+      },
+      {
+        name: "radio-description",
+        title: "Description",
+        code: lazy(() => import("./radio-description")),
+      },
       {
         name: "radio-demo",
         title: "Demo",
         code: lazy(() => import("./radio-demo")),
       },
+      {
+        name: "radio-card",
+        title: "Card",
+        code: lazy(() => import("./radio-card")),
+      },
     ],
   },
   "scroll-area": {
     title: "Scroll Area",
-    code: lazy(() => import("../src/components/ui/scroll-area").then(m => ({ default: m.ScrollArea }))),
+    code: lazy(() =>
+      import("../src/components/ui/scroll-area").then((m) => ({ default: m.ScrollArea })),
+    ),
     examples: [
       {
         name: "scroll-area-demo",
@@ -709,32 +774,120 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "select": {
+  separator: {
+    title: "Separator",
+    code: lazy(() =>
+      import("../src/components/ui/separator").then((m) => ({ default: m.Separator })),
+    ),
+    examples: [
+      {
+        name: "separator-horizontal",
+        title: "Horizontal",
+        code: lazy(() => import("./separator-horizontal")),
+      },
+      {
+        name: "separator-demo",
+        title: "Vertical",
+        code: lazy(() => import("./separator-demo")),
+      },
+    ],
+  },
+  select: {
     title: "Select",
-    code: lazy(() => import("../src/components/ui/select").then(m => ({ default: m.Select }))),
+    code: lazy(() => import("../src/components/ui/select").then((m) => ({ default: m.Select }))),
     examples: [
+      {
+        name: "select-scrollable",
+        title: "Scrollable",
+        code: lazy(() => import("./select-scrollable")),
+      },
+      {
+        name: "select-invalid",
+        title: "Invalid",
+        code: lazy(() => import("./select-invalid")),
+      },
+      {
+        name: "select-groups",
+        title: "Groups",
+        code: lazy(() => import("./select-groups")),
+      },
+      {
+        name: "select-disabled",
+        title: "Disabled",
+        code: lazy(() => import("./select-disabled")),
+      },
       {
         name: "select-demo",
         title: "Demo",
         code: lazy(() => import("./select-demo")),
       },
+      {
+        name: "select-alignment",
+        title: "Alignment",
+        code: lazy(() => import("./select-alignment")),
+      },
     ],
   },
-  "slider": {
+  slider: {
     title: "Slider",
-    code: lazy(() => import("../src/components/ui/slider").then(m => ({ default: m.Slider }))),
+    code: lazy(() => import("../src/components/ui/slider").then((m) => ({ default: m.Slider }))),
     examples: [
+      {
+        name: "slider-vertical",
+        title: "Vertical",
+        code: lazy(() => import("./slider-vertical")),
+      },
+      {
+        name: "slider-range",
+        title: "Range",
+        code: lazy(() => import("./slider-range")),
+      },
+      {
+        name: "slider-multiple",
+        title: "Multiple",
+        code: lazy(() => import("./slider-multiple")),
+      },
+      {
+        name: "slider-edge",
+        title: "Edge",
+        code: lazy(() => import("./slider-edge")),
+      },
+      {
+        name: "slider-disabled",
+        title: "Disabled",
+        code: lazy(() => import("./slider-disabled")),
+      },
       {
         name: "slider-demo",
         title: "Demo",
         code: lazy(() => import("./slider-demo")),
       },
+      {
+        name: "slider-controlled",
+        title: "Controlled",
+        code: lazy(() => import("./slider-controlled")),
+      },
     ],
   },
-  "switch": {
+  switch: {
     title: "Switch",
-    code: lazy(() => import("../src/components/ui/switch").then(m => ({ default: m.Switch }))),
+    code: lazy(() => import("../src/components/ui/switch").then((m) => ({ default: m.Switch }))),
     examples: [
+      {
+        name: "switch-with-label",
+        title: "With Label",
+        code: lazy(() => import("./switch-with-label")),
+      },
+      {
+        name: "switch-sizes",
+        title: "Sizes",
+        code: lazy(() => import("./switch-sizes")),
+      },
+      {
+        name: "switch-disabled",
+        title: "Disabled",
+        code: lazy(() => import("./switch-disabled")),
+      },
       {
         name: "switch-demo",
         title: "Demo",
@@ -742,10 +895,25 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "tabs": {
+  tabs: {
     title: "Tabs",
-    code: lazy(() => import("../src/components/ui/tabs").then(m => ({ default: m.Tabs }))),
+    code: lazy(() => import("../src/components/ui/tabs").then((m) => ({ default: m.Tabs }))),
     examples: [
+      {
+        name: "tabs-vertical",
+        title: "Vertical",
+        code: lazy(() => import("./tabs-vertical")),
+      },
+      {
+        name: "tabs-line",
+        title: "Line",
+        code: lazy(() => import("./tabs-line")),
+      },
+      {
+        name: "tabs-disabled",
+        title: "Disabled",
+        code: lazy(() => import("./tabs-disabled")),
+      },
       {
         name: "tabs-demo",
         title: "Demo",
@@ -753,32 +921,102 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "toast": {
+  toast: {
     title: "Toast",
-    code: lazy(() => import("../src/components/ui/toast").then(m => ({ default: m.Toast }))),
+    code: lazy(() => import("../src/components/ui/toast").then((m) => ({ default: m.Toast }))),
     examples: [
+      {
+        name: "toast-variants",
+        title: "Variants",
+        code: lazy(() => import("./toast-variants")),
+      },
+      {
+        name: "toast-update",
+        title: "Update",
+        code: lazy(() => import("./toast-update")),
+      },
+      {
+        name: "toast-timeout",
+        title: "Timeout",
+        code: lazy(() => import("./toast-timeout")),
+      },
+      {
+        name: "toast-stacked",
+        title: "Stacked",
+        code: lazy(() => import("./toast-stacked")),
+      },
+      {
+        name: "toast-promise",
+        title: "Promise",
+        code: lazy(() => import("./toast-promise")),
+      },
+      {
+        name: "toast-positions",
+        title: "Positions",
+        code: lazy(() => import("./toast-positions")),
+      },
       {
         name: "toast-demo",
         title: "Demo",
         code: lazy(() => import("./toast-demo")),
       },
+      {
+        name: "toast-anchored",
+        title: "Anchored",
+        code: lazy(() => import("./toast-anchored")),
+      },
+      {
+        name: "toast-action",
+        title: "Action",
+        code: lazy(() => import("./toast-action")),
+      },
     ],
   },
-  "toggle": {
+  toggle: {
     title: "Toggle",
-    code: lazy(() => import("../src/components/ui/toggle").then(m => ({ default: m.Toggle }))),
+    code: lazy(() => import("../src/components/ui/toggle").then((m) => ({ default: m.Toggle }))),
     examples: [
+      {
+        name: "toggle-icon-fill",
+        title: "Icon Fill",
+        code: lazy(() => import("./toggle-icon-fill")),
+      },
+      {
+        name: "toggle-group-multiple",
+        title: "Group Multiple",
+        code: lazy(() => import("./toggle-group-multiple")),
+      },
+      {
+        name: "toggle-group-demo",
+        title: "Group Demo",
+        code: lazy(() => import("./toggle-group-demo")),
+      },
       {
         name: "toggle-demo",
         title: "Demo",
         code: lazy(() => import("./toggle-demo")),
       },
+      {
+        name: "toggle-controlled",
+        title: "Controlled",
+        code: lazy(() => import("./toggle-controlled")),
+      },
     ],
   },
-  "toolbar": {
+  toolbar: {
     title: "Toolbar",
-    code: lazy(() => import("../src/components/ui/toolbar").then(m => ({ default: m.Toolbar }))),
+    code: lazy(() => import("../src/components/ui/toolbar").then((m) => ({ default: m.Toolbar }))),
     examples: [
+      {
+        name: "toolbar-menu",
+        title: "Menu",
+        code: lazy(() => import("./toolbar-menu")),
+      },
+      {
+        name: "toolbar-input-link",
+        title: "Input Link",
+        code: lazy(() => import("./toolbar-input-link")),
+      },
       {
         name: "toolbar-demo",
         title: "Demo",
@@ -786,4 +1024,20 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
+  tooltip: {
+    title: "Tooltip",
+    code: lazy(() => import("../src/components/ui/tooltip").then((m) => ({ default: m.Tooltip }))),
+    examples: [
+      {
+        name: "tooltip-positions",
+        title: "Positions",
+        code: lazy(() => import("./tooltip-positions")),
+      },
+      {
+        name: "tooltip-demo",
+        title: "Demo",
+        code: lazy(() => import("./tooltip-demo")),
+      },
+    ],
+  },
 };