@mdigital_ui/ui 0.4.2 → 0.4.4

package/dist/{chunk-6G3BMY4N.js → chunk-I5AD247M.js}

@@ -1,68 +1,11 @@
-import { componentColors } from './chunk-POXI7JJ4.js';
-import { cn } from './chunk-NGYLRX6F.js';
+import { colorVars } from './chunk-G6QIIWKU.js';
+import { cn } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
-import React, { useState, useRef, useId, useLayoutEffect, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useId, useCallback, useLayoutEffect, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-var pillActiveClasses = {
-  default: "text-text-primary",
-  primary: "text-white",
-  secondary: "text-white",
-  accent: "text-white",
-  success: "text-white",
-  error: "text-white",
-  warning: "text-white",
-  info: "text-white"
-};
-var defaultActiveClasses = {
-  default: "text-text-primary",
-  primary: "text-primary",
-  secondary: "text-secondary",
-  accent: "text-accent",
-  success: "text-success",
-  error: "text-error",
-  warning: "text-warning",
-  info: "text-info"
-};
-var softActiveClasses = {
-  default: "text-text-primary",
-  primary: "text-primary",
-  secondary: "text-secondary",
-  accent: "text-accent",
-  success: "text-success",
-  error: "text-error",
-  warning: "text-warning",
-  info: "text-info"
-};
-var pillIndicatorClasses = {
-  default: "bg-background",
-  primary: "bg-primary",
-  secondary: "bg-secondary",
-  accent: "bg-accent",
-  success: "bg-success",
-  error: "bg-error",
-  warning: "bg-warning",
-  info: "bg-info"
-};
-var underlineIndicatorClasses = {
-  default: "bg-border",
-  primary: "bg-primary",
-  secondary: "bg-secondary",
-  accent: "bg-accent",
-  success: "bg-success",
-  error: "bg-error",
-  warning: "bg-warning",
-  info: "bg-info"
-};
-var createActiveTabVariants = (variant, classMap) => {
-  return componentColors.map((color) => ({
-    variant,
-    color,
-    active: true,
-    className: classMap[color] || classMap.default
-  }));
-};
+var componentColors = ["default", "primary", "secondary", "accent", "success", "error", "warning", "info"];
 var tabListVariants = cva("flex relative", {
   variants: {
     size: {
@@ -121,14 +64,32 @@ var tabItemVariants = cva(
         active: false,
         className: "text-text-secondary hover:text-text-primary"
       })),
-      // Active pill variant
-      ...createActiveTabVariants("pill", pillActiveClasses),
-      // Active default variant
-      ...createActiveTabVariants("default", defaultActiveClasses),
-      // Active solid variant
-      ...createActiveTabVariants("solid", defaultActiveClasses),
-      // Active soft variant
-      ...createActiveTabVariants("soft", softActiveClasses),
+      // Active pill variant - uses foreground text
+      ...componentColors.map((color) => ({
+        variant: "pill",
+        color,
+        active: true,
+        className: "text-slot-fg"
+      })),
+      // Active default/solid/soft variants - uses accent text
+      ...componentColors.map((color) => ({
+        variant: "default",
+        color,
+        active: true,
+        className: "text-slot"
+      })),
+      ...componentColors.map((color) => ({
+        variant: "solid",
+        color,
+        active: true,
+        className: "text-slot"
+      })),
+      ...componentColors.map((color) => ({
+        variant: "soft",
+        color,
+        active: true,
+        className: "text-slot"
+      })),
       // Inactive pill variant hover
       ...componentColors.map((color) => ({
         variant: "pill",
@@ -168,31 +129,67 @@ var Tabs = React.memo(
     const [hasInitialized, setHasInitialized] = useState(false);
     const uniqueId = useId();
     const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey;
-    useIsomorphicLayoutEffect(() => {
+    const updateIndicatorPosition = useCallback(() => {
       const activeTab = tabRefs.current.get(activeKey);
       const tabList = tabListRef.current;
       if (!activeTab || !tabList) return;
-      const listRect = tabList.getBoundingClientRect();
-      const tabRect = activeTab.getBoundingClientRect();
+      const left = activeTab.offsetLeft;
+      const width = activeTab.offsetWidth;
+      const height = activeTab.offsetHeight;
       const isPill2 = variant === "pill";
       if (isPill2) {
+        let paddingLeft = 0;
+        if (typeof window !== "undefined") {
+          const computedStyle = window.getComputedStyle(tabList);
+          paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+        }
         setIndicatorStyle({
-          transform: `translateX(${tabRect.left - listRect.left - 2}px)`,
-          width: `${tabRect.width}px`,
-          height: `${tabRect.height}px`,
+          transform: `translateX(${left - paddingLeft}px)`,
+          width: `${width}px`,
+          height: `${height}px`,
           opacity: 1
         });
       } else {
         setIndicatorStyle({
-          transform: `translateX(${tabRect.left - listRect.left - 2}px)`,
-          width: `${tabRect.width}px`,
+          transform: `translateX(${left}px)`,
+          width: `${width}px`,
           opacity: 1
         });
       }
       if (!hasInitialized) {
         requestAnimationFrame(() => setHasInitialized(true));
       }
-    }, [activeKey, items, variant, size, hasInitialized]);
+    }, [activeKey, variant, hasInitialized]);
+    useIsomorphicLayoutEffect(() => {
+      updateIndicatorPosition();
+    }, [updateIndicatorPosition, items, size]);
+    useEffect(() => {
+      if (typeof window === "undefined") return;
+      const handleResize = () => {
+        requestAnimationFrame(() => {
+          updateIndicatorPosition();
+        });
+      };
+      window.addEventListener("resize", handleResize);
+      window.addEventListener("orientationchange", handleResize);
+      return () => {
+        window.removeEventListener("resize", handleResize);
+        window.removeEventListener("orientationchange", handleResize);
+      };
+    }, [updateIndicatorPosition]);
+    useEffect(() => {
+      const tabList = tabListRef.current;
+      if (!tabList || typeof ResizeObserver === "undefined") return;
+      const resizeObserver = new ResizeObserver(() => {
+        requestAnimationFrame(() => {
+          updateIndicatorPosition();
+        });
+      });
+      resizeObserver.observe(tabList);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [updateIndicatorPosition]);
     const handleTabClick = useCallback(
       (key, disabled) => {
         if (disabled) return;
@@ -241,12 +238,11 @@ var Tabs = React.memo(
     );
     const activeItem = items.find((item) => item.key === activeKey);
     const isPill = variant === "pill";
-    const indicatorColorClass = isPill ? pillIndicatorClasses[color] || pillIndicatorClasses.default : underlineIndicatorClasses[color] || underlineIndicatorClasses.default;
     return /* @__PURE__ */ jsxs(
       "div",
       {
         "data-slot": "tabs_root",
-        className: cn("tabs_root w-full", classNames?.root, className),
+        className: cn("tabs_root w-full", colorVars[color], classNames?.root, className),
         children: [
           /* @__PURE__ */ jsxs(
             "div",
@@ -256,7 +252,7 @@ var Tabs = React.memo(
               "aria-orientation": "horizontal",
               "data-slot": "tabs_list",
               className: cn(
-                "tabs_list",
+                "tabs_list overflow-x-auto",
                 tabListVariants({ size, variant }),
                 variant !== "pill" && "border-border",
                 classNames?.list
@@ -268,7 +264,7 @@ var Tabs = React.memo(
                     "data-slot": "tabs_indicator",
                     className: cn(
                       "tabs_indicator absolute pointer-events-none",
-                      isPill ? cn("rounded-md shadow-sm top-0.5", indicatorColorClass) : cn("bottom-0 h-0.5 rounded-full", indicatorColorClass),
+                      isPill ? cn("rounded-md shadow-sm top-0.5", "bg-slot") : cn("bottom-0 h-0.5 rounded-full", "bg-slot"),
                       hasInitialized ? "transition-[transform,width] duration-300 ease-out" : "",
                       classNames?.indicator
                     ),
@@ -326,7 +322,6 @@ var Tabs = React.memo(
               id: `panel-${uniqueId}-${activeItem.key}`,
               role: "tabpanel",
               "aria-labelledby": `tab-${uniqueId}-${activeItem.key}`,
-              tabIndex: 0,
               "data-slot": "tabs_panel",
               className: cn(
                 "tabs_panel",
@@ -345,5 +340,5 @@ Tabs.displayName = "Tabs";
 var tabs_default = Tabs;
 
 export { tabs_default };
-//# sourceMappingURL=chunk-6G3BMY4N.js.map
-//# sourceMappingURL=chunk-6G3BMY4N.js.map
+//# sourceMappingURL=chunk-I5AD247M.js.map
+//# sourceMappingURL=chunk-I5AD247M.js.map

package/dist/chunk-I5AD247M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tabs/index.tsx"],"names":["isPill"],"mappings":"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","file":"chunk-I5AD247M.js","sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport React, {\n  useState,\n  useId,\n  useCallback,\n  useRef,\n  useLayoutEffect,\n  useEffect,\n} from \"react\";\n\nimport { cn } from \"../utils\";\nimport { colorVars } from \"../variants\";\nimport type { TabsColor, TabsProps } from \"./types\";\n\n// Use useLayoutEffect on client, useEffect on server (SSR safe)\nconst useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\n// Component colors for compound variants\nconst componentColors = ['default', 'primary', 'secondary', 'accent', 'success', 'error', 'warning', 'info'] as const;\n\nconst tabListVariants = cva(\"flex relative\", {\n  variants: {\n    size: {\n      xs: \"gap-(--tabs-gap-xs)\",\n      sm: \"gap-(--tabs-gap-sm)\",\n      md: \"gap-(--tabs-gap-md)\",\n      lg: \"gap-(--tabs-gap-lg)\",\n    },\n    variant: {\n      default: \"border-b\",\n      solid: \"border-b\",\n      soft: \"border-b\",\n      pill: \"bg-surface p-0.5 rounded-lg border border-border gap-0 w-fit\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n    variant: \"default\",\n  },\n});\n\nconst tabItemVariants = cva(\n  \"relative z-[1] font-medium transition-colors duration-200 ease-out cursor-pointer flex items-center gap-2\",\n  {\n    variants: {\n      size: {\n        xs: \"text-xs px-(--tabs-padding-x-xs) py-(--tabs-padding-y-xs)\",\n        sm: \"text-sm px-(--tabs-padding-x-sm) py-(--tabs-padding-y-sm)\",\n        md: \"text-base px-(--tabs-padding-x-md) py-(--tabs-padding-y-md)\",\n        lg: \"text-lg px-(--tabs-padding-x-lg) py-(--tabs-padding-y-lg)\",\n      },\n      variant: {\n        default: \"pb-2 -mb-px\",\n        solid: \"pb-2 -mb-px\",\n        soft: \"pb-2 -mb-px\",\n        pill: \"rounded-md\",\n      },\n      color: {\n        default: \"\",\n        primary: \"\",\n        secondary: \"\",\n        accent: \"\",\n        success: \"\",\n        error: \"\",\n        warning: \"\",\n        info: \"\",\n      },\n      active: {\n        true: \"\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      // Inactive states (all variants)\n      ...componentColors.map((color) => ({\n        color: color as TabsColor,\n        active: false as const,\n        className: \"text-text-secondary hover:text-text-primary\",\n      })),\n\n      // Active pill variant - uses foreground text\n      ...componentColors.map((color) => ({\n        variant: \"pill\" as const,\n        color: color as TabsColor,\n        active: true as const,\n        className: \"text-slot-fg\",\n      })),\n\n      // Active default/solid/soft variants - uses accent text\n      ...componentColors.map((color) => ({\n        variant: \"default\" as const,\n        color: color as TabsColor,\n        active: true as const,\n        className: \"text-slot\",\n      })),\n      ...componentColors.map((color) => ({\n        variant: \"solid\" as const,\n        color: color as TabsColor,\n        active: true as const,\n        className: \"text-slot\",\n      })),\n      ...componentColors.map((color) => ({\n        variant: \"soft\" as const,\n        color: color as TabsColor,\n        active: true as const,\n        className: \"text-slot\",\n      })),\n\n      // Inactive pill variant hover\n      ...componentColors.map((color) => ({\n        variant: \"pill\" as const,\n        color: color as TabsColor,\n        active: false as const,\n        className: \"bg-transparent hover:bg-background/50\",\n      })),\n    ],\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n      color: \"primary\",\n      active: false,\n    },\n  },\n);\n\nconst Tabs = React.memo<TabsProps>(\n  ({\n    items,\n    defaultActiveKey,\n    activeKey: controlledActiveKey,\n    color = \"primary\",\n    size = \"md\",\n    variant = \"default\",\n    onChange,\n    className,\n    classNames,\n  }) => {\n    const [internalActiveKey, setInternalActiveKey] = useState(\n      defaultActiveKey || items[0]?.key || \"\",\n    );\n    const tabListRef = useRef<HTMLDivElement>(null);\n    const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n    const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>(\n      {},\n    );\n    const [hasInitialized, setHasInitialized] = useState(false);\n\n    // Generate unique IDs for accessibility\n    const uniqueId = useId();\n\n    const activeKey =\n      controlledActiveKey !== undefined\n        ? controlledActiveKey\n        : internalActiveKey;\n\n    // Measure and position the sliding indicator\n    const updateIndicatorPosition = useCallback(() => {\n      const activeTab = tabRefs.current.get(activeKey);\n      const tabList = tabListRef.current;\n      if (!activeTab || !tabList) return;\n\n      // Use offsetLeft for parent-relative positioning (more reliable than getBoundingClientRect)\n      const left = activeTab.offsetLeft;\n      const width = activeTab.offsetWidth;\n      const height = activeTab.offsetHeight;\n\n      const isPill = variant === \"pill\";\n\n      if (isPill) {\n        // For pill variant, account for padding (SSR-safe guard)\n        let paddingLeft = 0;\n        if (typeof window !== \"undefined\") {\n          const computedStyle = window.getComputedStyle(tabList);\n          paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n        }\n        \n        setIndicatorStyle({\n          transform: `translateX(${left - paddingLeft}px)`,\n          width: `${width}px`,\n          height: `${height}px`,\n          opacity: 1,\n        });\n      } else {\n        setIndicatorStyle({\n          transform: `translateX(${left}px)`,\n          width: `${width}px`,\n          opacity: 1,\n        });\n      }\n\n      // Enable transitions after initial positioning\n      if (!hasInitialized) {\n        requestAnimationFrame(() => setHasInitialized(true));\n      }\n    }, [activeKey, variant, hasInitialized]);\n\n    useIsomorphicLayoutEffect(() => {\n      updateIndicatorPosition();\n    }, [updateIndicatorPosition, items, size]);\n\n    // Handle window resize and orientation changes (SSR-safe)\n    useEffect(() => {\n      if (typeof window === \"undefined\") return;\n\n      const handleResize = () => {\n        requestAnimationFrame(() => {\n          updateIndicatorPosition();\n        });\n      };\n\n      window.addEventListener('resize', handleResize);\n      window.addEventListener('orientationchange', handleResize);\n\n      return () => {\n        window.removeEventListener('resize', handleResize);\n        window.removeEventListener('orientationchange', handleResize);\n      };\n    }, [updateIndicatorPosition]);\n\n    // Observe tab list resize (handles mobile reflows, font size changes, etc.)\n    useEffect(() => {\n      const tabList = tabListRef.current;\n      if (!tabList || typeof ResizeObserver === 'undefined') return;\n\n      const resizeObserver = new ResizeObserver(() => {\n        requestAnimationFrame(() => {\n          updateIndicatorPosition();\n        });\n      });\n\n      resizeObserver.observe(tabList);\n\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [updateIndicatorPosition]);\n\n    const handleTabClick = useCallback(\n      (key: string, disabled?: boolean) => {\n        if (disabled) return;\n\n        if (controlledActiveKey === undefined) {\n          setInternalActiveKey(key);\n        }\n        onChange?.(key);\n      },\n      [controlledActiveKey, onChange],\n    );\n\n    // Handle keyboard navigation (arrow keys, Home, End)\n    const handleKeyDown = useCallback(\n      (event: React.KeyboardEvent<HTMLButtonElement>, currentIndex: number) => {\n        const enabledIndices = items\n          .map((item, i) => (!item.disabled ? i : -1))\n          .filter((i): i is number => i !== -1);\n        const currentEnabledIndex = enabledIndices.indexOf(currentIndex);\n\n        let newIndex: number | undefined;\n\n        switch (event.key) {\n          case \"ArrowLeft\":\n          case \"ArrowUp\":\n            event.preventDefault();\n            newIndex =\n              enabledIndices[\n                currentEnabledIndex > 0\n                  ? currentEnabledIndex - 1\n                  : enabledIndices.length - 1\n              ];\n            break;\n          case \"ArrowRight\":\n          case \"ArrowDown\":\n            event.preventDefault();\n            newIndex =\n              enabledIndices[\n                currentEnabledIndex < enabledIndices.length - 1\n                  ? currentEnabledIndex + 1\n                  : 0\n              ];\n            break;\n          case \"Home\":\n            event.preventDefault();\n            newIndex = enabledIndices[0];\n            break;\n          case \"End\":\n            event.preventDefault();\n            newIndex = enabledIndices[enabledIndices.length - 1];\n            break;\n        }\n\n        if (newIndex !== undefined) {\n          const newItem = items[newIndex];\n          if (newItem) {\n            handleTabClick(newItem.key);\n            // Focus the new tab\n            const btn = tabRefs.current.get(newItem.key);\n            btn?.focus();\n          }\n        }\n      },\n      [items, handleTabClick],\n    );\n\n    const activeItem = items.find((item) => item.key === activeKey);\n    const isPill = variant === \"pill\";\n\n    return (\n      <div\n        data-slot=\"tabs_root\"\n        className={cn(\"tabs_root w-full\", colorVars[color], classNames?.root, className)}\n      >\n        <div\n          ref={tabListRef}\n          role=\"tablist\"\n          aria-orientation=\"horizontal\"\n          data-slot=\"tabs_list\"\n          className={cn(\n            \"tabs_list overflow-x-auto\",\n            tabListVariants({ size, variant }),\n            variant !== \"pill\" && \"border-border\",\n            classNames?.list,\n          )}\n        >\n          {/* Sliding indicator */}\n          <span\n            data-slot=\"tabs_indicator\"\n            className={cn(\n              \"tabs_indicator absolute pointer-events-none\",\n              isPill\n                ? cn(\"rounded-md shadow-sm top-0.5\", \"bg-slot\")\n                : cn(\"bottom-0 h-0.5 rounded-full\", \"bg-slot\"),\n              hasInitialized\n                ? \"transition-[transform,width] duration-300 ease-out\"\n                : \"\",\n              classNames?.indicator,\n            )}\n            style={indicatorStyle}\n            aria-hidden=\"true\"\n          />\n\n          {items.map((item, index) => {\n            const isActive = item.key === activeKey;\n            const tabId = `tab-${uniqueId}-${item.key}`;\n            const panelId = `panel-${uniqueId}-${item.key}`;\n\n            return (\n              <button\n                key={item.key}\n                ref={(el) => {\n                  if (el) tabRefs.current.set(item.key, el);\n                  else tabRefs.current.delete(item.key);\n                }}\n                id={tabId}\n                role=\"tab\"\n                type=\"button\"\n                aria-selected={isActive}\n                aria-controls={panelId}\n                tabIndex={isActive ? 0 : -1}\n                data-slot=\"tabs_tab\"\n                className={cn(\n                  \"tabs_tab\",\n                  tabItemVariants({\n                    size,\n                    variant,\n                    color,\n                    active: isActive,\n                  }),\n                  item.disabled && \"opacity-50 cursor-not-allowed\",\n                  classNames?.tab,\n                  isActive && classNames?.tabActive,\n                )}\n                onClick={() => handleTabClick(item.key, item.disabled)}\n                onKeyDown={(e) => handleKeyDown(e, index)}\n                disabled={item.disabled}\n              >\n                {item.icon && <span aria-hidden=\"true\">{item.icon}</span>}\n                {item.label}\n              </button>\n            );\n          })}\n        </div>\n\n        {activeItem?.content && (\n          <div\n            id={`panel-${uniqueId}-${activeItem.key}`}\n            role=\"tabpanel\"\n            aria-labelledby={`tab-${uniqueId}-${activeItem.key}`}\n            data-slot=\"tabs_panel\"\n            className={cn(\n              \"tabs_panel\",\n              \"py-4 animate-in fade-in slide-in-from-bottom-2 duration-300\",\n              classNames?.panel,\n            )}\n          >\n            {activeItem?.content}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nTabs.displayName = \"Tabs\";\n\nexport type { TabsClassNames } from \"./types\";\nexport type * from \"./types\";\nexport default Tabs;\n"]}

package/dist/chunk-I7HJBHQU.js

@@ -0,0 +1,99 @@
+import { useRipple, RippleContainer } from './chunk-4TEZWGX7.js';
+import { colorVars } from './chunk-G6QIIWKU.js';
+import { cn } from './chunk-RAS6HUEI.js';
+import { cva } from 'class-variance-authority';
+import React, { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var getToggleClasses = (color, variant, isActive) => {
+  const baseColor = colorVars[color] || colorVars.default;
+  if (!isActive) {
+    return cn(baseColor, "text-text-secondary hover:text-slot hover:bg-slot-10");
+  }
+  if (variant === "solid") {
+    return cn(baseColor, "bg-slot text-slot-fg");
+  }
+  if (variant === "soft") {
+    return cn(baseColor, "bg-slot-20 text-slot");
+  }
+  return cn(baseColor, "border-slot bg-slot-10 text-slot");
+};
+var singleToggleVariants = cva(
+  "inline-flex items-center gap-2 font-medium transition-colors cursor-pointer border rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+  {
+    variants: {
+      size: {
+        xs: "text-xs px-2 py-1",
+        sm: "text-sm px-3 py-1.5",
+        md: "text-base px-4 py-2",
+        lg: "text-lg px-5 py-2.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Toggle = React.memo(
+  ({
+    pressed: controlledPressed,
+    defaultPressed = false,
+    color = "primary",
+    size = "md",
+    variant = "default",
+    onChange,
+    disabled = false,
+    icon,
+    children,
+    "aria-label": ariaLabel,
+    className,
+    classNames,
+    ref
+  }) => {
+    const [internalPressed, setInternalPressed] = useState(defaultPressed);
+    const { ripples, onPointerDown: ripplePointerDown, onKeyDown: rippleKeyDown, onAnimationEnd: rippleAnimationEnd } = useRipple(!disabled);
+    const pressed = controlledPressed !== void 0 ? controlledPressed : internalPressed;
+    const handleClick = () => {
+      if (disabled) return;
+      const newPressed = !pressed;
+      if (controlledPressed === void 0) {
+        setInternalPressed(newPressed);
+      }
+      onChange?.(newPressed);
+    };
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "data-slot": "root",
+        ref,
+        type: "button",
+        className: cn(
+          "toggle_root",
+          singleToggleVariants({ size }),
+          getToggleClasses(color, variant, pressed),
+          "border relative overflow-hidden",
+          disabled && "opacity-50 cursor-not-allowed",
+          classNames?.root,
+          className
+        ),
+        onClick: handleClick,
+        onPointerDown: ripplePointerDown,
+        onKeyDown: rippleKeyDown,
+        disabled,
+        "aria-pressed": pressed,
+        "aria-label": ariaLabel,
+        children: [
+          icon,
+          children,
+          /* @__PURE__ */ jsx(RippleContainer, { ripples, onAnimationEnd: rippleAnimationEnd })
+        ]
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+var toggle_default = Toggle;
+
+export { toggle_default };
+//# sourceMappingURL=chunk-I7HJBHQU.js.map
+//# sourceMappingURL=chunk-I7HJBHQU.js.map

package/dist/chunk-I7HJBHQU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toggle/index.tsx"],"names":[],"mappings":"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","file":"chunk-I7HJBHQU.js","sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport React, { useState } from 'react'\n\nimport { useRipple, RippleContainer } from '../hooks/useRipple'\nimport { cn } from '../utils'\nimport { colorVars } from '../variants'\nimport type { SingleToggleProps } from './types'\n\nconst getToggleClasses = (\n  color: string,\n  variant: string,\n  isActive: boolean,\n) => {\n  const baseColor = colorVars[color as keyof typeof colorVars] || colorVars.default\n\n  if (!isActive) {\n    // Inactive: text-secondary with hover to accent color\n    return cn(baseColor, 'text-text-secondary hover:text-slot hover:bg-slot-10')\n  }\n\n  // Active state\n  if (variant === 'solid') {\n    return cn(baseColor, 'bg-slot text-slot-fg')\n  }\n  if (variant === 'soft') {\n    return cn(baseColor, 'bg-slot-20 text-slot')\n  }\n  // default variant\n  return cn(baseColor, 'border-slot bg-slot-10 text-slot')\n}\n\nconst singleToggleVariants = cva(\n  'inline-flex items-center gap-2 font-medium transition-colors cursor-pointer border rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n  {\n    variants: {\n      size: {\n        xs: 'text-xs px-2 py-1',\n        sm: 'text-sm px-3 py-1.5',\n        md: 'text-base px-4 py-2',\n        lg: 'text-lg px-5 py-2.5',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nconst Toggle = React.memo<SingleToggleProps>(\n  ({\n    pressed: controlledPressed,\n    defaultPressed = false,\n    color = 'primary',\n    size = 'md',\n    variant = 'default',\n    onChange,\n    disabled = false,\n    icon,\n    children,\n    'aria-label': ariaLabel,\n    className,\n    classNames,\n    ref,\n  }) => {\n    const [internalPressed, setInternalPressed] = useState(defaultPressed)\n    const { ripples, onPointerDown: ripplePointerDown, onKeyDown: rippleKeyDown, onAnimationEnd: rippleAnimationEnd } = useRipple(!disabled)\n\n    const pressed =\n      controlledPressed !== undefined ? controlledPressed : internalPressed\n\n    const handleClick = () => {\n      if (disabled) return\n\n      const newPressed = !pressed\n      if (controlledPressed === undefined) {\n        setInternalPressed(newPressed)\n      }\n      onChange?.(newPressed)\n    }\n\n    return (\n      <button\n        data-slot=\"root\"\n        ref={ref}\n        type=\"button\"\n        className={cn(\n          'toggle_root',\n          singleToggleVariants({ size }),\n          getToggleClasses(color, variant, pressed),\n          'border relative overflow-hidden',\n          disabled && 'opacity-50 cursor-not-allowed',\n          classNames?.root,\n          className,\n        )}\n        onClick={handleClick}\n        onPointerDown={ripplePointerDown}\n        onKeyDown={rippleKeyDown}\n        disabled={disabled}\n        aria-pressed={pressed}\n        aria-label={ariaLabel}\n      >\n        {icon}\n        {children}\n        <RippleContainer ripples={ripples} onAnimationEnd={rippleAnimationEnd} />\n      </button>\n    )\n  },\n)\n\nToggle.displayName = 'Toggle'\n\nexport type * from './types'\nexport default Toggle\n"]}

package/dist/{chunk-3PWILVOE.js → chunk-J2WIZULN.js}

@@ -1,11 +1,40 @@
-import { useRipple, RippleContainer } from './chunk-OFUPJH35.js';
-import { focusRingColorClasses } from './chunk-POXI7JJ4.js';
-import { cn, iconSizes } from './chunk-NGYLRX6F.js';
+import { useRipple, RippleContainer } from './chunk-4TEZWGX7.js';
+import { colorVars } from './chunk-G6QIIWKU.js';
+import { cn, iconSizes } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
 import { Check, Copy } from 'lucide-react';
 import React, { useState, useRef, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+async function copyToClipboard(text) {
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
+    const blob = new Blob([text], { type: "text/plain" });
+    await navigator.clipboard.write([new ClipboardItem({ "text/plain": blob })]);
+    return;
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.style.cssText = "position:fixed;opacity:0;left:-9999px";
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  try {
+    const selection = document.getSelection();
+    if (selection) {
+      const range = document.createRange();
+      range.selectNodeContents(textarea);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+    document.execCommand("copy");
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
 var clipboardVariants = cva(
   "inline-flex items-center justify-between gap-2 rounded-md font-medium transition-colors cursor-pointer border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background relative overflow-hidden",
   {
@@ -22,47 +51,15 @@ var clipboardVariants = cva(
     }
   }
 );
-var colorStyles = {
-  default: {
-    default: "bg-background border-border text-text-primary hover:bg-surface",
-    solid: "bg-surface border-border text-text-primary hover:bg-surface/80",
-    soft: "bg-surface/50 border-border text-text-primary hover:bg-surface"
-  },
-  primary: {
-    default: "bg-background border-primary text-primary hover:bg-primary/10",
-    solid: "bg-primary border-primary text-background hover:bg-primary/90",
-    soft: "bg-primary/10 border-primary/30 text-primary hover:bg-primary/20"
-  },
-  secondary: {
-    default: "bg-background border-secondary text-secondary hover:bg-secondary/10",
-    solid: "bg-secondary border-secondary text-background hover:bg-secondary/90",
-    soft: "bg-secondary/10 border-secondary/30 text-secondary hover:bg-secondary/20"
-  },
-  accent: {
-    default: "bg-background border-accent text-accent hover:bg-accent/10",
-    solid: "bg-accent border-accent text-background hover:bg-accent/90",
-    soft: "bg-accent/10 border-accent/30 text-accent hover:bg-accent/20"
-  },
-  success: {
-    default: "bg-background border-success text-success hover:bg-success/10",
-    solid: "bg-success border-success text-background hover:bg-success/90",
-    soft: "bg-success/10 border-success/30 text-success hover:bg-success/20"
-  },
-  error: {
-    default: "bg-background border-error text-error hover:bg-error/10",
-    solid: "bg-error border-error text-background hover:bg-error/90",
-    soft: "bg-error/10 border-error/30 text-error hover:bg-error/20"
-  },
-  warning: {
-    default: "bg-background border-warning text-warning hover:bg-warning/10",
-    solid: "bg-warning border-warning text-background hover:bg-warning/90",
-    soft: "bg-warning/10 border-warning/30 text-warning hover:bg-warning/20"
-  },
-  info: {
-    default: "bg-background border-info text-info hover:bg-info/10",
-    solid: "bg-info border-info text-background hover:bg-info/90",
-    soft: "bg-info/10 border-info/30 text-info hover:bg-info/20"
+var getClipboardStyles = (color, variant) => {
+  const baseColor = colorVars[color] || colorVars.default;
+  if (variant === "solid") {
+    return cn(baseColor, "bg-slot border-slot text-slot-fg hover:bg-slot-90");
+  }
+  if (variant === "soft") {
+    return cn(baseColor, "bg-slot-10 border-slot-30 text-slot hover:bg-slot-20");
   }
+  return cn(baseColor, "bg-background border-slot text-slot hover:bg-slot-10");
 };
 var Clipboard = React.memo(
   ({
@@ -80,9 +77,11 @@ var Clipboard = React.memo(
   }) => {
     const [copied, setCopied] = useState(false);
     const timerRef = useRef(null);
+    const isMountedRef = useRef(true);
     const { ripples, onPointerDown: ripplePointerDown, onKeyDown: rippleKeyDown, onAnimationEnd: rippleAnimationEnd } = useRipple(!disabled);
     useEffect(() => {
       return () => {
+        isMountedRef.current = false;
         if (timerRef.current) {
           clearTimeout(timerRef.current);
         }
@@ -91,14 +90,14 @@ var Clipboard = React.memo(
     const handleCopy = async () => {
       if (disabled) return;
       try {
-        await navigator.clipboard.writeText(value);
-        setCopied(true);
+        await copyToClipboard(value);
+        if (isMountedRef.current) setCopied(true);
         onCopy?.();
         if (timerRef.current) {
           clearTimeout(timerRef.current);
         }
         timerRef.current = setTimeout(() => {
-          setCopied(false);
+          if (isMountedRef.current) setCopied(false);
         }, successDuration);
       } catch {
       }
@@ -126,8 +125,9 @@ var Clipboard = React.memo(
         "aria-live": "polite",
         className: cn(
           clipboardVariants({ size }),
-          colorStyles[color][variant],
-          focusRingColorClasses[color],
+          getClipboardStyles(color, variant),
+          colorVars[color],
+          "focus-visible:ring-slot",
           disabled && "opacity-50 cursor-not-allowed",
           !showValue && "aspect-square justify-center",
           "clipboard_root",
@@ -178,5 +178,5 @@ Clipboard.displayName = "Clipboard";
 var clipboard_default = Clipboard;
 
 export { clipboard_default };
-//# sourceMappingURL=chunk-3PWILVOE.js.map
-//# sourceMappingURL=chunk-3PWILVOE.js.map
+//# sourceMappingURL=chunk-J2WIZULN.js.map
+//# sourceMappingURL=chunk-J2WIZULN.js.map

package/dist/chunk-J2WIZULN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/clipboard/index.tsx"],"names":[],"mappings":"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","file":"chunk-J2WIZULN.js","sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { Check, Copy } from \"lucide-react\";\nimport React, { useState, useRef, useEffect } from \"react\";\n\nimport { useRipple, RippleContainer } from \"../hooks/useRipple\";\nimport { cn, iconSizes } from \"../utils\";\nimport { colorVars } from \"../variants\";\nimport type { ClipboardProps } from \"./types\";\n\nasync function copyToClipboard(text: string): Promise<void> {\n  if (navigator.clipboard?.writeText) {\n    await navigator.clipboard.writeText(text);\n    return;\n  }\n  // Fallback using ClipboardItem API (works in iframes / insecure contexts with user gesture)\n  if (typeof ClipboardItem !== \"undefined\" && navigator.clipboard?.write) {\n    const blob = new Blob([text], { type: \"text/plain\" });\n    await navigator.clipboard.write([new ClipboardItem({ \"text/plain\": blob })]);\n    return;\n  }\n  // Last resort: textarea + Selection API (no deprecated execCommand)\n  const textarea = document.createElement(\"textarea\");\n  textarea.value = text;\n  textarea.style.cssText = \"position:fixed;opacity:0;left:-9999px\";\n  document.body.appendChild(textarea);\n  textarea.focus();\n  textarea.select();\n  try {\n    const selection = document.getSelection();\n    if (selection) {\n      const range = document.createRange();\n      range.selectNodeContents(textarea);\n      selection.removeAllRanges();\n      selection.addRange(range);\n    }\n    // execCommand is deprecated but still the only sync fallback in old browsers\n    document.execCommand(\"copy\");\n  } finally {\n    document.body.removeChild(textarea);\n  }\n}\n\nconst clipboardVariants = cva(\n  \"inline-flex items-center justify-between gap-2 rounded-md font-medium transition-colors cursor-pointer border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background relative overflow-hidden\",\n  {\n    variants: {\n      size: {\n        xs: \"px-1.5 py-1 text-xs\",\n        sm: \"px-2 py-1.5 text-xs\",\n        md: \"px-2.5 py-2 text-sm\",\n        lg: \"px-3.5 py-2 text-lg\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  },\n);\n\nconst getClipboardStyles = (color: string, variant: string) => {\n  const baseColor = colorVars[color as keyof typeof colorVars] || colorVars.default\n\n  if (variant === 'solid') {\n    return cn(baseColor, 'bg-slot border-slot text-slot-fg hover:bg-slot-90')\n  }\n  if (variant === 'soft') {\n    return cn(baseColor, 'bg-slot-10 border-slot-30 text-slot hover:bg-slot-20')\n  }\n  // default variant\n  return cn(baseColor, 'bg-background border-slot text-slot hover:bg-slot-10')\n}\n\nconst Clipboard = React.memo<ClipboardProps>(\n  ({\n    value,\n    color = \"default\",\n    size = \"md\",\n    variant = \"default\",\n    showValue = true,\n    successDuration = 2000,\n    disabled = false,\n    onCopy,\n    className,\n    classNames,\n    ref,\n  }) => {\n    const [copied, setCopied] = useState(false);\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const isMountedRef = useRef(true);\n    const { ripples, onPointerDown: ripplePointerDown, onKeyDown: rippleKeyDown, onAnimationEnd: rippleAnimationEnd } = useRipple(!disabled);\n\n    // Cleanup timeout on unmount to prevent memory leak\n    useEffect(() => {\n      return () => {\n        isMountedRef.current = false;\n        if (timerRef.current) {\n          clearTimeout(timerRef.current);\n        }\n      };\n    }, []);\n\n    const handleCopy = async () => {\n      if (disabled) return;\n\n      try {\n        await copyToClipboard(value);\n        if (isMountedRef.current) setCopied(true);\n        onCopy?.();\n\n        // Clear any existing timer before setting a new one\n        if (timerRef.current) {\n          clearTimeout(timerRef.current);\n        }\n\n        timerRef.current = setTimeout(() => {\n          if (isMountedRef.current) setCopied(false);\n        }, successDuration);\n      } catch {\n        // Copy failed - user can try again\n      }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n      if (e.key === \"Enter\" || e.key === \" \") {\n        e.preventDefault();\n        handleCopy();\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        onClick={handleCopy}\n        onPointerDown={ripplePointerDown}\n        onKeyDown={(e) => { rippleKeyDown(e); handleKeyDown(e); }}\n        aria-label={\n          copied\n            ? \"Copied to clipboard\"\n            : `Copy ${showValue ? value : \"to clipboard\"}`\n        }\n        aria-disabled={disabled}\n        aria-live=\"polite\"\n        className={cn(\n          clipboardVariants({ size }),\n          getClipboardStyles(color, variant),\n          colorVars[color],\n          'focus-visible:ring-slot',\n          disabled && \"opacity-50 cursor-not-allowed\",\n          !showValue && \"aspect-square justify-center\",\n          \"clipboard_root\",\n          classNames?.root,\n          className,\n        )}\n        data-slot=\"root\"\n      >\n        {showValue && (\n          <span\n            className={cn(\n              \"font-mono truncate clipboard_input\",\n              classNames?.input,\n            )}\n            data-slot=\"input\"\n          >\n            {value}\n          </span>\n        )}\n        {copied ? (\n          <Check\n            className={cn(\n              iconSizes[size],\n              \"shrink-0 clipboard_button animate-in zoom-in-75 duration-200\",\n              classNames?.button,\n            )}\n            data-slot=\"icon\"\n          />\n        ) : (\n          <Copy\n            className={cn(\n              iconSizes[size],\n              \"shrink-0 clipboard_button\",\n              classNames?.button,\n            )}\n            data-slot=\"icon\"\n          />\n        )}\n        <RippleContainer ripples={ripples} onAnimationEnd={rippleAnimationEnd} />\n      </div>\n    );\n  },\n);\n\nClipboard.displayName = \"Clipboard\";\n\nexport type * from \"./types\";\nexport default Clipboard;\n"]}