@mks2508/mks-ui 0.3.1 → 0.4.0

package/src/react-ui/icons/lucide-animated/download.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import type { Variants } from "framer-motion";
-import { motion, useAnimation } from "framer-motion";
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
 import type { HTMLAttributes } from "react";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 

package/src/react-ui/icons/lucide-animated/home.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import type { Transition, Variants } from "framer-motion";
-import { motion, useAnimation } from "framer-motion";
+import type { Transition, Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
 import type { HTMLAttributes } from "react";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 

package/src/react-ui/icons/lucide-animated/layout-panel-top.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion, useAnimation } from "framer-motion";
+import { motion, useAnimation } from "motion/react";
 import type { HTMLAttributes } from "react";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 

package/src/react-ui/icons/lucide-animated/plus.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion, useAnimation } from "framer-motion";
+import { motion, useAnimation } from "motion/react";
 import type { HTMLAttributes } from "react";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 

package/src/react-ui/icons/lucide-animated/search.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion, useAnimation } from "framer-motion";
+import { motion, useAnimation } from "motion/react";
 import type { HTMLAttributes } from "react";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 

package/src/react-ui/icons/lucide-animated/settings.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion, useAnimation } from "framer-motion";
+import { motion, useAnimation } from "motion/react";
 import type { HTMLAttributes } from "react";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 

package/src/react-ui/icons/lucide-animated/trending-down.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import type { Variants } from "framer-motion";
-import { motion, useAnimation } from "framer-motion";
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
 import type { HTMLAttributes } from "react";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 

package/src/react-ui/icons/lucide-animated/trending-up.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import type { Variants } from "framer-motion";
-import { motion, useAnimation } from "framer-motion";
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
 import type { HTMLAttributes } from "react";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 

package/src/react-ui/icons/lucide-animated/x.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import type { Variants } from "framer-motion";
-import { motion, useAnimation } from "framer-motion";
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
 import type { HTMLAttributes } from "react";
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 

package/src/react-ui/lib/icon-wrapper.tsx

@@ -0,0 +1,70 @@
+/**
+ * Icon Wrapper Component.
+ *
+ * Ensures consistent sizing across different icon types.
+ * Some icons use explicit size props, others use CSS classes.
+ *
+ * @module @mks2508/mks-ui/react/lib/icon-wrapper
+ */
+
+'use client';
+
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Icons that use explicit size prop instead of CSS classes.
+ * These icons have SVG elements with width/height attributes.
+ */
+const SIZEABLE_ICONS = new Set([
+  'DownloadIcon',
+  'EyeIcon',
+  'EyeOffIcon',
+  'SearchIcon',
+  'XIcon',
+  'DeleteIcon',
+  'TerminalIcon',
+  'PlusIcon',
+]);
+
+/**
+ * Icon wrapper props interface.
+ */
+export interface IIconWrapperProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The icon component to render.
+   * Accepts ComponentType, ForwardRefExoticComponent, or any renderable component.
+   * Broad type needed for React 19 compatibility across duplicate @types/react copies.
+   */
+  icon: React.ComponentType<any> | React.ExoticComponent<any>;
+  /** Size in pixels for icons that use size prop (default: 16) */
+  size?: number;
+}
+
+/**
+ * Icon wrapper that ensures consistent sizing across different icon types.
+ *
+ * Some icons from the UI package use explicit size props (width/height on SVG),
+ * while others use CSS classes (w-4 h-4). This wrapper detects the icon type
+ * and applies the appropriate sizing method.
+ *
+ * @example
+ * ```tsx
+ * <IconWrapper icon={DownloadIcon} size={16} className="text-primary" />
+ * <IconWrapper icon={KeyIcon} className="text-muted-foreground" />
+ * ```
+ */
+export function IconWrapper({
+  icon: Icon,
+  className,
+  size = 16,
+  ...props
+}: IIconWrapperProps) {
+  const iconName = (Icon as any).displayName || Icon.name || '';
+  const useSizeProp = SIZEABLE_ICONS.has(iconName);
+
+  if (useSizeProp) {
+    return <Icon size={size} className={className} {...props} />;
+  }
+
+  return <Icon className={className} {...props} />;
+}

package/src/react-ui/lib/index.ts

@@ -6,3 +6,4 @@
 
 export { cn } from './utils';
 export { getStrictContext } from './get-strict-context';
+export { IconWrapper, type IIconWrapperProps } from './icon-wrapper';

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

@@ -31,7 +31,7 @@ const BRACKET_PATHS = {
   tl: 'M 0 20 L 0 5 A 5 5 0 0 1 5 0 L 20 0',
   tr: 'M 0 0 L 15 0 A 5 5 0 0 1 20 5 L 20 20',
   bl: 'M 0 0 L 0 15 A 5 5 0 0 0 5 20 L 20 20',
-  br: 'M 20 0 L 5 0 A 5 5 0 0 0 0 5 L 0 20',
+  br: 'M 20 0 L 20 15 A 5 5 0 0 1 15 20 L 0 20',
 } as const;
 
 export { cornerBracketStyles, bracketVariants, BRACKET_PATHS };

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

@@ -0,0 +1,39 @@
+/**
+ * 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,31 +1,21 @@
 /**
- * Style slots and defaults for the Tabs component.
+ * Style slots, CVA variants, and defaults for the Tabs component.
  *
- * Each slot maps to a visual region of the Tabs. Consumers override
- * individual slots via the `slots` prop without touching internals.
+ * 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.
  *
- * @module @mks2508/mks-ui/react/ui/Tabs/Tabs.styles
+ * The sliding indicator uses CSS Anchor Positioning API for
+ * zero-JS position tracking with WAAPI-driven transitions.
  *
- * @example
- * ```tsx
- * import { tabsStyles } from './Tabs.styles';
- * // tabsStyles.root => default root classes
- * ```
+ * @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.
- *
- * @example
- * ```typescript
- * const overrides: SlotOverrides<TabsSlot> = {
- *   root: 'w-full',
- *   list: 'flex gap-1 border-b border-white/10',
- *   tab: 'px-3 py-1.5 text-sm',
- * };
- * ```
  */
 export type TabsSlot =
   | 'root'
@@ -34,27 +24,125 @@ export type TabsSlot =
   | 'panel'
   | 'panels'
   | 'highlight'
-  | 'highlightItem';
+  | 'highlightItem'
+  | 'indicator';
 
 /**
  * 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);
- * ```
+ * Provides complete styling that works without any overrides.
  */
 export const tabsStyles: StyleSlots<TabsSlot> = {
   root: '',
-  list: '',
-  tab: '',
+  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',
+  },
+});

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

@@ -11,10 +11,11 @@ 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 { VariantProps } from 'class-variance-authority';
 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';
+import type { TabsSlot, tabsListVariants, tabsTabVariants } from './Tabs.styles';
 
 // ---------------------------------------------------------------------------
 // Config
@@ -137,9 +138,12 @@ export interface ITabsHighlightItemProps extends IHighlightItemProps {
  * ```
  */
 export interface ITabsListProps
-  extends React.ComponentProps<typeof TabsPrimitive.List> {
+  extends React.ComponentProps<typeof TabsPrimitive.List>,
+    VariantProps<typeof tabsListVariants> {
   /** Partial class overrides per slot. */
   slots?: SlotOverrides<TabsSlot>;
+  /** Show the CSS Anchor-based sliding indicator. Defaults to true for default/outline/pill variants. */
+  indicator?: boolean;
 }
 
 // ---------------------------------------------------------------------------
@@ -157,7 +161,8 @@ export interface ITabsListProps
  * ```
  */
 export interface ITabsTabProps
-  extends React.ComponentProps<typeof TabsPrimitive.Tab> {
+  extends React.ComponentProps<typeof TabsPrimitive.Tab>,
+    VariantProps<typeof tabsTabVariants> {
   /** Partial class overrides per slot. */
   slots?: SlotOverrides<TabsSlot>;
 }