@orangecheck/design 0.25.0 → 0.26.0

package/dist/components.mjs

@@ -1,5 +1,5 @@
 import * as Popover from '@radix-ui/react-popover';
-import { ChevronDown, Plus, HelpCircle, X, Check, Boxes, CornerDownLeft, Loader2, Copy, Menu, Sun, Moon, Monitor } from 'lucide-react';
+import { ChevronDown, Plus, HelpCircle, X, Check, Boxes, CornerDownLeft, Loader2, Copy, Menu, Sun, Moon, Monitor, Waves, Pause } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
@@ -1675,6 +1675,10 @@ function useOcSkin() {
   }
   return ctx;
 }
+function useOcMotion() {
+  const { motion, setMotion } = useOcSkin();
+  return { motion, setMotion };
+}
 var MODES = [
   { id: "light", label: "light", Icon: Sun },
   { id: "dark", label: "dark", Icon: Moon },
@@ -1682,10 +1686,12 @@ var MODES = [
 ];
 function AppearanceControls({ className }) {
   const { skin, setSkin, themes } = useOcSkin();
+  const { motion, setMotion } = useOcMotion();
   const { theme, setTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
   const activeMode = mounted ? theme ?? "system" : null;
+  const activeMotion = mounted ? motion : null;
   return /* @__PURE__ */ jsxs("div", { className, children: [
     /* @__PURE__ */ jsx("div", { className: "label-mono text-muted-foreground px-3 pt-3 pb-2", children: "mode" }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1 px-2 pb-2", children: MODES.map(({ id, label, Icon: Icon2 }) => {
@@ -1732,6 +1738,32 @@ function AppearanceControls({ className }) {
           ]
         }
       ) }, t.id);
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "label-mono text-muted-foreground border-t px-3 pt-3 pb-2", children: "ambient motion" }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1 px-2 pb-3", children: [
+      { id: "on", label: "on", Icon: Waves },
+      { id: "off", label: "off", Icon: Pause }
+    ].map(({ id, label, Icon: Icon2 }) => {
+      const active = activeMotion === id;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": active,
+          "aria-label": id === "off" ? "pause ambient motion" : "ambient motion on",
+          onClick: () => setMotion(id),
+          className: cn(
+            "flex flex-col items-center gap-1 rounded-md border py-2 text-[11px] transition-colors",
+            active ? "border-primary text-foreground bg-accent" : "border-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Icon2, { className: "size-4", "aria-hidden": true }),
+            label
+          ]
+        },
+        id
+      );
     }) })
   ] });
 }