shapes-ui 0.4.2 → 0.5.0

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

package/examples/select-alignment.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+
+import { Checkbox } from "@/components/ui/checkbox";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Fieldset } from "@/components/ui/fieldset";
+import {
+  Select,
+  SelectGroup,
+  SelectItem,
+  SelectPopup,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+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: "Ember", value: "ember" },
+];
+
+export default function SelectAlignItem() {
+  const [alignItemWithTrigger, setAlignItemWithTrigger] = React.useState(true);
+
+  return (
+    <Fieldset className="w-full max-w-xs">
+      <Field name="alignment-trigger" className="flex-row items-center *:w-auto">
+        <Checkbox checked={alignItemWithTrigger} onCheckedChange={setAlignItemWithTrigger} />
+        <FieldLabel>Toggle to align the item with the trigger.</FieldLabel>
+      </Field>
+      <Field>
+        <Select items={items} defaultValue={"react"}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectPopup alignItemWithTrigger={alignItemWithTrigger}>
+            <SelectGroup>
+              {items.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectPopup>
+        </Select>
+      </Field>
+    </Fieldset>
+  );
+}

package/examples/select-demo.tsx

@@ -1,3 +1,38 @@
+import {
+  Select,
+  SelectPopup,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const items = [
+  { label: "Select a provider", value: null },
+  { label: "Google Cloud", value: "google-cloud" },
+  { label: "Amazon Web Services", value: "aws" },
+  { label: "Microsoft Azure", value: "azure" },
+  { label: "IBM Cloud", value: "ibm-cloud" },
+  { label: "Oracle Cloud", value: "oracle-cloud" },
+];
+
 export default function SelectDemo() {
-  return <div></div>;
+  return (
+    <Select items={items}>
+      <SelectTrigger className="w-full max-w-48">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectPopup>
+        <SelectGroup>
+          <SelectLabel>Cloud Providers</SelectLabel>
+          {items.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectPopup>
+    </Select>
+  );
 }

package/examples/select-disabled.tsx

@@ -0,0 +1,38 @@
+import {
+  Select,
+  SelectPopup,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const items = [
+  { label: "Select a provider", value: null },
+  { label: "Google Cloud", value: "google-cloud" },
+  { label: "Amazon Web Services", value: "aws" },
+  { label: "Microsoft Azure", value: "azure" },
+  { label: "IBM Cloud", value: "ibm-cloud" },
+  { label: "Oracle Cloud", value: "oracle-cloud" },
+];
+
+export default function SelectDisabled() {
+  return (
+    <Select items={items} disabled>
+      <SelectTrigger className="w-full max-w-48">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectPopup>
+        <SelectGroup>
+          <SelectLabel>Cloud Providers</SelectLabel>
+          {items.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectPopup>
+    </Select>
+  );
+}

package/examples/select-groups.tsx

@@ -0,0 +1,54 @@
+import {
+  Select,
+  SelectPopup,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export default function SelectGroups() {
+  const frameworks = [
+    { label: "React", value: "react" },
+    { label: "Vue", value: "vue" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" },
+    { label: "Ember", value: "ember" },
+  ];
+  const metaFrameworks = [
+    { label: "Tanstack Start", value: "tanstack-start" },
+    { label: "Remix", value: "remix" },
+    { label: "React Router", value: "react-router" },
+    { label: "Next.js", value: "nextjs" },
+  ];
+  const allItems = [{ label: "Select a framework", value: null }, ...frameworks, ...metaFrameworks];
+
+  return (
+    <Select items={allItems}>
+      <SelectTrigger className="w-full max-w-48">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectPopup>
+        <SelectGroup>
+          <SelectLabel>Frameworks</SelectLabel>
+          {frameworks.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Meta Frameworks</SelectLabel>
+          {metaFrameworks.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectPopup>
+    </Select>
+  );
+}

package/examples/select-invalid.tsx

@@ -0,0 +1,41 @@
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import {
+  Select,
+  SelectPopup,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const items = [
+  { label: "Select a provider", value: null },
+  { label: "Google Cloud", value: "google-cloud" },
+  { label: "Amazon Web Services", value: "aws" },
+  { label: "Microsoft Azure", value: "azure" },
+  { label: "IBM Cloud", value: "ibm-cloud" },
+  { label: "Oracle Cloud", value: "oracle-cloud" },
+];
+
+export default function SelectInvalid() {
+  return (
+    <Field invalid data-invalid className="w-full max-w-48">
+      <FieldLabel>Provider</FieldLabel>
+      <Select items={items}>
+        <SelectTrigger aria-invalid>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectPopup>
+          <SelectGroup>
+            {items.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectPopup>
+      </Select>
+      <FieldError> Please select a provider.</FieldError>
+    </Field>
+  );
+}

package/examples/select-scrollable.tsx

@@ -0,0 +1,112 @@
+import {
+  Select,
+  SelectPopup,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const northAmerica = [
+  { label: "Eastern Standard Time", value: "est" },
+  { label: "Central Standard Time", value: "cst" },
+  { label: "Mountain Standard Time", value: "mst" },
+  { label: "Pacific Standard Time", value: "pst" },
+  { label: "Alaska Standard Time", value: "akst" },
+  { label: "Hawaii Standard Time", value: "hst" },
+];
+
+const europeAfrica = [
+  { label: "Greenwich Mean Time", value: "gmt" },
+  { label: "Central European Time", value: "cet" },
+  { label: "Eastern European Time", value: "eet" },
+  { label: "Western European Summer Time", value: "west" },
+  { label: "Central Africa Time", value: "cat" },
+  { label: "East Africa Time", value: "eat" },
+];
+
+const asia = [
+  { label: "Moscow Time", value: "msk" },
+  { label: "India Standard Time", value: "ist" },
+  { label: "China Standard Time", value: "cst_china" },
+  { label: "Japan Standard Time", value: "jst" },
+  { label: "Korea Standard Time", value: "kst" },
+  { label: "Indonesia Central Standard Time", value: "ist_indonesia" },
+];
+
+const australiaPacific = [
+  { label: "Australian Western Standard Time", value: "awst" },
+  { label: "Australian Central Standard Time", value: "acst" },
+  { label: "Australian Eastern Standard Time", value: "aest" },
+  { label: "New Zealand Standard Time", value: "nzst" },
+  { label: "Fiji Time", value: "fjt" },
+];
+
+const southAmerica = [
+  { label: "Argentina Time", value: "art" },
+  { label: "Bolivia Time", value: "bot" },
+  { label: "Brasilia Time", value: "brt" },
+  { label: "Chile Standard Time", value: "clt" },
+];
+
+const items = [
+  { label: "Select a timezone", value: null },
+  ...northAmerica,
+  ...europeAfrica,
+  ...asia,
+  ...australiaPacific,
+  ...southAmerica,
+];
+
+export default function SelectScrollable() {
+  return (
+    <Select items={items}>
+      <SelectTrigger className="w-full max-w-64">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectPopup>
+        <SelectGroup>
+          <SelectLabel>North America</SelectLabel>
+          {northAmerica.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Europe & Africa</SelectLabel>
+          {europeAfrica.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Asia</SelectLabel>
+          {asia.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Australia & Pacific</SelectLabel>
+          {australiaPacific.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>South America</SelectLabel>
+          {southAmerica.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectPopup>
+    </Select>
+  );
+}

package/examples/slider-controlled.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+
+import { Slider } from "@/components/ui/slider";
+
+export default function SliderControlled() {
+  const [value, setValue] = React.useState([0.3, 0.7]);
+
+  return (
+    <div className="mx-auto grid w-full max-w-xs gap-3">
+      <div className="flex items-center justify-between gap-2">
+        <label htmlFor="slider-demo-temperature" className="text-sm font-medium">
+          Temperature
+        </label>
+        <span className="text-sm text-muted-foreground">{value.join(", ")}</span>
+      </div>
+      <Slider
+        id="slider-demo-temperature"
+        value={value}
+        onValueChange={(nextValue) => setValue(nextValue as number[])}
+        min={0}
+        max={1}
+        step={0.1}
+      />
+    </div>
+  );
+}

package/examples/slider-demo.tsx

@@ -1,3 +1,5 @@
+import { Slider } from "@/components/ui/slider";
+
 export default function SliderDemo() {
-  return <div></div>;
+  return <Slider defaultValue={[75]} max={100} step={1} className="mx-auto w-full max-w-xs" />;
 }

package/examples/slider-disabled.tsx

@@ -0,0 +1,7 @@
+import { Slider } from "@/components/ui/slider";
+
+export default function SliderDisabled() {
+  return (
+    <Slider defaultValue={[50]} max={100} step={1} disabled className="mx-auto w-full max-w-xs" />
+  );
+}

package/examples/slider-edge.tsx

@@ -0,0 +1,13 @@
+import { Slider } from "@/components/ui/slider";
+
+export default function SliderEdge() {
+  return (
+    <Slider
+      thumbAlignment="edge"
+      defaultValue={[25]}
+      max={100}
+      step={1}
+      className="mx-auto w-full max-w-xs"
+    />
+  );
+}

package/examples/slider-multiple.tsx

@@ -0,0 +1,7 @@
+import { Slider } from "@/components/ui/slider";
+
+export default function SliderMultiple() {
+  return (
+    <Slider defaultValue={[10, 20, 70]} max={100} step={10} className="mx-auto w-full max-w-xs" />
+  );
+}

package/examples/slider-range.tsx

@@ -0,0 +1,5 @@
+import { Slider } from "@/components/ui/slider";
+
+export default function SliderRange() {
+  return <Slider defaultValue={[25, 50]} max={100} step={5} className="mx-auto w-full max-w-xs" />;
+}

package/examples/slider-vertical.tsx

@@ -0,0 +1,10 @@
+import { Slider } from "@/components/ui/slider";
+
+export default function SliderVertical() {
+  return (
+    <div className="mx-auto flex w-full max-w-xs items-center justify-center gap-6">
+      <Slider defaultValue={[50]} max={100} step={1} orientation="vertical" className="h-40" />
+      <Slider defaultValue={[25]} max={100} step={1} orientation="vertical" className="h-40" />
+    </div>
+  );
+}

package/examples/switch-demo.tsx

@@ -1,3 +1,21 @@
+"use client";
+
+import { useState } from "react";
+
+import { Switch } from "@/components/ui/switch";
+
 export default function SwitchDemo() {
-  return <div></div>;
+  const [enabled, setEnabled] = useState(true);
+
+  return (
+    <div className="flex max-w-sm gap-3">
+      <Switch id="marketing" checked={enabled} onCheckedChange={setEnabled}>
+        Receive product updates
+      </Switch>
+      <p className="text-sm text-muted-foreground">
+        Marketing emails are currently{" "}
+        <span className="font-medium">{enabled ? "enabled" : "disabled"}</span>.
+      </p>
+    </div>
+  );
 }

package/examples/switch-disabled.tsx

@@ -0,0 +1,20 @@
+import { Switch } from "@/components/ui/switch";
+
+export default function SwitchDisabled() {
+  return (
+    <div className="flex gap-4">
+      <div className="flex items-center gap-2">
+        <Switch id="size-default" disabled />
+        <label htmlFor="size-default" className="text-sm">
+          Disabled switch
+        </label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Switch id="size-sm" checked disabled />
+        <label htmlFor="size-sm" className="text-sm">
+          Disabled checked switch
+        </label>
+      </div>
+    </div>
+  );
+}

package/examples/switch-sizes.tsx

@@ -0,0 +1,24 @@
+import { Switch } from "@/components/ui/switch";
+
+export default function SwitchSizes() {
+  return (
+    <div className="flex gap-3">
+      <div className="flex items-center gap-2">
+        <Switch id="size-default" size="default">
+          Default size
+        </Switch>
+        <label htmlFor="size-default" className="text-sm">
+          Default size
+        </label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Switch id="size-sm" size="sm">
+          Small size
+        </Switch>
+        <label htmlFor="size-sm" className="text-sm">
+          Small size
+        </label>
+      </div>
+    </div>
+  );
+}

package/examples/switch-with-label.tsx

@@ -0,0 +1,16 @@
+import { Field, FieldItem, FieldDescription, FieldLabel } from "@/components/ui/field";
+import { Switch } from "@/components/ui/switch";
+
+export default function SwitchDescription() {
+  return (
+    <Field className="max-w-sm flex-row items-start justify-between gap-4 *:w-auto">
+      <FieldItem className="flex-1">
+        <FieldLabel htmlFor="switch-focus-mode">Share across devices</FieldLabel>
+        <FieldDescription>
+          Focus is shared across devices, and turns off when you leave the app.
+        </FieldDescription>
+      </FieldItem>
+      <Switch id="switch-focus-mode" />
+    </Field>
+  );
+}

package/examples/tabs-demo.tsx

@@ -1,3 +1,16 @@
+import { Tabs, TabsPanel, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 export default function TabsDemo() {
-  return <div></div>;
+  return (
+    <Tabs defaultValue="account" className={"mx-auto w-full max-w-md"}>
+      <TabsList>
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="notifications">Notifications</TabsTrigger>
+      </TabsList>
+      <TabsPanel value="account">Manage your profile, password, and security settings.</TabsPanel>
+      <TabsPanel value="notifications">
+        Control email and in-app notification preferences.
+      </TabsPanel>
+    </Tabs>
+  );
 }

package/examples/tabs-disabled.tsx

@@ -0,0 +1,21 @@
+import { Tabs, TabsPanel, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export default function TabsDisabled() {
+  return (
+    <Tabs defaultValue="public" className={"mx-auto w-full max-w-md"}>
+      <TabsList>
+        <TabsTrigger value="public">Public</TabsTrigger>
+        <TabsTrigger value="team">Team</TabsTrigger>
+        <TabsTrigger value="enterprise" disabled>
+          Enterprise
+        </TabsTrigger>
+      </TabsList>
+      <TabsPanel value="public" className="rounded-lg border p-4 text-sm text-muted-foreground">
+        Public documentation is available on all plans.
+      </TabsPanel>
+      <TabsPanel value="team" className="rounded-lg border p-4 text-sm text-muted-foreground">
+        Team features are available on the Pro plan.
+      </TabsPanel>
+    </Tabs>
+  );
+}

package/examples/tabs-line.tsx

@@ -0,0 +1,18 @@
+import { Tabs, TabsPanel, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export default function TabsLine() {
+  return (
+    <Tabs defaultValue="overview" className={"mx-auto w-full max-w-md"}>
+      <TabsList variant="line">
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics">Analytics</TabsTrigger>
+      </TabsList>
+      <TabsPanel value="overview" className="pt-2 text-sm text-muted-foreground">
+        Review key account trends and recent activity.
+      </TabsPanel>
+      <TabsPanel value="analytics" className="pt-2 text-sm text-muted-foreground">
+        Compare traffic, retention, and conversion metrics.
+      </TabsPanel>
+    </Tabs>
+  );
+}

package/examples/tabs-vertical.tsx

@@ -0,0 +1,13 @@
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export default function TabsVertical() {
+  return (
+    <Tabs defaultValue="profile" orientation="vertical">
+      <TabsList className="min-w-36">
+        <TabsTrigger value="profile">Profile</TabsTrigger>
+        <TabsTrigger value="billing">Billing</TabsTrigger>
+        <TabsTrigger value="security">Security</TabsTrigger>
+      </TabsList>
+    </Tabs>
+  );
+}

package/examples/toast-action.tsx

@@ -0,0 +1,39 @@
+import { Button } from "@/components/ui/button";
+import { Toast, useToast } from "@/components/ui/toast";
+
+export default function ToastAction() {
+  return (
+    <Toast>
+      <ToastActionTrigger />
+    </Toast>
+  );
+}
+
+function ToastActionTrigger() {
+  const toast = useToast();
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        const toastId = toast.add({
+          title: "Project archived",
+          description: "The project was moved to archive.",
+          type: "success",
+          actionProps: {
+            children: "Undo",
+            onClick: () => {
+              toast.close(toastId);
+              toast.add({
+                title: "Archive reverted",
+                description: "The project is active again.",
+              });
+            },
+          },
+        });
+      }}
+    >
+      Archive project
+    </Button>
+  );
+}