moduix 0.11.0 → 0.11.2

package/dist/components/Stack/Stack.css

@@ -0,0 +1,13 @@
+@layer ui.components {
+  .PtMr7W_root {
+    flex: var(--stack-flex, initial);
+    flex-direction: var(--stack-direction-mobile, column);
+    display: flex;
+  }
+
+  @media (width >= 640px) {
+    .PtMr7W_root {
+      flex-direction: var(--stack-direction-desktop, var(--stack-direction-mobile, column));
+    }
+  }
+}

package/dist/components/Stack/Stack.d.ts

@@ -1,15 +1,29 @@
-import { ComponentPropsWithoutRef, CSSProperties, ElementType } from 'react';
+import { CSSProperties, ComponentPropsWithoutRef, ElementType } from "react";
+
+//#region src/components/Stack/Stack.d.ts
 type StackDirection = 'row' | 'column';
-declare function Stack({ as: Root, className, style, direction, gap, align, justify, wrap, fill, ...props }: ComponentPropsWithoutRef<'div'> & {
-    as?: ElementType;
-    direction?: StackDirection | {
-        mobile?: StackDirection;
-        desktop?: StackDirection;
-    };
-    gap?: number | string;
-    align?: CSSProperties['alignItems'];
-    justify?: CSSProperties['justifyContent'];
-    wrap?: CSSProperties['flexWrap'];
-    fill?: boolean;
+declare function Stack({
+  as: Root,
+  className,
+  style,
+  direction,
+  gap,
+  align,
+  justify,
+  wrap,
+  fill,
+  ...props
+}: ComponentPropsWithoutRef<'div'> & {
+  as?: ElementType;
+  direction?: StackDirection | {
+    mobile?: StackDirection;
+    desktop?: StackDirection;
+  };
+  gap?: number | string;
+  align?: CSSProperties['alignItems'];
+  justify?: CSSProperties['justifyContent'];
+  wrap?: CSSProperties['flexWrap'];
+  fill?: boolean;
 }): import("react").JSX.Element;
-export { Stack };
+//#endregion
+export { Stack };

package/dist/components/Stack/Stack.js

@@ -0,0 +1,27 @@
+import Stack_module_default from "./Stack.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/components/Stack/Stack.tsx
+function Stack({ as: Root = "div", className, style, direction, gap, align, justify, wrap, fill, ...props }) {
+	const responsiveDirection = typeof direction === "string" ? {
+		mobile: direction,
+		desktop: direction
+	} : direction;
+	return /* @__PURE__ */ jsx(Root, {
+		...props,
+		"data-slot": "stack-root",
+		className: clsx(Stack_module_default.root, className),
+		style: {
+			"--stack-direction-desktop": responsiveDirection?.desktop ?? responsiveDirection?.mobile ?? "column",
+			"--stack-direction-mobile": responsiveDirection?.mobile ?? responsiveDirection?.desktop ?? "column",
+			"--stack-flex": fill ? "1 1 0" : "initial",
+			gap,
+			alignItems: align,
+			justifyContent: justify,
+			flexWrap: wrap,
+			...style
+		}
+	});
+}
+//#endregion
+export { Stack };

package/dist/components/Stack/Stack.module.js

@@ -0,0 +1,5 @@
+import './Stack.css';
+//#region src/components/Stack/Stack.module.css
+var Stack_module_default = { "root": "PtMr7W_root" };
+//#endregion
+export { Stack_module_default as default };

package/dist/components/Stack/index.d.ts

@@ -1 +1 @@
-export * from './Stack';
+import { Stack } from "./Stack.js";

package/dist/components/Stepper/Stepper.css

@@ -0,0 +1,174 @@
+@layer ui.components {
+  .-W7elW_root {
+    width: 100%;
+    color: var(--stepper-color, var(--color-foreground));
+  }
+
+  .-W7elW_list {
+    gap: var(--stepper-gap, var(--spacing-4));
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+
+    &[data-orientation="vertical"] {
+      flex-direction: column;
+    }
+  }
+
+  .-W7elW_item {
+    flex: 1 1 0;
+    min-width: 0;
+    position: relative;
+
+    &[data-orientation="vertical"] {
+      flex: none;
+    }
+
+    &:not(:last-child):after {
+      content: "";
+      background-color: var(--stepper-connector-color, var(--color-border));
+      pointer-events: none;
+      position: absolute;
+    }
+
+    &[data-state="completed"]:after {
+      background-color: var(--stepper-connector-color-active, var(--color-foreground));
+    }
+
+    &[data-orientation="horizontal"]:not(:last-child):after {
+      top: calc(var(--stepper-indicator-size, 2rem) / 2);
+      left: calc(var(--stepper-indicator-size, 2rem) + var(--stepper-connector-inset, .5rem));
+      right: calc(var(--stepper-gap, var(--spacing-4)) / -1);
+      height: var(--stepper-connector-thickness, var(--border-width-sm));
+      translate: 0 -50%;
+    }
+
+    &[data-orientation="vertical"]:not(:last-child):after {
+      top: calc(var(--stepper-indicator-size, 2rem) + var(--stepper-connector-inset, .5rem));
+      bottom: calc(var(--stepper-gap, var(--spacing-4)) / -1);
+      left: calc(var(--stepper-indicator-size, 2rem) / 2);
+      width: var(--stepper-connector-thickness, var(--border-width-sm));
+      translate: -50%;
+    }
+  }
+
+  .-W7elW_trigger {
+    z-index: 1;
+    width: 100%;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    background: none;
+    border: 0;
+    outline: none;
+    padding: 0;
+    text-decoration: none;
+    display: grid;
+    position: relative;
+
+    &[data-orientation="horizontal"] {
+      gap: var(--stepper-content-gap, .5rem);
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    &[data-orientation="vertical"] {
+      align-items: start;
+      gap: var(--stepper-trigger-gap, var(--spacing-3));
+      grid-template-columns: auto minmax(0, 1fr);
+    }
+
+    &:where(button) {
+      cursor: pointer;
+    }
+
+    &:focus-visible .-W7elW_indicator {
+      outline: var(--stepper-focus-ring-width, var(--border-width-sm)) solid
+        var(--stepper-focus-ring-color, var(--color-ring));
+      outline-offset: var(--stepper-focus-ring-offset, 2px);
+    }
+
+    &[aria-disabled="true"], &[data-disabled] {
+      opacity: var(--stepper-disabled-opacity, var(--opacity-disabled));
+      cursor: default;
+      pointer-events: none;
+    }
+
+    @media (hover: hover) {
+      &:not([aria-disabled="true"]):not([data-disabled]):hover .-W7elW_indicator[data-state="inactive"] {
+        border-color: var(--stepper-indicator-border-color-hover, var(--stepper-indicator-border-color-current, var(--color-foreground)));
+        color: var(--stepper-indicator-color-hover, var(--stepper-indicator-color-current, var(--color-foreground)));
+      }
+
+      &:not([aria-disabled="true"]):not([data-disabled]):hover .-W7elW_title {
+        color: var(--stepper-title-color-hover, var(--color-foreground));
+      }
+    }
+  }
+
+  .-W7elW_indicator {
+    box-sizing: border-box;
+    width: var(--stepper-indicator-size, 2rem);
+    height: var(--stepper-indicator-size, 2rem);
+    border: var(--stepper-indicator-border-width, var(--border-width-sm)) solid
+      var(--stepper-indicator-border-color, var(--color-border));
+    border-radius: var(--stepper-indicator-radius, var(--radius-full));
+    background-color: var(--stepper-indicator-bg, var(--color-background));
+    color: var(--stepper-indicator-color, var(--color-muted-foreground));
+    font-size: var(--stepper-indicator-font-size, var(--text-sm));
+    font-weight: var(--stepper-indicator-font-weight, var(--weight-semibold));
+    transition: background-color var(--transition-default),
+      border-color var(--transition-default),
+      color var(--transition-default),
+      opacity var(--transition-default);
+    justify-content: center;
+    align-items: center;
+    line-height: 1;
+    display: inline-flex;
+
+    & :where(svg) {
+      width: var(--stepper-indicator-icon-size, .875rem);
+      height: var(--stepper-indicator-icon-size, .875rem);
+    }
+
+    &[data-state="current"] {
+      border-color: var(--stepper-indicator-border-color-current, var(--stepper-indicator-border-color-completed, var(--color-foreground)));
+      background-color: var(--stepper-indicator-bg-current, var(--stepper-indicator-bg));
+      color: var(--stepper-indicator-color-current, var(--color-foreground));
+    }
+
+    &[data-state="completed"] {
+      border-color: var(--stepper-indicator-border-color-completed, var(--color-foreground));
+      background-color: var(--stepper-indicator-bg-completed, var(--color-foreground));
+      color: var(--stepper-indicator-color-completed, var(--color-background));
+    }
+  }
+
+  .-W7elW_content {
+    gap: var(--stepper-content-gap, .25rem);
+    min-width: 0;
+    display: grid;
+  }
+
+  .-W7elW_title {
+    color: var(--stepper-title-color, currentColor);
+    font-size: var(--stepper-title-font-size, var(--text-sm));
+    font-weight: var(--stepper-title-font-weight, var(--weight-medium));
+    line-height: var(--stepper-title-line-height, var(--line-height-text-sm));
+
+    &[data-state="current"] {
+      color: var(--stepper-title-color-current, var(--stepper-title-color, currentColor));
+    }
+  }
+
+  .-W7elW_description {
+    color: var(--stepper-description-color, var(--color-muted-foreground));
+    font-size: var(--stepper-description-font-size, var(--text-xs));
+    line-height: var(--stepper-description-line-height, var(--line-height-text-xs));
+
+    &[data-state="current"] {
+      color: var(--stepper-description-color-current, var(--stepper-description-color, var(--color-muted-foreground)));
+    }
+  }
+}

package/dist/components/Stepper/Stepper.d.ts

@@ -1,20 +1,59 @@
-import { useRender } from '@base-ui/react/use-render';
-import { ComponentProps } from 'react';
+import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/Stepper/Stepper.d.ts
 type StepperOrientation = 'horizontal' | 'vertical';
 type StepperStatus = 'inactive' | 'current' | 'completed';
-declare function Stepper({ className, currentStep, orientation, 'aria-label': ariaLabel, ...props }: ComponentProps<'nav'> & {
-    currentStep?: number;
-    orientation?: StepperOrientation;
+declare function Stepper({
+  className,
+  currentStep,
+  orientation,
+  'aria-label': ariaLabel,
+  ...props
+}: ComponentProps<'nav'> & {
+  currentStep?: number;
+  orientation?: StepperOrientation;
 }): import("react").JSX.Element;
-declare function StepperList({ className, ...props }: ComponentProps<'ol'>): import("react").JSX.Element;
-declare function StepperItem({ className, status, step, 'aria-current': ariaCurrent, ...props }: ComponentProps<'li'> & {
-    status?: StepperStatus;
-    step: number;
+declare function StepperList({
+  className,
+  ...props
+}: ComponentProps<'ol'>): import("react").JSX.Element;
+declare function StepperItem({
+  className,
+  status,
+  step,
+  'aria-current': ariaCurrent,
+  ...props
+}: ComponentProps<'li'> & {
+  status?: StepperStatus;
+  step: number;
 }): import("react").JSX.Element;
-declare function StepperTrigger({ className, disabled, render, tabIndex, type, 'aria-current': ariaCurrent, 'aria-disabled': ariaDisabled, ...props }: useRender.ComponentProps<'button'>): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
-declare function StepperIndicator({ children, className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function StepperContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function StepperTitle({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function StepperDescription({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-export { Stepper, StepperList, StepperItem, StepperTrigger, StepperIndicator, StepperContent, StepperTitle, StepperDescription, };
-export type { StepperOrientation, StepperStatus };
+declare function StepperTrigger({
+  className,
+  disabled,
+  render,
+  tabIndex,
+  type,
+  'aria-current': ariaCurrent,
+  'aria-disabled': ariaDisabled,
+  ...props
+}: useRender.ComponentProps<'button'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function StepperIndicator({
+  children,
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function StepperContent({
+  className,
+  ...props
+}: ComponentProps<'div'>): import("react").JSX.Element;
+declare function StepperTitle({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+declare function StepperDescription({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+//#endregion
+export { Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, type StepperOrientation, type StepperStatus, StepperTitle, StepperTrigger };

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,131 @@
+import { CheckIcon } from "../../icons/ui/Icons.js";
+import Stepper_module_default from "./Stepper.module.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { createContext, useContext, useMemo } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/Stepper/Stepper.tsx
+const StepperContext = createContext({
+	currentStep: void 0,
+	orientation: "horizontal"
+});
+const StepperItemContext = createContext(null);
+const getSafeStep = (step) => Math.max(1, Math.floor(step));
+function resolveStatus({ currentStep, status, step }) {
+	if (status != null) return status;
+	if (currentStep == null) return "inactive";
+	if (step < currentStep) return "completed";
+	if (step === currentStep) return "current";
+	return "inactive";
+}
+function Stepper({ className, currentStep, orientation = "horizontal", "aria-label": ariaLabel = "Steps", ...props }) {
+	const safeCurrentStep = currentStep == null ? void 0 : getSafeStep(currentStep);
+	const contextValue = useMemo(() => ({
+		currentStep: safeCurrentStep,
+		orientation
+	}), [orientation, safeCurrentStep]);
+	return /* @__PURE__ */ jsx(StepperContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("nav", {
+			"data-slot": "stepper-root",
+			"data-orientation": orientation,
+			"aria-label": ariaLabel,
+			className: clsx(Stepper_module_default.root, className),
+			...props
+		})
+	});
+}
+function StepperList({ className, ...props }) {
+	const { orientation } = useContext(StepperContext);
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "stepper-list",
+		"data-orientation": orientation,
+		className: clsx(Stepper_module_default.list, className),
+		...props
+	});
+}
+function StepperItem({ className, status, step, "aria-current": ariaCurrent, ...props }) {
+	const { currentStep, orientation } = useContext(StepperContext);
+	const safeStep = getSafeStep(step);
+	const resolvedStatus = resolveStatus({
+		currentStep,
+		status,
+		step: safeStep
+	});
+	const contextValue = useMemo(() => ({
+		status: resolvedStatus,
+		step: safeStep
+	}), [resolvedStatus, safeStep]);
+	return /* @__PURE__ */ jsx(StepperItemContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("li", {
+			"data-slot": "stepper-item",
+			"data-orientation": orientation,
+			"data-state": resolvedStatus,
+			"aria-current": ariaCurrent ?? (resolvedStatus === "current" ? "step" : void 0),
+			className: clsx(Stepper_module_default.item, className),
+			...props
+		})
+	});
+}
+function StepperTrigger({ className, disabled, render, tabIndex, type, "aria-current": ariaCurrent, "aria-disabled": ariaDisabled, ...props }) {
+	const { orientation } = useContext(StepperContext);
+	const item = useContext(StepperItemContext);
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: {
+			...props,
+			"aria-current": ariaCurrent ?? (item?.status === "current" ? "step" : void 0),
+			"aria-disabled": ariaDisabled ?? (disabled ? true : void 0),
+			"data-disabled": disabled ? "" : void 0,
+			"data-orientation": orientation,
+			"data-slot": "stepper-trigger",
+			"data-state": item?.status,
+			className: clsx(Stepper_module_default.trigger, className),
+			disabled: render == null ? disabled : void 0,
+			tabIndex: disabled && render != null ? -1 : tabIndex,
+			type: render == null ? type ?? "button" : type
+		}
+	});
+}
+function StepperIndicator({ children, className, ...props }) {
+	const { orientation } = useContext(StepperContext);
+	const item = useContext(StepperItemContext);
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "stepper-indicator",
+		"data-orientation": orientation,
+		"data-state": item?.status,
+		className: clsx(Stepper_module_default.indicator, className),
+		...props,
+		children: children ?? (item?.status === "completed" ? /* @__PURE__ */ jsx(CheckIcon, {}) : item?.step)
+	});
+}
+function StepperContent({ className, ...props }) {
+	const { orientation } = useContext(StepperContext);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "stepper-content",
+		"data-orientation": orientation,
+		"data-state": useContext(StepperItemContext)?.status,
+		className: clsx(Stepper_module_default.content, className),
+		...props
+	});
+}
+function StepperTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "stepper-title",
+		"data-state": useContext(StepperItemContext)?.status,
+		className: clsx(Stepper_module_default.title, className),
+		...props
+	});
+}
+function StepperDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "stepper-description",
+		"data-state": useContext(StepperItemContext)?.status,
+		className: clsx(Stepper_module_default.description, className),
+		...props
+	});
+}
+//#endregion
+export { Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperTitle, StepperTrigger };

package/dist/components/Stepper/Stepper.module.js

@@ -0,0 +1,14 @@
+import './Stepper.css';
+//#region src/components/Stepper/Stepper.module.css
+var Stepper_module_default = {
+	"content": "-W7elW_content",
+	"description": "-W7elW_description",
+	"indicator": "-W7elW_indicator",
+	"item": "-W7elW_item",
+	"list": "-W7elW_list",
+	"root": "-W7elW_root",
+	"title": "-W7elW_title",
+	"trigger": "-W7elW_trigger"
+};
+//#endregion
+export { Stepper_module_default as default };

package/dist/components/Stepper/index.d.ts

@@ -1,2 +1 @@
-export { Stepper, StepperList, StepperItem, StepperTrigger, StepperIndicator, StepperContent, StepperTitle, StepperDescription, } from './Stepper';
-export type { StepperOrientation, StepperStatus } from './Stepper';
+import { Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperOrientation, StepperStatus, StepperTitle, StepperTrigger } from "./Stepper.js";

package/dist/components/Switch/Switch.css

@@ -0,0 +1,138 @@
+@layer ui.components {
+  .klbdca_field {
+    align-items: center;
+    gap: var(--switch-gap, var(--spacing-2));
+    vertical-align: middle;
+    cursor: pointer;
+    display: inline-flex;
+
+    &:has(.klbdca_root[data-disabled]), &:has(.klbdca_root[data-readonly]) {
+      cursor: default;
+    }
+  }
+
+  .klbdca_root {
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    appearance: none;
+    width: var(--switch-width, 2.5rem);
+    height: var(--switch-height, 1.5rem);
+    --switch-thumb-translate-default: calc(var(--switch-width, 2.5rem) - var(--switch-thumb-size, 1.125rem) -
+        var(--switch-padding, .125rem) - var(--switch-padding, .125rem) -
+        var(--switch-border-width, var(--border-width-sm)) -
+        var(--switch-border-width, var(--border-width-sm)));
+    border: var(--switch-border-width, var(--border-width-sm)) solid
+      var(--switch-border-color, var(--color-border));
+    border-radius: var(--switch-radius, var(--radius-full));
+    padding: var(--switch-padding, .125rem);
+    background-color: var(--switch-bg, var(--color-muted));
+    user-select: none;
+    cursor: pointer;
+    transition: background-color var(--switch-transition, var(--transition-default)),
+      border-color var(--switch-transition, var(--transition-default)),
+      opacity var(--switch-transition, var(--transition-default));
+    outline: 0;
+    flex-shrink: 0;
+    align-items: center;
+    margin: 0;
+    line-height: 0;
+    display: inline-flex;
+    position: relative;
+
+    &[data-checked] {
+      border-color: var(--switch-border-color-checked, var(--color-primary));
+      background-color: var(--switch-bg-checked, var(--color-primary));
+    }
+
+    &:focus-visible {
+      outline: var(--switch-focus-ring-width, var(--border-width-sm)) solid
+        var(--switch-focus-ring-color, var(--color-ring));
+      outline-offset: var(--switch-focus-ring-offset, var(--border-width-sm));
+    }
+
+    @media (hover: hover) {
+      &[data-unchecked]:not([data-readonly]):hover {
+        background-color: var(--switch-bg-hover, var(--color-accent));
+      }
+
+      &[data-checked]:not([data-readonly]):hover {
+        background-color: var(--switch-bg-checked-hover, var(--switch-bg-checked, var(--color-primary)));
+      }
+    }
+
+    &[data-disabled], &[data-readonly] {
+      cursor: default;
+    }
+
+    &[data-disabled] {
+      opacity: var(--switch-disabled-opacity, var(--opacity-disabled));
+      pointer-events: none;
+    }
+
+    &[data-size="xs"] {
+      --switch-width: var(--switch-width-xs, 1.75rem);
+      --switch-height: var(--switch-height-xs, 1rem);
+      --switch-thumb-size: var(--switch-thumb-size-xs, .625rem);
+    }
+
+    &[data-size="sm"] {
+      --switch-width: var(--switch-width-sm, 2rem);
+      --switch-height: var(--switch-height-sm, 1.25rem);
+      --switch-thumb-size: var(--switch-thumb-size-sm, .875rem);
+    }
+
+    &[data-size="md"] {
+      --switch-width: var(--switch-width-md, 2.5rem);
+      --switch-height: var(--switch-height-md, 1.5rem);
+      --switch-thumb-size: var(--switch-thumb-size-md, 1.125rem);
+    }
+
+    &[data-size="lg"] {
+      --switch-width: var(--switch-width-lg, 3rem);
+      --switch-height: var(--switch-height-lg, 1.75rem);
+      --switch-thumb-size: var(--switch-thumb-size-lg, 1.375rem);
+    }
+
+    &[data-size="xl"] {
+      --switch-width: var(--switch-width-xl, 3.5rem);
+      --switch-height: var(--switch-height-xl, 2rem);
+      --switch-thumb-size: var(--switch-thumb-size-xl, 1.625rem);
+    }
+  }
+
+  .klbdca_thumb {
+    width: var(--switch-thumb-size, 1.125rem);
+    height: var(--switch-thumb-size, 1.125rem);
+    border: var(--switch-thumb-border-width, 0) solid var(--switch-thumb-border-color, transparent);
+    border-radius: var(--switch-thumb-radius, var(--radius-full));
+    background-color: var(--switch-thumb-bg-unchecked, var(--switch-thumb-bg, var(--color-background)));
+    color: var(--switch-thumb-color-unchecked, var(--switch-thumb-color, var(--color-muted)));
+    box-shadow: var(--switch-thumb-shadow, var(--shadow-sm));
+    transition: transform var(--switch-thumb-transition, var(--switch-transition, var(--transition-default))),
+      background-color var(--switch-transition, var(--transition-default)),
+      color var(--switch-transition, var(--transition-default));
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    transform: translateX(0);
+
+    &[data-checked] {
+      background-color: var(--switch-thumb-bg-checked, var(--switch-thumb-bg, var(--color-primary-foreground)));
+      color: var(--switch-thumb-color-checked, var(--switch-thumb-color, var(--color-primary)));
+      transform: translateX(var(--switch-thumb-translate, var(--switch-thumb-translate-default)));
+    }
+
+    & > svg {
+      width: var(--switch-thumb-icon-size, 65%);
+      height: var(--switch-thumb-icon-size, 65%);
+      flex-shrink: 0;
+    }
+  }
+
+  .klbdca_label {
+    color: var(--switch-label-color, var(--color-foreground));
+    font-size: var(--switch-label-font-size, var(--text-sm));
+    font-weight: var(--switch-label-font-weight, var(--weight-medium));
+    line-height: var(--switch-label-line-height, var(--line-height-text-sm));
+  }
+}

package/dist/components/Switch/Switch.d.ts

@@ -1,10 +1,22 @@
-import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
-import { ComponentProps } from 'react';
+import { ComponentProps } from "react";
+import { Switch } from "@base-ui/react/switch";
+
+//#region src/components/Switch/Switch.d.ts
 type SwitchSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-declare const Switch: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').SwitchRootProps & {
-    size?: SwitchSize;
-}, "ref"> & import('react').RefAttributes<HTMLElement>>;
-declare function SwitchThumb({ className, ...props }: SwitchPrimitive.Thumb.Props): import("react").JSX.Element;
-declare function SwitchField({ className, ...props }: ComponentProps<'label'>): import("react").JSX.Element;
-declare function SwitchLabel({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-export { Switch, SwitchThumb, SwitchField, SwitchLabel };
+declare const Switch$1: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").SwitchRootProps & {
+  size?: SwitchSize;
+}, "ref"> & import("react").RefAttributes<HTMLElement>>;
+declare function SwitchThumb({
+  className,
+  ...props
+}: Switch.Thumb.Props): import("react").JSX.Element;
+declare function SwitchField({
+  className,
+  ...props
+}: ComponentProps<'label'>): import("react").JSX.Element;
+declare function SwitchLabel({
+  className,
+  ...props
+}: ComponentProps<'span'>): import("react").JSX.Element;
+//#endregion
+export { Switch$1 as Switch, SwitchField, SwitchLabel, SwitchThumb };