@orangecheck/design 0.5.1 → 0.5.2

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-export { DEFAULT_OC_THEME, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcAppearanceMenuProps, OcTheme, OcThemeBridge, OcThemeId, OcThemePicker, OcThemePickerProps, OcThemeProvider, OcThemeProviderProps, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcSkin } from './tokens.mjs';
+export { DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcAppearanceMenuProps, OcTheme, OcThemeBridge, OcThemeId, OcThemePicker, OcThemePickerProps, OcThemeProvider, OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcSkin } from './tokens.mjs';
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithActionProps, AlertWithCountdown, AlertWithCountdownProps, Badge, Bar, BarProps, BitcoinAddress, BitcoinAddressProps, Button, Card, CardProps, ConfirmHost, ConfirmOptions, CopyButton, CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, ModalProps, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, PromptOptions, QrCode, QrCodeProps, 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, StatusTone, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, WorkingProps, badgeVariants, buttonVariants, confirm, prompt } from './primitives.mjs';
 export * from '@orangecheck/ui';
 export { ExplorerNetwork, ExplorerTarget, REFERENCE_BTC_USD, explorerUrl, formatSats, formatSatsCompact, priceBoth, relativeTime, satsToUsd, shortenAddress, usdToSats } from './format.mjs';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { DEFAULT_OC_THEME, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcAppearanceMenuProps, OcTheme, OcThemeBridge, OcThemeId, OcThemePicker, OcThemePickerProps, OcThemeProvider, OcThemeProviderProps, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcSkin } from './tokens.js';
+export { DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcAppearanceMenuProps, OcTheme, OcThemeBridge, OcThemeId, OcThemePicker, OcThemePickerProps, OcThemeProvider, OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcSkin } from './tokens.js';
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithActionProps, AlertWithCountdown, AlertWithCountdownProps, Badge, Bar, BarProps, BitcoinAddress, BitcoinAddressProps, Button, Card, CardProps, ConfirmHost, ConfirmOptions, CopyButton, CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, ModalProps, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, PromptOptions, QrCode, QrCodeProps, 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, StatusTone, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, WorkingProps, badgeVariants, buttonVariants, confirm, prompt } from './primitives.js';
 export * from '@orangecheck/ui';
 export { ExplorerNetwork, ExplorerTarget, REFERENCE_BTC_USD, explorerUrl, formatSats, formatSatsCompact, priceBoth, relativeTime, satsToUsd, shortenAddress, usdToSats } from './format.js';

package/dist/index.js

@@ -100,6 +100,7 @@ __export(src_exports, {
   Input: () => Input,
   Label: () => Label,
   Modal: () => Modal,
+  OC_DEFAULT_ACCENT: () => OC_DEFAULT_ACCENT,
   OC_SKIN_COOKIE: () => OC_SKIN_COOKIE,
   OC_THEMES: () => OC_THEMES,
   OcAppearanceMenu: () => OcAppearanceMenu,
@@ -146,6 +147,7 @@ __export(src_exports, {
   Toaster: () => Toaster,
   Working: () => Working,
   WorkingPanel: () => WorkingPanel,
+  accentFor: () => accentFor,
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
   cn: () => cn,
@@ -173,24 +175,32 @@ var OC_THEMES = [
   {
     id: "orangecheck",
     label: "orangecheck",
-    description: "the chain \u2014 Bitcoin orange, sharp 0.25rem corners, Inter + JetBrains Mono"
+    description: "the chain \u2014 Bitcoin orange, sharp 0.25rem corners, Inter + JetBrains Mono",
+    accent: "#f97316"
   },
   {
     id: "phosphor",
     label: "phosphor",
-    description: "the node \u2014 CRT terminal green, hard 0.125rem, all-mono \xB7 sovereignty & verify"
+    description: "the node \u2014 CRT terminal green, hard 0.125rem, all-mono \xB7 sovereignty & verify",
+    accent: "#55d671"
   },
   {
     id: "lightning",
     label: "lightning",
-    description: "the network \u2014 electric violet (L2), hardest 0rem edges, sans \xB7 instant"
+    description: "the network \u2014 electric violet (L2), hardest 0rem edges, sans \xB7 instant",
+    accent: "#c27dff"
   },
   {
     id: "gold",
     label: "gold",
-    description: "sound money \u2014 digital gold, hard 0.125rem milled edge, mono ledger \xB7 21M"
+    description: "sound money \u2014 digital gold, hard 0.125rem milled edge, mono ledger \xB7 21M",
+    accent: "#e3b831"
   }
 ];
+var OC_DEFAULT_ACCENT = "#f97316";
+function accentFor(id) {
+  return OC_THEMES.find((t) => t.id === id)?.accent ?? OC_DEFAULT_ACCENT;
+}
 var DEFAULT_OC_THEME = "orangecheck";
 function isKnownTheme(id) {
   return !!id && OC_THEMES.some((t) => t.id === id);
@@ -232,6 +242,15 @@ function applyAttr(skin) {
   if (typeof document === "undefined") return;
   document.documentElement.setAttribute(ATTR, skin);
 }
+function applySkinChrome(skin) {
+  if (typeof window === "undefined") return;
+  if (typeof window.__ocApplySkinChrome === "function") {
+    window.__ocApplySkinChrome(skin);
+    return;
+  }
+  const meta = document.querySelector('meta[name="theme-color"]');
+  if (meta) meta.setAttribute("content", accentFor(skin));
+}
 var OcSkinContext = React2.createContext(null);
 function OcThemeProvider({ children, defaultSkin = DEFAULT_OC_THEME }) {
   const [skin, setSkinState] = React2.useState(() => resolveTheme(defaultSkin));
@@ -241,6 +260,7 @@ function OcThemeProvider({ children, defaultSkin = DEFAULT_OC_THEME }) {
     hydratedRef.current = true;
     const fromCookie = resolveTheme(readSkinCookie() ?? defaultSkin);
     applyAttr(fromCookie);
+    applySkinChrome(fromCookie);
     setSkinState(fromCookie);
   }, [defaultSkin]);
   React2.useEffect(() => {
@@ -248,6 +268,7 @@ function OcThemeProvider({ children, defaultSkin = DEFAULT_OC_THEME }) {
       const fromCookie = resolveTheme(readSkinCookie() ?? skin);
       if (fromCookie !== skin) {
         applyAttr(fromCookie);
+        applySkinChrome(fromCookie);
         setSkinState(fromCookie);
       }
     }
@@ -261,6 +282,7 @@ function OcThemeProvider({ children, defaultSkin = DEFAULT_OC_THEME }) {
   const setSkin = React2.useCallback((id) => {
     const next = resolveTheme(id);
     applyAttr(next);
+    applySkinChrome(next);
     writeSkinCookie(next);
     setSkinState(next);
   }, []);
@@ -278,7 +300,8 @@ function useOcSkin() {
   return ctx;
 }
 function getOcThemeInitScript(defaultSkin = DEFAULT_OC_THEME) {
-  return `(function(){try{var m=document.cookie.match(/(?:^|; )${OC_SKIN_COOKIE}=([^;]*)/);var s=m?decodeURIComponent(m[1]):'${defaultSkin}';if(!s){s='${defaultSkin}';}document.documentElement.setAttribute('${ATTR}',s);}catch(e){document.documentElement.setAttribute('${ATTR}','${defaultSkin}');}})();`;
+  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);}})();`;
 }
 var COOKIE = "oc_theme";
 var ALLOWED = /* @__PURE__ */ new Set(["light", "dark", "system"]);
@@ -2029,6 +2052,7 @@ exports.ErrorBoundary = ErrorBoundary;
 exports.Input = Input;
 exports.Label = Label;
 exports.Modal = Modal;
+exports.OC_DEFAULT_ACCENT = OC_DEFAULT_ACCENT;
 exports.OC_SKIN_COOKIE = OC_SKIN_COOKIE;
 exports.OC_THEMES = OC_THEMES;
 exports.OcAppearanceMenu = OcAppearanceMenu;
@@ -2075,6 +2099,7 @@ exports.ThemeToggleLink = ThemeToggleLink;
 exports.Toaster = Toaster;
 exports.Working = Working;
 exports.WorkingPanel = WorkingPanel;
+exports.accentFor = accentFor;
 exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
 exports.cn = cn;