@goliapkg/gds 0.9.3 → 0.9.5

package/dist/toast-DN5xANLM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-DN5xANLM.js","names":[],"sources":["../src/l4-molecules/audit-entry.tsx","../src/l4-molecules/inline-edit.tsx","../src/l4-molecules/list-item.tsx","../src/l4-molecules/notification.tsx","../src/l4-molecules/task-item.tsx","../src/l4-molecules/toast.tsx"],"sourcesContent":["import { forwardRef } from 'react'\n\nimport { cx } from '../utils/cx'\n\ntype AuditEntryVariant = 'danger' | 'default' | 'success' | 'warning'\n\ntype AuditEntryProps = React.HTMLAttributes<HTMLDivElement> & {\n  action: string\n  target?: string\n  timestamp: string\n  user: string\n  variant?: AuditEntryVariant\n}\n\nconst variantCls: Record<AuditEntryVariant, string> = {\n  default: 'text-fg',\n  success: 'text-success',\n  warning: 'text-warning',\n  danger: 'text-danger',\n}\n\nexport const AuditEntry = forwardRef<HTMLDivElement, AuditEntryProps>(\n  function AuditEntry({ action, className, target, timestamp, user, variant = 'default', ...props }, ref) {\n    return (\n      <div\n        className={cx('flex items-center justify-between gds-gap gds-text', className)}\n        data-component=\"audit-entry\"\n        ref={ref}\n        {...props}\n      >\n        <span className=\"shrink-0 text-xs text-fg-muted\">{timestamp}</span>\n        <span className=\"flex-1 truncate\">\n          <span className=\"font-medium text-fg\">{user}</span>\n          {' '}\n          <span className={variantCls[variant]}>{action}</span>\n          {target !== undefined && <span className=\"text-fg-muted\"> {target}</span>}\n        </span>\n      </div>\n    )\n  },\n)\n\nexport type { AuditEntryProps, AuditEntryVariant }\n","// inline-edit — editable text with confirm/cancel buttons and validation\nimport { forwardRef, useCallback, useState } from 'react'\n\nimport { focusCls } from '../utils/a11y'\nimport { cx } from '../utils/cx'\n\nexport type InlineEditProps = {\n  value: string\n  onSave: (value: string) => void\n  onCancel?: () => void\n  validate?: (value: string) => string | null\n  placeholder?: string\n  disabled?: boolean\n  className?: string\n}\n\nconst checkIcon = (\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <path d=\"M2.5 7.5l3 3 6-6.5\" />\n  </svg>\n)\n\nconst cancelIcon = (\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\n    <path d=\"M3 3l8 8M11 3l-8 8\" />\n  </svg>\n)\n\nconst editIcon = (\n  <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <path d=\"M7 2l3 3-7 7H0V9z\" />\n  </svg>\n)\n\nexport const InlineEdit = forwardRef<HTMLDivElement, InlineEditProps>(\n  function InlineEdit({ value, onSave, onCancel, validate, placeholder = 'Click to edit', disabled, className }, ref) {\n    const [editing, setEditing] = useState(false)\n    const [editValue, setEditValue] = useState(value)\n    const [error, setError] = useState<string | null>(null)\n\n    const startEditing = useCallback(() => {\n      if (disabled === true) return\n      setEditValue(value)\n      setError(null)\n      setEditing(true)\n    }, [disabled, value])\n\n    const save = useCallback(() => {\n      if (validate !== undefined) {\n        const err = validate(editValue)\n        if (err !== null) {\n          setError(err)\n          return\n        }\n      }\n      setEditing(false)\n      setError(null)\n      onSave(editValue)\n    }, [editValue, onSave, validate])\n\n    const cancel = useCallback(() => {\n      setEditing(false)\n      setEditValue(value)\n      setError(null)\n      if (onCancel !== undefined) {\n        onCancel()\n      }\n    }, [onCancel, value])\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter') {\n          save()\n        }\n        if (e.key === 'Escape') {\n          cancel()\n        }\n      },\n      [save, cancel],\n    )\n\n    if (editing) {\n      return (\n        <div ref={ref} className={cx('inline-flex flex-col', className)} data-component=\"inline-edit\" data-state=\"editing\">\n          <div className=\"flex items-center gap-1\">\n            <input\n              autoFocus\n              className={cx(\n                'bg-transparent gds-text-body text-fg outline-none border-b border-accent/50 px-0.5',\n                error !== null && 'border-danger/50',\n                focusCls,\n              )}\n              onChange={(e) => { setEditValue(e.target.value); setError(null) }}\n              onKeyDown={handleKeyDown}\n              type=\"text\"\n              value={editValue}\n            />\n            <button type=\"button\" onClick={save} className={cx('shrink-0 p-0.5 text-success hover:text-success/80', focusCls)} aria-label=\"Save\">\n              {checkIcon}\n            </button>\n            <button type=\"button\" onClick={cancel} className={cx('shrink-0 p-0.5 text-fg-muted hover:text-fg', focusCls)} aria-label=\"Cancel\">\n              {cancelIcon}\n            </button>\n          </div>\n          {error !== null && <span className=\"mt-0.5 text-[10px] text-danger\">{error}</span>}\n        </div>\n      )\n    }\n\n    const isEmpty = value === ''\n\n    return (\n      <div\n        ref={ref}\n        className={cx('group inline-flex cursor-pointer items-center gap-1', disabled === true && 'pointer-events-none opacity-50', className)}\n        data-component=\"inline-edit\"\n        data-state=\"display\"\n        onClick={startEditing}\n        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') startEditing() }}\n        role=\"button\"\n        tabIndex={disabled === true ? -1 : 0}\n      >\n        <span className={cx('gds-text-body', isEmpty ? 'text-fg-muted' : 'text-fg', focusCls)}>\n          {isEmpty ? placeholder : value}\n        </span>\n        <span className=\"text-fg-muted/0 transition-colors group-hover:text-fg-muted/60\">{editIcon}</span>\n      </div>\n    )\n  },\n)\n","// list-item — structured list row with icon, title, description, and trailing element\nimport type { ReactNode } from 'react'\nimport { forwardRef } from 'react'\n\nimport { cx } from '../utils/cx'\n\nexport type ListItemProps = {\n  icon?: ReactNode\n  title: string\n  description?: string\n  trailing?: ReactNode\n  onClick?: () => void\n  active?: boolean\n  disabled?: boolean\n  className?: string\n}\n\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n  function ListItem({ icon, title, description, trailing, onClick, active, disabled, className }, ref) {\n    const isClickable = onClick !== undefined && disabled !== true\n\n    return (\n      <div\n        ref={ref}\n        role={isClickable ? 'button' : undefined}\n        tabIndex={isClickable ? 0 : undefined}\n        onClick={isClickable ? onClick : undefined}\n        onKeyDown={isClickable ? (e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault()\n            onClick()\n          }\n        } : undefined}\n        className={cx(\n          'flex items-center gap-3 gds-pad-x gds-pad-y-sm gds-text-body select-none',\n          isClickable && 'cursor-pointer hover:bg-bg-tertiary',\n          active === true && 'border-l-2 border-l-accent bg-accent/5',\n          disabled === true && 'pointer-events-none opacity-50',\n          className,\n        )}\n        data-component=\"list-item\"\n        data-state={active === true ? 'active' : undefined}\n      >\n        {icon !== undefined && <span className=\"shrink-0 text-fg-muted\">{icon}</span>}\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"font-medium text-fg\">{title}</div>\n          {description !== undefined && (\n            <div className=\"mt-0.5 text-fg-muted gds-text-caption\">{description}</div>\n          )}\n        </div>\n        {trailing !== undefined && <span className=\"shrink-0\">{trailing}</span>}\n      </div>\n    )\n  },\n)\n","// notification — persistent banner with variant, title, description, and action\nimport type { ReactNode } from 'react'\nimport { forwardRef } from 'react'\n\nimport { focusCls } from '../utils/a11y'\nimport { cx } from '../utils/cx'\nimport { glassClass } from '../utils/glass'\n\ntype NotificationVariant = 'danger' | 'info' | 'success' | 'warning'\n\nconst borderColorMap: Record<NotificationVariant, string> = {\n  info: 'border-l-accent',\n  success: 'border-l-success',\n  warning: 'border-l-warning',\n  danger: 'border-l-danger',\n}\n\nconst bgColorMap: Record<NotificationVariant, string> = {\n  info: 'bg-accent/5',\n  success: 'bg-success/5',\n  warning: 'bg-warning/5',\n  danger: 'bg-danger/5',\n}\n\nconst iconColorMap: Record<NotificationVariant, string> = {\n  info: 'text-accent',\n  success: 'text-success',\n  warning: 'text-warning',\n  danger: 'text-danger',\n}\n\nconst iconMap: Record<NotificationVariant, ReactNode> = {\n  info: (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\">\n      <circle cx=\"8\" cy=\"8\" r=\"6.5\" /><path d=\"M8 5.5h.01M8 7.5v3\" />\n    </svg>\n  ),\n  success: (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <circle cx=\"8\" cy=\"8\" r=\"6.5\" /><path d=\"M5.5 8l2 2 3-3.5\" />\n    </svg>\n  ),\n  warning: (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\">\n      <path d=\"M7.13 2.5l-5.5 10h11l-5.5-10z\" /><path d=\"M7.63 6.5v2.5M7.63 11h.01\" />\n    </svg>\n  ),\n  danger: (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\">\n      <circle cx=\"8\" cy=\"8\" r=\"6.5\" /><path d=\"M5.5 5.5l5 5M10.5 5.5l-5 5\" />\n    </svg>\n  ),\n}\n\ntype NotificationProps = React.HTMLAttributes<HTMLDivElement> & {\n  title: string\n  description?: string\n  variant?: NotificationVariant\n  action?: ReactNode\n  onClose?: () => void\n  glass?: boolean\n}\n\nconst Notification = forwardRef<HTMLDivElement, NotificationProps>(\n  function Notification({ title, description, variant = 'info', action, onClose, glass, className, ...props }, ref) {\n    const v = variant ?? 'info'\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          'flex w-full items-start gds-gap gds-radius-popover border border-border border-l-2 gds-pad-x gds-pad-y',\n          borderColorMap[v],\n          bgColorMap[v],\n          glass === true && glassClass(glass),\n          className,\n        )}\n        data-component=\"notification\"\n        data-variant={v}\n        role=\"alert\"\n        {...props}\n      >\n        <span className={cx('mt-px shrink-0', iconColorMap[v])}>{iconMap[v]}</span>\n        <div className=\"min-w-0 flex-1\">\n          <p className=\"gds-text-body font-medium text-fg\">{title}</p>\n          {description !== undefined && <p className=\"mt-0.5 gds-text-label text-fg-muted\">{description}</p>}\n        </div>\n        {action !== undefined && <div className=\"shrink-0\">{action}</div>}\n        {onClose !== undefined && (\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={cx('shrink-0 gds-radius-button p-0.5 text-fg-muted opacity-60 hover:opacity-100', focusCls)}\n            aria-label=\"Dismiss\"\n          >\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\n              <path d=\"M2 2l8 8M10 2l-8 8\" />\n            </svg>\n          </button>\n        )}\n      </div>\n    )\n  },\n)\n\nexport { Notification }\nexport type { NotificationProps, NotificationVariant }\n","import { forwardRef } from 'react'\n\nimport { cx } from '../utils/cx'\n\ntype TaskItemPriority = 'low' | 'medium' | 'high' | 'critical'\n\ntype TaskItemProps = React.HTMLAttributes<HTMLDivElement> & {\n  completed?: boolean\n  dueDate?: string\n  onToggle?: () => void\n  priority?: TaskItemPriority\n  title: string\n}\n\nconst priorityCls: Record<TaskItemPriority, string> = {\n  low: 'bg-success/15 text-success',\n  medium: 'bg-warning/15 text-warning',\n  high: 'bg-danger/15 text-danger',\n  critical: 'bg-danger text-white',\n}\n\nconst TaskItem = forwardRef<HTMLDivElement, TaskItemProps>(\n  function TaskItem({ className, completed = false, dueDate, onToggle, priority, title, ...props }, ref) {\n    return (\n      <div\n        className={cx('flex items-center gap-2 rounded px-2 py-1.5 text-sm', className)}\n        data-component=\"task-item\"\n        data-completed={completed}\n        ref={ref}\n        {...props}\n      >\n        <input\n          checked={completed}\n          className=\"shrink-0 accent-accent\"\n          onChange={onToggle}\n          type=\"checkbox\"\n        />\n        <span className={cx('flex-1 truncate', completed && 'line-through text-fg-muted')}>{title}</span>\n        {priority !== undefined && (\n          <span className={cx('rounded px-1.5 py-0.5 text-[10px] font-medium uppercase', priorityCls[priority])}>{priority}</span>\n        )}\n        {dueDate !== undefined && (\n          <span className=\"shrink-0 text-xs text-fg-muted\">{dueDate}</span>\n        )}\n      </div>\n    )\n  },\n)\n\nexport { TaskItem }\nexport type { TaskItemPriority, TaskItemProps }\n","// toast — notification card with variant, title, description, and action\nimport type { ReactNode } from 'react'\nimport { forwardRef } from 'react'\n\nimport { focusCls } from '../utils/a11y'\nimport { cx } from '../utils/cx'\n\nexport type ToastVariant = 'danger' | 'default' | 'success' | 'warning'\n\nconst borderColorMap: Record<ToastVariant, string> = {\n  default: 'border-l-accent',\n  success: 'border-l-success',\n  warning: 'border-l-warning',\n  danger: 'border-l-danger',\n}\n\nconst iconMap: Record<ToastVariant, ReactNode> = {\n  default: (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\">\n      <circle cx=\"8\" cy=\"8\" r=\"6.5\" /><path d=\"M8 5.5h.01M8 7.5v3\" />\n    </svg>\n  ),\n  success: (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <circle cx=\"8\" cy=\"8\" r=\"6.5\" /><path d=\"M5.5 8l2 2 3-3.5\" />\n    </svg>\n  ),\n  warning: (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\">\n      <path d=\"M7.13 2.5l-5.5 10h11l-5.5-10z\" /><path d=\"M7.63 6.5v2.5M7.63 11h.01\" />\n    </svg>\n  ),\n  danger: (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\">\n      <circle cx=\"8\" cy=\"8\" r=\"6.5\" /><path d=\"M5.5 5.5l5 5M10.5 5.5l-5 5\" />\n    </svg>\n  ),\n}\n\nconst iconColorMap: Record<ToastVariant, string> = {\n  default: 'text-accent',\n  success: 'text-success',\n  warning: 'text-warning',\n  danger: 'text-danger',\n}\n\nexport type ToastProps = React.HTMLAttributes<HTMLDivElement> & {\n  title: string\n  description?: string\n  variant?: ToastVariant\n  onClose?: () => void\n  action?: ReactNode\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n  function Toast({ title, description, variant = 'default', onClose, action, className, ...props }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          'flex items-start gds-gap gds-radius-popover border border-border border-l-4 bg-surface gds-pad-x gds-pad-y gds-shadow-lg',\n          borderColorMap[variant],\n          className,\n        )}\n        data-component=\"toast\"\n        data-variant={variant}\n        role=\"status\"\n        {...props}\n      >\n        <span className={cx('mt-px shrink-0', iconColorMap[variant])}>{iconMap[variant]}</span>\n        <div className=\"min-w-0 flex-1\">\n          <p className=\"gds-text-body font-medium text-fg\">{title}</p>\n          {description !== undefined && <p className=\"mt-0.5 gds-text-label text-fg-muted\">{description}</p>}\n        </div>\n        {action !== undefined && <div className=\"shrink-0\">{action}</div>}\n        {onClose !== undefined && (\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={cx('shrink-0 gds-radius-button p-0.5 text-fg-muted opacity-60 hover:opacity-100', focusCls)}\n            aria-label=\"Dismiss\"\n          >\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\n              <path d=\"M2 2l8 8M10 2l-8 8\" />\n            </svg>\n          </button>\n        )}\n      </div>\n    )\n  },\n)\n"],"mappings":"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"}

package/dist/use-theme-C0aWVw70.js

@@ -0,0 +1,203 @@
+import { F as e, N as t, P as n, l as r, n as i, t as a } from "./scales-C80FTPsL.js";
+import { atom as o, useAtom as s, useAtomValue as c } from "jotai";
+import { useCallback as l, useEffect as u, useRef as d } from "react";
+//#region src/l1-systems/theme.ts
+var f = {
+	mode: "system",
+	primaryColor: i,
+	presetId: "default",
+	shape: "default",
+	density: "default",
+	elevation: "raised",
+	glass: "full",
+	motion: "full",
+	colorOverrides: null
+}, p = o(f), m = o((e) => {
+	let { mode: t } = e(p);
+	return t === "system" ? typeof window > "u" || window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : t;
+});
+function h(i, o) {
+	let s = { ...e(o === "dark" ? t(i.primaryColor) : n(i.primaryColor), o) };
+	if (Object.assign(s, r()), Object.assign(s, a(i.shape, i.density, i.elevation, i.glass, i.motion, o)), i.colorOverrides !== null) for (let [e, t] of Object.entries(i.colorOverrides)) t !== void 0 && (s[e] = t);
+	return s;
+}
+function g(e, t, n) {
+	let r = document.documentElement;
+	if (n !== void 0) for (let e of n) r.style.removeProperty(e);
+	r.getAttribute("data-theme-mode") !== t && r.setAttribute("data-theme-mode", t);
+	let i = Object.keys(e);
+	for (let [t, n] of Object.entries(e)) r.style.setProperty(t, n);
+	return i;
+}
+var _ = "gds-theme";
+function v(e) {
+	try {
+		localStorage.setItem(_, JSON.stringify(e));
+	} catch {}
+}
+function y() {
+	try {
+		let e = localStorage.getItem(_);
+		if (e === null) return null;
+		let t = JSON.parse(e);
+		return {
+			...f,
+			...t,
+			primaryColor: typeof t.primaryColor == "string" && /^#[0-9a-fA-F]{6}$/.test(t.primaryColor) ? t.primaryColor : f.primaryColor,
+			shape: b(t.shape, [
+				"sharp",
+				"default",
+				"rounded"
+			], f.shape),
+			density: b(t.density, [
+				"compact",
+				"default",
+				"comfortable"
+			], f.density),
+			elevation: b(t.elevation, [
+				"flat",
+				"subtle",
+				"raised"
+			], f.elevation),
+			glass: b(t.glass, [
+				"off",
+				"subtle",
+				"full"
+			], f.glass),
+			motion: b(t.motion, [
+				"off",
+				"reduced",
+				"full"
+			], f.motion),
+			mode: b(t.mode, [
+				"light",
+				"dark",
+				"system"
+			], f.mode)
+		};
+	} catch {
+		return null;
+	}
+}
+function b(e, t, n) {
+	return typeof e == "string" && t.includes(e) ? e : n;
+}
+//#endregion
+//#region src/l1-systems/use-theme.ts
+var x = { colorPresets: {} };
+function S(e) {
+	x = e;
+}
+function C() {
+	return c(p);
+}
+function w() {
+	return c(m);
+}
+function T() {
+	let [, e] = s(p);
+	return l((t) => {
+		e((e) => ({
+			...e,
+			mode: t
+		}));
+	}, [e]);
+}
+function E() {
+	let [, e] = s(p);
+	return l((t) => {
+		let n = x.colorPresets[t]?.primaryColor ?? f.primaryColor;
+		e((e) => ({
+			...e,
+			presetId: t,
+			primaryColor: n,
+			colorOverrides: null
+		}));
+	}, [e]);
+}
+function D() {
+	let [, e] = s(p);
+	return l((t) => {
+		e((e) => ({
+			...e,
+			primaryColor: t,
+			colorOverrides: null
+		}));
+	}, [e]);
+}
+function O() {
+	let [, e] = s(p);
+	return l((t) => {
+		e((e) => ({
+			...e,
+			shape: t
+		}));
+	}, [e]);
+}
+function k() {
+	let [, e] = s(p);
+	return l((t) => {
+		e((e) => ({
+			...e,
+			density: t
+		}));
+	}, [e]);
+}
+function A() {
+	let [, e] = s(p);
+	return l((t) => {
+		e((e) => ({
+			...e,
+			elevation: t
+		}));
+	}, [e]);
+}
+function j() {
+	let [, e] = s(p);
+	return l((t) => {
+		e((e) => ({
+			...e,
+			glass: t
+		}));
+	}, [e]);
+}
+function M() {
+	let [, e] = s(p);
+	return l((t) => {
+		e((e) => ({
+			...e,
+			motion: t
+		}));
+	}, [e]);
+}
+function N() {
+	let [, e] = s(p);
+	return l((t) => {
+		e((e) => ({
+			...e,
+			colorOverrides: t
+		}));
+	}, [e]);
+}
+function P() {
+	let [, e] = s(p);
+	return l(() => {
+		e(f);
+	}, [e]);
+}
+function F() {
+	let e = c(p), t = c(m), n = d([]);
+	u(() => {
+		n.current = g(h(e, t), t, n.current), v(e);
+	}, [e, t]), u(() => {
+		let e = window.matchMedia("(prefers-color-scheme: dark)"), t = () => {};
+		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, []), u(() => {
+		let e = y();
+		e !== null && (n.current = g(h(e, t), t));
+	}, []);
+}
+//#endregion
+export { m as _, k as a, T as c, D as d, O as f, h as g, f as h, N as i, M as l, F as m, P as n, A as o, C as p, w as r, j as s, S as t, E as u, p as v };
+
+//# sourceMappingURL=use-theme-C0aWVw70.js.map

package/dist/use-theme-C0aWVw70.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme-C0aWVw70.js","names":[],"sources":["../src/l1-systems/theme.ts","../src/l1-systems/use-theme.ts"],"sourcesContent":["// L1 — Theme System\n// manages color preset + 5 dimensional axes + dark/light mode\n// applies CSS variable overrides to document root\n// persists to localStorage, syncs across tabs\n\nimport { atom } from 'jotai'\n\nimport { deriveDarkPalette, deriveLightPalette, paletteToVars } from '../l0-tokens/color-derive'\nimport { fontToCssVars } from '../l0-tokens/font-system'\nimport { DEFAULT_PRIMARY } from '../l0-tokens/generate-defaults'\nimport type {\n  ThemeDensity,\n  ThemeElevation,\n  ThemeGlass,\n  ThemeMotion,\n  ThemeShape,\n} from '../l0-tokens/scales'\nimport { resolveAxesToCssVars } from '../l0-tokens/scales'\n\n// color overrides — per-token overrides for advanced users\nexport type ThemeColorOverrides = {\n  '--gds-accent': string\n  '--gds-accent-fg': string\n  '--gds-accent-hover': string\n  '--gds-danger': string\n  '--gds-success': string\n  '--gds-warning': string\n}\n\nexport type ThemeMode = 'dark' | 'light' | 'system'\n\n// full theme state — what the user has configured\nexport type ThemeState = {\n  mode: ThemeMode\n  primaryColor: string  // single source — everything derived from this\n  presetId: string      // for UI display only (\"default\", \"teal\", \"amber\"...)\n  // dimensional axes — each constrained to L0 scale options\n  shape: ThemeShape\n  density: ThemeDensity\n  elevation: ThemeElevation\n  glass: ThemeGlass\n  motion: ThemeMotion\n  // optional per-token color overrides (advanced — overrides derivation)\n  colorOverrides: Partial<ThemeColorOverrides> | null\n}\n\n// default theme — beautiful out of the box\nexport const DEFAULT_THEME: ThemeState = {\n  mode: 'system',\n  primaryColor: DEFAULT_PRIMARY,\n  presetId: 'default',\n  shape: 'default',\n  density: 'default',\n  elevation: 'raised',\n  glass: 'full',\n  motion: 'full',\n  colorOverrides: null,\n}\n\n// jotai atoms — reactive theme state\nexport const themeAtom = atom<ThemeState>(DEFAULT_THEME)\n\nexport const resolvedModeAtom = atom<'dark' | 'light'>((get) => {\n  const { mode } = get(themeAtom)\n  if (mode !== 'system') return mode\n  if (typeof window === 'undefined') return 'dark'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches\n    ? 'dark'\n    : 'light'\n})\n\n// resolve theme state → flat CSS variable overrides\n// all colors derived from primaryColor via L0 functions — no manual color presets\nexport function resolveThemeCssVars(\n  state: ThemeState,\n  resolvedMode: 'dark' | 'light',\n): Record<string, string> {\n  // 1. derive colors from primaryColor\n  const palette = resolvedMode === 'dark'\n    ? deriveDarkPalette(state.primaryColor)\n    : deriveLightPalette(state.primaryColor)\n  const vars: Record<string, string> = { ...paletteToVars(palette, resolvedMode) }\n\n  // 2. font stacks + weights\n  Object.assign(vars, fontToCssVars())\n\n  // 3. dimensional axes — computed by L0 system functions\n  Object.assign(vars, resolveAxesToCssVars(\n    state.shape, state.density, state.elevation,\n    state.glass, state.motion, resolvedMode,\n  ))\n\n  // 4. per-token color overrides (highest priority — advanced users)\n  if (state.colorOverrides !== null) {\n    for (const [key, val] of Object.entries(state.colorOverrides)) {\n      if (val !== undefined) {\n        vars[key] = val\n      }\n    }\n  }\n\n  return vars\n}\n\n// apply resolved vars to document\nexport function applyThemeToDocument(\n  vars: Record<string, string>,\n  resolvedMode: 'dark' | 'light',\n  previousKeys?: string[],\n): string[] {\n  const root = document.documentElement\n\n  // clear previous overrides\n  if (previousKeys !== undefined) {\n    for (const key of previousKeys) {\n      root.style.removeProperty(key)\n    }\n  }\n\n  // set mode attribute\n  const mode = root.getAttribute('data-theme-mode')\n  if (mode !== resolvedMode) {\n    root.setAttribute('data-theme-mode', resolvedMode)\n  }\n\n  // apply new overrides\n  const keys = Object.keys(vars)\n  for (const [key, val] of Object.entries(vars)) {\n    root.style.setProperty(key, val)\n  }\n\n  return keys\n}\n\n// persistence keys\nconst STORAGE_KEY = 'gds-theme'\n\nexport function persistTheme(state: ThemeState): void {\n  try {\n    localStorage.setItem(STORAGE_KEY, JSON.stringify(state))\n  } catch {\n    // storage full or unavailable\n  }\n}\n\nexport function loadPersistedTheme(): ThemeState | null {\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY)\n    if (raw === null) return null\n    const parsed = JSON.parse(raw) as Partial<ThemeState>\n    // validate and merge with defaults to handle schema evolution\n    return {\n      ...DEFAULT_THEME,\n      ...parsed,\n      // validate primaryColor is a hex string\n      primaryColor: typeof parsed.primaryColor === 'string' && /^#[0-9a-fA-F]{6}$/.test(parsed.primaryColor)\n        ? parsed.primaryColor : DEFAULT_THEME.primaryColor,\n      // ensure constrained values are valid\n      shape: validateOption(parsed.shape, ['sharp', 'default', 'rounded'], DEFAULT_THEME.shape),\n      density: validateOption(parsed.density, ['compact', 'default', 'comfortable'], DEFAULT_THEME.density),\n      elevation: validateOption(parsed.elevation, ['flat', 'subtle', 'raised'], DEFAULT_THEME.elevation),\n      glass: validateOption(parsed.glass, ['off', 'subtle', 'full'], DEFAULT_THEME.glass),\n      motion: validateOption(parsed.motion, ['off', 'reduced', 'full'], DEFAULT_THEME.motion),\n      mode: validateOption(parsed.mode, ['light', 'dark', 'system'], DEFAULT_THEME.mode),\n    }\n  } catch {\n    return null\n  }\n}\n\nfunction validateOption<T extends string>(\n  value: unknown,\n  options: T[],\n  fallback: T,\n): T {\n  if (typeof value === 'string' && options.includes(value as T)) {\n    return value as T\n  }\n  return fallback\n}\n","// L1 — theme hooks\n// components use these to read/write theme state\n// all changes go through constrained API — no raw CSS manipulation\n\nimport { useAtom, useAtomValue } from 'jotai'\nimport { useCallback, useEffect, useRef } from 'react'\n\nimport type { ThemeDensity, ThemeElevation, ThemeGlass, ThemeMotion, ThemeShape } from '../l0-tokens/scales'\nimport type { ThemeColorOverrides, ThemeMode, ThemeState } from './theme'\nimport {\n  applyThemeToDocument,\n  DEFAULT_THEME,\n  loadPersistedTheme,\n  persistTheme,\n  resolvedModeAtom,\n  resolveThemeCssVars,\n  themeAtom,\n} from './theme'\n\n// color presets — app registers named presets, each is just a primaryColor\ntype ThemeConfig = {\n  colorPresets: Record<string, { primaryColor: string }>\n}\n\nlet themeConfig: ThemeConfig = { colorPresets: {} }\n\n// called once at app init — register named color presets\nexport function configureTheme(config: ThemeConfig): void {\n  themeConfig = config\n}\n\n// read current theme state (reactive)\nexport function useTheme(): ThemeState {\n  return useAtomValue(themeAtom)\n}\n\n// read resolved dark/light mode (reactive)\nexport function useResolvedMode(): 'dark' | 'light' {\n  return useAtomValue(resolvedModeAtom)\n}\n\n// theme mutation hooks — each returns a setter for one axis\nexport function useSetThemeMode(): (mode: ThemeMode) => void {\n  const [, setTheme] = useAtom(themeAtom)\n  return useCallback((mode: ThemeMode) => {\n    setTheme((prev) => ({ ...prev, mode }))\n  }, [setTheme])\n}\n\nexport function useSetThemePreset(): (presetId: string) => void {\n  const [, setTheme] = useAtom(themeAtom)\n  return useCallback((presetId: string) => {\n    const preset = themeConfig.colorPresets[presetId]\n    const primaryColor = preset?.primaryColor ?? DEFAULT_THEME.primaryColor\n    setTheme((prev) => ({ ...prev, presetId, primaryColor, colorOverrides: null }))\n  }, [setTheme])\n}\n\nexport function useSetThemePrimaryColor(): (color: string) => void {\n  const [, setTheme] = useAtom(themeAtom)\n  return useCallback((primaryColor: string) => {\n    setTheme((prev) => ({ ...prev, primaryColor, colorOverrides: null }))\n  }, [setTheme])\n}\n\nexport function useSetThemeShape(): (shape: ThemeShape) => void {\n  const [, setTheme] = useAtom(themeAtom)\n  return useCallback((shape: ThemeShape) => {\n    setTheme((prev) => ({ ...prev, shape }))\n  }, [setTheme])\n}\n\nexport function useSetThemeDensity(): (density: ThemeDensity) => void {\n  const [, setTheme] = useAtom(themeAtom)\n  return useCallback((density: ThemeDensity) => {\n    setTheme((prev) => ({ ...prev, density }))\n  }, [setTheme])\n}\n\nexport function useSetThemeElevation(): (elevation: ThemeElevation) => void {\n  const [, setTheme] = useAtom(themeAtom)\n  return useCallback((elevation: ThemeElevation) => {\n    setTheme((prev) => ({ ...prev, elevation }))\n  }, [setTheme])\n}\n\nexport function useSetThemeGlass(): (glass: ThemeGlass) => void {\n  const [, setTheme] = useAtom(themeAtom)\n  return useCallback((glass: ThemeGlass) => {\n    setTheme((prev) => ({ ...prev, glass }))\n  }, [setTheme])\n}\n\nexport function useSetThemeMotion(): (motion: ThemeMotion) => void {\n  const [, setTheme] = useAtom(themeAtom)\n  return useCallback((motion: ThemeMotion) => {\n    setTheme((prev) => ({ ...prev, motion }))\n  }, [setTheme])\n}\n\nexport function useSetThemeColors(): (overrides: Partial<ThemeColorOverrides> | null) => void {\n  const [, setTheme] = useAtom(themeAtom)\n  return useCallback((colorOverrides: Partial<ThemeColorOverrides> | null) => {\n    setTheme((prev) => ({ ...prev, colorOverrides }))\n  }, [setTheme])\n}\n\nexport function useResetTheme(): () => void {\n  const [, setTheme] = useAtom(themeAtom)\n  return useCallback(() => {\n    setTheme(DEFAULT_THEME)\n  }, [setTheme])\n}\n\n// side-effect hook: apply theme to DOM + persist + listen to system changes\n// call this ONCE in the app root\nexport function useThemeEffect(): void {\n  const theme = useAtomValue(themeAtom)\n  const resolvedMode = useAtomValue(resolvedModeAtom)\n  const prevKeysRef = useRef<string[]>([])\n\n  // apply to DOM whenever theme changes\n  useEffect(() => {\n    const vars = resolveThemeCssVars(theme, resolvedMode)\n    prevKeysRef.current = applyThemeToDocument(vars, resolvedMode, prevKeysRef.current)\n    persistTheme(theme)\n  }, [theme, resolvedMode])\n\n  // listen for system theme preference changes\n  useEffect(() => {\n    const mq = window.matchMedia('(prefers-color-scheme: dark)')\n    const handler = () => {\n      // trigger re-render via resolvedModeAtom re-evaluation\n      // jotai derived atoms auto-recompute, but we need to force it\n      // by touching the base atom (no-op write)\n    }\n    mq.addEventListener('change', handler)\n    return () => mq.removeEventListener('change', handler)\n  }, [])\n\n  // restore from localStorage on mount\n  useEffect(() => {\n    const persisted = loadPersistedTheme()\n    if (persisted !== null) {\n      // apply directly without going through atom to avoid flash\n      const vars = resolveThemeCssVars(persisted, resolvedMode)\n      prevKeysRef.current = applyThemeToDocument(vars, resolvedMode)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n}\n"],"mappings":"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"}

package/dist/utils/index.d.ts

@@ -6,5 +6,6 @@ export { applyInertia, useDrag, useLongPress, useSwipe } from './gesture';
 export { glassClass, glassSurface } from './glass';
 export { useClickOutside, useEscapeKey, useFocusTrap, useIsDesktop, useIsMobile, useMediaQuery, useScrollLock, } from './hooks';
 export { motionClass, motionClassWithSpeed } from './motion';
+export { renderPortal } from './portal';
 export type { Align, AsProps, ButtonProps, ComponentBase, DataAttributes, DataRecord, DivProps, GlassMotionProps, InputProps, MergeProps, MotionPreset, Orientation, PartialExcept, Placement, RequireKeys, Side, Size, SvgProps, VariantProps, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AACzC,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC9D,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACrE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AACzE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EACL,eAAe,EAAE,YAAY,EAAE,YAAY,EAC3C,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,GACxD,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAC5D,YAAY,EACV,KAAK,EACL,OAAO,EACP,WAAW,EACX,aAAa,EACb,cAAc,EACd,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,YAAY,GACb,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AACzC,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC9D,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACrE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AACzE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EACL,eAAe,EAAE,YAAY,EAAE,YAAY,EAC3C,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,GACxD,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,YAAY,EACV,KAAK,EACL,OAAO,EACP,WAAW,EACX,aAAa,EACb,cAAc,EACd,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,aAAa,EACb,SAAS,EACT,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,YAAY,GACb,MAAM,SAAS,CAAA"}

package/dist/utils/index.js

@@ -0,0 +1,7 @@
+import { n as e, r as t, t as n } from "../glass-CQTlX7IO.js";
+import { i as r, n as i, r as a, t as o } from "../motion-DUPegem-.js";
+import { t as s } from "../portal-Bbl6F_Wj.js";
+import { i as c, n as l, r as u, t as d } from "../dom-17XgfxMq.js";
+import { a as f, i as p, n as m, o as h, r as g, s as _, t as v } from "../hooks-BE-_EmDI.js";
+import { i as y, n as b, r as x, t as S } from "../gesture-BCGijGek.js";
+export { S as applyInertia, d as clamp, t as cx, a as focusCls, n as glassClass, e as glassSurface, l as isActivationKey, u as mergeRefs, o as motionClass, i as motionClassWithSpeed, s as renderPortal, r as srOnly, c as uid, v as useClickOutside, b as useDrag, m as useEscapeKey, g as useFocusTrap, p as useIsDesktop, f as useIsMobile, x as useLongPress, h as useMediaQuery, _ as useScrollLock, y as useSwipe };

package/dist/utils/portal.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode, ReactPortal } from 'react';
+export declare function renderPortal(children: ReactNode, container?: Element | null): ReactPortal | null;
+//# sourceMappingURL=portal.d.ts.map

package/dist/utils/portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../src/utils/portal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAKnD,wBAAgB,YAAY,CAC1B,QAAQ,EAAE,SAAS,EACnB,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,GACzB,WAAW,GAAG,IAAI,CAGpB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goliapkg/gds",
-  "version": "0.9.3",
+  "version": "0.9.5",
   "description": "GOLIA Design System — enterprise-grade UI component library with contextual depth, glass materials, AI-native structure, and 10 design principles",
   "license": "MIT",
   "type": "module",
@@ -36,6 +36,42 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./tokens": {
+      "import": "./dist/l0-tokens/index.js",
+      "types": "./dist/l0-tokens/index.d.ts"
+    },
+    "./systems": {
+      "import": "./dist/l1-systems/index.js",
+      "types": "./dist/l1-systems/index.d.ts"
+    },
+    "./primitives": {
+      "import": "./dist/l2-primitives/index.js",
+      "types": "./dist/l2-primitives/index.d.ts"
+    },
+    "./atoms": {
+      "import": "./dist/l3-atoms/index.js",
+      "types": "./dist/l3-atoms/index.d.ts"
+    },
+    "./molecules": {
+      "import": "./dist/l4-molecules/index.js",
+      "types": "./dist/l4-molecules/index.d.ts"
+    },
+    "./organisms": {
+      "import": "./dist/l5-organisms/index.js",
+      "types": "./dist/l5-organisms/index.d.ts"
+    },
+    "./charts": {
+      "import": "./dist/l6-charts/index.js",
+      "types": "./dist/l6-charts/index.d.ts"
+    },
+    "./patterns": {
+      "import": "./dist/l7-patterns/index.js",
+      "types": "./dist/l7-patterns/index.d.ts"
+    },
+    "./utils": {
+      "import": "./dist/utils/index.js",
+      "types": "./dist/utils/index.d.ts"
+    },
     "./tokens.css": "./dist/tokens.css",
     "./fonts.css": "./dist/fonts.css",
     "./package.json": "./package.json"