@devalok/shilp-sutra 0.34.1 → 0.36.1

package/dist/ui/stepper.js

@@ -3,89 +3,94 @@ import { a as e, c as t } from "../_chunks/framer.js";
 import { springs as n } from "./lib/motion.js";
 import { cn as r } from "./lib/utils.js";
 import * as i from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/ui/stepper.tsx
-var s = i.createContext({
+var c = i.createContext({
 	activeStep: 0,
 	orientation: "horizontal",
 	stepperId: ""
-}), c = i.forwardRef(({ activeStep: t, orientation: c = "horizontal", className: l, children: u, ...d }, f) => {
-	let p = i.Children.toArray(u), m = i.useId(), h = i.useMemo(() => ({
-		activeStep: t,
-		orientation: c,
-		stepperId: m
+}), l = i.forwardRef(({ activeStep: e, orientation: t = "horizontal", onStepClick: n, className: a, children: l, ...u }, d) => {
+	let f = i.Children.toArray(l), p = i.useId(), m = i.useMemo(() => ({
+		activeStep: e,
+		orientation: t,
+		stepperId: p,
+		onStepClick: n
 	}), [
+		e,
 		t,
-		c,
-		m
+		p,
+		n
 	]);
-	return /* @__PURE__ */ a(s.Provider, {
-		value: h,
-		children: /* @__PURE__ */ a("div", {
-			ref: f,
-			className: r("flex gap-ds-02", c === "vertical" ? "flex-col" : "flex-row items-center", l),
+	return /* @__PURE__ */ o(c.Provider, {
+		value: m,
+		children: /* @__PURE__ */ o("div", {
+			ref: d,
+			className: r("flex gap-ds-02", t === "vertical" ? "flex-col" : "flex-row items-center", a),
 			role: "list",
-			...d,
-			children: p.map((s, l) => /* @__PURE__ */ o(i.Fragment, { children: [i.isValidElement(s) ? i.cloneElement(s, { _index: l }) : s, l < p.length - 1 && /* @__PURE__ */ a("div", {
-				className: r("relative flex-1 overflow-hidden", c === "vertical" ? "ml-ds-04 w-ds-01 min-h-ds-05" : "h-ds-01 min-w-ds-05", "bg-surface-border"),
+			...u,
+			children: f.map((n, a) => /* @__PURE__ */ s(i.Fragment, { children: [i.isValidElement(n) ? i.cloneElement(n, { _index: a }) : n, a < f.length - 1 && /* @__PURE__ */ o("div", {
+				className: r("relative flex-1 overflow-hidden", t === "vertical" ? "ml-ds-04 w-ds-01 min-h-ds-05" : "h-ds-01 min-w-ds-05", "bg-surface-border"),
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ a(e.div, {
-					className: r("absolute inset-0 bg-accent-9", c === "vertical" ? "origin-top" : "origin-left"),
-					initial: !1,
-					animate: { [c === "vertical" ? "scaleY" : "scaleX"]: +(l < t) },
-					transition: n.smooth
+				children: /* @__PURE__ */ o("div", {
+					className: r("absolute inset-0 bg-accent-9 transition-transform duration-moderate-02 ease-productive-standard", t === "vertical" ? "origin-top" : "origin-left"),
+					style: { transform: `${t === "vertical" ? "scaleY" : "scaleX"}(${+(a < e)})` }
 				})
-			})] }, l))
+			})] }, a))
 		})
 	});
-}), l = i.forwardRef(({ label: t, description: c, icon: l, className: u, ...d }, f) => {
-	let { _index: p = 0, ...m } = d, { activeStep: h, orientation: g, stepperId: _ } = i.useContext(s), v = p < h ? "completed" : p === h ? "active" : "pending";
-	return /* @__PURE__ */ o("div", {
-		ref: f,
+}), u = i.forwardRef(({ label: e, description: t, icon: n, className: l, ...u }, d) => {
+	let { _index: f = 0, ...p } = u, { activeStep: m, orientation: h, stepperId: g, onStepClick: _ } = i.useContext(c), v = f < m ? "completed" : f === m ? "active" : "pending", y = v === "completed" && !!_, b = /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
+		className: r("relative shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-ds-full text-ds-sm font-semibold", "transition-[background-color,border-color,color] duration-moderate-01 ease-productive-standard", v === "completed" && "bg-accent-9 text-accent-fg", v === "active" && "bg-accent-9 text-accent-fg", v === "pending" && "bg-surface-raised text-surface-fg-subtle border border-surface-border-strong"),
+		children: n || (v === "completed" ? /* @__PURE__ */ o("svg", {
+			className: "w-ico-sm h-ico-sm",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2.5,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ o("polyline", { points: "20 6 9 17 4 12" })
+		}) : f + 1)
+	}), /* @__PURE__ */ s("div", {
+		className: "flex flex-col",
+		children: [/* @__PURE__ */ o("span", {
+			className: r("text-ds-md font-medium leading-ds-snug", v === "pending" ? "text-surface-fg-subtle" : "text-surface-fg"),
+			children: e
+		}), t && /* @__PURE__ */ o("span", {
+			className: "text-ds-sm text-surface-fg-muted leading-ds-relaxed",
+			children: t
+		})]
+	})] });
+	return y ? /* @__PURE__ */ o("div", {
+		ref: d,
+		"data-step": "",
+		"data-state": v,
+		role: "listitem",
+		className: r(h === "vertical" && "py-ds-02", l),
+		...p,
+		children: /* @__PURE__ */ o("button", {
+			type: "button",
+			tabIndex: 0,
+			"aria-label": `Go to step ${f + 1}: ${e}`,
+			onClick: () => _(f),
+			className: r("flex items-center gap-ds-03 cursor-pointer select-none", "rounded-ds-md px-ds-02 py-ds-01 -mx-ds-02 -my-ds-01", "bg-transparent border-0", "hover:bg-surface-raised-hover active:bg-surface-raised-active", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-8 focus-visible:ring-offset-2", "transition-colors duration-fast-01 ease-productive-standard"),
+			children: b
+		})
+	}) : /* @__PURE__ */ o("div", {
+		ref: d,
 		"data-step": "",
 		"data-state": v,
 		role: "listitem",
 		"aria-current": v === "active" ? "step" : void 0,
-		"aria-label": `Step ${p + 1}: ${t}, ${v === "completed" ? "completed" : v === "active" ? "current" : "upcoming"}`,
-		className: r("flex items-center gap-ds-03", g === "vertical" && "py-ds-02", u),
-		...m,
-		children: [/* @__PURE__ */ o("div", {
-			className: r("relative flex-shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-ds-full text-ds-sm font-semibold", v === "completed" && "bg-accent-9 text-accent-fg", v === "active" && "text-accent-fg", v === "pending" && "bg-surface-raised text-surface-fg-subtle border border-surface-border-strong"),
-			children: [v === "active" && /* @__PURE__ */ a(e.div, {
-				layoutId: `${_}-stepper-active`,
-				className: "absolute inset-0 rounded-ds-full bg-accent-9",
-				transition: n.smooth
-			}), /* @__PURE__ */ a("span", {
-				className: "relative z-10",
-				children: l || (v === "completed" ? /* @__PURE__ */ a(e.svg, {
-					className: "w-ico-sm h-ico-sm",
-					viewBox: "0 0 24 24",
-					fill: "none",
-					stroke: "currentColor",
-					strokeWidth: 2.5,
-					strokeLinecap: "round",
-					strokeLinejoin: "round",
-					initial: { scale: 0 },
-					animate: { scale: 1 },
-					transition: n.bouncy,
-					children: /* @__PURE__ */ a("polyline", { points: "20 6 9 17 4 12" })
-				}) : p + 1)
-			})]
-		}), /* @__PURE__ */ o("div", {
-			className: "flex flex-col",
-			children: [/* @__PURE__ */ a("span", {
-				className: r("text-ds-md font-medium leading-ds-snug", v === "pending" ? "text-surface-fg-subtle" : "text-surface-fg"),
-				children: t
-			}), c && /* @__PURE__ */ a("span", {
-				className: "text-ds-sm text-surface-fg-muted leading-ds-relaxed",
-				children: c
-			})]
-		})]
+		"aria-label": `Step ${f + 1}: ${e}, ${v === "completed" ? "completed" : v === "active" ? "current" : "upcoming"}`,
+		className: r("flex items-center gap-ds-03", h === "vertical" && "py-ds-02", l),
+		...p,
+		children: b
 	});
-}), u = 40, d = {
+}), d = 40, f = {
 	enter: (e) => ({
 		opacity: 0,
-		x: e * u
+		x: e * d
 	}),
 	center: {
 		opacity: 1,
@@ -93,30 +98,30 @@ var s = i.createContext({
 	},
 	exit: (e) => ({
 		opacity: 0,
-		x: e * -u
+		x: e * -d
 	})
 };
-function f({ activeStep: o, children: s, className: c }) {
-	let l = i.useRef(o), u = o >= l.current ? 1 : -1;
+function p({ activeStep: a, children: s, className: c }) {
+	let l = i.useRef(a), u = a >= l.current ? 1 : -1;
 	return i.useEffect(() => {
-		l.current = o;
-	}, [o]), /* @__PURE__ */ a("div", {
+		l.current = a;
+	}, [a]), /* @__PURE__ */ o("div", {
 		className: r("relative overflow-hidden", c),
-		children: /* @__PURE__ */ a(t, {
+		children: /* @__PURE__ */ o(t, {
 			mode: "wait",
 			custom: u,
-			children: /* @__PURE__ */ a(e.div, {
+			children: /* @__PURE__ */ o(e.div, {
 				custom: u,
-				variants: d,
+				variants: f,
 				initial: "enter",
 				animate: "center",
 				exit: "exit",
 				transition: n.smooth,
 				children: s
-			}, o)
+			}, a)
 		})
 	});
 }
-c.displayName = "Stepper", l.displayName = "Step", f.displayName = "StepperContent";
+l.displayName = "Stepper", u.displayName = "Step", p.displayName = "StepperContent";
 //#endregion
-export { l as Step, c as Stepper, f as StepperContent };
+export { u as Step, l as Stepper, p as StepperContent };

package/dist/ui/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","names":[],"sources":["../../src/ui/stepper.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { cn } from './lib/utils'\nimport { springs } from './lib/motion'\n\ntype StepState = 'completed' | 'active' | 'pending'\n\ntype StepperContextValue = {\n  activeStep: number\n  orientation: 'horizontal' | 'vertical'\n  stepperId: string\n  onStepClick?: (stepIndex: number) => void\n}\n\nconst StepperContext = React.createContext<StepperContextValue>({\n  activeStep: 0,\n  orientation: 'horizontal',\n  stepperId: '',\n})\n\n/**\n * Props for Stepper — a multi-step progress indicator that renders a connected series of `<Step>`\n * children with connector lines, showing completed/active/pending states automatically.\n *\n * **`activeStep`:** 0-indexed. Step at `activeStep` is \"active\", steps before it are \"completed\",\n * steps after it are \"pending\". Update this value to advance the stepper.\n *\n * **Orientation:** `'horizontal'` (default, left-to-right) | `'vertical'` (top-to-bottom, for sidebars).\n *\n * **Children:** Must be `<Step>` components. The Stepper injects `_index` into each child automatically.\n *\n * @example\n * // Horizontal 3-step form wizard:\n * <Stepper activeStep={currentStep}>\n *   <Step label=\"Account\" description=\"Create your credentials\" />\n *   <Step label=\"Profile\" description=\"Add your details\" />\n *   <Step label=\"Review\" description=\"Confirm and submit\" />\n * </Stepper>\n *\n * @example\n * // Vertical onboarding checklist in a sidebar:\n * <Stepper activeStep={completedSteps} orientation=\"vertical\">\n *   <Step label=\"Connect workspace\" />\n *   <Step label=\"Invite teammates\" />\n *   <Step label=\"Set up billing\" />\n * </Stepper>\n *\n * @example\n * // Clickable completed steps — user can navigate back:\n * <Stepper activeStep={step} onStepClick={(i) => setStep(i)}>\n *   <Step label=\"Account\" />\n *   <Step label=\"Profile\" />\n *   <Step label=\"Review\" />\n * </Stepper>\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  activeStep: number\n  orientation?: 'horizontal' | 'vertical'\n  /** Called when a completed step is clicked. Receives the 0-based step index. */\n  onStepClick?: (stepIndex: number) => void\n  children: React.ReactNode\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  ({ activeStep, orientation = 'horizontal', onStepClick, className, children, ...props }, ref) => {\n    const steps = React.Children.toArray(children)\n    const stepperId = React.useId()\n    const contextValue = React.useMemo(\n      () => ({ activeStep, orientation, stepperId, onStepClick }),\n      [activeStep, orientation, stepperId, onStepClick],\n    )\n    return (\n      <StepperContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn(\n            'flex gap-ds-02',\n            orientation === 'vertical' ? 'flex-col' : 'flex-row items-center',\n            className,\n          )}\n          role=\"list\"\n          {...props}\n        >\n          {steps.map((child, index) => (\n            <React.Fragment key={index}>\n              {React.isValidElement<StepInternalProps>(child)\n                ? React.cloneElement(child, { _index: index })\n                : child}\n              {index < steps.length - 1 && (\n                <div\n                  className={cn(\n                    'relative flex-1 overflow-hidden',\n                    orientation === 'vertical'\n                      ? 'ml-ds-04 w-ds-01 min-h-ds-05'\n                      : 'h-ds-01 min-w-ds-05',\n                    'bg-surface-border',\n                  )}\n                  aria-hidden=\"true\"\n                >\n                  {/* Filled portion — smooth CSS transition */}\n                  <div\n                    className={cn(\n                      'absolute inset-0 bg-accent-9 transition-transform duration-moderate-02 ease-productive-standard',\n                      orientation === 'vertical' ? 'origin-top' : 'origin-left',\n                    )}\n                    style={{\n                      transform: `${orientation === 'vertical' ? 'scaleY' : 'scaleX'}(${index < activeStep ? 1 : 0})`,\n                    }}\n                  />\n                </div>\n              )}\n            </React.Fragment>\n          ))}\n        </div>\n      </StepperContext.Provider>\n    )\n  },\n)\n\n/**\n * Props for Step — a single step within a `<Stepper>`. The visual state (completed/active/pending)\n * is derived from the parent Stepper's `activeStep` and this step's position — you don't set it manually.\n *\n * @example\n * // Basic step with label and description:\n * <Step label=\"Payment\" description=\"Enter your card details\" />\n *\n * @example\n * // Step with a custom icon (overrides the default number/checkmark):\n * <Step label=\"Verified\" icon={<IconShieldCheck className=\"h-ico-sm w-ico-sm\" />} />\n */\ninterface StepProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: string\n  description?: string\n  icon?: React.ReactNode\n}\n\ntype StepInternalProps = StepProps & { _index?: number }\n\nconst Step = React.forwardRef<HTMLDivElement, StepProps>(\n  ({ label, description, icon, className, ...props }, ref) => {\n    const { _index = 0, ...restProps } = props as StepInternalProps\n    const { activeStep, orientation, stepperId, onStepClick } = React.useContext(StepperContext)\n    const state: StepState = _index < activeStep ? 'completed' : _index === activeStep ? 'active' : 'pending'\n    const isClickable = state === 'completed' && !!onStepClick\n\n    const stepContent = (\n      <>\n        <div\n          className={cn(\n            'relative shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-ds-full text-ds-sm font-semibold',\n            'transition-[background-color,border-color,color] duration-moderate-01 ease-productive-standard',\n            state === 'completed' && 'bg-accent-9 text-accent-fg',\n            state === 'active' && 'bg-accent-9 text-accent-fg',\n            state === 'pending' && 'bg-surface-raised text-surface-fg-subtle border border-surface-border-strong',\n          )}\n        >\n          {icon || (state === 'completed' ? (\n            <svg\n              className=\"w-ico-sm h-ico-sm\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth={2.5}\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <polyline points=\"20 6 9 17 4 12\" />\n            </svg>\n          ) : (\n            _index + 1\n          ))}\n        </div>\n        <div className=\"flex flex-col\">\n          <span\n            className={cn(\n              'text-ds-md font-medium leading-ds-snug',\n              state === 'pending'\n                ? 'text-surface-fg-subtle'\n                : 'text-surface-fg',\n            )}\n          >\n            {label}\n          </span>\n          {description && (\n            <span className=\"text-ds-sm text-surface-fg-muted leading-ds-relaxed\">\n              {description}\n            </span>\n          )}\n        </div>\n      </>\n    )\n\n    if (isClickable) {\n      return (\n        <div\n          ref={ref}\n          data-step=\"\"\n          data-state={state}\n          role=\"listitem\"\n          className={cn(\n            orientation === 'vertical' && 'py-ds-02',\n            className,\n          )}\n          {...restProps}\n        >\n          <button\n            type=\"button\"\n            tabIndex={0}\n            aria-label={`Go to step ${_index + 1}: ${label}`}\n            onClick={() => onStepClick(_index)}\n            className={cn(\n              'flex items-center gap-ds-03 cursor-pointer select-none',\n              'rounded-ds-md px-ds-02 py-ds-01 -mx-ds-02 -my-ds-01',\n              'bg-transparent border-0',\n              'hover:bg-surface-raised-hover active:bg-surface-raised-active',\n              'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-8 focus-visible:ring-offset-2',\n              'transition-colors duration-fast-01 ease-productive-standard',\n            )}\n          >\n            {stepContent}\n          </button>\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        data-step=\"\"\n        data-state={state}\n        role=\"listitem\"\n        aria-current={state === 'active' ? 'step' : undefined}\n        aria-label={`Step ${_index + 1}: ${label}, ${state === 'completed' ? 'completed' : state === 'active' ? 'current' : 'upcoming'}`}\n        className={cn(\n          'flex items-center gap-ds-03',\n          orientation === 'vertical' && 'py-ds-02',\n          className,\n        )}\n        {...restProps}\n      >\n        {stepContent}\n      </div>\n    )\n  },\n)\n\n/**\n * Props for StepperContent — wraps the content panel for the active step, animating\n * slide transitions when `activeStep` changes. Detects forward vs backward navigation\n * and slides content accordingly.\n *\n * @example\n * <StepperContent activeStep={currentStep}>\n *   {currentStep === 0 && <AccountForm />}\n *   {currentStep === 1 && <ProfileForm />}\n *   {currentStep === 2 && <ReviewPanel />}\n * </StepperContent>\n */\ninterface StepperContentProps {\n  activeStep: number\n  children: React.ReactNode\n  className?: string\n}\n\nconst SLIDE_OFFSET = 40\n\nconst stepContentVariants = {\n  enter: (direction: number) => ({\n    opacity: 0,\n    x: direction * SLIDE_OFFSET,\n  }),\n  center: {\n    opacity: 1,\n    x: 0,\n  },\n  exit: (direction: number) => ({\n    opacity: 0,\n    x: direction * -SLIDE_OFFSET,\n  }),\n}\n\nfunction StepperContent({ activeStep, children, className }: StepperContentProps) {\n  const prevStepRef = React.useRef(activeStep)\n  const direction = activeStep >= prevStepRef.current ? 1 : -1\n\n  React.useEffect(() => {\n    prevStepRef.current = activeStep\n  }, [activeStep])\n\n  return (\n    <div className={cn('relative overflow-hidden', className)}>\n      <AnimatePresence mode=\"wait\" custom={direction}>\n        <motion.div\n          key={activeStep}\n          custom={direction}\n          variants={stepContentVariants}\n          initial=\"enter\"\n          animate=\"center\"\n          exit=\"exit\"\n          transition={springs.smooth}\n        >\n          {children}\n        </motion.div>\n      </AnimatePresence>\n    </div>\n  )\n}\n\nStepper.displayName = 'Stepper'\nStep.displayName = 'Step'\nStepperContent.displayName = 'StepperContent'\n\nexport { Stepper, Step, StepperContent, type StepperProps, type StepProps, type StepperContentProps }\n"],"mappings":"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"}

package/dist/ui/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/ui/switch.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,0BAA0B,CAAA;AAiB5D,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC;IAC/F,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAED,QAAA,MAAM,MAAM,uFAiDV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/ui/switch.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,0BAA0B,CAAA;AAkB5D,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC;IAC/F,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAED,QAAA,MAAM,MAAM,uFAyDV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/ui/switch.js

@@ -3,10 +3,11 @@ import { at as e, it as t } from "../_chunks/primitives.js";
 import { a as n } from "../_chunks/framer.js";
 import { springs as r } from "./lib/motion.js";
 import { cn as i } from "./lib/utils.js";
-import * as a from "react";
-import { jsx as o } from "react/jsx-runtime";
+import { useFormField as a } from "./form.js";
+import * as o from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/ui/switch.tsx
-var s = {
+var c = {
 	sm: {
 		track: "h-6 w-[38px]",
 		thumb: "h-5 w-5",
@@ -22,33 +23,36 @@ var s = {
 		thumb: "h-6 w-6",
 		travel: 24
 	}
-}, c = {
+}, l = {
 	accent: "data-[state=checked]:bg-accent-9",
 	success: "data-[state=checked]:bg-success-9",
 	warning: "data-[state=checked]:bg-warning-9"
-}, l = a.forwardRef(({ className: l, error: u, size: d = "md", color: f = "accent", thumbIcon: p, checked: m, defaultChecked: h, onCheckedChange: g, ..._ }, v) => {
-	let [y, b] = a.useState(h ?? !1), x = m === void 0 ? y : m, { track: S, thumb: C, travel: w } = s[d], T = a.useCallback((e) => {
-		m === void 0 && b(e), g?.(e);
-	}, [m, g]);
-	return /* @__PURE__ */ o(t, {
-		className: i("touch-target peer inline-flex shrink-0 cursor-pointer items-center rounded-ds-full border-2 border-surface-border-strong shadow-raised transition-colors duration-fast-01 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled data-[state=checked]:border-transparent data-[state=unchecked]:bg-surface-border-strong data-[state=unchecked]:hover:bg-surface-raised-active", S, c[f], u && "border-error-7 data-[state=checked]:bg-error-9", l),
-		checked: m,
-		defaultChecked: h,
-		onCheckedChange: T,
-		..._,
-		ref: v,
-		children: /* @__PURE__ */ o(e, {
+}, u = o.forwardRef(({ className: u, error: d, size: f = "md", color: p = "accent", thumbIcon: m, checked: h, defaultChecked: g, onCheckedChange: _, ...v }, y) => {
+	let b = a(), x = d ?? b.state === "error", S = v["aria-describedby"] ?? b.helperTextId, C = v["aria-required"] ?? b.required, [w, T] = o.useState(g ?? !1), E = h === void 0 ? w : h, { track: D, thumb: O, travel: k } = c[f], A = o.useCallback((e) => {
+		h === void 0 && T(e), _?.(e);
+	}, [h, _]);
+	return /* @__PURE__ */ s(t, {
+		className: i("touch-target peer inline-flex shrink-0 cursor-pointer items-center rounded-ds-full border-2 border-surface-border-strong shadow-raised transition-colors duration-fast-01 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled data-[state=checked]:border-transparent data-[state=unchecked]:bg-surface-border-strong data-[state=unchecked]:hover:bg-surface-raised-active", D, l[p], x && "border-error-7 data-[state=checked]:bg-error-9", u),
+		checked: h,
+		defaultChecked: g,
+		onCheckedChange: A,
+		"aria-invalid": x || void 0,
+		"aria-describedby": S,
+		"aria-required": C || void 0,
+		...v,
+		ref: y,
+		children: /* @__PURE__ */ s(e, {
 			asChild: !0,
-			children: /* @__PURE__ */ o(n.span, {
-				className: i("pointer-events-none flex items-center justify-center rounded-ds-full bg-accent-fg shadow-raised-hover ring-0", C),
-				animate: { x: x ? w : 0 },
+			children: /* @__PURE__ */ s(n.span, {
+				className: i("pointer-events-none flex items-center justify-center rounded-ds-full bg-accent-fg shadow-raised-hover ring-0", O),
+				animate: { x: E ? k : 0 },
 				whileTap: { scale: .85 },
 				transition: r.snappy,
-				children: p
+				children: m
 			})
 		})
 	});
 });
-l.displayName = t.displayName;
+u.displayName = t.displayName;
 //#endregion
-export { l as Switch };
+export { u as Switch };

package/dist/ui/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","names":[],"sources":["../../src/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport { motion } from 'framer-motion'\nimport * as React from \"react\"\nimport * as SwitchPrimitives from \"@primitives/react-switch\"\n\nimport { springs } from './lib/motion'\nimport { cn } from \"./lib/utils\"\nimport { useFormField } from './form'\n\nconst sizeConfig = {\n  sm: { track: 'h-6 w-[38px]', thumb: 'h-5 w-5', travel: 16 },\n  md: { track: 'h-6 w-11', thumb: 'h-ico-md w-ico-md', travel: 20 },\n  lg: { track: 'h-7 w-[52px]', thumb: 'h-6 w-6', travel: 24 },\n} as const\n\nconst colorMap = {\n  accent: 'data-[state=checked]:bg-accent-9',\n  success: 'data-[state=checked]:bg-success-9',\n  warning: 'data-[state=checked]:bg-warning-9',\n} as const\n\nexport interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {\n  error?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'accent' | 'success' | 'warning'\n  thumbIcon?: React.ReactNode\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  SwitchProps\n>(({ className, error, size = 'md', color = 'accent', thumbIcon, checked, defaultChecked, onCheckedChange, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  const isError = error ?? fieldCtx.state === 'error'\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  // Track checked state internally to drive Framer Motion animation\n  const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false)\n  const isChecked = checked !== undefined ? checked : internalChecked\n  const { track, thumb, travel } = sizeConfig[size]\n\n  const handleCheckedChange = React.useCallback(\n    (value: boolean) => {\n      if (checked === undefined) {\n        setInternalChecked(value)\n      }\n      onCheckedChange?.(value)\n    },\n    [checked, onCheckedChange],\n  )\n\n  return (\n    <SwitchPrimitives.Root\n      className={cn(\n        \"touch-target peer inline-flex shrink-0 cursor-pointer items-center rounded-ds-full border-2 border-surface-border-strong shadow-raised transition-colors duration-fast-01 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled data-[state=checked]:border-transparent data-[state=unchecked]:bg-surface-border-strong data-[state=unchecked]:hover:bg-surface-raised-active\",\n        track,\n        colorMap[color],\n        isError && \"border-error-7 data-[state=checked]:bg-error-9\",\n        className\n      )}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={handleCheckedChange}\n      aria-invalid={isError || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      {...props}\n      ref={ref}\n    >\n      <SwitchPrimitives.Thumb asChild>\n        <motion.span\n          className={cn(\n            \"pointer-events-none flex items-center justify-center rounded-ds-full bg-accent-fg shadow-raised-hover ring-0\",\n            thumb\n          )}\n          animate={{ x: isChecked ? travel : 0 }}\n          whileTap={{ scale: 0.85 }}\n          transition={springs.snappy}\n        >\n          {thumbIcon}\n        </motion.span>\n      </SwitchPrimitives.Thumb>\n    </SwitchPrimitives.Root>\n  )\n})\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n"],"mappings":";;;;;;;;;AAUA,IAAM,IAAa;CACjB,IAAI;EAAE,OAAO;EAAgB,OAAO;EAAW,QAAQ;EAAI;CAC3D,IAAI;EAAE,OAAO;EAAY,OAAO;EAAqB,QAAQ;EAAI;CACjE,IAAI;EAAE,OAAO;EAAgB,OAAO;EAAW,QAAQ;EAAI;CAC5D,EAEK,IAAW;CACf,QAAQ;CACR,SAAS;CACT,SAAS;CACV,EASK,IAAS,EAAM,YAGlB,EAAE,cAAW,UAAO,UAAO,MAAM,WAAQ,UAAU,cAAW,YAAS,mBAAgB,oBAAiB,GAAG,KAAS,MAAQ;CAC7H,IAAM,IAAW,GAAc,EACzB,IAAU,KAAS,EAAS,UAAU,SACtC,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAGlD,CAAC,GAAiB,KAAsB,EAAM,SAAS,KAAkB,GAAM,EAC/E,IAAY,MAAY,KAAA,IAAsB,IAAV,GACpC,EAAE,UAAO,UAAO,cAAW,EAAW,IAEtC,IAAsB,EAAM,aAC/B,MAAmB;AAIlB,EAHI,MAAY,KAAA,KACd,EAAmB,EAAM,EAE3B,IAAkB,EAAM;IAE1B,CAAC,GAAS,EAAgB,CAC3B;AAED,QACE,kBAAC,GAAD;EACE,WAAW,EACT,keACA,GACA,EAAS,IACT,KAAW,kDACX,EACD;EACQ;EACO;EAChB,iBAAiB;EACjB,gBAAc,KAAW,KAAA;EACzB,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,GAAI;EACC;YAEL,kBAAC,GAAD;GAAwB,SAAA;aACtB,kBAAC,EAAO,MAAR;IACE,WAAW,EACT,gHACA,EACD;IACD,SAAS,EAAE,GAAG,IAAY,IAAS,GAAG;IACtC,UAAU,EAAE,OAAO,KAAM;IACzB,YAAY,EAAQ;cAEnB;IACW,CAAA;GACS,CAAA;EACH,CAAA;EAE1B;AACF,EAAO,cAAA,EAAoC"}

package/dist/ui/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":[],"sources":["../../src/ui/table.tsx"],"sourcesContent":["// @server-safe\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto\">\n    <table\n      ref={ref}\n      className={cn(\"w-full caption-bottom text-ds-md\", className)}\n      {...props}\n    />\n  </div>\n))\nTable.displayName = \"Table\"\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"\", className)} {...props} />\n))\nTableHeader.displayName = \"TableHeader\"\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n))\nTableBody.displayName = \"TableBody\"\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      \"bg-[color-mix(in_srgb,var(--color-surface-raised)_50%,transparent)] font-medium [&>tr]:last:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = \"TableFooter\"\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      \"transition-colors hover:bg-surface-raised data-[state=selected]:bg-accent-3\",\n      className\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    scope=\"col\"\n    className={cn(\n      \"h-ds-md px-ds-03 text-left font-medium text-surface-fg-muted [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"py-ds-03 px-ds-03 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      className\n    )}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-ds-05 text-ds-md text-surface-fg-muted\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport type TableProps = React.HTMLAttributes<HTMLTableElement>\nexport type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>\nexport type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n"],"mappings":";;;;AAKA,IAAM,IAAQ,EAAM,YAGjB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,SAAD;EACO;EACL,WAAW,EAAG,oCAAoC,EAAU;EAC5D,GAAI;EACJ,CAAA;CACE,CAAA,CACN;AACF,EAAM,cAAc;AAEpB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CAAY;CAAK,WAAW,EAAG,IAAI,EAAU;CAAE,GAAI;CAAS,CAAA,CAC5D;AACF,EAAY,cAAc;AAE1B,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAAG,8BAA8B,EAAU;CACtD,GAAI;CACJ,CAAA,CACF;AACF,EAAU,cAAc;AAExB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EACT,0GACA,EACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,EAAY,cAAc;AAE1B,IAAM,IAAW,EAAM,YAGpB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,WAAW,EACT,+EACA,EACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,EAAS,cAAc;AAEvB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,OAAM;CACN,WAAW,EACT,oIACA,EACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,EAAU,cAAc;AAExB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,WAAW,EACT,yFACA,EACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,EAAU,cAAc;AAExB,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,WAAD;CACO;CACL,WAAW,EAAG,6CAA6C,EAAU;CACrE,GAAI;CACJ,CAAA,CACF;AACF,EAAa,cAAc"}

package/dist/ui/tabs.d.ts

@@ -2,6 +2,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as TabsPrimitive from '../primitives/react-tabs';
 import * as React from 'react';
+type TabsOrientation = 'horizontal' | 'vertical';
 /**
  * Tabs compound component — accessible tabbed navigation with keyboard support and two visual
  * variants (line underline and contained pill styles).
@@ -53,6 +54,7 @@ type TabsColor = 'accent' | 'neutral';
 declare const tabsListVariants: (props?: ({
     variant?: "line" | "contained" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const tabsTriggerVariants: (props?: ({
     variant?: "line" | "contained" | null | undefined;
@@ -88,5 +90,5 @@ declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.Ta
 /** Props for TabsContent. The `value` prop must match a TabsTrigger's `value`. */
 export type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
 export { Tabs, TabsList, TabsTrigger, TabsContent };
-export type { TabsSize, TabsColor };
+export type { TabsSize, TabsColor, TabsOrientation };
 //# sourceMappingURL=tabs.d.ts.map

package/dist/ui/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,aAAa,MAAM,wBAAwB,CAAA;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAQjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,QAAA,MAAM,IAAI,mJAgCR,CAAA;AAGF,0EAA0E;AAC1E,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAA;AAGjF,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAClC,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAgBrC,QAAA,MAAM,gBAAgB;;;8EAcpB,CAAA;AAEF,QAAA,MAAM,mBAAmB;;;8EAuBxB,CAAA;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,EAC/D,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,kFAAkF;IAClF,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,QAAA,MAAM,QAAQ,sFA4BZ,CAAA;AAGF,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,EAClE,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAa/C,QAAA,MAAM,WAAW,4FAyCf,CAAA;AAGF,QAAA,MAAM,WAAW,0JAoBf,CAAA;AAGF,kFAAkF;AAClF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAA;AAE3F,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA;AACnD,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,aAAa,MAAM,wBAAwB,CAAA;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,KAAK,eAAe,GAAG,YAAY,GAAG,UAAU,CAAA;AAIhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,QAAA,MAAM,IAAI,mJAyCR,CAAA;AAGF,0EAA0E;AAC1E,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAA;AAGjF,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAClC,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAgBrC,QAAA,MAAM,gBAAgB;;;;8EAwBpB,CAAA;AAEF,QAAA,MAAM,mBAAmB;;;8EAuBxB,CAAA;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,EAC/D,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,kFAAkF;IAClF,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,QAAA,MAAM,QAAQ,sFA6BZ,CAAA;AAGF,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,EAClE,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAa/C,QAAA,MAAM,WAAW,4FAoDf,CAAA;AAGF,QAAA,MAAM,WAAW,0JA0Bf,CAAA;AAGF,kFAAkF;AAClF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAA;AAE3F,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA;AACnD,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,CAAA"}

package/dist/ui/tabs.js

@@ -7,32 +7,37 @@ import { cn as l } from "./lib/utils.js";
 import * as u from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/ui/tabs.tsx
-var p = u.createContext(void 0), m = u.forwardRef(({ value: t, defaultValue: n, onValueChange: r, ...i }, a) => {
-	let [o, s] = u.useState(t ?? n ?? "");
+var p = u.createContext(void 0), m = u.createContext("horizontal"), h = u.forwardRef(({ value: t, defaultValue: n, onValueChange: r, orientation: i, ...a }, o) => {
+	let [s, c] = u.useState(t ?? n ?? "");
 	u.useEffect(() => {
-		t !== void 0 && s(t);
+		t !== void 0 && c(t);
 	}, [t]);
-	let c = u.useCallback((e) => {
-		s(e), r?.(e);
-	}, [r]);
+	let f = u.useCallback((e) => {
+		c(e), r?.(e);
+	}, [r]), h = i ?? "horizontal";
 	return /* @__PURE__ */ d(p.Provider, {
-		value: o,
-		children: /* @__PURE__ */ d(e, {
-			ref: a,
-			value: t,
-			defaultValue: t === void 0 ? n : void 0,
-			onValueChange: c,
-			...i
+		value: s,
+		children: /* @__PURE__ */ d(m.Provider, {
+			value: h,
+			children: /* @__PURE__ */ d(e, {
+				ref: o,
+				value: t,
+				defaultValue: t === void 0 ? n : void 0,
+				onValueChange: f,
+				orientation: i,
+				...a,
+				className: l(h === "vertical" && "flex flex-row gap-ds-05", a.className)
+			})
 		})
 	});
 });
-m.displayName = "Tabs";
-var h = u.createContext({
+h.displayName = "Tabs";
+var g = u.createContext({
 	variant: "line",
 	size: "md",
 	color: "accent",
 	layoutId: "tab-indicator"
-}), g = c("inline-flex items-center", {
+}), _ = c("inline-flex items-center", {
 	variants: {
 		variant: {
 			line: "border-b border-surface-border-strong w-full gap-0",
@@ -42,13 +47,27 @@ var h = u.createContext({
 			sm: "h-8",
 			md: "h-10",
 			lg: "h-12"
+		},
+		orientation: {
+			horizontal: "",
+			vertical: "flex-col"
 		}
 	},
+	compoundVariants: [{
+		variant: "line",
+		orientation: "vertical",
+		class: "border-b-0 border-l border-surface-border-strong w-48 shrink-0 h-auto gap-0"
+	}, {
+		variant: "contained",
+		orientation: "vertical",
+		class: "h-auto w-48 shrink-0"
+	}],
 	defaultVariants: {
 		variant: "line",
-		size: "md"
+		size: "md",
+		orientation: "horizontal"
 	}
-}), _ = c("relative inline-flex items-center justify-center gap-ds-02 whitespace-nowrap font-sans font-medium transition-colors duration-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-action-disabled", {
+}), v = c("relative inline-flex items-center justify-center gap-ds-02 whitespace-nowrap font-sans font-medium transition-colors duration-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-action-disabled", {
 	variants: {
 		variant: {
 			line: ["-mb-px", "text-surface-fg-muted hover:text-surface-fg"],
@@ -68,48 +87,49 @@ var h = u.createContext({
 		variant: "line",
 		size: "md"
 	}
-}), v = u.forwardRef(({ className: e, variant: n, size: r, color: i, ...o }, s) => {
-	let c = n ?? "line", f = r ?? "md", p = i ?? "accent", m = u.useId(), _ = u.useMemo(() => ({
-		variant: c,
-		size: f,
-		color: p,
-		layoutId: `tab-indicator-${m}`
+}), y = u.forwardRef(({ className: e, variant: n, size: r, color: i, ...o }, s) => {
+	let c = u.useContext(m), f = n ?? "line", p = r ?? "md", h = i ?? "accent", v = u.useId(), y = u.useMemo(() => ({
+		variant: f,
+		size: p,
+		color: h,
+		layoutId: `tab-indicator-${v}`
 	}), [
-		c,
 		f,
 		p,
-		m
+		h,
+		v
 	]);
-	return /* @__PURE__ */ d(h.Provider, {
-		value: _,
+	return /* @__PURE__ */ d(g.Provider, {
+		value: y,
 		children: /* @__PURE__ */ d(a, { children: /* @__PURE__ */ d(t, {
 			ref: s,
-			className: l(g({
-				variant: c,
-				size: f
+			className: l(_({
+				variant: f,
+				size: p,
+				orientation: c
 			}), e),
 			...o
 		}) })
 	});
 });
-v.displayName = t.displayName;
-var y = {
+y.displayName = t.displayName;
+var b = {
 	accent: "data-[state=active]:text-accent-11",
 	neutral: "data-[state=active]:text-surface-fg"
-}, b = {
+}, x = {
 	accent: "bg-accent-9",
 	neutral: "bg-surface-fg"
-}, x = u.forwardRef(({ className: e, variant: t, children: r, ...a }, s) => {
-	let c = u.useContext(h), m = u.useContext(p), g = t ?? c.variant, v = c.size, x = c.color, S = a.value === m;
+}, S = u.forwardRef(({ className: e, variant: t, children: r, ...a }, s) => {
+	let c = u.useContext(g), h = u.useContext(p), _ = u.useContext(m), y = t ?? c.variant, S = c.size, C = c.color, w = a.value === h, T = _ === "vertical";
 	return /* @__PURE__ */ f(n, {
 		ref: s,
-		className: l(_({
-			variant: g,
-			size: v
-		}), g === "line" && y[x], e),
+		className: l(v({
+			variant: y,
+			size: S
+		}), y === "line" && b[C], T && "w-full justify-start", y === "line" && T && "-ml-px -mb-0", e),
 		...a,
 		children: [
-			g === "contained" && S && /* @__PURE__ */ d(i.span, {
+			y === "contained" && w && /* @__PURE__ */ d(i.span, {
 				layoutId: `${c.layoutId}-contained`,
 				className: "absolute inset-0 rounded-ds-md bg-surface-overlay shadow-raised",
 				transition: o.smooth
@@ -118,18 +138,18 @@ var y = {
 				className: "relative z-[1] inline-flex items-center gap-ds-02",
 				children: r
 			}),
-			g === "line" && S && /* @__PURE__ */ d(i.span, {
+			y === "line" && w && /* @__PURE__ */ d(i.span, {
 				layoutId: `${c.layoutId}-line`,
-				className: l("absolute bottom-0 left-0 right-0 h-0.5", b[x]),
+				className: l("absolute", T ? "left-0 top-0 bottom-0 w-0.5" : "bottom-0 left-0 right-0 h-0.5", x[C]),
 				transition: o.smooth
 			})
 		]
 	});
 });
-x.displayName = n.displayName;
-var S = u.forwardRef(({ className: e, children: t, ...n }, a) => /* @__PURE__ */ d(r, {
+S.displayName = n.displayName;
+var C = u.forwardRef(({ className: e, children: t, ...n }, a) => /* @__PURE__ */ d(r, {
 	ref: a,
-	className: l("mt-ds-05 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", e),
+	className: l("ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", u.useContext(m) === "vertical" ? "mt-0 flex-1 min-w-0" : "mt-ds-05", e),
 	...n,
 	children: /* @__PURE__ */ d(i.div, {
 		initial: { opacity: 0 },
@@ -138,6 +158,6 @@ var S = u.forwardRef(({ className: e, children: t, ...n }, a) => /* @__PURE__ */
 		children: t
 	})
 }));
-S.displayName = r.displayName;
+C.displayName = r.displayName;
 //#endregion
-export { m as Tabs, S as TabsContent, v as TabsList, x as TabsTrigger };
+export { h as Tabs, C as TabsContent, y as TabsList, S as TabsTrigger };

package/dist/ui/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../../src/ui/tabs.tsx"],"sourcesContent":["'use client'\n\nimport * as TabsPrimitive from '@primitives/react-tabs'\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion, LayoutGroup } from 'framer-motion'\nimport { cn } from './lib/utils'\nimport { springs, tweens } from './lib/motion'\n\n/* ── Active-value context (drives layoutId indicator) ────── */\ntype TabsOrientation = 'horizontal' | 'vertical'\nconst TabsValueContext = React.createContext<string | undefined>(undefined)\nconst TabsOrientationContext = React.createContext<TabsOrientation>('horizontal')\n\n/**\n * Tabs compound component — accessible tabbed navigation with keyboard support and two visual\n * variants (line underline and contained pill styles).\n *\n * **Parts (in composition order):**\n * - `Tabs` — manages active tab state (this root; takes `defaultValue`, `value`, `onValueChange`)\n * - `TabsList` — tab bar container (takes `variant=\"line\"|\"contained\"`, default `\"line\"`)\n * - `TabsTrigger` — individual tab button (requires `value`; inherits `variant` from TabsList via context)\n * - `TabsContent` — the panel shown when its tab is active (requires `value` matching a TabsTrigger)\n *\n * **Critical behavior:** `variant` set on `TabsList` propagates automatically via React context to\n * all `TabsTrigger` children. You do NOT need to repeat `variant` on each trigger — but you CAN\n * override it per-trigger if needed.\n *\n * The active tab indicator animates between tabs using Framer Motion `layoutId`. Line variant\n * shows a sliding underline; contained variant shows a sliding pill background.\n *\n * @compound\n * @example\n * // Default line variant:\n * <Tabs defaultValue=\"overview\">\n *   <TabsList>\n *     <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n *     <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"overview\">Overview content</TabsContent>\n *   <TabsContent value=\"activity\">Activity content</TabsContent>\n *   <TabsContent value=\"settings\">Settings content</TabsContent>\n * </Tabs>\n *\n * @example\n * // Contained pill variant (controlled):\n * const [tab, setTab] = useState('members')\n * <Tabs value={tab} onValueChange={setTab}>\n *   <TabsList variant=\"contained\">\n *     <TabsTrigger value=\"members\">Members</TabsTrigger>\n *     <TabsTrigger value=\"roles\">Roles</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"members\">Members list here.</TabsContent>\n *   <TabsContent value=\"roles\">Roles list here.</TabsContent>\n * </Tabs>\n */\nconst Tabs = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n>(({ value: valueProp, defaultValue, onValueChange, orientation, ...props }, ref) => {\n  // Track the active value so TabsTrigger can conditionally render the motion indicator.\n  // For controlled usage, mirror the prop; for uncontrolled, manage internal state.\n  const [activeValue, setActiveValue] = React.useState(valueProp ?? defaultValue ?? '')\n\n  // Sync controlled value\n  React.useEffect(() => {\n    if (valueProp !== undefined) setActiveValue(valueProp)\n  }, [valueProp])\n\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      setActiveValue(newValue)\n      onValueChange?.(newValue)\n    },\n    [onValueChange],\n  )\n\n  const resolvedOrientation: TabsOrientation = orientation ?? 'horizontal'\n\n  return (\n    <TabsValueContext.Provider value={activeValue}>\n      <TabsOrientationContext.Provider value={resolvedOrientation}>\n        <TabsPrimitive.Root\n          ref={ref}\n          value={valueProp}\n          defaultValue={valueProp === undefined ? defaultValue : undefined}\n          onValueChange={handleValueChange}\n          orientation={orientation}\n          {...props}\n          className={cn(\n            resolvedOrientation === 'vertical' && 'flex flex-row gap-ds-05',\n            props.className,\n          )}\n        />\n      </TabsOrientationContext.Provider>\n    </TabsValueContext.Provider>\n  )\n})\nTabs.displayName = 'Tabs'\n\n/** Props for the Tabs root (defaultValue, value, onValueChange, etc.). */\nexport type TabsProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>\n\ntype TabsVariant = 'line' | 'contained'\ntype TabsSize = 'sm' | 'md' | 'lg'\ntype TabsColor = 'accent' | 'neutral'\n\ninterface TabsListContextValue {\n  variant: TabsVariant\n  size: TabsSize\n  color: TabsColor\n  layoutId: string\n}\n\nconst TabsListContext = React.createContext<TabsListContextValue>({\n  variant: 'line',\n  size: 'md',\n  color: 'accent',\n  layoutId: 'tab-indicator',\n})\n\nconst tabsListVariants = cva('inline-flex items-center', {\n  variants: {\n    variant: {\n      line: 'border-b border-surface-border-strong w-full gap-0',\n      contained:\n        'bg-surface-raised p-ds-02 rounded-ds-lg gap-ds-02',\n    },\n    size: {\n      sm: 'h-8',\n      md: 'h-10',\n      lg: 'h-12',\n    },\n    orientation: {\n      horizontal: '',\n      vertical: 'flex-col',\n    },\n  },\n  compoundVariants: [\n    // Vertical line: left border instead of bottom, fixed width, auto height\n    { variant: 'line', orientation: 'vertical', class: 'border-b-0 border-l border-surface-border-strong w-48 shrink-0 h-auto gap-0' },\n    // Vertical contained: column layout, fixed width, auto height\n    { variant: 'contained', orientation: 'vertical', class: 'h-auto w-48 shrink-0' },\n  ],\n  defaultVariants: { variant: 'line', size: 'md', orientation: 'horizontal' },\n})\n\nconst tabsTriggerVariants = cva(\n  'relative inline-flex items-center justify-center gap-ds-02 whitespace-nowrap font-sans font-medium transition-colors duration-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      variant: {\n        line: [\n          '-mb-px',\n          'text-surface-fg-muted hover:text-surface-fg',\n        ],\n        contained: [\n          'rounded-ds-md',\n          'text-surface-fg-muted hover:text-surface-fg',\n          'data-[state=active]:text-surface-fg',\n        ],\n      },\n      size: {\n        sm: 'px-ds-03 py-ds-02 text-ds-xs',\n        md: 'px-ds-05 py-ds-03 text-ds-sm',\n        lg: 'px-ds-06 py-ds-04 text-ds-md',\n      },\n    },\n    defaultVariants: { variant: 'line', size: 'md' },\n  },\n)\n\n/**\n * TabsList — container for tab triggers. Sets `variant` for all child TabsTriggers via context.\n *\n * **Compound structure — variant propagates automatically:**\n * ```tsx\n * <Tabs defaultValue=\"overview\">\n *   <TabsList variant=\"contained\">\n *     <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n *     <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n *   </TabsList>\n *   <TabsContent value=\"overview\">Overview content</TabsContent>\n *   <TabsContent value=\"activity\">Activity content</TabsContent>\n * </Tabs>\n * ```\n *\n * `variant` on `TabsList` flows to all `TabsTrigger` children via React context.\n * You do NOT need to repeat `variant` on each `TabsTrigger`.\n */\nexport interface TabsListProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {\n  /** Color axis — affects active tab indicator and text color. @default \"accent\" */\n  color?: TabsColor\n}\n\nconst TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(({ className, variant, size, color, ...props }, ref) => {\n  const orientation = React.useContext(TabsOrientationContext)\n  const resolvedVariant: TabsVariant = variant ?? 'line'\n  const resolvedSize: TabsSize = size ?? 'md'\n  const resolvedColor: TabsColor = color ?? 'accent'\n  const layoutId = React.useId()\n  const contextValue = React.useMemo(\n    () => ({\n      variant: resolvedVariant,\n      size: resolvedSize,\n      color: resolvedColor,\n      layoutId: `tab-indicator-${layoutId}`,\n    }),\n    [resolvedVariant, resolvedSize, resolvedColor, layoutId],\n  )\n  return (\n    <TabsListContext.Provider value={contextValue}>\n      <LayoutGroup>\n        <TabsPrimitive.List\n          ref={ref}\n          className={cn(tabsListVariants({ variant: resolvedVariant, size: resolvedSize, orientation }), className)}\n          {...props}\n        />\n      </LayoutGroup>\n    </TabsListContext.Provider>\n  )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nexport interface TabsTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,\n    VariantProps<typeof tabsTriggerVariants> {}\n\n/* ── Color classes for active state ────── */\nconst lineActiveColorMap: Record<TabsColor, string> = {\n  accent: 'data-[state=active]:text-accent-11',\n  neutral: 'data-[state=active]:text-surface-fg',\n}\n\nconst lineIndicatorColorMap: Record<TabsColor, string> = {\n  accent: 'bg-accent-9',\n  neutral: 'bg-surface-fg',\n}\n\nconst TabsTrigger = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTriggerProps\n>(({ className, variant: variantProp, children, ...props }, ref) => {\n  const listContext = React.useContext(TabsListContext)\n  const activeValue = React.useContext(TabsValueContext)\n  const orientation = React.useContext(TabsOrientationContext)\n  const variant = variantProp ?? listContext.variant\n  const size = listContext.size\n  const color = listContext.color\n  const isActive = props.value === activeValue\n  const isVertical = orientation === 'vertical'\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        tabsTriggerVariants({ variant, size }),\n        variant === 'line' && lineActiveColorMap[color],\n        // Vertical: full width triggers, left margin instead of bottom\n        isVertical && 'w-full justify-start',\n        variant === 'line' && isVertical && '-ml-px -mb-0',\n        className,\n      )}\n      {...props}\n    >\n      {/* Contained variant: sliding pill background */}\n      {variant === 'contained' && isActive && (\n        <motion.span\n          layoutId={`${listContext.layoutId}-contained`}\n          className=\"absolute inset-0 rounded-ds-md bg-surface-overlay shadow-raised\"\n          transition={springs.smooth}\n        />\n      )}\n      {/* Content sits above the indicator */}\n      <span className=\"relative z-[1] inline-flex items-center gap-ds-02\">{children}</span>\n      {/* Line variant: sliding indicator -- bottom underline (horizontal) or left bar (vertical) */}\n      {variant === 'line' && isActive && (\n        <motion.span\n          layoutId={`${listContext.layoutId}-line`}\n          className={cn(\n            'absolute',\n            isVertical\n              ? 'left-0 top-0 bottom-0 w-0.5'\n              : 'bottom-0 left-0 right-0 h-0.5',\n            lineIndicatorColorMap[color],\n          )}\n          transition={springs.smooth}\n        />\n      )}\n    </TabsPrimitive.Trigger>\n  )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, children, ...props }, ref) => {\n  const orientation = React.useContext(TabsOrientationContext)\n  const isVertical = orientation === 'vertical'\n\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      className={cn(\n        'ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n        isVertical ? 'mt-0 flex-1 min-w-0' : 'mt-ds-05',\n        className,\n      )}\n    {...props}\n  >\n    <motion.div\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={tweens.fade}\n    >\n      {children}\n    </motion.div>\n  </TabsPrimitive.Content>\n  )\n})\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\n/** Props for TabsContent. The `value` prop must match a TabsTrigger's `value`. */\nexport type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\nexport type { TabsSize, TabsColor, TabsOrientation }\n"],"mappings":"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"}

package/dist/ui/text.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const textVariants: (props?: ({
-    variant?: "caption" | "overline" | "heading-2xl" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs" | "body-lg" | "body-md" | "body-sm" | "body-xs" | "label-lg" | "label-md" | "label-sm" | "label-xs" | null | undefined;
+    variant?: "caption" | "code" | "overline" | "heading-2xl" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs" | "body-lg" | "body-md" | "body-sm" | "body-xs" | "label-lg" | "label-md" | "label-sm" | "label-xs" | "label-plain-lg" | "label-plain-md" | "label-plain-sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TextVariant = NonNullable<VariantProps<typeof textVariants>['variant']>;
 /**

package/dist/ui/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/ui/text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,YAAY;;8EAwBhB,CAAA;AAEF,KAAK,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;AAqB5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,KAAK,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI;IAClD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC,CAAA;AAErF,QAAA,MAAM,IAAI,iGAST,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,CAAA"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/ui/text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,YAAY;;8EA4BhB,CAAA;AAEF,KAAK,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;AAyB5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,KAAK,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI;IAClD,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC,CAAA;AAErF,QAAA,MAAM,IAAI,iGAST,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,CAAA"}