@orangecheck/design 0.25.0 → 0.26.0

package/dist/index.mjs

@@ -4,7 +4,7 @@ import * as React2 from 'react';
 import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext, Fragment as Fragment$1, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTheme } from 'next-themes';
-import { ChevronDown, Plus, Palette, Check, Sun, Moon, Monitor, CheckIcon, CircleIcon, X, XIcon, AlertTriangle, Pencil, ChevronLeft, ChevronRight, ChevronDownIcon, ChevronUpIcon, Maximize2, Copy, HelpCircle, Boxes, CornerDownLeft, Loader2, Menu } from 'lucide-react';
+import { ChevronDown, Plus, Palette, Check, Sun, Moon, Monitor, Waves, Pause, CheckIcon, CircleIcon, X, XIcon, AlertTriangle, Pencil, ChevronLeft, ChevronRight, ChevronDownIcon, ChevronUpIcon, Maximize2, Copy, HelpCircle, Boxes, CornerDownLeft, Loader2, Menu } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -73,13 +73,18 @@ function resolveTheme(id) {
   return isKnownTheme(id) ? id : DEFAULT_OC_THEME;
 }
 var OC_SKIN_COOKIE = "oc_skin";
+var OC_MOTION_COOKIE = "oc_motion";
 var BLOBS = [1, 2, 3, 4, 5];
 function OcAurora({ intensity, className }) {
   const style = intensity == null ? void 0 : { "--oc-aurora-intensity": String(intensity) };
-  return /* @__PURE__ */ jsx("div", { className: cn("oc-aurora", className), style, "aria-hidden": "true", children: BLOBS.map((n) => /* @__PURE__ */ jsx("div", { className: `oc-aurora__blob oc-aurora__blob-${n}` }, n)) });
+  return /* @__PURE__ */ jsxs("div", { className: cn("oc-aurora", className), style, "aria-hidden": "true", children: [
+    BLOBS.map((n) => /* @__PURE__ */ jsx("div", { className: `oc-aurora__blob oc-aurora__blob-${n}` }, n)),
+    /* @__PURE__ */ jsx("div", { className: "oc-aurora__grain" })
+  ] });
 }
 var ONE_YEAR = 60 * 60 * 24 * 365;
 var ATTR = "data-oc-theme";
+var MOTION_ATTR = "data-oc-motion";
 function readSkinCookie() {
   if (typeof document === "undefined") return null;
   const prefix = `${OC_SKIN_COOKIE}=`;
@@ -111,6 +116,38 @@ function applyAttr(skin) {
   if (typeof document === "undefined") return;
   document.documentElement.setAttribute(ATTR, skin);
 }
+function readMotionCookie() {
+  if (typeof document === "undefined") return null;
+  const prefix = `${OC_MOTION_COOKIE}=`;
+  for (const part of document.cookie.split(";")) {
+    const trimmed = part.trim();
+    if (trimmed.startsWith(prefix)) {
+      const v = decodeURIComponent(trimmed.slice(prefix.length));
+      return v === "off" ? "off" : v === "on" ? "on" : null;
+    }
+  }
+  return null;
+}
+function writeMotionCookie(value) {
+  if (typeof document === "undefined") return;
+  const isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
+  const parts = [
+    `${OC_MOTION_COOKIE}=${encodeURIComponent(value)}`,
+    "Path=/",
+    `Max-Age=${ONE_YEAR}`,
+    "SameSite=Lax"
+  ];
+  if (!isLocal) {
+    parts.push("Domain=.ochk.io");
+    parts.push("Secure");
+  }
+  document.cookie = parts.join("; ");
+}
+function applyMotionAttr(motion) {
+  if (typeof document === "undefined") return;
+  if (motion === "off") document.documentElement.setAttribute(MOTION_ATTR, "off");
+  else document.documentElement.removeAttribute(MOTION_ATTR);
+}
 function applySkinChrome(skin) {
   if (typeof window === "undefined") return;
   if (typeof window.__ocApplySkinChrome === "function") {
@@ -127,6 +164,7 @@ function OcThemeProvider({
   aurora = true
 }) {
   const [skin, setSkinState] = useState(() => resolveTheme(defaultSkin));
+  const [motion, setMotionState] = useState("on");
   const hydratedRef = useRef(false);
   useEffect(() => {
     if (hydratedRef.current) return;
@@ -135,6 +173,9 @@ function OcThemeProvider({
     applyAttr(fromCookie);
     applySkinChrome(fromCookie);
     setSkinState(fromCookie);
+    const motionCookie = readMotionCookie() ?? "on";
+    applyMotionAttr(motionCookie);
+    setMotionState(motionCookie);
   }, [defaultSkin]);
   useEffect(() => {
     function sync() {
@@ -144,6 +185,11 @@ function OcThemeProvider({
         applySkinChrome(fromCookie);
         setSkinState(fromCookie);
       }
+      const motionCookie = readMotionCookie() ?? "on";
+      if (motionCookie !== motion) {
+        applyMotionAttr(motionCookie);
+        setMotionState(motionCookie);
+      }
     }
     window.addEventListener("focus", sync);
     document.addEventListener("visibilitychange", sync);
@@ -151,7 +197,7 @@ function OcThemeProvider({
       window.removeEventListener("focus", sync);
       document.removeEventListener("visibilitychange", sync);
     };
-  }, [skin]);
+  }, [skin, motion]);
   const setSkin = useCallback((id) => {
     const next = resolveTheme(id);
     applyAttr(next);
@@ -159,9 +205,15 @@ function OcThemeProvider({
     writeSkinCookie(next);
     setSkinState(next);
   }, []);
+  const setMotion = useCallback((value2) => {
+    const next = value2 === "off" ? "off" : "on";
+    applyMotionAttr(next);
+    writeMotionCookie(next);
+    setMotionState(next);
+  }, []);
   const value = useMemo(
-    () => ({ skin, setSkin, themes: OC_THEMES }),
-    [skin, setSkin]
+    () => ({ skin, setSkin, themes: OC_THEMES, motion, setMotion }),
+    [skin, setSkin, motion, setMotion]
   );
   return /* @__PURE__ */ jsxs(OcSkinContext.Provider, { value, children: [
     aurora !== false && /* @__PURE__ */ jsx(OcAurora, { intensity: typeof aurora === "object" ? aurora.intensity : void 0 }),
@@ -175,9 +227,13 @@ function useOcSkin() {
   }
   return ctx;
 }
+function useOcMotion() {
+  const { motion, setMotion } = useOcSkin();
+  return { motion, setMotion };
+}
 function getOcThemeInitScript(defaultSkin = DEFAULT_OC_THEME) {
   const accents = Object.fromEntries(OC_THEMES.map((t) => [t.id, t.accent]));
-  return `(function(){var ACC=${JSON.stringify(accents)},DEF=${JSON.stringify(defaultSkin)},ORIG=${JSON.stringify(OC_DEFAULT_ACCENT)},fav=null;function acc(s){return ACC[s]||ACC[DEF]||ORIG;}window.__ocApplySkinChrome=function(s){try{var a=acc(s);var meta=document.querySelector('meta[name="theme-color"]');if(meta){meta.setAttribute('content',a);}var link=document.querySelector('link[rel~="icon"][type="image/svg+xml"]');if(!link){return;}var paint=function(svg){link.setAttribute('href','data:image/svg+xml,'+encodeURIComponent(svg.split(ORIG).join(a)));};if(fav!=null){paint(fav);return;}var h=link.getAttribute('href');if(!h||h.indexOf('data:')===0){return;}fetch(h).then(function(r){return r.text();}).then(function(svg){fav=svg;paint(svg);}).catch(function(){});}catch(e){}};try{var m=document.cookie.match(/(?:^|; )${OC_SKIN_COOKIE}=([^;]*)/);var s=m?decodeURIComponent(m[1]):DEF;if(!s){s=DEF;}document.documentElement.setAttribute('${ATTR}',s);window.__ocApplySkinChrome(s);}catch(e){document.documentElement.setAttribute('${ATTR}',DEF);}})();`;
+  return `(function(){var ACC=${JSON.stringify(accents)},DEF=${JSON.stringify(defaultSkin)},ORIG=${JSON.stringify(OC_DEFAULT_ACCENT)},fav=null;function acc(s){return ACC[s]||ACC[DEF]||ORIG;}window.__ocApplySkinChrome=function(s){try{var a=acc(s);var meta=document.querySelector('meta[name="theme-color"]');if(meta){meta.setAttribute('content',a);}var link=document.querySelector('link[rel~="icon"][type="image/svg+xml"]');if(!link){return;}var paint=function(svg){link.setAttribute('href','data:image/svg+xml,'+encodeURIComponent(svg.split(ORIG).join(a)));};if(fav!=null){paint(fav);return;}var h=link.getAttribute('href');if(!h||h.indexOf('data:')===0){return;}fetch(h).then(function(r){return r.text();}).then(function(svg){fav=svg;paint(svg);}).catch(function(){});}catch(e){}};try{var m=document.cookie.match(/(?:^|; )${OC_SKIN_COOKIE}=([^;]*)/);var s=m?decodeURIComponent(m[1]):DEF;if(!s){s=DEF;}document.documentElement.setAttribute('${ATTR}',s);window.__ocApplySkinChrome(s);}catch(e){document.documentElement.setAttribute('${ATTR}',DEF);}try{var mm=document.cookie.match(/(?:^|; )${OC_MOTION_COOKIE}=([^;]*)/);if(mm&&decodeURIComponent(mm[1])==='off'){document.documentElement.setAttribute('${MOTION_ATTR}','off');}}catch(e){}})();`;
 }
 var COOKIE = "oc_theme";
 var ALLOWED = /* @__PURE__ */ new Set(["light", "dark", "system"]);
@@ -312,10 +368,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 }) => {
@@ -362,6 +420,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
+      );
     }) })
   ] });
 }
@@ -4953,6 +5037,6 @@ function OcFamilyFooter({
   ] }) });
 }
 
-export { AccentList, AccentNote, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, AppShell, AppearanceControls, Badge, Bar, BitcoinAddress, BrandBand, Button, Callout, Card, CheckList, Checkbox, ComparisonTable, ConfirmHost, CopyButton, DEFAULT_OC_THEME, DataRow, DefinitionList, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, EcosystemSwitcher, EmailCapture, EmptyState, ErrorBoundary, FAMILY_PROPERTIES, Faq, FeatureCard, HelpHint, IconBadge, Input, Label, LayoutSubHeader, MarketingHeading, Modal, NumberedStep, OC_DEFAULT_ACCENT, OC_SKIN_COOKIE, OC_THEMES, OcAccountMenu, OcAccountMenuView, OcAppBar, OcAppearanceMenu, OcAurora, OcDashboardHub, OcDashboardShell, OcFamilyFooter, OcLogoDropdown, OcPrimaryNav, OcThemeBridge, OcThemePicker, OcThemeProvider, Pagination, Panel, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, QrCode, REFERENCE_BTC_USD, RadioGroup, RadioGroupItem, SITE_STATE_LABEL, SatsAmount, Section, SectionHeader, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Sparkline, StatBlock, StatCard, StatGrid, StatTile, StatusPill, StepList, Surface, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, TwoToneHeading, VerifiedChip, Working, WorkingPanel, accentFor, asOf, badgeVariants, buttonVariants, cn, confirm, explorerUrl, findFamilyProperty, formatSats, formatSatsCompact, getOcThemeInitScript, iconBadgeVariants, isKnownTheme, makeStatusPill, priceBoth, prompt, relativeTime, resolveTheme, satsToUsd, shortenAddress, surfaceVariants, usdToSats, useOcSkin, useSpotPrice };
+export { AccentList, AccentNote, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, AppShell, AppearanceControls, Badge, Bar, BitcoinAddress, BrandBand, Button, Callout, Card, CheckList, Checkbox, ComparisonTable, ConfirmHost, CopyButton, DEFAULT_OC_THEME, DataRow, DefinitionList, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, EcosystemSwitcher, EmailCapture, EmptyState, ErrorBoundary, FAMILY_PROPERTIES, Faq, FeatureCard, HelpHint, IconBadge, Input, Label, LayoutSubHeader, MarketingHeading, Modal, NumberedStep, OC_DEFAULT_ACCENT, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAccountMenu, OcAccountMenuView, OcAppBar, OcAppearanceMenu, OcAurora, OcDashboardHub, OcDashboardShell, OcFamilyFooter, OcLogoDropdown, OcPrimaryNav, OcThemeBridge, OcThemePicker, OcThemeProvider, Pagination, Panel, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, QrCode, REFERENCE_BTC_USD, RadioGroup, RadioGroupItem, SITE_STATE_LABEL, SatsAmount, Section, SectionHeader, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Sparkline, StatBlock, StatCard, StatGrid, StatTile, StatusPill, StepList, Surface, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, TwoToneHeading, VerifiedChip, Working, WorkingPanel, accentFor, asOf, badgeVariants, buttonVariants, cn, confirm, explorerUrl, findFamilyProperty, formatSats, formatSatsCompact, getOcThemeInitScript, iconBadgeVariants, isKnownTheme, makeStatusPill, priceBoth, prompt, relativeTime, resolveTheme, satsToUsd, shortenAddress, surfaceVariants, usdToSats, useOcMotion, useOcSkin, useSpotPrice };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map