@mks2508/mks-ui 0.2.0 → 0.3.1

package/dist/react-ui/ui/Switch/index.js

@@ -0,0 +1,199 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { getStrictContext } from "../../lib/get-strict-context.js";
+import { useControlledState } from "../../hooks/State/UseControlledState.js";
+import { switchStyles } from "./Switch.styles.js";
+import * as React$1 from "react";
+import { motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+
+//#region src/react-ui/ui/Switch/index.tsx
+/**
+* Switch component with animated thumb and icon transitions.
+*
+* Built on Base UI Switch primitives with Motion animations for
+* spring-based thumb movement, press interactions, and icon visibility.
+*
+* @module @mks2508/mks-ui/react/ui/Switch
+*
+* @example
+* ```tsx
+* import { Switch, SwitchThumb } from '@mks2508/mks-ui';
+*
+* function MySwitch() {
+*   const [checked, setChecked] = useState(false);
+*   return (
+*     <Switch checked={checked} onCheckedChange={setChecked}>
+*       <SwitchThumb />
+*     </Switch>
+*   );
+* }
+* ```
+*
+* @example
+* ```tsx
+* // With icons
+* import { Switch, SwitchThumb, SwitchIcon } from '@mks2508/mks-ui';
+*
+* <Switch checked={darkMode} onCheckedChange={setDarkMode}>
+*   <SwitchIcon position="left"><SunIcon /></SwitchIcon>
+*   <SwitchThumb />
+*   <SwitchIcon position="right"><MoonIcon /></SwitchIcon>
+* </Switch>
+* ```
+*/
+const [SwitchProvider, useSwitch] = getStrictContext("SwitchContext");
+/**
+* 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>
+* ```
+*/
+function Switch$1({ name, defaultChecked, checked, onCheckedChange, nativeButton, disabled, readOnly, required, inputRef, id, className, slots, config: _config, ...props }) {
+	const [isPressed, setIsPressed] = React$1.useState(false);
+	const [isChecked, setIsChecked] = useControlledState({
+		value: checked,
+		defaultValue: defaultChecked,
+		onChange: onCheckedChange
+	});
+	return /* @__PURE__ */ jsx(SwitchProvider, {
+		value: {
+			isChecked,
+			setIsChecked,
+			isPressed,
+			setIsPressed
+		},
+		children: /* @__PURE__ */ jsx(Switch.Root, {
+			name,
+			defaultChecked,
+			checked,
+			onCheckedChange: setIsChecked,
+			nativeButton,
+			disabled,
+			readOnly,
+			required,
+			inputRef,
+			id,
+			render: /* @__PURE__ */ jsx(motion.button, {
+				"data-slot": "switch",
+				whileTap: "tap",
+				initial: false,
+				onTapStart: () => setIsPressed(true),
+				onTapCancel: () => setIsPressed(false),
+				onTap: () => setIsPressed(false),
+				className: cn(switchStyles.root, slots?.root, className),
+				...props
+			})
+		})
+	});
+}
+/**
+* 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 />
+* ```
+*/
+function SwitchThumb({ pressedAnimation, transition = {
+	type: "spring",
+	stiffness: 300,
+	damping: 25
+}, className, slots, ...props }) {
+	const { isPressed } = useSwitch();
+	return /* @__PURE__ */ jsx(Switch.Thumb, { render: /* @__PURE__ */ jsx(motion.div, {
+		"data-slot": "switch-thumb",
+		whileTap: "tab",
+		layout: true,
+		transition,
+		animate: isPressed ? pressedAnimation : void 0,
+		className: cn(switchStyles.thumb, slots?.thumb, className),
+		...props
+	}) });
+}
+/**
+* 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>
+* ```
+*/
+function SwitchIcon({ position, transition = {
+	type: "spring",
+	bounce: 0
+}, className, slots, ...props }) {
+	const { isChecked } = useSwitch();
+	const isAnimated = React$1.useMemo(() => {
+		if (position === "right") return !isChecked;
+		if (position === "left") return isChecked;
+		if (position === "thumb") return true;
+		return false;
+	}, [position, isChecked]);
+	return /* @__PURE__ */ jsx(motion.div, {
+		"data-slot": `switch-${position}-icon`,
+		animate: isAnimated ? {
+			scale: 1,
+			opacity: 1
+		} : {
+			scale: 0,
+			opacity: 0
+		},
+		transition,
+		className: cn(switchStyles.icon, slots?.icon, className),
+		...props
+	});
+}
+
+//#endregion
+export { Switch$1 as Switch, SwitchIcon, SwitchThumb, useSwitch };

package/dist/react-ui/ui/Tabs/Tabs.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,QAAQ,GAChB,MAAM,GACN,MAAM,GACN,KAAK,GACL,OAAO,GACP,QAAQ,GACR,WAAW,GACX,eAAe,CAAC;AAEpB;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,EAAE,UAAU,CAAC,QAAQ,CAQ3C,CAAC"}

package/dist/react-ui/ui/Tabs/Tabs.styles.js

@@ -0,0 +1,26 @@
+//#region src/react-ui/ui/Tabs/Tabs.styles.ts
+/**
+* Default style map for every Tabs slot.
+*
+* Base classes are intentionally minimal so consumers can fully
+* control the visual appearance through `slots` overrides.
+* No colors are hardcoded -- all visuals come from consumer styles.
+*
+* @example
+* ```typescript
+* import { tabsStyles } from './Tabs.styles';
+* cn(tabsStyles.list, slots?.list, className);
+* ```
+*/
+const tabsStyles = {
+	root: "",
+	list: "",
+	tab: "",
+	panel: "",
+	panels: "",
+	highlight: "",
+	highlightItem: ""
+};
+
+//#endregion
+export { tabsStyles };

package/dist/react-ui/ui/Tabs/Tabs.types.d.ts

@@ -0,0 +1,201 @@
+/**
+ * Type definitions for the Tabs component.
+ *
+ * All interfaces use the IPrefix convention. Type aliases do not.
+ * Supports two panel modes: auto-height (animated resize) and layout (motion layout).
+ *
+ * @module @mks2508/mks-ui/react/ui/Tabs/Tabs.types
+ */
+import type * as React from 'react';
+import type { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+import type { HTMLMotionProps, Transition } from 'motion/react';
+import type { IBaseConfig, SlotOverrides } from '../../../core/types';
+import type { IHighlightProps, IHighlightItemProps } from '../../../react-ui/primitives/Highlight';
+import type { IAutoHeightProps } from '../../../react-ui/primitives/AutoHeight';
+import type { TabsSlot } from './Tabs.styles';
+/**
+ * Configuration interface for Tabs behavior and animation.
+ *
+ * @example
+ * ```tsx
+ * const config: ITabsConfig = {
+ *   animation: { duration: 0.3 },
+ * };
+ * ```
+ */
+export interface ITabsConfig extends IBaseConfig {
+    /** Default motion transition for panel enter/exit. */
+    panelTransition?: Transition;
+    /** Default motion transition for the highlight indicator. */
+    highlightTransition?: Transition;
+}
+/**
+ * Internal context carrying the active tab value and its setter.
+ *
+ * @example
+ * ```typescript
+ * const ctx: TabsContextType = {
+ *   value: 'settings',
+ *   setValue: (v) => {},
+ * };
+ * ```
+ */
+export type TabsContextType = {
+    /** Currently active tab value, or undefined if none. */
+    value: string | undefined;
+    /** Setter matching base-ui's onValueChange signature. */
+    setValue: ITabsProps['onValueChange'];
+};
+/**
+ * Props for the root Tabs component.
+ * Extends base-ui Tabs.Root with slot overrides and config.
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   defaultValue="general"
+ *   slots={{ list: 'gap-2', tab: 'text-sm' }}
+ * >
+ *   ...
+ * </Tabs>
+ * ```
+ */
+export interface ITabsProps extends React.ComponentProps<typeof TabsPrimitive.Root> {
+    /** Partial class overrides per slot. */
+    slots?: SlotOverrides<TabsSlot>;
+    /** Tabs behavior / animation configuration. */
+    config?: ITabsConfig;
+}
+/**
+ * Props for TabsHighlight -- animated background that follows the active tab.
+ * Wraps the Highlight primitive; `controlledItems` and `value` are managed internally.
+ *
+ * @example
+ * ```tsx
+ * <TabsHighlight className="rounded-md bg-white/10" />
+ * ```
+ */
+export interface ITabsHighlightProps extends Omit<IHighlightProps, 'controlledItems' | 'value'> {
+    /** Partial class overrides per slot. */
+    slots?: SlotOverrides<TabsSlot>;
+}
+/**
+ * Props for TabsHighlightItem -- wraps a tab for highlight position tracking.
+ * Requires a `value` prop matching the corresponding tab value.
+ *
+ * @example
+ * ```tsx
+ * <TabsHighlightItem value="general">
+ *   <TabsTab value="general">General</TabsTab>
+ * </TabsHighlightItem>
+ * ```
+ */
+export interface ITabsHighlightItemProps extends IHighlightItemProps {
+    /** Tab value this highlight item corresponds to. */
+    value: string;
+    /** Partial class overrides per slot. */
+    slots?: SlotOverrides<TabsSlot>;
+}
+/**
+ * Props for TabsList -- the container holding tab triggers.
+ *
+ * @example
+ * ```tsx
+ * <TabsList className="flex gap-1 border-b border-white/10">
+ *   <TabsTab value="general">General</TabsTab>
+ *   <TabsTab value="advanced">Advanced</TabsTab>
+ * </TabsList>
+ * ```
+ */
+export interface ITabsListProps extends React.ComponentProps<typeof TabsPrimitive.List> {
+    /** Partial class overrides per slot. */
+    slots?: SlotOverrides<TabsSlot>;
+}
+/**
+ * Props for TabsTab -- a single tab trigger button.
+ *
+ * @example
+ * ```tsx
+ * <TabsTab value="general" className="px-3 py-1.5">
+ *   General
+ * </TabsTab>
+ * ```
+ */
+export interface ITabsTabProps extends React.ComponentProps<typeof TabsPrimitive.Tab> {
+    /** Partial class overrides per slot. */
+    slots?: SlotOverrides<TabsSlot>;
+}
+/**
+ * Props for TabsPanel -- animated content panel with blur transitions.
+ * Combines base-ui Panel with motion HTML props for enter/exit animations.
+ *
+ * @example
+ * ```tsx
+ * <TabsPanel value="general" className="p-4">
+ *   <p>General settings content...</p>
+ * </TabsPanel>
+ * ```
+ */
+export interface ITabsPanelProps extends Omit<React.ComponentProps<typeof TabsPrimitive.Panel>, keyof HTMLMotionProps<'div'>>, HTMLMotionProps<'div'> {
+    /** Partial class overrides per slot. */
+    slots?: SlotOverrides<TabsSlot>;
+}
+/**
+ * Props for TabsPanels in auto-height mode.
+ * Uses the AutoHeight primitive to animate container height changes.
+ *
+ * @example
+ * ```tsx
+ * <TabsPanels mode="auto-height">
+ *   <TabsPanel value="general">Short content</TabsPanel>
+ *   <TabsPanel value="advanced">Much longer content...</TabsPanel>
+ * </TabsPanels>
+ * ```
+ */
+export interface ITabsPanelsAutoProps extends Omit<IAutoHeightProps, 'children'> {
+    /** Panel animation mode (default). */
+    mode?: 'auto-height';
+    /** Tab panel children. */
+    children: React.ReactNode;
+    /** Motion transition for height animation. */
+    transition?: Transition;
+    /** Partial class overrides per slot. */
+    slots?: SlotOverrides<TabsSlot>;
+}
+/**
+ * Props for TabsPanels in layout mode.
+ * Uses Motion layout animation to transition between panels.
+ *
+ * @example
+ * ```tsx
+ * <TabsPanels mode="layout" className="overflow-hidden">
+ *   <TabsPanel value="general">Content A</TabsPanel>
+ *   <TabsPanel value="advanced">Content B</TabsPanel>
+ * </TabsPanels>
+ * ```
+ */
+export interface ITabsPanelsLayoutProps extends Omit<HTMLMotionProps<'div'>, 'children'> {
+    /** Panel animation mode. */
+    mode: 'layout';
+    /** Tab panel children. */
+    children: React.ReactNode;
+    /** Motion transition for layout animation. */
+    transition?: Transition;
+    /** Partial class overrides per slot. */
+    slots?: SlotOverrides<TabsSlot>;
+}
+/**
+ * Discriminated union of TabsPanels props.
+ * Defaults to auto-height mode when `mode` is omitted.
+ *
+ * @example
+ * ```tsx
+ * // Auto-height (default)
+ * <TabsPanels>...</TabsPanels>
+ *
+ * // Layout mode
+ * <TabsPanels mode="layout">...</TabsPanels>
+ * ```
+ */
+export type ITabsPanelsProps = ITabsPanelsAutoProps | ITabsPanelsLayoutProps;
+//# sourceMappingURL=Tabs.types.d.ts.map

package/dist/react-ui/ui/Tabs/Tabs.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Tabs/Tabs.types.ts"],"names":[],"mappings":"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"}

package/dist/react-ui/ui/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Tabs/index.tsx"],"names":[],"mappings":"AAoDA,OAAO,KAAK,EAEV,UAAU,EACV,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,aAAa,EACb,eAAe,EACf,gBAAgB,EAEjB,MAAM,cAAc,CAAC;AAatB;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAiB/D;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,aAAa,CAAC,EACrB,UAA4D,EAC5D,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAcrB;AAMD;;;;;;;;;;;;;;GAcG;AACH,iBAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAQ/D;AAMD;;;;;;;;;;;;;;GAcG;AACH,iBAAS,iBAAiB,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAEtE;AAMD;;;;;;;;;;;;;;GAcG;AACH,iBAAS,OAAO,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAQ7D;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,WAAW,EACX,UAAiD,EACjD,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,2CAsBjB;AAuBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,gBAAgB,2CAiD1C;AAMD,OAAO,EACL,IAAI,EACJ,aAAa,EACb,iBAAiB,EACjB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,GACX,CAAC;AAGF,YAAY,EACV,UAAU,EACV,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,EACtB,WAAW,EACX,eAAe,GAChB,MAAM,cAAc,CAAC;AAEtB,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}