@mks2508/mks-ui 0.1.4 → 0.2.0

package/dist/react/ui/Select/index.js

@@ -0,0 +1,136 @@
+import { cn } from "../../lib/utils.js";
+import { selectStyles } from "./Select.styles.js";
+import "../../../react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { ArrowDown01Icon, ArrowUp01Icon, Tick02Icon, UnfoldMoreIcon } from "@hugeicons/core-free-icons";
+import { Select } from "@base-ui/react/select";
+
+//#region src/react/ui/Select/index.tsx
+/** Select — root component wrapping Base UI Select. */
+const Select$1 = Select.Root;
+/** SelectGroup — groups related select items. */
+function SelectGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Group, {
+		"data-slot": "select-group",
+		className: cn(selectStyles.group, className),
+		...props
+	});
+}
+/** SelectValue — displays the selected value text. */
+function SelectValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Value, {
+		"data-slot": "select-value",
+		className: cn(selectStyles.value, className),
+		...props
+	});
+}
+/**
+* SelectTrigger — button that opens the select dropdown.
+*
+* @param size - Trigger size: 'default' or 'sm'
+*
+* @example
+* ```tsx
+* <SelectTrigger>
+*   <SelectValue placeholder="Choose..." />
+* </SelectTrigger>
+* ```
+*/
+function SelectTrigger({ className, size = "default", children, slots, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		"data-slot": "select-trigger",
+		"data-size": size,
+		className: cn(selectStyles.trigger, slots?.trigger, className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select.Icon, { render: /* @__PURE__ */ jsx(HugeiconsIcon, {
+			icon: UnfoldMoreIcon,
+			strokeWidth: 2,
+			className: "text-muted-foreground size-4 pointer-events-none"
+		}) })]
+	});
+}
+/** SelectContent — dropdown popup content for the select. */
+function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, slots, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		alignItemWithTrigger,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsxs(Select.Popup, {
+			"data-slot": "select-content",
+			"data-align-trigger": alignItemWithTrigger,
+			className: cn(selectStyles.content, slots?.content, className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+				/* @__PURE__ */ jsx(Select.List, { children }),
+				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+			]
+		})
+	}) });
+}
+/** SelectLabel — label for a group of select items. */
+function SelectLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.GroupLabel, {
+		"data-slot": "select-label",
+		className: cn(selectStyles.label, className),
+		...props
+	});
+}
+/** SelectItem — a single selectable option. */
+function SelectItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		"data-slot": "select-item",
+		className: cn(selectStyles.item, className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Select.ItemText, {
+			className: "flex flex-1 gap-2 shrink-0 whitespace-nowrap",
+			children
+		}), /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+				icon: Tick02Icon,
+				strokeWidth: 2,
+				className: "pointer-events-none"
+			})
+		})]
+	});
+}
+/** SelectSeparator — visual divider between select items. */
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.Separator, {
+		"data-slot": "select-separator",
+		className: cn(selectStyles.separator, className),
+		...props
+	});
+}
+/** SelectScrollUpButton — scroll indicator for the top of the list. */
+function SelectScrollUpButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.ScrollUpArrow, {
+		"data-slot": "select-scroll-up-button",
+		className: cn(selectStyles.scrollButton, "top-0", className),
+		...props,
+		children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+			icon: ArrowUp01Icon,
+			strokeWidth: 2
+		})
+	});
+}
+/** SelectScrollDownButton — scroll indicator for the bottom of the list. */
+function SelectScrollDownButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Select.ScrollDownArrow, {
+		"data-slot": "select-scroll-down-button",
+		className: cn(selectStyles.scrollButton, "bottom-0", className),
+		...props,
+		children: /* @__PURE__ */ jsx(HugeiconsIcon, {
+			icon: ArrowDown01Icon,
+			strokeWidth: 2
+		})
+	});
+}
+
+//#endregion
+export { Select$1 as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/react/ui/Separator/Separator.styles.d.ts

@@ -0,0 +1,6 @@
+import type { StyleSlots } from '../../../core/types';
+type SeparatorSlot = 'root';
+declare const separatorStyles: StyleSlots<SeparatorSlot>;
+export { separatorStyles };
+export type { SeparatorSlot };
+//# sourceMappingURL=Separator.styles.d.ts.map

package/dist/react/ui/Separator/Separator.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Separator/Separator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,KAAK,aAAa,GAAG,MAAM,CAAC;AAE5B,QAAA,MAAM,eAAe,EAAE,UAAU,CAAC,aAAa,CAE9C,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/react/ui/Separator/Separator.styles.js

@@ -0,0 +1,5 @@
+//#region src/react/ui/Separator/Separator.styles.ts
+const separatorStyles = { root: "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch" };
+
+//#endregion
+export { separatorStyles };

package/dist/react/ui/Separator/Separator.types.d.ts

@@ -0,0 +1,9 @@
+import type { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+import type { SlotOverrides } from '../../../core/types';
+import type { SeparatorSlot } from './Separator.styles';
+/** Props for the Separator component. */
+interface ISeparatorProps extends SeparatorPrimitive.Props {
+    slots?: SlotOverrides<SeparatorSlot>;
+}
+export type { ISeparatorProps };
+//# sourceMappingURL=Separator.types.d.ts.map

package/dist/react/ui/Separator/Separator.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.types.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Separator/Separator.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAChF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,yCAAyC;AACzC,UAAU,eAAgB,SAAQ,kBAAkB,CAAC,KAAK;IACxD,KAAK,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CACtC;AAED,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/react/ui/Separator/index.d.ts

@@ -0,0 +1,16 @@
+import type { ISeparatorProps } from './Separator.types';
+/**
+ * Separator — visual divider wrapping Base UI Separator.
+ *
+ * @param orientation - 'horizontal' or 'vertical'
+ *
+ * @example
+ * ```tsx
+ * <Separator orientation="horizontal" />
+ * ```
+ */
+declare function Separator({ className, orientation, slots, ...props }: ISeparatorProps): import("react/jsx-runtime").JSX.Element;
+export { Separator };
+export type { ISeparatorProps } from './Separator.types';
+export type { SeparatorSlot } from './Separator.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/ui/Separator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Separator/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD;;;;;;;;;GASG;AACH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAA0B,EAC1B,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,2CASjB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/react/ui/Separator/index.js

@@ -0,0 +1,29 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { separatorStyles } from "./Separator.styles.js";
+import { jsx } from "react/jsx-runtime";
+import { Separator } from "@base-ui/react/separator";
+
+//#region src/react/ui/Separator/index.tsx
+/**
+* Separator — visual divider wrapping Base UI Separator.
+*
+* @param orientation - 'horizontal' or 'vertical'
+*
+* @example
+* ```tsx
+* <Separator orientation="horizontal" />
+* ```
+*/
+function Separator$1({ className, orientation = "horizontal", slots, ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "separator",
+		orientation,
+		className: cn(separatorStyles.root, slots?.root, className),
+		...props
+	});
+}
+
+//#endregion
+export { Separator$1 as Separator };

package/dist/react/ui/Switch/Switch.styles.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Style slots and CVA variants for the Switch component.
+ *
+ * @module @mks2508/mks-ui/react/ui/Switch/Switch.styles
+ */
+import type { StyleSlots } from '../../../core/types';
+import type { SwitchSlot } from './Switch.types';
+/**
+ * Default style slots for the Switch component.
+ * Each key maps to a visual region with its base Tailwind classes.
+ *
+ * - `root` - The outer switch track with rounded shape, background, and focus styles
+ * - `thumb` - The sliding thumb indicator with sizing and shape
+ * - `icon` - Icons positioned within the switch track or thumb
+ *
+ * @example
+ * ```typescript
+ * import { switchStyles } from './Switch.styles';
+ *
+ * // Access the root slot classes
+ * const rootClasses = switchStyles.root;
+ * // 'group inline-flex items-center ...'
+ * ```
+ */
+export declare const switchStyles: StyleSlots<SwitchSlot>;
+//# sourceMappingURL=Switch.styles.d.ts.map

package/dist/react/ui/Switch/Switch.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Switch/Switch.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,EAAE,UAAU,CAAC,UAAU,CAsB/C,CAAC"}

package/dist/react/ui/Switch/Switch.styles.js

@@ -0,0 +1,41 @@
+//#region src/react/ui/Switch/Switch.styles.ts
+/**
+* Default style slots for the Switch component.
+* Each key maps to a visual region with its base Tailwind classes.
+*
+* - `root` - The outer switch track with rounded shape, background, and focus styles
+* - `thumb` - The sliding thumb indicator with sizing and shape
+* - `icon` - Icons positioned within the switch track or thumb
+*
+* @example
+* ```typescript
+* import { switchStyles } from './Switch.styles';
+*
+* // Access the root slot classes
+* const rootClasses = switchStyles.root;
+* // 'group inline-flex items-center ...'
+* ```
+*/
+const switchStyles = {
+	root: [
+		"group inline-flex items-center",
+		"h-6 w-11 shrink-0",
+		"cursor-pointer rounded-full",
+		"border-2 border-transparent",
+		"bg-input",
+		"transition-colors",
+		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+		"disabled:cursor-not-allowed disabled:opacity-50",
+		"data-[checked]:bg-primary"
+	].join(" "),
+	thumb: [
+		"pointer-events-none block",
+		"size-5 rounded-full",
+		"bg-background",
+		"shadow-lg ring-0"
+	].join(" "),
+	icon: ["pointer-events-none", "flex items-center justify-center"].join(" ")
+};
+
+//#endregion
+export { switchStyles };

package/dist/react/ui/Switch/Switch.types.d.ts

@@ -0,0 +1,130 @@
+/**
+ * Type definitions for the Switch component.
+ *
+ * @module @mks2508/mks-ui/react/ui/Switch/Switch.types
+ */
+import type { Switch as SwitchPrimitives } from '@base-ui/react/switch';
+import type { HTMLMotionProps, LegacyAnimationControls, TargetAndTransition, VariantLabels } from 'motion/react';
+import type { IBaseConfig, SlotOverrides } from '../../../core/types';
+/**
+ * Available style slot names for the Switch component.
+ * Each slot maps to a visual region that can be customized via the `slots` prop.
+ *
+ * - `root` - The outer switch track/button element
+ * - `thumb` - The sliding thumb indicator
+ * - `icon` - Icons displayed at left/right/thumb positions
+ *
+ * @example
+ * ```tsx
+ * <Switch slots={{ root: 'bg-zinc-800', thumb: 'bg-white', icon: 'text-zinc-400' }} />
+ * ```
+ */
+export type SwitchSlot = 'root' | 'thumb' | 'icon';
+/**
+ * Position of an icon within the Switch component.
+ *
+ * - `left` - Shown when the switch is ON (checked)
+ * - `right` - Shown when the switch is OFF (unchecked)
+ * - `thumb` - Always visible on the thumb
+ */
+export type SwitchIconPosition = 'left' | 'right' | 'thumb';
+/**
+ * Internal context type for Switch state management.
+ * Shared between the Switch root and its child components via React context.
+ */
+export type SwitchContextType = {
+    /** Whether the switch is currently checked (on). */
+    isChecked: boolean;
+    /** Callback to update the checked state. */
+    setIsChecked: ISwitchProps['onCheckedChange'];
+    /** Whether the switch is currently being pressed. */
+    isPressed: boolean;
+    /** Callback to update the pressed state. */
+    setIsPressed: (isPressed: boolean) => void;
+};
+/**
+ * Configuration options for Switch behavior and animation.
+ * Extends the base config with switch-specific settings.
+ *
+ * @example
+ * ```tsx
+ * <Switch config={{ animation: { duration: 0.3 } }} />
+ * ```
+ */
+export interface ISwitchConfig extends IBaseConfig {
+    /**
+     * Spring stiffness for the thumb animation.
+     * @defaultValue 300
+     */
+    springStiffness?: number;
+    /**
+     * Spring damping for the thumb animation.
+     * @defaultValue 25
+     */
+    springDamping?: number;
+}
+/**
+ * Props for the Switch root component.
+ * Combines Base UI Switch.Root props (without `render`) with Motion button props,
+ * plus slot overrides and configuration.
+ *
+ * @example
+ * ```tsx
+ * <Switch
+ *   checked={isOn}
+ *   onCheckedChange={setIsOn}
+ *   slots={{ root: 'w-11 h-6 rounded-full' }}
+ * >
+ *   <SwitchThumb />
+ * </Switch>
+ * ```
+ */
+export type ISwitchProps = Omit<React.ComponentProps<typeof SwitchPrimitives.Root>, 'render'> & HTMLMotionProps<'button'> & {
+    /** Partial class overrides for each visual slot. */
+    slots?: SlotOverrides<SwitchSlot>;
+    /** Behavioral and animation configuration. */
+    config?: ISwitchConfig;
+};
+/**
+ * Props for the SwitchThumb sub-component.
+ * Combines Base UI Switch.Thumb props (without `render`) with Motion div props,
+ * plus an optional pressed animation target.
+ *
+ * @example
+ * ```tsx
+ * <SwitchThumb
+ *   pressedAnimation={{ width: 28 }}
+ *   className="size-5 rounded-full bg-white"
+ * />
+ * ```
+ */
+export type ISwitchThumbProps = Omit<React.ComponentProps<typeof SwitchPrimitives.Thumb>, 'render'> & HTMLMotionProps<'div'> & {
+    /**
+     * Animation target applied while the switch is being pressed.
+     * Can be a motion target object, variant labels, or a boolean.
+     */
+    pressedAnimation?: TargetAndTransition | VariantLabels | boolean | LegacyAnimationControls;
+    /** Partial class overrides for each visual slot. */
+    slots?: SlotOverrides<SwitchSlot>;
+};
+/**
+ * Props for the SwitchIcon sub-component.
+ * Renders an icon at a specified position within the switch track or thumb.
+ *
+ * @example
+ * ```tsx
+ * <SwitchIcon position="left">
+ *   <SunIcon className="size-3" />
+ * </SwitchIcon>
+ * <SwitchIcon position="right">
+ *   <MoonIcon className="size-3" />
+ * </SwitchIcon>
+ * ```
+ */
+export type ISwitchIconProps = HTMLMotionProps<'div'> & {
+    /** Where this icon is positioned within the switch. */
+    position: SwitchIconPosition;
+    /** Partial class overrides for each visual slot. */
+    slots?: SlotOverrides<SwitchSlot>;
+};
+//# sourceMappingURL=Switch.types.d.ts.map

package/dist/react/ui/Switch/Switch.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.types.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Switch/Switch.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,KAAK,EACV,eAAe,EACf,uBAAuB,EACvB,mBAAmB,EACnB,aAAa,EACd,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE/D;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnD;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAE5D;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,oDAAoD;IACpD,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,YAAY,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAC;IAC9C,qDAAqD;IACrD,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,YAAY,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,EAClD,QAAQ,CACT,GACC,eAAe,CAAC,QAAQ,CAAC,GAAG;IAC1B,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAClC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEJ;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,EACnD,QAAQ,CACT,GACC,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB;;;OAGG;IACH,gBAAgB,CAAC,EACb,mBAAmB,GACnB,aAAa,GACb,OAAO,GACP,uBAAuB,CAAC;IAC5B,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACnC,CAAC;AAEJ;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG;IACtD,uDAAuD;IACvD,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACnC,CAAC"}

package/dist/react/ui/Switch/index.d.ts

@@ -0,0 +1,79 @@
+import type { SwitchContextType, ISwitchProps, ISwitchThumbProps, ISwitchIconProps } from './Switch.types';
+declare const useSwitch: () => SwitchContextType;
+/**
+ * Switch root component with animated tap interactions.
+ *
+ * Wraps Base UI `Switch.Root` with a `motion.button` render element,
+ * providing tap start/end tracking for press animation support on the thumb.
+ * Supports both controlled and uncontrolled checked state via `useControlledState`.
+ *
+ * @param props - Switch props including Base UI root props, motion props, slots, and config
+ * @returns A switch button element with press tracking
+ *
+ * @example
+ * ```tsx
+ * <Switch
+ *   checked={isEnabled}
+ *   onCheckedChange={setIsEnabled}
+ *   slots={{ root: 'w-14 h-7 rounded-full bg-zinc-700' }}
+ * >
+ *   <SwitchThumb />
+ * </Switch>
+ * ```
+ */
+declare function Switch({ name, defaultChecked, checked, onCheckedChange, nativeButton, disabled, readOnly, required, inputRef, id, className, slots, config: _config, ...props }: ISwitchProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * SwitchThumb renders the sliding thumb indicator with spring-based layout animation.
+ *
+ * Uses Motion `layout` for smooth position transitions between checked/unchecked states.
+ * Optionally accepts a `pressedAnimation` target applied while the switch is being pressed.
+ *
+ * @param props - Thumb props including motion props, pressed animation, and slot overrides
+ * @returns An animated thumb div element
+ *
+ * @example
+ * ```tsx
+ * <SwitchThumb
+ *   pressedAnimation={{ width: 28 }}
+ *   slots={{ thumb: 'bg-white shadow-md' }}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Default spring animation
+ * <SwitchThumb />
+ * ```
+ */
+declare function SwitchThumb({ pressedAnimation, transition, className, slots, ...props }: ISwitchThumbProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * SwitchIcon renders an animated icon at a specified position within the switch.
+ *
+ * - `left` position: visible when the switch is ON (checked)
+ * - `right` position: visible when the switch is OFF (unchecked)
+ * - `thumb` position: always visible on the thumb element
+ *
+ * Uses spring-based scale and opacity transitions for smooth show/hide animations.
+ *
+ * @param props - Icon props including position, motion props, and slot overrides
+ * @returns An animated icon container div
+ *
+ * @example
+ * ```tsx
+ * <SwitchIcon position="left">
+ *   <CheckIcon className="size-3 text-white" />
+ * </SwitchIcon>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <SwitchIcon position="thumb">
+ *   <GripIcon className="size-2.5 text-zinc-400" />
+ * </SwitchIcon>
+ * ```
+ */
+declare function SwitchIcon({ position, transition, className, slots, ...props }: ISwitchIconProps): import("react/jsx-runtime").JSX.Element;
+export { Switch, SwitchThumb, SwitchIcon, useSwitch, };
+export type { ISwitchProps, ISwitchThumbProps, ISwitchIconProps, ISwitchConfig, SwitchContextType, SwitchIconPosition, SwitchSlot, } from './Switch.types';
+export { switchStyles } from './Switch.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/ui/Switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Switch/index.tsx"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EACV,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AAExB,QAAA,MAAuB,SAAS,yBACsB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,MAAM,CAAC,EACd,IAAI,EACJ,cAAc,EACd,OAAO,EACP,eAAe,EACf,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,EAAE,EACF,SAAS,EACT,KAAK,EACL,MAAM,EAAE,OAAO,EACf,GAAG,KAAK,EACT,EAAE,YAAY,2CAsCd;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iBAAS,WAAW,CAAC,EACnB,gBAAgB,EAChB,UAA4D,EAC5D,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAkBnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,UAA0C,EAC1C,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAmBlB;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,SAAS,GACV,CAAC;AAGF,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,UAAU,GACX,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}