@orangecheck/design 0.1.0

package/dist/tokens.mjs

@@ -0,0 +1,254 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useTheme } from 'next-themes';
+import { Palette, Check } from 'lucide-react';
+
+// src/tokens/cn.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/tokens/themes.ts
+var OC_THEMES = [
+  {
+    id: "orangecheck",
+    label: "orangecheck",
+    description: "the default \u2014 Bitcoin-orange, sharp 0.25rem corners, Inter + JetBrains Mono"
+  },
+  {
+    id: "midnight",
+    label: "midnight",
+    description: "indigo on slate, softer rounded 0.625rem corners, Manrope sans \u2014 calmer, SaaS-ier"
+  },
+  {
+    id: "phosphor",
+    label: "phosphor",
+    description: "CRT terminal green, hard 0.125rem corners, fully monospace \u2014 far from orange"
+  },
+  {
+    id: "aurora",
+    label: "aurora",
+    description: "cool teal, generous 0.75rem corners, soft elevation \u2014 flips the flat ethos"
+  }
+];
+var DEFAULT_OC_THEME = "orangecheck";
+function isKnownTheme(id) {
+  return !!id && OC_THEMES.some((t) => t.id === id);
+}
+function resolveTheme(id) {
+  return isKnownTheme(id) ? id : DEFAULT_OC_THEME;
+}
+var OC_SKIN_COOKIE = "oc_skin";
+var ONE_YEAR = 60 * 60 * 24 * 365;
+var ATTR = "data-oc-theme";
+function readSkinCookie() {
+  if (typeof document === "undefined") return null;
+  const prefix = `${OC_SKIN_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.length > 0 ? v : null;
+    }
+  }
+  return null;
+}
+function writeSkinCookie(value) {
+  if (typeof document === "undefined") return;
+  const isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
+  const parts = [
+    `${OC_SKIN_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 applyAttr(skin) {
+  if (typeof document === "undefined") return;
+  document.documentElement.setAttribute(ATTR, skin);
+}
+var OcSkinContext = createContext(null);
+function OcThemeProvider({ children, defaultSkin = DEFAULT_OC_THEME }) {
+  const [skin, setSkinState] = useState(() => resolveTheme(defaultSkin));
+  const hydratedRef = useRef(false);
+  useEffect(() => {
+    if (hydratedRef.current) return;
+    hydratedRef.current = true;
+    const fromCookie = resolveTheme(readSkinCookie() ?? defaultSkin);
+    applyAttr(fromCookie);
+    setSkinState(fromCookie);
+  }, [defaultSkin]);
+  useEffect(() => {
+    function sync() {
+      const fromCookie = resolveTheme(readSkinCookie() ?? skin);
+      if (fromCookie !== skin) {
+        applyAttr(fromCookie);
+        setSkinState(fromCookie);
+      }
+    }
+    window.addEventListener("focus", sync);
+    document.addEventListener("visibilitychange", sync);
+    return () => {
+      window.removeEventListener("focus", sync);
+      document.removeEventListener("visibilitychange", sync);
+    };
+  }, [skin]);
+  const setSkin = useCallback((id) => {
+    const next = resolveTheme(id);
+    applyAttr(next);
+    writeSkinCookie(next);
+    setSkinState(next);
+  }, []);
+  const value = useMemo(
+    () => ({ skin, setSkin, themes: OC_THEMES }),
+    [skin, setSkin]
+  );
+  return /* @__PURE__ */ jsx(OcSkinContext.Provider, { value, children });
+}
+function useOcSkin() {
+  const ctx = useContext(OcSkinContext);
+  if (!ctx) {
+    throw new Error("useOcSkin must be used within <OcThemeProvider>");
+  }
+  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}');}})();`;
+}
+var COOKIE = "oc_theme";
+var ALLOWED = /* @__PURE__ */ new Set(["light", "dark", "system"]);
+var ONE_YEAR2 = 60 * 60 * 24 * 365;
+function readCookie(name) {
+  if (typeof document === "undefined") return null;
+  const prefix = `${name}=`;
+  for (const part of document.cookie.split(";")) {
+    const trimmed = part.trim();
+    if (trimmed.startsWith(prefix)) {
+      const v = decodeURIComponent(trimmed.slice(prefix.length));
+      return v.length > 0 ? v : null;
+    }
+  }
+  return null;
+}
+function writeCookie(value) {
+  if (typeof document === "undefined") return;
+  if (!ALLOWED.has(value)) return;
+  const isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
+  const parts = [
+    `${COOKIE}=${encodeURIComponent(value)}`,
+    "Path=/",
+    `Max-Age=${ONE_YEAR2}`,
+    "SameSite=Lax"
+  ];
+  if (!isLocal) {
+    parts.push("Domain=.ochk.io");
+    parts.push("Secure");
+  }
+  document.cookie = parts.join("; ");
+}
+function OcThemeBridge() {
+  const { theme, setTheme } = useTheme();
+  const hydratedRef = useRef(false);
+  useEffect(() => {
+    if (hydratedRef.current) return;
+    hydratedRef.current = true;
+    const cookieValue = readCookie(COOKIE);
+    if (cookieValue && ALLOWED.has(cookieValue) && cookieValue !== theme) {
+      setTheme(cookieValue);
+    }
+  }, [theme, setTheme]);
+  useEffect(() => {
+    if (!hydratedRef.current) return;
+    if (!theme) return;
+    writeCookie(theme);
+  }, [theme]);
+  return null;
+}
+function OcThemePicker({ className, triggerClassName, popoverClassName }) {
+  const { skin, setSkin, themes } = useOcSkin();
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef(null);
+  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]);
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "choose theme",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        title: "choose 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__ */ jsx(Palette, { className: "size-4", "aria-hidden": true })
+      }
+    ),
+    open && /* @__PURE__ */ 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__ */ jsx("div", { className: "label-mono text-muted-foreground px-3 pt-3 pb-1", children: "theme" }),
+          /* @__PURE__ */ jsx("ul", { className: "pb-1", children: themes.map((t) => {
+            const active = t.id === skin;
+            return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "menuitemradio",
+                "aria-checked": active,
+                onClick: () => {
+                  setSkin(t.id);
+                  setOpen(false);
+                },
+                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__ */ jsx("span", { className: "mt-0.5 size-4 shrink-0", children: active && /* @__PURE__ */ jsx(Check, { className: "size-4 text-primary", "aria-hidden": true }) }),
+                  /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium", children: t.label }),
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground block text-xs leading-snug", children: t.description })
+                  ] })
+                ]
+              }
+            ) }, t.id);
+          }) })
+        ]
+      }
+    )
+  ] });
+}
+
+export { DEFAULT_OC_THEME, OC_SKIN_COOKIE, OC_THEMES, OcThemeBridge, OcThemePicker, OcThemeProvider, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcSkin };
+//# sourceMappingURL=tokens.mjs.map
+//# sourceMappingURL=tokens.mjs.map

package/dist/tokens.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/cn.ts","../src/tokens/themes.ts","../src/tokens/provider.tsx","../src/tokens/theme-bridge.tsx","../src/tokens/theme-picker.tsx"],"names":["ONE_YEAR","useRef","useEffect","useState","jsx"],"mappings":"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","file":"tokens.mjs","sourcesContent":["import type { ClassValue } from 'clsx';\n\nimport { clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Canonical class-name merge for the OrangeCheck family.\n * `clsx` for conditional composition, `tailwind-merge` to resolve\n * conflicting Tailwind utilities (last-wins by property).\n */\nexport function cn(...inputs: ClassValue[]): string {\n    return twMerge(clsx(inputs));\n}\n","/**\n * The OrangeCheck theme (skin) registry.\n *\n * A *skin* is the named-theme axis, orthogonal to the light/dark *mode* axis\n * (which stays owned by `next-themes` via the `.dark` class). A skin is applied\n * as `data-oc-theme=\"<id>\"` on `<html>` and persisted in the `oc_skin` cookie at\n * `Domain=.ochk.io` so a choice on one family site carries to every other.\n *\n * Adding a skin = add a `themes/<id>.css` token block in this package and a\n * row here. Every site picks it up on the next `@orangecheck/design` bump; no\n * per-site edits.\n */\nexport interface OcTheme {\n    /** Stable id — also the `data-oc-theme` attribute value and the CSS file stem. */\n    readonly id: string;\n    /** Human label for the picker (lowercase, house voice). */\n    readonly label: string;\n    /** One-line description shown in the picker / Storybook. */\n    readonly description: string;\n}\n\nexport const OC_THEMES: readonly OcTheme[] = [\n    {\n        id: 'orangecheck',\n        label: 'orangecheck',\n        description: 'the default — Bitcoin-orange, sharp 0.25rem corners, Inter + JetBrains Mono',\n    },\n    {\n        id: 'midnight',\n        label: 'midnight',\n        description: 'indigo on slate, softer rounded 0.625rem corners, Manrope sans — calmer, SaaS-ier',\n    },\n    {\n        id: 'phosphor',\n        label: 'phosphor',\n        description: 'CRT terminal green, hard 0.125rem corners, fully monospace — far from orange',\n    },\n    {\n        id: 'aurora',\n        label: 'aurora',\n        description: 'cool teal, generous 0.75rem corners, soft elevation — flips the flat ethos',\n    },\n] as const;\n\nexport const DEFAULT_OC_THEME = 'orangecheck';\n\nexport type OcThemeId = (typeof OC_THEMES)[number]['id'] | (string & {});\n\nexport function isKnownTheme(id: string | null | undefined): id is OcThemeId {\n    return !!id && OC_THEMES.some((t) => t.id === id);\n}\n\nexport function resolveTheme(id: string | null | undefined): string {\n    return isKnownTheme(id) ? id : DEFAULT_OC_THEME;\n}\n\n/** Cookie name for the cross-subdomain skin choice. */\nexport const OC_SKIN_COOKIE = 'oc_skin';\n","'use client';\n\nimport {\n    createContext,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type ReactNode,\n} from 'react';\n\nimport {\n    DEFAULT_OC_THEME,\n    OC_SKIN_COOKIE,\n    OC_THEMES,\n    resolveTheme,\n    type OcTheme,\n} from './themes';\n\n/**\n * OcThemeProvider — the skin (named-theme) axis.\n *\n * Orthogonal to `next-themes`, which owns light/dark via the `.dark` class.\n * This provider owns the `data-oc-theme` attribute on `<html>` and persists the\n * choice in the `oc_skin` cookie at `Domain=.ochk.io`, so a skin chosen on one\n * `*.ochk.io` site is honored on every other. It re-reads the cookie on focus /\n * visibility change so a fresh choice picks up when the user returns to a tab\n * (same cross-site pickup trick `OcAccountMenu` uses for sign-in).\n *\n * Mount once, inside (or beside) the `next-themes` `<ThemeProvider>`:\n *\n *     <ThemeProvider attribute=\"class\" defaultTheme=\"system\" enableSystem>\n *         <OcThemeProvider>\n *             …app…\n *         </OcThemeProvider>\n *     </ThemeProvider>\n *\n * Pair with `getOcThemeInitScript()` in `_document` to avoid a flash before\n * hydration.\n */\n\nconst ONE_YEAR = 60 * 60 * 24 * 365;\nconst ATTR = 'data-oc-theme';\n\nfunction readSkinCookie(): string | null {\n    if (typeof document === 'undefined') return null;\n    const prefix = `${OC_SKIN_COOKIE}=`;\n    for (const part of document.cookie.split(';')) {\n        const trimmed = part.trim();\n        if (trimmed.startsWith(prefix)) {\n            const v = decodeURIComponent(trimmed.slice(prefix.length));\n            return v.length > 0 ? v : null;\n        }\n    }\n    return null;\n}\n\nfunction writeSkinCookie(value: string): void {\n    if (typeof document === 'undefined') return;\n    const isLocal =\n        location.hostname === 'localhost' || location.hostname === '127.0.0.1';\n    const parts = [\n        `${OC_SKIN_COOKIE}=${encodeURIComponent(value)}`,\n        'Path=/',\n        `Max-Age=${ONE_YEAR}`,\n        'SameSite=Lax',\n    ];\n    if (!isLocal) {\n        parts.push('Domain=.ochk.io');\n        parts.push('Secure');\n    }\n    document.cookie = parts.join('; ');\n}\n\nfunction applyAttr(skin: string): void {\n    if (typeof document === 'undefined') return;\n    document.documentElement.setAttribute(ATTR, skin);\n}\n\ninterface OcSkinContextValue {\n    /** Current skin id (always resolved to a known theme). */\n    skin: string;\n    /** Set the skin: validates, applies the attribute, persists the cookie. */\n    setSkin: (id: string) => void;\n    /** The full registry, for rendering a picker. */\n    themes: readonly OcTheme[];\n}\n\nconst OcSkinContext = createContext<OcSkinContextValue | null>(null);\n\nexport interface OcThemeProviderProps {\n    children: ReactNode;\n    /** Skin to assume before the cookie is read (defaults to `orangecheck`). */\n    defaultSkin?: string;\n}\n\nexport function OcThemeProvider({ children, defaultSkin = DEFAULT_OC_THEME }: OcThemeProviderProps) {\n    const [skin, setSkinState] = useState<string>(() => resolveTheme(defaultSkin));\n    const hydratedRef = useRef(false);\n\n    // Hydrate from the cookie once on mount and align the attribute.\n    useEffect(() => {\n        if (hydratedRef.current) return;\n        hydratedRef.current = true;\n        const fromCookie = resolveTheme(readSkinCookie() ?? defaultSkin);\n        applyAttr(fromCookie);\n        setSkinState(fromCookie);\n    }, [defaultSkin]);\n\n    // Cross-site pickup: re-read the cookie when the tab regains focus.\n    useEffect(() => {\n        function sync() {\n            const fromCookie = resolveTheme(readSkinCookie() ?? skin);\n            if (fromCookie !== skin) {\n                applyAttr(fromCookie);\n                setSkinState(fromCookie);\n            }\n        }\n        window.addEventListener('focus', sync);\n        document.addEventListener('visibilitychange', sync);\n        return () => {\n            window.removeEventListener('focus', sync);\n            document.removeEventListener('visibilitychange', sync);\n        };\n    }, [skin]);\n\n    const setSkin = useCallback((id: string) => {\n        const next = resolveTheme(id);\n        applyAttr(next);\n        writeSkinCookie(next);\n        setSkinState(next);\n    }, []);\n\n    const value = useMemo<OcSkinContextValue>(\n        () => ({ skin, setSkin, themes: OC_THEMES }),\n        [skin, setSkin]\n    );\n\n    return <OcSkinContext.Provider value={value}>{children}</OcSkinContext.Provider>;\n}\n\n/** Read the current skin + setter. Throws if used outside `OcThemeProvider`. */\nexport function useOcSkin(): OcSkinContextValue {\n    const ctx = useContext(OcSkinContext);\n    if (!ctx) {\n        throw new Error('useOcSkin must be used within <OcThemeProvider>');\n    }\n    return ctx;\n}\n\n/**\n * Blocking init script for `_document` (Pages Router) `<Head>`. Applies the\n * cookie's skin to `<html>` before first paint so there is no flash of the\n * default skin. Inject with:\n *\n *     <script dangerouslySetInnerHTML={{ __html: getOcThemeInitScript() }} />\n */\nexport function getOcThemeInitScript(defaultSkin: string = DEFAULT_OC_THEME): string {\n    // Self-contained IIFE — no imports available at parse time.\n    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}');}})();`;\n}\n","'use client';\n\nimport { useEffect, useRef } from 'react';\nimport { useTheme } from 'next-themes';\n\n/**\n * OcThemeBridge — cross-subdomain persistence for the MODE axis (light/dark).\n *\n * `next-themes` defaults to origin-scoped `localStorage`, so a dark/light choice\n * on one `*.ochk.io` site won't carry to another. This layers an\n * `oc_theme` cookie at `Domain=.ochk.io` on top so the choice is visible\n * family-wide. (The SKIN axis has its own `oc_skin` bridge inside\n * `OcThemeProvider`; this is the mode counterpart, previously duplicated in\n * every consumer repo.)\n *\n * Mount once inside the next-themes `<ThemeProvider>`:\n *\n *     <ThemeProvider attribute=\"class\" defaultTheme=\"system\" enableSystem>\n *         <OcThemeBridge />\n *         <OcThemeProvider>…</OcThemeProvider>\n *     </ThemeProvider>\n *\n * The cookie is intentionally non-HttpOnly (next-themes JS reads/writes it) and\n * carries no auth value — a leak only reveals a theme preference.\n */\nconst COOKIE = 'oc_theme';\nconst ALLOWED = new Set(['light', 'dark', 'system']);\nconst ONE_YEAR = 60 * 60 * 24 * 365;\n\nfunction readCookie(name: string): string | null {\n    if (typeof document === 'undefined') return null;\n    const prefix = `${name}=`;\n    for (const part of document.cookie.split(';')) {\n        const trimmed = part.trim();\n        if (trimmed.startsWith(prefix)) {\n            const v = decodeURIComponent(trimmed.slice(prefix.length));\n            return v.length > 0 ? v : null;\n        }\n    }\n    return null;\n}\n\nfunction writeCookie(value: string): void {\n    if (typeof document === 'undefined') return;\n    if (!ALLOWED.has(value)) return;\n    const isLocal = location.hostname === 'localhost' || location.hostname === '127.0.0.1';\n    const parts = [\n        `${COOKIE}=${encodeURIComponent(value)}`,\n        'Path=/',\n        `Max-Age=${ONE_YEAR}`,\n        'SameSite=Lax',\n    ];\n    if (!isLocal) {\n        parts.push('Domain=.ochk.io');\n        parts.push('Secure');\n    }\n    document.cookie = parts.join('; ');\n}\n\nexport function OcThemeBridge() {\n    const { theme, setTheme } = useTheme();\n    const hydratedRef = useRef(false);\n\n    useEffect(() => {\n        if (hydratedRef.current) return;\n        hydratedRef.current = true;\n        const cookieValue = readCookie(COOKIE);\n        if (cookieValue && ALLOWED.has(cookieValue) && cookieValue !== theme) {\n            setTheme(cookieValue);\n        }\n    }, [theme, setTheme]);\n\n    useEffect(() => {\n        if (!hydratedRef.current) return;\n        if (!theme) return;\n        writeCookie(theme);\n    }, [theme]);\n\n    return null;\n}\n","'use client';\n\nimport { Check, Palette } from 'lucide-react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { cn } from './cn';\nimport { useOcSkin } from './provider';\n\n/**\n * OcThemePicker — the skin selector. Sits beside `ThemeToggle` in the header.\n * Self-contained dropdown (no Radix): outside-click + Escape to close. Mirrors\n * the ghost-icon affordance of `ThemeToggle`. Gate its mount behind\n * `NEXT_PUBLIC_OC_THEME_PICKER` during staged rollout.\n */\nexport interface OcThemePickerProps {\n    className?: string;\n    triggerClassName?: string;\n    popoverClassName?: string;\n}\n\nexport function OcThemePicker({ className, triggerClassName, popoverClassName }: OcThemePickerProps) {\n    const { skin, setSkin, themes } = useOcSkin();\n    const [open, setOpen] = useState(false);\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        if (!open) return;\n        function onDown(e: MouseEvent) {\n            if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);\n        }\n        function onKey(e: KeyboardEvent) {\n            if (e.key === 'Escape') setOpen(false);\n        }\n        document.addEventListener('mousedown', onDown);\n        document.addEventListener('keydown', onKey);\n        return () => {\n            document.removeEventListener('mousedown', onDown);\n            document.removeEventListener('keydown', onKey);\n        };\n    }, [open]);\n\n    return (\n        <div ref={rootRef} className={cn('relative', className)}>\n            <button\n                type=\"button\"\n                aria-label=\"choose theme\"\n                aria-haspopup=\"menu\"\n                aria-expanded={open}\n                title=\"choose theme\"\n                onClick={() => setOpen((v) => !v)}\n                className={cn(\n                    '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',\n                    triggerClassName\n                )}\n            >\n                <Palette className=\"size-4\" aria-hidden />\n            </button>\n\n            {open && (\n                <div\n                    role=\"menu\"\n                    className={cn(\n                        'bg-popover text-popover-foreground absolute right-0 z-50 mt-2 w-64 overflow-hidden rounded-md border shadow-md',\n                        popoverClassName\n                    )}\n                >\n                    <div className=\"label-mono text-muted-foreground px-3 pt-3 pb-1\">theme</div>\n                    <ul className=\"pb-1\">\n                        {themes.map((t) => {\n                            const active = t.id === skin;\n                            return (\n                                <li key={t.id}>\n                                    <button\n                                        type=\"button\"\n                                        role=\"menuitemradio\"\n                                        aria-checked={active}\n                                        onClick={() => {\n                                            setSkin(t.id);\n                                            setOpen(false);\n                                        }}\n                                        className={cn(\n                                            'hover:bg-accent hover:text-accent-foreground flex w-full items-start gap-2 px-3 py-2 text-left transition-colors',\n                                            active && 'text-foreground'\n                                        )}\n                                    >\n                                        <span className=\"mt-0.5 size-4 shrink-0\">\n                                            {active && <Check className=\"size-4 text-primary\" aria-hidden />}\n                                        </span>\n                                        <span className=\"min-w-0\">\n                                            <span className=\"block text-sm font-medium\">{t.label}</span>\n                                            <span className=\"text-muted-foreground block text-xs leading-snug\">\n                                                {t.description}\n                                            </span>\n                                        </span>\n                                    </button>\n                                </li>\n                            );\n                        })}\n                    </ul>\n                </div>\n            )}\n        </div>\n    );\n}\n"]}

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@orangecheck/design",
+  "version": "0.1.0",
+  "description": "OrangeCheck design system — multi-theme tokens, primitives, and family composites for the .ochk.io sub-sites. Tailwind 4 + Next.js Pages Router. Not for third-party integration.",
+  "keywords": [
+    "orangecheck",
+    "design-system",
+    "ui",
+    "tokens",
+    "themes",
+    "react",
+    "internal"
+  ],
+  "author": "OrangeCheck",
+  "license": "MIT",
+  "homepage": "https://design.ochk.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/orangecheck/oc-packages.git",
+    "directory": "design"
+  },
+  "bugs": {
+    "url": "https://github.com/orangecheck/oc-packages/issues"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "import": "./dist/tokens.mjs",
+      "require": "./dist/tokens.js"
+    },
+    "./primitives": {
+      "types": "./dist/primitives.d.ts",
+      "import": "./dist/primitives.mjs",
+      "require": "./dist/primitives.js"
+    },
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "import": "./dist/components.mjs",
+      "require": "./dist/components.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./styles/*": "./dist/styles/*"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup && yarn copy:css",
+    "copy:css": "rm -rf dist/styles && mkdir -p dist/styles && cp src/styles.css dist/styles.css && cp -R src/styles/. dist/styles/",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist storybook-static",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "verify": "node scripts/verify-stories.mjs && node scripts/verify-themes.mjs",
+    "verify:stories": "node scripts/verify-stories.mjs",
+    "verify:themes": "node scripts/verify-themes.mjs",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "dependencies": {
+    "@orangecheck/ui": "^0.15.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1"
+  },
+  "peerDependencies": {
+    "@orangecheck/auth-client": "^2.17.0",
+    "lucide-react": ">=0.400.0",
+    "next": "^15.0.0",
+    "next-themes": "^0.4.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@orangecheck/auth-client": "^2.17.0",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "lucide-react": "^0.544.0",
+    "next": "15.5.15",
+    "next-themes": "^0.4.6",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "@playwright/test": "^1.48.0",
+    "storybook": "^8.4.7",
+    "tailwindcss": "^4.0.0",
+    "tsup": "^8.3.5",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}