@mks2508/mks-ui 0.5.4 → 0.5.8

package/src/react-ui/ui/Switch/Switch.types.ts

@@ -1,155 +0,0 @@
-/**
- * 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>;
-};

package/src/react-ui/ui/Switch/index.tsx

@@ -1,253 +0,0 @@
-'use client';
-
-/**
- * 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>
- * ```
- */
-
-import * as React from 'react';
-import { Switch as SwitchPrimitives } from '@base-ui/react/switch';
-import { motion } from 'motion/react';
-
-import { cn } from '@/react-ui/lib/utils';
-import { getStrictContext } from '@/react-ui/lib/get-strict-context';
-import { useControlledState } from '@/react-ui/hooks/State/UseControlledState';
-
-import { switchStyles } from './Switch.styles';
-import type {
-  SwitchContextType,
-  ISwitchProps,
-  ISwitchThumbProps,
-  ISwitchIconProps,
-} from './Switch.types';
-
-const [SwitchProvider, useSwitch] =
-  getStrictContext<SwitchContextType>('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({
-  name,
-  defaultChecked,
-  checked,
-  onCheckedChange,
-  nativeButton,
-  disabled,
-  readOnly,
-  required,
-  inputRef,
-  id,
-  className,
-  slots,
-  config: _config,
-  ...props
-}: ISwitchProps) {
-  const [isPressed, setIsPressed] = React.useState(false);
-  const [isChecked, setIsChecked] = useControlledState({
-    value: checked,
-    defaultValue: defaultChecked,
-    onChange: onCheckedChange,
-  });
-
-  return (
-    <SwitchProvider
-      value={{ isChecked, setIsChecked, isPressed, setIsPressed }}
-    >
-      <SwitchPrimitives.Root
-        name={name}
-        defaultChecked={defaultChecked}
-        checked={checked}
-        onCheckedChange={setIsChecked}
-        nativeButton={nativeButton ?? true}
-        disabled={disabled}
-        readOnly={readOnly}
-        required={required}
-        inputRef={inputRef}
-        id={id}
-        render={
-          <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}
-          />
-        }
-      />
-    </SwitchProvider>
-  );
-}
-
-/**
- * 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
-}: ISwitchThumbProps) {
-  const { isPressed } = useSwitch();
-
-  return (
-    <SwitchPrimitives.Thumb
-      render={
-        <motion.div
-          data-slot="switch-thumb"
-          whileTap="tab"
-          layout
-          transition={transition}
-          animate={isPressed ? pressedAnimation : undefined}
-          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
-}: ISwitchIconProps) {
-  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 (
-    <motion.div
-      data-slot={`switch-${position}-icon`}
-      animate={isAnimated ? { scale: 1, opacity: 1 } : { scale: 0, opacity: 0 }}
-      transition={transition}
-      className={cn(switchStyles.icon, slots?.icon, className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Switch,
-  SwitchThumb,
-  SwitchIcon,
-  useSwitch,
-};
-
-// Re-exports
-export type {
-  ISwitchProps,
-  ISwitchThumbProps,
-  ISwitchIconProps,
-  ISwitchConfig,
-  SwitchContextType,
-  SwitchIconPosition,
-  SwitchSlot,
-} from './Switch.types';
-
-export { switchStyles } from './Switch.styles';

package/src/react-ui/ui/Tabs/Tabs.css

@@ -1,39 +0,0 @@
-/**
- * CSS Anchor Positioning for the Tabs sliding indicator.
- *
- * The selected tab declares itself as anchor via `anchor-name: --tabs-active`.
- * The indicator element positions itself against that anchor, and CSS
- * transitions handle the smooth sliding animation (WAAPI-compatible).
- *
- * Uses `anchor-scope` on the list to support multiple Tabs instances
- * on the same page without anchor name collisions.
- */
-
-/* Scope anchors to each TabsList instance */
-[data-slot="tabs-list"] {
-  anchor-scope: --tabs-active;
-}
-
-/* Selected tab becomes the anchor */
-[data-slot="tabs-tab"][data-selected] {
-  anchor-name: --tabs-active;
-}
-
-/* Indicator follows the selected tab via CSS Anchor */
-[data-slot="tabs-indicator"] {
-  position-anchor: --tabs-active;
-  left: anchor(left);
-  right: anchor(right);
-
-  /* Smooth sliding via CSS transitions (WAAPI-compatible) */
-  transition-property: top, left, right, bottom, width, height, inset;
-  transition-duration: 200ms;
-  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-/* Reduce motion for accessibility */
-@media (prefers-reduced-motion: reduce) {
-  [data-slot="tabs-indicator"] {
-    transition-duration: 0ms;
-  }
-}

package/src/react-ui/ui/Tabs/Tabs.styles.ts

@@ -1,148 +0,0 @@
-/**
- * Style slots, CVA variants, and defaults for the Tabs component.
- *
- * Provides sensible out-of-the-box styling using semantic theme tokens
- * (bg-muted, text-foreground, etc.) while remaining fully overridable
- * via the `slots` prop and CVA variant/size system.
- *
- * The sliding indicator uses CSS Anchor Positioning API for
- * zero-JS position tracking with WAAPI-driven transitions.
- *
- * @module @mks2508/mks-ui/react/ui/Tabs/Tabs.styles
- */
-
-import { cva } from 'class-variance-authority';
-import type { StyleSlots } from '@/core/types';
-
-/**
- * Union of all visual regions (slots) in the Tabs component tree.
- */
-export type TabsSlot =
-  | 'root'
-  | 'list'
-  | 'tab'
-  | 'panel'
-  | 'panels'
-  | 'highlight'
-  | 'highlightItem'
-  | 'indicator';
-
-/**
- * Default style map for every Tabs slot.
- * Provides complete styling that works without any overrides.
- */
-export const tabsStyles: StyleSlots<TabsSlot> = {
-  root: '',
-  list: 'inline-flex items-center relative',
-  tab: [
-    'inline-flex items-center justify-center gap-2 whitespace-nowrap',
-    'font-medium cursor-pointer select-none relative z-[1]',
-    'text-muted-foreground transition-colors duration-150',
-    'hover:text-foreground',
-    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-    'disabled:pointer-events-none disabled:opacity-50',
-    'data-[active]:text-foreground',
-    '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
-  ].join(' '),
-  panel: '',
-  panels: '',
-  highlight: '',
-  highlightItem: '',
-  indicator: 'absolute pointer-events-none z-0',
-};
-
-// ---------------------------------------------------------------------------
-// TabsList CVA
-// ---------------------------------------------------------------------------
-
-/**
- * CVA variants for the TabsList container.
- *
- * @example
- * ```tsx
- * <TabsList variant="underline" size="lg">
- *   <TabsTab value="a">Tab A</TabsTab>
- * </TabsList>
- * ```
- */
-export const tabsListVariants = cva(tabsStyles.list, {
-  variants: {
-    variant: {
-      default: 'gap-1 rounded-lg bg-muted p-1',
-      outline: 'gap-1 rounded-lg border border-border p-1',
-      ghost: 'gap-2 p-0',
-      underline: 'gap-0 rounded-none border-b border-border p-0',
-      pill: 'gap-1 rounded-full bg-muted p-1',
-    },
-    size: {
-      default: 'h-10',
-      sm: 'h-8',
-      lg: 'h-12',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-    size: 'default',
-  },
-});
-
-// ---------------------------------------------------------------------------
-// TabsTab CVA
-// ---------------------------------------------------------------------------
-
-/**
- * CVA variants for individual tab triggers.
- *
- * @example
- * ```tsx
- * <TabsTab value="general" variant="underline" size="sm">
- *   General
- * </TabsTab>
- * ```
- */
-export const tabsTabVariants = cva(tabsStyles.tab, {
-  variants: {
-    variant: {
-      default: 'rounded-md',
-      outline: 'rounded-md',
-      ghost: 'rounded-md hover:bg-accent data-[active]:text-accent-foreground',
-      underline: 'rounded-none border-b-2 border-transparent data-[active]:border-primary',
-      pill: 'rounded-full',
-    },
-    size: {
-      default: 'px-3 py-1.5 text-sm',
-      sm: 'px-2.5 py-1 text-xs',
-      lg: 'px-4 py-2 text-base',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-    size: 'default',
-  },
-});
-
-// ---------------------------------------------------------------------------
-// Indicator CVA
-// ---------------------------------------------------------------------------
-
-/**
- * CVA variants for the sliding indicator.
- *
- * The indicator is positioned via CSS Anchor Positioning API
- * (anchor-name on the selected tab, position-anchor on the indicator)
- * and animated via WAAPI transitions in CSS.
- */
-export const tabsIndicatorVariants = cva(tabsStyles.indicator, {
-  variants: {
-    variant: {
-      default: 'bg-background shadow-sm rounded-md inset-y-1',
-      outline: 'bg-background shadow-sm border border-border/50 rounded-md inset-y-1',
-      ghost: 'bg-accent rounded-md inset-y-0',
-      underline: 'bg-primary h-0.5 rounded-full !inset-y-auto bottom-0',
-      pill: 'bg-background shadow-sm rounded-full inset-y-1',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});