@orangecheck/design 0.5.1 → 0.5.3

package/dist/index.mjs

@@ -69,6 +69,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,
@@ -115,6 +116,7 @@ __export(src_exports, {
   Toaster: () => Toaster,
   Working: () => Working,
   WorkingPanel: () => WorkingPanel,
+  accentFor: () => accentFor,
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
   cn: () => cn,
@@ -142,24 +144,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);
@@ -201,6 +211,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 = createContext(null);
 function OcThemeProvider({ children, defaultSkin = DEFAULT_OC_THEME }) {
   const [skin, setSkinState] = useState(() => resolveTheme(defaultSkin));
@@ -210,6 +229,7 @@ function OcThemeProvider({ children, defaultSkin = DEFAULT_OC_THEME }) {
     hydratedRef.current = true;
     const fromCookie = resolveTheme(readSkinCookie() ?? defaultSkin);
     applyAttr(fromCookie);
+    applySkinChrome(fromCookie);
     setSkinState(fromCookie);
   }, [defaultSkin]);
   useEffect(() => {
@@ -217,6 +237,7 @@ function OcThemeProvider({ children, defaultSkin = DEFAULT_OC_THEME }) {
       const fromCookie = resolveTheme(readSkinCookie() ?? skin);
       if (fromCookie !== skin) {
         applyAttr(fromCookie);
+        applySkinChrome(fromCookie);
         setSkinState(fromCookie);
       }
     }
@@ -230,6 +251,7 @@ function OcThemeProvider({ children, defaultSkin = DEFAULT_OC_THEME }) {
   const setSkin = useCallback((id) => {
     const next = resolveTheme(id);
     applyAttr(next);
+    applySkinChrome(next);
     writeSkinCookie(next);
     setSkinState(next);
   }, []);
@@ -247,7 +269,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"]);
@@ -721,6 +744,9 @@ function Textarea({ className, ...props }) {
       className: cn(
         "placeholder:text-muted-foreground border-input bg-input/30 hover:bg-input/50 dark:bg-input/30 dark:hover:bg-input/50 w-full min-w-0 rounded-md border px-3 py-2 font-mono text-xs leading-relaxed shadow-xs transition-[color,box-shadow,background-color] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        // aria-invalid parity with Input — error styling when a consumer
+        // marks the field invalid.
+        "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35 aria-invalid:border-brand",
         className
       ),
       ...props
@@ -1967,6 +1993,6 @@ __reExport(components_exports, ui_star);
 // src/index.ts
 __reExport(src_exports, components_exports);
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, Badge, Bar, BitcoinAddress, Button, Card, ConfirmHost, CopyButton, DEFAULT_OC_THEME, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcThemeBridge, OcThemePicker, OcThemeProvider, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, QrCode, REFERENCE_BTC_USD, SatsAmount, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Sparkline, StatBlock, StatusPill, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, badgeVariants, buttonVariants, cn, confirm, explorerUrl, formatSats, formatSatsCompact, getOcThemeInitScript, isKnownTheme, priceBoth, prompt, relativeTime, resolveTheme, satsToUsd, shortenAddress, usdToSats, useOcSkin };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, Badge, Bar, BitcoinAddress, Button, Card, ConfirmHost, CopyButton, DEFAULT_OC_THEME, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, OC_DEFAULT_ACCENT, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcThemeBridge, OcThemePicker, OcThemeProvider, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, QrCode, REFERENCE_BTC_USD, SatsAmount, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Sparkline, StatBlock, StatusPill, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, accentFor, badgeVariants, buttonVariants, cn, confirm, explorerUrl, formatSats, formatSatsCompact, getOcThemeInitScript, isKnownTheme, priceBoth, prompt, relativeTime, resolveTheme, satsToUsd, shortenAddress, usdToSats, useOcSkin };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map