@keboola/design 15.0.0 → 16.0.0

package/dist/{Slider-DrcsM8_G.js.map → Slider-B9IskDxf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Slider-DrcsM8_G.js","names":["RadixThumb","RadixTrack","RadixRange"],"sources":["../src/components/Slider/useInteracting.ts","../src/components/Slider/SliderThumb.tsx","../src/components/Slider/SliderTrack.tsx","../src/components/Slider/Slider.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\ntype InteractingRef = (element: HTMLElement | null) => void;\n\nexport const useInteracting = (): readonly [boolean, InteractingRef] => {\n  const [isInteracting, setIsInteracting] = useState(false);\n  const cleanupRef = useRef<(() => void) | null>(null);\n\n  const setRef = useCallback<InteractingRef>((element) => {\n    cleanupRef.current?.();\n    cleanupRef.current = null;\n    if (!element) return;\n\n    let hover = false;\n    let focus = false;\n    let press = false;\n    const recompute = () => setIsInteracting(hover || focus || press);\n\n    const handleEnter = () => {\n      hover = true;\n      recompute();\n    };\n    const handleLeave = () => {\n      hover = false;\n      recompute();\n    };\n    const handleFocus = () => {\n      focus = true;\n      recompute();\n    };\n    const handleBlur = () => {\n      focus = false;\n      recompute();\n    };\n    const handleDown = () => {\n      press = true;\n      recompute();\n    };\n    const handleRelease = () => {\n      press = false;\n      recompute();\n    };\n\n    element.addEventListener('pointerenter', handleEnter);\n    element.addEventListener('pointerleave', handleLeave);\n    element.addEventListener('focus', handleFocus);\n    element.addEventListener('blur', handleBlur);\n    element.addEventListener('pointerdown', handleDown);\n    element.addEventListener('pointerup', handleRelease);\n    element.addEventListener('pointercancel', handleRelease);\n\n    cleanupRef.current = () => {\n      element.removeEventListener('pointerenter', handleEnter);\n      element.removeEventListener('pointerleave', handleLeave);\n      element.removeEventListener('focus', handleFocus);\n      element.removeEventListener('blur', handleBlur);\n      element.removeEventListener('pointerdown', handleDown);\n      element.removeEventListener('pointerup', handleRelease);\n      element.removeEventListener('pointercancel', handleRelease);\n    };\n  }, []);\n\n  return [isInteracting, setRef] as const;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Thumb as RadixThumb } from '@radix-ui/react-slider';\n\nimport { cn, mergeRefs } from '../../utils';\nimport { buttonVariants } from '../Button';\nimport { Tooltip } from '../Tooltip';\n\nimport { useInteracting } from './useInteracting';\n\ntype Props = ComponentProps<typeof RadixThumb> & {\n  tooltip?: ReactNode;\n  tooltipSide?: ComponentProps<typeof Tooltip.Content>['placement'];\n};\n\nexport const SliderThumb = ({\n  ref: forwardedRef,\n  className,\n  tooltip,\n  tooltipSide = 'top',\n  ...props\n}: Props) => {\n  const [isInteracting, interactingRef] = useInteracting();\n\n  const thumb = (\n    <RadixThumb\n      ref={mergeRefs(forwardedRef ?? null, interactingRef)}\n      className={cn(\n        buttonVariants({ variant: 'outline', size: 'icon-sm' }),\n\n        // layout\n        'tw:p-0',\n        'tw:active:opacity-100',\n        'tw:block',\n        'tw:size-4',\n        'tw:rounded-full',\n\n        // cursors\n        'tw:data-[disabled]:cursor-not-allowed',\n        'tw:[&:not([data-disabled])]:cursor-pointer',\n\n        className,\n      )}\n      {...props}\n    />\n  );\n\n  if (tooltip == null) return thumb;\n\n  return (\n    <Tooltip.Root open={isInteracting}>\n      <Tooltip.Trigger asChild>{thumb}</Tooltip.Trigger>\n      <Tooltip.Content variant=\"action\" placement={tooltipSide}>\n        {tooltip}\n      </Tooltip.Content>\n    </Tooltip.Root>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Range as RadixRange, Track as RadixTrack } from '@radix-ui/react-slider';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof RadixTrack> & { rangeClassName?: string };\n\nexport const SliderTrack = ({ ref, className, ...props }: Props) => (\n  <RadixTrack\n    ref={ref}\n    className={cn(\n      // layout\n      'tw:relative',\n      'tw:grow',\n      'tw:w-full',\n      'tw:h-1.5',\n      'tw:overflow-hidden',\n\n      // style\n      'tw:rounded-full',\n      'tw:bg-muted',\n\n      // vertical orientation\n      'tw:data-[orientation=vertical]:h-full',\n      'tw:data-[orientation=vertical]:w-1.5',\n    )}\n    {...props}\n  >\n    <RadixRange\n      className={cn(\n        // layout\n        'tw:absolute',\n        'tw:h-full',\n\n        // style\n        'tw:bg-primary',\n\n        // vertical orientation\n        'tw:data-[orientation=vertical]:w-full',\n\n        className,\n      )}\n    />\n  </RadixTrack>\n);\n","import { useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Root } from '@radix-ui/react-slider';\n\nimport { cn } from '../../utils';\nimport { TooltipProvider } from '../Tooltip';\n\nimport { SliderThumb } from './SliderThumb';\nimport { SliderTrack } from './SliderTrack';\n\nexport type ThumbTooltipFn = (value: number, index: number) => ReactNode;\n\ntype Props = ComponentProps<typeof Root> & {\n  thumbTooltip?: ThumbTooltipFn;\n  thumbTooltipSide?: ComponentProps<typeof SliderThumb>['tooltipSide'];\n  rangeClassName?: string;\n};\n\nexport const Slider = ({\n  ref,\n  className,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  onValueChange,\n  thumbTooltip,\n  thumbTooltipSide,\n  rangeClassName,\n  ...rest\n}: Props) => {\n  const isControlled = Array.isArray(value);\n\n  const [internalValues, setInternalValues] = useState<number[]>(() => {\n    if (isControlled) return value;\n    if (Array.isArray(defaultValue)) return defaultValue;\n    return [min];\n  });\n\n  const liveValues = isControlled ? value : internalValues;\n\n  const handleValueChange = (next: number[]) => {\n    if (!isControlled) setInternalValues(next);\n    onValueChange?.(next);\n  };\n\n  const body = (\n    <Root\n      ref={ref}\n      value={liveValues}\n      min={min}\n      max={max}\n      onValueChange={handleValueChange}\n      className={cn(\n        'tw:relative',\n        'tw:flex',\n        'tw:items-center',\n        'tw:w-full',\n\n        'tw:touch-none',\n        'tw:select-none',\n\n        'tw:data-[orientation=vertical]:h-full',\n        'tw:data-[orientation=vertical]:w-auto',\n        'tw:data-[orientation=vertical]:flex-col',\n\n        'tw:data-[disabled]:opacity-disabled',\n        className,\n      )}\n      {...rest}\n    >\n      <SliderTrack className={rangeClassName} />\n      {liveValues.map((thumbValue, index) => (\n        <SliderThumb\n          // oxlint-disable-next-line react/no-array-index-key\n          key={index}\n          tooltip={thumbTooltip?.(thumbValue, index)}\n          tooltipSide={thumbTooltipSide}\n        />\n      ))}\n    </Root>\n  );\n\n  return thumbTooltip ? <TooltipProvider>{body}</TooltipProvider> : body;\n};\n"],"mappings":"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"}
+{"version":3,"file":"Slider-B9IskDxf.js","names":["RadixThumb","RadixTrack","RadixRange"],"sources":["../src/components/Slider/useInteracting.ts","../src/components/Slider/SliderThumb.tsx","../src/components/Slider/SliderTrack.tsx","../src/components/Slider/Slider.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\ntype InteractingRef = (element: HTMLElement | null) => void;\n\nexport const useInteracting = (): readonly [boolean, InteractingRef] => {\n  const [isInteracting, setIsInteracting] = useState(false);\n  const cleanupRef = useRef<(() => void) | null>(null);\n\n  const setRef = useCallback<InteractingRef>((element) => {\n    cleanupRef.current?.();\n    cleanupRef.current = null;\n    if (!element) return;\n\n    let hover = false;\n    let focus = false;\n    let press = false;\n    const recompute = () => setIsInteracting(hover || focus || press);\n\n    const handleEnter = () => {\n      hover = true;\n      recompute();\n    };\n    const handleLeave = () => {\n      hover = false;\n      recompute();\n    };\n    const handleFocus = () => {\n      focus = true;\n      recompute();\n    };\n    const handleBlur = () => {\n      focus = false;\n      recompute();\n    };\n    const handleDown = () => {\n      press = true;\n      recompute();\n    };\n    const handleRelease = () => {\n      press = false;\n      recompute();\n    };\n\n    element.addEventListener('pointerenter', handleEnter);\n    element.addEventListener('pointerleave', handleLeave);\n    element.addEventListener('focus', handleFocus);\n    element.addEventListener('blur', handleBlur);\n    element.addEventListener('pointerdown', handleDown);\n    element.addEventListener('pointerup', handleRelease);\n    element.addEventListener('pointercancel', handleRelease);\n\n    cleanupRef.current = () => {\n      element.removeEventListener('pointerenter', handleEnter);\n      element.removeEventListener('pointerleave', handleLeave);\n      element.removeEventListener('focus', handleFocus);\n      element.removeEventListener('blur', handleBlur);\n      element.removeEventListener('pointerdown', handleDown);\n      element.removeEventListener('pointerup', handleRelease);\n      element.removeEventListener('pointercancel', handleRelease);\n    };\n  }, []);\n\n  return [isInteracting, setRef] as const;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Thumb as RadixThumb } from '@radix-ui/react-slider';\n\nimport { cn, mergeRefs } from '../../utils';\nimport { buttonVariants } from '../Button';\nimport { Tooltip } from '../Tooltip';\n\nimport { useInteracting } from './useInteracting';\n\ntype Props = ComponentProps<typeof RadixThumb> & {\n  tooltip?: ReactNode;\n  tooltipSide?: ComponentProps<typeof Tooltip.Content>['placement'];\n};\n\nexport const SliderThumb = ({\n  ref: forwardedRef,\n  className,\n  tooltip,\n  tooltipSide = 'top',\n  ...props\n}: Props) => {\n  const [isInteracting, interactingRef] = useInteracting();\n\n  const thumb = (\n    <RadixThumb\n      ref={mergeRefs(forwardedRef ?? null, interactingRef)}\n      className={cn(\n        buttonVariants({ variant: 'outline', size: 'icon-sm' }),\n\n        // layout\n        'tw:p-0',\n        'tw:active:opacity-100',\n        'tw:block',\n        'tw:size-4',\n        'tw:rounded-full',\n\n        // cursors\n        'tw:data-[disabled]:cursor-not-allowed',\n        'tw:[&:not([data-disabled])]:cursor-pointer',\n\n        className,\n      )}\n      {...props}\n    />\n  );\n\n  if (tooltip == null) return thumb;\n\n  return (\n    <Tooltip.Root open={isInteracting}>\n      <Tooltip.Trigger asChild>{thumb}</Tooltip.Trigger>\n      <Tooltip.Content variant=\"action\" placement={tooltipSide}>\n        {tooltip}\n      </Tooltip.Content>\n    </Tooltip.Root>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Range as RadixRange, Track as RadixTrack } from '@radix-ui/react-slider';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof RadixTrack> & { rangeClassName?: string };\n\nexport const SliderTrack = ({ ref, className, ...props }: Props) => (\n  <RadixTrack\n    ref={ref}\n    className={cn(\n      // layout\n      'tw:relative',\n      'tw:grow',\n      'tw:w-full',\n      'tw:h-1.5',\n      'tw:overflow-hidden',\n\n      // style\n      'tw:rounded-full',\n      'tw:bg-muted',\n\n      // vertical orientation\n      'tw:data-[orientation=vertical]:h-full',\n      'tw:data-[orientation=vertical]:w-1.5',\n    )}\n    {...props}\n  >\n    <RadixRange\n      className={cn(\n        // layout\n        'tw:absolute',\n        'tw:h-full',\n\n        // style\n        'tw:bg-primary',\n\n        // vertical orientation\n        'tw:data-[orientation=vertical]:w-full',\n\n        className,\n      )}\n    />\n  </RadixTrack>\n);\n","import { useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Root } from '@radix-ui/react-slider';\n\nimport { cn } from '../../utils';\nimport { TooltipProvider } from '../Tooltip';\n\nimport { SliderThumb } from './SliderThumb';\nimport { SliderTrack } from './SliderTrack';\n\nexport type ThumbTooltipFn = (value: number, index: number) => ReactNode;\n\ntype Props = ComponentProps<typeof Root> & {\n  thumbTooltip?: ThumbTooltipFn;\n  thumbTooltipSide?: ComponentProps<typeof SliderThumb>['tooltipSide'];\n  rangeClassName?: string;\n};\n\nexport const Slider = ({\n  ref,\n  className,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  onValueChange,\n  thumbTooltip,\n  thumbTooltipSide,\n  rangeClassName,\n  ...rest\n}: Props) => {\n  const isControlled = Array.isArray(value);\n\n  const [internalValues, setInternalValues] = useState<number[]>(() => {\n    if (isControlled) return value;\n    if (Array.isArray(defaultValue)) return defaultValue;\n    return [min];\n  });\n\n  const liveValues = isControlled ? value : internalValues;\n\n  const handleValueChange = (next: number[]) => {\n    if (!isControlled) setInternalValues(next);\n    onValueChange?.(next);\n  };\n\n  const body = (\n    <Root\n      ref={ref}\n      value={liveValues}\n      min={min}\n      max={max}\n      onValueChange={handleValueChange}\n      className={cn(\n        'tw:relative',\n        'tw:flex',\n        'tw:items-center',\n        'tw:w-full',\n\n        'tw:touch-none',\n        'tw:select-none',\n\n        'tw:data-[orientation=vertical]:h-full',\n        'tw:data-[orientation=vertical]:w-auto',\n        'tw:data-[orientation=vertical]:flex-col',\n\n        'tw:data-[disabled]:opacity-disabled',\n        className,\n      )}\n      {...rest}\n    >\n      <SliderTrack className={rangeClassName} />\n      {liveValues.map((thumbValue, index) => (\n        <SliderThumb\n          // oxlint-disable-next-line react/no-array-index-key\n          key={index}\n          tooltip={thumbTooltip?.(thumbValue, index)}\n          tooltipSide={thumbTooltipSide}\n        />\n      ))}\n    </Root>\n  );\n\n  return thumbTooltip ? <TooltipProvider>{body}</TooltipProvider> : body;\n};\n"],"mappings":"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"}

package/dist/{Stepper-CQrUPVFL.js → Stepper-D7VspVEt.js}

@@ -1,9 +1,9 @@
-import { cn } from "./classNames-DcGnTh2N.js";
-import { Check, X } from "./icons-ZIeZXXS7.js";
+import { cn } from "./classNames-DkX30VJU.js";
+import { Check, X } from "./icons-DDR9dFSr.js";
 import { Children, createContext, isValidElement, use } from "react";
 import { cva } from "class-variance-authority";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/Stepper/StepperContext.tsx
+// src/components/Stepper/StepperContext.tsx
 const StepperContext = createContext({ orientation: "horizontal" });
 const useStepperContext = () => use(StepperContext);
 const StepItemContext = createContext(null);
@@ -17,8 +17,7 @@ const StepPositionContext = createContext({
 	isLast: true
 });
 const useStepPositionContext = () => use(StepPositionContext);
-//#endregion
-//#region src/components/Stepper/styles.ts
+// src/components/Stepper/styles.ts
 const stepperVariants = cva([], {
 	defaultVariants: { orientation: "horizontal" },
 	variants: { orientation: {
@@ -147,8 +146,7 @@ const connectorVariants = cva(["tw:shrink-0", "tw:transition-colors"], {
 		}
 	}
 });
-//#endregion
-//#region src/components/Stepper/StepperStepConnector.tsx
+// src/components/Stepper/StepperStepConnector.tsx
 /**
 * Visual line between two steps. Internal — `Stepper` renders connectors automatically between
 * adjacent `Stepper.Step`s. Connector colour follows the preceding step's status.
@@ -165,8 +163,7 @@ const StepperStepConnector = ({ className, ...props }) => {
 		...props
 	});
 };
-//#endregion
-//#region src/components/Stepper/StepperStepIndicator.tsx
+// src/components/Stepper/StepperStepIndicator.tsx
 /**
 * Circular indicator slot. Renders the status icon (Check / X) or the step number automatically based on
 * the parent `Stepper.Step` status. Pass `children` to override.
@@ -186,8 +183,7 @@ const StepperStepIndicator = ({ children, className, ...props }) => {
 		children: content
 	});
 };
-//#endregion
-//#region src/components/Stepper/StepperStep.tsx
+// src/components/Stepper/StepperStep.tsx
 /**
 * One step in a `Stepper`. Render `Stepper.StepIndicator`, `Stepper.StepLabel`, and optional
 * `Stepper.StepDescription` as children — order within the step is irrelevant; the indicator is
@@ -243,15 +239,13 @@ const StepperStep = ({ status = "upcoming", children, className, ...props }) =>
 		})
 	});
 };
-//#endregion
-//#region src/components/Stepper/StepperStepDescription.tsx
+// src/components/Stepper/StepperStepDescription.tsx
 /** Optional secondary text below the step label. */
 const StepperStepDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
 	className: cn(descriptionClassnames, className),
 	...props
 });
-//#endregion
-//#region src/components/Stepper/StepperStepLabel.tsx
+// src/components/Stepper/StepperStepLabel.tsx
 /** Step title — short label describing the step (e.g. "Account", "Payment"). */
 const StepperStepLabel = ({ className, ...props }) => {
 	const { status } = useStepItemContext();
@@ -260,8 +254,7 @@ const StepperStepLabel = ({ className, ...props }) => {
 		...props
 	});
 };
-//#endregion
-//#region src/components/Stepper/Stepper.tsx
+// src/components/Stepper/Stepper.tsx
 const isStepElement = (child) => isValidElement(child) && child.type === StepperStep;
 const getStepStatus = (step) => step.props.status ?? "upcoming";
 /**
@@ -316,7 +309,6 @@ Stepper.StepIndicator = StepperStepIndicator;
 Stepper.StepLabel = StepperStepLabel;
 Stepper.StepDescription = StepperStepDescription;
 Stepper.StepConnector = StepperStepConnector;
-//#endregion
 export { Stepper };
 
-//# sourceMappingURL=Stepper-CQrUPVFL.js.map
+//# sourceMappingURL=Stepper-D7VspVEt.js.map

package/dist/{Stepper-CQrUPVFL.js.map → Stepper-D7VspVEt.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Stepper-CQrUPVFL.js","names":[],"sources":["../src/components/Stepper/StepperContext.tsx","../src/components/Stepper/styles.ts","../src/components/Stepper/StepperStepConnector.tsx","../src/components/Stepper/StepperStepIndicator.tsx","../src/components/Stepper/StepperStep.tsx","../src/components/Stepper/StepperStepDescription.tsx","../src/components/Stepper/StepperStepLabel.tsx","../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\nexport type StepperOrientation = 'horizontal' | 'vertical';\n\ntype StepperContextType = {\n  orientation: StepperOrientation;\n  onStepClick?: (index: number) => void;\n};\n\nexport const StepperContext = createContext<StepperContextType>({\n  orientation: 'horizontal',\n});\n\nexport const useStepperContext = () => use(StepperContext);\n\ntype StepItemContextType = {\n  index: number;\n  isLast: boolean;\n  status: StepStatus;\n};\n\nexport const StepItemContext = createContext<StepItemContextType | null>(null);\n\nexport const useStepItemContext = () => {\n  const ctx = use(StepItemContext);\n  if (!ctx) {\n    throw new Error('Stepper.Step subcomponents must be used inside <Stepper.Step>.');\n  }\n  return ctx;\n};\n\n// Position context provided by `Stepper` to each child `Stepper.Step` —\n// carries the step's index in the rendered list and whether it's the last.\n// Separated from `StepItemContext` so the connector + step share a status\n// channel but only the step needs positional info.\ntype StepPositionContextType = {\n  index: number;\n  isLast: boolean;\n};\n\nexport const StepPositionContext = createContext<StepPositionContextType>({\n  index: 0,\n  isLast: true,\n});\n\nexport const useStepPositionContext = () => use(StepPositionContext);\n\nconst STEP_STATUS = {\n  complete: 'complete',\n  active: 'active',\n  upcoming: 'upcoming',\n  error: 'error',\n} as const;\n\nexport type StepStatus = (typeof STEP_STATUS)[keyof typeof STEP_STATUS];\n","import { cva } from 'class-variance-authority';\n\nexport const stepperVariants = cva([], {\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n  variants: {\n    orientation: {\n      // Single row of steps + inter-step connectors. Steps shrink to content; connectors flex-fill the gaps.\n      horizontal: ['tw:flex', 'tw:flex-row', 'tw:items-start', 'tw:w-full'],\n      // Stack steps vertically; each step renders its own indicator column with an internal connector.\n      vertical: ['tw:flex', 'tw:flex-col', 'tw:w-full'],\n    },\n  },\n});\n\nexport const stepVariants = cva(['tw:group/step'], {\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n  variants: {\n    orientation: {\n      // Indicator on top, label/description below.\n      horizontal: ['tw:flex', 'tw:flex-col', 'tw:items-center', 'tw:text-center', 'tw:gap-2'],\n      // Indicator column on the left (with the vertical connector stretching beneath it),\n      // content column on the right with the label/description.\n      vertical: ['tw:flex', 'tw:flex-row', 'tw:items-stretch', 'tw:gap-3'],\n    },\n    interactive: {\n      true: [\n        // Reset native `<button>` chrome so the Step looks identical to its non-interactive sibling.\n        'tw:cursor-pointer',\n        'tw:bg-transparent',\n        'tw:border-0',\n        'tw:p-0',\n        'tw:font-[inherit]',\n        'tw:focus-visible:outline-hidden',\n        'tw:focus-visible:ring-2',\n        'tw:focus-visible:ring-ring/50',\n        'tw:focus-visible:rounded-md',\n      ],\n      false: [],\n    },\n  },\n});\n\nexport const indicatorVariants = cva(\n  [\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:shrink-0',\n    'tw:size-8',\n    'tw:rounded-full',\n    'tw:border',\n    'tw:text-sm',\n    'tw:font-medium',\n    'tw:transition-colors',\n    'tw:[&_svg]:size-4',\n  ],\n  {\n    defaultVariants: {\n      status: 'upcoming',\n    },\n    variants: {\n      status: {\n        complete: ['tw:bg-success', 'tw:text-success-foreground', 'tw:border-success'],\n        active: ['tw:bg-primary', 'tw:text-primary-foreground', 'tw:border-primary'],\n        upcoming: ['tw:bg-muted', 'tw:text-muted-foreground', 'tw:border-border'],\n        error: ['tw:bg-destructive', 'tw:text-destructive-foreground', 'tw:border-destructive'],\n      },\n    },\n  },\n);\n\nexport const labelVariants = cva(['tw:text-sm', 'tw:font-medium', 'tw:leading-5'], {\n  defaultVariants: {\n    status: 'upcoming',\n  },\n  variants: {\n    status: {\n      complete: ['tw:text-foreground'],\n      active: ['tw:text-foreground'],\n      upcoming: ['tw:text-muted-foreground'],\n      error: ['tw:text-destructive'],\n    },\n  },\n});\n\nexport const descriptionClassnames = 'tw:text-xs tw:text-muted-foreground tw:mt-0.5';\n\n// Connector colour follows the preceding step's status (complete → success line forward,\n// error → destructive, otherwise muted border).\nexport const connectorVariants = cva(['tw:shrink-0', 'tw:transition-colors'], {\n  defaultVariants: {\n    orientation: 'horizontal',\n    status: 'upcoming',\n  },\n  variants: {\n    orientation: {\n      // Inline sibling between horizontal steps. Push down by half the indicator height (16px).\n      horizontal: ['tw:h-0.5', 'tw:flex-1', 'tw:mt-4', 'tw:min-w-8'],\n      // Inside the indicator column under the indicator. `flex-1` + `min-h-6` ensures it\n      // stretches to fill the space alongside the content block.\n      vertical: ['tw:w-0.5', 'tw:flex-1', 'tw:min-h-6'],\n    },\n    status: {\n      complete: ['tw:bg-success'],\n      active: ['tw:bg-border'],\n      upcoming: ['tw:bg-border'],\n      error: ['tw:bg-destructive'],\n    },\n  },\n});\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { useStepItemContext, useStepperContext } from './StepperContext';\nimport { connectorVariants } from './styles';\n\ntype Props = ComponentProps<'span'>;\n\n/**\n * Visual line between two steps. Internal — `Stepper` renders connectors automatically between\n * adjacent `Stepper.Step`s. Connector colour follows the preceding step's status.\n */\nexport const StepperStepConnector = ({ className, ...props }: Props) => {\n  const { orientation } = useStepperContext();\n  const { status } = useStepItemContext();\n  return (\n    <span\n      aria-hidden\n      className={cn(connectorVariants({ orientation, status }), className)}\n      {...props}\n    />\n  );\n};\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { Check, X } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { useStepItemContext } from './StepperContext';\nimport { indicatorVariants } from './styles';\n\ntype Props = {\n  /** Override the default content. By default renders Check for complete, X for error, step number otherwise. */\n  children?: ReactNode;\n} & ComponentProps<'span'>;\n\n/**\n * Circular indicator slot. Renders the status icon (Check / X) or the step number automatically based on\n * the parent `Stepper.Step` status. Pass `children` to override.\n */\nexport const StepperStepIndicator = ({ children, className, ...props }: Props) => {\n  const { index, status } = useStepItemContext();\n\n  const content = (() => {\n    if (children !== undefined) return children;\n    if (status === 'complete') return <Check aria-hidden />;\n    if (status === 'error') return <X aria-hidden />;\n    return index + 1;\n  })();\n\n  return (\n    <span\n      aria-hidden={children === undefined}\n      className={cn(indicatorVariants({ status }), className)}\n      {...props}\n    >\n      {content}\n    </span>\n  );\n};\n","import { Children, type HTMLAttributes, isValidElement, type ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\nimport {\n  StepItemContext,\n  type StepStatus,\n  useStepperContext,\n  useStepPositionContext,\n} from './StepperContext';\nimport { StepperStepConnector } from './StepperStepConnector';\nimport { StepperStepIndicator } from './StepperStepIndicator';\nimport { stepVariants } from './styles';\n\ntype Props = {\n  /** Visual state of the step. Drives indicator + connector colour. Defaults to `'upcoming'`. */\n  status?: StepStatus;\n  children: ReactNode;\n  // Use generic HTML attributes so passthrough works for either `<div>` or `<button>`.\n} & Omit<HTMLAttributes<HTMLElement>, 'children'>;\n\n/**\n * One step in a `Stepper`. Render `Stepper.StepIndicator`, `Stepper.StepLabel`, and optional\n * `Stepper.StepDescription` as children — order within the step is irrelevant; the indicator is\n * extracted and rendered in the indicator slot.\n *\n * Set `Stepper`'s `onStepClick` prop to make every step a button; otherwise the Step renders as `<div>`.\n */\nexport const StepperStep = ({ status = 'upcoming', children, className, ...props }: Props) => {\n  const { orientation, onStepClick } = useStepperContext();\n  const { index, isLast } = useStepPositionContext();\n  const interactive = Boolean(onStepClick);\n\n  // Pull the indicator child out of `children` so we can position it\n  // independently from the label/description block. Falls back to a default\n  // indicator if the consumer didn't render one.\n  // oxlint-disable-next-line react-x/no-children-to-array -- need to split indicator from label/description\n  const allChildren = Children.toArray(children);\n  const indicatorChild = allChildren.find(\n    (child) => isValidElement(child) && child.type === StepperStepIndicator,\n  );\n  const contentChildren = allChildren.filter((child) => child !== indicatorChild);\n  const indicator: ReactNode = indicatorChild ?? <StepperStepIndicator />;\n\n  const handleClick = () => onStepClick?.(index);\n\n  const stepContext = { index, isLast, status };\n\n  const stepClassName = cn(stepVariants({ orientation, interactive }), className);\n\n  const ariaCurrent = status === 'active' ? ('step' as const) : undefined;\n\n  const inner =\n    orientation === 'vertical' ? (\n      <>\n        <span className=\"tw:flex tw:flex-col tw:items-center tw:self-stretch\">\n          {indicator}\n          {!isLast && <StepperStepConnector />}\n        </span>\n        <span className=\"tw:flex tw:min-w-0 tw:flex-col tw:items-start tw:pb-6 tw:text-left\">\n          {contentChildren}\n        </span>\n      </>\n    ) : (\n      <>\n        {indicator}\n        <span className=\"tw:flex tw:flex-col tw:items-center tw:text-center\">\n          {contentChildren}\n        </span>\n      </>\n    );\n\n  return (\n    <StepItemContext value={stepContext}>\n      {interactive ? (\n        <button\n          {...props}\n          type=\"button\"\n          onClick={handleClick}\n          aria-current={ariaCurrent}\n          data-status={status}\n          className={stepClassName}\n        >\n          {inner}\n        </button>\n      ) : (\n        <div {...props} aria-current={ariaCurrent} data-status={status} className={stepClassName}>\n          {inner}\n        </div>\n      )}\n    </StepItemContext>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { descriptionClassnames } from './styles';\n\ntype Props = ComponentProps<'span'>;\n\n/** Optional secondary text below the step label. */\nexport const StepperStepDescription = ({ className, ...props }: Props) => (\n  <span className={cn(descriptionClassnames, className)} {...props} />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { useStepItemContext } from './StepperContext';\nimport { labelVariants } from './styles';\n\ntype Props = ComponentProps<'span'>;\n\n/** Step title — short label describing the step (e.g. \"Account\", \"Payment\"). */\nexport const StepperStepLabel = ({ className, ...props }: Props) => {\n  const { status } = useStepItemContext();\n  return <span className={cn(labelVariants({ status }), className)} {...props} />;\n};\n","import {\n  Children,\n  type ComponentProps,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport {\n  StepItemContext,\n  StepperContext,\n  type StepperOrientation,\n  StepPositionContext,\n  type StepStatus,\n} from './StepperContext';\nimport { StepperStep } from './StepperStep';\nimport { StepperStepConnector } from './StepperStepConnector';\nimport { StepperStepDescription } from './StepperStepDescription';\nimport { StepperStepIndicator } from './StepperStepIndicator';\nimport { StepperStepLabel } from './StepperStepLabel';\nimport { stepperVariants } from './styles';\n\ntype Props = {\n  orientation?: StepperOrientation;\n  /** Given, steps render as `<button>`s; omitted, as visual-only `<div>`s. */\n  onStepClick?: (index: number) => void;\n  children: ReactNode;\n} & Omit<ComponentProps<'ol'>, 'children'> &\n  VariantProps<typeof stepperVariants>;\n\ntype StepElement = ReactElement<{ status?: StepStatus }>;\n\nconst isStepElement = (child: ReactNode): child is StepElement =>\n  isValidElement(child) && child.type === StepperStep;\n\nconst getStepStatus = (step: StepElement): StepStatus => step.props.status ?? 'upcoming';\n\n/**\n * Linear progress indicator for a multi-step flow.\n *\n * **When to use:** a finite, ordered sequence (wizard, multi-step form, deploy pipeline).\n * **When NOT to use:** branching navigation → `Tabs`; unordered status list → `Timeline`;\n * a single percentage → `Progress`.\n * **Composition:** `Stepper.Step` + `StepIndicator` + `StepLabel`; connectors render automatically.\n */\nexport const Stepper = ({\n  orientation = 'horizontal',\n  onStepClick,\n  children,\n  className,\n  ...props\n}: Props) => {\n  // oxlint-disable-next-line react-x/no-children-to-array -- need step count for connectors + positional context\n  const steps = Children.toArray(children).filter(isStepElement);\n  const lastIndex = steps.length - 1;\n\n  return (\n    <StepperContext value={{ orientation, onStepClick }}>\n      <ol\n        className={cn(\n          'tailwindcss-preflight',\n          'tw:list-none',\n          'tw:p-0',\n          'tw:m-0',\n          stepperVariants({ orientation }),\n          className,\n        )}\n        {...props}\n      >\n        {steps.map((step, index) => {\n          const isLast = index === lastIndex;\n          const wrappedStep = (\n            <StepPositionContext value={{ index, isLast }}>{step}</StepPositionContext>\n          );\n\n          // The <ol> keeps only <li> children; the horizontal connector goes inside the step's <li>.\n          if (orientation === 'vertical') {\n            return (\n              // oxlint-disable-next-line react-x/no-array-index-key\n              <li key={step.key ?? index} className=\"tw:contents\">\n                {wrappedStep}\n              </li>\n            );\n          }\n\n          return (\n            // oxlint-disable-next-line react-x/no-array-index-key\n            <li key={step.key ?? index} className=\"tw:contents\">\n              {wrappedStep}\n              {!isLast && (\n                // Coloured by the preceding step's status.\n                <StepItemContext value={{ index: -1, isLast: false, status: getStepStatus(step) }}>\n                  <StepperStepConnector />\n                </StepItemContext>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </StepperContext>\n  );\n};\n\nStepper.Step = StepperStep;\nStepper.StepIndicator = StepperStepIndicator;\nStepper.StepLabel = StepperStepLabel;\nStepper.StepDescription = StepperStepDescription;\nStepper.StepConnector = StepperStepConnector;\n"],"mappings":"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"}
+{"version":3,"file":"Stepper-D7VspVEt.js","names":[],"sources":["../src/components/Stepper/StepperContext.tsx","../src/components/Stepper/styles.ts","../src/components/Stepper/StepperStepConnector.tsx","../src/components/Stepper/StepperStepIndicator.tsx","../src/components/Stepper/StepperStep.tsx","../src/components/Stepper/StepperStepDescription.tsx","../src/components/Stepper/StepperStepLabel.tsx","../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\nexport type StepperOrientation = 'horizontal' | 'vertical';\n\ntype StepperContextType = {\n  orientation: StepperOrientation;\n  onStepClick?: (index: number) => void;\n};\n\nexport const StepperContext = createContext<StepperContextType>({\n  orientation: 'horizontal',\n});\n\nexport const useStepperContext = () => use(StepperContext);\n\ntype StepItemContextType = {\n  index: number;\n  isLast: boolean;\n  status: StepStatus;\n};\n\nexport const StepItemContext = createContext<StepItemContextType | null>(null);\n\nexport const useStepItemContext = () => {\n  const ctx = use(StepItemContext);\n  if (!ctx) {\n    throw new Error('Stepper.Step subcomponents must be used inside <Stepper.Step>.');\n  }\n  return ctx;\n};\n\n// Position context provided by `Stepper` to each child `Stepper.Step` —\n// carries the step's index in the rendered list and whether it's the last.\n// Separated from `StepItemContext` so the connector + step share a status\n// channel but only the step needs positional info.\ntype StepPositionContextType = {\n  index: number;\n  isLast: boolean;\n};\n\nexport const StepPositionContext = createContext<StepPositionContextType>({\n  index: 0,\n  isLast: true,\n});\n\nexport const useStepPositionContext = () => use(StepPositionContext);\n\nconst STEP_STATUS = {\n  complete: 'complete',\n  active: 'active',\n  upcoming: 'upcoming',\n  error: 'error',\n} as const;\n\nexport type StepStatus = (typeof STEP_STATUS)[keyof typeof STEP_STATUS];\n","import { cva } from 'class-variance-authority';\n\nexport const stepperVariants = cva([], {\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n  variants: {\n    orientation: {\n      // Single row of steps + inter-step connectors. Steps shrink to content; connectors flex-fill the gaps.\n      horizontal: ['tw:flex', 'tw:flex-row', 'tw:items-start', 'tw:w-full'],\n      // Stack steps vertically; each step renders its own indicator column with an internal connector.\n      vertical: ['tw:flex', 'tw:flex-col', 'tw:w-full'],\n    },\n  },\n});\n\nexport const stepVariants = cva(['tw:group/step'], {\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n  variants: {\n    orientation: {\n      // Indicator on top, label/description below.\n      horizontal: ['tw:flex', 'tw:flex-col', 'tw:items-center', 'tw:text-center', 'tw:gap-2'],\n      // Indicator column on the left (with the vertical connector stretching beneath it),\n      // content column on the right with the label/description.\n      vertical: ['tw:flex', 'tw:flex-row', 'tw:items-stretch', 'tw:gap-3'],\n    },\n    interactive: {\n      true: [\n        // Reset native `<button>` chrome so the Step looks identical to its non-interactive sibling.\n        'tw:cursor-pointer',\n        'tw:bg-transparent',\n        'tw:border-0',\n        'tw:p-0',\n        'tw:font-[inherit]',\n        'tw:focus-visible:outline-hidden',\n        'tw:focus-visible:ring-2',\n        'tw:focus-visible:ring-ring/50',\n        'tw:focus-visible:rounded-md',\n      ],\n      false: [],\n    },\n  },\n});\n\nexport const indicatorVariants = cva(\n  [\n    'tw:flex',\n    'tw:items-center',\n    'tw:justify-center',\n    'tw:shrink-0',\n    'tw:size-8',\n    'tw:rounded-full',\n    'tw:border',\n    'tw:text-sm',\n    'tw:font-medium',\n    'tw:transition-colors',\n    'tw:[&_svg]:size-4',\n  ],\n  {\n    defaultVariants: {\n      status: 'upcoming',\n    },\n    variants: {\n      status: {\n        complete: ['tw:bg-success', 'tw:text-success-foreground', 'tw:border-success'],\n        active: ['tw:bg-primary', 'tw:text-primary-foreground', 'tw:border-primary'],\n        upcoming: ['tw:bg-muted', 'tw:text-muted-foreground', 'tw:border-border'],\n        error: ['tw:bg-destructive', 'tw:text-destructive-foreground', 'tw:border-destructive'],\n      },\n    },\n  },\n);\n\nexport const labelVariants = cva(['tw:text-sm', 'tw:font-medium', 'tw:leading-5'], {\n  defaultVariants: {\n    status: 'upcoming',\n  },\n  variants: {\n    status: {\n      complete: ['tw:text-foreground'],\n      active: ['tw:text-foreground'],\n      upcoming: ['tw:text-muted-foreground'],\n      error: ['tw:text-destructive'],\n    },\n  },\n});\n\nexport const descriptionClassnames = 'tw:text-xs tw:text-muted-foreground tw:mt-0.5';\n\n// Connector colour follows the preceding step's status (complete → success line forward,\n// error → destructive, otherwise muted border).\nexport const connectorVariants = cva(['tw:shrink-0', 'tw:transition-colors'], {\n  defaultVariants: {\n    orientation: 'horizontal',\n    status: 'upcoming',\n  },\n  variants: {\n    orientation: {\n      // Inline sibling between horizontal steps. Push down by half the indicator height (16px).\n      horizontal: ['tw:h-0.5', 'tw:flex-1', 'tw:mt-4', 'tw:min-w-8'],\n      // Inside the indicator column under the indicator. `flex-1` + `min-h-6` ensures it\n      // stretches to fill the space alongside the content block.\n      vertical: ['tw:w-0.5', 'tw:flex-1', 'tw:min-h-6'],\n    },\n    status: {\n      complete: ['tw:bg-success'],\n      active: ['tw:bg-border'],\n      upcoming: ['tw:bg-border'],\n      error: ['tw:bg-destructive'],\n    },\n  },\n});\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { useStepItemContext, useStepperContext } from './StepperContext';\nimport { connectorVariants } from './styles';\n\ntype Props = ComponentProps<'span'>;\n\n/**\n * Visual line between two steps. Internal — `Stepper` renders connectors automatically between\n * adjacent `Stepper.Step`s. Connector colour follows the preceding step's status.\n */\nexport const StepperStepConnector = ({ className, ...props }: Props) => {\n  const { orientation } = useStepperContext();\n  const { status } = useStepItemContext();\n  return (\n    <span\n      aria-hidden\n      className={cn(connectorVariants({ orientation, status }), className)}\n      {...props}\n    />\n  );\n};\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { Check, X } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { useStepItemContext } from './StepperContext';\nimport { indicatorVariants } from './styles';\n\ntype Props = {\n  /** Override the default content. By default renders Check for complete, X for error, step number otherwise. */\n  children?: ReactNode;\n} & ComponentProps<'span'>;\n\n/**\n * Circular indicator slot. Renders the status icon (Check / X) or the step number automatically based on\n * the parent `Stepper.Step` status. Pass `children` to override.\n */\nexport const StepperStepIndicator = ({ children, className, ...props }: Props) => {\n  const { index, status } = useStepItemContext();\n\n  const content = (() => {\n    if (children !== undefined) return children;\n    if (status === 'complete') return <Check aria-hidden />;\n    if (status === 'error') return <X aria-hidden />;\n    return index + 1;\n  })();\n\n  return (\n    <span\n      aria-hidden={children === undefined}\n      className={cn(indicatorVariants({ status }), className)}\n      {...props}\n    >\n      {content}\n    </span>\n  );\n};\n","import { Children, type HTMLAttributes, isValidElement, type ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\nimport {\n  StepItemContext,\n  type StepStatus,\n  useStepperContext,\n  useStepPositionContext,\n} from './StepperContext';\nimport { StepperStepConnector } from './StepperStepConnector';\nimport { StepperStepIndicator } from './StepperStepIndicator';\nimport { stepVariants } from './styles';\n\ntype Props = {\n  /** Visual state of the step. Drives indicator + connector colour. Defaults to `'upcoming'`. */\n  status?: StepStatus;\n  children: ReactNode;\n  // Use generic HTML attributes so passthrough works for either `<div>` or `<button>`.\n} & Omit<HTMLAttributes<HTMLElement>, 'children'>;\n\n/**\n * One step in a `Stepper`. Render `Stepper.StepIndicator`, `Stepper.StepLabel`, and optional\n * `Stepper.StepDescription` as children — order within the step is irrelevant; the indicator is\n * extracted and rendered in the indicator slot.\n *\n * Set `Stepper`'s `onStepClick` prop to make every step a button; otherwise the Step renders as `<div>`.\n */\nexport const StepperStep = ({ status = 'upcoming', children, className, ...props }: Props) => {\n  const { orientation, onStepClick } = useStepperContext();\n  const { index, isLast } = useStepPositionContext();\n  const interactive = Boolean(onStepClick);\n\n  // Pull the indicator child out of `children` so we can position it\n  // independently from the label/description block. Falls back to a default\n  // indicator if the consumer didn't render one.\n  // oxlint-disable-next-line react-x/no-children-to-array -- need to split indicator from label/description\n  const allChildren = Children.toArray(children);\n  const indicatorChild = allChildren.find(\n    (child) => isValidElement(child) && child.type === StepperStepIndicator,\n  );\n  const contentChildren = allChildren.filter((child) => child !== indicatorChild);\n  const indicator: ReactNode = indicatorChild ?? <StepperStepIndicator />;\n\n  const handleClick = () => onStepClick?.(index);\n\n  const stepContext = { index, isLast, status };\n\n  const stepClassName = cn(stepVariants({ orientation, interactive }), className);\n\n  const ariaCurrent = status === 'active' ? ('step' as const) : undefined;\n\n  const inner =\n    orientation === 'vertical' ? (\n      <>\n        <span className=\"tw:flex tw:flex-col tw:items-center tw:self-stretch\">\n          {indicator}\n          {!isLast && <StepperStepConnector />}\n        </span>\n        <span className=\"tw:flex tw:min-w-0 tw:flex-col tw:items-start tw:pb-6 tw:text-left\">\n          {contentChildren}\n        </span>\n      </>\n    ) : (\n      <>\n        {indicator}\n        <span className=\"tw:flex tw:flex-col tw:items-center tw:text-center\">\n          {contentChildren}\n        </span>\n      </>\n    );\n\n  return (\n    <StepItemContext value={stepContext}>\n      {interactive ? (\n        <button\n          {...props}\n          type=\"button\"\n          onClick={handleClick}\n          aria-current={ariaCurrent}\n          data-status={status}\n          className={stepClassName}\n        >\n          {inner}\n        </button>\n      ) : (\n        <div {...props} aria-current={ariaCurrent} data-status={status} className={stepClassName}>\n          {inner}\n        </div>\n      )}\n    </StepItemContext>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { descriptionClassnames } from './styles';\n\ntype Props = ComponentProps<'span'>;\n\n/** Optional secondary text below the step label. */\nexport const StepperStepDescription = ({ className, ...props }: Props) => (\n  <span className={cn(descriptionClassnames, className)} {...props} />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { useStepItemContext } from './StepperContext';\nimport { labelVariants } from './styles';\n\ntype Props = ComponentProps<'span'>;\n\n/** Step title — short label describing the step (e.g. \"Account\", \"Payment\"). */\nexport const StepperStepLabel = ({ className, ...props }: Props) => {\n  const { status } = useStepItemContext();\n  return <span className={cn(labelVariants({ status }), className)} {...props} />;\n};\n","import {\n  Children,\n  type ComponentProps,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport {\n  StepItemContext,\n  StepperContext,\n  type StepperOrientation,\n  StepPositionContext,\n  type StepStatus,\n} from './StepperContext';\nimport { StepperStep } from './StepperStep';\nimport { StepperStepConnector } from './StepperStepConnector';\nimport { StepperStepDescription } from './StepperStepDescription';\nimport { StepperStepIndicator } from './StepperStepIndicator';\nimport { StepperStepLabel } from './StepperStepLabel';\nimport { stepperVariants } from './styles';\n\ntype Props = {\n  orientation?: StepperOrientation;\n  /** Given, steps render as `<button>`s; omitted, as visual-only `<div>`s. */\n  onStepClick?: (index: number) => void;\n  children: ReactNode;\n} & Omit<ComponentProps<'ol'>, 'children'> &\n  VariantProps<typeof stepperVariants>;\n\ntype StepElement = ReactElement<{ status?: StepStatus }>;\n\nconst isStepElement = (child: ReactNode): child is StepElement =>\n  isValidElement(child) && child.type === StepperStep;\n\nconst getStepStatus = (step: StepElement): StepStatus => step.props.status ?? 'upcoming';\n\n/**\n * Linear progress indicator for a multi-step flow.\n *\n * **When to use:** a finite, ordered sequence (wizard, multi-step form, deploy pipeline).\n * **When NOT to use:** branching navigation → `Tabs`; unordered status list → `Timeline`;\n * a single percentage → `Progress`.\n * **Composition:** `Stepper.Step` + `StepIndicator` + `StepLabel`; connectors render automatically.\n */\nexport const Stepper = ({\n  orientation = 'horizontal',\n  onStepClick,\n  children,\n  className,\n  ...props\n}: Props) => {\n  // oxlint-disable-next-line react-x/no-children-to-array -- need step count for connectors + positional context\n  const steps = Children.toArray(children).filter(isStepElement);\n  const lastIndex = steps.length - 1;\n\n  return (\n    <StepperContext value={{ orientation, onStepClick }}>\n      <ol\n        className={cn(\n          'tailwindcss-preflight',\n          'tw:list-none',\n          'tw:p-0',\n          'tw:m-0',\n          stepperVariants({ orientation }),\n          className,\n        )}\n        {...props}\n      >\n        {steps.map((step, index) => {\n          const isLast = index === lastIndex;\n          const wrappedStep = (\n            <StepPositionContext value={{ index, isLast }}>{step}</StepPositionContext>\n          );\n\n          // The <ol> keeps only <li> children; the horizontal connector goes inside the step's <li>.\n          if (orientation === 'vertical') {\n            return (\n              // oxlint-disable-next-line react-x/no-array-index-key\n              <li key={step.key ?? index} className=\"tw:contents\">\n                {wrappedStep}\n              </li>\n            );\n          }\n\n          return (\n            // oxlint-disable-next-line react-x/no-array-index-key\n            <li key={step.key ?? index} className=\"tw:contents\">\n              {wrappedStep}\n              {!isLast && (\n                // Coloured by the preceding step's status.\n                <StepItemContext value={{ index: -1, isLast: false, status: getStepStatus(step) }}>\n                  <StepperStepConnector />\n                </StepItemContext>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </StepperContext>\n  );\n};\n\nStepper.Step = StepperStep;\nStepper.StepIndicator = StepperStepIndicator;\nStepper.StepLabel = StepperStepLabel;\nStepper.StepDescription = StepperStepDescription;\nStepper.StepConnector = StepperStepConnector;\n"],"mappings":"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"}

package/dist/{Switch-DccpSpzC.js → Switch-DONWW7ju.js}

@@ -1,9 +1,9 @@
-import { FieldBox } from "./FieldBox-BrxLkY9C.js";
+import { FieldBox } from "./FieldBox-DdSdJ3ZN.js";
 import { useId } from "react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Root, Thumb } from "@radix-ui/react-switch";
-//#region src/components/Switch/styles.ts
+// src/components/Switch/styles.ts
 const switchVariants = cva([
 	"tailwindcss-preflight",
 	"tw:shrink-0",
@@ -38,8 +38,7 @@ const thumbVariants = cva([
 	"tw:data-[state=checked]:translate-x-[16px]",
 	"tw:data-[state=unchecked]:translate-x-0.5"
 ]);
-//#endregion
-//#region src/components/Switch/Switch.tsx
+// src/components/Switch/Switch.tsx
 const Switch = ({ ref, className, disabled = false, id: idProp, children, description, variant, position, ...props }) => {
 	const fallbackId = useId();
 	const id = idProp?.toString() ?? fallbackId;
@@ -60,7 +59,6 @@ const Switch = ({ ref, className, disabled = false, id: idProp, children, descri
 		children: [/* @__PURE__ */ jsx(FieldBox.Title, { children }), description && /* @__PURE__ */ jsx(FieldBox.Description, { children: description })]
 	});
 };
-//#endregion
 export { Switch };
 
-//# sourceMappingURL=Switch-DccpSpzC.js.map
+//# sourceMappingURL=Switch-DONWW7ju.js.map

package/dist/{Switch-DccpSpzC.js.map → Switch-DONWW7ju.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Switch-DccpSpzC.js","names":[],"sources":["../src/components/Switch/styles.ts","../src/components/Switch/Switch.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const switchVariants = cva([\n  'tailwindcss-preflight',\n  'tw:shrink-0',\n  'tw:cursor-pointer',\n  'tw:disabled:cursor-not-allowed',\n  'tw:disabled:opacity-disabled',\n  'tw:peer',\n  'tw:inline-flex',\n  'tw:items-center',\n\n  // track\n  'tw:w-9',\n  'tw:h-5',\n  'tw:rounded-full',\n  'tw:border',\n  'tw:border-transparent',\n  'tw:bg-input',\n  'tw:transition-colors',\n\n  // checked\n  'tw:data-[state=checked]:bg-primary',\n\n  // focus\n  'tw:focus-visible:outline-hidden',\n  'tw:focus-visible:border-primary',\n  'tw:focus-visible:ring-3',\n  'tw:focus-visible:ring-ring/50',\n]);\n\nexport const thumbVariants = cva([\n  'tw:block',\n  'tw:shrink-0',\n  'tw:pointer-events-none',\n  'tw:bg-white',\n  'tw:rounded-full',\n  'tw:size-4',\n  'tw:shadow-sm',\n  'tw:transition-transform',\n  'tw:data-[state=checked]:translate-x-[16px]',\n  'tw:data-[state=unchecked]:translate-x-0.5',\n]);\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Root, Thumb } from '@radix-ui/react-switch';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { FieldBox } from '../FieldBox';\nimport type { fieldBoxVariants } from '../FieldBox/styles';\n\nimport { switchVariants, thumbVariants } from './styles';\n\ntype Props = {\n  id?: string | number;\n  children?: ReactNode;\n  description?: ReactNode;\n  variant?: VariantProps<typeof fieldBoxVariants>['variant'];\n  position?: 'start' | 'end';\n} & Omit<ComponentProps<typeof Root>, 'asChild' | 'id'>;\n\nexport const Switch = ({\n  ref,\n  className,\n  disabled = false,\n  id: idProp,\n  children,\n  description,\n  variant,\n  position,\n  ...props\n}: Props) => {\n  const fallbackId = useId();\n  const id = idProp?.toString() ?? fallbackId;\n\n  const switchElement = (\n    <Root\n      {...props}\n      ref={ref}\n      id={id}\n      disabled={disabled}\n      className={switchVariants({ className })}\n    >\n      <Thumb className={thumbVariants()} />\n    </Root>\n  );\n\n  if (!children) return switchElement;\n\n  return (\n    <FieldBox htmlFor={id} variant={variant} position={position} control={switchElement}>\n      <FieldBox.Title>{children}</FieldBox.Title>\n      {description && <FieldBox.Description>{description}</FieldBox.Description>}\n    </FieldBox>\n  );\n};\n"],"mappings":";;;;;;AAEA,MAAa,iBAAiB,IAAI;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CACA;AACF,CAAC;AAED,MAAa,gBAAgB,IAAI;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;;ACxBD,MAAa,UAAU,EACrB,KACA,WACA,WAAW,OACX,IAAI,QACJ,UACA,aACA,SACA,UACA,GAAG,YACQ;CACX,MAAM,aAAa,MAAM;CACzB,MAAM,KAAK,QAAQ,SAAS,KAAK;CAEjC,MAAM,gBACJ,oBAAC,MAAD;EACE,GAAI;EACC;EACD;EACM;EACV,WAAW,eAAe,EAAE,UAAU,CAAC;EAEvC,UAAA,oBAAC,OAAD,EAAO,WAAW,cAAc,EAAI,CAAA;CAChC,CAAA;CAGR,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,UAAD;EAAU,SAAS;EAAa;EAAmB;EAAU,SAAS;EAAtE,UAAA,CACE,oBAAC,SAAS,OAAV,EAAiB,SAAyB,CAAA,GACzC,eAAe,oBAAC,SAAS,aAAV,EAAA,UAAuB,YAAkC,CAAA,CACjE;;AAEd"}
+{"version":3,"file":"Switch-DONWW7ju.js","names":[],"sources":["../src/components/Switch/styles.ts","../src/components/Switch/Switch.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const switchVariants = cva([\n  'tailwindcss-preflight',\n  'tw:shrink-0',\n  'tw:cursor-pointer',\n  'tw:disabled:cursor-not-allowed',\n  'tw:disabled:opacity-disabled',\n  'tw:peer',\n  'tw:inline-flex',\n  'tw:items-center',\n\n  // track\n  'tw:w-9',\n  'tw:h-5',\n  'tw:rounded-full',\n  'tw:border',\n  'tw:border-transparent',\n  'tw:bg-input',\n  'tw:transition-colors',\n\n  // checked\n  'tw:data-[state=checked]:bg-primary',\n\n  // focus\n  'tw:focus-visible:outline-hidden',\n  'tw:focus-visible:border-primary',\n  'tw:focus-visible:ring-3',\n  'tw:focus-visible:ring-ring/50',\n]);\n\nexport const thumbVariants = cva([\n  'tw:block',\n  'tw:shrink-0',\n  'tw:pointer-events-none',\n  'tw:bg-white',\n  'tw:rounded-full',\n  'tw:size-4',\n  'tw:shadow-sm',\n  'tw:transition-transform',\n  'tw:data-[state=checked]:translate-x-[16px]',\n  'tw:data-[state=unchecked]:translate-x-0.5',\n]);\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Root, Thumb } from '@radix-ui/react-switch';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { FieldBox } from '../FieldBox';\nimport type { fieldBoxVariants } from '../FieldBox/styles';\n\nimport { switchVariants, thumbVariants } from './styles';\n\ntype Props = {\n  id?: string | number;\n  children?: ReactNode;\n  description?: ReactNode;\n  variant?: VariantProps<typeof fieldBoxVariants>['variant'];\n  position?: 'start' | 'end';\n} & Omit<ComponentProps<typeof Root>, 'asChild' | 'id'>;\n\nexport const Switch = ({\n  ref,\n  className,\n  disabled = false,\n  id: idProp,\n  children,\n  description,\n  variant,\n  position,\n  ...props\n}: Props) => {\n  const fallbackId = useId();\n  const id = idProp?.toString() ?? fallbackId;\n\n  const switchElement = (\n    <Root\n      {...props}\n      ref={ref}\n      id={id}\n      disabled={disabled}\n      className={switchVariants({ className })}\n    >\n      <Thumb className={thumbVariants()} />\n    </Root>\n  );\n\n  if (!children) return switchElement;\n\n  return (\n    <FieldBox htmlFor={id} variant={variant} position={position} control={switchElement}>\n      <FieldBox.Title>{children}</FieldBox.Title>\n      {description && <FieldBox.Description>{description}</FieldBox.Description>}\n    </FieldBox>\n  );\n};\n"],"mappings":";;;;;;AAEA,MAAa,iBAAiB,IAAI;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CACA;AACF,CAAC;AAED,MAAa,gBAAgB,IAAI;CAC/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;ACxBD,MAAa,UAAU,EACrB,KACA,WACA,WAAW,OACX,IAAI,QACJ,UACA,aACA,SACA,UACA,GAAG,YACQ;CACX,MAAM,aAAa,MAAM;CACzB,MAAM,KAAK,QAAQ,SAAS,KAAK;CAEjC,MAAM,gBACJ,oBAAC,MAAD;EACE,GAAI;EACC;EACD;EACM;EACV,WAAW,eAAe,EAAE,UAAU,CAAC;EAEvC,UAAA,oBAAC,OAAD,EAAO,WAAW,cAAc,EAAI,CAAA;CAChC,CAAA;CAGR,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,UAAD;EAAU,SAAS;EAAa;EAAmB;EAAU,SAAS;EAAtE,UAAA,CACE,oBAAC,SAAS,OAAV,EAAiB,SAAyB,CAAA,GACzC,eAAe,oBAAC,SAAS,aAAV,EAAA,UAAuB,YAAkC,CAAA,CACjE;;AAEd"}

package/dist/{Table-CilEvpMq.js → Table-BwgBm3hJ.js}

@@ -1,55 +1,49 @@
-import { cn } from "./classNames-DcGnTh2N.js";
-import { ChevronDown, ChevronUp, ChevronsUpDown } from "./icons-ZIeZXXS7.js";
+import { cn } from "./classNames-DkX30VJU.js";
+import { ChevronDown, ChevronUp, ChevronsUpDown } from "./icons-DDR9dFSr.js";
 import { Skeleton } from "./internal/components/Skeleton/Skeleton.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/Table/TableBody.tsx
+// src/components/Table/TableBody.tsx
 const TableBody = ({ withBorderSeparator = true, className, ...props }) => {
 	return /* @__PURE__ */ jsx("tbody", {
 		className: cn({ "tw:[&_tr]:border-0 tw:[&_tr]:border-b-border tw:[&_tr]:border-b tw:[&_tr]:border-solid tw:[&_tr:last-child]:border-0": withBorderSeparator }, className),
 		...props
 	});
 };
-//#endregion
-//#region src/components/Table/TableCell.tsx
+// src/components/Table/TableCell.tsx
 const TableCell = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx("td", {
 		className: cn("tw:px-3 tw:py-2", className),
 		...props
 	});
 };
-//#endregion
-//#region src/components/Table/TableFooter.tsx
+// src/components/Table/TableFooter.tsx
 const TableFooter = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx("tfoot", {
 		className: cn("tw:bg-muted/50 tw:border-t tw:border-border tw:font-medium tw:[&>tr]:last:border-b-0", className),
 		...props
 	});
 };
-//#endregion
-//#region src/components/Table/TableHead.tsx
+// src/components/Table/TableHead.tsx
 const TableHead = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx("th", {
 		className: cn("tw:px-3 tw:py-2 tw:text-left tw:font-medium tw:whitespace-nowrap tw:[&:has([role=checkbox])]:pr-0 tw:[&>[role=checkbox]]:translate-y-[2px] tw:focus-within:ring-2 tw:focus-within:ring-ring/50", className),
 		...props
 	});
 };
-//#endregion
-//#region src/components/Table/TableHeader.tsx
+// src/components/Table/TableHeader.tsx
 const TableHeader = ({ withShadow = false, className, ...props }) => {
 	return /* @__PURE__ */ jsx("thead", {
 		className: cn("tw:sticky tw:top-0 tw:z-10 tw:bg-card tw:[&_tr]:h-11 tw:[&_tr]:hover:bg-transparent tw:[&_tr]:border-b tw:[&_tr]:border-border", { "tw:shadow-table": withShadow }, className),
 		...props
 	});
 };
-//#endregion
-//#region src/components/Table/TableRow.tsx
+// src/components/Table/TableRow.tsx
 const TableRow = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("tr", {
 	ref,
 	className: cn("tw:hover:bg-[var(--hover,color-mix(in_oklab,rgb(var(--muted))_50%,transparent))] tw:aria-selected:bg-selected tw:aria-selected:hover:bg-selected tw:aria-selected:text-[var(--selected-foreground,currentColor)]", className),
 	...props
 });
-//#endregion
-//#region src/components/Table/TableSkeletonRows.tsx
+// src/components/Table/TableSkeletonRows.tsx
 const NAME_WIDTHS = [
 	"tw:w-2/5",
 	"tw:w-1/3",
@@ -105,8 +99,7 @@ const TableSkeletonRows = ({ columns, noun, rows = 5 }) => Array.from({ length:
 		})]
 	}, index))
 }, row));
-//#endregion
-//#region src/components/Table/TableSortHeader.tsx
+// src/components/Table/TableSortHeader.tsx
 /** Maps a sort direction to the `aria-sort` value for the enclosing `Table.Head`. */
 const tableAriaSort = (sorted) => sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none";
 /**
@@ -125,8 +118,7 @@ const TableSortHeader = ({ sorted, children, className, ...props }) => {
 		children: [children, /* @__PURE__ */ jsx(Icon, { className: "tw:size-3 tw:text-muted-foreground" })]
 	});
 };
-//#endregion
-//#region src/components/Table/Table.tsx
+// src/components/Table/Table.tsx
 /**
 * Presentational table for rows sharing one schema; sort/filter state is the consumer's.
 *
@@ -152,7 +144,6 @@ Table.Cell = TableCell;
 Table.Footer = TableFooter;
 Table.SortHeader = TableSortHeader;
 Table.SkeletonRows = TableSkeletonRows;
-//#endregion
 export { Table, TableSortHeader, tableAriaSort };
 
-//# sourceMappingURL=Table-CilEvpMq.js.map
+//# sourceMappingURL=Table-BwgBm3hJ.js.map

package/dist/{Table-CilEvpMq.js.map → Table-BwgBm3hJ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Table-CilEvpMq.js","names":[],"sources":["../src/components/Table/TableBody.tsx","../src/components/Table/TableCell.tsx","../src/components/Table/TableFooter.tsx","../src/components/Table/TableHead.tsx","../src/components/Table/TableHeader.tsx","../src/components/Table/TableRow.tsx","../src/components/Table/TableSkeletonRows.tsx","../src/components/Table/TableSortHeader.tsx","../src/components/Table/Table.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nexport const TableBody = ({\n  withBorderSeparator = true,\n  className,\n  ...props\n}: { withBorderSeparator?: boolean } & ComponentProps<'tbody'>) => {\n  return (\n    <tbody\n      className={cn(\n        {\n          'tw:[&_tr]:border-0 tw:[&_tr]:border-b-border tw:[&_tr]:border-b tw:[&_tr]:border-solid tw:[&_tr:last-child]:border-0':\n            withBorderSeparator,\n        },\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nexport const TableCell = ({ className, ...props }: ComponentProps<'td'>) => {\n  return <td className={cn('tw:px-3 tw:py-2', className)} {...props} />;\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nexport const TableFooter = ({ className, ...props }: ComponentProps<'tfoot'>) => {\n  return (\n    <tfoot\n      className={cn(\n        'tw:bg-muted/50 tw:border-t tw:border-border tw:font-medium tw:[&>tr]:last:border-b-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nexport const TableHead = ({ className, ...props }: ComponentProps<'th'>) => {\n  return (\n    <th\n      className={cn(\n        'tw:px-3 tw:py-2 tw:text-left tw:font-medium tw:whitespace-nowrap tw:[&:has([role=checkbox])]:pr-0 tw:[&>[role=checkbox]]:translate-y-[2px] tw:focus-within:ring-2 tw:focus-within:ring-ring/50',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nexport const TableHeader = ({\n  withShadow = false,\n  className,\n  ...props\n}: { withShadow?: boolean } & ComponentProps<'thead'>) => {\n  return (\n    <thead\n      className={cn(\n        // - The surface sits on `thead`, so a caller's `bg-*` replaces it at rest and on hover.\n        // - `[&_tr]:hover:` (0,2,1) outranks `TableRow`'s hover tint (0,2,0): a header is not hoverable.\n        'tw:sticky tw:top-0 tw:z-10 tw:bg-card tw:[&_tr]:h-11 tw:[&_tr]:hover:bg-transparent tw:[&_tr]:border-b tw:[&_tr]:border-border',\n        { 'tw:shadow-table': withShadow },\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nexport const TableRow = ({ ref, className, ...props }: ComponentProps<'tr'>) => (\n  <tr\n    ref={ref}\n    className={cn(\n      'tw:hover:bg-[var(--hover,color-mix(in_oklab,rgb(var(--muted))_50%,transparent))] tw:aria-selected:bg-selected tw:aria-selected:hover:bg-selected tw:aria-selected:text-[var(--selected-foreground,currentColor)]',\n      className,\n    )}\n    {...props}\n  />\n);\n","import { cn } from '../../utils';\nimport { Skeleton } from '../Skeleton/Skeleton';\n\nimport { TableCell } from './TableCell';\nimport { TableRow } from './TableRow';\n\n/** A width class, or one per row so the placeholders don't line up into a block. */\ntype Width = string | string[];\n\n/**\n * What one column shows while the rows load.\n *\n * - `className` and `colSpan` match the real column's cells, so the placeholders keep their layout.\n * - `text` (default): one line of `widthClassName`.\n * - `name`: an optional icon (`gapClassName` from the lines, `tw:gap-3.5` by default), a name line\n *   varied per row by default, an optional description line.\n * - `empty`: nothing, e.g. for a row's actions.\n */\nexport type TableSkeletonColumn = { className?: string; colSpan?: number } & (\n  | { type?: 'text'; widthClassName?: Width }\n  | {\n      type: 'name';\n      iconClassName?: string;\n      gapClassName?: string;\n      widthClassName?: Width;\n      descriptionClassName?: Width;\n    }\n  | { type: 'empty' }\n);\n\nconst NAME_WIDTHS = ['tw:w-2/5', 'tw:w-1/3', 'tw:w-1/2', 'tw:w-1/4', 'tw:w-2/5 tw:max-w-60'];\n\nconst widthOf = (width: Width, row: number) =>\n  typeof width === 'string' ? width : width[row % width.length];\n\nconst SkeletonCellContent = ({ column, row }: { column: TableSkeletonColumn; row: number }) => {\n  switch (column.type) {\n    case 'empty':\n      return null;\n    case 'name':\n      return (\n        <div className={cn('tw:flex tw:items-center', column.gapClassName ?? 'tw:gap-3.5')}>\n          {column.iconClassName && (\n            <Skeleton height=\"sm\" className={cn('tw:shrink-0', column.iconClassName)} />\n          )}\n          <div className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-1.5\">\n            <Skeleton height=\"xs\" className={widthOf(column.widthClassName ?? NAME_WIDTHS, row)} />\n            {column.descriptionClassName && (\n              <Skeleton height=\"xxs\" className={widthOf(column.descriptionClassName, row)} />\n            )}\n          </div>\n        </div>\n      );\n    default:\n      return <Skeleton height=\"xs\" className={widthOf(column.widthClassName ?? 'tw:w-3/4', row)} />;\n  }\n};\n\n/**\n * Placeholder rows in a table's own columns while its rows load.\n *\n * - Render inside `Table.Body` in place of the rows.\n * - The first row announces `Loading {noun}` to screen readers; pass the plural noun, e.g. `jobs`.\n * - The rows don't take the hover tint, as there is nothing to act on yet.\n */\nexport const TableSkeletonRows = ({\n  columns,\n  noun,\n  rows = 5,\n}: {\n  columns: TableSkeletonColumn[];\n  noun: string;\n  rows?: number;\n}) =>\n  Array.from({ length: rows }, (_, row) => (\n    // oxlint-disable-next-line react/no-array-index-key -- the rows are identical placeholders\n    <TableRow key={row} className=\"tw:hover:bg-transparent\">\n      {columns.map((column, index) => (\n        // oxlint-disable-next-line react/no-array-index-key -- columns have no id of their own\n        <TableCell key={index} className={column.className} colSpan={column.colSpan}>\n          {row === 0 && index === 0 && (\n            <span role=\"status\" className=\"tw:sr-only\">{`Loading ${noun}`}</span>\n          )}\n          <SkeletonCellContent column={column} row={row} />\n        </TableCell>\n      ))}\n    </TableRow>\n  ));\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { ChevronDown, ChevronsUpDown, ChevronUp } from '../../icons';\nimport { cn } from '../../utils';\n\nexport type TableSortDirection = 'asc' | 'desc' | false;\n\n/** Maps a sort direction to the `aria-sort` value for the enclosing `Table.Head`. */\nexport const tableAriaSort = (sorted: TableSortDirection): ComponentProps<'th'>['aria-sort'] =>\n  sorted === 'asc' ? 'ascending' : sorted === 'desc' ? 'descending' : 'none';\n\ntype Props = {\n  /** Current sort state for this column: `'asc'`, `'desc'`, or `false` when unsorted. */\n  sorted: TableSortDirection;\n  children: ReactNode;\n} & Omit<ComponentProps<'button'>, 'children' | 'type'>;\n\n/**\n * Clickable column-header label with a sort-direction chevron, for use inside `Table.Head`.\n *\n * Presentational only — it owns no sort state. Pair it with your sort model (a `useState`\n * key/direction pair, or `@tanstack/react-table`'s `getToggleSortingHandler()` / `getIsSorted()`)\n * and set `aria-sort` on the enclosing `Table.Head` via {@link tableAriaSort}.\n */\nexport const TableSortHeader = ({ sorted, children, className, ...props }: Props) => {\n  const Icon = sorted === false ? ChevronsUpDown : sorted === 'asc' ? ChevronUp : ChevronDown;\n  return (\n    <button\n      className={cn(\n        'tw:group tw:flex tw:cursor-pointer tw:items-center tw:gap-1 tw:border-0 tw:bg-transparent tw:p-0 tw:font-medium tw:text-inherit',\n        className,\n      )}\n      {...props}\n      type=\"button\"\n    >\n      {children}\n      <Icon className=\"tw:size-3 tw:text-muted-foreground\" />\n    </button>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { TableBody } from './TableBody';\nimport { TableCell } from './TableCell';\nimport { TableFooter } from './TableFooter';\nimport { TableHead } from './TableHead';\nimport { TableHeader } from './TableHeader';\nimport { TableRow } from './TableRow';\nimport { TableSkeletonRows } from './TableSkeletonRows';\nimport { TableSortHeader } from './TableSortHeader';\n\n/**\n * - `borderCollapsed`: collapsed borders vs separate row spacing.\n * - `bordered`: rounded bordered container with overflow scrolling.\n */\ntype Props = {\n  borderCollapsed?: boolean;\n  bordered?: boolean;\n  containerClassName?: string;\n} & ComponentProps<'table'>;\n\n/**\n * Presentational table for rows sharing one schema; sort/filter state is the consumer's.\n *\n * - Not for rows of differing shape — use a `Card` list.\n * - Wrap in `PageLayout.Content`.\n *\n * @see RECIPES.md#list-detail\n */\nexport const Table = ({\n  borderCollapsed = true,\n  bordered = false,\n  containerClassName,\n  className,\n  ...props\n}: Props) => {\n  return (\n    <div\n      className={cn(\n        'tw:relative tw:w-full',\n        bordered && 'tw:overflow-auto tw:rounded-[10px] tw:border tw:border-solid tw:border-border',\n        containerClassName,\n      )}\n    >\n      <table\n        className={cn(\n          // - Semantic tokens so text and fill flip under `[data-theme='dark']`.\n          // - The body sits on the card surface, like `Table.Header`.\n          'tw:w-full tw:caption-bottom tw:bg-card tw:text-sm tw:text-foreground',\n          borderCollapsed ? 'tw:border-collapse' : 'tw:border-separate tw:border-spacing-y-1',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n};\n\nTable.Header = TableHeader;\nTable.Head = TableHead;\nTable.Body = TableBody;\nTable.Row = TableRow;\nTable.Cell = TableCell;\nTable.Footer = TableFooter;\nTable.SortHeader = TableSortHeader;\nTable.SkeletonRows = TableSkeletonRows;\n"],"mappings":"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"}
+{"version":3,"file":"Table-BwgBm3hJ.js","names":[],"sources":["../src/components/Table/TableBody.tsx","../src/components/Table/TableCell.tsx","../src/components/Table/TableFooter.tsx","../src/components/Table/TableHead.tsx","../src/components/Table/TableHeader.tsx","../src/components/Table/TableRow.tsx","../src/components/Table/TableSkeletonRows.tsx","../src/components/Table/TableSortHeader.tsx","../src/components/Table/Table.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nexport const TableBody = ({\n  withBorderSeparator = true,\n  className,\n  ...props\n}: { withBorderSeparator?: boolean } & ComponentProps<'tbody'>) => {\n  return (\n    <tbody\n      className={cn(\n        {\n          'tw:[&_tr]:border-0 tw:[&_tr]:border-b-border tw:[&_tr]:border-b tw:[&_tr]:border-solid tw:[&_tr:last-child]:border-0':\n            withBorderSeparator,\n        },\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nexport const TableCell = ({ className, ...props }: ComponentProps<'td'>) => {\n  return <td className={cn('tw:px-3 tw:py-2', className)} {...props} />;\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nexport const TableFooter = ({ className, ...props }: ComponentProps<'tfoot'>) => {\n  return (\n    <tfoot\n      className={cn(\n        'tw:bg-muted/50 tw:border-t tw:border-border tw:font-medium tw:[&>tr]:last:border-b-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nexport const TableHead = ({ className, ...props }: ComponentProps<'th'>) => {\n  return (\n    <th\n      className={cn(\n        'tw:px-3 tw:py-2 tw:text-left tw:font-medium tw:whitespace-nowrap tw:[&:has([role=checkbox])]:pr-0 tw:[&>[role=checkbox]]:translate-y-[2px] tw:focus-within:ring-2 tw:focus-within:ring-ring/50',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nexport const TableHeader = ({\n  withShadow = false,\n  className,\n  ...props\n}: { withShadow?: boolean } & ComponentProps<'thead'>) => {\n  return (\n    <thead\n      className={cn(\n        // - The surface sits on `thead`, so a caller's `bg-*` replaces it at rest and on hover.\n        // - `[&_tr]:hover:` (0,2,1) outranks `TableRow`'s hover tint (0,2,0): a header is not hoverable.\n        'tw:sticky tw:top-0 tw:z-10 tw:bg-card tw:[&_tr]:h-11 tw:[&_tr]:hover:bg-transparent tw:[&_tr]:border-b tw:[&_tr]:border-border',\n        { 'tw:shadow-table': withShadow },\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nexport const TableRow = ({ ref, className, ...props }: ComponentProps<'tr'>) => (\n  <tr\n    ref={ref}\n    className={cn(\n      'tw:hover:bg-[var(--hover,color-mix(in_oklab,rgb(var(--muted))_50%,transparent))] tw:aria-selected:bg-selected tw:aria-selected:hover:bg-selected tw:aria-selected:text-[var(--selected-foreground,currentColor)]',\n      className,\n    )}\n    {...props}\n  />\n);\n","import { cn } from '../../utils';\nimport { Skeleton } from '../Skeleton/Skeleton';\n\nimport { TableCell } from './TableCell';\nimport { TableRow } from './TableRow';\n\n/** A width class, or one per row so the placeholders don't line up into a block. */\ntype Width = string | string[];\n\n/**\n * What one column shows while the rows load.\n *\n * - `className` and `colSpan` match the real column's cells, so the placeholders keep their layout.\n * - `text` (default): one line of `widthClassName`.\n * - `name`: an optional icon (`gapClassName` from the lines, `tw:gap-3.5` by default), a name line\n *   varied per row by default, an optional description line.\n * - `empty`: nothing, e.g. for a row's actions.\n */\nexport type TableSkeletonColumn = { className?: string; colSpan?: number } & (\n  | { type?: 'text'; widthClassName?: Width }\n  | {\n      type: 'name';\n      iconClassName?: string;\n      gapClassName?: string;\n      widthClassName?: Width;\n      descriptionClassName?: Width;\n    }\n  | { type: 'empty' }\n);\n\nconst NAME_WIDTHS = ['tw:w-2/5', 'tw:w-1/3', 'tw:w-1/2', 'tw:w-1/4', 'tw:w-2/5 tw:max-w-60'];\n\nconst widthOf = (width: Width, row: number) =>\n  typeof width === 'string' ? width : width[row % width.length];\n\nconst SkeletonCellContent = ({ column, row }: { column: TableSkeletonColumn; row: number }) => {\n  switch (column.type) {\n    case 'empty':\n      return null;\n    case 'name':\n      return (\n        <div className={cn('tw:flex tw:items-center', column.gapClassName ?? 'tw:gap-3.5')}>\n          {column.iconClassName && (\n            <Skeleton height=\"sm\" className={cn('tw:shrink-0', column.iconClassName)} />\n          )}\n          <div className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-1.5\">\n            <Skeleton height=\"xs\" className={widthOf(column.widthClassName ?? NAME_WIDTHS, row)} />\n            {column.descriptionClassName && (\n              <Skeleton height=\"xxs\" className={widthOf(column.descriptionClassName, row)} />\n            )}\n          </div>\n        </div>\n      );\n    default:\n      return <Skeleton height=\"xs\" className={widthOf(column.widthClassName ?? 'tw:w-3/4', row)} />;\n  }\n};\n\n/**\n * Placeholder rows in a table's own columns while its rows load.\n *\n * - Render inside `Table.Body` in place of the rows.\n * - The first row announces `Loading {noun}` to screen readers; pass the plural noun, e.g. `jobs`.\n * - The rows don't take the hover tint, as there is nothing to act on yet.\n */\nexport const TableSkeletonRows = ({\n  columns,\n  noun,\n  rows = 5,\n}: {\n  columns: TableSkeletonColumn[];\n  noun: string;\n  rows?: number;\n}) =>\n  Array.from({ length: rows }, (_, row) => (\n    // oxlint-disable-next-line react/no-array-index-key -- the rows are identical placeholders\n    <TableRow key={row} className=\"tw:hover:bg-transparent\">\n      {columns.map((column, index) => (\n        // oxlint-disable-next-line react/no-array-index-key -- columns have no id of their own\n        <TableCell key={index} className={column.className} colSpan={column.colSpan}>\n          {row === 0 && index === 0 && (\n            <span role=\"status\" className=\"tw:sr-only\">{`Loading ${noun}`}</span>\n          )}\n          <SkeletonCellContent column={column} row={row} />\n        </TableCell>\n      ))}\n    </TableRow>\n  ));\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { ChevronDown, ChevronsUpDown, ChevronUp } from '../../icons';\nimport { cn } from '../../utils';\n\nexport type TableSortDirection = 'asc' | 'desc' | false;\n\n/** Maps a sort direction to the `aria-sort` value for the enclosing `Table.Head`. */\nexport const tableAriaSort = (sorted: TableSortDirection): ComponentProps<'th'>['aria-sort'] =>\n  sorted === 'asc' ? 'ascending' : sorted === 'desc' ? 'descending' : 'none';\n\ntype Props = {\n  /** Current sort state for this column: `'asc'`, `'desc'`, or `false` when unsorted. */\n  sorted: TableSortDirection;\n  children: ReactNode;\n} & Omit<ComponentProps<'button'>, 'children' | 'type'>;\n\n/**\n * Clickable column-header label with a sort-direction chevron, for use inside `Table.Head`.\n *\n * Presentational only — it owns no sort state. Pair it with your sort model (a `useState`\n * key/direction pair, or `@tanstack/react-table`'s `getToggleSortingHandler()` / `getIsSorted()`)\n * and set `aria-sort` on the enclosing `Table.Head` via {@link tableAriaSort}.\n */\nexport const TableSortHeader = ({ sorted, children, className, ...props }: Props) => {\n  const Icon = sorted === false ? ChevronsUpDown : sorted === 'asc' ? ChevronUp : ChevronDown;\n  return (\n    <button\n      className={cn(\n        'tw:group tw:flex tw:cursor-pointer tw:items-center tw:gap-1 tw:border-0 tw:bg-transparent tw:p-0 tw:font-medium tw:text-inherit',\n        className,\n      )}\n      {...props}\n      type=\"button\"\n    >\n      {children}\n      <Icon className=\"tw:size-3 tw:text-muted-foreground\" />\n    </button>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { TableBody } from './TableBody';\nimport { TableCell } from './TableCell';\nimport { TableFooter } from './TableFooter';\nimport { TableHead } from './TableHead';\nimport { TableHeader } from './TableHeader';\nimport { TableRow } from './TableRow';\nimport { TableSkeletonRows } from './TableSkeletonRows';\nimport { TableSortHeader } from './TableSortHeader';\n\n/**\n * - `borderCollapsed`: collapsed borders vs separate row spacing.\n * - `bordered`: rounded bordered container with overflow scrolling.\n */\ntype Props = {\n  borderCollapsed?: boolean;\n  bordered?: boolean;\n  containerClassName?: string;\n} & ComponentProps<'table'>;\n\n/**\n * Presentational table for rows sharing one schema; sort/filter state is the consumer's.\n *\n * - Not for rows of differing shape — use a `Card` list.\n * - Wrap in `PageLayout.Content`.\n *\n * @see RECIPES.md#list-detail\n */\nexport const Table = ({\n  borderCollapsed = true,\n  bordered = false,\n  containerClassName,\n  className,\n  ...props\n}: Props) => {\n  return (\n    <div\n      className={cn(\n        'tw:relative tw:w-full',\n        bordered && 'tw:overflow-auto tw:rounded-[10px] tw:border tw:border-solid tw:border-border',\n        containerClassName,\n      )}\n    >\n      <table\n        className={cn(\n          // - Semantic tokens so text and fill flip under `[data-theme='dark']`.\n          // - The body sits on the card surface, like `Table.Header`.\n          'tw:w-full tw:caption-bottom tw:bg-card tw:text-sm tw:text-foreground',\n          borderCollapsed ? 'tw:border-collapse' : 'tw:border-separate tw:border-spacing-y-1',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n};\n\nTable.Header = TableHeader;\nTable.Head = TableHead;\nTable.Body = TableBody;\nTable.Row = TableRow;\nTable.Cell = TableCell;\nTable.Footer = TableFooter;\nTable.SortHeader = TableSortHeader;\nTable.SkeletonRows = TableSkeletonRows;\n"],"mappings":"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"}

package/dist/{Tabs-Ck4uWf8U.js → Tabs-DmJB4l_N.js}

@@ -1,16 +1,15 @@
-import { cn } from "./classNames-DcGnTh2N.js";
-import { X } from "./icons-ZIeZXXS7.js";
-import { Button } from "./Button-BNkyYU8u.js";
+import { cn } from "./classNames-DkX30VJU.js";
+import { X } from "./icons-DDR9dFSr.js";
+import { Button } from "./Button-DbvGzEDb.js";
 import { ScrollArea } from "./internal/components/ScrollArea.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as RadixTabs from "@radix-ui/react-tabs";
-//#region src/components/Tabs/styles.ts
+// src/components/Tabs/styles.ts
 const tabsListWrapperClass = "tw:shrink-0 tw:border-t-0 tw:border-x-0 tw:border-b tw:border-solid tw:border-border";
 const tabsListClass = "tw:flex tw:gap-8 tw:shrink-0 tw:w-max";
 const tabsTriggerGroupClass = "tw:group/tab-trigger-group tw:flex tw:shrink-0 tw:items-center";
 const tabsTriggerClass = "tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-inset tw:focus-visible:ring-ring tw:flex tw:justify-center tw:items-center tw:gap-1.5 tw:bg-transparent tw:shrink-0 tw:border-t-0 tw:border-x-0 tw:border-b-[3px] tw:border-solid tw:border-transparent tw:pt-2.5 tw:pb-5 tw:px-0 tw:m-0 tw:font-medium tw:leading-5 tw:text-muted-foreground tw:text-base tw:data-[state=active]:text-primary tw:data-[state=active]:border-primary tw:data-[disabled]:text-muted-foreground tw:data-[disabled]:opacity-disabled tw:data-[disabled]:cursor-not-allowed tw:group-hover/tab-trigger-group:enabled:text-primary tw:group-hover/tab-trigger-group:enabled:border-primary tw:group-hover/tab-trigger-group:enabled:cursor-pointer";
-//#endregion
-//#region src/components/Tabs/TabsList.tsx
+// src/components/Tabs/TabsList.tsx
 const TabsList = ({ className, children, ...rest }) => /* @__PURE__ */ jsx(ScrollArea, {
 	orientation: "horizontal",
 	className: tabsListWrapperClass,
@@ -21,15 +20,13 @@ const TabsList = ({ className, children, ...rest }) => /* @__PURE__ */ jsx(Scrol
 		children
 	})
 });
-//#endregion
-//#region src/components/Tabs/TabsTrigger.tsx
+// src/components/Tabs/TabsTrigger.tsx
 const TabsTrigger = ({ className, compact = false, ...rest }) => /* @__PURE__ */ jsx(RadixTabs.Trigger, {
 	"data-slot": "tabs-trigger",
 	...rest,
 	className: cn(tabsTriggerClass, compact && "tw:text-sm tw:pb-4", className)
 });
-//#endregion
-//#region src/components/Tabs/Tabs.tsx
+// src/components/Tabs/Tabs.tsx
 const Tabs = ({ triggers, compact = false, children, defaultValue, onValueChange, rootClassName, listClassName, triggerClassName, triggerGroupClassName, ...rest }) => /* @__PURE__ */ jsxs(RadixTabs.Root, {
 	...rest,
 	"data-slot": "tabs-root",
@@ -61,14 +58,12 @@ const Tabs = ({ triggers, compact = false, children, defaultValue, onValueChange
 		}, value))
 	}), children]
 });
-//#endregion
-//#region src/components/Tabs/TabsContent.tsx
+// src/components/Tabs/TabsContent.tsx
 const TabsContent = (props) => /* @__PURE__ */ jsx(RadixTabs.Content, {
 	"data-slot": "tabs-content",
 	tabIndex: -1,
 	...props
 });
-//#endregion
 export { Tabs, TabsContent };
 
-//# sourceMappingURL=Tabs-Ck4uWf8U.js.map
+//# sourceMappingURL=Tabs-DmJB4l_N.js.map

package/dist/{Tabs-Ck4uWf8U.js.map → Tabs-DmJB4l_N.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Tabs-Ck4uWf8U.js","names":[],"sources":["../src/components/Tabs/styles.ts","../src/components/Tabs/TabsList.tsx","../src/components/Tabs/TabsTrigger.tsx","../src/components/Tabs/Tabs.tsx","../src/components/Tabs/TabsContent.tsx"],"sourcesContent":["// Directional resets (border-t-0/border-x-0), NOT border-0: under Tailwind v4 a\n// consumer app's `border-0` utility can land after design's compiled bottom-border in\n// the shared `utilities` layer and zero its width (same layer + specificity → source\n// order wins), dropping the line. With directional resets, only the bottom-border\n// utility (`border-b` on the wrapper, `border-b-[3px]` on the trigger) sets the bottom.\nexport const tabsListWrapperClass =\n  'tw:shrink-0 tw:border-t-0 tw:border-x-0 tw:border-b tw:border-solid tw:border-border';\n\nexport const tabsListClass = 'tw:flex tw:gap-8 tw:shrink-0 tw:w-max';\n\nexport const tabsTriggerGroupClass =\n  'tw:group/tab-trigger-group tw:flex tw:shrink-0 tw:items-center';\n\n// The focus ring is **inset**, not an outline. `TabsList` wraps the row in a horizontal\n// `ScrollArea`, whose viewport is `overflow-y: hidden`, and a trigger is exactly as tall as that\n// viewport — so there is 0px of slack for anything painted outside the border box, and a focus\n// outline (the browser's, or a host app's global rule) gets cropped on the top and bottom edges,\n// plus the left edge on the first trigger. Painting inside the box cannot be clipped by any\n// ancestor. Owning the affordance here is also what stops the consumer's global rule applying.\nexport const tabsTriggerClass =\n  'tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-inset tw:focus-visible:ring-ring tw:flex tw:justify-center tw:items-center tw:gap-1.5 tw:bg-transparent tw:shrink-0 tw:border-t-0 tw:border-x-0 tw:border-b-[3px] tw:border-solid tw:border-transparent tw:pt-2.5 tw:pb-5 tw:px-0 tw:m-0 tw:font-medium tw:leading-5 tw:text-muted-foreground tw:text-base tw:data-[state=active]:text-primary tw:data-[state=active]:border-primary tw:data-[disabled]:text-muted-foreground tw:data-[disabled]:opacity-disabled tw:data-[disabled]:cursor-not-allowed tw:group-hover/tab-trigger-group:enabled:text-primary tw:group-hover/tab-trigger-group:enabled:border-primary tw:group-hover/tab-trigger-group:enabled:cursor-pointer';\n\nexport const tabsTriggerCompactClass = 'tw:text-sm tw:pb-4';\n","import * as RadixTabs from '@radix-ui/react-tabs';\n\nimport { cn } from '../../utils';\nimport { ScrollArea } from '../ScrollArea';\n\nimport { tabsListClass, tabsListWrapperClass } from './styles';\n\ntype Props = Omit<RadixTabs.TabsListProps, 'asChild'>;\n\nexport const TabsList = ({ className, children, ...rest }: Props) => (\n  <ScrollArea orientation=\"horizontal\" className={tabsListWrapperClass}>\n    <RadixTabs.List {...rest} data-slot=\"tabs-list\" className={cn(tabsListClass, className)}>\n      {children}\n    </RadixTabs.List>\n  </ScrollArea>\n);\n","import * as RadixTabs from '@radix-ui/react-tabs';\n\nimport { cn } from '../../utils';\n\nimport { tabsTriggerClass, tabsTriggerCompactClass } from './styles';\n\ntype Props = Omit<RadixTabs.TabsTriggerProps, 'asChild'> & {\n  compact?: boolean;\n};\n\nexport const TabsTrigger = ({ className, compact = false, ...rest }: Props) => (\n  <RadixTabs.Trigger\n    data-slot=\"tabs-trigger\"\n    {...rest}\n    className={cn(tabsTriggerClass, compact && tabsTriggerCompactClass, className)}\n  />\n);\n","import type { ReactNode } from 'react';\nimport * as RadixTabs from '@radix-ui/react-tabs';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\nimport { tabsTriggerGroupClass } from './styles';\nimport { TabsList } from './TabsList';\nimport { TabsTrigger } from './TabsTrigger';\n\nexport type Trigger<T extends string> = {\n  value: T;\n  title: ReactNode;\n  onClose?: (value: T) => void;\n} & Omit<RadixTabs.TabsTriggerProps, 'title' | 'asChild'>;\n\ntype Props<T extends string> = {\n  triggers: readonly Trigger<T>[];\n  compact?: boolean;\n  children: ReactNode;\n  defaultValue?: string;\n  onValueChange?: (value: T) => void;\n  rootClassName?: string;\n  listClassName?: string;\n  triggerClassName?: string;\n  triggerGroupClassName?: string;\n} & Omit<RadixTabs.TabsProps, 'onValueChange'>;\n\nexport const Tabs = <T extends string>({\n  triggers,\n  compact = false,\n  children,\n  defaultValue,\n  onValueChange,\n  rootClassName,\n  listClassName,\n  triggerClassName,\n  triggerGroupClassName,\n  ...rest\n}: Props<T>) => (\n  <RadixTabs.Root\n    {...rest}\n    data-slot=\"tabs-root\"\n    className={cn('tw:flex tw:flex-col tw:gap-6', rootClassName)}\n    defaultValue={defaultValue ?? triggers[0]?.value}\n    onValueChange={onValueChange as (value: string) => void}\n  >\n    <TabsList className={listClassName}>\n      {triggers.map(({ value, title, onClose, className: callerClassName, ...triggerRest }) => (\n        <div\n          key={value}\n          className={cn(tabsTriggerGroupClass, triggerGroupClassName)}\n          data-slot=\"tabs-trigger-group\"\n        >\n          <TabsTrigger\n            value={value}\n            compact={compact}\n            {...triggerRest}\n            className={cn(triggerClassName, callerClassName)}\n          >\n            {title}\n          </TabsTrigger>\n          {onClose && (\n            <Button\n              type=\"button\"\n              variant=\"inline\"\n              size=\"icon-3xs\"\n              disabled={triggerRest.disabled}\n              onClick={() => onClose(value)}\n              onMouseDown={(e) => e.preventDefault()}\n              className=\"tw:!size-8 tw:opacity-0 tw:duration-200 tw:focus-visible:opacity-100 tw:group-focus-within/tab-trigger-group:opacity-100 tw:group-hover/tab-trigger-group:opacity-100\"\n              aria-label={typeof title === 'string' ? `Close ${title}` : 'Close tab'}\n            >\n              <X className=\"tw:size-4\" />\n            </Button>\n          )}\n        </div>\n      ))}\n    </TabsList>\n    {children}\n  </RadixTabs.Root>\n);\n","import * as RadixTabs from '@radix-ui/react-tabs';\n\nexport const TabsContent = (props: RadixTabs.TabsContentProps) => (\n  <RadixTabs.Content data-slot=\"tabs-content\" tabIndex={-1} {...props} />\n);\n"],"mappings":";;;;;;;AAKA,MAAa,uBACX;AAEF,MAAa,gBAAgB;AAE7B,MAAa,wBACX;AAQF,MAAa,mBACX;;;ACXF,MAAa,YAAY,EAAE,WAAW,UAAU,GAAG,WACjD,oBAAC,YAAD;CAAY,aAAY;CAAa,WAAW;CAC9C,UAAA,oBAAC,UAAU,MAAX;EAAgB,GAAI;EAAM,aAAU;EAAY,WAAW,GAAG,eAAe,SAAS;EACnF;CACa,CAAA;AACN,CAAA;;;ACJd,MAAa,eAAe,EAAE,WAAW,UAAU,OAAO,GAAG,WAC3D,oBAAC,UAAU,SAAX;CACE,aAAU;CACV,GAAI;CACJ,WAAW,GAAG,kBAAkB,WAAA,sBAAoC,SAAS;AAC9E,CAAA;;;ACcH,MAAa,QAA0B,EACrC,UACA,UAAU,OACV,UACA,cACA,eACA,eACA,eACA,kBACA,uBACA,GAAG,WAEH,qBAAC,UAAU,MAAX;CACE,GAAI;CACJ,aAAU;CACV,WAAW,GAAG,gCAAgC,aAAa;CAC3D,cAAc,gBAAgB,SAAS,EAAE,EAAE;CAC5B;CALjB,UAAA,CAOE,oBAAC,UAAD;EAAU,WAAW;EAClB,UAAA,SAAS,KAAK,EAAE,OAAO,OAAO,SAAS,WAAW,iBAAiB,GAAG,kBACrE,qBAAC,OAAD;GAEE,WAAW,GAAG,uBAAuB,qBAAqB;GAC1D,aAAU;GAHZ,UAAA,CAKE,oBAAC,aAAD;IACS;IACE;IACT,GAAI;IACJ,WAAW,GAAG,kBAAkB,eAAe;IAE9C,UAAA;GACU,CAAA,GACZ,WACC,oBAAC,QAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,UAAU,YAAY;IACtB,eAAe,QAAQ,KAAK;IAC5B,cAAc,MAAM,EAAE,eAAe;IACrC,WAAU;IACV,cAAY,OAAO,UAAU,WAAW,SAAS,UAAU;IAE3D,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;GACpB,CAAA,CAEP;EA1BE,GAAA,KA0BF,CACN;CACO,CAAA,GACT,QACa;;;;AC/ElB,MAAa,eAAe,UAC1B,oBAAC,UAAU,SAAX;CAAmB,aAAU;CAAe,UAAU;CAAI,GAAI;AAAQ,CAAA"}
+{"version":3,"file":"Tabs-DmJB4l_N.js","names":[],"sources":["../src/components/Tabs/styles.ts","../src/components/Tabs/TabsList.tsx","../src/components/Tabs/TabsTrigger.tsx","../src/components/Tabs/Tabs.tsx","../src/components/Tabs/TabsContent.tsx"],"sourcesContent":["// Directional resets (border-t-0/border-x-0), NOT border-0: under Tailwind v4 a\n// consumer app's `border-0` utility can land after design's compiled bottom-border in\n// the shared `utilities` layer and zero its width (same layer + specificity → source\n// order wins), dropping the line. With directional resets, only the bottom-border\n// utility (`border-b` on the wrapper, `border-b-[3px]` on the trigger) sets the bottom.\nexport const tabsListWrapperClass =\n  'tw:shrink-0 tw:border-t-0 tw:border-x-0 tw:border-b tw:border-solid tw:border-border';\n\nexport const tabsListClass = 'tw:flex tw:gap-8 tw:shrink-0 tw:w-max';\n\nexport const tabsTriggerGroupClass =\n  'tw:group/tab-trigger-group tw:flex tw:shrink-0 tw:items-center';\n\n// The focus ring is **inset**, not an outline. `TabsList` wraps the row in a horizontal\n// `ScrollArea`, whose viewport is `overflow-y: hidden`, and a trigger is exactly as tall as that\n// viewport — so there is 0px of slack for anything painted outside the border box, and a focus\n// outline (the browser's, or a host app's global rule) gets cropped on the top and bottom edges,\n// plus the left edge on the first trigger. Painting inside the box cannot be clipped by any\n// ancestor. Owning the affordance here is also what stops the consumer's global rule applying.\nexport const tabsTriggerClass =\n  'tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-inset tw:focus-visible:ring-ring tw:flex tw:justify-center tw:items-center tw:gap-1.5 tw:bg-transparent tw:shrink-0 tw:border-t-0 tw:border-x-0 tw:border-b-[3px] tw:border-solid tw:border-transparent tw:pt-2.5 tw:pb-5 tw:px-0 tw:m-0 tw:font-medium tw:leading-5 tw:text-muted-foreground tw:text-base tw:data-[state=active]:text-primary tw:data-[state=active]:border-primary tw:data-[disabled]:text-muted-foreground tw:data-[disabled]:opacity-disabled tw:data-[disabled]:cursor-not-allowed tw:group-hover/tab-trigger-group:enabled:text-primary tw:group-hover/tab-trigger-group:enabled:border-primary tw:group-hover/tab-trigger-group:enabled:cursor-pointer';\n\nexport const tabsTriggerCompactClass = 'tw:text-sm tw:pb-4';\n","import * as RadixTabs from '@radix-ui/react-tabs';\n\nimport { cn } from '../../utils';\nimport { ScrollArea } from '../ScrollArea';\n\nimport { tabsListClass, tabsListWrapperClass } from './styles';\n\ntype Props = Omit<RadixTabs.TabsListProps, 'asChild'>;\n\nexport const TabsList = ({ className, children, ...rest }: Props) => (\n  <ScrollArea orientation=\"horizontal\" className={tabsListWrapperClass}>\n    <RadixTabs.List {...rest} data-slot=\"tabs-list\" className={cn(tabsListClass, className)}>\n      {children}\n    </RadixTabs.List>\n  </ScrollArea>\n);\n","import * as RadixTabs from '@radix-ui/react-tabs';\n\nimport { cn } from '../../utils';\n\nimport { tabsTriggerClass, tabsTriggerCompactClass } from './styles';\n\ntype Props = Omit<RadixTabs.TabsTriggerProps, 'asChild'> & {\n  compact?: boolean;\n};\n\nexport const TabsTrigger = ({ className, compact = false, ...rest }: Props) => (\n  <RadixTabs.Trigger\n    data-slot=\"tabs-trigger\"\n    {...rest}\n    className={cn(tabsTriggerClass, compact && tabsTriggerCompactClass, className)}\n  />\n);\n","import type { ReactNode } from 'react';\nimport * as RadixTabs from '@radix-ui/react-tabs';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\nimport { tabsTriggerGroupClass } from './styles';\nimport { TabsList } from './TabsList';\nimport { TabsTrigger } from './TabsTrigger';\n\nexport type Trigger<T extends string> = {\n  value: T;\n  title: ReactNode;\n  onClose?: (value: T) => void;\n} & Omit<RadixTabs.TabsTriggerProps, 'title' | 'asChild'>;\n\ntype Props<T extends string> = {\n  triggers: readonly Trigger<T>[];\n  compact?: boolean;\n  children: ReactNode;\n  defaultValue?: string;\n  onValueChange?: (value: T) => void;\n  rootClassName?: string;\n  listClassName?: string;\n  triggerClassName?: string;\n  triggerGroupClassName?: string;\n} & Omit<RadixTabs.TabsProps, 'onValueChange'>;\n\nexport const Tabs = <T extends string>({\n  triggers,\n  compact = false,\n  children,\n  defaultValue,\n  onValueChange,\n  rootClassName,\n  listClassName,\n  triggerClassName,\n  triggerGroupClassName,\n  ...rest\n}: Props<T>) => (\n  <RadixTabs.Root\n    {...rest}\n    data-slot=\"tabs-root\"\n    className={cn('tw:flex tw:flex-col tw:gap-6', rootClassName)}\n    defaultValue={defaultValue ?? triggers[0]?.value}\n    onValueChange={onValueChange as (value: string) => void}\n  >\n    <TabsList className={listClassName}>\n      {triggers.map(({ value, title, onClose, className: callerClassName, ...triggerRest }) => (\n        <div\n          key={value}\n          className={cn(tabsTriggerGroupClass, triggerGroupClassName)}\n          data-slot=\"tabs-trigger-group\"\n        >\n          <TabsTrigger\n            value={value}\n            compact={compact}\n            {...triggerRest}\n            className={cn(triggerClassName, callerClassName)}\n          >\n            {title}\n          </TabsTrigger>\n          {onClose && (\n            <Button\n              type=\"button\"\n              variant=\"inline\"\n              size=\"icon-3xs\"\n              disabled={triggerRest.disabled}\n              onClick={() => onClose(value)}\n              onMouseDown={(e) => e.preventDefault()}\n              className=\"tw:!size-8 tw:opacity-0 tw:duration-200 tw:focus-visible:opacity-100 tw:group-focus-within/tab-trigger-group:opacity-100 tw:group-hover/tab-trigger-group:opacity-100\"\n              aria-label={typeof title === 'string' ? `Close ${title}` : 'Close tab'}\n            >\n              <X className=\"tw:size-4\" />\n            </Button>\n          )}\n        </div>\n      ))}\n    </TabsList>\n    {children}\n  </RadixTabs.Root>\n);\n","import * as RadixTabs from '@radix-ui/react-tabs';\n\nexport const TabsContent = (props: RadixTabs.TabsContentProps) => (\n  <RadixTabs.Content data-slot=\"tabs-content\" tabIndex={-1} {...props} />\n);\n"],"mappings":";;;;;;;AAKA,MAAa,uBACX;AAEF,MAAa,gBAAgB;AAE7B,MAAa,wBACX;AAQF,MAAa,mBACX;;ACXF,MAAa,YAAY,EAAE,WAAW,UAAU,GAAG,WACjD,oBAAC,YAAD;CAAY,aAAY;CAAa,WAAW;CAC9C,UAAA,oBAAC,UAAU,MAAX;EAAgB,GAAI;EAAM,aAAU;EAAY,WAAW,GAAG,eAAe,SAAS;EACnF;CACa,CAAA;AACN,CAAA;;ACJd,MAAa,eAAe,EAAE,WAAW,UAAU,OAAO,GAAG,WAC3D,oBAAC,UAAU,SAAX;CACE,aAAU;CACV,GAAI;CACJ,WAAW,GAAG,kBAAkB,WAAA,sBAAoC,SAAS;AAC9E,CAAA;;ACcH,MAAa,QAA0B,EACrC,UACA,UAAU,OACV,UACA,cACA,eACA,eACA,eACA,kBACA,uBACA,GAAG,WAEH,qBAAC,UAAU,MAAX;CACE,GAAI;CACJ,aAAU;CACV,WAAW,GAAG,gCAAgC,aAAa;CAC3D,cAAc,gBAAgB,SAAS,EAAE,EAAE;CAC5B;CALjB,UAAA,CAOE,oBAAC,UAAD;EAAU,WAAW;EAClB,UAAA,SAAS,KAAK,EAAE,OAAO,OAAO,SAAS,WAAW,iBAAiB,GAAG,kBACrE,qBAAC,OAAD;GAEE,WAAW,GAAG,uBAAuB,qBAAqB;GAC1D,aAAU;GAHZ,UAAA,CAKE,oBAAC,aAAD;IACS;IACE;IACT,GAAI;IACJ,WAAW,GAAG,kBAAkB,eAAe;IAE9C,UAAA;GACU,CAAA,GACZ,WACC,oBAAC,QAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,UAAU,YAAY;IACtB,eAAe,QAAQ,KAAK;IAC5B,cAAc,MAAM,EAAE,eAAe;IACrC,WAAU;IACV,cAAY,OAAO,UAAU,WAAW,SAAS,UAAU;IAE3D,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;GACpB,CAAA,CAEP;EA1BE,GAAA,KA0BF,CACN;CACO,CAAA,GACT,QACa;;;AC/ElB,MAAa,eAAe,UAC1B,oBAAC,UAAU,SAAX;CAAmB,aAAU;CAAe,UAAU;CAAI,GAAI;AAAQ,CAAA"}

package/dist/{TextInput-CR0_USaY.js → TextInput--1CfZybC.js}

@@ -1,12 +1,12 @@
-import { cn } from "./classNames-DcGnTh2N.js";
-import { createChangeInputEvent, createPrefixedString } from "./utils-DwC9u0tM.js";
+import { cn } from "./classNames-DkX30VJU.js";
+import { createChangeInputEvent, createPrefixedString } from "./utils-DjFceY3H.js";
 import { mergeRefs } from "./internal/utils/mergeRefs.js";
-import { X } from "./icons-ZIeZXXS7.js";
-import { InputGroup } from "./InputGroup-CZv_7QlM.js";
-import { useControllableState } from "./useControllableState-CUYXMsfz.js";
+import { X } from "./icons-DDR9dFSr.js";
+import { InputGroup } from "./InputGroup-BWeanEo7.js";
+import { useControllableState } from "./useControllableState-BCvUOC6G.js";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/blocks/TextInput/utils.ts
+// src/blocks/TextInput/utils.ts
 const genInputTestId = (prefix = "") => {
 	const ps = createPrefixedString(prefix);
 	return {
@@ -16,8 +16,7 @@ const genInputTestId = (prefix = "") => {
 		clearButton: ps`clear-button`
 	};
 };
-//#endregion
-//#region src/blocks/TextInput/TextInput.tsx
+// src/blocks/TextInput/TextInput.tsx
 const sanitizeTextInputValue = (value) => {
 	if (typeof value === "string" && value.trim() === "") return "";
 	return value;
@@ -98,7 +97,6 @@ const TextInput = ({ ref: forwardedRef, state = "default", className, prefix = n
 		]
 	});
 };
-//#endregion
 export { TextInput };
 
-//# sourceMappingURL=TextInput-CR0_USaY.js.map
+//# sourceMappingURL=TextInput--1CfZybC.js.map