@goliapkg/gds 2.0.0 → 2.1.0

package/dist/spinner-C15eER04.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner-C15eER04.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\n      className=\"text-fg-muted h-3.5 w-3.5 animate-spin\"\n      fill=\"none\"\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// inline X SVG for clear button\nfunction InlineClear() {\n  return (\n    <svg\n      className=\"h-3.5 w-3.5\"\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\n// inline copy icon\nfunction InlineCopy({ copied }: { copied: boolean }) {\n  if (copied) {\n    return (\n      <svg\n        className=\"text-success h-3.5 w-3.5\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path\n          d=\"M20 6L9 17l-5-5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    )\n  }\n  return (\n    <svg\n      className=\"h-3.5 w-3.5\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 24 24\"\n    >\n      <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\" />\n      <path\n        d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    className,\n    clearable,\n    copyable,\n    error,\n    glass,\n    icon,\n    inputSize,\n    loading,\n    onClear,\n    rightIcon,\n    value,\n    prefix,\n    suffix,\n    action,\n    ...props\n  },\n  ref\n) {\n  const [copied, setCopied] = useState(false)\n\n  const handleCopy = useCallback(() => {\n    if (value === undefined) return\n    navigator.clipboard\n      .writeText(String(value))\n      .then(() => {\n        setCopied(true)\n        setTimeout(() => setCopied(false), 2000)\n      })\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 =\n    rightIcon !== undefined ||\n    showClear ||\n    showLoading ||\n    showCopy ||\n    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)\n    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) &&\n          'gds-radius-input border-border bg-bg overflow-hidden border',\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=\"bg-bg-secondary gds-pad-x gds-text-body text-fg-muted border-border flex shrink-0 items-center self-stretch border-r select-none\">\n          {prefix}\n        </span>\n      )}\n      {hasLeft && !hasPrefix && (\n        <span className=\"text-fg-muted/50 gds-icon-child-sm absolute top-1/2 left-2.5 -translate-y-1/2\">\n          {icon}\n        </span>\n      )}\n      <input\n        className={cx(\n          hasPrefix || hasSuffix\n            ? 'text-fg gds-text-body gds-pad-x placeholder:text-fg-muted/50 min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50 ' +\n                (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=\"bg-bg-secondary gds-pad-x gds-text-body text-fg-muted border-border flex shrink-0 items-center self-stretch border-l select-none\">\n          {suffix}\n        </span>\n      )}\n      {hasRight && !hasSuffix && (\n        <span className=\"text-fg-muted/50 gds-icon-child-sm absolute top-1/2 right-2.5 flex -translate-y-1/2 items-center gap-1.5\">\n          {rightElements}\n        </span>\n      )}\n      {hasRight && hasSuffix && (\n        <span className=\"text-fg-muted/50 gds-icon-child-sm flex shrink-0 items-center gap-1.5 pr-2.5\">\n          {rightElements}\n        </span>\n      )}\n    </div>\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>(function Label(\n  { children, className, required = false, ...props },\n  ref\n) {\n  return (\n    <label\n      className={cx(\n        'gds-text-body text-fg block font-medium select-none',\n        className\n      )}\n      data-component=\"label\"\n      ref={ref}\n      {...props}\n    >\n      {children}\n      {required && <span className=\"text-danger ml-0.5\">*</span>}\n    </label>\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>(function Spinner(\n  { className, size },\n  ref\n) {\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\nexport { spinnerVariants }\nexport type { SpinnerProps }\n"],"mappings":"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"}

package/dist/{stepper-DKJuH1ws.js → stepper-DJ8pn-9D.js}

@@ -22,7 +22,7 @@ function m({ children: t, type: n = "single", defaultExpanded: r = [], className
 		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),
+		className: e("divide-border divide-y", i),
 		"data-component": "accordion",
 		onKeyDown: c,
 		children: /* @__PURE__ */ d(p.Provider, {
@@ -43,7 +43,7 @@ function h({ id: t, title: r, children: i, disabled: a, className: o }) {
 			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"),
+			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",
@@ -57,7 +57,7 @@ function h({ id: t, title: r, children: i, disabled: a, className: o }) {
 				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",
+			className: "gds-text-body text-fg-muted pb-3",
 			children: i
 		})]
 	});
@@ -78,7 +78,7 @@ var g = c(function({ className: t, current: n, steps: r }, i) {
 				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"),
+						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",
@@ -92,7 +92,7 @@ var g = c(function({ className: t, current: n, steps: r }, i) {
 							})
 						}) : i + 1
 					}), /* @__PURE__ */ d("span", {
-						className: e("text-center gds-text-caption", o ? "font-medium text-fg" : "text-fg-muted"),
+						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") })]
@@ -113,22 +113,22 @@ var g = c(function({ className: t, current: n, steps: r }, i) {
 		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),
+			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: "flex items-start justify-between gds-gap border-b border-border gds-pad-x-lg gds-pad-y-lg",
+				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-sm font-semibold text-fg",
+						className: "text-fg text-sm font-semibold",
 						children: u
 					}), p !== void 0 && /* @__PURE__ */ d("p", {
-						className: "mt-0.5 gds-text-body text-fg-muted",
+						className: "gds-text-body text-fg-muted mt-0.5",
 						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"),
+					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",
@@ -142,7 +142,7 @@ var g = c(function({ className: t, current: n, steps: r }, i) {
 					})
 				})]
 			}), /* @__PURE__ */ d("div", {
-				className: "flex-1 overflow-y-auto gds-pad-x-lg gds-pad-y-lg",
+				className: "gds-pad-x-lg gds-pad-y-lg flex-1 overflow-y-auto",
 				children: c
 			})]
 		})
@@ -171,11 +171,11 @@ var g = c(function({ className: t, current: n, steps: r }, i) {
 				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"),
+					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("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"),
+							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", {
@@ -184,11 +184,11 @@ var g = c(function({ className: t, current: n, steps: r }, i) {
 							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",
+							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("ml-3.5 mt-1 mb-1 w-px", "min-h-6", a ? "bg-accent" : "bg-border") }))]
+				}), 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}`);
 		})
 	});
@@ -196,4 +196,4 @@ var g = c(function({ className: t, current: n, steps: r }, i) {
 //#endregion
 export { h as a, m as i, _ as n, g as r, y as t };
 
-//# sourceMappingURL=stepper-DKJuH1ws.js.map
+//# 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"}

package/dist/{toast-DTuqMdrj.js → toast-QxCZG0Oy.js}

@@ -10,18 +10,18 @@ var u = {
 	danger: "text-danger"
 }, d = r(function({ action: t, className: n, target: r, timestamp: i, user: a, variant: o = "default", ...s }, d) {
 	return /* @__PURE__ */ l("div", {
-		className: e("flex items-center justify-between gds-gap gds-text", n),
+		className: e("gds-gap gds-text flex items-center justify-between", n),
 		"data-component": "audit-entry",
 		ref: d,
 		...s,
 		children: [/* @__PURE__ */ c("span", {
-			className: "shrink-0 text-xs text-fg-muted",
+			className: "text-fg-muted shrink-0 text-xs",
 			children: i
 		}), /* @__PURE__ */ l("span", {
 			className: "flex-1 truncate",
 			children: [
 				/* @__PURE__ */ c("span", {
-					className: "font-medium text-fg",
+					className: "text-fg font-medium",
 					children: a
 				}),
 				" ",
@@ -60,14 +60,14 @@ function p(e) {
 function m({ contact: t, onRemove: n }) {
 	let r = t.name ?? t.email;
 	return /* @__PURE__ */ l("span", {
-		className: e("inline-flex items-center gap-1 rounded-full px-2 py-0.5 gds-text-label select-none", p(t.email)),
+		className: e("gds-text-label inline-flex items-center gap-1 rounded-full px-2 py-0.5 select-none", p(t.email)),
 		"data-component": "contact-chip",
 		children: [/* @__PURE__ */ c("span", {
-			className: "truncate max-w-[160px]",
+			className: "max-w-[160px] truncate",
 			children: r
 		}), /* @__PURE__ */ c("button", {
 			type: "button",
-			className: "shrink-0 rounded-full p-0.5 hover:bg-white/10 transition-colors",
+			className: "shrink-0 rounded-full p-0.5 transition-colors hover:bg-white/10",
 			onClick: n,
 			"aria-label": `Remove ${r}`,
 			tabIndex: -1,
@@ -86,26 +86,26 @@ function m({ contact: t, onRemove: n }) {
 }
 function h({ results: t, activeIndex: n, onSelect: r }) {
 	return t.length === 0 ? null : /* @__PURE__ */ c("div", {
-		className: "absolute left-0 right-0 top-full mt-1 z-50 rounded-lg border border-border bg-bg-secondary shadow-lg overflow-hidden max-h-48 overflow-y-auto",
+		className: "border-border bg-bg-secondary absolute top-full right-0 left-0 z-50 mt-1 max-h-48 overflow-hidden overflow-y-auto rounded-lg border shadow-lg",
 		role: "listbox",
 		id: "email-composer-suggestions",
 		children: t.map((t, i) => /* @__PURE__ */ l("button", {
 			type: "button",
-			className: e("flex w-full items-center gap-2 px-3 py-2 text-left gds-text-body transition-colors", i === n ? "bg-accent/10 text-accent" : "text-fg hover:bg-white/[0.04]"),
+			className: e("gds-text-body flex w-full items-center gap-2 px-3 py-2 text-left transition-colors", i === n ? "bg-accent/10 text-accent" : "text-fg hover:bg-white/[0.04]"),
 			onClick: () => r(t),
 			"data-active": i === n,
 			role: "option",
 			"aria-selected": i === n,
 			children: [/* @__PURE__ */ c("span", {
-				className: e("flex h-6 w-6 shrink-0 items-center justify-center rounded-full gds-text-caption font-medium", p(t.email)),
+				className: e("gds-text-caption flex h-6 w-6 shrink-0 items-center justify-center rounded-full font-medium", p(t.email)),
 				children: (t.name ?? t.email).charAt(0).toUpperCase()
 			}), /* @__PURE__ */ l("div", {
 				className: "min-w-0 flex-1",
 				children: [t.name !== void 0 && /* @__PURE__ */ c("div", {
-					className: "truncate text-fg",
+					className: "text-fg truncate",
 					children: t.name
 				}), /* @__PURE__ */ c("div", {
-					className: "truncate text-fg-muted gds-text-label",
+					className: "text-fg-muted gds-text-label truncate",
 					children: t.email
 				})]
 			})]
@@ -167,11 +167,11 @@ var g = r(function({ value: n, onChange: r, onSearch: u, suggestions: d, label:
 		className: e("relative", v),
 		"data-component": "email-composer-field",
 		children: [/* @__PURE__ */ l("div", {
-			className: e("flex flex-wrap items-center gap-1 min-h-[36px] px-2 py-1 border border-border gds-radius-input bg-bg transition-colors", "focus-within:ring-2 focus-within:ring-accent/30", _ === !0 && t(_), _ === !0 && "border-white/10 bg-bg/60"),
+			className: e("border-border gds-radius-input bg-bg flex min-h-[36px] flex-wrap items-center gap-1 border px-2 py-1 transition-colors", "focus-within:ring-accent/30 focus-within:ring-2", _ === !0 && t(_), _ === !0 && "bg-bg/60 border-white/10"),
 			onClick: () => k.current?.focus(),
 			children: [
 				/* @__PURE__ */ c("span", {
-					className: "shrink-0 gds-text-label text-fg-muted select-none w-6",
+					className: "gds-text-label text-fg-muted w-6 shrink-0 select-none",
 					children: p
 				}),
 				n.map((e, t) => /* @__PURE__ */ c(m, {
@@ -199,7 +199,7 @@ var g = r(function({ value: n, onChange: r, onSearch: u, suggestions: d, label:
 						}, 200);
 					},
 					placeholder: n.length === 0 ? g ?? `${p.toLowerCase()}@example.com` : "",
-					className: "flex-1 min-w-[120px] bg-transparent gds-text-body text-fg placeholder:text-fg-muted/30 outline-none"
+					className: "gds-text-body text-fg placeholder:text-fg-muted/30 min-w-[120px] flex-1 bg-transparent outline-none"
 				})
 			]
 		}), D && C.length > 0 && /* @__PURE__ */ c(h, {
@@ -268,7 +268,7 @@ var g = r(function({ value: n, onChange: r, onSearch: u, suggestions: d, label:
 			children: [
 				/* @__PURE__ */ c("input", {
 					autoFocus: !0,
-					className: e("bg-transparent gds-text-body text-fg outline-none border-b border-accent/50 px-0.5", x !== null && "border-danger/50", n),
+					className: e("gds-text-body text-fg border-accent/50 border-b bg-transparent px-0.5 outline-none", x !== null && "border-danger/50", n),
 					onChange: (e) => {
 						b(e.target.value), S(null);
 					},
@@ -279,20 +279,20 @@ var g = r(function({ value: n, onChange: r, onSearch: u, suggestions: d, label:
 				/* @__PURE__ */ c("button", {
 					type: "button",
 					onClick: w,
-					className: e("shrink-0 p-0.5 text-success hover:text-success/80", n),
+					className: e("text-success hover:text-success/80 shrink-0 p-0.5", n),
 					"aria-label": "Save",
 					children: _
 				}),
 				/* @__PURE__ */ c("button", {
 					type: "button",
 					onClick: T,
-					className: e("shrink-0 p-0.5 text-fg-muted hover:text-fg", n),
+					className: e("text-fg-muted hover:text-fg shrink-0 p-0.5", n),
 					"aria-label": "Cancel",
 					children: v
 				})
 			]
 		}), x !== null && /* @__PURE__ */ c("span", {
-			className: "mt-0.5 text-[10px] text-danger",
+			className: "text-danger mt-0.5 text-[10px]",
 			children: x
 		})]
 	});
@@ -312,7 +312,7 @@ var g = r(function({ value: n, onChange: r, onSearch: u, suggestions: d, label:
 			className: e("gds-text-body", D ? "text-fg-muted" : "text-fg", n),
 			children: D ? u : t
 		}), /* @__PURE__ */ c("span", {
-			className: "text-fg-muted/0 transition-colors group-hover:text-fg-muted/60",
+			className: "text-fg-muted/0 group-hover:text-fg-muted/60 transition-colors",
 			children: y
 		})]
 	});
@@ -326,21 +326,21 @@ var g = r(function({ value: n, onChange: r, onSearch: u, suggestions: d, label:
 		onKeyDown: f ? (e) => {
 			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), a());
 		} : void 0,
-		className: e("flex items-center gap-3 gds-pad-x gds-pad-y-sm gds-text-body select-none", f && "cursor-pointer hover:bg-bg-tertiary", o === !0 && "border-l-2 border-l-accent bg-accent/5", s === !0 && "pointer-events-none opacity-50", u),
+		className: e("gds-pad-x gds-pad-y-sm gds-text-body flex items-center gap-3 select-none", f && "hover:bg-bg-tertiary cursor-pointer", o === !0 && "border-l-accent bg-accent/5 border-l-2", s === !0 && "pointer-events-none opacity-50", u),
 		"data-component": "list-item",
 		"data-state": o === !0 ? "active" : void 0,
 		children: [
 			t !== void 0 && /* @__PURE__ */ c("span", {
-				className: "shrink-0 text-fg-muted",
+				className: "text-fg-muted shrink-0",
 				children: t
 			}),
 			/* @__PURE__ */ l("div", {
 				className: "min-w-0 flex-1",
 				children: [/* @__PURE__ */ c("div", {
-					className: "font-medium text-fg",
+					className: "text-fg font-medium",
 					children: n
 				}), r !== void 0 && /* @__PURE__ */ c("div", {
-					className: "mt-0.5 text-fg-muted gds-text-caption",
+					className: "text-fg-muted gds-text-caption mt-0.5",
 					children: r
 				})]
 			}),
@@ -423,7 +423,7 @@ var g = r(function({ value: n, onChange: r, onSearch: u, suggestions: d, label:
 	let p = i ?? "info";
 	return /* @__PURE__ */ l("div", {
 		ref: f,
-		className: e("flex w-full items-start gds-gap gds-radius-popover border border-border border-l-2 gds-pad-x gds-pad-y", S[p], C[p], s === !0 && t(s), u),
+		className: e("gds-gap gds-radius-popover border-border gds-pad-x gds-pad-y flex w-full items-start border border-l-2", S[p], C[p], s === !0 && t(s), u),
 		"data-component": "notification",
 		"data-variant": p,
 		role: "alert",
@@ -436,10 +436,10 @@ var g = r(function({ value: n, onChange: r, onSearch: u, suggestions: d, label:
 			/* @__PURE__ */ l("div", {
 				className: "min-w-0 flex-1",
 				children: [/* @__PURE__ */ c("p", {
-					className: "gds-text-body font-medium text-fg",
+					className: "gds-text-body text-fg font-medium",
 					children: n
 				}), r !== void 0 && /* @__PURE__ */ c("p", {
-					className: "mt-0.5 gds-text-label text-fg-muted",
+					className: "gds-text-label text-fg-muted mt-0.5",
 					children: r
 				})]
 			}),
@@ -450,7 +450,7 @@ var g = r(function({ value: n, onChange: r, onSearch: u, suggestions: d, label:
 			o !== void 0 && /* @__PURE__ */ c("button", {
 				type: "button",
 				onClick: o,
-				className: e("shrink-0 gds-radius-button p-0.5 text-fg-muted opacity-60 hover:opacity-100", "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-button text-fg-muted shrink-0 p-0.5 opacity-60 hover:opacity-100", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-bg"),
 				"aria-label": "Dismiss",
 				children: /* @__PURE__ */ c("svg", {
 					width: "12",
@@ -480,12 +480,12 @@ var g = r(function({ value: n, onChange: r, onSearch: u, suggestions: d, label:
 		children: [
 			/* @__PURE__ */ c("input", {
 				checked: n,
-				className: "shrink-0 accent-accent",
+				className: "accent-accent shrink-0",
 				onChange: i,
 				type: "checkbox"
 			}),
 			/* @__PURE__ */ c("span", {
-				className: e("flex-1 truncate", n && "line-through text-fg-muted"),
+				className: e("flex-1 truncate", n && "text-fg-muted line-through"),
 				children: o
 			}),
 			a !== void 0 && /* @__PURE__ */ c("span", {
@@ -493,7 +493,7 @@ var g = r(function({ value: n, onChange: r, onSearch: u, suggestions: d, label:
 				children: a
 			}),
 			r !== void 0 && /* @__PURE__ */ c("span", {
-				className: "shrink-0 text-xs text-fg-muted",
+				className: "text-fg-muted shrink-0 text-xs",
 				children: r
 			})
 		]
@@ -565,7 +565,7 @@ var g = r(function({ value: n, onChange: r, onSearch: u, suggestions: d, label:
 }, M = r(function({ title: t, description: n, variant: r = "default", onClose: i, action: a, className: o, ...s }, u) {
 	return /* @__PURE__ */ l("div", {
 		ref: u,
-		className: e("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", k[r], o),
+		className: e("gds-gap gds-radius-popover border-border bg-surface gds-pad-x gds-pad-y gds-shadow-lg flex items-start border border-l-4", k[r], o),
 		"data-component": "toast",
 		"data-variant": r,
 		role: "status",
@@ -578,10 +578,10 @@ var g = r(function({ value: n, onChange: r, onSearch: u, suggestions: d, label:
 			/* @__PURE__ */ l("div", {
 				className: "min-w-0 flex-1",
 				children: [/* @__PURE__ */ c("p", {
-					className: "gds-text-body font-medium text-fg",
+					className: "gds-text-body text-fg font-medium",
 					children: t
 				}), n !== void 0 && /* @__PURE__ */ c("p", {
-					className: "mt-0.5 gds-text-label text-fg-muted",
+					className: "gds-text-label text-fg-muted mt-0.5",
 					children: n
 				})]
 			}),
@@ -592,7 +592,7 @@ var g = r(function({ value: n, onChange: r, onSearch: u, suggestions: d, label:
 			i !== void 0 && /* @__PURE__ */ c("button", {
 				type: "button",
 				onClick: i,
-				className: e("shrink-0 gds-radius-button p-0.5 text-fg-muted opacity-60 hover:opacity-100", "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-button text-fg-muted shrink-0 p-0.5 opacity-60 hover:opacity-100", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-bg"),
 				"aria-label": "Dismiss",
 				children: /* @__PURE__ */ c("svg", {
 					width: "12",
@@ -611,4 +611,4 @@ var g = r(function({ value: n, onChange: r, onSearch: u, suggestions: d, label:
 //#endregion
 export { b as a, x as i, O as n, g as o, E as r, d as s, M as t };
 
-//# sourceMappingURL=toast-DTuqMdrj.js.map
+//# sourceMappingURL=toast-QxCZG0Oy.js.map