shapes-ui 0.4.2 → 0.6.0

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>
+  );
+}

package/examples/avatar-demo.tsx

@@ -4,15 +4,15 @@ export default function AvatarDemo() {
   return (
     <div className="flex items-center gap-4">
       <Avatar>
-        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarImage src="/shps_black.svg" alt="Shapes UI" className={"bg-muted"} />
         <AvatarFallback>CN</AvatarFallback>
       </Avatar>
       <Avatar size="sm">
-        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarImage src="/shps_black.svg" alt="Shapes UI" className={"bg-muted"} />
         <AvatarFallback>CN</AvatarFallback>
       </Avatar>
       <Avatar size="lg">
-        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarImage src="/shps_black.svg" alt="Shapes UI" className={"bg-muted"} />
         <AvatarFallback>CN</AvatarFallback>
       </Avatar>
       <Avatar>

package/examples/checkbox-demo.tsx

@@ -3,7 +3,7 @@ import { Field, FieldLabel } from "@/components/ui/field";
 
 export default function CheckboxDemo() {
   return (
-    <Field orientation={"horizontal"} className={"mx-auto"}>
+    <Field className="mx-auto flex-row items-center *:w-auto">
       <Checkbox />
       <FieldLabel>Accept terms and conditions</FieldLabel>
     </Field>

package/examples/checkbox-form.tsx

@@ -6,7 +6,7 @@ import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
 export default function CheckboxFormDemo() {
   return (
     <form className="max-w-md space-y-4">
-      <Field name="marketing" orientation="horizontal">
+      <Field name="marketing">
         <FieldLabel>
           <Checkbox />
           <span className="text-sm">Marketing emails</span>
@@ -14,7 +14,7 @@ export default function CheckboxFormDemo() {
         <FieldDescription>Receive emails about new products and features.</FieldDescription>
       </Field>
 
-      <Field name="newsletter" orientation="horizontal">
+      <Field name="newsletter">
         <FieldLabel>
           <Checkbox />
           <span className="text-sm">Newsletter</span>
@@ -22,7 +22,7 @@ export default function CheckboxFormDemo() {
         <FieldDescription>Get our weekly newsletter with tips and updates.</FieldDescription>
       </Field>
 
-      <Field name="security" orientation="horizontal">
+      <Field name="security">
         <FieldLabel>
           <Checkbox defaultChecked />
           <span className="text-sm">Security alerts</span>

package/examples/field-custom-control.tsx

@@ -1,17 +1,41 @@
 import { Field, FieldLabel, FieldDescription } from "@/components/ui/field";
+import {
+  Select,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectPopup,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 export default function FieldCustomControl() {
   return (
     <Field name="color" className="max-w-md">
-      <FieldLabel>Favorite Color</FieldLabel>
-      <select className="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none">
-        <option value="">Select a color</option>
-        <option value="red">Red</option>
-        <option value="blue">Blue</option>
-        <option value="green">Green</option>
-        <option value="yellow">Yellow</option>
-      </select>
-      <FieldDescription>Select your favorite color from the dropdown.</FieldDescription>
+      <FieldLabel>Favourite Color</FieldLabel>
+      <Select items={colors}>
+        <SelectTrigger className="w-full max-w-48">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectPopup>
+          <SelectGroup>
+            <SelectLabel>Colors</SelectLabel>
+            {colors.map((color) => (
+              <SelectItem key={color.value} value={color.value}>
+                {color.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectPopup>
+      </Select>
+      <FieldDescription>Select your favourite color from the dropdown.</FieldDescription>
     </Field>
   );
 }
+
+const colors = [
+  { value: "red", label: "Red" },
+  { value: "blue", label: "Blue" },
+  { value: "green", label: "Green" },
+  { value: "yellow", label: "Yellow" },
+];

package/examples/form-demo.tsx

@@ -1,23 +1,18 @@
 import { Button } from "@/components/ui/button";
 import { Field, FieldLabel, FieldControl, FieldDescription } from "@/components/ui/field";
 import { Form } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 
 export default function FormDemo() {
   return (
-    <Form onSubmit={(e) => e.preventDefault()} className="w-full max-w-sm space-y-6">
-      <Field orientation="vertical">
+    <Form onFormSubmit={(event) => event.preventDefault()} className="w-full max-w-sm space-y-6">
+      <Field>
         <FieldLabel>Email</FieldLabel>
-        <FieldControl>
-          <Input type="email" placeholder="Enter your email" required />
-        </FieldControl>
+        <FieldControl type="email" placeholder="Enter your email" required />
         <FieldDescription>We'll never share your email.</FieldDescription>
       </Field>
-      <Field orientation="vertical">
+      <Field>
         <FieldLabel>Password</FieldLabel>
-        <FieldControl>
-          <Input type="password" placeholder="Enter your password" required />
-        </FieldControl>
+        <FieldControl type="password" placeholder="Enter your password" required />
       </Field>
       <Button type="submit" className="w-full">
         Submit

package/examples/input-group-with-button.tsx

@@ -16,7 +16,7 @@ export default function InputGroupButtonExample() {
   return (
     <div className="grid w-full max-w-sm gap-6">
       <InputGroup>
-        <InputGroupInput placeholder="https://x.com/shadcn" readOnly />
+        <InputGroupInput placeholder="https://shapes-ui.com" readOnly />
         <InputGroupAddon align="inline-end">
           <InputGroupButton aria-label="Copy" title="Copy" size="icon-xs">
             <CopyIcon />

package/examples/menu-advanced.tsx

@@ -35,9 +35,7 @@ export default function MenuAdvancedDemo() {
 
   return (
     <Menu>
-      <MenuTrigger>
-        <Button variant="outline">Advanced menu</Button>
-      </MenuTrigger>
+      <MenuTrigger render={<Button variant="outline">Advanced menu</Button>} />
 
       <MenuPopup>
         <div className="flex items-center gap-2 p-3">

package/examples/menu-align.tsx

@@ -9,22 +9,25 @@ export default function MenuDemo() {
 
   return (
     <Menu>
-      <MenuTrigger>
-        <ButtonGroup>
-          <Button variant="outline" onClick={() => setSide("bottom")}>
-            Bottom
-          </Button>
-          <Button variant="outline" onClick={() => setSide("top")}>
-            Top
-          </Button>
-          <Button variant="outline" onClick={() => setSide("left")}>
-            Left
-          </Button>
-          <Button variant="outline" onClick={() => setSide("right")}>
-            Right
-          </Button>
-        </ButtonGroup>
-      </MenuTrigger>
+      <MenuTrigger
+        nativeButton={false}
+        render={
+          <ButtonGroup>
+            <Button variant="outline" onClick={() => setSide("bottom")}>
+              Bottom
+            </Button>
+            <Button variant="outline" onClick={() => setSide("top")}>
+              Top
+            </Button>
+            <Button variant="outline" onClick={() => setSide("left")}>
+              Left
+            </Button>
+            <Button variant="outline" onClick={() => setSide("right")}>
+              Right
+            </Button>
+          </ButtonGroup>
+        }
+      ></MenuTrigger>
       <MenuPopup side={side}>
         <MenuItem>{side.charAt(0).toUpperCase() + side.slice(1)}</MenuItem>
       </MenuPopup>

package/examples/menu-checkbox.tsx

@@ -9,9 +9,8 @@ export default function MenuCheckboxDemo() {
 
   return (
     <Menu>
-      <MenuTrigger>
-        <Button variant="outline">Checkbox items</Button>
-      </MenuTrigger>
+      <MenuTrigger render={<Button variant="outline">Checkbox items</Button>} />
+
       <MenuPopup>
         <MenuCheckboxItem
           checked={showHidden}

package/examples/menu-demo.tsx

@@ -16,9 +16,7 @@ import {
 export default function MenuDemo() {
   return (
     <Menu>
-      <MenuTrigger>
-        <Button variant="outline">Open Menu</Button>
-      </MenuTrigger>
+      <MenuTrigger render={<Button variant="outline">Open Menu</Button>} />
       <MenuPopup>
         <div className="flex items-center justify-between gap-2 p-3">
           <Avatar size="sm">

package/examples/menu-group.tsx

@@ -14,9 +14,7 @@ import {
 export default function MenuGroupDemo() {
   return (
     <Menu>
-      <MenuTrigger>
-        <Button variant="outline">Group menu</Button>
-      </MenuTrigger>
+      <MenuTrigger render={<Button variant="outline">Group menu</Button>} />
       <MenuPopup>
         <MenuGroup>
           <MenuLabel>Account</MenuLabel>

package/examples/menu-radio.tsx

@@ -8,9 +8,7 @@ export default function MenuRadioDemo() {
 
   return (
     <Menu>
-      <MenuTrigger>
-        <Button variant="outline">Radio items</Button>
-      </MenuTrigger>
+      <MenuTrigger render={<Button variant="outline">Radio items</Button>} />
       <MenuPopup>
         <MenuRadioGroup value={view} onValueChange={(v) => setView(v as any)}>
           <MenuRadioItem value="list">List view</MenuRadioItem>

package/examples/menu-submenu.tsx

@@ -14,9 +14,8 @@ import {
 export default function MenuSubmenuDemo() {
   return (
     <Menu>
-      <MenuTrigger>
-        <Button variant="outline">Submenu</Button>
-      </MenuTrigger>
+      <MenuTrigger render={<Button variant="outline">Submenu</Button>} />
+
       <MenuPopup>
         <MenuItem>New file</MenuItem>
         <MenuItem>Open…</MenuItem>

package/examples/meter-demo.tsx

@@ -1,5 +1,13 @@
-import { Meter } from "@/components/ui/meter";
+import { Meter, MeterLabel, MeterValue, MeterIndicator, MeterTrack } from "@/components/ui/meter";
 
 export default function MeterDemo() {
-  return <Meter className={"w-72"} value={54} label="Storage" showLabel showValue />;
+  return (
+    <Meter className={"w-72"} value={54}>
+      <MeterLabel>Progress</MeterLabel>
+      <MeterValue />
+      <MeterTrack>
+        <MeterIndicator />
+      </MeterTrack>
+    </Meter>
+  );
 }

package/examples/meter-flip.tsx

@@ -1,13 +1,13 @@
-import { Meter } from "@/components/ui/meter";
+import { Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue } from "@/components/ui/meter";
 
 export default function MeterIndicatorDemo() {
   return (
-    <Meter
-      className={"w-72 flex-col-reverse"}
-      value={32}
-      label="Request usage"
-      showLabel
-      showValue
-    />
+    <Meter className={"w-72"} value={32}>
+      <MeterTrack>
+        <MeterIndicator />
+      </MeterTrack>
+      <MeterLabel>Progress</MeterLabel>
+      <MeterValue />
+    </Meter>
   );
 }

package/examples/meter-no-label.tsx

@@ -1,5 +1,12 @@
-import { Meter } from "@/components/ui/meter";
+import { Meter, MeterIndicator, MeterTrack, MeterValue } from "@/components/ui/meter";
 
 export default function MeterNoLabelDemo() {
-  return <Meter className={"w-72"} value={32} label="Storage" showLabel={false} showValue />;
+  return (
+    <Meter className={"w-72"} value={54}>
+      <MeterValue className={"col-span-2 text-left"} />
+      <MeterTrack>
+        <MeterIndicator />
+      </MeterTrack>
+    </Meter>
+  );
 }

package/examples/meter-no-value.tsx

@@ -1,13 +1,12 @@
-import { Meter } from "@/components/ui/meter";
+import { Meter, MeterIndicator, MeterLabel, MeterTrack } from "@/components/ui/meter";
 
 export default function MeterNoValueDemo() {
   return (
-    <Meter
-      className={"w-72"}
-      value={69.3}
-      label="Daily allowance"
-      showLabel={true}
-      showValue={false}
-    />
+    <Meter className={"w-72"} value={54}>
+      <MeterLabel>File transfer</MeterLabel>
+      <MeterTrack>
+        <MeterIndicator />
+      </MeterTrack>
+    </Meter>
   );
 }

package/examples/radio-card.tsx

@@ -0,0 +1,28 @@
+import { Radio, RadioGroup } from "@/components/ui/radio";
+
+export default function RadioCardDemo() {
+  return (
+    <RadioGroup name="card-plan" defaultValue="team" className="gap-4= grid md:grid-cols-2">
+      <label
+        htmlFor="personal"
+        className="flex h-24  cursor-pointer items-start gap-3 rounded-lg border p-4 has-checked:border-primary has-checked:bg-primary/5"
+      >
+        <Radio value="personal" id="personal" className="mt-0.5" />
+        <div className="grid gap-1">
+          <span className="font-medium">Personal</span>
+          <span className="text-sm text-muted-foreground">For individual use</span>
+        </div>
+      </label>
+      <label
+        htmlFor="team"
+        className="flex h-24 cursor-pointer items-start gap-3 rounded-lg border p-4 has-checked:border-primary has-checked:bg-primary/5"
+      >
+        <Radio value="team" id="team" className="mt-0.5" />
+        <div className="grid gap-1">
+          <span className="font-medium">Team</span>
+          <span className="text-sm text-muted-foreground">For small teams</span>
+        </div>
+      </label>
+    </RadioGroup>
+  );
+}

package/examples/radio-demo.tsx

@@ -1,3 +1,21 @@
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Radio, RadioGroup } from "@/components/ui/radio";
+
 export default function RadioDemo() {
-  return <div></div>;
+  return (
+    <RadioGroup>
+      <Field className="flex-row items-center *:w-auto">
+        <Radio value={"default"} />
+        <FieldLabel>Default</FieldLabel>
+      </Field>
+      <Field className="flex-row items-center *:w-auto">
+        <Radio value={"spacious"} />
+        <FieldLabel>Spacious</FieldLabel>
+      </Field>
+      <Field className="flex-row items-center *:w-auto">
+        <Radio value={"compact"} />
+        <FieldLabel>Compact</FieldLabel>
+      </Field>
+    </RadioGroup>
+  );
 }

package/examples/radio-description.tsx

@@ -0,0 +1,26 @@
+import { Radio, RadioGroup } from "@/components/ui/radio";
+
+export default function RadioDescriptionDemo() {
+  return (
+    <RadioGroup orientation="vertical" className={"gap-4"}>
+      <div className="flex h-fit items-start gap-3">
+        <Radio value="comfortable" id="comfortable" className="mt-1" />
+        <div className="grid">
+          <label htmlFor="comfortable" className="text-sm">
+            Default
+          </label>
+          <p className="text-sm text-muted-foreground">Default spacing for most users.</p>
+        </div>
+      </div>
+      <div className="flex h-fit items-start gap-3">
+        <Radio value="compact" id="compact" className="mt-1" />
+        <div className="grid">
+          <label htmlFor="compact" className="text-sm">
+            Compact
+          </label>
+          <p className="text-sm text-muted-foreground">Reduced spacing for dense layouts.</p>
+        </div>
+      </div>
+    </RadioGroup>
+  );
+}

package/examples/radio-orientation.tsx

@@ -0,0 +1,21 @@
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Radio, RadioGroup } from "@/components/ui/radio";
+
+export default function RadioOrientationDemo() {
+  return (
+    <RadioGroup orientation="horizontal">
+      <Field className="flex-row items-center *:w-auto">
+        <Radio value={"left"} />
+        <FieldLabel>Left</FieldLabel>
+      </Field>
+      <Field className="flex-row items-center *:w-auto">
+        <Radio value={"middle"} />
+        <FieldLabel>Middle</FieldLabel>
+      </Field>
+      <Field className="flex-row items-center *:w-auto">
+        <Radio value={"right"} />
+        <FieldLabel>Right</FieldLabel>
+      </Field>
+    </RadioGroup>
+  );
+}