@goliapkg/gds 1.7.0 → 2.0.1

package/dist/stepper-DJ8pn-9D.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-border divide-y", 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("gds-pad-y-lg text-fg flex w-full items-center justify-between text-left text-sm font-medium 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: "gds-text-body text-fg-muted pb-3",
+			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-accent bg-accent/10 text-accent border-2", !a && !o && "border-border bg-bg-secondary text-fg-muted border"),
+						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("gds-text-caption text-center", o ? "text-fg font-medium" : "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 gds-shadow-xl fixed top-0 bottom-0 flex flex-col border transition-transform duration-200", y ? "right-0 border-l" : "left-0 border-r", m ? e(t(m), "bg-bg/60 border-white/10") : "border-border bg-surface", g),
+			children: [(u !== void 0 || p !== void 0) && /* @__PURE__ */ f("div", {
+				className: "gds-gap border-border gds-pad-x-lg gds-pad-y-lg flex items-start justify-between border-b",
+				children: [/* @__PURE__ */ f("div", {
+					className: "min-w-0",
+					children: [u !== void 0 && /* @__PURE__ */ d("h2", {
+						className: "text-fg text-sm font-semibold",
+						children: u
+					}), p !== void 0 && /* @__PURE__ */ d("p", {
+						className: "gds-text-body text-fg-muted mt-0.5",
+						children: p
+					})]
+				}), /* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: s,
+					className: e("gds-radius-button text-fg-muted hover:text-fg shrink-0 p-1", "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: "gds-pad-x-lg gds-pad-y-lg flex-1 overflow-y-auto",
+				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" : "gds-gap items-start"),
+					children: [/* @__PURE__ */ d("div", {
+						className: "flex items-center",
+						children: /* @__PURE__ */ d("div", {
+							className: e("gds-sq-sm gds-radius-badge gds-text-body flex shrink-0 items-center justify-center font-medium transition-colors", a && "bg-accent text-accent-fg", o && "border-accent text-accent ring-accent/20 border-2 bg-transparent ring-2", !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: "gds-text-caption text-fg-muted mt-0.5",
+							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("mt-1 mb-1 ml-3.5 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-DJ8pn-9D.js.map

package/dist/stepper-DJ8pn-9D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-DJ8pn-9D.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({\n  children,\n  type = 'single',\n  defaultExpanded = [],\n  className,\n}: 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 (\n      e.key !== 'ArrowUp' &&\n      e.key !== 'ArrowDown' &&\n      e.key !== 'Home' &&\n      e.key !== 'End'\n    ) {\n      return\n    }\n    const triggers = Array.from(\n      e.currentTarget.querySelectorAll<HTMLButtonElement>(\n        'button[aria-expanded]'\n      )\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\n      className={cx('divide-border divide-y', className)}\n      data-component=\"accordion\"\n      onKeyDown={handleKeyDown}\n    >\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({\n  id,\n  title,\n  children,\n  disabled,\n  className,\n}: 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          'gds-pad-y-lg text-fg flex w-full items-center justify-between text-left text-sm font-medium 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(\n            'shrink-0 transition-transform duration-200',\n            isOpen && 'rotate-180'\n          )}\n        >\n          <path d=\"M3.5 5.5l3.5 3 3.5-3\" />\n        </svg>\n      </button>\n      {isOpen && (\n        <div className=\"gds-text-body text-fg-muted pb-3\">{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\n              key={`${label}-${i}`}\n              className=\"flex flex-1 items-center\"\n              role=\"listitem\"\n            >\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 &&\n                      'border-accent bg-accent/10 text-accent border-2',\n                    !isCompleted &&\n                      !isCurrent &&\n                      'border-border bg-bg-secondary text-fg-muted border'\n                  )}\n                >\n                  {isCompleted ? (\n                    <svg\n                      className=\"h-3.5 w-3.5\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                      strokeWidth={3}\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        d=\"M5 13l4 4L19 7\"\n                      />\n                    </svg>\n                  ) : (\n                    i + 1\n                  )}\n                </div>\n                <span\n                  className={cx(\n                    'gds-text-caption text-center',\n                    isCurrent ? 'text-fg font-medium' : 'text-fg-muted'\n                  )}\n                >\n                  {label}\n                </span>\n              </div>\n              {i < steps.length - 1 && (\n                <div\n                  className={cx(\n                    'mx-2 h-px flex-1',\n                    isCompleted ? 'bg-accent' : 'bg-border'\n                  )}\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>(function Sheet(\n  {\n    open,\n    onClose,\n    children,\n    side = 'right',\n    title,\n    description,\n    glass,\n    width = 320,\n    className,\n  },\n  ref\n) {\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 = {\n    width: typeof width === 'number' ? `${width}px` : width,\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 bg-black/50\"\n      onClick={(e) => {\n        if (e.target === e.currentTarget) onClose()\n      }}\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 gds-shadow-xl fixed top-0 bottom-0 flex flex-col border transition-transform duration-200',\n          isRight ? 'right-0 border-l' : 'left-0 border-r',\n          glass\n            ? cx(glassClass(glass), 'bg-bg/60 border-white/10')\n            : 'border-border bg-surface',\n          className\n        )}\n      >\n        {(title !== undefined || description !== undefined) && (\n          <div className=\"gds-gap border-border gds-pad-x-lg gds-pad-y-lg flex items-start justify-between border-b\">\n            <div className=\"min-w-0\">\n              {title !== undefined && (\n                <h2 className=\"text-fg text-sm font-semibold\">{title}</h2>\n              )}\n              {description !== undefined && (\n                <p className=\"gds-text-body text-fg-muted mt-0.5\">\n                  {description}\n                </p>\n              )}\n            </div>\n            <button\n              type=\"button\"\n              onClick={onClose}\n              className={cx(\n                'gds-radius-button text-fg-muted hover:text-fg shrink-0 p-1',\n                focusCls\n              )}\n              aria-label=\"Close\"\n            >\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              >\n                <path d=\"M3 3l8 8M11 3l-8 8\" />\n              </svg>\n            </button>\n          </div>\n        )}\n        <div className=\"gds-pad-x-lg gds-pad-y-lg flex-1 overflow-y-auto\">\n          {children}\n        </div>\n      </div>\n    </div>\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\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    strokeLinejoin=\"round\"\n  >\n    <path d=\"M3 7.5l3 3 5-6\" />\n  </svg>\n)\n\nexport const Stepper = forwardRef<HTMLDivElement, StepperProps>(\n  function Stepper(\n    { steps, current, orientation = 'horizontal', className, ...props },\n    ref\n  ) {\n    const isHoriz = orientation === 'horizontal'\n\n    return (\n      <div\n        ref={ref}\n        className={cx('flex', isHoriz ? 'items-start' : 'flex-col', className)}\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\n                className={cx(\n                  'flex',\n                  isHoriz ? 'flex-col items-center' : 'gds-gap items-start'\n                )}\n              >\n                <div className=\"flex items-center\">\n                  {/* step circle */}\n                  <div\n                    className={cx(\n                      'gds-sq-sm gds-radius-badge gds-text-body flex shrink-0 items-center justify-center font-medium transition-colors',\n                      completed && 'bg-accent text-accent-fg',\n                      active &&\n                        'border-accent text-accent ring-accent/20 border-2 bg-transparent ring-2',\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\n                    className={cx(\n                      'gds-text-body font-medium',\n                      active ? 'text-fg' : 'text-fg-muted'\n                    )}\n                  >\n                    {step.label}\n                  </p>\n                  {step.description !== undefined && (\n                    <p className=\"gds-text-caption text-fg-muted mt-0.5\">\n                      {step.description}\n                    </p>\n                  )}\n                </div>\n              </div>\n\n              {/* connecting line */}\n              {i < steps.length - 1 &&\n                (isHoriz ? (\n                  <div\n                    className={cx(\n                      'mx-2 mt-3.5 h-px flex-1',\n                      completed ? 'bg-accent' : 'bg-border'\n                    )}\n                  />\n                ) : (\n                  <div\n                    className={cx(\n                      'mt-1 mb-1 ml-3.5 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/{switch-DC85Os9r.js → switch-BAS-GXJV.js}

@@ -1,5 +1,5 @@
 import { r as e, t } from "./glass-CQTlX7IO.js";
-import { r as n } from "./button-avu-rQU4.js";
+import { r as n } from "./button-BD3VHhwq.js";
 import { r } from "./motion-DUPegem-.js";
 import { forwardRef as i, useMemo as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
@@ -42,7 +42,7 @@ var u = i(function({ className: n, glass: r, icon: i, label: a, onRemove: u, rem
 			}),
 			a,
 			u !== void 0 && /* @__PURE__ */ o("button", {
-				className: e("ml-0.5 gds-radius-badge p-0.5 transition-colors hover:bg-current/10", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-bg"),
+				className: e("gds-radius-badge ml-0.5 p-0.5 transition-colors hover:bg-current/10", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-bg"),
 				onClick: u,
 				tabIndex: -1,
 				type: "button",
@@ -64,14 +64,14 @@ var u = i(function({ className: n, glass: r, icon: i, label: a, onRemove: u, rem
 		"data-component": "range-slider",
 		"data-state": n ? "disabled" : "enabled",
 		children: [u && /* @__PURE__ */ o("span", {
-			className: "absolute -top-5 text-[10px] font-medium text-fg-muted transition-[left]",
+			className: "text-fg-muted absolute -top-5 text-[10px] font-medium transition-[left]",
 			style: {
 				left: `${h}%`,
 				transform: "translateX(-50%)"
 			},
 			children: f
 		}), /* @__PURE__ */ o("input", {
-			className: e("gds-range-slider h-1.5 w-full cursor-pointer appearance-none rounded-full bg-bg-tertiary", r, n && "pointer-events-none"),
+			className: e("gds-range-slider bg-bg-tertiary h-1.5 w-full cursor-pointer appearance-none rounded-full", r, n && "pointer-events-none"),
 			disabled: n,
 			max: i,
 			min: c,
@@ -105,7 +105,7 @@ var u = i(function({ className: n, glass: r, icon: i, label: a, onRemove: u, rem
 }, h = i(function({ checked: t = !1, className: n, disabled: r = !1, label: i, onChange: a, size: c = "default", ...l }, u) {
 	let d = c ?? "default";
 	return /* @__PURE__ */ s("label", {
-		className: e("inline-flex select-none items-center gds-gap-sm", r && "cursor-not-allowed opacity-50", n),
+		className: e("gds-gap-sm inline-flex items-center select-none", r && "cursor-not-allowed opacity-50", n),
 		"data-component": "switch",
 		"data-state": t ? "on" : "off",
 		children: [/* @__PURE__ */ o("button", {
@@ -127,4 +127,4 @@ var u = i(function({ className: n, glass: r, icon: i, label: a, onRemove: u, rem
 //#endregion
 export { c as a, u as i, f as n, d as r, h as t };
 
-//# sourceMappingURL=switch-DC85Os9r.js.map
+//# sourceMappingURL=switch-BAS-GXJV.js.map

package/dist/switch-BAS-GXJV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-BAS-GXJV.js","names":[],"sources":["../src/l3-atoms/chip.tsx","../src/l3-atoms/range-slider.tsx","../src/l3-atoms/switch.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\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'\nimport type { VariantProps } from '../utils/types'\n\nconst chipVariants = cva(\n  'inline-flex select-none items-center gds-gap-xs gds-radius-badge gds-pad-x-sm gds-pad-y-sm gds-text-label font-medium',\n  {\n    defaultVariants: { variant: 'default' },\n    variants: {\n      variant: {\n        accent: 'bg-accent/10 text-accent',\n        danger: 'bg-danger/10 text-danger',\n        default: 'bg-fg-muted/10 text-fg-muted',\n        success: 'bg-success/10 text-success',\n        warning: 'bg-warning/10 text-warning',\n      },\n    },\n  }\n)\n\ntype ChipProps = React.HTMLAttributes<HTMLSpanElement> &\n  VariantProps<typeof chipVariants> & {\n    glass?: boolean\n    icon?: ReactNode\n    label: string\n    onRemove?: () => void\n    removeIcon?: ReactNode\n  }\n\n// default X SVG\nfunction DefaultRemoveIcon() {\n  return (\n    <svg\n      className=\"h-3 w-3\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      viewBox=\"0 0 24 24\"\n    >\n      <path\n        d=\"M18 6L6 18M6 6l12 12\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport const Chip = forwardRef<HTMLSpanElement, ChipProps>(function Chip(\n  { className, glass, icon, label, onRemove, removeIcon, variant, ...props },\n  ref\n) {\n  return (\n    <span\n      className={cx(\n        chipVariants({ variant }),\n        glassClass(glass),\n        glass === true && 'border border-white/10 bg-white/5',\n        className\n      )}\n      data-component=\"chip\"\n      data-variant={variant ?? 'default'}\n      ref={ref}\n      {...props}\n    >\n      {icon !== undefined && <span className=\"gds-icon-child-sm\">{icon}</span>}\n      {label}\n      {onRemove !== undefined && (\n        <button\n          className={cx(\n            'gds-radius-badge ml-0.5 p-0.5 transition-colors hover:bg-current/10',\n            focusCls\n          )}\n          onClick={onRemove}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          {removeIcon ?? <DefaultRemoveIcon />}\n        </button>\n      )}\n    </span>\n  )\n})\n\nexport { chipVariants }\nexport type { ChipProps }\n","// range-slider — styled native range input with optional value label\nimport { forwardRef, useMemo } from 'react'\n\nimport { focusCls } from '../utils/a11y'\nimport { cx } from '../utils/cx'\n\ntype RangeSliderProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'onChange' | 'type' | 'value'\n> & {\n  disabled?: boolean\n  max?: number\n  min?: number\n  onChange: (value: number) => void\n  showValue?: boolean\n  step?: number\n  value: number\n}\n\nexport const RangeSlider = forwardRef<HTMLInputElement, RangeSliderProps>(\n  function RangeSlider(\n    {\n      className,\n      disabled = false,\n      max = 100,\n      min = 0,\n      onChange,\n      showValue = false,\n      step = 1,\n      value,\n      ...props\n    },\n    ref\n  ) {\n    const percent = useMemo(() => {\n      const range = max - min\n      if (range <= 0) return 0\n      return ((value - min) / range) * 100\n    }, [value, min, max])\n\n    return (\n      <div\n        className={cx(\n          'relative flex items-center select-none',\n          disabled && 'cursor-not-allowed opacity-50',\n          className\n        )}\n        data-component=\"range-slider\"\n        data-state={disabled ? 'disabled' : 'enabled'}\n      >\n        {showValue && (\n          <span\n            className=\"text-fg-muted absolute -top-5 text-[10px] font-medium transition-[left]\"\n            style={{ left: `${percent}%`, transform: 'translateX(-50%)' }}\n          >\n            {value}\n          </span>\n        )}\n        <input\n          className={cx(\n            'gds-range-slider bg-bg-tertiary h-1.5 w-full cursor-pointer appearance-none rounded-full',\n            focusCls,\n            disabled && 'pointer-events-none'\n          )}\n          disabled={disabled}\n          max={max}\n          min={min}\n          onChange={(e) => onChange(Number(e.target.value))}\n          ref={ref}\n          step={step}\n          style={{\n            background: `linear-gradient(to right, var(--gds-accent) 0%, var(--gds-accent) ${percent}%, var(--gds-bg-tertiary) ${percent}%, var(--gds-bg-tertiary) 100%)`,\n          }}\n          type=\"range\"\n          value={value}\n          {...props}\n        />\n      </div>\n    )\n  }\n)\n\nexport type { RangeSliderProps }\n","import { cva } from 'class-variance-authority'\nimport { forwardRef } from 'react'\n\nimport { focusCls } from '../utils/a11y'\nimport { cx } from '../utils/cx'\nimport type { VariantProps } from '../utils/types'\n\nconst switchVariants = cva(\n  'relative inline-flex shrink-0 cursor-pointer select-none items-center gds-radius-badge transition-colors ' +\n    focusCls,\n  {\n    defaultVariants: { size: 'default' },\n    variants: {\n      size: {\n        default: 'h-5 w-9',\n        sm: 'h-4 w-7',\n      },\n    },\n  }\n)\n\nconst thumbSizeMap = {\n  default: 'gds-icon',\n  sm: 'h-3 w-3',\n}\n\nconst thumbTranslateMap = {\n  default: { off: 'translate-x-0.5', on: 'translate-x-4' },\n  sm: { off: 'translate-x-0.5', on: 'translate-x-3.5' },\n}\n\ntype SwitchProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onChange'\n> &\n  VariantProps<typeof switchVariants> & {\n    checked?: boolean\n    label?: string\n    onChange?: (checked: boolean) => void\n  }\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n  function Switch(\n    {\n      checked = false,\n      className,\n      disabled = false,\n      label,\n      onChange,\n      size = 'default',\n      ...props\n    },\n    ref\n  ) {\n    const sizeKey = size ?? 'default'\n\n    return (\n      <label\n        className={cx(\n          'gds-gap-sm inline-flex items-center select-none',\n          disabled && 'cursor-not-allowed opacity-50',\n          className\n        )}\n        data-component=\"switch\"\n        data-state={checked ? 'on' : 'off'}\n      >\n        <button\n          aria-checked={checked}\n          className={cx(\n            switchVariants({ size }),\n            checked ? 'bg-accent' : 'bg-bg-tertiary',\n            disabled && 'cursor-not-allowed'\n          )}\n          disabled={disabled}\n          onClick={() => onChange?.(!checked)}\n          ref={ref}\n          role=\"switch\"\n          type=\"button\"\n          {...props}\n        >\n          <span\n            className={cx(\n              'gds-radius-badge bg-fg gds-shadow-sm transition-transform',\n              thumbSizeMap[sizeKey],\n              checked\n                ? thumbTranslateMap[sizeKey].on\n                : thumbTranslateMap[sizeKey].off\n            )}\n          />\n        </button>\n        {label !== undefined && (\n          <span className=\"gds-text-body text-fg\">{label}</span>\n        )}\n      </label>\n    )\n  }\n)\n\nexport { switchVariants }\nexport type { SwitchProps }\n"],"mappings":"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"}

package/dist/{textarea-BJCl_aH2.js → textarea-Btdu41rY.js}

@@ -1,12 +1,12 @@
 import { r as e, t } from "./glass-CQTlX7IO.js";
-import { r as n } from "./button-avu-rQU4.js";
+import { r as n } from "./button-BD3VHhwq.js";
 import { r } from "./motion-DUPegem-.js";
 import { forwardRef as i } from "react";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/l2-primitives/kbd.tsx
 var o = i(function({ children: n, className: r, glass: i, ...o }, s) {
 	return /* @__PURE__ */ a("kbd", {
-		className: e("inline-flex select-none items-center gds-radius-button border border-border/60 bg-bg-tertiary gds-pad-x-sm gds-pad-y-sm font-mono gds-text-label text-fg-muted", t(i), i === !0 && "border-white/10 bg-bg/60", r),
+		className: e("gds-radius-button border-border/60 bg-bg-tertiary gds-pad-x-sm gds-pad-y-sm gds-text-label text-fg-muted inline-flex items-center border font-mono select-none", t(i), i === !0 && "bg-bg/60 border-white/10", r),
 		"data-component": "kbd",
 		ref: s,
 		...o,
@@ -28,7 +28,7 @@ var o = i(function({ children: n, className: r, glass: i, ...o }, s) {
 	vertical: "resize-y"
 }, l = i(function({ autoGrow: n = !1, className: r, error: i, glass: o, resize: l = "vertical", ...u }, d) {
 	return /* @__PURE__ */ a("textarea", {
-		className: e(s({ error: i }), c[l], n && "[field-sizing:content] overflow-hidden", t(o), o === !0 && "border-white/10 bg-bg/60", r),
+		className: e(s({ error: i }), c[l], n && "[field-sizing:content] overflow-hidden", t(o), o === !0 && "bg-bg/60 border-white/10", r),
 		"data-component": "textarea",
 		ref: d,
 		...u
@@ -37,4 +37,4 @@ var o = i(function({ children: n, className: r, glass: i, ...o }, s) {
 //#endregion
 export { s as n, o as r, l as t };
 
-//# sourceMappingURL=textarea-BJCl_aH2.js.map
+//# sourceMappingURL=textarea-Btdu41rY.js.map

package/dist/textarea-Btdu41rY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-Btdu41rY.js","names":[],"sources":["../src/l2-primitives/kbd.tsx","../src/l2-primitives/textarea.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { forwardRef } from 'react'\n\nimport { cx } from '../utils/cx'\nimport { glassClass } from '../utils/glass'\n\ntype KbdProps = React.HTMLAttributes<HTMLElement> & {\n  children: ReactNode\n  glass?: boolean\n}\n\nexport const Kbd = forwardRef<HTMLElement, KbdProps>(function Kbd(\n  { children, className, glass, ...props },\n  ref\n) {\n  return (\n    <kbd\n      className={cx(\n        'gds-radius-button border-border/60 bg-bg-tertiary gds-pad-x-sm gds-pad-y-sm gds-text-label text-fg-muted inline-flex items-center border font-mono select-none',\n        glassClass(glass),\n        glass === true && 'bg-bg/60 border-white/10',\n        className\n      )}\n      data-component=\"kbd\"\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </kbd>\n  )\n})\n\nexport type { KbdProps }\n","import { cva } from 'class-variance-authority'\nimport { forwardRef } 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\ntype TextareaResize = 'both' | 'none' | 'vertical'\n\nconst textareaVariants = cva(\n  'w-full gds-radius-input border bg-bg gds-pad-x gds-pad-y text-fg gds-text-body 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    },\n    variants: {\n      error: {\n        false: 'border-border hover:border-border-strong',\n        true: 'border-danger',\n      },\n    },\n  }\n)\n\nconst resizeClasses: Record<TextareaResize, string> = {\n  both: 'resize',\n  none: 'resize-none',\n  vertical: 'resize-y',\n}\n\ntype TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &\n  VariantProps<typeof textareaVariants> & {\n    autoGrow?: boolean\n    glass?: boolean\n    resize?: TextareaResize\n  }\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea(\n    {\n      autoGrow = false,\n      className,\n      error,\n      glass,\n      resize = 'vertical',\n      ...props\n    },\n    ref\n  ) {\n    return (\n      <textarea\n        className={cx(\n          textareaVariants({ error }),\n          resizeClasses[resize],\n          autoGrow && '[field-sizing:content] overflow-hidden',\n          glassClass(glass),\n          glass === true && 'bg-bg/60 border-white/10',\n          className\n        )}\n        data-component=\"textarea\"\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\n\nexport { textareaVariants }\nexport type { TextareaProps, TextareaResize }\n"],"mappings":";;;;;;AAWA,IAAa,IAAM,EAAkC,SACnD,EAAE,aAAU,cAAW,UAAO,GAAG,KACjC,GACA;AACA,QACE,kBAAC,OAAD;EACE,WAAW,EACT,kKACA,EAAW,EAAM,EACjB,MAAU,MAAQ,4BAClB,EACD;EACD,kBAAe;EACV;EACL,GAAI;EAEH;EACG,CAAA;EAER,ECpBI,IAAmB,EACvB,8KACE,GACF;CACE,kBAAkB,CAChB;EACE,OAAO;EACP,WAAW;EACZ,CACF;CACD,iBAAiB,EACf,OAAO,IACR;CACD,UAAU,EACR,OAAO;EACL,OAAO;EACP,MAAM;EACP,EACF;CACF,CACF,EAEK,IAAgD;CACpD,MAAM;CACN,MAAM;CACN,UAAU;CACX,EASY,IAAW,EACtB,SACE,EACE,cAAW,IACX,cACA,UACA,UACA,YAAS,YACT,GAAG,KAEL,GACA;AACA,QACE,kBAAC,YAAD;EACE,WAAW,EACT,EAAiB,EAAE,UAAO,CAAC,EAC3B,EAAc,IACd,KAAY,0CACZ,EAAW,EAAM,EACjB,MAAU,MAAQ,4BAClB,EACD;EACD,kBAAe;EACV;EACL,GAAI;EACJ,CAAA;EAGP"}