ixia-ui-react 1.7.0 → 2.0.0

package/dist/slider-D_XlV4OW.js

@@ -0,0 +1,114 @@
+import { t as cn } from "./cn-BDi0DfT5.js";
+import { n as TooltipTrigger, r as TooltipContent, t as Tooltip } from "./tooltip-B6z3tDbW.js";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Slider } from "@base-ui/react";
+// src/components/slider/slider-thumb.tsx
+function SliderThumb({ className, ref, hide, ...props }) {
+	const [isHovering, setIsHovering] = React.useState(false), [isDragging, setIsDragging] = React.useState(false), thumbRef = React.useRef(null), setRefs = React.useCallback((node) => {
+		thumbRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	React.useEffect(() => {
+		if (!thumbRef.current) return;
+		const node = thumbRef.current, update = () => setIsDragging(node.hasAttribute("data-dragging")), observer = new MutationObserver(update);
+		update();
+		observer.observe(node, {
+			attributeFilter: ["data-dragging"],
+			attributes: true
+		});
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		open: isHovering || isDragging,
+		disabled: hide,
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			delay: 0,
+			children: /* @__PURE__ */ jsx(Slider.Thumb, {
+				"data-slot": "slider-thumb",
+				className: cn("absolute aspect-square rounded-full bg-surface transition-[width,height,opacity] outline-none data-dragging:cursor-grabbing data-dragging:shadow-sm hover:[&:not([data-dragging])]:cursor-pointer", className),
+				onPointerEnter: () => setIsHovering(true),
+				onPointerLeave: () => setIsHovering(false),
+				ref: setRefs,
+				...props
+			})
+		}), /* @__PURE__ */ jsx(TooltipContent, {
+			sideOffset: 10,
+			children: /* @__PURE__ */ jsx(Slider.Value, {})
+		})]
+	});
+}
+// src/components/slider/slider.types.ts
+const sliderVariants = cva("flex h-lg w-full items-center", {
+	defaultVariants: {
+		size: "medium",
+		tone: "brand"
+	},
+	variants: {
+		size: {
+			large: "[&_[data-slot='slider-thumb']]:size-md [&_[data-slot='slider-thumb']]:border-3 [&_[data-slot='slider-thumb'][data-dragging]]:size-lg [&_[data-slot='slider-track'][data-orientation='horizontal']]:h-xs [&_[data-slot='slider-track'][data-orientation='vertical']]:w-xs",
+			medium: "[&_[data-slot='slider-thumb']]:size-sm [&_[data-slot='slider-thumb']]:border-2 [&_[data-slot='slider-thumb'][data-dragging]]:size-md [&_[data-slot='slider-track'][data-orientation='horizontal']]:h-2xs [&_[data-slot='slider-track'][data-orientation='vertical']]:w-2xs",
+			small: "[&_[data-slot='slider-thumb']]:size-xs [&_[data-slot='slider-thumb']]:border [&_[data-slot='slider-thumb'][data-dragging]]:size-sm [&_[data-slot='slider-track'][data-orientation='horizontal']]:h-3xs [&_[data-slot='slider-track'][data-orientation='vertical']]:w-3xs"
+		},
+		tone: {
+			accent: "[&_[data-slot='slider-thumb']]:border-accent-default [&_[data-slot=slider-indicator]]:bg-accent-default [&_[data-slot=slider-track]]:bg-accent-container-high",
+			brand: "[&_[data-slot='slider-thumb']]:border-brand-default [&_[data-slot=slider-indicator]]:bg-brand-default [&_[data-slot=slider-track]]:bg-brand-container-high",
+			error: "[&_[data-slot='slider-thumb']]:border-error-default [&_[data-slot=slider-indicator]]:bg-error-default [&_[data-slot=slider-track]]:bg-error-container-high",
+			info: "[&_[data-slot='slider-thumb']]:border-info-default [&_[data-slot=slider-indicator]]:bg-info-default [&_[data-slot=slider-track]]:bg-info-container-high",
+			neutral: "[&_[data-slot='slider-thumb']]:border-neutral-default [&_[data-slot=slider-indicator]]:bg-neutral-default [&_[data-slot=slider-track]]:bg-neutral-container-high",
+			success: "[&_[data-slot='slider-thumb']]:border-success-default [&_[data-slot=slider-indicator]]:bg-success-default [&_[data-slot=slider-track]]:bg-success-container-high",
+			warning: "[&_[data-slot='slider-thumb']]:border-warning-default [&_[data-slot=slider-indicator]]:bg-warning-default [&_[data-slot=slider-track]]:bg-warning-container-high"
+		}
+	}
+});
+// src/components/slider/slider.tsx
+const MIN_DEFAULT = 0;
+const MAX_DEFAULT = 100;
+const STEP_DEFAULT = 1;
+function resolveThumbValues(value, defaultValue, min) {
+	if (typeof value === "number") return [value];
+	if (Array.isArray(value)) return [...value];
+	if (typeof defaultValue === "number") return [defaultValue];
+	if (Array.isArray(defaultValue)) return [...defaultValue];
+	return [min];
+}
+function Slider$2({ size, tone, defaultValue, min = MIN_DEFAULT, max = MAX_DEFAULT, step = STEP_DEFAULT, showIndicator = true, showTooltip = true, showThumbOnHover = true, value, onValueChange, className, "aria-label": ariaLabel = "Slider", ref, ...props }) {
+	const thumbValues = resolveThumbValues(value, defaultValue, min);
+	return /* @__PURE__ */ jsx(Slider.Root, {
+		className: cn(sliderVariants({
+			size,
+			tone
+		}), className),
+		defaultValue,
+		"data-slot": "slider-root",
+		max,
+		min,
+		onValueChange,
+		ref,
+		step,
+		value,
+		...props,
+		children: /* @__PURE__ */ jsx(Slider.Control, {
+			className: "shrink-0 hover:cursor-pointer data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
+			children: /* @__PURE__ */ jsxs(Slider.Track, {
+				"data-slot": "slider-track",
+				className: cn("relative size-full rounded-full", !showThumbOnHover && "**:data-[slot='slider-thumb']:opacity-0 hover:**:data-[slot='slider-thumb']:opacity-100 active:**:data-[slot='slider-thumb']:opacity-100 data-dragging:**:data-[slot='slider-thumb']:opacity-100"),
+				children: [/* @__PURE__ */ jsx(Slider.Indicator, {
+					"data-slot": "slider-indicator",
+					className: cn("rounded-full", !showIndicator && "opacity-0")
+				}), [...thumbValues.keys()].map((index) => /* @__PURE__ */ jsx(SliderThumb, {
+					"aria-label": ariaLabel,
+					index,
+					hide: !showTooltip
+				}, index))]
+			})
+		})
+	});
+}
+// src/components/slider/index.ts
+const Slider$1 = Object.assign(Slider$2, { Thumb: SliderThumb });
+export { SliderThumb as n, Slider$1 as t };
+
+//# sourceMappingURL=slider-D_XlV4OW.js.map

package/dist/slider-D_XlV4OW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-D_XlV4OW.js","names":["BaseSlider","Slider","BaseSlider","Slider","SliderRoot"],"sources":["../src/components/slider/slider-thumb.tsx","../src/components/slider/slider.types.ts","../src/components/slider/slider.tsx","../src/components/slider/index.ts"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react'\nimport React from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'\nimport type { SliderThumbProps } from './slider.types'\n\nexport function SliderThumb({ className, ref, hide, ...props }: SliderThumbProps) {\n  const [isHovering, setIsHovering] = React.useState(false),\n    [isDragging, setIsDragging] = React.useState(false),\n    thumbRef = React.useRef<HTMLDivElement>(null),\n    setRefs = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        thumbRef.current = node\n        if (typeof ref === 'function') {\n          ref(node)\n        } else if (ref) {\n          ;(ref as { current: HTMLDivElement | null }).current = node\n        }\n      },\n      [ref],\n    )\n  React.useEffect(() => {\n    if (!thumbRef.current) {\n      return undefined\n    }\n    const node = thumbRef.current,\n      update = () => setIsDragging(node.hasAttribute('data-dragging')),\n      observer = new MutationObserver(update)\n    update()\n    observer.observe(node, { attributeFilter: ['data-dragging'], attributes: true })\n    return () => observer.disconnect()\n  }, [])\n\n  return (\n    <Tooltip open={isHovering || isDragging} disabled={hide}>\n      <TooltipTrigger delay={0}>\n        <BaseSlider.Thumb\n          data-slot=\"slider-thumb\"\n          className={cn(\n            'absolute aspect-square rounded-full bg-surface transition-[width,height,opacity] outline-none data-dragging:cursor-grabbing data-dragging:shadow-sm hover:[&:not([data-dragging])]:cursor-pointer',\n            className,\n          )}\n          onPointerEnter={() => setIsHovering(true)}\n          onPointerLeave={() => setIsHovering(false)}\n          ref={setRefs}\n          {...props}\n        />\n      </TooltipTrigger>\n      <TooltipContent sideOffset={10}>\n        <BaseSlider.Value />\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n","import type { Slider as BaseSlider } from '@base-ui/react'\nimport { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\nimport type { ComponentProps } from 'react'\n\nconst sliderVariants = cva('flex h-lg w-full items-center', {\n  defaultVariants: {\n    size: 'medium',\n    tone: 'brand',\n  },\n  variants: {\n    size: {\n      large:\n        \"[&_[data-slot='slider-thumb']]:size-md [&_[data-slot='slider-thumb']]:border-3 [&_[data-slot='slider-thumb'][data-dragging]]:size-lg [&_[data-slot='slider-track'][data-orientation='horizontal']]:h-xs [&_[data-slot='slider-track'][data-orientation='vertical']]:w-xs\",\n      medium:\n        \"[&_[data-slot='slider-thumb']]:size-sm [&_[data-slot='slider-thumb']]:border-2 [&_[data-slot='slider-thumb'][data-dragging]]:size-md [&_[data-slot='slider-track'][data-orientation='horizontal']]:h-2xs [&_[data-slot='slider-track'][data-orientation='vertical']]:w-2xs\",\n      small:\n        \"[&_[data-slot='slider-thumb']]:size-xs [&_[data-slot='slider-thumb']]:border [&_[data-slot='slider-thumb'][data-dragging]]:size-sm [&_[data-slot='slider-track'][data-orientation='horizontal']]:h-3xs [&_[data-slot='slider-track'][data-orientation='vertical']]:w-3xs\",\n    },\n    tone: {\n      accent:\n        \"[&_[data-slot='slider-thumb']]:border-accent-default [&_[data-slot=slider-indicator]]:bg-accent-default [&_[data-slot=slider-track]]:bg-accent-container-high\",\n      brand:\n        \"[&_[data-slot='slider-thumb']]:border-brand-default [&_[data-slot=slider-indicator]]:bg-brand-default [&_[data-slot=slider-track]]:bg-brand-container-high\",\n      error:\n        \"[&_[data-slot='slider-thumb']]:border-error-default [&_[data-slot=slider-indicator]]:bg-error-default [&_[data-slot=slider-track]]:bg-error-container-high\",\n      info: \"[&_[data-slot='slider-thumb']]:border-info-default [&_[data-slot=slider-indicator]]:bg-info-default [&_[data-slot=slider-track]]:bg-info-container-high\",\n      neutral:\n        \"[&_[data-slot='slider-thumb']]:border-neutral-default [&_[data-slot=slider-indicator]]:bg-neutral-default [&_[data-slot=slider-track]]:bg-neutral-container-high\",\n      success:\n        \"[&_[data-slot='slider-thumb']]:border-success-default [&_[data-slot=slider-indicator]]:bg-success-default [&_[data-slot=slider-track]]:bg-success-container-high\",\n      warning:\n        \"[&_[data-slot='slider-thumb']]:border-warning-default [&_[data-slot=slider-indicator]]:bg-warning-default [&_[data-slot=slider-track]]:bg-warning-container-high\",\n    },\n  },\n})\n\ntype SliderProps = ComponentProps<typeof BaseSlider.Root> &\n  VariantProps<typeof sliderVariants> & {\n    showIndicator?: boolean\n    showThumbOnHover?: boolean\n    showTooltip?: boolean\n  }\ntype SliderThumbProps = ComponentProps<typeof BaseSlider.Thumb> & {\n  hide?: boolean\n}\n\nexport type { SliderProps, SliderThumbProps }\nexport { sliderVariants }\n","import { Slider as BaseSlider } from '@base-ui/react'\n\nimport { cn } from '@/utils/cn'\n\nimport { SliderThumb } from './slider-thumb'\nimport { sliderVariants } from './slider.types'\nimport type { SliderProps } from './slider.types'\n\nconst MIN_DEFAULT = 0,\n  MAX_DEFAULT = 100,\n  STEP_DEFAULT = 1\n\nfunction resolveThumbValues(\n  value: SliderProps['value'],\n  defaultValue: SliderProps['defaultValue'],\n  min: number,\n): number[] {\n  if (typeof value === 'number') {\n    return [value]\n  }\n  if (Array.isArray(value)) {\n    return [...value]\n  }\n  if (typeof defaultValue === 'number') {\n    return [defaultValue]\n  }\n  if (Array.isArray(defaultValue)) {\n    return [...defaultValue]\n  }\n  return [min]\n}\n\nexport function Slider({\n  size,\n  tone,\n  defaultValue,\n  min = MIN_DEFAULT,\n  max = MAX_DEFAULT,\n  step = STEP_DEFAULT,\n  showIndicator = true,\n  showTooltip = true,\n  showThumbOnHover = true,\n  value,\n  onValueChange,\n  className,\n  'aria-label': ariaLabel = 'Slider',\n  ref,\n  ...props\n}: SliderProps) {\n  const thumbValues = resolveThumbValues(value, defaultValue, min)\n\n  return (\n    <BaseSlider.Root\n      className={cn(sliderVariants({ size, tone }), className)}\n      defaultValue={defaultValue}\n      data-slot=\"slider-root\"\n      max={max}\n      min={min}\n      onValueChange={onValueChange}\n      ref={ref}\n      step={step}\n      value={value}\n      {...props}\n    >\n      <BaseSlider.Control className=\"shrink-0 hover:cursor-pointer data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full\">\n        <BaseSlider.Track\n          data-slot=\"slider-track\"\n          className={cn(\n            'relative size-full rounded-full',\n            !showThumbOnHover &&\n              \"**:data-[slot='slider-thumb']:opacity-0 hover:**:data-[slot='slider-thumb']:opacity-100 active:**:data-[slot='slider-thumb']:opacity-100 data-dragging:**:data-[slot='slider-thumb']:opacity-100\",\n          )}\n        >\n          <BaseSlider.Indicator\n            data-slot=\"slider-indicator\"\n            className={cn('rounded-full', !showIndicator && 'opacity-0')}\n          />\n          {[...thumbValues.keys()].map((index) => (\n            <SliderThumb aria-label={ariaLabel} index={index} key={index} hide={!showTooltip} />\n          ))}\n        </BaseSlider.Track>\n      </BaseSlider.Control>\n    </BaseSlider.Root>\n  )\n}\n","import { Slider as SliderRoot } from './slider'\nimport { SliderThumb } from './slider-thumb'\n\nconst Slider = Object.assign(SliderRoot, {\n  Thumb: SliderThumb,\n})\n\nexport type { SliderProps, SliderThumbProps } from './slider.types'\nexport { SliderThumb } from './slider-thumb'\n\nexport { Slider }\n"],"mappings":"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"}

package/dist/slider-group/index.d.ts

@@ -0,0 +1,46 @@
+import { t as Input } from "../index-BsV-u_jc.js";
+import { r as SliderProps } from "../index-BygR7cUT.js";
+import React$1 from "react";
+type SliderGroupProps = Omit<React.ComponentProps<'div'>, 'defaultValue' | 'onChange'> & {
+  defaultValue?: number | number[];
+  value?: number | number[];
+  onValueChange?: (value: number[]) => void;
+};
+interface SliderGroupConfig {
+  min: number;
+  max: number;
+  step: number;
+  defaultValue?: number | readonly number[];
+}
+interface SliderGroupContextValue {
+  value: number[] | undefined;
+  setValue: (value: number[]) => void;
+  min: number;
+  max: number;
+  step: number;
+  registerConfig: (config: SliderGroupConfig) => void;
+}
+type SliderGroupSliderProps = SliderProps;
+type SliderDescriptionProps = React.ComponentProps<'p'>;
+type SliderIconProps = React.ComponentProps<'div'>;
+type SliderInputProps = Omit<React.ComponentProps<typeof Input>, 'value' | 'onChange' | 'type'>;
+type SliderLabelProps = React.ComponentProps<'span'>;
+type SliderValueProps = React.ComponentProps<'span'>;
+export declare function SliderDescription({ className, ref, ...props }: SliderDescriptionProps): import("react").JSX.Element;
+declare function SliderGroup$1({ className, ref, defaultValue, value: valueProp, onValueChange, ...props }: SliderGroupProps): React$1.JSX.Element;
+export declare function SliderGroupSlider({ min, max, step, defaultValue, value, onValueChange, ...props }: SliderGroupSliderProps): React$1.JSX.Element;
+export declare function SliderIcon({ className, ref, ...props }: SliderIconProps): import("react").JSX.Element;
+export declare function SliderInput({ className, ref, ...props }: SliderInputProps): import("react").JSX.Element | undefined;
+export declare function SliderLabel({ className, ref, ...props }: SliderLabelProps): import("react").JSX.Element;
+export declare function SliderValue({ className, children, ref, ...props }: SliderValueProps): import("react").JSX.Element | undefined;
+declare const SliderGroupContext: import("react").Context<SliderGroupContextValue | undefined>, useSliderGroupContext: () => SliderGroupContextValue | undefined, getPrimaryValue: (value: number[] | undefined, min: number) => number, withPrimaryValue: (value: number[] | undefined, next: number) => number[], areNumberArraysEqual: (first?: number[], second?: number[]) => boolean, useStableNumberArray: (next: number[] | undefined) => number[] | undefined;
+declare const SliderGroup: typeof SliderGroup$1 & {
+  Description: typeof SliderDescription;
+  Icon: typeof SliderIcon;
+  Input: typeof SliderInput;
+  Label: typeof SliderLabel;
+  Slider: typeof SliderGroupSlider;
+  Value: typeof SliderValue;
+};
+export { type SliderDescriptionProps, SliderGroup, type SliderGroupProps, type SliderGroupSliderProps, type SliderIconProps, type SliderInputProps, type SliderLabelProps, type SliderValueProps, useSliderGroupContext };
+//# sourceMappingURL=index.d.ts.map

package/dist/slider-group/index.js

@@ -0,0 +1,198 @@
+import { t as cn } from "../cn-BDi0DfT5.js";
+import { t as Input } from "../input-Laj6dwtK.js";
+import { t as Slider } from "../slider-D_XlV4OW.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { createContext, useContext, useState } from "react";
+// src/components/slider-group/slider-description.tsx
+function SliderDescription({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "slider-description",
+		className: cn("style-text-prose--1 text-on-surface-variant", className),
+		ref,
+		...props
+	});
+}
+// src/components/slider-group/slider-group-context.ts
+const FIRST_THUMB_INDEX = 0;
+const SliderGroupContext = createContext(void 0);
+const useSliderGroupContext = () => useContext(SliderGroupContext);
+const getPrimaryValue = (value, min) => value?.[FIRST_THUMB_INDEX] ?? min;
+const withPrimaryValue = (value, next) => {
+	const result = [...value ?? []];
+	result[FIRST_THUMB_INDEX] = next;
+	return result;
+};
+const areNumberArraysEqual = (first, second) => first === second || first !== void 0 && second !== void 0 && first.length === second.length && first.every((item, index) => item === second[index]);
+const useStableNumberArray = (next) => {
+	const [stable, setStable] = useState(next);
+	if (!areNumberArraysEqual(stable, next)) {
+		setStable(next);
+		return next;
+	}
+	return stable;
+};
+// src/components/slider-group/slider-group.tsx
+const MIN_DEFAULT$1 = 0;
+const MAX_DEFAULT$1 = 100;
+const STEP_DEFAULT$1 = 1;
+function toArray(value) {
+	if (value === void 0) return;
+	if (typeof value === "number") return [value];
+	return [...value];
+}
+function getControlledValue(isControlled, valueProp, internalValue) {
+	if (isControlled) return toArray(valueProp);
+	return internalValue;
+}
+function mergeConfig(prev, incoming) {
+	if (prev.min === incoming.min && prev.max === incoming.max && prev.step === incoming.step) return prev;
+	return {
+		max: incoming.max,
+		min: incoming.min,
+		step: incoming.step
+	};
+}
+function SliderGroup$1({ className, ref, defaultValue, value: valueProp, onValueChange, ...props }) {
+	const isControlled = valueProp !== void 0, [internalValue, setInternalValue] = React.useState(() => toArray(defaultValue)), [config, setConfig] = React.useState({
+		max: MAX_DEFAULT$1,
+		min: MIN_DEFAULT$1,
+		step: STEP_DEFAULT$1
+	}), value = useStableNumberArray(getControlledValue(isControlled, valueProp, internalValue)), setValue = (next) => {
+		if (!isControlled) setInternalValue(next);
+		onValueChange?.(next);
+	}, registerConfig = (incoming) => {
+		setConfig((prev) => mergeConfig(prev, incoming));
+		if (incoming.defaultValue !== void 0) setInternalValue((prev) => prev ?? toArray(incoming.defaultValue));
+	}, context = {
+		max: config.max,
+		min: config.min,
+		registerConfig,
+		setValue,
+		step: config.step,
+		value
+	};
+	return /* @__PURE__ */ jsx(SliderGroupContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "slider-group",
+			className: cn("flex w-full flex-wrap items-center gap-x-sm", "**:data-[slot=slider-label]:basis-full", "**:data-[slot=slider-root]:flex-1", "**:data-[slot=slider-description]:basis-full", className),
+			ref,
+			...props
+		})
+	});
+}
+// src/components/slider-group/slider-group-slider.tsx
+const MIN_DEFAULT = 0;
+const MAX_DEFAULT = 100;
+const STEP_DEFAULT = 1;
+function toSingleNumber(input) {
+	if (typeof input === "number") return input;
+}
+function toNumberArray(next) {
+	if (typeof next === "number") return [next];
+	return [...next];
+}
+function resolveInitialValue(defaultValue, value, min) {
+	if (Array.isArray(defaultValue)) return [...defaultValue];
+	return [toSingleNumber(value) ?? toSingleNumber(defaultValue) ?? min];
+}
+function getGroupValue(group, fallback) {
+	if (!group) return;
+	return group.value ?? fallback;
+}
+function SliderGroupSlider({ min = MIN_DEFAULT, max = MAX_DEFAULT, step = STEP_DEFAULT, defaultValue, value, onValueChange, ...props }) {
+	const group = useSliderGroupContext(), groupValue = useStableNumberArray(getGroupValue(group, resolveInitialValue(defaultValue, value, min))), handleValueChange = (...args) => {
+		const [next] = args;
+		group?.setValue(toNumberArray(next));
+		onValueChange?.(...args);
+	};
+	React.useEffect(() => {
+		group?.registerConfig({
+			defaultValue,
+			max,
+			min,
+			step
+		});
+	}, [
+		group,
+		min,
+		max,
+		step,
+		defaultValue
+	]);
+	return /* @__PURE__ */ jsx(Slider, {
+		min,
+		max,
+		step,
+		value: groupValue,
+		onValueChange: handleValueChange,
+		...props
+	});
+}
+// src/components/slider-group/slider-icon.tsx
+function SliderIcon({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "slider-icon",
+		className: cn("[&>svg]:size-sm [&>svg]:shrink-0", className),
+		ref,
+		...props
+	});
+}
+// src/components/slider-group/slider-input.tsx
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+function SliderInput({ className, ref, ...props }) {
+	const group = useSliderGroupContext(), handleChange = (event) => {
+		const raw = event.target.value, parsed = Number(raw);
+		if (raw === "" || Number.isNaN(parsed) || !group) return;
+		group.setValue(withPrimaryValue(group.value, clamp(parsed, group.min, group.max)));
+	};
+	if (!group) return;
+	return /* @__PURE__ */ jsx(Input, {
+		"aria-label": "Value",
+		"data-slot": "slider-input",
+		className: cn("w-[4rem]", className),
+		ref,
+		...props,
+		type: "number",
+		min: group.min,
+		max: group.max,
+		step: group.step,
+		value: getPrimaryValue(group.value, group.min),
+		onChange: handleChange
+	});
+}
+// src/components/slider-group/slider-label.tsx
+function SliderLabel({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "slider-label",
+		className: cn("style-text-default-0", className),
+		ref,
+		...props
+	});
+}
+// src/components/slider-group/slider-value.tsx
+function SliderValue({ className, children, ref, ...props }) {
+	const group = useSliderGroupContext();
+	if (!group) return;
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "slider-value",
+		className: cn("min-w-lg text-right style-text-default--1 text-on-surface-variant", className),
+		ref,
+		...props,
+		children: [children, getPrimaryValue(group.value, group.min)]
+	});
+}
+// src/components/slider-group/index.ts
+const SliderGroup = Object.assign(SliderGroup$1, {
+	Description: SliderDescription,
+	Icon: SliderIcon,
+	Input: SliderInput,
+	Label: SliderLabel,
+	Slider: SliderGroupSlider,
+	Value: SliderValue
+});
+export { SliderDescription, SliderGroup, SliderGroupSlider, SliderIcon, SliderInput, SliderLabel, SliderValue, useSliderGroupContext };
+
+//# sourceMappingURL=index.js.map

package/dist/slider-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["MIN_DEFAULT","MAX_DEFAULT","STEP_DEFAULT","SliderGroup","SliderGroupRoot"],"sources":["../../src/components/slider-group/slider-description.tsx","../../src/components/slider-group/slider-group-context.ts","../../src/components/slider-group/slider-group.tsx","../../src/components/slider-group/slider-group-slider.tsx","../../src/components/slider-group/slider-icon.tsx","../../src/components/slider-group/slider-input.tsx","../../src/components/slider-group/slider-label.tsx","../../src/components/slider-group/slider-value.tsx","../../src/components/slider-group/index.ts"],"sourcesContent":["import { cn } from '@/utils/cn'\n\nimport type { SliderDescriptionProps } from './slider-group.types'\n\nexport function SliderDescription({ className, ref, ...props }: SliderDescriptionProps) {\n  return (\n    <p\n      data-slot=\"slider-description\"\n      className={cn('style-text-prose--1 text-on-surface-variant', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { createContext, useContext, useState } from 'react'\n\nimport type { SliderGroupContextValue } from './slider-group.types'\n\nconst FIRST_THUMB_INDEX = 0,\n  SliderGroupContext = createContext<SliderGroupContextValue | undefined>(undefined),\n  useSliderGroupContext = () => useContext(SliderGroupContext),\n  getPrimaryValue = (value: number[] | undefined, min: number): number =>\n    value?.[FIRST_THUMB_INDEX] ?? min,\n  withPrimaryValue = (value: number[] | undefined, next: number): number[] => {\n    const result = [...(value ?? [])]\n    result[FIRST_THUMB_INDEX] = next\n    return result\n  },\n  areNumberArraysEqual = (first?: number[], second?: number[]) =>\n    first === second ||\n    (first !== undefined &&\n      second !== undefined &&\n      first.length === second.length &&\n      first.every((item, index) => item === second[index])),\n  // Keeps a referentially-stable array while its contents are unchanged, so a new\n  // Literal each render can't masquerade as a value change (which loops Base UI's controlled Slider).\n  useStableNumberArray = (next: number[] | undefined) => {\n    const [stable, setStable] = useState(next)\n    if (!areNumberArraysEqual(stable, next)) {\n      setStable(next)\n      return next\n    }\n    return stable\n  }\n\nexport {\n  SliderGroupContext,\n  useSliderGroupContext,\n  getPrimaryValue,\n  withPrimaryValue,\n  areNumberArraysEqual,\n  useStableNumberArray,\n}\n","import React from 'react'\n\nimport { cn } from '@/utils/cn'\n\nimport { SliderGroupContext, useStableNumberArray } from './slider-group-context'\nimport type { SliderGroupProps, SliderGroupConfig } from './slider-group.types'\n\nconst MIN_DEFAULT = 0,\n  MAX_DEFAULT = 100,\n  STEP_DEFAULT = 1\n\nfunction toArray(value: number | readonly number[] | undefined): number[] | undefined {\n  if (value === undefined) {\n    return undefined\n  }\n  if (typeof value === 'number') {\n    return [value]\n  }\n  return [...value]\n}\n\nfunction getControlledValue(\n  isControlled: boolean,\n  valueProp: SliderGroupProps['value'],\n  internalValue: number[] | undefined,\n): number[] | undefined {\n  if (isControlled) {\n    return toArray(valueProp)\n  }\n  return internalValue\n}\n\nfunction mergeConfig(\n  prev: { min: number; max: number; step: number },\n  incoming: SliderGroupConfig,\n) {\n  if (prev.min === incoming.min && prev.max === incoming.max && prev.step === incoming.step) {\n    return prev\n  }\n  return { max: incoming.max, min: incoming.min, step: incoming.step }\n}\n\nexport function SliderGroup({\n  className,\n  ref,\n  defaultValue,\n  value: valueProp,\n  onValueChange,\n  ...props\n}: SliderGroupProps) {\n  const isControlled = valueProp !== undefined,\n    [internalValue, setInternalValue] = React.useState<number[] | undefined>(() =>\n      toArray(defaultValue),\n    ),\n    [config, setConfig] = React.useState({\n      max: MAX_DEFAULT,\n      min: MIN_DEFAULT,\n      step: STEP_DEFAULT,\n    }),\n    value = useStableNumberArray(getControlledValue(isControlled, valueProp, internalValue)),\n    setValue = (next: number[]) => {\n      if (!isControlled) {\n        setInternalValue(next)\n      }\n      onValueChange?.(next)\n    },\n    registerConfig = (incoming: SliderGroupConfig) => {\n      setConfig((prev) => mergeConfig(prev, incoming))\n      if (incoming.defaultValue !== undefined) {\n        setInternalValue((prev) => prev ?? toArray(incoming.defaultValue))\n      }\n    },\n    context = {\n      max: config.max,\n      min: config.min,\n      registerConfig,\n      setValue,\n      step: config.step,\n      value,\n    }\n\n  return (\n    <SliderGroupContext.Provider value={context}>\n      <div\n        data-slot=\"slider-group\"\n        className={cn(\n          'flex w-full flex-wrap items-center gap-x-sm',\n          '**:data-[slot=slider-label]:basis-full',\n          '**:data-[slot=slider-root]:flex-1',\n          '**:data-[slot=slider-description]:basis-full',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      />\n    </SliderGroupContext.Provider>\n  )\n}\n","import React from 'react'\n\nimport { Slider } from '../slider'\nimport { useSliderGroupContext, useStableNumberArray } from './slider-group-context'\nimport type { SliderGroupContextValue, SliderGroupSliderProps } from './slider-group.types'\n\nconst MIN_DEFAULT = 0,\n  MAX_DEFAULT = 100,\n  STEP_DEFAULT = 1\n\nfunction toSingleNumber(input: number | readonly number[] | undefined): number | undefined {\n  if (typeof input === 'number') {\n    return input\n  }\n  return undefined\n}\n\nfunction toNumberArray(next: number | readonly number[]): number[] {\n  if (typeof next === 'number') {\n    return [next]\n  }\n  return [...next]\n}\n\nfunction resolveInitialValue(\n  defaultValue: SliderGroupSliderProps['defaultValue'],\n  value: SliderGroupSliderProps['value'],\n  min: number,\n): number[] {\n  if (Array.isArray(defaultValue)) {\n    return [...defaultValue]\n  }\n  return [toSingleNumber(value) ?? toSingleNumber(defaultValue) ?? min]\n}\n\nfunction getGroupValue(\n  group: SliderGroupContextValue | undefined,\n  fallback: number[],\n): number[] | undefined {\n  if (!group) {\n    return undefined\n  }\n  return group.value ?? fallback\n}\n\n// The group-bound Slider: it reads/writes the shared value from SliderGroup and\n// Publishes its min/max/step so siblings (SliderInput, SliderValue) stay in sync.\nexport function SliderGroupSlider({\n  min = MIN_DEFAULT,\n  max = MAX_DEFAULT,\n  step = STEP_DEFAULT,\n  defaultValue,\n  value,\n  onValueChange,\n  ...props\n}: SliderGroupSliderProps) {\n  const group = useSliderGroupContext(),\n    groupValue = useStableNumberArray(\n      getGroupValue(group, resolveInitialValue(defaultValue, value, min)),\n    ),\n    handleValueChange = (\n      ...args: Parameters<NonNullable<SliderGroupSliderProps['onValueChange']>>\n    ) => {\n      const [next] = args\n      group?.setValue(toNumberArray(next))\n      onValueChange?.(...args)\n    }\n\n  React.useEffect(() => {\n    group?.registerConfig({ defaultValue, max, min, step })\n  }, [group, min, max, step, defaultValue])\n\n  return (\n    <Slider\n      min={min}\n      max={max}\n      step={step}\n      value={groupValue}\n      onValueChange={handleValueChange}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { SliderIconProps } from './slider-group.types'\n\nexport function SliderIcon({ className, ref, ...props }: SliderIconProps) {\n  return (\n    <div\n      data-slot=\"slider-icon\"\n      className={cn('[&>svg]:size-sm [&>svg]:shrink-0', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport { Input } from '../input'\nimport { getPrimaryValue, useSliderGroupContext, withPrimaryValue } from './slider-group-context'\nimport type { SliderInputProps } from './slider-group.types'\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value))\n}\n\nexport function SliderInput({ className, ref, ...props }: SliderInputProps) {\n  const group = useSliderGroupContext(),\n    handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n      const raw = event.target.value,\n        parsed = Number(raw)\n      if (raw === '' || Number.isNaN(parsed) || !group) {\n        return\n      }\n      group.setValue(withPrimaryValue(group.value, clamp(parsed, group.min, group.max)))\n    }\n\n  if (!group) {\n    return undefined\n  }\n\n  return (\n    <Input\n      aria-label=\"Value\"\n      data-slot=\"slider-input\"\n      className={cn('w-[4rem]', className)}\n      ref={ref}\n      {...props}\n      type=\"number\"\n      min={group.min}\n      max={group.max}\n      step={group.step}\n      value={getPrimaryValue(group.value, group.min)}\n      onChange={handleChange}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport type { SliderLabelProps } from './slider-group.types'\n\nexport function SliderLabel({ className, ref, ...props }: SliderLabelProps) {\n  return (\n    <span\n      data-slot=\"slider-label\"\n      className={cn('style-text-default-0', className)}\n      ref={ref}\n      {...props}\n    />\n  )\n}\n","import { cn } from '@/utils/cn'\n\nimport { getPrimaryValue, useSliderGroupContext } from './slider-group-context'\nimport type { SliderValueProps } from './slider-group.types'\n\nexport function SliderValue({ className, children, ref, ...props }: SliderValueProps) {\n  const group = useSliderGroupContext()\n  if (!group) {\n    return undefined\n  }\n\n  return (\n    <span\n      data-slot=\"slider-value\"\n      className={cn('min-w-lg text-right style-text-default--1 text-on-surface-variant', className)}\n      ref={ref}\n      {...props}\n    >\n      {children}\n      {getPrimaryValue(group.value, group.min)}\n    </span>\n  )\n}\n","import { SliderDescription } from './slider-description'\nimport { SliderGroup as SliderGroupRoot } from './slider-group'\nimport { SliderGroupSlider } from './slider-group-slider'\nimport { SliderIcon } from './slider-icon'\nimport { SliderInput } from './slider-input'\nimport { SliderLabel } from './slider-label'\nimport { SliderValue } from './slider-value'\n\nconst SliderGroup = Object.assign(SliderGroupRoot, {\n  Description: SliderDescription,\n  Icon: SliderIcon,\n  Input: SliderInput,\n  Label: SliderLabel,\n  Slider: SliderGroupSlider,\n  Value: SliderValue,\n})\n\nexport { SliderGroupSlider } from './slider-group-slider'\nexport { SliderInput } from './slider-input'\nexport { SliderValue } from './slider-value'\nexport { SliderLabel } from './slider-label'\nexport { SliderDescription } from './slider-description'\nexport { SliderIcon } from './slider-icon'\nexport { useSliderGroupContext } from './slider-group-context'\nexport type {\n  SliderGroupProps,\n  SliderGroupSliderProps,\n  SliderInputProps,\n  SliderValueProps,\n  SliderLabelProps,\n  SliderDescriptionProps,\n  SliderIconProps,\n} from './slider-group.types'\n\nexport { SliderGroup }\n"],"mappings":"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"}

package/dist/styles.css

@@ -2,7 +2,6 @@
 @import url('https://utopia.fyi/type/calculator?c=360,12,1.2,1240,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12');
 @import 'tailwindcss';
 @import 'tw-animate-css';
-@import '@daypicker/react/style.css';
 @source ".";
 
 @layer components {
@@ -44,7 +43,6 @@
   --color-black: var(--ixia-black);
   --color-brand-default: var(--ixia-brand-default);
   --color-brand-muted: var(--ixia-brand-muted);
-  --color-brand-subtle: var(--ixia-brand-subtle);
   --color-brand-on-default: var(--ixia-brand-on-default);
   --color-brand-container: var(--ixia-brand-container);
   --color-brand-container-low: var(--ixia-brand-container-low);
@@ -56,7 +54,6 @@
   --color-brand-shadow: var(--ixia-brand-shadow);
   --color-accent-default: var(--ixia-accent-default);
   --color-accent-muted: var(--ixia-accent-muted);
-  --color-accent-subtle: var(--ixia-accent-subtle);
   --color-accent-on-default: var(--ixia-accent-on-default);
   --color-accent-container: var(--ixia-accent-container);
   --color-accent-container-low: var(--ixia-accent-container-low);
@@ -68,7 +65,6 @@
   --color-accent-shadow: var(--ixia-accent-shadow);
   --color-neutral-default: var(--ixia-neutral-default);
   --color-neutral-muted: var(--ixia-neutral-muted);
-  --color-neutral-subtle: var(--ixia-neutral-subtle);
   --color-neutral-on-default: var(--ixia-neutral-on-default);
   --color-neutral-container: var(--ixia-neutral-container);
   --color-neutral-container-high: var(--ixia-neutral-container-high);
@@ -80,7 +76,6 @@
   --color-neutral-shadow: var(--ixia-neutral-shadow);
   --color-error-default: var(--ixia-error-default);
   --color-error-muted: var(--ixia-error-muted);
-  --color-error-subtle: var(--ixia-error-subtle);
   --color-error-on-default: var(--ixia-error-on-default);
   --color-error-container-low: var(--ixia-error-container-low);
   --color-error-container: var(--ixia-error-container);
@@ -92,7 +87,6 @@
   --color-error-shadow: var(--ixia-error-shadow);
   --color-info-default: var(--ixia-info-default);
   --color-info-muted: var(--ixia-info-muted);
-  --color-info-subtle: var(--ixia-info-subtle);
   --color-info-on-default: var(--ixia-info-on-default);
   --color-info-container: var(--ixia-info-container);
   --color-info-container-low: var(--ixia-info-container-low);
@@ -104,7 +98,6 @@
   --color-info-shadow: var(--ixia-info-shadow);
   --color-success-default: var(--ixia-success-default);
   --color-success-muted: var(--ixia-success-muted);
-  --color-success-subtle: var(--ixia-success-subtle);
   --color-success-on-default: var(--ixia-success-on-default);
   --color-success-container: var(--ixia-success-container);
   --color-success-container-low: var(--ixia-success-container-low);
@@ -116,7 +109,6 @@
   --color-success-shadow: var(--ixia-success-shadow);
   --color-warning-default: var(--ixia-warning-default);
   --color-warning-muted: var(--ixia-warning-muted);
-  --color-warning-subtle: var(--ixia-warning-subtle);
   --color-warning-on-default: var(--ixia-warning-on-default);
   --color-warning-container: var(--ixia-warning-container);
   --color-warning-container-low: var(--ixia-warning-container-low);
@@ -462,7 +454,6 @@
   --ixia-black: var(--black);
   --ixia-brand-default: light-dark(var(--orange-600), var(--orange-400));
   --ixia-brand-muted: light-dark(var(--orange-700), var(--orange-300));
-  --ixia-brand-subtle: light-dark(var(--orange-100), var(--orange-950));
   --ixia-brand-on-default: light-dark(var(--white), var(--neutral-950));
   --ixia-brand-container: light-dark(var(--orange-100), var(--orange-950));
   --ixia-brand-container-low: light-dark(var(--white), var(--neutral-950));
@@ -482,7 +473,6 @@
   --ixia-brand-gradient-subtle: linear-gradient(135deg, #df640029, #eeac4a1f, #f9dc8414);
   --ixia-accent-default: light-dark(var(--teal-600), var(--teal-400));
   --ixia-accent-muted: light-dark(var(--teal-700), var(--teal-300));
-  --ixia-accent-subtle: light-dark(var(--teal-100), var(--teal-950));
   --ixia-accent-on-default: light-dark(var(--white), var(--neutral-950));
   --ixia-accent-container: light-dark(var(--teal-100), var(--teal-950));
   --ixia-accent-container-low: light-dark(var(--white), var(--neutral-950));
@@ -494,12 +484,11 @@
   --ixia-accent-shadow: light-dark(#006d6540, #62d0c259);
   --ixia-neutral-default: light-dark(var(--neutral-900), var(--neutral-50));
   --ixia-neutral-muted: light-dark(var(--neutral-700), var(--neutral-200));
-  --ixia-neutral-subtle: light-dark(
+  --ixia-neutral-on-default: light-dark(var(--white), var(--neutral-950));
+  --ixia-neutral-container: light-dark(
     var(--neutral-200),
     color-mix(in srgb, var(--neutral-900) 20%, var(--neutral-800))
   );
-  --ixia-neutral-on-default: light-dark(var(--white), var(--neutral-950));
-  --ixia-neutral-container: light-dark(var(--neutral-100), var(--neutral-800));
   --ixia-neutral-container-low: light-dark(var(--neutral-100), var(--neutral-900));
   --ixia-neutral-container-high: light-dark(
     var(--neutral-300),
@@ -512,7 +501,6 @@
   --ixia-neutral-shadow: light-dark(#14110f2e, #00000059);
   --ixia-error-default: light-dark(var(--red-600), var(--red-400));
   --ixia-error-muted: light-dark(var(--red-700), var(--red-300));
-  --ixia-error-subtle: light-dark(var(--red-100), var(--red-950));
   --ixia-error-on-default: light-dark(var(--white), var(--neutral-950));
   --ixia-error-container: light-dark(var(--red-100), var(--red-950));
   --ixia-error-container-low: light-dark(var(--white), var(--neutral-950));
@@ -524,7 +512,6 @@
   --ixia-error-shadow: light-dark(#af0a2940, #ff9b9359);
   --ixia-info-default: light-dark(var(--blue-600), var(--blue-400));
   --ixia-info-muted: light-dark(var(--blue-700), var(--blue-300));
-  --ixia-info-subtle: light-dark(var(--blue-100), var(--blue-950));
   --ixia-info-on-default: light-dark(var(--white), var(--neutral-950));
   --ixia-info-container: light-dark(var(--blue-100), var(--blue-950));
   --ixia-info-container-low: light-dark(var(--white), var(--neutral-950));
@@ -536,7 +523,6 @@
   --ixia-info-shadow: light-dark(#2358b440, #8ebdff59);
   --ixia-success-default: light-dark(var(--green-600), var(--green-400));
   --ixia-success-muted: light-dark(var(--green-700), var(--green-300));
-  --ixia-success-subtle: light-dark(var(--green-100), var(--green-950));
   --ixia-success-on-default: light-dark(var(--white), var(--neutral-950));
   --ixia-success-container: light-dark(var(--green-100), var(--green-950));
   --ixia-success-container-low: light-dark(var(--white), var(--neutral-950));
@@ -548,7 +534,6 @@
   --ixia-success-shadow: light-dark(#00713140, #78d28d59);
   --ixia-warning-default: light-dark(var(--amber-600), var(--amber-400));
   --ixia-warning-muted: light-dark(var(--amber-700), var(--amber-300));
-  --ixia-warning-subtle: light-dark(var(--amber-100), var(--amber-950));
   --ixia-warning-on-default: light-dark(var(--white), var(--neutral-950));
   --ixia-warning-container: light-dark(var(--amber-100), var(--amber-950));
   --ixia-warning-container-low: light-dark(var(--white), var(--neutral-950));
@@ -695,6 +680,10 @@
     height: 100%;
   }
 }
+/* Centres text on cap-height/baseline instead of rounded font metrics, which drift at fluid sizes and zoom levels. */
+@utility text-box-trim {
+  text-box: trim-both cap alphabetic;
+}
 @utility shadow-* {
   box-shadow: --value(--shadow-*) var(--ixia-shadow);
 }

package/dist/switch/index.d.ts

@@ -0,0 +1,2 @@
+import { n as SwitchProps, t as Switch } from "../index-Db_QGr6S.js";
+export { Switch, type SwitchProps };

package/dist/switch/index.js

@@ -0,0 +1 @@
+export { t as Switch } from "../switch-DXHixGHe.js";

package/dist/switch-DXHixGHe.js

@@ -0,0 +1,23 @@
+import { t as cn } from "./cn-BDi0DfT5.js";
+import { t as Label } from "./label-BgpayDvN.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+// src/components/switch/switch.tsx
+function Switch$1({ children, className, ref, ...props }) {
+	return /* @__PURE__ */ jsxs(Label, {
+		className: "flex items-center gap-xs",
+		children: [/* @__PURE__ */ jsx(Switch.Root, {
+			className: cn("group relative flex h-lg w-2xl items-center rounded-full bg-surface-low bg-size-[6.5rem_100%] outline-2 outline-transparent transition-colors ease-[cubic-bezier(0.26,0.75,0.38,0.45)] before:absolute before:rounded-full hover:cursor-pointer hover:not-disabled:outline-accent-border-strong disabled:pointer-events-none disabled:opacity-50 data-checked:bg-accent-default data-disabled:pointer-events-none data-disabled:opacity-50", className),
+			ref,
+			...props,
+			children: /* @__PURE__ */ jsx(Switch.Thumb, { className: "size-md translate-x-[calc(0%+3px)] rounded-full shadow-2xs transition-transform duration-500 ease-[cubic-bezier(0.68,-0.55,0.27,1.55)] data-checked:translate-x-[calc(100%--7px)] data-checked:bg-accent-on-default data-unchecked:bg-white" })
+		}), children != void 0 && /* @__PURE__ */ jsx("span", {
+			"data-slot": "switch-label",
+			className: "leading-none text-box-trim",
+			children
+		})]
+	});
+}
+export { Switch$1 as t };
+
+//# sourceMappingURL=switch-DXHixGHe.js.map

package/dist/switch-DXHixGHe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-DXHixGHe.js","names":["Switch","BaseSwitch"],"sources":["../src/components/switch/switch.tsx"],"sourcesContent":["import { Switch as BaseSwitch } from '@base-ui/react/switch'\n\nimport { cn } from '@/utils/cn'\n\nimport { Label } from '../label'\nimport type { SwitchProps } from './switch.types'\n\nexport function Switch({ children, className, ref, ...props }: SwitchProps) {\n  return (\n    <Label className=\"flex items-center gap-xs\">\n      <BaseSwitch.Root\n        className={cn(\n          'group relative flex h-lg w-2xl items-center rounded-full bg-surface-low bg-size-[6.5rem_100%] outline-2 outline-transparent transition-colors ease-[cubic-bezier(0.26,0.75,0.38,0.45)] before:absolute before:rounded-full hover:cursor-pointer hover:not-disabled:outline-accent-border-strong disabled:pointer-events-none disabled:opacity-50 data-checked:bg-accent-default data-disabled:pointer-events-none data-disabled:opacity-50',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        <BaseSwitch.Thumb className=\"size-md translate-x-[calc(0%+3px)] rounded-full shadow-2xs transition-transform duration-500 ease-[cubic-bezier(0.68,-0.55,0.27,1.55)] data-checked:translate-x-[calc(100%--7px)] data-checked:bg-accent-on-default data-unchecked:bg-white\" />\n      </BaseSwitch.Root>\n      {children != undefined && (\n        <span data-slot=\"switch-label\" className=\"leading-none text-box-trim\">\n          {children}\n        </span>\n      )}\n    </Label>\n  )\n}\n"],"mappings":";;;;;AAOA,SAAgBA,SAAO,EAAE,UAAU,WAAW,KAAK,GAAG,SAAsB;CAC1E,OACE,qBAAC,OAAD;EAAO,WAAU;EAAjB,UAAA,CACE,oBAACC,OAAW,MAAZ;GACE,WAAW,GACT,8aACA,SACF;GACK;GACL,GAAI;GAEJ,UAAA,oBAACA,OAAW,OAAZ,EAAkB,WAAU,8OAA+O,CAAA;EAC5P,CAAA,GAChB,YAAY,KAAA,KACX,oBAAC,QAAD;GAAM,aAAU;GAAe,WAAU;GACtC;EACG,CAAA,CAEH;;AAEX"}