shapes-ui 0.4.1 → 0.5.0

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

package/examples/toast-anchored.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Toast, useToast } from "@/components/ui/toast";
+
+export default function ToastAnchored() {
+  return (
+    <Toast>
+      <ToastAnchoredAction />
+    </Toast>
+  );
+}
+
+function ToastAnchoredAction() {
+  const toast = useToast();
+  const anchorRef = React.useRef<HTMLButtonElement | null>(null);
+
+  return (
+    <Button
+      ref={anchorRef}
+      variant="outline"
+      onClick={() => {
+        toast.add({
+          description: "Copied",
+          timeout: 1500,
+          positionerProps: {
+            anchor: anchorRef.current,
+            sideOffset: 8,
+          },
+        });
+      }}
+    >
+      Copy
+    </Button>
+  );
+}

package/examples/toast-demo.tsx

@@ -1,3 +1,29 @@
+import { Button } from "@/components/ui/button";
+import { Toast, useToast } from "@/components/ui/toast";
+
 export default function ToastDemo() {
-  return <div></div>;
+  return (
+    <Toast>
+      <ToastDemoAction />
+    </Toast>
+  );
+}
+
+function ToastDemoAction() {
+  const toast = useToast();
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast.add({
+          title: "Changes saved",
+          description: "Your profile has been updated successfully.",
+          type: "success",
+        })
+      }
+    >
+      Show toast
+    </Button>
+  );
 }

package/examples/toast-positions.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Toast, useToast, type ToastPosition } from "@/components/ui/toast";
+
+const positions: ToastPosition[] = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right",
+];
+
+export default function ToastPositions() {
+  const [position, setPosition] = React.useState<ToastPosition>("bottom-right");
+
+  return (
+    <Toast position={position}>
+      <ToastPositionActions position={position} onPositionChange={setPosition} />
+    </Toast>
+  );
+}
+
+function ToastPositionActions({
+  position,
+  onPositionChange,
+}: {
+  position: ToastPosition;
+  onPositionChange: React.Dispatch<React.SetStateAction<ToastPosition>>;
+}) {
+  const toast = useToast();
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {positions.map((value) => (
+        <Button
+          key={value}
+          variant={position === value ? "default" : "outline"}
+          onClick={() => {
+            onPositionChange(value);
+            toast.add({
+              title: "Position updated",
+              description: `Now showing at ${value}.`,
+              type: "success",
+            });
+          }}
+        >
+          {value}
+        </Button>
+      ))}
+    </div>
+  );
+}

package/examples/toast-promise.tsx

@@ -0,0 +1,51 @@
+import { Button } from "@/components/ui/button";
+import { Toast, useToast } from "@/components/ui/toast";
+
+export default function ToastPromise() {
+  return (
+    <Toast>
+      <ToastPromiseAction />
+    </Toast>
+  );
+}
+
+function ToastPromiseAction() {
+  const toast = useToast();
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        const request = new Promise<string>((resolve, reject) => {
+          setTimeout(() => {
+            if (Math.random() > 0.4) {
+              resolve("Report export complete");
+              return;
+            }
+            reject(new Error("Could not generate report"));
+          }, 1500);
+        });
+
+        void toast.promise(request, {
+          loading: {
+            title: "Exporting",
+            description: "Preparing your report...",
+            timeout: 0,
+          },
+          success: (message) => ({
+            title: "Done",
+            description: message,
+            type: "success",
+          }),
+          error: (error: Error) => ({
+            title: "Export failed",
+            description: error.message,
+            type: "error",
+          }),
+        });
+      }}
+    >
+      Run async action
+    </Button>
+  );
+}

package/examples/toast-stacked.tsx

@@ -0,0 +1,30 @@
+import { Button } from "@/components/ui/button";
+import { Toast, useToast } from "@/components/ui/toast";
+
+export default function ToastStacked() {
+  return (
+    <Toast>
+      <ToastStackedAction />
+    </Toast>
+  );
+}
+
+function ToastStackedAction() {
+  const toast = useToast();
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        for (let index = 0; index < 4; index += 1) {
+          toast.add({
+            title: `Toast ${index + 1}`,
+            description: "This demonstrates stacked toast behavior.",
+          });
+        }
+      }}
+    >
+      Show stacked toasts
+    </Button>
+  );
+}

package/examples/toast-timeout.tsx

@@ -0,0 +1,43 @@
+import { Button } from "@/components/ui/button";
+import { Toast, useToast } from "@/components/ui/toast";
+
+export default function ToastTimeout() {
+  return (
+    <Toast>
+      <ToastTimeoutActions />
+    </Toast>
+  );
+}
+
+function ToastTimeoutActions() {
+  const toast = useToast();
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button
+        variant="outline"
+        onClick={() =>
+          toast.add({
+            title: "Quick notice",
+            description: "This toast closes in 1 second.",
+            timeout: 1000,
+          })
+        }
+      >
+        1s timeout
+      </Button>
+      <Button
+        variant="outline"
+        onClick={() =>
+          toast.add({
+            title: "Long notice",
+            description: "This toast stays for 8 seconds.",
+            timeout: 8000,
+          })
+        }
+      >
+        8s timeout
+      </Button>
+    </div>
+  );
+}

package/examples/toast-update.tsx

@@ -0,0 +1,38 @@
+import { Button } from "@/components/ui/button";
+import { Toast, useToast } from "@/components/ui/toast";
+
+export default function ToastUpdate() {
+  return (
+    <Toast>
+      <ToastUpdateAction />
+    </Toast>
+  );
+}
+
+function ToastUpdateAction() {
+  const toast = useToast();
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        const toastId = toast.add({
+          title: "Uploading",
+          description: "Starting upload...",
+          timeout: 0,
+        });
+
+        setTimeout(() => {
+          toast.update(toastId, {
+            title: "Upload complete",
+            description: "Your files are ready.",
+            type: "success",
+            timeout: 3000,
+          });
+        }, 1200);
+      }}
+    >
+      Show updatable toast
+    </Button>
+  );
+}

package/examples/toast-variants.tsx

@@ -0,0 +1,54 @@
+import { Button } from "@/components/ui/button";
+import { Toast, useToast } from "@/components/ui/toast";
+
+export default function ToastVariants() {
+  return (
+    <Toast>
+      <ToastVariantsActions />
+    </Toast>
+  );
+}
+
+function ToastVariantsActions() {
+  const toast = useToast();
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Button
+        variant="outline"
+        onClick={() =>
+          toast.add({
+            title: "Heads up",
+            description: "New account activity was detected.",
+          })
+        }
+      >
+        Default
+      </Button>
+      <Button
+        variant="outline"
+        onClick={() =>
+          toast.add({
+            title: "Saved",
+            description: "Your preferences were updated.",
+            type: "success",
+          })
+        }
+      >
+        Success
+      </Button>
+      <Button
+        variant="outline"
+        onClick={() =>
+          toast.add({
+            title: "Action failed",
+            description: "Please try again in a few moments.",
+            type: "error",
+          })
+        }
+      >
+        Error
+      </Button>
+    </div>
+  );
+}

package/examples/toggle-controlled.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Bold } from "lucide-react";
+import { useState } from "react";
+
+import { Toggle } from "@/components/ui/toggle";
+
+export default function ToggleControlled() {
+  const [pressed, setPressed] = useState(false);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Toggle aria-label="Toggle bold formatting" pressed={pressed} onPressedChange={setPressed}>
+        <Bold />
+        Bold
+      </Toggle>
+      <p className="text-xs text-muted-foreground">Pressed: {pressed ? "true" : "false"}</p>
+    </div>
+  );
+}

package/examples/toggle-demo.tsx

@@ -1,55 +1,11 @@
-import { Bold, Italic, Underline } from "lucide-react";
+import { StarIcon } from "lucide-react";
 
-import { Toggle, ToggleGroup } from "@/components/ui/toggle";
+import { Toggle } from "@/components/ui/toggle";
 
-export const toggleDemo = () => {
+export default function ToggleDemo() {
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <p className="text-sm font-medium">Single Toggle</p>
-        <Toggle>
-          <Bold />
-          Bold
-        </Toggle>
-      </div>
-
-      <div className="flex flex-col gap-2">
-        <p className="text-sm font-medium">Toggle Group</p>
-        <ToggleGroup>
-          <Toggle>
-            <Bold />
-          </Toggle>
-          <Toggle>
-            <Italic />
-          </Toggle>
-          <Toggle>
-            <Underline />
-          </Toggle>
-        </ToggleGroup>
-      </div>
-
-      <div className="flex flex-col gap-2">
-        <p className="text-sm font-medium">Toggle Sizes</p>
-        <div className="flex gap-2">
-          <Toggle size="sm">
-            <Bold className="size-3" />
-          </Toggle>
-          <Toggle>
-            <Bold />
-          </Toggle>
-          <Toggle size="lg">
-            <Bold />
-          </Toggle>
-        </div>
-      </div>
-
-      <div className="flex flex-col gap-2">
-        <p className="text-sm font-medium">Toggle Variants</p>
-        <div className="flex gap-2">
-          <Toggle variant="default">Default</Toggle>
-          <Toggle variant="outline">Outline</Toggle>
-        </div>
-      </div>
-    </div>
+    <Toggle aria-label="Toggle favourite">
+      <StarIcon data-slot="fill" />
+    </Toggle>
   );
-};
+}

package/examples/toggle-group-demo.tsx

@@ -0,0 +1,19 @@
+import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
+
+import { Toggle, ToggleGroup } from "@/components/ui/toggle";
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup defaultValue={["left"]}>
+      <Toggle value="left" aria-label="Align left" size="sm">
+        <AlignLeft />
+      </Toggle>
+      <Toggle value="center" aria-label="Align center" size="sm">
+        <AlignCenter />
+      </Toggle>
+      <Toggle value="right" aria-label="Align right" size="sm">
+        <AlignRight />
+      </Toggle>
+    </ToggleGroup>
+  );
+}

package/examples/toggle-group-multiple.tsx

@@ -0,0 +1,19 @@
+import { Bold, Italic, Underline } from "lucide-react";
+
+import { Toggle, ToggleGroup } from "@/components/ui/toggle";
+
+export default function ToggleGroupMultiple() {
+  return (
+    <ToggleGroup multiple defaultValue={["bold"]}>
+      <Toggle value="bold" aria-label="Bold">
+        <Bold />
+      </Toggle>
+      <Toggle value="italic" aria-label="Italic">
+        <Italic />
+      </Toggle>
+      <Toggle value="underline" aria-label="Underline">
+        <Underline />
+      </Toggle>
+    </ToggleGroup>
+  );
+}

package/examples/toggle-icon-fill.tsx

@@ -0,0 +1,12 @@
+import { StarIcon } from "lucide-react";
+
+import { Toggle } from "@/components/ui/toggle";
+
+export default function ToggleIconFill() {
+  return (
+    <Toggle aria-label="Toggle favourite">
+      <StarIcon data-slot="fill" />
+      Favourite
+    </Toggle>
+  );
+}

package/examples/toolbar-demo.tsx

@@ -1,32 +1,56 @@
 import { Bold, Italic, Underline, List, Quote } from "lucide-react";
 
+import { Toggle } from "@/components/ui/toggle";
 import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "@/components/ui/toolbar";
 
-export const toolbarDemo = () => {
+export default function ToolbarDemo() {
   return (
-    <Toolbar>
+    <Toolbar className="w-full max-w-md justify-start rounded-lg">
       <ToolbarGroup>
-        <ToolbarButton aria-label="Bold">
-          <Bold className="size-4" />
-        </ToolbarButton>
-        <ToolbarButton aria-label="Italic">
-          <Italic className="size-4" />
-        </ToolbarButton>
-        <ToolbarButton aria-label="Underline">
-          <Underline className="size-4" />
-        </ToolbarButton>
-      </ToolbarGroup>
-
-      <ToolbarSeparator />
+        <ToolbarButton
+          render={
+            <Toggle aria-label="Bold" size={"sm"}>
+              <Bold />
+            </Toggle>
+          }
+        />
+        <ToolbarButton
+          aria-label="Italic"
+          render={
+            <Toggle aria-label="Italic" size={"sm"}>
+              <Italic />
+            </Toggle>
+          }
+        />
 
+        <ToolbarButton
+          render={
+            <Toggle aria-label="Underline" size={"sm"}>
+              <Underline />
+            </Toggle>
+          }
+        />
+      </ToolbarGroup>
+      <ToolbarSeparator orientation="vertical" />
       <ToolbarGroup>
-        <ToolbarButton aria-label="List">
-          <List className="size-4" />
-        </ToolbarButton>
-        <ToolbarButton aria-label="Quote">
-          <Quote className="size-4" />
-        </ToolbarButton>
+        <ToolbarButton
+          aria-label="List"
+          render={
+            <Toggle aria-label="List" size={"sm"}>
+              <List className="size-4" />
+            </Toggle>
+          }
+        />
+
+        <ToolbarButton
+          aria-label="Quote"
+          render={
+            <Toggle aria-label="Quote" size={"sm"}>
+              <Quote className="size-4" />
+            </Toggle>
+          }
+        />
       </ToolbarGroup>
     </Toolbar>
   );
-};
+}