@devalok/shilp-sutra 0.57.0 → 0.59.0

package/dist/ui/stepper.js

@@ -1,52 +1,53 @@
 "use client";
-import { IconProvider as e } from "./icon-context.js";
-import { springs as t } from "./lib/motion.js";
-import { cn as n } from "./lib/utils.js";
-import { normalizeIcon as r } from "../_chunks/normalize-icon.js";
-import * as i from "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { AnimatePresence as c, motion as l } from "framer-motion";
+import { springs as e } from "./lib/motion.js";
+import { MotionPreference as t } from "../_chunks/motion-preference.js";
+import { IconProvider as n } from "./icon-context.js";
+import { cn as r } from "./lib/utils.js";
+import { normalizeIcon as i } from "../_chunks/normalize-icon.js";
+import * as a from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { AnimatePresence as l, motion as u } from "framer-motion";
 //#region src/ui/stepper.tsx
-var u = i.createContext({
+var d = a.createContext({
 	activeStep: 0,
 	orientation: "horizontal",
 	stepperId: ""
-}), d = i.forwardRef(({ activeStep: e, orientation: t = "horizontal", onStepClick: r, className: a, children: c, ...l }, d) => {
-	let f = i.Children.toArray(c), p = i.useId(), m = i.useMemo(() => ({
+}), f = a.forwardRef(({ activeStep: e, orientation: t = "horizontal", onStepClick: n, className: i, children: o, ...l }, u) => {
+	let f = a.Children.toArray(o), p = a.useId(), m = a.useMemo(() => ({
 		activeStep: e,
 		orientation: t,
 		stepperId: p,
-		onStepClick: r
+		onStepClick: n
 	}), [
 		e,
 		t,
 		p,
-		r
+		n
 	]);
-	return /* @__PURE__ */ o(u.Provider, {
+	return /* @__PURE__ */ s(d.Provider, {
 		value: m,
-		children: /* @__PURE__ */ o("div", {
-			ref: d,
-			className: n("flex gap-ds-02", t === "vertical" ? "flex-col" : "flex-row items-center", a),
+		children: /* @__PURE__ */ s("div", {
+			ref: u,
+			className: r("flex gap-ds-02", t === "vertical" ? "flex-col" : "flex-row items-center", i),
 			role: "list",
 			...l,
-			children: f.map((r, a) => /* @__PURE__ */ s(i.Fragment, { children: [i.isValidElement(r) ? i.cloneElement(r, { _index: a }) : r, a < f.length - 1 && /* @__PURE__ */ o("div", {
-				className: n("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"),
+			children: f.map((n, i) => /* @__PURE__ */ c(a.Fragment, { children: [a.isValidElement(n) ? a.cloneElement(n, { _index: i }) : n, i < f.length - 1 && /* @__PURE__ */ s("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__ */ o("div", {
-					className: n("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)})` }
+				children: /* @__PURE__ */ s("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"}(${+(i < e)})` }
 				})
-			})] }, a))
+			})] }, i))
 		})
 	});
-}), f = i.forwardRef(({ label: t, description: c, icon: l, className: d, ...f }, p) => {
-	let { _index: m = 0, ...h } = f, { activeStep: g, orientation: _, stepperId: v, onStepClick: y } = i.useContext(u), b = m < g ? "completed" : m === g ? "active" : "pending", x = b === "completed" && !!y, S = /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
-		className: n("relative shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-pill text-body-sm font-semibold", "transition-[background-color,border-color,color] duration-moderate-01 ease-productive-standard", b === "completed" && "bg-accent-9 text-accent-fg", b === "active" && "bg-accent-9 text-accent-fg", b === "pending" && "bg-surface-panel text-surface-fg-subtle border border-surface-border-strong"),
-		children: l ? /* @__PURE__ */ o(e, {
+}), p = a.forwardRef(({ label: e, description: t, icon: l, className: u, ...f }, p) => {
+	let { _index: m = 0, ...h } = f, { activeStep: g, orientation: _, stepperId: v, onStepClick: y } = a.useContext(d), b = m < g ? "completed" : m === g ? "active" : "pending", x = b === "completed" && !!y, S = /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+		className: r("relative shrink-0 flex items-center justify-center w-ds-sm h-ds-sm rounded-pill text-body-sm font-semibold", "transition-[background-color,border-color,color] duration-moderate-01 ease-productive-standard", b === "completed" && "bg-accent-9 text-accent-fg", b === "active" && "bg-accent-9 text-accent-fg", b === "pending" && "bg-surface-panel text-surface-fg-subtle border border-surface-border-strong"),
+		children: l ? /* @__PURE__ */ s(n, {
 			size: "sm",
-			children: r(l)
-		}) : b === "completed" ? /* @__PURE__ */ o("svg", {
+			children: i(l)
+		}) : b === "completed" ? /* @__PURE__ */ s("svg", {
 			className: "w-ico-sm h-ico-sm",
 			viewBox: "0 0 24 24",
 			fill: "none",
@@ -54,48 +55,48 @@ var u = i.createContext({
 			strokeWidth: 2.5,
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
-			children: /* @__PURE__ */ o("polyline", { points: "20 6 9 17 4 12" })
+			children: /* @__PURE__ */ s("polyline", { points: "20 6 9 17 4 12" })
 		}) : m + 1
-	}), /* @__PURE__ */ s("div", {
+	}), /* @__PURE__ */ c("div", {
 		className: "flex flex-col",
-		children: [/* @__PURE__ */ o("span", {
-			className: n("text-body-md font-medium leading-ds-snug", b === "pending" ? "text-surface-fg-subtle" : "text-surface-fg"),
-			children: t
-		}), c && /* @__PURE__ */ o("span", {
+		children: [/* @__PURE__ */ s("span", {
+			className: r("text-body-md font-medium leading-ds-snug", b === "pending" ? "text-surface-fg-subtle" : "text-surface-fg"),
+			children: e
+		}), t && /* @__PURE__ */ s("span", {
 			className: "text-body-sm text-surface-fg-muted leading-ds-relaxed",
-			children: c
+			children: t
 		})]
 	})] });
-	return x ? /* @__PURE__ */ o("div", {
+	return x ? /* @__PURE__ */ s("div", {
 		ref: p,
 		"data-step": "",
 		"data-state": b,
 		role: "listitem",
-		className: n(_ === "vertical" && "py-ds-02", d),
+		className: r(_ === "vertical" && "py-ds-02", u),
 		...h,
-		children: /* @__PURE__ */ o("button", {
+		children: /* @__PURE__ */ s("button", {
 			type: "button",
 			tabIndex: 0,
-			"aria-label": `Go to step ${m + 1}: ${t}`,
+			"aria-label": `Go to step ${m + 1}: ${e}`,
 			onClick: () => y(m),
-			className: n("flex items-center gap-ds-03 cursor-pointer select-none", "rounded-control px-ds-02 py-ds-01 -mx-ds-02 -my-ds-01", "bg-transparent border-0", "hover:bg-surface-panel-hover active:bg-surface-panel-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"),
+			className: r("flex items-center gap-ds-03 cursor-pointer select-none", "rounded-control px-ds-02 py-ds-01 -mx-ds-02 -my-ds-01", "bg-transparent border-0", "hover:bg-surface-panel-hover active:bg-surface-panel-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: S
 		})
-	}) : /* @__PURE__ */ o("div", {
+	}) : /* @__PURE__ */ s("div", {
 		ref: p,
 		"data-step": "",
 		"data-state": b,
 		role: "listitem",
 		"aria-current": b === "active" ? "step" : void 0,
-		"aria-label": `Step ${m + 1}: ${t}, ${b === "completed" ? "completed" : b === "active" ? "current" : "upcoming"}`,
-		className: n("flex items-center gap-ds-03", _ === "vertical" && "py-ds-02", d),
+		"aria-label": `Step ${m + 1}: ${e}, ${b === "completed" ? "completed" : b === "active" ? "current" : "upcoming"}`,
+		className: r("flex items-center gap-ds-03", _ === "vertical" && "py-ds-02", u),
 		...h,
 		children: S
 	});
-}), p = 40, m = {
+}), m = 40, h = {
 	enter: (e) => ({
 		opacity: 0,
-		x: e * p
+		x: e * m
 	}),
 	center: {
 		opacity: 1,
@@ -106,27 +107,27 @@ var u = i.createContext({
 		x: e * -40
 	})
 };
-function h({ activeStep: e, children: r, className: a }) {
-	let s = i.useRef(e), u = e >= s.current ? 1 : -1;
-	return i.useEffect(() => {
-		s.current = e;
-	}, [e]), /* @__PURE__ */ o("div", {
-		className: n("relative overflow-hidden", a),
-		children: /* @__PURE__ */ o(c, {
+function g({ activeStep: n, children: i, className: o }) {
+	let c = a.useRef(n), d = n >= c.current ? 1 : -1;
+	return a.useEffect(() => {
+		c.current = n;
+	}, [n]), /* @__PURE__ */ s(t, { children: /* @__PURE__ */ s("div", {
+		className: r("relative overflow-hidden", o),
+		children: /* @__PURE__ */ s(l, {
 			mode: "wait",
-			custom: u,
-			children: /* @__PURE__ */ o(l.div, {
-				custom: u,
-				variants: m,
+			custom: d,
+			children: /* @__PURE__ */ s(u.div, {
+				custom: d,
+				variants: h,
 				initial: "enter",
 				animate: "center",
 				exit: "exit",
-				transition: t.smooth,
-				children: r
-			}, e)
+				transition: e.smooth,
+				children: i
+			}, n)
 		})
-	});
+	}) });
 }
-d.displayName = "Stepper", f.displayName = "Step", h.displayName = "StepperContent";
+f.displayName = "Stepper", p.displayName = "Step", g.displayName = "StepperContent";
 //#endregion
-export { f as Step, d as Stepper, h as StepperContent };
+export { p as Step, f as Stepper, g as StepperContent };

package/dist/ui/stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.js","names":[],"sources":["../../src/ui/stepper.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { IconProvider } from './icon-context'\nimport type { IconInput } from './lib/icon-input'\nimport { springs } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\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?: IconInput\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-pill text-body-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-panel text-surface-fg-subtle border border-surface-border-strong',\n          )}\n        >\n          {icon ? <IconProvider size=\"sm\">{normalizeIcon(icon)}</IconProvider> : (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-body-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-body-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-control px-ds-02 py-ds-01 -mx-ds-02 -my-ds-01',\n              'bg-transparent border-0',\n              'hover:bg-surface-panel-hover active:bg-surface-panel-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 { Step, Stepper, StepperContent, type StepperContentProps,type StepperProps, type StepProps }\n"],"mappings":"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"}
+{"version":3,"file":"stepper.js","names":[],"sources":["../../src/ui/stepper.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { MotionPreference } from '../motion/motion-preference'\nimport { IconProvider } from './icon-context'\nimport type { IconInput } from './lib/icon-input'\nimport { springs } from './lib/motion'\nimport { normalizeIcon } from './lib/normalize-icon'\nimport { cn } from './lib/utils'\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?: IconInput\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-pill text-body-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-panel text-surface-fg-subtle border border-surface-border-strong',\n          )}\n        >\n          {icon ? <IconProvider size=\"sm\">{normalizeIcon(icon)}</IconProvider> : (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-body-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-body-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-control px-ds-02 py-ds-01 -mx-ds-02 -my-ds-01',\n              'bg-transparent border-0',\n              'hover:bg-surface-panel-hover active:bg-surface-panel-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    <MotionPreference>\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    </MotionPreference>\n  )\n}\n\nStepper.displayName = 'Stepper'\nStep.displayName = 'Step'\nStepperContent.displayName = 'StepperContent'\n\nexport { Step, Stepper, StepperContent, type StepperContentProps,type StepperProps, type StepProps }\n"],"mappings":"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"}

package/dist/ui/table.js

@@ -10,7 +10,7 @@ var r = {
 	className: "relative w-full overflow-auto",
 	children: /* @__PURE__ */ n("table", {
 		ref: s,
-		className: e("w-full caption-bottom text-body-md overflow-x-clip [--table-edge:var(--card-spacing,var(--spacing-ds-04))]", r[i], a && "[&_tbody_tr:nth-child(even)]:bg-surface-base", t),
+		className: e("w-full caption-bottom text-body-md overflow-x-clip [--table-edge:var(--card-spacing,var(--spacing-ds-04))]", r[i], a && "[&_tbody_tr:nth-child(even)]:bg-surface-panel-hover", t),
 		...o
 	})
 }));
@@ -29,13 +29,13 @@ var o = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("tbody", {
 o.displayName = "TableBody";
 var s = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("tfoot", {
 	ref: i,
-	className: e("border-t border-surface-border-subtle bg-surface-base font-medium [&>tr]:last:border-b-0", t),
+	className: e("border-t border-surface-border-subtle bg-surface-panel-hover font-medium [&>tr]:last:border-b-0", t),
 	...r
 }));
 s.displayName = "TableFooter";
 var c = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("tr", {
 	ref: i,
-	className: e("group/row border-b border-surface-border-subtle transition-colors hover:bg-surface-panel-hover data-[state=selected]:bg-accent-3 data-[state=selected]:hover:bg-accent-4 data-[state=selected]:forced-colors:outline data-[state=selected]:forced-colors:outline-1", "has-[[data-slot=row-link]:focus-visible]:outline-2 has-[[data-slot=row-link]:focus-visible]:outline-accent-9 has-[[data-slot=row-link]:focus-visible]:-outline-offset-2", t),
+	className: e("group/row border-b border-surface-border-subtle transition-colors hover:bg-surface-panel-hover data-[state=selected]:bg-accent-4 data-[state=selected]:hover:bg-accent-5 data-[state=selected]:forced-colors:outline data-[state=selected]:forced-colors:outline-1", "has-[[data-slot=row-link]:focus-visible]:outline-2 has-[[data-slot=row-link]:focus-visible]:outline-accent-9 has-[[data-slot=row-link]:focus-visible]:-outline-offset-2", t),
 	...r
 }));
 c.displayName = "TableRow";

package/dist/ui/table.js.map

@@ -1 +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\n/** Row density — sets --table-py, which header and body cells both read. */\ntype TableDensity = 'compact' | 'standard' | 'comfortable'\n\n// One variable pair drives the table's spacing (same pattern as Card):\n// --table-py    vertical cell padding per density (4 / 8 / 12px → rows ≈ 29 / 37 / 45px)\n// --table-edge  first/last-cell inline padding — inherits --card-spacing when the table\n//               sits inside a Card, so edge columns align with the card's slots;\n//               falls back to ds-04 (12px) standalone.\nconst densityClasses: Record<TableDensity, string> = {\n  compact: '[--table-py:var(--spacing-ds-02)]',\n  standard: '[--table-py:var(--spacing-ds-03)]',\n  comfortable: '[--table-py:var(--spacing-ds-04)]',\n}\n\nexport interface TableCellBaseProps {\n  /**\n   * Quantitative column: right-aligns and uses tabular figures so digits line up.\n   * Keep decimal places consistent per column; identifier-numbers (dates, phones,\n   * IDs) stay left-aligned — they're names, not quantities.\n   */\n  numeric?: boolean\n}\n\nexport interface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  /** Row density — vertical cell padding for header + body. @default 'standard' */\n  density?: TableDensity\n  /**\n   * Zebra striping (even body rows get the faintest surface step). Opt-in only —\n   * for very wide/dense tables; hairline separators are the default row cue.\n   */\n  striped?: boolean\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, density = 'standard', striped, ...props }, ref) => (\n    <div className=\"relative w-full overflow-auto\">\n      <table\n        ref={ref}\n        className={cn(\n          // overflow-x-clip contains TableRowLink's 100vw stretch pseudo-element\n          // without creating a horizontal scrollbar (the wrapper owns scrolling).\n          \"w-full caption-bottom text-body-md overflow-x-clip [--table-edge:var(--card-spacing,var(--spacing-ds-04))]\",\n          densityClasses[density],\n          striped && \"[&_tbody_tr:nth-child(even)]:bg-surface-base\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  ),\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(\"[&_tr]:border-b [&_tr]:border-surface-border-subtle\", 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      // surface-base band, not raised@50% — the footer must read against the\n      // card surface the table lives on (same mis-mapped shadcn muted/50 family\n      // as the row-hover bug).\n      \"border-t border-surface-border-subtle bg-surface-base 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      // panel-hover, NOT panel — tables live on cards (surface-panel), so a\n      // surface-panel hover would be invisible (the 0.44-era port bug).\n      // selected+hover gets its own explicit step — without it the hover and\n      // selected classes tie on specificity and stylesheet order decides.\n      // `group/row` lets TableRowActions reveal on row hover/focus; the has-[]\n      // rule draws a row-level focus ring when a TableRowLink inside is\n      // keyboard-focused (the anchor itself suppresses its own ring).\n      \"group/row border-b border-surface-border-subtle transition-colors hover:bg-surface-panel-hover data-[state=selected]:bg-accent-3 data-[state=selected]:hover:bg-accent-4 data-[state=selected]:forced-colors:outline data-[state=selected]:forced-colors:outline-1\",\n      \"has-[[data-slot=row-link]:focus-visible]:outline-2 has-[[data-slot=row-link]:focus-visible]:outline-accent-9 has-[[data-slot=row-link]:focus-visible]:-outline-offset-2\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <th\n    ref={ref}\n    scope=\"col\"\n    className={cn(\n      // Header is quieter than the data: one step smaller, medium, muted.\n      // Height tracks density via the same --table-py the body cells read.\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) text-left align-middle text-body-sm font-medium text-surface-fg-muted [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right tabular-nums\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nexport interface TableRowActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Always show the actions instead of revealing on row hover/focus. Use for\n   * tables where actions must be permanently discoverable (the GitLab stance),\n   * or when the row has few columns and the density win doesn't matter.\n   */\n  persist?: boolean\n}\n\n/**\n * Right-aligned action cluster for a table row, revealed on row hover — and,\n * critically, on keyboard focus: the buttons stay in the tab order permanently\n * (opacity reveal, never display:none) and appear the moment focus enters the\n * row (WCAG 1.4.13). On touch devices (no hover) they are always visible.\n *\n * Give the actions column a visually-hidden header: `<TableHead><span className=\"sr-only\">Actions</span></TableHead>`.\n *\n * @example\n * <TableCell>\n *   <TableRowActions>\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Download ${name}`} icon={<IconDownload />} />\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Delete ${name}`} icon={<IconTrash />} />\n *   </TableRowActions>\n * </TableCell>\n */\nconst TableRowActions = React.forwardRef<HTMLDivElement, TableRowActionsProps>(\n  ({ className, persist, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-center justify-end gap-ds-01 transition-opacity duration-fast-01 ease-productive-standard\",\n        persist\n          ? \"opacity-100\"\n          : \"opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 pointer-coarse:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nTableRowActions.displayName = \"TableRowActions\"\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-body-md text-surface-fg-muted\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>\nexport type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>\nexport type { TableDensity }\n\nexport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n  TableRowActions,\n}\n"],"mappings":";;;;AAaA,IAAM,IAA+C;CACnD,SAAS;CACT,UAAU;CACV,aAAa;AACf,GAqBM,IAAQ,EAAM,YACjB,EAAE,cAAW,aAAU,YAAY,YAAS,GAAG,KAAS,MACvD,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,SAAD;EACO;EACL,WAAW,EAGT,8GACA,EAAe,IACf,KAAW,gDACX,CACF;EACA,GAAI;CACL,CAAA;AACE,CAAA,CAET;AACA,EAAM,cAAc;AAEpB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CAAY;CAAK,WAAW,EAAG,uDAAuD,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC/G;AACD,EAAY,cAAc;AAE1B,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAAG,8BAA8B,CAAS;CACrD,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAIT,4FACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAY,cAAc;AAE1B,IAAM,IAAW,EAAM,YAGpB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,WAAW,EAQT,sQACA,2KACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAS,cAAc;AAEvB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,OAAM;CACN,WAAW,EAGT,qNACA,KAAW,cACX,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,WAAW,EACT,4JACA,KAAW,2BACX,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AA2BxB,IAAM,IAAkB,EAAM,YAC3B,EAAE,cAAW,YAAS,GAAG,KAAS,MACjC,kBAAC,OAAD;CACO;CACL,WAAW,EACT,wGACA,IACI,gBACA,uGACJ,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAgB,cAAc;AAE9B,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,WAAD;CACO;CACL,WAAW,EAAG,+CAA+C,CAAS;CACtE,GAAI;AACL,CAAA,CACF;AACD,EAAa,cAAc"}
+{"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\n/** Row density — sets --table-py, which header and body cells both read. */\ntype TableDensity = 'compact' | 'standard' | 'comfortable'\n\n// One variable pair drives the table's spacing (same pattern as Card):\n// --table-py    vertical cell padding per density (4 / 8 / 12px → rows ≈ 29 / 37 / 45px)\n// --table-edge  first/last-cell inline padding — inherits --card-spacing when the table\n//               sits inside a Card, so edge columns align with the card's slots;\n//               falls back to ds-04 (12px) standalone.\nconst densityClasses: Record<TableDensity, string> = {\n  compact: '[--table-py:var(--spacing-ds-02)]',\n  standard: '[--table-py:var(--spacing-ds-03)]',\n  comfortable: '[--table-py:var(--spacing-ds-04)]',\n}\n\nexport interface TableCellBaseProps {\n  /**\n   * Quantitative column: right-aligns and uses tabular figures so digits line up.\n   * Keep decimal places consistent per column; identifier-numbers (dates, phones,\n   * IDs) stay left-aligned — they're names, not quantities.\n   */\n  numeric?: boolean\n}\n\nexport interface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  /** Row density — vertical cell padding for header + body. @default 'standard' */\n  density?: TableDensity\n  /**\n   * Zebra striping (even body rows get the faintest surface step). Opt-in only —\n   * for very wide/dense tables; hairline separators are the default row cue.\n   */\n  striped?: boolean\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, density = 'standard', striped, ...props }, ref) => (\n    <div className=\"relative w-full overflow-auto\">\n      <table\n        ref={ref}\n        className={cn(\n          // overflow-x-clip contains TableRowLink's 100vw stretch pseudo-element\n          // without creating a horizontal scrollbar (the wrapper owns scrolling).\n          \"w-full caption-bottom text-body-md overflow-x-clip [--table-edge:var(--card-spacing,var(--spacing-ds-04))]\",\n          densityClasses[density],\n          striped && \"[&_tbody_tr:nth-child(even)]:bg-surface-panel-hover\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  ),\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(\"[&_tr]:border-b [&_tr]:border-surface-border-subtle\", 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      // surface-base band, not raised@50% — the footer must read against the\n      // card surface the table lives on (same mis-mapped shadcn muted/50 family\n      // as the row-hover bug).\n      \"border-t border-surface-border-subtle bg-surface-panel-hover 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      // panel-hover, NOT panel — tables live on cards (surface-panel), so a\n      // surface-panel hover would be invisible (the 0.44-era port bug).\n      // selected+hover gets its own explicit step — without it the hover and\n      // selected classes tie on specificity and stylesheet order decides.\n      // `group/row` lets TableRowActions reveal on row hover/focus; the has-[]\n      // rule draws a row-level focus ring when a TableRowLink inside is\n      // keyboard-focused (the anchor itself suppresses its own ring).\n      \"group/row border-b border-surface-border-subtle transition-colors hover:bg-surface-panel-hover data-[state=selected]:bg-accent-4 data-[state=selected]:hover:bg-accent-5 data-[state=selected]:forced-colors:outline data-[state=selected]:forced-colors:outline-1\",\n      \"has-[[data-slot=row-link]:focus-visible]:outline-2 has-[[data-slot=row-link]:focus-visible]:outline-accent-9 has-[[data-slot=row-link]:focus-visible]:-outline-offset-2\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableRow.displayName = \"TableRow\"\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <th\n    ref={ref}\n    scope=\"col\"\n    className={cn(\n      // Header is quieter than the data: one step smaller, medium, muted.\n      // Height tracks density via the same --table-py the body cells read.\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) text-left align-middle text-body-sm font-medium text-surface-fg-muted [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableHead.displayName = \"TableHead\"\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement> & TableCellBaseProps\n>(({ className, numeric, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"py-(--table-py) px-ds-04 first:pl-(--table-edge) last:pr-(--table-edge) align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n      numeric && \"text-right tabular-nums\",\n      className,\n    )}\n    {...props}\n  />\n))\nTableCell.displayName = \"TableCell\"\n\nexport interface TableRowActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Always show the actions instead of revealing on row hover/focus. Use for\n   * tables where actions must be permanently discoverable (the GitLab stance),\n   * or when the row has few columns and the density win doesn't matter.\n   */\n  persist?: boolean\n}\n\n/**\n * Right-aligned action cluster for a table row, revealed on row hover — and,\n * critically, on keyboard focus: the buttons stay in the tab order permanently\n * (opacity reveal, never display:none) and appear the moment focus enters the\n * row (WCAG 1.4.13). On touch devices (no hover) they are always visible.\n *\n * Give the actions column a visually-hidden header: `<TableHead><span className=\"sr-only\">Actions</span></TableHead>`.\n *\n * @example\n * <TableCell>\n *   <TableRowActions>\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Download ${name}`} icon={<IconDownload />} />\n *     <IconButton size=\"xs\" variant=\"ghost\" aria-label={`Delete ${name}`} icon={<IconTrash />} />\n *   </TableRowActions>\n * </TableCell>\n */\nconst TableRowActions = React.forwardRef<HTMLDivElement, TableRowActionsProps>(\n  ({ className, persist, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-center justify-end gap-ds-01 transition-opacity duration-fast-01 ease-productive-standard\",\n        persist\n          ? \"opacity-100\"\n          : \"opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 pointer-coarse:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nTableRowActions.displayName = \"TableRowActions\"\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-body-md text-surface-fg-muted\", className)}\n    {...props}\n  />\n))\nTableCaption.displayName = \"TableCaption\"\n\nexport type TableRowProps = React.HTMLAttributes<HTMLTableRowElement>\nexport type TableCellProps = React.TdHTMLAttributes<HTMLTableCellElement>\nexport type { TableDensity }\n\nexport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n  TableRowActions,\n}\n"],"mappings":";;;;AAaA,IAAM,IAA+C;CACnD,SAAS;CACT,UAAU;CACV,aAAa;AACf,GAqBM,IAAQ,EAAM,YACjB,EAAE,cAAW,aAAU,YAAY,YAAS,GAAG,KAAS,MACvD,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,SAAD;EACO;EACL,WAAW,EAGT,8GACA,EAAe,IACf,KAAW,uDACX,CACF;EACA,GAAI;CACL,CAAA;AACE,CAAA,CAET;AACA,EAAM,cAAc;AAEpB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CAAY;CAAK,WAAW,EAAG,uDAAuD,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC/G;AACD,EAAY,cAAc;AAE1B,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAAG,8BAA8B,CAAS;CACrD,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,SAAD;CACO;CACL,WAAW,EAIT,mGACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAY,cAAc;AAE1B,IAAM,IAAW,EAAM,YAGpB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,WAAW,EAQT,sQACA,2KACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAS,cAAc;AAEvB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,OAAM;CACN,WAAW,EAGT,qNACA,KAAW,cACX,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AAExB,IAAM,IAAY,EAAM,YAGrB,EAAE,cAAW,YAAS,GAAG,KAAS,MACnC,kBAAC,MAAD;CACO;CACL,WAAW,EACT,4JACA,KAAW,2BACX,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAU,cAAc;AA2BxB,IAAM,IAAkB,EAAM,YAC3B,EAAE,cAAW,YAAS,GAAG,KAAS,MACjC,kBAAC,OAAD;CACO;CACL,WAAW,EACT,wGACA,IACI,gBACA,uGACJ,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAgB,cAAc;AAE9B,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,WAAD;CACO;CACL,WAAW,EAAG,+CAA+C,CAAS;CACtE,GAAI;AACL,CAAA,CACF;AACD,EAAa,cAAc"}

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,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,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;;;;8EA0BpB,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,4FAsDf,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,WAAW,EAAC,QAAQ,EAAE,WAAW,EAAE,CAAA;AAClD,YAAY,EAAE,SAAS,EAAE,eAAe,EAAC,QAAQ,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,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,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;;;;8EA0BpB,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,4FAwDf,CAAA;AAGF,QAAA,MAAM,WAAW,0JA4Bf,CAAA;AAGF,kFAAkF;AAClF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAA;AAE3F,OAAO,EAAE,IAAI,EAAE,WAAW,EAAC,QAAQ,EAAE,WAAW,EAAE,CAAA;AAClD,YAAY,EAAE,SAAS,EAAE,eAAe,EAAC,QAAQ,EAAE,CAAA"}

package/dist/ui/tabs.js

@@ -1,43 +1,44 @@
 "use client";
 import { springs as e, tweens as t } from "./lib/motion.js";
-import { cn as n } from "./lib/utils.js";
-import { Content as r, List as i, Root2 as a, Trigger as o } from "../_chunks/primitives/react-tabs.js";
-import * as s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { LayoutGroup as u, motion as d } from "framer-motion";
-import { cva as f } from "class-variance-authority";
+import { MotionPreference as n } from "../_chunks/motion-preference.js";
+import { cn as r } from "./lib/utils.js";
+import { Content as i, List as a, Root2 as o, Trigger as s } from "../_chunks/primitives/react-tabs.js";
+import * as c from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { LayoutGroup as d, motion as f } from "framer-motion";
+import { cva as p } from "class-variance-authority";
 //#region src/ui/tabs.tsx
-var p = s.createContext(void 0), m = s.createContext("horizontal"), h = s.forwardRef(({ value: e, defaultValue: t, onValueChange: r, orientation: i, ...o }, l) => {
-	let [u, d] = s.useState(e ?? t ?? "");
-	s.useEffect(() => {
+var m = c.createContext(void 0), h = c.createContext("horizontal"), g = c.forwardRef(({ value: e, defaultValue: t, onValueChange: n, orientation: i, ...a }, s) => {
+	let [u, d] = c.useState(e ?? t ?? "");
+	c.useEffect(() => {
 		e !== void 0 && d(e);
 	}, [e]);
-	let f = s.useCallback((e) => {
-		d(e), r?.(e);
-	}, [r]), h = i ?? "horizontal";
-	return /* @__PURE__ */ c(p.Provider, {
+	let f = c.useCallback((e) => {
+		d(e), n?.(e);
+	}, [n]), p = i ?? "horizontal";
+	return /* @__PURE__ */ l(m.Provider, {
 		value: u,
-		children: /* @__PURE__ */ c(m.Provider, {
-			value: h,
-			children: /* @__PURE__ */ c(a, {
-				ref: l,
+		children: /* @__PURE__ */ l(h.Provider, {
+			value: p,
+			children: /* @__PURE__ */ l(o, {
+				ref: s,
 				value: e,
 				defaultValue: e === void 0 ? t : void 0,
 				onValueChange: f,
 				orientation: i,
-				...o,
-				className: n(h === "vertical" && "flex flex-row gap-ds-05", o.className)
+				...a,
+				className: r(p === "vertical" && "flex flex-row gap-ds-05", a.className)
 			})
 		})
 	});
 });
-h.displayName = "Tabs";
-var g = s.createContext({
+g.displayName = "Tabs";
+var _ = c.createContext({
 	variant: "line",
 	size: "md",
 	color: "accent",
 	layoutId: "tab-indicator"
-}), _ = f("inline-flex items-center", {
+}), v = p("inline-flex items-center", {
 	variants: {
 		variant: {
 			line: "border-b border-surface-border-strong w-full gap-0",
@@ -67,7 +68,7 @@ var g = s.createContext({
 		size: "md",
 		orientation: "horizontal"
 	}
-}), v = f("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", {
+}), y = p("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"],
@@ -87,80 +88,80 @@ var g = s.createContext({
 		variant: "line",
 		size: "md"
 	}
-}), y = s.forwardRef(({ className: e, variant: t, size: r, color: a, ...o }, l) => {
-	let d = s.useContext(m), f = t ?? "line", p = r ?? "md", h = a ?? "accent", v = s.useId(), y = s.useMemo(() => ({
+}), b = c.forwardRef(({ className: e, variant: t, size: n, color: i, ...o }, s) => {
+	let u = c.useContext(h), f = t ?? "line", p = n ?? "md", m = i ?? "accent", g = c.useId(), y = c.useMemo(() => ({
 		variant: f,
 		size: p,
-		color: h,
-		layoutId: `tab-indicator-${v}`
+		color: m,
+		layoutId: `tab-indicator-${g}`
 	}), [
 		f,
 		p,
-		h,
-		v
+		m,
+		g
 	]);
-	return /* @__PURE__ */ c(g.Provider, {
+	return /* @__PURE__ */ l(_.Provider, {
 		value: y,
-		children: /* @__PURE__ */ c(u, { children: /* @__PURE__ */ c(i, {
-			ref: l,
-			className: n(_({
+		children: /* @__PURE__ */ l(d, { children: /* @__PURE__ */ l(a, {
+			ref: s,
+			className: r(v({
 				variant: f,
 				size: p,
-				orientation: d
+				orientation: u
 			}), e),
 			...o
 		}) })
 	});
 });
-y.displayName = i.displayName;
-var b = {
+b.displayName = a.displayName;
+var x = {
 	accent: "data-[state=active]:text-accent-11",
 	neutral: "data-[state=active]:text-surface-fg"
-}, x = {
+}, S = {
 	accent: "bg-accent-9",
 	neutral: "bg-surface-fg"
-}, S = s.forwardRef(({ className: t, variant: r, children: i, ...a }, u) => {
-	let f = s.useContext(g), h = s.useContext(p), _ = s.useContext(m), y = r ?? f.variant, S = f.size, C = f.color, w = a.value === h, T = _ === "vertical";
-	return /* @__PURE__ */ l(o, {
-		ref: u,
-		className: n(v({
-			variant: y,
-			size: S
-		}), y === "line" && b[C], T && "w-full justify-start", y === "line" && T && "-ml-px -mb-0", t),
-		...a,
+}, C = c.forwardRef(({ className: t, variant: i, children: a, ...o }, d) => {
+	let p = c.useContext(_), g = c.useContext(m), v = c.useContext(h), b = i ?? p.variant, C = p.size, w = p.color, T = o.value === g, E = v === "vertical";
+	return /* @__PURE__ */ l(n, { children: /* @__PURE__ */ u(s, {
+		ref: d,
+		className: r(y({
+			variant: b,
+			size: C
+		}), b === "line" && x[w], E && "w-full justify-start", b === "line" && E && "-ml-px -mb-0", t),
+		...o,
 		children: [
-			y === "contained" && w && /* @__PURE__ */ c(d.span, {
-				layoutId: `${f.layoutId}-contained`,
-				className: "absolute inset-0 rounded-control bg-surface-overlay shadow-raised",
+			b === "contained" && T && /* @__PURE__ */ l(f.span, {
+				layoutId: `${p.layoutId}-contained`,
+				className: "absolute inset-0 rounded-control bg-segment-thumb shadow-segment",
 				transition: e.smooth
 			}),
-			/* @__PURE__ */ c("span", {
+			/* @__PURE__ */ l("span", {
 				className: "relative z-[1] inline-flex min-w-0 items-center gap-ds-02",
-				children: /* @__PURE__ */ c("span", {
+				children: /* @__PURE__ */ l("span", {
 					className: "truncate",
-					children: i
+					children: a
 				})
 			}),
-			y === "line" && w && /* @__PURE__ */ c(d.span, {
-				layoutId: `${f.layoutId}-line`,
-				className: n("absolute", T ? "left-0 top-0 bottom-0 w-0.5" : "bottom-0 left-0 right-0 h-0.5", x[C]),
+			b === "line" && T && /* @__PURE__ */ l(f.span, {
+				layoutId: `${p.layoutId}-line`,
+				className: r("absolute", E ? "left-0 top-0 bottom-0 w-0.5" : "bottom-0 left-0 right-0 h-0.5", S[w]),
 				transition: e.smooth
 			})
 		]
-	});
+	}) });
 });
-S.displayName = o.displayName;
-var C = s.forwardRef(({ className: e, children: i, ...a }, o) => /* @__PURE__ */ c(r, {
-	ref: o,
-	className: n("ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", s.useContext(m) === "vertical" ? "mt-0 flex-1 min-w-0" : "mt-ds-05", e),
-	...a,
-	children: /* @__PURE__ */ c(d.div, {
+C.displayName = s.displayName;
+var w = c.forwardRef(({ className: e, children: a, ...o }, s) => /* @__PURE__ */ l(n, { children: /* @__PURE__ */ l(i, {
+	ref: s,
+	className: r("ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2", c.useContext(h) === "vertical" ? "mt-0 flex-1 min-w-0" : "mt-ds-05", e),
+	...o,
+	children: /* @__PURE__ */ l(f.div, {
 		initial: { opacity: 0 },
 		animate: { opacity: 1 },
 		transition: t.fade,
-		children: i
+		children: a
 	})
-}));
-C.displayName = r.displayName;
+}) }));
+w.displayName = i.displayName;
 //#endregion
-export { h as Tabs, C as TabsContent, y as TabsList, S as TabsTrigger };
+export { g as Tabs, w as TabsContent, b as TabsList, C as TabsTrigger };