@mks2508/mks-ui 0.2.0 → 0.3.1

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

@@ -1,199 +0,0 @@
-'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 from "../../../react";
-import { motion } from "motion/react";
-import { jsx } from "react/jsx-runtime";
-import { Switch } from "@base-ui/react/switch";
-
-//#region src/react/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.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.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/Tabs/Tabs.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/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/Tabs/Tabs.styles.js

@@ -1,26 +0,0 @@
-//#region src/react/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/Tabs/Tabs.types.d.ts

@@ -1,201 +0,0 @@
-/**
- * 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/primitives/Highlight';
-import type { IAutoHeightProps } from '../../../react/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/Tabs/Tabs.types.d.ts.map

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

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

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