shapes-ui 0.5.0 → 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,9 +735,9 @@ 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",
@@ -715,7 +763,9 @@ export const examples: ExampleRegistry = {
   },
   "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",
@@ -724,9 +774,27 @@ 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",
@@ -760,9 +828,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "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",
@@ -801,9 +869,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "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",
@@ -827,9 +895,9 @@ 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",
@@ -853,9 +921,9 @@ 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",
@@ -904,9 +972,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "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",
@@ -935,9 +1003,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "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",
@@ -956,9 +1024,9 @@ export const examples: ExampleRegistry = {
       },
     ],
   },
-  "tooltip": {
+  tooltip: {
     title: "Tooltip",
-    code: lazy(() => import("../src/components/ui/tooltip").then(m => ({ default: m.Tooltip }))),
+    code: lazy(() => import("../src/components/ui/tooltip").then((m) => ({ default: m.Tooltip }))),
     examples: [
       {
         name: "tooltip-positions",

package/examples/autocomplete-align.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+
+import {
+  Autocomplete,
+  AutocompleteEmpty,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompletePopup,
+} from "@/components/ui/autocomplete";
+
+const languages = ["TypeScript", "JavaScript", "Rust", "Go", "Python"];
+
+export default function AutocompleteAlign() {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState("");
+
+  const filtered = languages.filter((item) => item.toLowerCase().includes(value.toLowerCase()));
+
+  return (
+    <Autocomplete
+      open={open}
+      onOpenChange={setOpen}
+      value={value}
+      onValueChange={setValue}
+      placeholder="Search language..."
+    >
+      <AutocompletePopup align="start" sideOffset={4} className="max-w-64">
+        <AutocompleteList>
+          {filtered.map((item) => (
+            <AutocompleteItem key={item} value={item}>
+              {item}
+            </AutocompleteItem>
+          ))}
+          {filtered.length === 0 && <AutocompleteEmpty>No results found</AutocompleteEmpty>}
+        </AutocompleteList>
+      </AutocompletePopup>
+    </Autocomplete>
+  );
+}

package/examples/autocomplete-controlled.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+
+import {
+  Autocomplete,
+  AutocompleteEmpty,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompletePopup,
+} from "@/components/ui/autocomplete";
+
+const options = ["Apple", "Banana", "Blueberry", "Cherry", "Orange"];
+
+export default function AutocompleteControlled() {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState("");
+
+  const filtered = options.filter((item) => item.toLowerCase().includes(value.toLowerCase()));
+
+  return (
+    <div className="space-y-3">
+      <Autocomplete
+        open={open}
+        onOpenChange={setOpen}
+        value={value}
+        onValueChange={setValue}
+        placeholder="Select a fruit..."
+      >
+        <AutocompletePopup>
+          <AutocompleteList>
+            {filtered.map((item) => (
+              <AutocompleteItem key={item} value={item}>
+                {item}
+              </AutocompleteItem>
+            ))}
+            {filtered.length === 0 && <AutocompleteEmpty>No results found</AutocompleteEmpty>}
+          </AutocompleteList>
+        </AutocompletePopup>
+      </Autocomplete>
+      <p className="text-sm text-muted-foreground">
+        Selected value: <span className="font-medium text-foreground">{value || "—"}</span>
+      </p>
+    </div>
+  );
+}

package/examples/autocomplete-groups.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+
+import {
+  Autocomplete,
+  AutocompleteEmpty,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompletePopup,
+  AutocompleteSeparator,
+} from "@/components/ui/autocomplete";
+
+const frameworks = ["React", "Vue", "Svelte", "Solid"];
+const metaFrameworks = ["Next.js", "Nuxt", "Remix", "Astro"];
+
+export default function AutocompleteGroups() {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState("");
+
+  const query = value.toLowerCase();
+  const filteredFrameworks = frameworks.filter((item) => item.toLowerCase().includes(query));
+  const filteredMeta = metaFrameworks.filter((item) => item.toLowerCase().includes(query));
+  const hasResults = filteredFrameworks.length > 0 || filteredMeta.length > 0;
+
+  return (
+    <Autocomplete
+      open={open}
+      onOpenChange={setOpen}
+      value={value}
+      onValueChange={setValue}
+      placeholder="Search frameworks..."
+    >
+      <AutocompletePopup>
+        <AutocompleteList>
+          {!hasResults && <AutocompleteEmpty>No results found</AutocompleteEmpty>}
+
+          {filteredFrameworks.length > 0 && (
+            <AutocompleteGroup>
+              <AutocompleteGroupLabel>Frameworks</AutocompleteGroupLabel>
+              {filteredFrameworks.map((item) => (
+                <AutocompleteItem key={item} value={item}>
+                  {item}
+                </AutocompleteItem>
+              ))}
+            </AutocompleteGroup>
+          )}
+
+          {filteredFrameworks.length > 0 && filteredMeta.length > 0 && <AutocompleteSeparator />}
+
+          {filteredMeta.length > 0 && (
+            <AutocompleteGroup>
+              <AutocompleteGroupLabel>Meta Frameworks</AutocompleteGroupLabel>
+              {filteredMeta.map((item) => (
+                <AutocompleteItem key={item} value={item}>
+                  {item}
+                </AutocompleteItem>
+              ))}
+            </AutocompleteGroup>
+          )}
+        </AutocompleteList>
+      </AutocompletePopup>
+    </Autocomplete>
+  );
+}

package/examples/autocomplete-no-clear.tsx

@@ -0,0 +1,40 @@
+import { useState } from "react";
+
+import {
+  Autocomplete,
+  AutocompleteEmpty,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompletePopup,
+} from "@/components/ui/autocomplete";
+
+const tags = ["Design", "Frontend", "Backend", "DevOps", "Testing"];
+
+export default function AutocompleteNoClear() {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState("");
+
+  const filtered = tags.filter((item) => item.toLowerCase().includes(value.toLowerCase()));
+
+  return (
+    <Autocomplete
+      open={open}
+      onOpenChange={setOpen}
+      value={value}
+      onValueChange={setValue}
+      placeholder="Pick a tag..."
+      showClearButton={false}
+    >
+      <AutocompletePopup>
+        <AutocompleteList>
+          {filtered.map((item) => (
+            <AutocompleteItem key={item} value={item}>
+              {item}
+            </AutocompleteItem>
+          ))}
+          {filtered.length === 0 && <AutocompleteEmpty>No tags found</AutocompleteEmpty>}
+        </AutocompleteList>
+      </AutocompletePopup>
+    </Autocomplete>
+  );
+}