@orangecheck/design 0.24.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
+      );
     }) })
   ] });
 }
@@ -3004,6 +3036,9 @@ function OcFamilyFooter({
   columns = [],
   family,
   legalBase = "https://ochk.io",
+  legalCopyright,
+  legalLinks,
+  builtWith,
   className
 }) {
   const familyCols = [];
@@ -3017,6 +3052,13 @@ function OcFamilyFooter({
   const grid = GRID[allColumns.length] ?? GRID[3];
   const year = (/* @__PURE__ */ new Date()).getFullYear();
   const legal = (path) => `${legalBase}${path}`;
+  const links = legalLinks ?? [
+    { href: legal("/privacy"), label: "privacy" },
+    { href: legal("/terms"), label: "terms" },
+    { href: legal("/security"), label: "security" },
+    { href: legal("/trademark"), label: "trademarks" },
+    { href: legal("/contact"), label: "contact" }
+  ];
   return /* @__PURE__ */ jsx("footer", { className: cn("border-t", className), children: /* @__PURE__ */ jsxs("div", { className: "container py-10 sm:py-12 md:py-16", children: [
     /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 sm:grid-cols-2 sm:gap-10", grid), children: [
       /* @__PURE__ */ jsxs("div", { children: [
@@ -3030,56 +3072,24 @@ function OcFamilyFooter({
       allColumns.map((column) => /* @__PURE__ */ jsx(FooterColumnView, { column }, column.label))
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "mt-10 flex flex-col items-start justify-between gap-3 border-t pt-6 font-mono text-[11px] tracking-widest uppercase sm:flex-row sm:items-center", children: [
-      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: legalCopyright ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
         "\xA9 ",
         year,
         " orangecheck \xB7 mit + cc-by-4.0"
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground/80 flex flex-wrap items-center gap-x-4 gap-y-1", children: [
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: legal("/privacy"),
-            className: "hover:text-foreground transition-colors",
-            children: "privacy"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: legal("/terms"),
-            className: "hover:text-foreground transition-colors",
-            children: "terms"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: legal("/security"),
-            className: "hover:text-foreground transition-colors",
-            children: "security"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: legal("/trademark"),
-            className: "hover:text-foreground transition-colors",
-            children: "trademarks"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: legal("/contact"),
-            className: "hover:text-foreground transition-colors",
-            children: "contact"
-          }
-        )
-      ] }),
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "text-muted-foreground/80 flex flex-wrap items-center gap-x-4 gap-y-1", children: links.map((link) => /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: link.href,
+          ...link.external ? { target: "_blank", rel: "noreferrer" } : {},
+          className: "hover:text-foreground transition-colors",
+          children: link.label
+        },
+        link.label
+      )) }),
       /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground inline-flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsx("span", { className: "text-primary text-[13px] leading-none", children: "\u20BF" }),
-        /* @__PURE__ */ jsx("span", { children: "built with bitcoin" })
+        /* @__PURE__ */ jsx("span", { children: builtWith ?? "built with bitcoin" })
       ] })
     ] })
   ] }) });