@orangecheck/design 0.3.0 → 0.5.0

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-export { DEFAULT_OC_THEME, OC_SKIN_COOKIE, OC_THEMES, OcTheme, OcThemeBridge, OcThemeId, OcThemePicker, OcThemePickerProps, OcThemeProvider, OcThemeProviderProps, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcSkin } from './tokens.mjs';
+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 { 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, SheetContent, SheetDescription, 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, OcTheme, OcThemeBridge, OcThemeId, OcThemePicker, OcThemePickerProps, OcThemeProvider, OcThemeProviderProps, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcSkin } from './tokens.js';
+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 { 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, SheetContent, SheetDescription, 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

@@ -102,6 +102,7 @@ __export(src_exports, {
   Modal: () => Modal,
   OC_SKIN_COOKIE: () => OC_SKIN_COOKIE,
   OC_THEMES: () => OC_THEMES,
+  OcAppearanceMenu: () => OcAppearanceMenu,
   OcThemeBridge: () => OcThemeBridge,
   OcThemePicker: () => OcThemePicker,
   OcThemeProvider: () => OcThemeProvider,
@@ -403,6 +404,115 @@ function OcThemePicker({ className, triggerClassName, popoverClassName }) {
     )
   ] });
 }
+var MODES = [
+  { id: "light", label: "light", Icon: lucideReact.Sun },
+  { id: "dark", label: "dark", Icon: lucideReact.Moon },
+  { id: "system", label: "system", Icon: lucideReact.Monitor }
+];
+function OcAppearanceMenu({
+  className,
+  triggerClassName,
+  popoverClassName
+}) {
+  const { skin, setSkin, themes } = useOcSkin();
+  const { theme, setTheme } = nextThemes.useTheme();
+  const [open, setOpen] = React2.useState(false);
+  const [mounted, setMounted] = React2.useState(false);
+  const rootRef = React2.useRef(null);
+  React2.useEffect(() => setMounted(true), []);
+  React2.useEffect(() => {
+    if (!open) return;
+    function onDown(e) {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    }
+    function onKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const activeMode = mounted ? theme ?? "system" : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "appearance settings",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        title: "appearance \xB7 mode + theme",
+        onClick: () => setOpen((v) => !v),
+        className: cn(
+          "text-muted-foreground hover:text-foreground inline-flex size-9 items-center justify-center rounded-md transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          triggerClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { className: "size-4", "aria-hidden": true })
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "menu",
+        className: cn(
+          "bg-popover text-popover-foreground absolute right-0 z-50 mt-2 w-64 overflow-hidden rounded-md border shadow-md",
+          popoverClassName
+        ),
+        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 }) => {
+            const active = activeMode === id;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                role: "menuitemradio",
+                "aria-checked": active,
+                onClick: () => setTheme(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
+            );
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "label-mono text-muted-foreground border-t px-3 pt-3 pb-1", children: "theme" }),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "pb-1", children: themes.map((t) => {
+            const active = t.id === skin;
+            return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                role: "menuitemradio",
+                "aria-checked": active,
+                onClick: () => setSkin(t.id),
+                className: cn(
+                  "hover:bg-accent hover:text-accent-foreground flex w-full items-start gap-2 px-3 py-2 text-left transition-colors",
+                  active && "text-foreground"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 size-4 shrink-0", children: active && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "text-primary size-4", "aria-hidden": true }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-sm font-medium", children: t.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground block text-xs leading-snug", children: t.description })
+                  ] })
+                ]
+              }
+            ) }, t.id);
+          }) })
+        ]
+      }
+    )
+  ] });
+}
 var buttonVariants = classVarianceAuthority.cva(
   "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
@@ -456,6 +566,7 @@ var badgeVariants = classVarianceAuthority.cva(
         warning: "bg-warning text-warning-foreground [a&]:hover:bg-warning/90 border-transparent",
         success: "bg-success text-success-foreground [a&]:hover:bg-success/90 border-transparent",
         info: "bg-info text-info-foreground [a&]:hover:bg-info/90 border-transparent",
+        brand: "bg-brand-soft text-brand border-brand-soft",
         outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
       }
     },
@@ -1905,6 +2016,7 @@ exports.Label = Label;
 exports.Modal = Modal;
 exports.OC_SKIN_COOKIE = OC_SKIN_COOKIE;
 exports.OC_THEMES = OC_THEMES;
+exports.OcAppearanceMenu = OcAppearanceMenu;
 exports.OcThemeBridge = OcThemeBridge;
 exports.OcThemePicker = OcThemePicker;
 exports.OcThemeProvider = OcThemeProvider;