@mdigital_ui/ui 0.4.0 → 0.4.2

package/dist/chunk-6G3BMY4N.js

@@ -0,0 +1,349 @@
+import { componentColors } from './chunk-POXI7JJ4.js';
+import { cn } from './chunk-NGYLRX6F.js';
+import { cva } from 'class-variance-authority';
+import React, { useState, useRef, useId, useLayoutEffect, useEffect, useCallback } 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 tabListVariants = cva("flex relative", {
+  variants: {
+    size: {
+      xs: "gap-(--tabs-gap-xs)",
+      sm: "gap-(--tabs-gap-sm)",
+      md: "gap-(--tabs-gap-md)",
+      lg: "gap-(--tabs-gap-lg)"
+    },
+    variant: {
+      default: "border-b",
+      solid: "border-b",
+      soft: "border-b",
+      pill: "bg-surface p-0.5 rounded-lg border border-border gap-0 w-fit"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+});
+var tabItemVariants = cva(
+  "relative z-[1] font-medium transition-colors duration-200 ease-out cursor-pointer flex items-center gap-2",
+  {
+    variants: {
+      size: {
+        xs: "text-xs px-(--tabs-padding-x-xs) py-(--tabs-padding-y-xs)",
+        sm: "text-sm px-(--tabs-padding-x-sm) py-(--tabs-padding-y-sm)",
+        md: "text-base px-(--tabs-padding-x-md) py-(--tabs-padding-y-md)",
+        lg: "text-lg px-(--tabs-padding-x-lg) py-(--tabs-padding-y-lg)"
+      },
+      variant: {
+        default: "pb-2 -mb-px",
+        solid: "pb-2 -mb-px",
+        soft: "pb-2 -mb-px",
+        pill: "rounded-md"
+      },
+      color: {
+        default: "",
+        primary: "",
+        secondary: "",
+        accent: "",
+        success: "",
+        error: "",
+        warning: "",
+        info: ""
+      },
+      active: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Inactive states (all variants)
+      ...componentColors.map((color) => ({
+        color,
+        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),
+      // Inactive pill variant hover
+      ...componentColors.map((color) => ({
+        variant: "pill",
+        color,
+        active: false,
+        className: "bg-transparent hover:bg-background/50"
+      }))
+    ],
+    defaultVariants: {
+      size: "md",
+      variant: "default",
+      color: "primary",
+      active: false
+    }
+  }
+);
+var Tabs = React.memo(
+  ({
+    items,
+    defaultActiveKey,
+    activeKey: controlledActiveKey,
+    color = "primary",
+    size = "md",
+    variant = "default",
+    onChange,
+    className,
+    classNames
+  }) => {
+    const [internalActiveKey, setInternalActiveKey] = useState(
+      defaultActiveKey || items[0]?.key || ""
+    );
+    const tabListRef = useRef(null);
+    const tabRefs = useRef(/* @__PURE__ */ new Map());
+    const [indicatorStyle, setIndicatorStyle] = useState(
+      {}
+    );
+    const [hasInitialized, setHasInitialized] = useState(false);
+    const uniqueId = useId();
+    const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey;
+    useIsomorphicLayoutEffect(() => {
+      const activeTab = tabRefs.current.get(activeKey);
+      const tabList = tabListRef.current;
+      if (!activeTab || !tabList) return;
+      const listRect = tabList.getBoundingClientRect();
+      const tabRect = activeTab.getBoundingClientRect();
+      const isPill2 = variant === "pill";
+      if (isPill2) {
+        setIndicatorStyle({
+          transform: `translateX(${tabRect.left - listRect.left - 2}px)`,
+          width: `${tabRect.width}px`,
+          height: `${tabRect.height}px`,
+          opacity: 1
+        });
+      } else {
+        setIndicatorStyle({
+          transform: `translateX(${tabRect.left - listRect.left - 2}px)`,
+          width: `${tabRect.width}px`,
+          opacity: 1
+        });
+      }
+      if (!hasInitialized) {
+        requestAnimationFrame(() => setHasInitialized(true));
+      }
+    }, [activeKey, items, variant, size, hasInitialized]);
+    const handleTabClick = useCallback(
+      (key, disabled) => {
+        if (disabled) return;
+        if (controlledActiveKey === void 0) {
+          setInternalActiveKey(key);
+        }
+        onChange?.(key);
+      },
+      [controlledActiveKey, onChange]
+    );
+    const handleKeyDown = useCallback(
+      (event, currentIndex) => {
+        const enabledIndices = items.map((item, i) => !item.disabled ? i : -1).filter((i) => i !== -1);
+        const currentEnabledIndex = enabledIndices.indexOf(currentIndex);
+        let newIndex;
+        switch (event.key) {
+          case "ArrowLeft":
+          case "ArrowUp":
+            event.preventDefault();
+            newIndex = enabledIndices[currentEnabledIndex > 0 ? currentEnabledIndex - 1 : enabledIndices.length - 1];
+            break;
+          case "ArrowRight":
+          case "ArrowDown":
+            event.preventDefault();
+            newIndex = enabledIndices[currentEnabledIndex < enabledIndices.length - 1 ? currentEnabledIndex + 1 : 0];
+            break;
+          case "Home":
+            event.preventDefault();
+            newIndex = enabledIndices[0];
+            break;
+          case "End":
+            event.preventDefault();
+            newIndex = enabledIndices[enabledIndices.length - 1];
+            break;
+        }
+        if (newIndex !== void 0) {
+          const newItem = items[newIndex];
+          if (newItem) {
+            handleTabClick(newItem.key);
+            const btn = tabRefs.current.get(newItem.key);
+            btn?.focus();
+          }
+        }
+      },
+      [items, handleTabClick]
+    );
+    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),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: tabListRef,
+              role: "tablist",
+              "aria-orientation": "horizontal",
+              "data-slot": "tabs_list",
+              className: cn(
+                "tabs_list",
+                tabListVariants({ size, variant }),
+                variant !== "pill" && "border-border",
+                classNames?.list
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "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),
+                      hasInitialized ? "transition-[transform,width] duration-300 ease-out" : "",
+                      classNames?.indicator
+                    ),
+                    style: indicatorStyle,
+                    "aria-hidden": "true"
+                  }
+                ),
+                items.map((item, index) => {
+                  const isActive = item.key === activeKey;
+                  const tabId = `tab-${uniqueId}-${item.key}`;
+                  const panelId = `panel-${uniqueId}-${item.key}`;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      ref: (el) => {
+                        if (el) tabRefs.current.set(item.key, el);
+                        else tabRefs.current.delete(item.key);
+                      },
+                      id: tabId,
+                      role: "tab",
+                      type: "button",
+                      "aria-selected": isActive,
+                      "aria-controls": panelId,
+                      tabIndex: isActive ? 0 : -1,
+                      "data-slot": "tabs_tab",
+                      className: cn(
+                        "tabs_tab",
+                        tabItemVariants({
+                          size,
+                          variant,
+                          color,
+                          active: isActive
+                        }),
+                        item.disabled && "opacity-50 cursor-not-allowed",
+                        classNames?.tab,
+                        isActive && classNames?.tabActive
+                      ),
+                      onClick: () => handleTabClick(item.key, item.disabled),
+                      onKeyDown: (e) => handleKeyDown(e, index),
+                      disabled: item.disabled,
+                      children: [
+                        item.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: item.icon }),
+                        item.label
+                      ]
+                    },
+                    item.key
+                  );
+                })
+              ]
+            }
+          ),
+          activeItem?.content && /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: `panel-${uniqueId}-${activeItem.key}`,
+              role: "tabpanel",
+              "aria-labelledby": `tab-${uniqueId}-${activeItem.key}`,
+              tabIndex: 0,
+              "data-slot": "tabs_panel",
+              className: cn(
+                "tabs_panel",
+                "py-4 animate-in fade-in slide-in-from-bottom-2 duration-300",
+                classNames?.panel
+              ),
+              children: activeItem?.content
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Tabs.displayName = "Tabs";
+var tabs_default = Tabs;
+
+export { tabs_default };
+//# sourceMappingURL=chunk-6G3BMY4N.js.map
+//# sourceMappingURL=chunk-6G3BMY4N.js.map

package/dist/chunk-6G3BMY4N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tabs/index.tsx"],"names":["isPill"],"mappings":"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","file":"chunk-6G3BMY4N.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 { componentColors } from \"../variants\";\nimport type { TabsColor, TabsProps, TabsVariant } from \"./types\";\n\n// Use useLayoutEffect on client, useEffect on server (SSR safe)\nconst useIsomorphicLayoutEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\n// Static class mappings for Tailwind JIT compatibility\nconst pillActiveClasses: Record<string, string> = {\n  default: \"text-text-primary\",\n  primary: \"text-white\",\n  secondary: \"text-white\",\n  accent: \"text-white\",\n  success: \"text-white\",\n  error: \"text-white\",\n  warning: \"text-white\",\n  info: \"text-white\",\n};\n\nconst defaultActiveClasses: Record<string, string> = {\n  default: \"text-text-primary\",\n  primary: \"text-primary\",\n  secondary: \"text-secondary\",\n  accent: \"text-accent\",\n  success: \"text-success\",\n  error: \"text-error\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n};\n\nconst softActiveClasses: Record<string, string> = {\n  default: \"text-text-primary\",\n  primary: \"text-primary\",\n  secondary: \"text-secondary\",\n  accent: \"text-accent\",\n  success: \"text-success\",\n  error: \"text-error\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n};\n\n// Sliding indicator background colors for pill variant\nconst pillIndicatorClasses: Record<string, string> = {\n  default: \"bg-background\",\n  primary: \"bg-primary\",\n  secondary: \"bg-secondary\",\n  accent: \"bg-accent\",\n  success: \"bg-success\",\n  error: \"bg-error\",\n  warning: \"bg-warning\",\n  info: \"bg-info\",\n};\n\n// Sliding indicator colors for underline variants\nconst underlineIndicatorClasses: Record<string, string> = {\n  default: \"bg-border\",\n  primary: \"bg-primary\",\n  secondary: \"bg-secondary\",\n  accent: \"bg-accent\",\n  success: \"bg-success\",\n  error: \"bg-error\",\n  warning: \"bg-warning\",\n  info: \"bg-info\",\n};\n\n// Tab-specific variant generators for DRY\nconst createActiveTabVariants = (\n  variant: TabsVariant,\n  classMap: Record<string, string>,\n) => {\n  return componentColors.map((color) => ({\n    variant,\n    color: color as TabsColor,\n    active: true as const,\n    className: classMap[color] || classMap.default,\n  }));\n};\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\n      ...createActiveTabVariants(\"pill\", pillActiveClasses),\n\n      // Active default variant\n      ...createActiveTabVariants(\"default\", defaultActiveClasses),\n\n      // Active solid variant\n      ...createActiveTabVariants(\"solid\", defaultActiveClasses),\n\n      // Active soft variant\n      ...createActiveTabVariants(\"soft\", softActiveClasses),\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    useIsomorphicLayoutEffect(() => {\n      const activeTab = tabRefs.current.get(activeKey);\n      const tabList = tabListRef.current;\n      if (!activeTab || !tabList) return;\n\n      const listRect = tabList.getBoundingClientRect();\n      const tabRect = activeTab.getBoundingClientRect();\n\n      const isPill = variant === \"pill\";\n\n      if (isPill) {\n        setIndicatorStyle({\n          transform: `translateX(${tabRect.left - listRect.left - 2}px)`,\n          width: `${tabRect.width}px`,\n          height: `${tabRect.height}px`,\n          opacity: 1,\n        });\n      } else {\n        setIndicatorStyle({\n          transform: `translateX(${tabRect.left - listRect.left - 2}px)`,\n          width: `${tabRect.width}px`,\n          opacity: 1,\n        });\n      }\n\n      // Enable transitions after initial positioning\n      if (!hasInitialized) {\n        requestAnimationFrame(() => setHasInitialized(true));\n      }\n    }, [activeKey, items, variant, size, hasInitialized]);\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    // Indicator element class based on variant + color\n    const indicatorColorClass = isPill\n      ? pillIndicatorClasses[color] || pillIndicatorClasses.default\n      : underlineIndicatorClasses[color] || underlineIndicatorClasses.default;\n\n    return (\n      <div\n        data-slot=\"tabs_root\"\n        className={cn(\"tabs_root w-full\", 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\",\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\", indicatorColorClass)\n                : cn(\"bottom-0 h-0.5 rounded-full\", indicatorColorClass),\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            tabIndex={0}\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-6HGUDHHE.js

@@ -0,0 +1,86 @@
+import { cn } from './chunk-NGYLRX6F.js';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var buttonGroupVariants = cva("inline-flex", {
+  variants: {
+    vertical: {
+      true: "flex-col",
+      false: "flex-row"
+    },
+    fullWidth: {
+      true: "w-full [&>*]:flex-1",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    vertical: false,
+    fullWidth: false
+  }
+});
+var attachedHorizontalClasses = "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:border-r-0 [&>*:not(:last-child)]:rounded-r-none";
+var attachedVerticalClasses = "[&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:border-b-0 [&>*:not(:last-child)]:rounded-b-none";
+var gapClasses = {
+  sm: "gap-1",
+  md: "gap-2",
+  lg: "gap-3"
+};
+var ButtonGroup = React.memo(
+  ({
+    vertical = false,
+    attached = true,
+    gap = "md",
+    fullWidth = false,
+    size,
+    variant,
+    color,
+    shape,
+    disabled = false,
+    className,
+    classNames,
+    children,
+    ref,
+    ...props
+  }) => {
+    const enhancedChildren = React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, {
+          // Group props are defaults - child props take precedence
+          size: child.props.size ?? size,
+          variant: child.props.variant ?? variant,
+          color: child.props.color ?? color,
+          shape: child.props.shape ?? shape,
+          // Disabled is additive - if group is disabled, all children are disabled
+          disabled: child.props.disabled || disabled,
+          // Apply button classNames from ButtonGroup
+          className: cn(classNames?.button, child.props.className)
+        });
+      }
+      return child;
+    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn(
+          "buttonGroup_root",
+          buttonGroupVariants({ vertical, fullWidth }),
+          attached ? vertical ? attachedVerticalClasses : attachedHorizontalClasses : gapClasses[gap],
+          classNames?.root,
+          className
+        ),
+        "data-slot": "root",
+        ...props,
+        children: enhancedChildren
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+var button_group_default = ButtonGroup;
+
+export { button_group_default };
+//# sourceMappingURL=chunk-6HGUDHHE.js.map
+//# sourceMappingURL=chunk-6HGUDHHE.js.map

package/dist/chunk-6HGUDHHE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button-group/index.tsx"],"names":[],"mappings":";;;;;AAOA,IAAM,mBAAA,GAAsB,IAAI,aAAA,EAAe;AAAA,EAC7C,QAAA,EAAU;AAAA,IACR,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,UAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACT;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,qBAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,QAAA,EAAU,KAAA;AAAA,IACV,SAAA,EAAW;AAAA;AAEf,CAAC,CAAA;AAKD,IAAM,yBAAA,GACJ,gHAAA;AAEF,IAAM,uBAAA,GACJ,gHAAA;AAKF,IAAM,UAAA,GAAa;AAAA,EACjB,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AA8BA,IAAM,cAAc,KAAA,CAAM,IAAA;AAAA,EACxB,CAAC;AAAA,IACC,QAAA,GAAW,KAAA;AAAA,IACX,QAAA,GAAW,IAAA;AAAA,IACX,GAAA,GAAM,IAAA;AAAA,IACN,SAAA,GAAY,KAAA;AAAA,IACZ,IAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA,GAAW,KAAA;AAAA,IACX,SAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACL,KAAM;AAEJ,IAAA,MAAM,mBAAmB,KAAA,CAAM,QAAA,CAAS,GAAA,CAAI,QAAA,EAAU,CAAC,KAAA,KAAU;AAC/D,MAAA,IAAI,KAAA,CAAM,cAAA,CAA4B,KAAK,CAAA,EAAG;AAC5C,QAAA,OAAO,KAAA,CAAM,aAAa,KAAA,EAAO;AAAA;AAAA,UAE/B,IAAA,EAAM,KAAA,CAAM,KAAA,CAAM,IAAA,IAAQ,IAAA;AAAA,UAC1B,OAAA,EAAS,KAAA,CAAM,KAAA,CAAM,OAAA,IAAW,OAAA;AAAA,UAChC,KAAA,EAAO,KAAA,CAAM,KAAA,CAAM,KAAA,IAAS,KAAA;AAAA,UAC5B,KAAA,EAAO,KAAA,CAAM,KAAA,CAAM,KAAA,IAAS,KAAA;AAAA;AAAA,UAE5B,QAAA,EAAU,KAAA,CAAM,KAAA,CAAM,QAAA,IAAY,QAAA;AAAA;AAAA,UAElC,WAAW,EAAA,CAAG,UAAA,EAAY,MAAA,EAAQ,KAAA,CAAM,MAAM,SAAS;AAAA,SACxD,CAAA;AAAA,MACH;AACA,MAAA,OAAO,KAAA;AAAA,IACT,CAAC,CAAA;AAED,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,SAAA,EAAW,EAAA;AAAA,UACT,kBAAA;AAAA,UACA,mBAAA,CAAoB,EAAE,QAAA,EAAU,SAAA,EAAW,CAAA;AAAA,UAC3C,QAAA,GACI,QAAA,GACE,uBAAA,GACA,yBAAA,GACF,WAAW,GAAG,CAAA;AAAA,UAClB,UAAA,EAAY,IAAA;AAAA,UACZ;AAAA,SACF;AAAA,QACA,WAAA,EAAU,MAAA;AAAA,QACT,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;AAG1B,IAAO,oBAAA,GAAQ","file":"chunk-6HGUDHHE.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport type { ButtonProps } from '../button/types'\nimport { cn } from '../utils'\nimport type { ButtonGroupProps } from './types'\n\nconst buttonGroupVariants = cva('inline-flex', {\n  variants: {\n    vertical: {\n      true: 'flex-col',\n      false: 'flex-row',\n    },\n    fullWidth: {\n      true: 'w-full [&>*]:flex-1',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    vertical: false,\n    fullWidth: false,\n  },\n})\n\n/**\n * Attached button styling - removes inner borders and rounds only outer corners\n */\nconst attachedHorizontalClasses =\n  '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:border-r-0 [&>*:not(:last-child)]:rounded-r-none'\n\nconst attachedVerticalClasses =\n  '[&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:border-b-0 [&>*:not(:last-child)]:rounded-b-none'\n\n/**\n * Gap size classes\n */\nconst gapClasses = {\n  sm: 'gap-1',\n  md: 'gap-2',\n  lg: 'gap-3',\n}\n\n/**\n * ButtonGroup Component\n *\n * Groups multiple buttons together with consistent styling and spacing.\n * Can propagate common props (size, variant, color, disabled) to all child buttons.\n *\n * @example\n * // Basic horizontal group\n * <ButtonGroup>\n *   <Button>Save</Button>\n *   <Button>Cancel</Button>\n * </ButtonGroup>\n *\n * @example\n * // Vertical group with uniform styling\n * <ButtonGroup vertical variant=\"outline\" size=\"sm\">\n *   <Button>Option 1</Button>\n *   <Button>Option 2</Button>\n * </ButtonGroup>\n *\n * @example\n * // Separated buttons with gap\n * <ButtonGroup attached={false} gap=\"md\">\n *   <Button>A</Button>\n *   <Button>B</Button>\n *   <Button>C</Button>\n * </ButtonGroup>\n */\nconst ButtonGroup = React.memo<ButtonGroupProps>(\n  ({\n    vertical = false,\n    attached = true,\n    gap = 'md',\n    fullWidth = false,\n    size,\n    variant,\n    color,\n    shape,\n    disabled = false,\n    className,\n    classNames,\n    children,\n    ref,\n    ...props\n  }) => {\n    // Clone children and inject group props\n    const enhancedChildren = React.Children.map(children, (child) => {\n      if (React.isValidElement<ButtonProps>(child)) {\n        return React.cloneElement(child, {\n          // Group props are defaults - child props take precedence\n          size: child.props.size ?? size,\n          variant: child.props.variant ?? variant,\n          color: child.props.color ?? color,\n          shape: child.props.shape ?? shape,\n          // Disabled is additive - if group is disabled, all children are disabled\n          disabled: child.props.disabled || disabled,\n          // Apply button classNames from ButtonGroup\n          className: cn(classNames?.button, child.props.className),\n        })\n      }\n      return child\n    })\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        className={cn(\n          'buttonGroup_root',\n          buttonGroupVariants({ vertical, fullWidth }),\n          attached\n            ? vertical\n              ? attachedVerticalClasses\n              : attachedHorizontalClasses\n            : gapClasses[gap],\n          classNames?.root,\n          className,\n        )}\n        data-slot=\"root\"\n        {...props}\n      >\n        {enhancedChildren}\n      </div>\n    )\n  },\n)\n\nButtonGroup.displayName = 'ButtonGroup'\n\nexport type * from './types'\nexport default ButtonGroup\n"]}

package/dist/chunk-6JGNJI5T.js

@@ -0,0 +1,174 @@
+import { getValidationStatus, cn, statusMessageVariants } from './chunk-NGYLRX6F.js';
+import { cva } from 'class-variance-authority';
+import React, { useId } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var textareaVariants = cva(
+  "w-full rounded-md focus:border-primary transition-colors text-text-primary placeholder:text-text-secondary/50 disabled:opacity-50 disabled:cursor-not-allowed read-only:bg-surface read-only:cursor-default outline-none",
+  {
+    variants: {
+      variant: {
+        outline: "bg-background border border-border",
+        filled: "bg-surface border border-transparent"
+      },
+      status: {
+        default: "",
+        error: "!border-error focus:!border-error",
+        warning: "!border-warning focus:!border-warning",
+        info: "!border-info focus:!border-info",
+        success: "!border-success focus:!border-success"
+      },
+      size: {
+        xs: "min-h-(--textarea-min-height-xs) p-(--textarea-padding-xs) text-xs",
+        sm: "min-h-(--textarea-min-height-sm) p-(--textarea-padding-sm) text-sm",
+        md: "min-h-(--textarea-min-height-md) p-(--textarea-padding-md) text-base",
+        lg: "min-h-(--textarea-min-height-lg) p-(--textarea-padding-lg) text-lg"
+      },
+      resize: {
+        none: "resize-none",
+        vertical: "resize-y",
+        horizontal: "resize-x",
+        both: "resize"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: "max-w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "outline",
+      status: "default",
+      size: "md",
+      resize: "vertical",
+      fullWidth: true
+    }
+  }
+);
+var Textarea = React.memo(
+  ({
+    variant = "outline",
+    size = "md",
+    label,
+    helperText,
+    messagePosition = "bottom",
+    error,
+    warning,
+    info,
+    success,
+    resize = "vertical",
+    showCount = false,
+    maxLength,
+    autoResize = false,
+    fullWidth = true,
+    className,
+    classNames,
+    value,
+    onChange,
+    ref,
+    ...props
+  }) => {
+    const internalRef = React.useRef(null);
+    const textareaRef = ref || internalRef;
+    const [internalValue, setInternalValue] = React.useState(value || "");
+    const currentValue = value !== void 0 ? value : internalValue;
+    const currentLength = String(currentValue).length;
+    const uniqueId = useId();
+    const textareaId = props.id || `textarea-${uniqueId}`;
+    const helperId = `textarea-helper-${uniqueId}`;
+    const { status, message: helperMessage } = getValidationStatus({
+      error,
+      warning,
+      info,
+      success,
+      helperText
+    });
+    const handleChange = React.useCallback(
+      (e) => {
+        if (value === void 0) {
+          setInternalValue(e.target.value);
+        }
+        onChange?.(e);
+      },
+      [value, onChange]
+    );
+    React.useEffect(() => {
+      if (autoResize && textareaRef.current) {
+        textareaRef.current.style.height = "auto";
+        textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+      }
+    }, [currentValue, autoResize, textareaRef]);
+    const textareaElement = /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: textareaRef,
+        id: textareaId,
+        className: cn(
+          "textarea_textarea",
+          textareaVariants({
+            variant,
+            status,
+            size,
+            resize: autoResize ? "none" : resize,
+            fullWidth
+          }),
+          autoResize && "overflow-hidden",
+          className,
+          classNames?.textarea
+        ),
+        maxLength,
+        value: currentValue,
+        onChange: handleChange,
+        "aria-invalid": status === "error",
+        "aria-describedby": helperMessage ? helperId : void 0,
+        ...props
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "textarea_root",
+          "w-full flex flex-col relative",
+          !fullWidth && "inline-block",
+          classNames?.root
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("textarea_wrapper", "flex gap-2 items-center relative mb-0.5", classNames?.wrapper), children: [
+            label && /* @__PURE__ */ jsxs("label", { htmlFor: textareaId, className: cn("textarea_label", "text-sm font-medium text-text-secondary", classNames?.label), children: [
+              label,
+              props.required && /* @__PURE__ */ jsx("span", { className: cn("textarea_error", "text-error ml-1", classNames?.error), children: "*" })
+            ] }),
+            helperMessage && messagePosition === "top" && /* @__PURE__ */ jsx(
+              "p",
+              {
+                id: helperId,
+                className: cn("textarea_helper", statusMessageVariants({ status }), classNames?.helper),
+                children: helperMessage
+              }
+            ),
+            showCount && maxLength && /* @__PURE__ */ jsxs("span", { className: cn("textarea_counter", "text-xs text-text-secondary absolute right-0", classNames?.counter), children: [
+              currentLength,
+              "/",
+              maxLength
+            ] })
+          ] }),
+          textareaElement,
+          helperMessage && messagePosition === "bottom" && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: helperId,
+              className: cn("textarea_helper", statusMessageVariants({ status }), "mt-0.5", classNames?.helper),
+              children: helperMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var textarea_default = Textarea;
+
+export { textarea_default };
+//# sourceMappingURL=chunk-6JGNJI5T.js.map
+//# sourceMappingURL=chunk-6JGNJI5T.js.map