@goliapkg/gds 1.6.1 → 2.0.0

package/dist/spinner-DyrwL4JQ.js

@@ -0,0 +1,201 @@
+import { r as e, t } from "./glass-CQTlX7IO.js";
+import { r as n } from "./button-avu-rQU4.js";
+import { r } from "./motion-DUPegem-.js";
+import { forwardRef as i, useCallback as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/l2-primitives/input.tsx
+var l = n("w-full gds-radius-input border bg-bg text-fg transition-colors placeholder:text-fg-muted/50 outline-none disabled:cursor-not-allowed disabled:opacity-50 " + r, {
+	compoundVariants: [{
+		error: !0,
+		className: "focus-visible:ring-danger"
+	}],
+	defaultVariants: {
+		error: !1,
+		inputSize: "default"
+	},
+	variants: {
+		error: {
+			false: "border-border hover:border-border-strong",
+			true: "border-danger"
+		},
+		inputSize: {
+			default: "gds-h gds-text-body",
+			sm: "gds-h-sm gds-text-label"
+		}
+	}
+});
+function u() {
+	return /* @__PURE__ */ c("svg", {
+		className: "h-3.5 w-3.5 animate-spin text-fg-muted",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		children: [/* @__PURE__ */ s("circle", {
+			className: "opacity-25",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "4"
+		}), /* @__PURE__ */ s("path", {
+			className: "opacity-75",
+			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z",
+			fill: "currentColor"
+		})]
+	});
+}
+function d() {
+	return /* @__PURE__ */ s("svg", {
+		className: "h-3.5 w-3.5",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		viewBox: "0 0 24 24",
+		children: /* @__PURE__ */ s("path", {
+			d: "M18 6L6 18M6 6l12 12",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function f({ copied: e }) {
+	return e ? /* @__PURE__ */ s("svg", {
+		className: "h-3.5 w-3.5 text-success",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		viewBox: "0 0 24 24",
+		children: /* @__PURE__ */ s("path", {
+			d: "M20 6L9 17l-5-5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	}) : /* @__PURE__ */ c("svg", {
+		className: "h-3.5 w-3.5",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		viewBox: "0 0 24 24",
+		children: [/* @__PURE__ */ s("rect", {
+			x: "9",
+			y: "9",
+			width: "13",
+			height: "13",
+			rx: "2",
+			ry: "2"
+		}), /* @__PURE__ */ s("path", {
+			d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	});
+}
+var p = i(function({ className: n, clearable: r, copyable: i, error: p, glass: m, icon: h, inputSize: g, loading: _, onClear: v, rightIcon: y, value: b, prefix: x, suffix: S, action: C, ...w }, T) {
+	let [E, D] = o(!1), O = a(() => {
+		b !== void 0 && navigator.clipboard.writeText(String(b)).then(() => {
+			D(!0), setTimeout(() => D(!1), 2e3);
+		}).catch(() => {});
+	}, [b]), k = h !== void 0, A = x !== void 0, j = S !== void 0, M = r === !0 && b !== void 0 && b !== "", N = i === !0, P = _ === !0, F = y !== void 0 || M || P || N || C !== void 0, I = [];
+	C !== void 0 && I.push(C), N && I.push(/* @__PURE__ */ s("button", {
+		"aria-label": E ? "Copied" : "Copy to clipboard",
+		className: "text-fg-muted/50 hover:text-fg-muted transition-colors",
+		onClick: O,
+		tabIndex: -1,
+		type: "button",
+		children: /* @__PURE__ */ s(f, { copied: E })
+	}, "copy")), P && I.push(/* @__PURE__ */ s(u, {}, "spin")), M && I.push(/* @__PURE__ */ s("button", {
+		"aria-label": "Clear",
+		className: "text-fg-muted/50 hover:text-fg-muted transition-colors",
+		onClick: v,
+		tabIndex: -1,
+		type: "button",
+		children: /* @__PURE__ */ s(d, {})
+	}, "clear")), y !== void 0 && !M && !P && I.push(y);
+	let L = k || F || A || j, R = t(m), z = m === !0 ? "border-white/10 bg-bg/60" : "";
+	return L ? /* @__PURE__ */ c("div", {
+		className: e("relative flex items-center", (A || j) && "gds-radius-input border border-border overflow-hidden bg-bg", (A || j) && p === !0 && "border-danger", (A || j) && R, (A || j) && z),
+		"data-component": "input",
+		children: [
+			A && /* @__PURE__ */ s("span", {
+				className: "shrink-0 bg-bg-secondary gds-pad-x gds-text-body text-fg-muted select-none border-r border-border flex items-center self-stretch",
+				children: x
+			}),
+			k && !A && /* @__PURE__ */ s("span", {
+				className: "absolute top-1/2 left-2.5 -translate-y-1/2 text-fg-muted/50 gds-icon-child-sm",
+				children: h
+			}),
+			/* @__PURE__ */ s("input", {
+				className: e(A || j ? "flex-1 min-w-0 bg-transparent text-fg gds-text-body outline-none gds-pad-x disabled:cursor-not-allowed disabled:opacity-50 placeholder:text-fg-muted/50 " + (g === "sm" ? "gds-h-sm gds-text-label" : "gds-h") : l({
+					error: p,
+					inputSize: g
+				}), !A && k ? "pl-8" : A ? "" : "gds-pad-x", F ? "pr-8" : j ? "" : "gds-pad-x", !A && !j && R, !A && !j && z, !A && !j && n),
+				ref: T,
+				value: b,
+				...w
+			}),
+			j && /* @__PURE__ */ s("span", {
+				className: "shrink-0 bg-bg-secondary gds-pad-x gds-text-body text-fg-muted select-none border-l border-border flex items-center self-stretch",
+				children: S
+			}),
+			F && !j && /* @__PURE__ */ s("span", {
+				className: "absolute top-1/2 right-2.5 -translate-y-1/2 flex items-center gap-1.5 text-fg-muted/50 gds-icon-child-sm",
+				children: I
+			}),
+			F && j && /* @__PURE__ */ s("span", {
+				className: "shrink-0 flex items-center gap-1.5 pr-2.5 text-fg-muted/50 gds-icon-child-sm",
+				children: I
+			})
+		]
+	}) : /* @__PURE__ */ s("input", {
+		className: e(l({
+			error: p,
+			inputSize: g
+		}), "gds-pad-x", R, z, n),
+		"data-component": "input",
+		ref: T,
+		value: b,
+		...w
+	});
+}), m = i(function({ children: t, className: n, required: r = !1, ...i }, a) {
+	return /* @__PURE__ */ c("label", {
+		className: e("block select-none gds-text-body font-medium text-fg", n),
+		"data-component": "label",
+		ref: a,
+		...i,
+		children: [t, r && /* @__PURE__ */ s("span", {
+			className: "ml-0.5 text-danger",
+			children: "*"
+		})]
+	});
+}), h = n("animate-spin text-accent", {
+	defaultVariants: { size: "default" },
+	variants: { size: {
+		default: "gds-icon",
+		lg: "gds-icon-lg",
+		sm: "gds-icon-sm"
+	} }
+}), g = i(function({ className: t, size: n }, r) {
+	return /* @__PURE__ */ c("svg", {
+		className: e(h({ size: n }), t),
+		"data-component": "spinner",
+		fill: "none",
+		ref: r,
+		role: "status",
+		viewBox: "0 0 24 24",
+		children: [/* @__PURE__ */ s("circle", {
+			className: "opacity-25",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "4"
+		}), /* @__PURE__ */ s("path", {
+			className: "opacity-75",
+			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z",
+			fill: "currentColor"
+		})]
+	});
+});
+//#endregion
+export { l as a, p as i, h as n, m as r, g as t };
+
+//# sourceMappingURL=spinner-DyrwL4JQ.js.map

package/dist/spinner-DyrwL4JQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-DyrwL4JQ.js","names":[],"sources":["../src/l2-primitives/input.tsx","../src/l2-primitives/label.tsx","../src/l2-primitives/spinner.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { ReactNode } from 'react'\nimport { forwardRef, useCallback, useState } from 'react'\n\nimport { focusCls } from '../utils/a11y'\nimport { cx } from '../utils/cx'\nimport { glassClass } from '../utils/glass'\nimport type { VariantProps } from '../utils/types'\n\nconst inputVariants = cva(\n  'w-full gds-radius-input border bg-bg text-fg transition-colors placeholder:text-fg-muted/50 outline-none disabled:cursor-not-allowed disabled:opacity-50 ' +\n    focusCls,\n  {\n    compoundVariants: [\n      {\n        error: true,\n        className: 'focus-visible:ring-danger',\n      },\n    ],\n    defaultVariants: {\n      error: false,\n      inputSize: 'default',\n    },\n    variants: {\n      error: {\n        false: 'border-border hover:border-border-strong',\n        true: 'border-danger',\n      },\n      inputSize: {\n        default: 'gds-h gds-text-body',\n        sm: 'gds-h-sm gds-text-label',\n      },\n    },\n  },\n)\n\ntype InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> &\n  VariantProps<typeof inputVariants> & {\n    /** Height and text scale preset (named inputSize to avoid HTML conflict) */\n    inputSize?: 'default' | 'sm'\n    /** Show red border for validation error state */\n    error?: boolean\n    /** Show clear button when input has value */\n    clearable?: boolean\n    /** Enable frosted glass translucency effect */\n    glass?: boolean\n    /** Icon element rendered on the left side */\n    icon?: ReactNode\n    /** Show spinner on the right side */\n    loading?: boolean\n    /** Callback when clear button is clicked */\n    onClear?: () => void\n    /** Icon element rendered on the right side */\n    rightIcon?: ReactNode\n    /** v2: static prefix text (e.g. \"https://\") */\n    prefix?: string\n    /** v2: static suffix text (e.g. \".example.com\") */\n    suffix?: string\n    /** v2: show copy button that copies value to clipboard */\n    copyable?: boolean\n    /** v2: custom action element rendered inside input (right side) */\n    action?: ReactNode\n  }\n\n// inline spinner SVG (no lucide dependency at L2)\nfunction InlineSpinner() {\n  return (\n    <svg className=\"h-3.5 w-3.5 animate-spin text-fg-muted\" fill=\"none\" viewBox=\"0 0 24 24\">\n      <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n      <path className=\"opacity-75\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\" fill=\"currentColor\" />\n    </svg>\n  )\n}\n\n// inline X SVG for clear button\nfunction InlineClear() {\n  return (\n    <svg className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n      <path d=\"M18 6L6 18M6 6l12 12\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\n// inline copy icon\nfunction InlineCopy({ copied }: { copied: boolean }) {\n  if (copied) {\n    return (\n      <svg className=\"h-3.5 w-3.5 text-success\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n        <path d=\"M20 6L9 17l-5-5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    )\n  }\n  return (\n    <svg className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n      <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" />\n      <path d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  function Input(\n    { className, clearable, copyable, error, glass, icon, inputSize, loading, onClear, rightIcon, value, prefix, suffix, action, ...props },\n    ref,\n  ) {\n    const [copied, setCopied] = useState(false)\n\n    const handleCopy = useCallback(() => {\n      if (value === undefined) return\n      navigator.clipboard.writeText(String(value)).then(() => {\n        setCopied(true)\n        setTimeout(() => setCopied(false), 2000)\n      }).catch(() => {\n        // clipboard not available\n      })\n    }, [value])\n\n    const hasLeft = icon !== undefined\n    const hasPrefix = prefix !== undefined\n    const hasSuffix = suffix !== undefined\n    const showClear = clearable === true && value !== undefined && value !== ''\n    const showCopy = copyable === true\n    const showLoading = loading === true\n    const hasRight = rightIcon !== undefined || showClear || showLoading || showCopy || action !== undefined\n\n    // rightmost elements stack: action > copy > loading > clear > rightIcon\n    const rightElements: ReactNode[] = []\n    if (action !== undefined) rightElements.push(action)\n    if (showCopy) {\n      rightElements.push(\n        <button\n          key=\"copy\"\n          aria-label={copied ? 'Copied' : 'Copy to clipboard'}\n          className=\"text-fg-muted/50 hover:text-fg-muted transition-colors\"\n          onClick={handleCopy}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <InlineCopy copied={copied} />\n        </button>,\n      )\n    }\n    if (showLoading) rightElements.push(<InlineSpinner key=\"spin\" />)\n    if (showClear) {\n      rightElements.push(\n        <button\n          key=\"clear\"\n          aria-label=\"Clear\"\n          className=\"text-fg-muted/50 hover:text-fg-muted transition-colors\"\n          onClick={onClear}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          <InlineClear />\n        </button>,\n      )\n    }\n    if (rightIcon !== undefined && !showClear && !showLoading) rightElements.push(rightIcon)\n\n    const needsWrapper = hasLeft || hasRight || hasPrefix || hasSuffix\n    const glsCls = glassClass(glass)\n    const glsExtra = glass === true ? 'border-white/10 bg-bg/60' : ''\n\n    if (!needsWrapper) {\n      return (\n        <input\n          className={cx(\n            inputVariants({ error, inputSize }),\n            'gds-pad-x',\n            glsCls,\n            glsExtra,\n            className,\n          )}\n          data-component=\"input\"\n          ref={ref}\n          value={value}\n          {...props}\n        />\n      )\n    }\n\n    return (\n      <div\n        className={cx(\n          'relative flex items-center',\n          (hasPrefix || hasSuffix) && 'gds-radius-input border border-border overflow-hidden bg-bg',\n          (hasPrefix || hasSuffix) && error === true && 'border-danger',\n          (hasPrefix || hasSuffix) && glsCls,\n          (hasPrefix || hasSuffix) && glsExtra,\n        )}\n        data-component=\"input\"\n      >\n        {hasPrefix && (\n          <span className=\"shrink-0 bg-bg-secondary gds-pad-x gds-text-body text-fg-muted select-none border-r border-border flex items-center self-stretch\">\n            {prefix}\n          </span>\n        )}\n        {hasLeft && !hasPrefix && (\n          <span className=\"absolute top-1/2 left-2.5 -translate-y-1/2 text-fg-muted/50 gds-icon-child-sm\">\n            {icon}\n          </span>\n        )}\n        <input\n          className={cx(\n            (hasPrefix || hasSuffix)\n              ? 'flex-1 min-w-0 bg-transparent text-fg gds-text-body outline-none gds-pad-x disabled:cursor-not-allowed disabled:opacity-50 placeholder:text-fg-muted/50 ' + (inputSize === 'sm' ? 'gds-h-sm gds-text-label' : 'gds-h')\n              : inputVariants({ error, inputSize }),\n            !hasPrefix && hasLeft ? 'pl-8' : !hasPrefix ? 'gds-pad-x' : '',\n            hasRight ? 'pr-8' : !hasSuffix ? 'gds-pad-x' : '',\n            !hasPrefix && !hasSuffix && glsCls,\n            !hasPrefix && !hasSuffix && glsExtra,\n            !hasPrefix && !hasSuffix && className,\n          )}\n          ref={ref}\n          value={value}\n          {...props}\n        />\n        {hasSuffix && (\n          <span className=\"shrink-0 bg-bg-secondary gds-pad-x gds-text-body text-fg-muted select-none border-l border-border flex items-center self-stretch\">\n            {suffix}\n          </span>\n        )}\n        {hasRight && !hasSuffix && (\n          <span className=\"absolute top-1/2 right-2.5 -translate-y-1/2 flex items-center gap-1.5 text-fg-muted/50 gds-icon-child-sm\">\n            {rightElements}\n          </span>\n        )}\n        {hasRight && hasSuffix && (\n          <span className=\"shrink-0 flex items-center gap-1.5 pr-2.5 text-fg-muted/50 gds-icon-child-sm\">\n            {rightElements}\n          </span>\n        )}\n      </div>\n    )\n  },\n)\n\nexport { inputVariants }\nexport type { InputProps }\n","import { forwardRef } from 'react'\n\nimport { cx } from '../utils/cx'\n\ntype LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n  required?: boolean\n}\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n  function Label({ children, className, required = false, ...props }, ref) {\n    return (\n      <label\n        className={cx('block select-none gds-text-body font-medium text-fg', className)}\n        data-component=\"label\"\n        ref={ref}\n        {...props}\n      >\n        {children}\n        {required && <span className=\"ml-0.5 text-danger\">*</span>}\n      </label>\n    )\n  },\n)\n\nexport type { LabelProps }\n","import { cva } from 'class-variance-authority'\nimport { forwardRef } from 'react'\n\nimport { cx } from '../utils/cx'\nimport type { VariantProps } from '../utils/types'\n\nconst spinnerVariants = cva('animate-spin text-accent', {\n  defaultVariants: { size: 'default' },\n  variants: {\n    size: {\n      default: 'gds-icon',\n      lg: 'gds-icon-lg',\n      sm: 'gds-icon-sm',\n    },\n  },\n})\n\ntype SpinnerProps = VariantProps<typeof spinnerVariants> & {\n  className?: string\n}\n\nexport const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(\n  function Spinner({ className, size }, ref) {\n    return (\n      <svg\n        className={cx(spinnerVariants({ size }), className)}\n        data-component=\"spinner\"\n        fill=\"none\"\n        ref={ref}\n        role=\"status\"\n        viewBox=\"0 0 24 24\"\n      >\n        <circle\n          className=\"opacity-25\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          strokeWidth=\"4\"\n        />\n        <path\n          className=\"opacity-75\"\n          d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    )\n  }\n)\n\nexport { spinnerVariants }\nexport type { SpinnerProps }\n"],"mappings":"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"}

package/dist/stepper-DKJuH1ws.js

@@ -0,0 +1,199 @@
+import { r as e, t } from "./glass-CQTlX7IO.js";
+import { r as n } from "./motion-DUPegem-.js";
+import { r } from "./dom-17XgfxMq.js";
+import { n as i, r as a, s as o } from "./hooks-BE-_EmDI.js";
+import { createContext as s, forwardRef as c, useContext as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/l4-molecules/accordion.tsx
+var p = s({
+	expanded: [],
+	toggle: () => {}
+});
+function m({ children: t, type: n = "single", defaultExpanded: r = [], className: i }) {
+	let [a, o] = u(r), s = (e) => {
+		o((t) => t.includes(e) ? t.filter((t) => t !== e) : n === "single" ? [e] : [...t, e]);
+	};
+	function c(e) {
+		if (e.key !== "ArrowUp" && e.key !== "ArrowDown" && e.key !== "Home" && e.key !== "End") return;
+		let t = Array.from(e.currentTarget.querySelectorAll("button[aria-expanded]")), n = t.indexOf(e.target);
+		if (n < 0) return;
+		e.preventDefault();
+		let r = n;
+		e.key === "ArrowDown" ? r = (n + 1) % t.length : e.key === "ArrowUp" ? r = (n - 1 + t.length) % t.length : e.key === "Home" ? r = 0 : e.key === "End" && (r = t.length - 1), t[r]?.focus();
+	}
+	return /* @__PURE__ */ d("div", {
+		className: e("divide-y divide-border", i),
+		"data-component": "accordion",
+		onKeyDown: c,
+		children: /* @__PURE__ */ d(p.Provider, {
+			value: {
+				expanded: a,
+				toggle: s
+			},
+			children: t
+		})
+	});
+}
+function h({ id: t, title: r, children: i, disabled: a, className: o }) {
+	let { expanded: s, toggle: c } = l(p), u = s.includes(t);
+	return /* @__PURE__ */ f("div", {
+		className: e(o),
+		"data-state": u ? "open" : "closed",
+		children: [/* @__PURE__ */ f("button", {
+			type: "button",
+			disabled: a,
+			onClick: () => c(t),
+			className: e("flex w-full items-center justify-between gds-pad-y-lg text-left text-sm font-medium text-fg transition-colors", n, a === !0 && "pointer-events-none opacity-40"),
+			"aria-expanded": u,
+			children: [/* @__PURE__ */ d("span", { children: r }), /* @__PURE__ */ d("svg", {
+				width: "14",
+				height: "14",
+				viewBox: "0 0 14 14",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				className: e("shrink-0 transition-transform duration-200", u && "rotate-180"),
+				children: /* @__PURE__ */ d("path", { d: "M3.5 5.5l3.5 3 3.5-3" })
+			})]
+		}), u && /* @__PURE__ */ d("div", {
+			className: "pb-3 gds-text-body text-fg-muted",
+			children: i
+		})]
+	});
+}
+//#endregion
+//#region src/l4-molecules/progress-steps.tsx
+var g = c(function({ className: t, current: n, steps: r }, i) {
+	return /* @__PURE__ */ d("div", {
+		ref: i,
+		className: e("flex items-center", t),
+		"data-component": "progress-steps",
+		role: "list",
+		children: r.map((t, i) => {
+			let a = i < n, o = i === n;
+			return /* @__PURE__ */ f("div", {
+				className: "flex flex-1 items-center",
+				role: "listitem",
+				children: [/* @__PURE__ */ f("div", {
+					className: "flex flex-col items-center gap-1",
+					children: [/* @__PURE__ */ d("div", {
+						className: e("flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium", a && "bg-accent text-accent-fg", o && "border-2 border-accent bg-accent/10 text-accent", !a && !o && "border border-border bg-bg-secondary text-fg-muted"),
+						children: a ? /* @__PURE__ */ d("svg", {
+							className: "h-3.5 w-3.5",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor",
+							strokeWidth: 3,
+							children: /* @__PURE__ */ d("path", {
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								d: "M5 13l4 4L19 7"
+							})
+						}) : i + 1
+					}), /* @__PURE__ */ d("span", {
+						className: e("text-center gds-text-caption", o ? "font-medium text-fg" : "text-fg-muted"),
+						children: t
+					})]
+				}), i < r.length - 1 && /* @__PURE__ */ d("div", { className: e("mx-2 h-px flex-1", a ? "bg-accent" : "bg-border") })]
+			}, `${t}-${i}`);
+		})
+	});
+}), _ = c(function({ open: n, onClose: s, children: c, side: l = "right", title: u, description: p, glass: m, width: h = 320, className: g }, _) {
+	let v = a(n);
+	if (o(n), i(n, s), !n) return null;
+	let y = l === "right", b = { width: typeof h == "number" ? `${h}px` : h };
+	return /* @__PURE__ */ d("div", {
+		className: "fixed inset-0 z-50 bg-black/50",
+		onClick: (e) => {
+			e.target === e.currentTarget && s();
+		},
+		"data-component": "sheet",
+		"data-state": "open",
+		children: /* @__PURE__ */ f("div", {
+			ref: r(_, v),
+			style: b,
+			className: e("gds-ctx fixed bottom-0 top-0 flex flex-col border gds-shadow-xl transition-transform duration-200", y ? "right-0 border-l" : "left-0 border-r", m ? e(t(m), "border-white/10 bg-bg/60") : "border-border bg-surface", g),
+			children: [(u !== void 0 || p !== void 0) && /* @__PURE__ */ f("div", {
+				className: "flex items-start justify-between gds-gap border-b border-border gds-pad-x-lg gds-pad-y-lg",
+				children: [/* @__PURE__ */ f("div", {
+					className: "min-w-0",
+					children: [u !== void 0 && /* @__PURE__ */ d("h2", {
+						className: "text-sm font-semibold text-fg",
+						children: u
+					}), p !== void 0 && /* @__PURE__ */ d("p", {
+						className: "mt-0.5 gds-text-body text-fg-muted",
+						children: p
+					})]
+				}), /* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: s,
+					className: e("shrink-0 gds-radius-button p-1 text-fg-muted hover:text-fg", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-bg"),
+					"aria-label": "Close",
+					children: /* @__PURE__ */ d("svg", {
+						width: "14",
+						height: "14",
+						viewBox: "0 0 14 14",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						children: /* @__PURE__ */ d("path", { d: "M3 3l8 8M11 3l-8 8" })
+					})
+				})]
+			}), /* @__PURE__ */ d("div", {
+				className: "flex-1 overflow-y-auto gds-pad-x-lg gds-pad-y-lg",
+				children: c
+			})]
+		})
+	});
+}), v = /* @__PURE__ */ d("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 14 14",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: /* @__PURE__ */ d("path", { d: "M3 7.5l3 3 5-6" })
+}), y = c(function({ steps: t, current: n, orientation: r = "horizontal", className: i, ...a }, o) {
+	let s = r === "horizontal";
+	return /* @__PURE__ */ d("div", {
+		ref: o,
+		className: e("flex", s ? "items-start" : "flex-col", i),
+		"data-component": "stepper",
+		role: "list",
+		...a,
+		children: t.map((r, i) => {
+			let a = i < n, o = i === n;
+			return /* @__PURE__ */ f("div", {
+				className: e("flex", s ? "flex-1 items-center" : "items-start"),
+				role: "listitem",
+				children: [/* @__PURE__ */ f("div", {
+					className: e("flex", s ? "flex-col items-center" : "items-start gds-gap"),
+					children: [/* @__PURE__ */ d("div", {
+						className: "flex items-center",
+						children: /* @__PURE__ */ d("div", {
+							className: e("flex gds-sq-sm shrink-0 items-center justify-center gds-radius-badge gds-text-body font-medium transition-colors", a && "bg-accent text-accent-fg", o && "border-2 border-accent bg-transparent text-accent ring-2 ring-accent/20", !a && !o && "bg-bg-tertiary text-fg-muted"),
+							children: a ? v : i + 1
+						})
+					}), /* @__PURE__ */ f("div", {
+						className: e(s ? "mt-2 text-center" : ""),
+						children: [/* @__PURE__ */ d("p", {
+							className: e("gds-text-body font-medium", o ? "text-fg" : "text-fg-muted"),
+							children: r.label
+						}), r.description !== void 0 && /* @__PURE__ */ d("p", {
+							className: "mt-0.5 gds-text-caption text-fg-muted",
+							children: r.description
+						})]
+					})]
+				}), i < t.length - 1 && (s ? /* @__PURE__ */ d("div", { className: e("mx-2 mt-3.5 h-px flex-1", a ? "bg-accent" : "bg-border") }) : /* @__PURE__ */ d("div", { className: e("ml-3.5 mt-1 mb-1 w-px", "min-h-6", a ? "bg-accent" : "bg-border") }))]
+			}, `${r.label}-${i}`);
+		})
+	});
+});
+//#endregion
+export { h as a, m as i, _ as n, g as r, y as t };
+
+//# sourceMappingURL=stepper-DKJuH1ws.js.map

package/dist/stepper-DKJuH1ws.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-DKJuH1ws.js","names":[],"sources":["../src/l4-molecules/accordion.tsx","../src/l4-molecules/progress-steps.tsx","../src/l4-molecules/sheet.tsx","../src/l4-molecules/stepper.tsx"],"sourcesContent":["// accordion — expandable sections with single/multiple mode\nimport type { KeyboardEvent, ReactNode } from 'react'\nimport { createContext, useContext, useState } from 'react'\n\nimport { focusCls } from '../utils/a11y'\nimport { cx } from '../utils/cx'\n\ntype AccordionType = 'multiple' | 'single'\n\ntype AccordionContextValue = {\n  expanded: string[]\n  toggle: (id: string) => void\n}\n\nconst AccordionContext = createContext<AccordionContextValue>({\n  expanded: [],\n  toggle: () => {},\n})\n\nexport type AccordionProps = {\n  children: ReactNode\n  type?: AccordionType\n  defaultExpanded?: string[]\n  className?: string\n}\n\nexport function Accordion({ children, type = 'single', defaultExpanded = [], className }: AccordionProps) {\n  const [expanded, setExpanded] = useState<string[]>(defaultExpanded)\n\n  const toggle = (id: string) => {\n    setExpanded((prev) => {\n      const isOpen = prev.includes(id)\n      if (isOpen) return prev.filter((x) => x !== id)\n      if (type === 'single') return [id]\n      return [...prev, id]\n    })\n  }\n\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown' && e.key !== 'Home' && e.key !== 'End') {\n      return\n    }\n    const triggers = Array.from(\n      e.currentTarget.querySelectorAll<HTMLButtonElement>('button[aria-expanded]'),\n    )\n    const current = triggers.indexOf(e.target as HTMLButtonElement)\n    if (current < 0) return\n\n    e.preventDefault()\n    let nextIndex = current\n    if (e.key === 'ArrowDown') {\n      nextIndex = (current + 1) % triggers.length\n    } else if (e.key === 'ArrowUp') {\n      nextIndex = (current - 1 + triggers.length) % triggers.length\n    } else if (e.key === 'Home') {\n      nextIndex = 0\n    } else if (e.key === 'End') {\n      nextIndex = triggers.length - 1\n    }\n    triggers[nextIndex]?.focus()\n  }\n\n  return (\n    <div className={cx('divide-y divide-border', className)} data-component=\"accordion\" onKeyDown={handleKeyDown}>\n      <AccordionContext.Provider value={{ expanded, toggle }}>\n        {children}\n      </AccordionContext.Provider>\n    </div>\n  )\n}\n\nexport type AccordionItemProps = {\n  id: string\n  title: string\n  children: ReactNode\n  disabled?: boolean\n  className?: string\n}\n\nexport function AccordionItem({ id, title, children, disabled, className }: AccordionItemProps) {\n  const { expanded, toggle } = useContext(AccordionContext)\n  const isOpen = expanded.includes(id)\n\n  return (\n    <div className={cx(className)} data-state={isOpen ? 'open' : 'closed'}>\n      <button\n        type=\"button\"\n        disabled={disabled}\n        onClick={() => toggle(id)}\n        className={cx(\n          'flex w-full items-center justify-between gds-pad-y-lg text-left text-sm font-medium text-fg transition-colors',\n          focusCls,\n          disabled === true && 'pointer-events-none opacity-40',\n        )}\n        aria-expanded={isOpen}\n      >\n        <span>{title}</span>\n        <svg\n          width=\"14\"\n          height=\"14\"\n          viewBox=\"0 0 14 14\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          className={cx('shrink-0 transition-transform duration-200', isOpen && 'rotate-180')}\n        >\n          <path d=\"M3.5 5.5l3.5 3 3.5-3\" />\n        </svg>\n      </button>\n      {isOpen && (\n        <div className=\"pb-3 gds-text-body text-fg-muted\">{children}</div>\n      )}\n    </div>\n  )\n}\n","// progress-steps — linear progress indicator with labeled steps\nimport { forwardRef } from 'react'\n\nimport { cx } from '../utils/cx'\n\ntype ProgressStepsProps = {\n  className?: string\n  current: number\n  steps: string[]\n}\n\nexport const ProgressSteps = forwardRef<HTMLDivElement, ProgressStepsProps>(\n  function ProgressSteps({ className, current, steps }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={cx('flex items-center', className)}\n        data-component=\"progress-steps\"\n        role=\"list\"\n      >\n        {steps.map((label, i) => {\n          const isCompleted = i < current\n          const isCurrent = i === current\n\n          return (\n            <div key={`${label}-${i}`} className=\"flex flex-1 items-center\" role=\"listitem\">\n              <div className=\"flex flex-col items-center gap-1\">\n                <div\n                  className={cx(\n                    'flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium',\n                    isCompleted && 'bg-accent text-accent-fg',\n                    isCurrent && 'border-2 border-accent bg-accent/10 text-accent',\n                    !isCompleted && !isCurrent && 'border border-border bg-bg-secondary text-fg-muted',\n                  )}\n                >\n                  {isCompleted ? (\n                    <svg className=\"h-3.5 w-3.5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={3}>\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n                    </svg>\n                  ) : (\n                    i + 1\n                  )}\n                </div>\n                <span className={cx(\n                  'text-center gds-text-caption',\n                  isCurrent ? 'font-medium text-fg' : 'text-fg-muted',\n                )}>\n                  {label}\n                </span>\n              </div>\n              {i < steps.length - 1 && (\n                <div className={cx(\n                  'mx-2 h-px flex-1',\n                  isCompleted ? 'bg-accent' : 'bg-border',\n                )} />\n              )}\n            </div>\n          )\n        })}\n      </div>\n    )\n  },\n)\n\nexport type { ProgressStepsProps }\n","// sheet — side panel overlay with slide transition\nimport type { CSSProperties, ReactNode } from 'react'\nimport { forwardRef } from 'react'\n\nimport { focusCls } from '../utils/a11y'\nimport { cx } from '../utils/cx'\nimport { mergeRefs } from '../utils/dom'\nimport { glassClass } from '../utils/glass'\nimport { useEscapeKey, useFocusTrap, useScrollLock } from '../utils/hooks'\n\ntype SheetSide = 'left' | 'right'\n\nexport type SheetProps = {\n  open: boolean\n  onClose: () => void\n  children: ReactNode\n  side?: SheetSide\n  title?: string\n  description?: string\n  glass?: boolean\n  width?: number | string\n  className?: string\n}\n\nexport const Sheet = forwardRef<HTMLDivElement, SheetProps>(\n  function Sheet({ open, onClose, children, side = 'right', title, description, glass, width = 320, className }, ref) {\n    const trapRef = useFocusTrap(open)\n    useScrollLock(open)\n    useEscapeKey(open, onClose)\n\n    if (!open) return null\n\n    const isRight = side === 'right'\n    const style: CSSProperties = { width: typeof width === 'number' ? `${width}px` : width }\n\n    return (\n      <div\n        className=\"fixed inset-0 z-50 bg-black/50\"\n        onClick={(e) => { if (e.target === e.currentTarget) onClose() }}\n        data-component=\"sheet\"\n        data-state=\"open\"\n      >\n        <div\n          ref={mergeRefs(ref, trapRef)}\n          style={style}\n          className={cx(\n            'gds-ctx fixed bottom-0 top-0 flex flex-col border gds-shadow-xl transition-transform duration-200',\n            isRight ? 'right-0 border-l' : 'left-0 border-r',\n            glass ? cx(glassClass(glass), 'border-white/10 bg-bg/60') : 'border-border bg-surface',\n            className,\n          )}\n        >\n          {(title !== undefined || description !== undefined) && (\n            <div className=\"flex items-start justify-between gds-gap border-b border-border gds-pad-x-lg gds-pad-y-lg\">\n              <div className=\"min-w-0\">\n                {title !== undefined && <h2 className=\"text-sm font-semibold text-fg\">{title}</h2>}\n                {description !== undefined && <p className=\"mt-0.5 gds-text-body text-fg-muted\">{description}</p>}\n              </div>\n              <button\n                type=\"button\"\n                onClick={onClose}\n                className={cx('shrink-0 gds-radius-button p-1 text-fg-muted hover:text-fg', focusCls)}\n                aria-label=\"Close\"\n              >\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              </button>\n            </div>\n          )}\n          <div className=\"flex-1 overflow-y-auto gds-pad-x-lg gds-pad-y-lg\">{children}</div>\n        </div>\n      </div>\n    )\n  },\n)\n","// stepper — multi-step progress indicator with connecting lines\nimport { forwardRef } from 'react'\n\nimport { cx } from '../utils/cx'\n\nexport type StepDef = {\n  label: string\n  description?: string\n}\n\nexport type StepperProps = React.HTMLAttributes<HTMLDivElement> & {\n  steps: StepDef[]\n  current: number\n  orientation?: 'horizontal' | 'vertical'\n}\n\nconst checkSvg = (\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <path d=\"M3 7.5l3 3 5-6\" />\n  </svg>\n)\n\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(\n  function Stepper({ steps, current, orientation = 'horizontal', className, ...props }, ref) {\n    const isHoriz = orientation === 'horizontal'\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          'flex',\n          isHoriz ? 'items-start' : 'flex-col',\n          className,\n        )}\n        data-component=\"stepper\"\n        role=\"list\"\n        {...props}\n      >\n        {steps.map((step, i) => {\n          const completed = i < current\n          const active = i === current\n\n          return (\n            <div\n              key={`${step.label}-${i}`}\n              className={cx(\n                'flex',\n                isHoriz ? 'flex-1 items-center' : 'items-start',\n              )}\n              role=\"listitem\"\n            >\n              <div className={cx('flex', isHoriz ? 'flex-col items-center' : 'items-start gds-gap')}>\n                <div className=\"flex items-center\">\n                  {/* step circle */}\n                  <div\n                    className={cx(\n                      'flex gds-sq-sm shrink-0 items-center justify-center gds-radius-badge gds-text-body font-medium transition-colors',\n                      completed && 'bg-accent text-accent-fg',\n                      active && 'border-2 border-accent bg-transparent text-accent ring-2 ring-accent/20',\n                      !completed && !active && 'bg-bg-tertiary text-fg-muted',\n                    )}\n                  >\n                    {completed ? checkSvg : i + 1}\n                  </div>\n                </div>\n                {/* label + description */}\n                <div className={cx(isHoriz ? 'mt-2 text-center' : '')}>\n                  <p className={cx('gds-text-body font-medium', active ? 'text-fg' : 'text-fg-muted')}>{step.label}</p>\n                  {step.description !== undefined && (\n                    <p className=\"mt-0.5 gds-text-caption text-fg-muted\">{step.description}</p>\n                  )}\n                </div>\n              </div>\n\n              {/* connecting line */}\n              {i < steps.length - 1 && (\n                isHoriz ? (\n                  <div className={cx(\n                    'mx-2 mt-3.5 h-px flex-1',\n                    completed ? 'bg-accent' : 'bg-border',\n                  )} />\n                ) : (\n                  <div className={cx(\n                    'ml-3.5 mt-1 mb-1 w-px',\n                    'min-h-6',\n                    completed ? 'bg-accent' : 'bg-border',\n                  )} />\n                )\n              )}\n            </div>\n          )\n        })}\n      </div>\n    )\n  },\n)\n"],"mappings":"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"}

package/dist/theme.css

@@ -22,6 +22,7 @@
   --color-accent-fg: var(--gds-accent-fg);
   --color-overlay: var(--gds-overlay);
   --color-danger: var(--gds-danger);
+  --color-info: var(--gds-info);
   --color-warning: var(--gds-warning);
   --color-success: var(--gds-success);