@orangecheck/design 0.25.0 → 0.26.0

package/dist/components.js

@@ -1701,6 +1701,10 @@ function useOcSkin() {
   }
   return ctx;
 }
+function useOcMotion() {
+  const { motion, setMotion } = useOcSkin();
+  return { motion, setMotion };
+}
 var MODES = [
   { id: "light", label: "light", Icon: lucideReact.Sun },
   { id: "dark", label: "dark", Icon: lucideReact.Moon },
@@ -1708,10 +1712,12 @@ var MODES = [
 ];
 function AppearanceControls({ className }) {
   const { skin, setSkin, themes } = useOcSkin();
+  const { motion, setMotion } = useOcMotion();
   const { theme, setTheme } = nextThemes.useTheme();
   const [mounted, setMounted] = React2.useState(false);
   React2.useEffect(() => setMounted(true), []);
   const activeMode = mounted ? theme ?? "system" : null;
+  const activeMotion = mounted ? motion : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "label-mono text-muted-foreground px-3 pt-3 pb-2", children: "mode" }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-1 px-2 pb-2", children: MODES.map(({ id, label, Icon: Icon2 }) => {
@@ -1758,6 +1764,32 @@ function AppearanceControls({ className }) {
           ]
         }
       ) }, t.id);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "label-mono text-muted-foreground border-t px-3 pt-3 pb-2", children: "ambient motion" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-1 px-2 pb-3", children: [
+      { id: "on", label: "on", Icon: lucideReact.Waves },
+      { id: "off", label: "off", Icon: lucideReact.Pause }
+    ].map(({ id, label, Icon: Icon2 }) => {
+      const active = activeMotion === id;
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon2, { className: "size-4", "aria-hidden": true }),
+            label
+          ]
+        },
+        id
+      );
     }) })
   ] });
 }