@octavius2929-personal/design-system 0.1.0 → 0.4.0

package/dist/index.js

@@ -1,8 +1,19 @@
 // src/theme/theme.css.ts
+var colorVars = { bg1: "var(--bg1__e3grur2c)", bg2: "var(--bg2__e3grur2d)", bg3: "var(--bg3__e3grur2e)", bgInset: "var(--bgInset__e3grur2f)", fg1: "var(--fg1__e3grur2g)", fg2: "var(--fg2__e3grur2h)", fg3: "var(--fg3__e3grur2i)", fgOnAccent: "var(--fgOnAccent__e3grur2j)", border1: "var(--border1__e3grur2k)", border2: "var(--border2__e3grur2l)", borderStrong: "var(--borderStrong__e3grur2m)", accent: "var(--accent__e3grur2n)", accentHover: "var(--accentHover__e3grur2o)", accentSoft: "var(--accentSoft__e3grur2p)", ok: "var(--ok__e3grur2q)", warn: "var(--warn__e3grur2r)", danger: "var(--danger__e3grur2s)", info: "var(--info__e3grur2t)", focus: "var(--focus__e3grur2u)", scrim: "var(--scrim__e3grur2v)" };
 var modeNames = ["light", "dark", "sepia", "contrast"];
 var schemaNames = ["tinta"];
-var themes = { tinta: { light: "theme_themes_tinta_light__e3grur2v", dark: "theme_themes_tinta_dark__e3grur2w", sepia: "theme_themes_tinta_sepia__e3grur2x", contrast: "theme_themes_tinta_contrast__e3grur2y" } };
-var vars = { font: { display: "var(--font-display__e3grur0)", text: "var(--font-text__e3grur1)", mono: "var(--font-mono__e3grur2)", black: "var(--font-black__e3grur3)" }, text: { eyebrow: { size: "var(--text-eyebrow-size__e3grur4)", lineHeight: "var(--text-eyebrow-lineHeight__e3grur5)", weight: "var(--text-eyebrow-weight__e3grur6)", letterSpacing: "var(--text-eyebrow-letterSpacing__e3grur7)" }, display: { size: "var(--text-display-size__e3grur8)", lineHeight: "var(--text-display-lineHeight__e3grur9)", weight: "var(--text-display-weight__e3grura)", letterSpacing: "var(--text-display-letterSpacing__e3grurb)" }, h1: { size: "var(--text-h1-size__e3grurc)", lineHeight: "var(--text-h1-lineHeight__e3grurd)", weight: "var(--text-h1-weight__e3grure)", letterSpacing: "var(--text-h1-letterSpacing__e3grurf)" }, h2: { size: "var(--text-h2-size__e3grurg)", lineHeight: "var(--text-h2-lineHeight__e3grurh)", weight: "var(--text-h2-weight__e3gruri)", letterSpacing: "var(--text-h2-letterSpacing__e3grurj)" }, h3: { size: "var(--text-h3-size__e3grurk)", lineHeight: "var(--text-h3-lineHeight__e3grurl)", weight: "var(--text-h3-weight__e3grurm)", letterSpacing: "var(--text-h3-letterSpacing__e3grurn)" }, h4: { size: "var(--text-h4-size__e3gruro)", lineHeight: "var(--text-h4-lineHeight__e3grurp)", weight: "var(--text-h4-weight__e3grurq)", letterSpacing: "var(--text-h4-letterSpacing__e3grurr)" }, body: { size: "var(--text-body-size__e3grurs)", lineHeight: "var(--text-body-lineHeight__e3grurt)", weight: "var(--text-body-weight__e3gruru)", letterSpacing: "var(--text-body-letterSpacing__e3grurv)" }, lead: { size: "var(--text-lead-size__e3grurw)", lineHeight: "var(--text-lead-lineHeight__e3grurx)", weight: "var(--text-lead-weight__e3grury)", letterSpacing: "var(--text-lead-letterSpacing__e3grurz)" }, small: { size: "var(--text-small-size__e3grur10)", lineHeight: "var(--text-small-lineHeight__e3grur11)", weight: "var(--text-small-weight__e3grur12)", letterSpacing: "var(--text-small-letterSpacing__e3grur13)" }, caption: { size: "var(--text-caption-size__e3grur14)", lineHeight: "var(--text-caption-lineHeight__e3grur15)", weight: "var(--text-caption-weight__e3grur16)", letterSpacing: "var(--text-caption-letterSpacing__e3grur17)" } }, space: { none: "var(--space-none__e3grur18)", xs: "var(--space-xs__e3grur19)", sm: "var(--space-sm__e3grur1a)", md: "var(--space-md__e3grur1b)", lg: "var(--space-lg__e3grur1c)", xl: "var(--space-xl__e3grur1d)", "2xl": "var(--space-2xl__e3grur1e)", "3xl": "var(--space-3xl__e3grur1f)", "4xl": "var(--space-4xl__e3grur1g)", "5xl": "var(--space-5xl__e3grur1h)" }, radius: { none: "var(--radius-none__e3grur1i)", sm: "var(--radius-sm__e3grur1j)", md: "var(--radius-md__e3grur1k)", lg: "var(--radius-lg__e3grur1l)", base: "var(--radius-base__e3grur1m)", full: "var(--radius-full__e3grur1n)" }, border: { hair: "var(--border-hair__e3grur1o)", rule: "var(--border-rule__e3grur1p)", heavy: "var(--border-heavy__e3grur1q)" }, tracking: { tight: "var(--tracking-tight__e3grur1r)", normal: "var(--tracking-normal__e3grur1s)", wide: "var(--tracking-wide__e3grur1t)", wider: "var(--tracking-wider__e3grur1u)", widest: "var(--tracking-widest__e3grur1v)" }, leading: { tight: "var(--leading-tight__e3grur1w)", snug: "var(--leading-snug__e3grur1x)", normal: "var(--leading-normal__e3grur1y)", relaxed: "var(--leading-relaxed__e3grur1z)" }, weight: { light: "var(--weight-light__e3grur20)", regular: "var(--weight-regular__e3grur21)", medium: "var(--weight-medium__e3grur22)", semibold: "var(--weight-semibold__e3grur23)", bold: "var(--weight-bold__e3grur24)" }, dur: { fast: "var(--dur-fast__e3grur25)", base: "var(--dur-base__e3grur26)", slow: "var(--dur-slow__e3grur27)" }, ease: { ink: "var(--ease-ink__e3grur28)" }, shadow: { sm: "var(--shadow-sm__e3grur29)", md: "var(--shadow-md__e3grur2a)", lg: "var(--shadow-lg__e3grur2b)" }, color: { bg1: "var(--color-bg1__e3grur2c)", bg2: "var(--color-bg2__e3grur2d)", bg3: "var(--color-bg3__e3grur2e)", bgInset: "var(--color-bgInset__e3grur2f)", fg1: "var(--color-fg1__e3grur2g)", fg2: "var(--color-fg2__e3grur2h)", fg3: "var(--color-fg3__e3grur2i)", fgOnAccent: "var(--color-fgOnAccent__e3grur2j)", border1: "var(--color-border1__e3grur2k)", border2: "var(--color-border2__e3grur2l)", borderStrong: "var(--color-borderStrong__e3grur2m)", accent: "var(--color-accent__e3grur2n)", accentHover: "var(--color-accentHover__e3grur2o)", accentSoft: "var(--color-accentSoft__e3grur2p)", ok: "var(--color-ok__e3grur2q)", warn: "var(--color-warn__e3grur2r)", danger: "var(--color-danger__e3grur2s)", info: "var(--color-info__e3grur2t)", scrim: "var(--color-scrim__e3grur2u)" } };
+var themes = { tinta: { light: "theme_themes_tinta_light__e3grur2w", dark: "theme_themes_tinta_dark__e3grur2x", sepia: "theme_themes_tinta_sepia__e3grur2y", contrast: "theme_themes_tinta_contrast__e3grur2z" } };
+var vars = { font: { display: "var(--font-display__e3grur0)", text: "var(--font-text__e3grur1)", mono: "var(--font-mono__e3grur2)", black: "var(--font-black__e3grur3)" }, text: { eyebrow: { size: "var(--text-eyebrow-size__e3grur4)", lineHeight: "var(--text-eyebrow-lineHeight__e3grur5)", weight: "var(--text-eyebrow-weight__e3grur6)", letterSpacing: "var(--text-eyebrow-letterSpacing__e3grur7)" }, display: { size: "var(--text-display-size__e3grur8)", lineHeight: "var(--text-display-lineHeight__e3grur9)", weight: "var(--text-display-weight__e3grura)", letterSpacing: "var(--text-display-letterSpacing__e3grurb)" }, h1: { size: "var(--text-h1-size__e3grurc)", lineHeight: "var(--text-h1-lineHeight__e3grurd)", weight: "var(--text-h1-weight__e3grure)", letterSpacing: "var(--text-h1-letterSpacing__e3grurf)" }, h2: { size: "var(--text-h2-size__e3grurg)", lineHeight: "var(--text-h2-lineHeight__e3grurh)", weight: "var(--text-h2-weight__e3gruri)", letterSpacing: "var(--text-h2-letterSpacing__e3grurj)" }, h3: { size: "var(--text-h3-size__e3grurk)", lineHeight: "var(--text-h3-lineHeight__e3grurl)", weight: "var(--text-h3-weight__e3grurm)", letterSpacing: "var(--text-h3-letterSpacing__e3grurn)" }, h4: { size: "var(--text-h4-size__e3gruro)", lineHeight: "var(--text-h4-lineHeight__e3grurp)", weight: "var(--text-h4-weight__e3grurq)", letterSpacing: "var(--text-h4-letterSpacing__e3grurr)" }, body: { size: "var(--text-body-size__e3grurs)", lineHeight: "var(--text-body-lineHeight__e3grurt)", weight: "var(--text-body-weight__e3gruru)", letterSpacing: "var(--text-body-letterSpacing__e3grurv)" }, lead: { size: "var(--text-lead-size__e3grurw)", lineHeight: "var(--text-lead-lineHeight__e3grurx)", weight: "var(--text-lead-weight__e3grury)", letterSpacing: "var(--text-lead-letterSpacing__e3grurz)" }, small: { size: "var(--text-small-size__e3grur10)", lineHeight: "var(--text-small-lineHeight__e3grur11)", weight: "var(--text-small-weight__e3grur12)", letterSpacing: "var(--text-small-letterSpacing__e3grur13)" }, caption: { size: "var(--text-caption-size__e3grur14)", lineHeight: "var(--text-caption-lineHeight__e3grur15)", weight: "var(--text-caption-weight__e3grur16)", letterSpacing: "var(--text-caption-letterSpacing__e3grur17)" } }, space: { none: "var(--space-none__e3grur18)", xs: "var(--space-xs__e3grur19)", sm: "var(--space-sm__e3grur1a)", md: "var(--space-md__e3grur1b)", lg: "var(--space-lg__e3grur1c)", xl: "var(--space-xl__e3grur1d)", "2xl": "var(--space-2xl__e3grur1e)", "3xl": "var(--space-3xl__e3grur1f)", "4xl": "var(--space-4xl__e3grur1g)", "5xl": "var(--space-5xl__e3grur1h)" }, radius: { none: "var(--radius-none__e3grur1i)", sm: "var(--radius-sm__e3grur1j)", md: "var(--radius-md__e3grur1k)", lg: "var(--radius-lg__e3grur1l)", base: "var(--radius-base__e3grur1m)", full: "var(--radius-full__e3grur1n)" }, border: { hair: "var(--border-hair__e3grur1o)", rule: "var(--border-rule__e3grur1p)", heavy: "var(--border-heavy__e3grur1q)" }, tracking: { tight: "var(--tracking-tight__e3grur1r)", normal: "var(--tracking-normal__e3grur1s)", wide: "var(--tracking-wide__e3grur1t)", wider: "var(--tracking-wider__e3grur1u)", widest: "var(--tracking-widest__e3grur1v)" }, leading: { tight: "var(--leading-tight__e3grur1w)", snug: "var(--leading-snug__e3grur1x)", normal: "var(--leading-normal__e3grur1y)", relaxed: "var(--leading-relaxed__e3grur1z)" }, weight: { light: "var(--weight-light__e3grur20)", regular: "var(--weight-regular__e3grur21)", medium: "var(--weight-medium__e3grur22)", semibold: "var(--weight-semibold__e3grur23)", bold: "var(--weight-bold__e3grur24)" }, dur: { fast: "var(--dur-fast__e3grur25)", base: "var(--dur-base__e3grur26)", slow: "var(--dur-slow__e3grur27)" }, ease: { ink: "var(--ease-ink__e3grur28)" }, shadow: { sm: "var(--shadow-sm__e3grur29)", md: "var(--shadow-md__e3grur2a)", lg: "var(--shadow-lg__e3grur2b)" }, color: colorVars };
+
+// src/hooks/use-previous/index.ts
+import { useEffect, useRef } from "react";
+function usePrevious(value, initial) {
+  const ref = useRef(initial);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
 
 // src/hooks/use-toggle/index.ts
 import { useCallback, useState } from "react";
@@ -16,36 +27,86 @@ function useToggle(initial = false) {
 import { useMemo as useMemo2 } from "react";
 
 // src/theme/context/theme-context.tsx
-import { createContext, useContext, useMemo, useState as useState2 } from "react";
+import { createContext, useContext, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
 import { jsx } from "react/jsx-runtime";
 var noop = () => {
 };
 var DEFAULT_VALUE = {
   schema: "tinta",
   mode: "light",
+  preference: "light",
   themeClass: themes.tinta.light,
   setSchema: noop,
   setMode: noop,
-  toggleMode: noop
+  toggleMode: noop,
+  cycleMode: noop
 };
 var ThemeContext = createContext(null);
+function resolveSystemMode() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "light";
+  if (window.matchMedia("(prefers-contrast: more)").matches) return "contrast";
+  if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
+  return "light";
+}
+function readStored(key) {
+  if (typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(key);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function writeStored(key, value) {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
 function ThemeProvider({
   children,
   defaultSchema = "tinta",
-  defaultMode = "light"
+  defaultMode = "light",
+  storageKey = "ds-theme",
+  persist = true
 }) {
-  const [schema, setSchema] = useState2(defaultSchema);
-  const [mode, setMode] = useState2(defaultMode);
+  const [schema, setSchema] = useState2(
+    () => persist && readStored(storageKey)?.schema || defaultSchema
+  );
+  const [preference, setPreference] = useState2(
+    () => (persist ? readStored(storageKey)?.preference : null) ?? defaultMode
+  );
+  const [systemMode, setSystemMode] = useState2(resolveSystemMode);
+  useEffect2(() => {
+    if (preference !== "system") return;
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mqls = ["(prefers-contrast: more)", "(prefers-color-scheme: dark)"].map(
+      (q) => window.matchMedia(q)
+    );
+    const onChange = () => setSystemMode(resolveSystemMode());
+    onChange();
+    for (const mql of mqls) mql.addEventListener?.("change", onChange);
+    return () => {
+      for (const mql of mqls) mql.removeEventListener?.("change", onChange);
+    };
+  }, [preference]);
+  const mode = preference === "system" ? systemMode : preference;
+  useEffect2(() => {
+    if (persist) writeStored(storageKey, { schema, preference });
+  }, [schema, preference, persist, storageKey]);
   const value = useMemo(
     () => ({
       schema,
       mode,
+      preference,
       themeClass: themes[schema][mode],
       setSchema,
-      setMode,
-      toggleMode: () => setMode((current2) => current2 === "dark" ? "light" : "dark")
+      setMode: setPreference,
+      toggleMode: () => setPreference(mode === "dark" ? "light" : "dark"),
+      cycleMode: () => setPreference(modeNames[(modeNames.indexOf(mode) + 1) % modeNames.length])
     }),
-    [schema, mode]
+    [schema, mode, preference]
   );
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
 }
@@ -984,7 +1045,7 @@ function Tooltip({ label: label7, children, placement: placement2 }) {
 }
 
 // src/components/select/index.tsx
-import { useEffect, useId as useId3, useRef, useState as useState5 } from "react";
+import { useEffect as useEffect3, useId as useId3, useRef as useRef2, useState as useState5 } from "react";
 
 // src/components/icons/chevron-down/index.tsx
 import { jsx as jsx24 } from "react/jsx-runtime";
@@ -1047,7 +1108,7 @@ import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 function Select({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3 }) {
   const [open, setOpen] = useState5(false);
   const [activeIndex, setActiveIndex] = useState5(0);
-  const rootRef = useRef(null);
+  const rootRef = useRef2(null);
   const baseId = useId3();
   const labelId = `${baseId}-label`;
   const optionId = (index) => `${baseId}-option-${index}`;
@@ -1060,7 +1121,7 @@ function Select({ options, value, onChange, placeholder: placeholder2, label: la
     menu: menu2,
     optionClass
   } = useStyles15({ open });
-  useEffect(() => {
+  useEffect3(() => {
     if (!open) return;
     const onPointerDown = (event) => {
       if (rootRef.current && !rootRef.current.contains(event.target)) {
@@ -1571,8 +1632,8 @@ function Tabs({ items, value, onChange }) {
 // src/components/menu/index.tsx
 import {
   cloneElement as cloneElement2,
-  useEffect as useEffect2,
-  useRef as useRef2,
+  useEffect as useEffect4,
+  useRef as useRef3,
   useState as useState7
 } from "react";
 
@@ -1608,9 +1669,9 @@ function assignRef(ref, value) {
 function Menu({ trigger: trigger2, items }) {
   const { wrapper: wrapper4, list: list2, item: item3, dangerItem } = useStyles22();
   const [open, setOpen] = useState7(false);
-  const rootRef = useRef2(null);
-  const listRef = useRef2(null);
-  const triggerRef = useRef2(null);
+  const rootRef = useRef3(null);
+  const listRef = useRef3(null);
+  const triggerRef = useRef3(null);
   const getMenuItems = () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
   const focusItemAt = (index) => {
     const menuItems = getMenuItems();
@@ -1622,7 +1683,7 @@ function Menu({ trigger: trigger2, items }) {
     setOpen(false);
     triggerRef.current?.focus();
   };
-  useEffect2(() => {
+  useEffect4(() => {
     if (!open) return;
     listRef.current?.querySelector('[role="menuitem"]')?.focus();
     const onDocMouseDown = (event) => {
@@ -1709,10 +1770,11 @@ function Menu({ trigger: trigger2, items }) {
 
 // src/components/dialog/index.tsx
 import {
-  useEffect as useEffect3,
+  useEffect as useEffect5,
   useId as useId4,
-  useRef as useRef3
+  useRef as useRef4
 } from "react";
+import { createPortal } from "react-dom";
 
 // src/components/dialog/use-styles.ts
 import { useMemo as useMemo24 } from "react";
@@ -1744,11 +1806,11 @@ import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function Dialog({ open, onClose, title, actions: actions3, children }) {
   const { overlay: overlay2, surface: surface2, titleText: titleText3, body: body4, actions: actionsClass } = useStyles23();
-  const surfaceRef = useRef3(null);
-  const previouslyFocused = useRef3(null);
+  const surfaceRef = useRef4(null);
+  const previouslyFocused = useRef4(null);
   const generatedId = useId4();
   const titleId = title != null ? generatedId : void 0;
-  useEffect3(() => {
+  useEffect5(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -1756,13 +1818,13 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (!open) return;
     previouslyFocused.current = document.activeElement;
     surfaceRef.current?.focus();
     return () => previouslyFocused.current?.focus?.();
   }, [open]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (!open) return;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -1770,7 +1832,7 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
       document.body.style.overflow = previousOverflow;
     };
   }, [open]);
-  if (!open) return null;
+  if (!open || typeof document === "undefined") return null;
   const stop = (event) => event.stopPropagation();
   const onSurfaceKeyDown = (event) => {
     if (event.key !== "Tab") return;
@@ -1797,7 +1859,7 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
       first.focus();
     }
   };
-  return (
+  return createPortal(
     // biome-ignore lint/a11y/useKeyWithClickEvents: ESC handled by a document keydown listener.
     /* @__PURE__ */ jsx35("div", { className: overlay2, "data-testid": "dialog-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs25(
       "div",
@@ -1816,10 +1878,14 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
           actions3 != null && /* @__PURE__ */ jsx35("div", { className: actionsClass, children: actions3 })
         ]
       }
-    ) })
+    ) }),
+    document.body
   );
 }
 
+// src/components/snackbar/index.tsx
+import { createPortal as createPortal2 } from "react-dom";
+
 // src/components/snackbar/use-styles.ts
 import { useMemo as useMemo25 } from "react";
 
@@ -1845,12 +1911,15 @@ function useStyles24() {
 import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 function Snackbar({ open, message: message2, action, onClose }) {
   const { root: root24, message: messageClass, closeBtn: closeBtn2 } = useStyles24();
-  if (!open) return null;
-  return /* @__PURE__ */ jsxs26("div", { role: "status", className: root24, children: [
-    /* @__PURE__ */ jsx36("span", { className: messageClass, children: message2 }),
-    action,
-    onClose && /* @__PURE__ */ jsx36("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ jsx36(XIcon, { size: 18 }) })
-  ] });
+  if (!open || typeof document === "undefined") return null;
+  return createPortal2(
+    /* @__PURE__ */ jsxs26("div", { role: "status", className: root24, children: [
+      /* @__PURE__ */ jsx36("span", { className: messageClass, children: message2 }),
+      action,
+      onClose && /* @__PURE__ */ jsx36("button", { type: "button", "aria-label": "Close", className: closeBtn2, onClick: onClose, children: /* @__PURE__ */ jsx36(XIcon, { size: 18 }) })
+    ] }),
+    document.body
+  );
 }
 
 // src/components/table/use-styles.ts
@@ -2124,11 +2193,14 @@ export {
   Tooltip,
   TriangleAlertIcon,
   XIcon,
+  colorVars,
   modeNames,
   schemaNames,
   text,
   vars as theme,
   themes,
+  usePrevious,
   useTheme,
   useToggle
 };
+//# sourceMappingURL=index.js.map