@orangecheck/design 0.25.0 → 0.26.0

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcAppearanceMenuProps, OcAurora, OcAuroraProps, OcTheme, OcThemeBridge, OcThemeId, OcThemePicker, OcThemePickerProps, OcThemeProvider, OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcSkin } from './tokens.mjs';
+export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcAppearanceMenuProps, OcAurora, OcAuroraProps, OcMotion, OcTheme, OcThemeBridge, OcThemeId, OcThemePicker, OcThemePickerProps, OcThemeProvider, OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcMotion, useOcSkin } from './tokens.mjs';
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithActionProps, AlertWithCountdown, AlertWithCountdownProps, Badge, Bar, BarProps, BitcoinAddress, BitcoinAddressProps, Button, Card, CardProps, Checkbox, ConfirmHost, ConfirmOptions, CopyButton, CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, IconBadge, IconBadgeProps, Input, Label, Modal, ModalProps, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, PromptOptions, QrCode, QrCodeProps, RadioGroup, RadioGroupItem, SatsAmount, SatsAmountProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SkeletonProps, Sparkline, SparklineProps, StatBlock, StatBlockProps, StatusPill, StatusPillProps, StatusPillSpec, StatusPillVariant, StatusTone, Surface, SurfaceProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, TooltipProps, Working, WorkingPanel, WorkingProps, badgeVariants, buttonVariants, confirm, iconBadgeVariants, makeStatusPill, prompt, surfaceVariants } from './primitives.mjs';
 export { AccentList, AccentListItem, AccentListProps, AccentNote, AccentNoteProps, BrandBand, Callout, CalloutProps, CalloutTone, CheckList, CheckListProps, ComparisonRow, ComparisonTable, ComparisonTableProps, DataRow, DataRowProps, DefinitionItem, DefinitionList, DefinitionListProps, EmailCapture, EmailCaptureProps, EmptyState, EmptyStateCta, EmptyStateProps, Faq, FaqItem, FaqProps, FeatureCard, FeatureCardProps, HelpHint, HelpHintProps, MarketingHeading, MarketingHeadingProps, NumberedStep, NumberedStepProps, Panel, PanelProps, Section, SectionHeader, SectionHeaderProps, SectionProps, StatCard, StatCardProps, StatGrid, StatGridProps, StatItem, StatTile, Step, StepList, StepListProps, TwoToneHeading, TwoToneHeadingProps, VerifiedChip, VerifiedChipProps } from './composites.mjs';
 export { AppShell, AppShellProps, EcosystemSlug, EcosystemSwitcher, EcosystemSwitcherProps, FAMILY_PROPERTIES, FamilyCategory, FamilyProperty, FooterColumn, FooterLink, LayoutSubHeader, LayoutSubHeaderProps, LayoutSubHeaderTag, OcAccountMenu, OcAccountMenuBuildInfo, OcAccountMenuItem, OcAccountMenuProps, OcAccountMenuSession, OcAccountMenuView, OcAccountMenuViewProps, OcAppBar, OcAppBarProps, OcDashboardHub, OcDashboardHubProps, OcDashboardShell, OcDashboardShellProps, OcDashboardTool, OcFamilyFooter, OcFamilyFooterBrand, OcFamilyFooterProps, OcLogoDropdown, OcLogoDropdownProps, OcPrimaryNav, OcPrimaryNavLink, OcPrimaryNavProps, SITE_STATE_LABEL, SiteState, findFamilyProperty } from './chrome.mjs';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcAppearanceMenuProps, OcAurora, OcAuroraProps, OcTheme, OcThemeBridge, OcThemeId, OcThemePicker, OcThemePickerProps, OcThemeProvider, OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcSkin } from './tokens.js';
+export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcAppearanceMenuProps, OcAurora, OcAuroraProps, OcMotion, OcTheme, OcThemeBridge, OcThemeId, OcThemePicker, OcThemePickerProps, OcThemeProvider, OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcMotion, useOcSkin } from './tokens.js';
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithActionProps, AlertWithCountdown, AlertWithCountdownProps, Badge, Bar, BarProps, BitcoinAddress, BitcoinAddressProps, Button, Card, CardProps, Checkbox, ConfirmHost, ConfirmOptions, CopyButton, CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, IconBadge, IconBadgeProps, Input, Label, Modal, ModalProps, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, PromptOptions, QrCode, QrCodeProps, RadioGroup, RadioGroupItem, SatsAmount, SatsAmountProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SkeletonProps, Sparkline, SparklineProps, StatBlock, StatBlockProps, StatusPill, StatusPillProps, StatusPillSpec, StatusPillVariant, StatusTone, Surface, SurfaceProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, TooltipProps, Working, WorkingPanel, WorkingProps, badgeVariants, buttonVariants, confirm, iconBadgeVariants, makeStatusPill, prompt, surfaceVariants } from './primitives.js';
 export { AccentList, AccentListItem, AccentListProps, AccentNote, AccentNoteProps, BrandBand, Callout, CalloutProps, CalloutTone, CheckList, CheckListProps, ComparisonRow, ComparisonTable, ComparisonTableProps, DataRow, DataRowProps, DefinitionItem, DefinitionList, DefinitionListProps, EmailCapture, EmailCaptureProps, EmptyState, EmptyStateCta, EmptyStateProps, Faq, FaqItem, FaqProps, FeatureCard, FeatureCardProps, HelpHint, HelpHintProps, MarketingHeading, MarketingHeadingProps, NumberedStep, NumberedStepProps, Panel, PanelProps, Section, SectionHeader, SectionHeaderProps, SectionProps, StatCard, StatCardProps, StatGrid, StatGridProps, StatItem, StatTile, Step, StepList, StepListProps, TwoToneHeading, TwoToneHeadingProps, VerifiedChip, VerifiedChipProps } from './composites.js';
 export { AppShell, AppShellProps, EcosystemSlug, EcosystemSwitcher, EcosystemSwitcherProps, FAMILY_PROPERTIES, FamilyCategory, FamilyProperty, FooterColumn, FooterLink, LayoutSubHeader, LayoutSubHeaderProps, LayoutSubHeaderTag, OcAccountMenu, OcAccountMenuBuildInfo, OcAccountMenuItem, OcAccountMenuProps, OcAccountMenuSession, OcAccountMenuView, OcAccountMenuViewProps, OcAppBar, OcAppBarProps, OcDashboardHub, OcDashboardHubProps, OcDashboardShell, OcDashboardShellProps, OcDashboardTool, OcFamilyFooter, OcFamilyFooterBrand, OcFamilyFooterProps, OcLogoDropdown, OcLogoDropdownProps, OcPrimaryNav, OcPrimaryNavLink, OcPrimaryNavProps, SITE_STATE_LABEL, SiteState, findFamilyProperty } from './chrome.js';

package/dist/index.js

@@ -108,13 +108,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__ */ jsxRuntime.jsx("div", { className: cn("oc-aurora", className), style, "aria-hidden": "true", children: BLOBS.map((n) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `oc-aurora__blob oc-aurora__blob-${n}` }, n)) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("oc-aurora", className), style, "aria-hidden": "true", children: [
+    BLOBS.map((n) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `oc-aurora__blob oc-aurora__blob-${n}` }, n)),
+    /* @__PURE__ */ jsxRuntime.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}=`;
@@ -146,6 +151,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") {
@@ -162,6 +199,7 @@ function OcThemeProvider({
   aurora = true
 }) {
   const [skin, setSkinState] = React2.useState(() => resolveTheme(defaultSkin));
+  const [motion, setMotionState] = React2.useState("on");
   const hydratedRef = React2.useRef(false);
   React2.useEffect(() => {
     if (hydratedRef.current) return;
@@ -170,6 +208,9 @@ function OcThemeProvider({
     applyAttr(fromCookie);
     applySkinChrome(fromCookie);
     setSkinState(fromCookie);
+    const motionCookie = readMotionCookie() ?? "on";
+    applyMotionAttr(motionCookie);
+    setMotionState(motionCookie);
   }, [defaultSkin]);
   React2.useEffect(() => {
     function sync() {
@@ -179,6 +220,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);
@@ -186,7 +232,7 @@ function OcThemeProvider({
       window.removeEventListener("focus", sync);
       document.removeEventListener("visibilitychange", sync);
     };
-  }, [skin]);
+  }, [skin, motion]);
   const setSkin = React2.useCallback((id) => {
     const next = resolveTheme(id);
     applyAttr(next);
@@ -194,9 +240,15 @@ function OcThemeProvider({
     writeSkinCookie(next);
     setSkinState(next);
   }, []);
+  const setMotion = React2.useCallback((value2) => {
+    const next = value2 === "off" ? "off" : "on";
+    applyMotionAttr(next);
+    writeMotionCookie(next);
+    setMotionState(next);
+  }, []);
   const value = React2.useMemo(
-    () => ({ skin, setSkin, themes: OC_THEMES }),
-    [skin, setSkin]
+    () => ({ skin, setSkin, themes: OC_THEMES, motion, setMotion }),
+    [skin, setSkin, motion, setMotion]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(OcSkinContext.Provider, { value, children: [
     aurora !== false && /* @__PURE__ */ jsxRuntime.jsx(OcAurora, { intensity: typeof aurora === "object" ? aurora.intensity : void 0 }),
@@ -210,9 +262,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"]);
@@ -347,10 +403,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 }) => {
@@ -397,6 +455,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
+      );
     }) })
   ] });
 }
@@ -5042,6 +5126,7 @@ exports.MarketingHeading = MarketingHeading;
 exports.Modal = Modal;
 exports.NumberedStep = NumberedStep;
 exports.OC_DEFAULT_ACCENT = OC_DEFAULT_ACCENT;
+exports.OC_MOTION_COOKIE = OC_MOTION_COOKIE;
 exports.OC_SKIN_COOKIE = OC_SKIN_COOKIE;
 exports.OC_THEMES = OC_THEMES;
 exports.OcAccountMenu = OcAccountMenu;
@@ -5138,6 +5223,7 @@ exports.satsToUsd = satsToUsd;
 exports.shortenAddress = shortenAddress;
 exports.surfaceVariants = surfaceVariants;
 exports.usdToSats = usdToSats;
+exports.useOcMotion = useOcMotion;
 exports.useOcSkin = useOcSkin;
 exports.useSpotPrice = useSpotPrice;
 //# sourceMappingURL=index.js.map