@keboola/design 10.1.0 → 11.0.1

package/dist/Stepper-C8sm9ZFM.js

@@ -0,0 +1,325 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Check, X } from "./icons-Cek151jC.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
+const StepperContext = createContext({ orientation: "horizontal" });
+const useStepperContext = () => use(StepperContext);
+const StepItemContext = createContext(null);
+const useStepItemContext = () => {
+	const ctx = use(StepItemContext);
+	if (!ctx) throw new Error("Stepper.Step subcomponents must be used inside <Stepper.Step>.");
+	return ctx;
+};
+const StepPositionContext = createContext({
+	index: 0,
+	isLast: true
+});
+const useStepPositionContext = () => use(StepPositionContext);
+//#endregion
+//#region src/components/Stepper/styles.ts
+const stepperVariants = cva([], {
+	defaultVariants: { orientation: "horizontal" },
+	variants: { orientation: {
+		horizontal: [
+			"tw:flex",
+			"tw:flex-row",
+			"tw:items-start",
+			"tw:w-full"
+		],
+		vertical: [
+			"tw:flex",
+			"tw:flex-col",
+			"tw:w-full"
+		]
+	} }
+});
+const stepVariants = cva(["tw:group/step"], {
+	defaultVariants: { orientation: "horizontal" },
+	variants: {
+		orientation: {
+			horizontal: [
+				"tw:flex",
+				"tw:flex-col",
+				"tw:items-center",
+				"tw:text-center",
+				"tw:gap-2"
+			],
+			vertical: [
+				"tw:flex",
+				"tw:flex-row",
+				"tw:items-stretch",
+				"tw:gap-3"
+			]
+		},
+		interactive: {
+			true: [
+				"tw:cursor-pointer",
+				"tw:bg-transparent",
+				"tw:border-0",
+				"tw:p-0",
+				"tw:font-[inherit]",
+				"tw:focus-visible:outline-hidden",
+				"tw:focus-visible:ring-2",
+				"tw:focus-visible:ring-ring/50",
+				"tw:focus-visible:rounded-md"
+			],
+			false: []
+		}
+	}
+});
+const indicatorVariants = cva([
+	"tw:flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:shrink-0",
+	"tw:size-8",
+	"tw:rounded-full",
+	"tw:border",
+	"tw:text-sm",
+	"tw:font-medium",
+	"tw:transition-colors",
+	"tw:[&_svg]:size-4"
+], {
+	defaultVariants: { status: "upcoming" },
+	variants: { status: {
+		complete: [
+			"tw:bg-success",
+			"tw:text-white",
+			"tw:border-success"
+		],
+		active: [
+			"tw:bg-primary",
+			"tw:text-primary-foreground",
+			"tw:border-primary"
+		],
+		upcoming: [
+			"tw:bg-muted",
+			"tw:text-muted-foreground",
+			"tw:border-border"
+		],
+		error: [
+			"tw:bg-destructive",
+			"tw:text-destructive-foreground",
+			"tw:border-destructive"
+		]
+	} }
+});
+const labelVariants = cva([
+	"tw:text-sm",
+	"tw:font-medium",
+	"tw:leading-5"
+], {
+	defaultVariants: { status: "upcoming" },
+	variants: { status: {
+		complete: ["tw:text-foreground"],
+		active: ["tw:text-foreground"],
+		upcoming: ["tw:text-muted-foreground"],
+		error: ["tw:text-destructive"]
+	} }
+});
+const descriptionClassnames = "tw:text-xs tw:text-muted-foreground tw:mt-0.5";
+const connectorVariants = cva(["tw:shrink-0", "tw:transition-colors"], {
+	defaultVariants: {
+		orientation: "horizontal",
+		status: "upcoming"
+	},
+	variants: {
+		orientation: {
+			horizontal: [
+				"tw:h-0.5",
+				"tw:flex-1",
+				"tw:mt-4",
+				"tw:min-w-8"
+			],
+			vertical: [
+				"tw:w-0.5",
+				"tw:flex-1",
+				"tw:min-h-6"
+			]
+		},
+		status: {
+			complete: ["tw:bg-success"],
+			active: ["tw:bg-border"],
+			upcoming: ["tw:bg-border"],
+			error: ["tw:bg-destructive"]
+		}
+	}
+});
+//#endregion
+//#region 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.
+*/
+const StepperStepConnector = ({ className, ...props }) => {
+	const { orientation } = useStepperContext();
+	const { status } = useStepItemContext();
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: cn(connectorVariants({
+			orientation,
+			status
+		}), className),
+		...props
+	});
+};
+//#endregion
+//#region 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.
+*/
+const StepperStepIndicator = ({ children, className, ...props }) => {
+	const { index, status } = useStepItemContext();
+	const content = (() => {
+		if (children !== void 0) return children;
+		if (status === "complete") return /* @__PURE__ */ jsx(Check, { "aria-hidden": true });
+		if (status === "error") return /* @__PURE__ */ jsx(X, { "aria-hidden": true });
+		return index + 1;
+	})();
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": children === void 0,
+		className: cn(indicatorVariants({ status }), className),
+		...props,
+		children: content
+	});
+};
+//#endregion
+//#region 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
+* extracted and rendered in the indicator slot.
+*
+* Set `Stepper`'s `onStepClick` prop to make every step a button; otherwise the Step renders as `<div>`.
+*/
+const StepperStep = ({ status = "upcoming", children, className, ...props }) => {
+	const { orientation, onStepClick } = useStepperContext();
+	const { index, isLast } = useStepPositionContext();
+	const interactive = Boolean(onStepClick);
+	const allChildren = Children.toArray(children);
+	const indicatorChild = allChildren.find((child) => isValidElement(child) && child.type === StepperStepIndicator);
+	const contentChildren = allChildren.filter((child) => child !== indicatorChild);
+	const indicator = indicatorChild ?? /* @__PURE__ */ jsx(StepperStepIndicator, {});
+	const handleClick = () => onStepClick?.(index);
+	const stepContext = {
+		index,
+		isLast,
+		status
+	};
+	const stepClassName = cn(stepVariants({
+		orientation,
+		interactive
+	}), className);
+	const ariaCurrent = status === "active" ? "step" : void 0;
+	const inner = orientation === "vertical" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+		className: "tw:flex tw:flex-col tw:items-center tw:self-stretch",
+		children: [indicator, !isLast && /* @__PURE__ */ jsx(StepperStepConnector, {})]
+	}), /* @__PURE__ */ jsx("span", {
+		className: "tw:flex tw:min-w-0 tw:flex-col tw:items-start tw:pb-6 tw:text-left",
+		children: contentChildren
+	})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [indicator, /* @__PURE__ */ jsx("span", {
+		className: "tw:flex tw:flex-col tw:items-center tw:text-center",
+		children: contentChildren
+	})] });
+	return /* @__PURE__ */ jsx(StepItemContext, {
+		value: stepContext,
+		children: interactive ? /* @__PURE__ */ jsx("button", {
+			...props,
+			type: "button",
+			onClick: handleClick,
+			"aria-current": ariaCurrent,
+			"data-status": status,
+			className: stepClassName,
+			children: inner
+		}) : /* @__PURE__ */ jsx("div", {
+			...props,
+			"aria-current": ariaCurrent,
+			"data-status": status,
+			className: stepClassName,
+			children: inner
+		})
+	});
+};
+//#endregion
+//#region 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
+/** Step title — short label describing the step (e.g. "Account", "Payment"). */
+const StepperStepLabel = ({ className, ...props }) => {
+	const { status } = useStepItemContext();
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(labelVariants({ status }), className),
+		...props
+	});
+};
+//#endregion
+//#region src/components/Stepper/Stepper.tsx
+const isStepElement = (child) => isValidElement(child) && child.type === StepperStep;
+const getStepStatus = (step) => step.props.status ?? "upcoming";
+/**
+* Linear progress indicator for a multi-step flow.
+*
+* **When to use:** show progress through a finite, ordered sequence (onboarding wizard, multi-step form,
+* deploy pipeline). Compose with `Stepper.Step` + `Stepper.StepIndicator` + `Stepper.StepLabel` (+ optional
+* `Stepper.StepDescription`); connectors render automatically between steps.
+* **When NOT to use:** for branching navigation use `Tabs` or `PageLayout.Tabs`; for an unordered status list
+* use `Timeline`; for a single percentage value use `Progress`.
+* **Composition:** set `onStepClick` to make steps focusable buttons (callback fires with the step index),
+* otherwise the stepper is visual only. Each step's `status` prop drives the indicator + connector colour.
+*/
+const Stepper = ({ orientation = "horizontal", onStepClick, children, className, ...props }) => {
+	const steps = Children.toArray(children).filter(isStepElement);
+	const lastIndex = steps.length - 1;
+	return /* @__PURE__ */ jsx(StepperContext, {
+		value: {
+			orientation,
+			onStepClick
+		},
+		children: /* @__PURE__ */ jsx("ol", {
+			className: cn("tailwindcss-preflight", "tw:list-none", "tw:p-0", "tw:m-0", stepperVariants({ orientation }), className),
+			...props,
+			children: steps.map((step, index) => {
+				const isLast = index === lastIndex;
+				const wrappedStep = /* @__PURE__ */ jsx(StepPositionContext, {
+					value: {
+						index,
+						isLast
+					},
+					children: step
+				});
+				if (orientation === "vertical") return /* @__PURE__ */ jsx("li", {
+					className: "tw:contents",
+					children: wrappedStep
+				}, step.key ?? index);
+				return /* @__PURE__ */ jsxs("li", {
+					className: "tw:contents",
+					children: [wrappedStep, !isLast && /* @__PURE__ */ jsx(StepItemContext, {
+						value: {
+							index: -1,
+							isLast: false,
+							status: getStepStatus(step)
+						},
+						children: /* @__PURE__ */ jsx(StepperStepConnector, {})
+					})]
+				}, step.key ?? index);
+			})
+		})
+	});
+};
+Stepper.Step = StepperStep;
+Stepper.StepIndicator = StepperStepIndicator;
+Stepper.StepLabel = StepperStepLabel;
+Stepper.StepDescription = StepperStepDescription;
+Stepper.StepConnector = StepperStepConnector;
+//#endregion
+export { Stepper };
+
+//# sourceMappingURL=Stepper-C8sm9ZFM.js.map

package/dist/Stepper-C8sm9ZFM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper-C8sm9ZFM.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-white', '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  /** Layout direction. Defaults to `horizontal`. */\n  orientation?: StepperOrientation;\n  /**\n   * When provided, every step renders as a `<button>` and clicking fires this with the step index.\n   * When undefined, steps render as `<div>` (visual only).\n   */\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:** show progress through a finite, ordered sequence (onboarding wizard, multi-step form,\n * deploy pipeline). Compose with `Stepper.Step` + `Stepper.StepIndicator` + `Stepper.StepLabel` (+ optional\n * `Stepper.StepDescription`); connectors render automatically between steps.\n * **When NOT to use:** for branching navigation use `Tabs` or `PageLayout.Tabs`; for an unordered status list\n * use `Timeline`; for a single percentage value use `Progress`.\n * **Composition:** set `onStepClick` to make steps focusable buttons (callback fires with the step index),\n * otherwise the stepper is visual only. Each step's `status` prop drives the indicator + connector colour.\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          // Each <li> wraps one step (and, in horizontal mode, the trailing\n          // connector) so the <ol> only ever has <li> children — valid list\n          // markup that preserves the inner <button>/<div>'s native role.\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                // Connector colour follows the *current* (preceding) step's\n                // status — a complete step paints a success line forward.\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":";;;;;;AASA,MAAa,iBAAiB,cAAkC,EAC9D,aAAa,aACf,CAAC;AAED,MAAa,0BAA0B,IAAI,cAAc;AAQzD,MAAa,kBAAkB,cAA0C,IAAI;AAE7E,MAAa,2BAA2B;CACtC,MAAM,MAAM,IAAI,eAAe;CAC/B,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,gEAAgE;CAElF,OAAO;AACT;AAWA,MAAa,sBAAsB,cAAuC;CACxE,OAAO;CACP,QAAQ;AACV,CAAC;AAED,MAAa,+BAA+B,IAAI,mBAAmB;;;AC3CnE,MAAa,kBAAkB,IAAI,CAAC,GAAG;CACrC,iBAAiB,EACf,aAAa,aACf;CACA,UAAU,EACR,aAAa;EAEX,YAAY;GAAC;GAAW;GAAe;GAAkB;EAAW;EAEpE,UAAU;GAAC;GAAW;GAAe;EAAW;CAClD,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,CAAC,eAAe,GAAG;CACjD,iBAAiB,EACf,aAAa,aACf;CACA,UAAU;EACR,aAAa;GAEX,YAAY;IAAC;IAAW;IAAe;IAAmB;IAAkB;GAAU;GAGtF,UAAU;IAAC;IAAW;IAAe;IAAoB;GAAU;EACrE;EACA,aAAa;GACX,MAAM;IAEJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO,CAAC;EACV;CACF;AACF,CAAC;AAED,MAAa,oBAAoB,IAC/B;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,QAAQ,WACV;CACA,UAAU,EACR,QAAQ;EACN,UAAU;GAAC;GAAiB;GAAiB;EAAmB;EAChE,QAAQ;GAAC;GAAiB;GAA8B;EAAmB;EAC3E,UAAU;GAAC;GAAe;GAA4B;EAAkB;EACxE,OAAO;GAAC;GAAqB;GAAkC;EAAuB;CACxF,EACF;AACF,CACF;AAEA,MAAa,gBAAgB,IAAI;CAAC;CAAc;CAAkB;AAAc,GAAG;CACjF,iBAAiB,EACf,QAAQ,WACV;CACA,UAAU,EACR,QAAQ;EACN,UAAU,CAAC,oBAAoB;EAC/B,QAAQ,CAAC,oBAAoB;EAC7B,UAAU,CAAC,0BAA0B;EACrC,OAAO,CAAC,qBAAqB;CAC/B,EACF;AACF,CAAC;AAED,MAAa,wBAAwB;AAIrC,MAAa,oBAAoB,IAAI,CAAC,eAAe,sBAAsB,GAAG;CAC5E,iBAAiB;EACf,aAAa;EACb,QAAQ;CACV;CACA,UAAU;EACR,aAAa;GAEX,YAAY;IAAC;IAAY;IAAa;IAAW;GAAY;GAG7D,UAAU;IAAC;IAAY;IAAa;GAAY;EAClD;EACA,QAAQ;GACN,UAAU,CAAC,eAAe;GAC1B,QAAQ,CAAC,cAAc;GACvB,UAAU,CAAC,cAAc;GACzB,OAAO,CAAC,mBAAmB;EAC7B;CACF;AACF,CAAC;;;;;;;ACpGD,MAAa,wBAAwB,EAAE,WAAW,GAAG,YAAmB;CACtE,MAAM,EAAE,gBAAgB,kBAAkB;CAC1C,MAAM,EAAE,WAAW,mBAAmB;CACtC,OACE,oBAAC,QAAD;EACE,eAAA;EACA,WAAW,GAAG,kBAAkB;GAAE;GAAa;EAAO,CAAC,GAAG,SAAS;EACnE,GAAI;CACL,CAAA;AAEL;;;;;;;ACNA,MAAa,wBAAwB,EAAE,UAAU,WAAW,GAAG,YAAmB;CAChF,MAAM,EAAE,OAAO,WAAW,mBAAmB;CAE7C,MAAM,iBAAiB;EACrB,IAAI,aAAa,KAAA,GAAW,OAAO;EACnC,IAAI,WAAW,YAAY,OAAO,oBAAC,OAAD,EAAO,eAAA,KAAa,CAAA;EACtD,IAAI,WAAW,SAAS,OAAO,oBAAC,GAAD,EAAG,eAAA,KAAa,CAAA;EAC/C,OAAO,QAAQ;CACjB,EAAA,CAAG;CAEH,OACE,oBAAC,QAAD;EACE,eAAa,aAAa,KAAA;EAC1B,WAAW,GAAG,kBAAkB,EAAE,OAAO,CAAC,GAAG,SAAS;EACtD,GAAI;EAEH,UAAA;CACG,CAAA;AAEV;;;;;;;;;;ACRA,MAAa,eAAe,EAAE,SAAS,YAAY,UAAU,WAAW,GAAG,YAAmB;CAC5F,MAAM,EAAE,aAAa,gBAAgB,kBAAkB;CACvD,MAAM,EAAE,OAAO,WAAW,uBAAuB;CACjD,MAAM,cAAc,QAAQ,WAAW;CAMvC,MAAM,cAAc,SAAS,QAAQ,QAAQ;CAC7C,MAAM,iBAAiB,YAAY,MAChC,UAAU,eAAe,KAAK,KAAK,MAAM,SAAS,oBACrD;CACA,MAAM,kBAAkB,YAAY,QAAQ,UAAU,UAAU,cAAc;CAC9E,MAAM,YAAuB,kBAAkB,oBAAC,sBAAD,CAAuB,CAAA;CAEtE,MAAM,oBAAoB,cAAc,KAAK;CAE7C,MAAM,cAAc;EAAE;EAAO;EAAQ;CAAO;CAE5C,MAAM,gBAAgB,GAAG,aAAa;EAAE;EAAa;CAAY,CAAC,GAAG,SAAS;CAE9E,MAAM,cAAc,WAAW,WAAY,SAAmB,KAAA;CAE9D,MAAM,QACJ,gBAAgB,aACd,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACG,WACA,CAAC,UAAU,oBAAC,sBAAD,CAAuB,CAAA,CAC/B;CACN,CAAA,GAAA,oBAAC,QAAD;EAAM,WAAU;EACb,UAAA;CACG,CAAA,CACN,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA,CACG,WACD,oBAAC,QAAD;EAAM,WAAU;EACb,UAAA;CACG,CAAA,CACN,EAAA,CAAA;CAGN,OACE,oBAAC,iBAAD;EAAiB,OAAO;EACrB,UAAA,cACC,oBAAC,UAAD;GACE,GAAI;GACJ,MAAK;GACL,SAAS;GACT,gBAAc;GACd,eAAa;GACb,WAAW;GAEV,UAAA;EACK,CAAA,IAER,oBAAC,OAAD;GAAK,GAAI;GAAO,gBAAc;GAAa,eAAa;GAAQ,WAAW;GACxE,UAAA;EACE,CAAA;CAEQ,CAAA;AAErB;;;;ACnFA,MAAa,0BAA0B,EAAE,WAAW,GAAG,YACrD,oBAAC,QAAD;CAAM,WAAW,GAAG,uBAAuB,SAAS;CAAG,GAAI;AAAQ,CAAA;;;;ACArE,MAAa,oBAAoB,EAAE,WAAW,GAAG,YAAmB;CAClE,MAAM,EAAE,WAAW,mBAAmB;CACtC,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,cAAc,EAAE,OAAO,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAChF;;;AC0BA,MAAM,iBAAiB,UACrB,eAAe,KAAK,KAAK,MAAM,SAAS;AAE1C,MAAM,iBAAiB,SAAkC,KAAK,MAAM,UAAU;;;;;;;;;;;;AAa9E,MAAa,WAAW,EACtB,cAAc,cACd,aACA,UACA,WACA,GAAG,YACQ;CAEX,MAAM,QAAQ,SAAS,QAAQ,QAAQ,CAAC,CAAC,OAAO,aAAa;CAC7D,MAAM,YAAY,MAAM,SAAS;CAEjC,OACE,oBAAC,gBAAD;EAAgB,OAAO;GAAE;GAAa;EAAY;EAChD,UAAA,oBAAC,MAAD;GACE,WAAW,GACT,yBACA,gBACA,UACA,UACA,gBAAgB,EAAE,YAAY,CAAC,GAC/B,SACF;GACA,GAAI;GAEH,UAAA,MAAM,KAAK,MAAM,UAAU;IAC1B,MAAM,SAAS,UAAU;IACzB,MAAM,cACJ,oBAAC,qBAAD;KAAqB,OAAO;MAAE;MAAO;KAAO;KAAI,UAAA;IAA0B,CAAA;IAM5E,IAAI,gBAAgB,YAClB,OAEE,oBAAC,MAAD;KAA4B,WAAU;KACnC,UAAA;IACC,GAFK,KAAK,OAAO,KAEjB;IAIR,OAEE,qBAAC,MAAD;KAA4B,WAAU;KAAtC,UAAA,CACG,aACA,CAAC,UAGA,oBAAC,iBAAD;MAAiB,OAAO;OAAE,OAAO;OAAI,QAAQ;OAAO,QAAQ,cAAc,IAAI;MAAE;MAC9E,UAAA,oBAAC,sBAAD,CAAuB,CAAA;KACR,CAAA,CAEjB;IATK,GAAA,KAAK,OAAO,KASjB;GAER,CAAC;EACC,CAAA;CACU,CAAA;AAEpB;AAEA,QAAQ,OAAO;AACf,QAAQ,gBAAgB;AACxB,QAAQ,YAAY;AACpB,QAAQ,kBAAkB;AAC1B,QAAQ,gBAAgB"}

package/dist/Switch-CX2A0v50.js

@@ -0,0 +1,201 @@
+import { useArgoDesign } from "./context-KxxeMHbR.js";
+import { FieldBox } from "./FieldBox-D7DYtX_m.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
+const switchVariants = cva([
+	"tailwindcss-preflight",
+	"tw:shrink-0",
+	"tw:cursor-pointer",
+	"tw:disabled:cursor-not-allowed",
+	"tw:disabled:opacity-50"
+], {
+	defaultVariants: {
+		size: "medium",
+		variant: "default"
+	},
+	variants: {
+		variant: {
+			default: [
+				"tw:peer/switch",
+				"tw:group/switch",
+				"tw:relative",
+				"tw:flex",
+				"tw:items-center",
+				"tw:gap-2",
+				"tw:min-h-5",
+				"tw:text-neutral-800",
+				"tw:font-normal",
+				"tw:before:content-[\" \"]",
+				"tw:before:block",
+				"tw:before:relative",
+				"tw:aria-checked:before:bg-primary-500",
+				"tw:before:bg-neutral-200",
+				"tw:aria-checked:before:hover:bg-primary-600",
+				"tw:before:hover:bg-neutral-300",
+				"tw:before:disabled:hover:bg-neutral-200",
+				"tw:transition-colors",
+				"tw:focus-visible:outline-hidden",
+				"tw:before:focus-visible:outline",
+				"tw:before:focus-visible:outline-1",
+				"tw:before:focus-visible:outline-ring",
+				"tw:before:focus-visible:ring-4",
+				"tw:before:focus-visible:ring-ring/30"
+			],
+			argo: [
+				"tw:peer",
+				"tw:inline-flex",
+				"tw:items-center",
+				"tw:w-9",
+				"tw:h-5",
+				"tw:rounded-full",
+				"tw:border",
+				"tw:border-transparent",
+				"tw:bg-input",
+				"tw:transition-colors",
+				"tw:data-[state=checked]:bg-primary",
+				"tw:focus-visible:outline-hidden",
+				"tw:focus-visible:border-primary",
+				"tw:focus-visible:ring-3",
+				"tw:focus-visible:ring-ring/50"
+			]
+		},
+		size: {
+			small: [],
+			medium: [],
+			large: []
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "default",
+			size: "small",
+			class: [
+				"tw:before:w-6",
+				"tw:before:h-4",
+				"tw:before:rounded-lg"
+			]
+		},
+		{
+			variant: "default",
+			size: "medium",
+			class: [
+				"tw:before:w-8",
+				"tw:before:h-4",
+				"tw:before:rounded-lg"
+			]
+		},
+		{
+			variant: "default",
+			size: "large",
+			class: [
+				"tw:before:w-10",
+				"tw:before:h-5",
+				"tw:before:rounded-xl"
+			]
+		}
+	]
+});
+const thumbVariants = cva([
+	"tw:block",
+	"tw:shrink-0",
+	"tw:pointer-events-none",
+	"tw:bg-white",
+	"tw:rounded-full"
+], {
+	defaultVariants: {
+		size: "medium",
+		variant: "default"
+	},
+	variants: {
+		variant: {
+			default: [
+				"tw:absolute",
+				"tw:left-0",
+				"tw:transition-transform",
+				"tw:ease-in-out",
+				"tw:shadow-[0_2px_5px_rgba(0,0,0,.26)]"
+			],
+			argo: [
+				"tw:size-4",
+				"tw:shadow-sm",
+				"tw:transition-transform",
+				"tw:data-[state=checked]:translate-x-[16px]",
+				"tw:data-[state=unchecked]:translate-x-0.5"
+			]
+		},
+		size: {
+			small: [],
+			medium: [],
+			large: []
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "default",
+			size: "small",
+			class: [
+				"tw:w-3",
+				"tw:h-3",
+				"tw:data-[state=checked]:translate-x-2.5",
+				"tw:data-[state=unchecked]:translate-x-0.5"
+			]
+		},
+		{
+			variant: "default",
+			size: "medium",
+			class: [
+				"tw:w-3",
+				"tw:h-3",
+				"tw:data-[state=checked]:translate-x-[18px]",
+				"tw:data-[state=unchecked]:translate-x-0.5"
+			]
+		},
+		{
+			variant: "default",
+			size: "large",
+			class: [
+				"tw:w-3.5",
+				"tw:h-3.5",
+				"tw:data-[state=checked]:translate-x-6",
+				"tw:data-[state=unchecked]:translate-x-0.5"
+			]
+		}
+	]
+});
+//#endregion
+//#region src/components/Switch/Switch.tsx
+const Switch = ({ ref, className, size, disabled = false, id: idProp, children, description, variant, position, ...props }) => {
+	const fallbackId = useId();
+	const id = idProp?.toString() ?? fallbackId;
+	const switchVariant = useArgoDesign() ? "argo" : "default";
+	const switchElement = /* @__PURE__ */ jsx(Root, {
+		...props,
+		ref,
+		id,
+		disabled,
+		className: switchVariants({
+			className,
+			size,
+			variant: switchVariant
+		}),
+		children: /* @__PURE__ */ jsx(Thumb, { className: thumbVariants({
+			size,
+			variant: switchVariant
+		}) })
+	});
+	if (!children) return switchElement;
+	return /* @__PURE__ */ jsxs(FieldBox, {
+		htmlFor: id,
+		variant,
+		position,
+		control: switchElement,
+		children: [/* @__PURE__ */ jsx(FieldBox.Title, { children }), description && /* @__PURE__ */ jsx(FieldBox.Description, { children: description })]
+	});
+};
+//#endregion
+export { Switch };
+
+//# sourceMappingURL=Switch-CX2A0v50.js.map

package/dist/Switch-CX2A0v50.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch-CX2A0v50.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  [\n    'tailwindcss-preflight',\n    'tw:shrink-0',\n    'tw:cursor-pointer',\n    'tw:disabled:cursor-not-allowed',\n    'tw:disabled:opacity-50',\n  ],\n  {\n    defaultVariants: {\n      size: 'medium',\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:peer/switch',\n          'tw:group/switch',\n          'tw:relative',\n\n          // positioning\n          'tw:flex',\n          'tw:items-center',\n          'tw:gap-2',\n\n          'tw:min-h-5',\n\n          // label\n          'tw:text-neutral-800',\n          'tw:font-normal',\n\n          // before pseudo element\n          'tw:before:content-[\" \"]',\n          'tw:before:block',\n          'tw:before:relative',\n\n          // color\n          'tw:aria-checked:before:bg-primary-500',\n          'tw:before:bg-neutral-200',\n\n          // hover\n          'tw:aria-checked:before:hover:bg-primary-600',\n          'tw:before:hover:bg-neutral-300',\n\n          // disabled\n          'tw:before:disabled:hover:bg-neutral-200',\n\n          // others\n          'tw:transition-colors',\n\n          'tw:focus-visible:outline-hidden',\n          'tw:before:focus-visible:outline',\n          'tw:before:focus-visible:outline-1',\n          'tw:before:focus-visible:outline-ring',\n          'tw:before:focus-visible:ring-4',\n          'tw:before:focus-visible:ring-ring/30',\n        ],\n        argo: [\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      },\n      size: {\n        small: [],\n        medium: [],\n        large: [],\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'default',\n        size: 'small',\n        class: ['tw:before:w-6', 'tw:before:h-4', 'tw:before:rounded-lg'],\n      },\n      {\n        variant: 'default',\n        size: 'medium',\n        class: ['tw:before:w-8', 'tw:before:h-4', 'tw:before:rounded-lg'],\n      },\n      {\n        variant: 'default',\n        size: 'large',\n        class: ['tw:before:w-10', 'tw:before:h-5', 'tw:before:rounded-xl'],\n      },\n    ],\n  },\n);\n\nexport const thumbVariants = cva(\n  ['tw:block', 'tw:shrink-0', 'tw:pointer-events-none', 'tw:bg-white', 'tw:rounded-full'],\n  {\n    defaultVariants: {\n      size: 'medium',\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:absolute',\n          'tw:left-0',\n          'tw:transition-transform',\n          'tw:ease-in-out',\n          'tw:shadow-[0_2px_5px_rgba(0,0,0,.26)]',\n        ],\n        argo: [\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      },\n      size: {\n        small: [],\n        medium: [],\n        large: [],\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'default',\n        size: 'small',\n        class: [\n          'tw:w-3',\n          'tw:h-3',\n          'tw:data-[state=checked]:translate-x-2.5',\n          'tw:data-[state=unchecked]:translate-x-0.5',\n        ],\n      },\n      {\n        variant: 'default',\n        size: 'medium',\n        class: [\n          'tw:w-3',\n          'tw:h-3',\n          'tw:data-[state=checked]:translate-x-[18px]',\n          'tw:data-[state=unchecked]:translate-x-0.5',\n        ],\n      },\n      {\n        variant: 'default',\n        size: 'large',\n        class: [\n          'tw:w-3.5',\n          'tw:h-3.5',\n          'tw:data-[state=checked]:translate-x-6',\n          'tw:data-[state=unchecked]:translate-x-0.5',\n        ],\n      },\n    ],\n  },\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';\nimport { useArgoDesign } from '../ThemeProvider/context';\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  Omit<VariantProps<typeof switchVariants>, 'variant'>;\n\nexport const Switch = ({\n  ref,\n  className,\n  size,\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  const switchVariant = useArgoDesign() ? 'argo' : 'default';\n\n  const switchElement = (\n    <Root\n      {...props}\n      ref={ref}\n      id={id}\n      disabled={disabled}\n      className={switchVariants({ className, size, variant: switchVariant })}\n    >\n      <Thumb className={thumbVariants({ size, variant: switchVariant })} />\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,IAC5B;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IACA;IAGA;IACA;IACA;IAEA;IAGA;IACA;IAGA;IACA;IACA;IAGA;IACA;IAGA;IACA;IAGA;IAGA;IAEA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,OAAO,CAAC;GACR,QAAQ,CAAC;GACT,OAAO,CAAC;EACV;CACF;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,MAAM;GACN,OAAO;IAAC;IAAiB;IAAiB;GAAsB;EAClE;EACA;GACE,SAAS;GACT,MAAM;GACN,OAAO;IAAC;IAAiB;IAAiB;GAAsB;EAClE;EACA;GACE,SAAS;GACT,MAAM;GACN,OAAO;IAAC;IAAkB;IAAiB;GAAsB;EACnE;CACF;AACF,CACF;AAEA,MAAa,gBAAgB,IAC3B;CAAC;CAAY;CAAe;CAA0B;CAAe;AAAiB,GACtF;CACE,iBAAiB;EACf,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IACJ;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,OAAO,CAAC;GACR,QAAQ,CAAC;GACT,OAAO,CAAC;EACV;CACF;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,MAAM;GACN,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;CACF;AACF,CACF;;;ACxJA,MAAa,UAAU,EACrB,KACA,WACA,MACA,WAAW,OACX,IAAI,QACJ,UACA,aACA,SACA,UACA,GAAG,YACQ;CACX,MAAM,aAAa,MAAM;CACzB,MAAM,KAAK,QAAQ,SAAS,KAAK;CACjC,MAAM,gBAAgB,cAAc,IAAI,SAAS;CAEjD,MAAM,gBACJ,oBAAC,MAAD;EACE,GAAI;EACC;EACD;EACM;EACV,WAAW,eAAe;GAAE;GAAW;GAAM,SAAS;EAAc,CAAC;EAErE,UAAA,oBAAC,OAAD,EAAO,WAAW,cAAc;GAAE;GAAM,SAAS;EAAc,CAAC,EAAI,CAAA;CAChE,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"}