@mdigital_ui/ui 0.4.2 → 0.4.3

package/dist/{chunk-ERRZ2CSG.js → chunk-SUNCSPDF.js}

@@ -1,8 +1,9 @@
-import { useRipple, RippleContainer } from './chunk-OFUPJH35.js';
-import { cn } from './chunk-NGYLRX6F.js';
+import { useRipple, RippleContainer } from './chunk-4TEZWGX7.js';
+import { colorVars } from './chunk-GLJDHW73.js';
+import { cn } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
-import React, { useState } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useState, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 var toggleGroupVariants = cva(
   "inline-flex border rounded-md overflow-hidden",
@@ -21,7 +22,7 @@ var toggleGroupVariants = cva(
   }
 );
 var toggleItemVariants = cva(
-  "font-medium transition-colors cursor-pointer border-r last:border-r-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset",
+  "font-medium transition-colors cursor-pointer border-r last:border-r-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
   {
     variants: {
       size: {
@@ -36,66 +37,26 @@ var toggleItemVariants = cva(
     }
   }
 );
-var inactiveHoverClasses = {
-  default: "text-text-secondary hover:text-text-primary hover:bg-surface",
-  primary: "text-text-secondary hover:text-primary hover:bg-primary/10",
-  secondary: "text-text-secondary hover:text-secondary hover:bg-secondary/10",
-  accent: "text-text-secondary hover:text-accent hover:bg-accent/10",
-  success: "text-text-secondary hover:text-success hover:bg-success/10",
-  error: "text-text-secondary hover:text-error hover:bg-error/10",
-  warning: "text-text-secondary hover:text-warning hover:bg-warning/10",
-  info: "text-text-secondary hover:text-info hover:bg-info/10"
-};
-var activeSolidClasses = {
-  default: "bg-border text-text-primary",
-  primary: "bg-primary text-background",
-  secondary: "bg-secondary text-background",
-  accent: "bg-accent text-background",
-  success: "bg-success text-background",
-  error: "bg-error text-background",
-  warning: "bg-warning text-background",
-  info: "bg-info text-background"
-};
-var activeSoftClasses = {
-  default: "bg-border/20 text-text-primary",
-  primary: "bg-primary/20 text-primary",
-  secondary: "bg-secondary/20 text-secondary",
-  accent: "bg-accent/20 text-accent",
-  success: "bg-success/20 text-success",
-  error: "bg-error/20 text-error",
-  warning: "bg-warning/20 text-warning",
-  info: "bg-info/20 text-info"
-};
-var activeDefaultClasses = {
-  default: "bg-surface text-text-primary",
-  primary: "border-primary bg-primary/10 text-primary",
-  secondary: "border-secondary bg-secondary/10 text-secondary",
-  accent: "border-accent bg-accent/10 text-accent",
-  success: "border-success bg-success/10 text-success",
-  error: "border-error bg-error/10 text-error",
-  warning: "border-warning bg-warning/10 text-warning",
-  info: "border-info bg-info/10 text-info"
-};
 var getToggleClasses = (color, variant, isActive) => {
-  const toggleColor = color;
+  const baseColor = colorVars[color] || colorVars.default;
   if (!isActive) {
-    return inactiveHoverClasses[toggleColor] || inactiveHoverClasses.default;
+    return cn(baseColor, "text-text-secondary hover:text-slot hover:bg-slot-10");
   }
   if (variant === "solid") {
-    return activeSolidClasses[toggleColor] || activeSolidClasses.default;
+    return cn(baseColor, "bg-slot text-slot-fg");
   }
   if (variant === "soft") {
-    return activeSoftClasses[toggleColor] || activeSoftClasses.default;
+    return cn(baseColor, "bg-slot-20 text-slot");
   }
-  return activeDefaultClasses[toggleColor] || activeDefaultClasses.default;
+  return cn(baseColor, "border-slot bg-slot-10 text-slot");
 };
-var ToggleItemButton = ({ children, disabled, className, ...props }) => {
+var ToggleItemButton = React.memo(({ children, disabled, className, ...props }) => {
   const { ripples, onPointerDown, onKeyDown, onAnimationEnd } = useRipple(!disabled);
   return /* @__PURE__ */ jsxs("button", { className: cn(className, "relative overflow-hidden"), onPointerDown, onKeyDown, disabled, ...props, children: [
     children,
     /* @__PURE__ */ jsx(RippleContainer, { ripples, onAnimationEnd })
   ] });
-};
+});
 var ToggleGroup = React.memo(
   ({
     options,
@@ -110,30 +71,36 @@ var ToggleGroup = React.memo(
     disabled = false,
     className,
     centered = false,
-    classNames
+    classNames,
+    ref
   }) => {
     const [internalValue, setInternalValue] = useState(
       defaultValue || (multiple ? [] : options[0]?.value || "")
     );
     const value = controlledValue !== void 0 ? controlledValue : internalValue;
-    const handleToggleClick = (optionValue, optionDisabled) => {
-      if (disabled || optionDisabled) return;
-      let newValue;
-      if (multiple) {
-        const currentValues = Array.isArray(value) ? value : [];
-        if (currentValues.includes(optionValue)) {
-          newValue = currentValues.filter((v) => v !== optionValue);
-        } else {
-          newValue = [...currentValues, optionValue];
-        }
-      } else {
-        newValue = optionValue;
-      }
-      if (controlledValue === void 0) {
-        setInternalValue(newValue);
-      }
-      onChange?.(newValue);
-    };
+    const handleToggleClick = useCallback(
+      (e) => {
+        const optionValue = e.currentTarget.dataset.value;
+        const optionDisabled = e.currentTarget.dataset.disabled === "true";
+        if (!optionValue || disabled || optionDisabled) return;
+        setInternalValue((prevValue) => {
+          const currentValues = Array.isArray(prevValue) ? prevValue : [];
+          let newValue;
+          if (multiple) {
+            if (currentValues.includes(optionValue)) {
+              newValue = currentValues.filter((v) => v !== optionValue);
+            } else {
+              newValue = [...currentValues, optionValue];
+            }
+          } else {
+            newValue = optionValue;
+          }
+          onChange?.(newValue);
+          return controlledValue !== void 0 ? prevValue : newValue;
+        });
+      },
+      [disabled, multiple, onChange, controlledValue]
+    );
     const isActive = (optionValue) => {
       if (multiple && Array.isArray(value)) {
         return value.includes(optionValue);
@@ -143,6 +110,8 @@ var ToggleGroup = React.memo(
     return /* @__PURE__ */ jsx(
       "div",
       {
+        "data-slot": "root",
+        ref,
         role: "group",
         className: cn(
           "toggleGroup_root",
@@ -169,7 +138,9 @@ var ToggleGroup = React.memo(
                 centered && "text-center",
                 classNames?.item
               ),
-              onClick: () => handleToggleClick(option.value, option.disabled),
+              "data-value": option.value,
+              "data-disabled": option.disabled,
+              onClick: handleToggleClick,
               disabled: isDisabled,
               "aria-pressed": active,
               children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -188,5 +159,5 @@ ToggleGroup.displayName = "ToggleGroup";
 var toggle_group_default = ToggleGroup;
 
 export { ToggleGroup, toggle_group_default };
-//# sourceMappingURL=chunk-ERRZ2CSG.js.map
-//# sourceMappingURL=chunk-ERRZ2CSG.js.map
+//# sourceMappingURL=chunk-SUNCSPDF.js.map
+//# sourceMappingURL=chunk-SUNCSPDF.js.map

package/dist/chunk-SUNCSPDF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toggle-group/index.tsx"],"names":[],"mappings":"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","file":"chunk-SUNCSPDF.js","sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport React, { useState, useCallback } from 'react'\n\nimport { useRipple, RippleContainer } from '../hooks/useRipple'\nimport { cn } from '../utils'\nimport { colorVars } from '../variants'\nimport type { ToggleGroupProps } from './types'\n\nconst toggleGroupVariants = cva(\n  'inline-flex border rounded-md overflow-hidden',\n  {\n    variants: {\n      size: {\n        xs: 'gap-0',\n        sm: 'gap-0',\n        md: 'gap-0',\n        lg: 'gap-0',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nconst toggleItemVariants = cva(\n  'font-medium transition-colors cursor-pointer border-r last:border-r-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n  {\n    variants: {\n      size: {\n        xs: 'h-(--toggle-height-xs) px-(--toggle-padding-x-xs) text-xs',\n        sm: 'h-(--toggle-height-sm) px-(--toggle-padding-x-sm) text-sm',\n        md: 'h-(--toggle-height-md) px-(--toggle-padding-x-md) text-base',\n        lg: 'h-(--toggle-height-lg) px-(--toggle-padding-x-lg) text-lg',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\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 ToggleItemButton = React.memo<{ children: React.ReactNode; disabled?: boolean; className?: string; [key: string]: any }>(({ children, disabled, className, ...props }) => {\n  const { ripples, onPointerDown, onKeyDown, onAnimationEnd } = useRipple(!disabled)\n  return (\n    <button className={cn(className, 'relative overflow-hidden')} onPointerDown={onPointerDown} onKeyDown={onKeyDown} disabled={disabled} {...props}>\n      {children}\n      <RippleContainer ripples={ripples} onAnimationEnd={onAnimationEnd} />\n    </button>\n  )\n})\n\nexport const ToggleGroup = React.memo<ToggleGroupProps>(\n  ({\n    options,\n    value: controlledValue,\n    defaultValue,\n    multiple = false,\n    color = 'primary',\n    size = 'md',\n    variant = 'default',\n    onChange,\n    fullWidth = false,\n    disabled = false,\n    className,\n    centered = false,\n    classNames,\n    ref,\n  }) => {\n    const [internalValue, setInternalValue] = useState<string | string[]>(\n      defaultValue || (multiple ? [] : options[0]?.value || ''),\n    )\n\n    const value =\n      controlledValue !== undefined ? controlledValue : internalValue\n\n    const handleToggleClick = useCallback(\n      (e: React.MouseEvent<HTMLButtonElement>) => {\n        const optionValue = e.currentTarget.dataset.value\n        const optionDisabled = e.currentTarget.dataset.disabled === 'true'\n\n        if (!optionValue || disabled || optionDisabled) return\n\n        setInternalValue((prevValue) => {\n          const currentValues = Array.isArray(prevValue) ? prevValue : []\n          let newValue: string | string[]\n\n          if (multiple) {\n            if (currentValues.includes(optionValue)) {\n              newValue = currentValues.filter((v) => v !== optionValue)\n            } else {\n              newValue = [...currentValues, optionValue]\n            }\n          } else {\n            newValue = optionValue\n          }\n\n          onChange?.(newValue)\n          return controlledValue !== undefined ? prevValue : newValue\n        })\n      },\n      [disabled, multiple, onChange, controlledValue],\n    )\n\n    const isActive = (optionValue: string) => {\n      if (multiple && Array.isArray(value)) {\n        return value.includes(optionValue)\n      }\n      return optionValue === value\n    }\n\n    return (\n      <div\n        data-slot=\"root\"\n        ref={ref}\n        role=\"group\"\n        className={cn(\n          'toggleGroup_root',\n          toggleGroupVariants({ size }),\n          'border-border bg-background',\n          classNames?.root,\n          className,\n          fullWidth && 'grid w-full',\n        )}\n        style={fullWidth ? { gridTemplateColumns: `repeat(${options.length}, 1fr)` } : undefined}\n      >\n        {options.map((option) => {\n          const active = isActive(option.value)\n          const isDisabled = disabled || option.disabled\n\n          return (\n            <ToggleItemButton\n              type=\"button\"\n              key={option.value}\n              className={cn(\n                'toggleGroup_item',\n                toggleItemVariants({ size }),\n                getToggleClasses(color, variant, active),\n\n                'border-border flex items-center justify-center',\n                isDisabled && 'opacity-50 cursor-not-allowed',\n                centered && 'text-center',\n                classNames?.item,\n              )}\n              data-value={option.value}\n              data-disabled={option.disabled}\n              onClick={handleToggleClick}\n              disabled={isDisabled}\n              aria-pressed={active}\n            >\n              <div className=\"flex items-center gap-2\">\n                {option.icon}\n                {option.label}\n              </div>\n            </ToggleItemButton>\n          )\n        })}\n      </div>\n    )\n  },\n)\n\nToggleGroup.displayName = 'ToggleGroup'\n\nexport type * from './types'\nexport default ToggleGroup\n"]}

package/dist/{chunk-YJOLLSHH.js → chunk-TS2PG6Z4.js}

@@ -1,8 +1,9 @@
-import { cn } from './chunk-NGYLRX6F.js';
-import React, { useId } from 'react';
+import { cn } from './chunk-RAS6HUEI.js';
+import React, { useId, useRef, useEffect } from 'react';
 import { cva } from 'class-variance-authority';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 
+var stylesInjected = /* @__PURE__ */ new Set();
 var scrollbarSizes = {
   xs: "4px",
   sm: "6px",
@@ -39,6 +40,7 @@ var ScrollArea = React.memo(
     const scrollId = useId().replace(/:/g, "");
     const scrollClass = `scroll-area-${scrollId}`;
     const thickness = scrollbarSizes[size];
+    const styleElRef = useRef(null);
     const getOverflowClass = () => {
       if (direction === "vertical") return "overflow-y-auto overflow-x-hidden";
       if (direction === "horizontal") return "overflow-x-auto overflow-y-hidden";
@@ -49,17 +51,16 @@ var ScrollArea = React.memo(
       ...maxHeight && { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight },
       ...maxWidth && { maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth }
     };
-    const getScrollbarStyles = () => {
-      const baseOpacity = scrollbarVisibility === "hover" ? "0" : "1";
-      const hoverOpacity = "1";
-      return `
-        /* Firefox */
+    useEffect(() => {
+      if (!stylesInjected.has(scrollClass)) {
+        const baseOpacity = scrollbarVisibility === "hover" ? "0" : "1";
+        const hoverOpacity = "1";
+        const scrollbarStyles = `
         .${scrollClass} {
           scrollbar-width: thin;
           scrollbar-color: hsl(var(--color-border)) transparent;
         }
 
-        /* Webkit (Chrome, Safari, Edge) */
         .${scrollClass}::-webkit-scrollbar {
           width: ${direction !== "horizontal" ? thickness : "0"};
           height: ${direction !== "vertical" ? thickness : "0"};
@@ -81,18 +82,28 @@ var ScrollArea = React.memo(
           background: hsl(var(--color-border-strong));
         }
 
-        ${scrollbarVisibility === "hover" ? `
-        .${scrollClass}:hover::-webkit-scrollbar-thumb {
+        ${scrollbarVisibility === "hover" ? `.${scrollClass}:hover::-webkit-scrollbar-thumb {
           opacity: ${hoverOpacity};
-        }
-        ` : ""}
+        }` : ""}
 
         .${scrollClass}::-webkit-scrollbar-corner {
           background: transparent;
         }
       `;
-    };
-    return /* @__PURE__ */ jsxs(
+        const styleEl = document.createElement("style");
+        styleEl.textContent = scrollbarStyles;
+        document.head.appendChild(styleEl);
+        styleElRef.current = styleEl;
+        stylesInjected.add(scrollClass);
+      }
+      return () => {
+        if (styleElRef.current) {
+          document.head.removeChild(styleElRef.current);
+          stylesInjected.delete(scrollClass);
+        }
+      };
+    }, [scrollClass, direction, thickness, scrollbarVisibility]);
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -103,23 +114,20 @@ var ScrollArea = React.memo(
         ),
         "data-slot": "root",
         ...props,
-        children: [
-          /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: getScrollbarStyles() } }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "scroll-area_viewport",
-                scrollClass,
-                getOverflowClass(),
-                classNames?.viewport
-              ),
-              style: viewportStyle,
-              "data-slot": "viewport",
-              children
-            }
-          )
-        ]
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "scroll-area_viewport",
+              scrollClass,
+              getOverflowClass(),
+              classNames?.viewport
+            ),
+            style: viewportStyle,
+            "data-slot": "viewport",
+            children
+          }
+        )
       }
     );
   }
@@ -128,5 +136,5 @@ ScrollArea.displayName = "ScrollArea";
 var scroll_area_default = ScrollArea;
 
 export { scroll_area_default };
-//# sourceMappingURL=chunk-YJOLLSHH.js.map
-//# sourceMappingURL=chunk-YJOLLSHH.js.map
+//# sourceMappingURL=chunk-TS2PG6Z4.js.map
+//# sourceMappingURL=chunk-TS2PG6Z4.js.map

package/dist/chunk-TS2PG6Z4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/scroll-area/index.tsx"],"names":[],"mappings":";;;;;AAQA,IAAM,cAAA,uBAAqB,GAAA,EAAY;AAKvC,IAAM,cAAA,GAAiD;AAAA,EACrD,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAKA,IAAM,kBAAA,GAAqB,IAAI,2CAAA,EAA6C;AAAA,EAC1E,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,EAAA;AAAA,MACJ,EAAA,EAAI,EAAA;AAAA,MACJ,EAAA,EAAI,EAAA;AAAA,MACJ,EAAA,EAAI;AAAA;AACN,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAMD,IAAM,aAAa,KAAA,CAAM,IAAA;AAAA,EACvB,CAAC;AAAA,IACC,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA,GAAY,UAAA;AAAA,IACZ,IAAA,GAAO,IAAA;AAAA,IACP,mBAAA,GAAsB,MAAA;AAAA,IACtB,SAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,GACL,KAAM;AACJ,IAAA,MAAM,QAAA,GAAW,KAAA,EAAM,CAAE,OAAA,CAAQ,MAAM,EAAE,CAAA;AACzC,IAAA,MAAM,WAAA,GAAc,eAAe,QAAQ,CAAA,CAAA;AAC3C,IAAA,MAAM,SAAA,GAAY,eAAe,IAAI,CAAA;AACrC,IAAA,MAAM,UAAA,GAAa,OAAgC,IAAI,CAAA;AAEvD,IAAA,MAAM,mBAAmB,MAAM;AAC7B,MAAA,IAAI,SAAA,KAAc,YAAY,OAAO,mCAAA;AACrC,MAAA,IAAI,SAAA,KAAc,cAAc,OAAO,mCAAA;AACvC,MAAA,OAAO,eAAA;AAAA,IACT,CAAA;AAEA,IAAA,MAAM,aAAA,GAAqC;AAAA,MACzC,GAAG,KAAA;AAAA,MACH,GAAI,SAAA,IAAa,EAAE,SAAA,EAAW,OAAO,cAAc,QAAA,GAAW,CAAA,EAAG,SAAS,CAAA,EAAA,CAAA,GAAO,SAAA,EAAU;AAAA,MAC3F,GAAI,QAAA,IAAY,EAAE,QAAA,EAAU,OAAO,aAAa,QAAA,GAAW,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAA,GAAO,QAAA;AAAS,KACxF;AAEA,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,cAAA,CAAe,GAAA,CAAI,WAAW,CAAA,EAAG;AACpC,QAAA,MAAM,WAAA,GAAc,mBAAA,KAAwB,OAAA,GAAU,GAAA,GAAM,GAAA;AAC5D,QAAA,MAAM,YAAA,GAAe,GAAA;AAErB,QAAA,MAAM,eAAA,GAAkB;AAAA,SAAA,EACrB,WAAW,CAAA;AAAA;AAAA;AAAA;;AAAA,SAAA,EAKX,WAAW,CAAA;AAAA,iBAAA,EACH,SAAA,KAAc,YAAA,GAAe,SAAA,GAAY,GAAG,CAAA;AAAA,kBAAA,EAC3C,SAAA,KAAc,UAAA,GAAa,SAAA,GAAY,GAAG,CAAA;AAAA;;AAAA,SAAA,EAGnD,WAAW,CAAA;AAAA;AAAA,yBAAA,EAEK,SAAS,CAAA;AAAA;;AAAA,SAAA,EAGzB,WAAW,CAAA;AAAA;AAAA,yBAAA,EAEK,SAAS,CAAA;AAAA,mBAAA,EACf,WAAW,CAAA;AAAA;AAAA;;AAAA,SAAA,EAIrB,WAAW,CAAA;AAAA;AAAA;;AAAA,QAAA,EAKZ,mBAAA,KAAwB,OAAA,GACpB,CAAA,CAAA,EAAI,WAAW,CAAA;AAAA,mBAAA,EACR,YAAY,CAAA;AAAA,SAAA,CAAA,GAEnB,EACN;;AAAA,SAAA,EAEG,WAAW,CAAA;AAAA;AAAA;AAAA,MAAA,CAAA;AAKd,QAAA,MAAM,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AAC9C,QAAA,OAAA,CAAQ,WAAA,GAAc,eAAA;AACtB,QAAA,QAAA,CAAS,IAAA,CAAK,YAAY,OAAO,CAAA;AACjC,QAAA,UAAA,CAAW,OAAA,GAAU,OAAA;AACrB,QAAA,cAAA,CAAe,IAAI,WAAW,CAAA;AAAA,MAChC;AAEA,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,WAAW,OAAA,EAAS;AACtB,UAAA,QAAA,CAAS,IAAA,CAAK,WAAA,CAAY,UAAA,CAAW,OAAO,CAAA;AAC5C,UAAA,cAAA,CAAe,OAAO,WAAW,CAAA;AAAA,QACnC;AAAA,MACF,CAAA;AAAA,IACF,GAAG,CAAC,WAAA,EAAa,SAAA,EAAW,SAAA,EAAW,mBAAmB,CAAC,CAAA;AAE3D,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,kBAAA,CAAmB,EAAE,IAAA,EAAM,CAAA;AAAA,UAC3B,UAAA,EAAY,IAAA;AAAA,UACZ;AAAA,SACF;AAAA,QACA,WAAA,EAAU,MAAA;AAAA,QACT,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,sBAAA;AAAA,cACA,WAAA;AAAA,cACA,gBAAA,EAAiB;AAAA,cACjB,UAAA,EAAY;AAAA,aACd;AAAA,YACA,KAAA,EAAO,aAAA;AAAA,YACP,WAAA,EAAU,UAAA;AAAA,YAET;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF,CAAA;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAGzB,IAAO,mBAAA,GAAQ","file":"chunk-TS2PG6Z4.js","sourcesContent":["'use client'\n\nimport React, { useEffect, useId, useRef } from 'react'\nimport { cva } from 'class-variance-authority'\n\nimport { cn } from '../utils'\nimport type { ScrollAreaProps, ScrollAreaSize } from './types'\n\nconst stylesInjected = new Set<string>()\n\n/**\n * Scrollbar thickness by size\n */\nconst scrollbarSizes: Record<ScrollAreaSize, string> = {\n  xs: '4px',\n  sm: '6px',\n  md: '8px',\n  lg: '10px',\n}\n\n/**\n * ScrollArea root variants\n */\nconst scrollAreaVariants = cva('scroll-area_root relative overflow-hidden', {\n  variants: {\n    size: {\n      xs: '',\n      sm: '',\n      md: '',\n      lg: '',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/**\n * ScrollArea Component\n * Provides a customizable scrollable container with styled scrollbars\n */\nconst ScrollArea = React.memo<ScrollAreaProps>(\n  ({\n    children,\n    maxHeight,\n    maxWidth,\n    direction = 'vertical',\n    size = 'md',\n    scrollbarVisibility = 'auto',\n    className,\n    classNames,\n    ref,\n    style,\n    ...props\n  }) => {\n    const scrollId = useId().replace(/:/g, '')\n    const scrollClass = `scroll-area-${scrollId}`\n    const thickness = scrollbarSizes[size]\n    const styleElRef = useRef<HTMLStyleElement | null>(null)\n\n    const getOverflowClass = () => {\n      if (direction === 'vertical') return 'overflow-y-auto overflow-x-hidden'\n      if (direction === 'horizontal') return 'overflow-x-auto overflow-y-hidden'\n      return 'overflow-auto'\n    }\n\n    const viewportStyle: React.CSSProperties = {\n      ...style,\n      ...(maxHeight && { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight }),\n      ...(maxWidth && { maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth }),\n    }\n\n    useEffect(() => {\n      if (!stylesInjected.has(scrollClass)) {\n        const baseOpacity = scrollbarVisibility === 'hover' ? '0' : '1'\n        const hoverOpacity = '1'\n\n        const scrollbarStyles = `\n        .${scrollClass} {\n          scrollbar-width: thin;\n          scrollbar-color: hsl(var(--color-border)) transparent;\n        }\n\n        .${scrollClass}::-webkit-scrollbar {\n          width: ${direction !== 'horizontal' ? thickness : '0'};\n          height: ${direction !== 'vertical' ? thickness : '0'};\n        }\n\n        .${scrollClass}::-webkit-scrollbar-track {\n          background: transparent;\n          border-radius: ${thickness};\n        }\n\n        .${scrollClass}::-webkit-scrollbar-thumb {\n          background: hsl(var(--color-border));\n          border-radius: ${thickness};\n          opacity: ${baseOpacity};\n          transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;\n        }\n\n        .${scrollClass}::-webkit-scrollbar-thumb:hover {\n          background: hsl(var(--color-border-strong));\n        }\n\n        ${\n          scrollbarVisibility === 'hover'\n            ? `.${scrollClass}:hover::-webkit-scrollbar-thumb {\n          opacity: ${hoverOpacity};\n        }`\n            : ''\n        }\n\n        .${scrollClass}::-webkit-scrollbar-corner {\n          background: transparent;\n        }\n      `\n\n        const styleEl = document.createElement('style')\n        styleEl.textContent = scrollbarStyles\n        document.head.appendChild(styleEl)\n        styleElRef.current = styleEl\n        stylesInjected.add(scrollClass)\n      }\n\n      return () => {\n        if (styleElRef.current) {\n          document.head.removeChild(styleElRef.current)\n          stylesInjected.delete(scrollClass)\n        }\n      }\n    }, [scrollClass, direction, thickness, scrollbarVisibility])\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          scrollAreaVariants({ size }),\n          classNames?.root,\n          className,\n        )}\n        data-slot=\"root\"\n        {...props}\n      >\n        <div\n          className={cn(\n            'scroll-area_viewport',\n            scrollClass,\n            getOverflowClass(),\n            classNames?.viewport,\n          )}\n          style={viewportStyle}\n          data-slot=\"viewport\"\n        >\n          {children}\n        </div>\n      </div>\n    )\n  },\n)\n\nScrollArea.displayName = 'ScrollArea'\n\nexport type * from './types'\nexport default ScrollArea\n"]}

package/dist/{chunk-X3YNHX77.js → chunk-U3RHF7QF.js}

@@ -1,5 +1,5 @@
-import { createNotificationColorVariants, componentColors } from './chunk-POXI7JJ4.js';
-import { cn, iconSizes } from './chunk-NGYLRX6F.js';
+import { colorVars } from './chunk-GLJDHW73.js';
+import { cn, iconSizes } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
 import { X } from 'lucide-react';
 import React from 'react';
@@ -10,34 +10,19 @@ var notificationVariants = cva(
   {
     variants: {
       variant: {
-        default: "",
-        solid: "",
-        outline: "border-2 border-l-6",
-        soft: "border-l-6"
-      },
-      color: {
-        default: "",
-        primary: "",
-        secondary: "",
-        accent: "",
-        success: "",
-        error: "",
-        warning: "",
-        info: ""
+        default: "bg-slot border border-slot text-slot-fg",
+        solid: "bg-slot text-slot-fg",
+        outline: "bg-background border border-slot border-l-4 border-l-slot text-slot",
+        soft: "bg-slot-10 border-l-4 border-l-slot text-slot"
       },
+      color: colorVars,
       size: {
-        xs: "p-2 text-xs gap-2",
-        sm: "p-3 text-sm gap-2.5",
-        md: "p-4 text-base gap-3",
-        lg: "p-5 text-lg gap-3.5"
+        xs: "p-2 gap-2",
+        sm: "p-3 gap-2.5",
+        md: "p-4 gap-3",
+        lg: "p-5 gap-3.5"
       }
     },
-    compoundVariants: createNotificationColorVariants(componentColors, [
-      "default",
-      "solid",
-      "outline",
-      "soft"
-    ]),
     defaultVariants: {
       variant: "default",
       color: "default",
@@ -45,6 +30,18 @@ var notificationVariants = cva(
     }
   }
 );
+var titleSizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg"
+};
+var descriptionSizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-sm",
+  lg: "text-base"
+};
 var Notification = React.memo(
   ({
     title,
@@ -52,16 +49,18 @@ var Notification = React.memo(
     variant = "default",
     color = "default",
     size = "md",
-    closable = true,
+    closable,
     onClose,
     action,
     className,
     classNames,
     children
   }) => {
+    const isClosable = closable ?? onClose !== void 0;
     return /* @__PURE__ */ jsxs(
       "div",
       {
+        "data-slot": "root",
         role: "alert",
         "aria-live": "polite",
         "aria-atomic": "true",
@@ -73,20 +72,20 @@ var Notification = React.memo(
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: cn("flex-1 min-w-0", "notification_content", classNames?.content), children: [
-            title && /* @__PURE__ */ jsx("div", { className: cn("font-semibold mb-1 text-sm", "notification_title", classNames?.title), children: title }),
-            description && /* @__PURE__ */ jsx("div", { className: cn("text-sm opacity-90", "notification_description", classNames?.description), children: description }),
+            title && /* @__PURE__ */ jsx("div", { className: cn("font-semibold mb-1", titleSizeClasses[size], "notification_title", classNames?.title), children: title }),
+            description && /* @__PURE__ */ jsx("div", { className: cn("opacity-90", descriptionSizeClasses[size], "notification_description", classNames?.description), children: description }),
             children && /* @__PURE__ */ jsx("div", { className: "mt-2", children }),
             action && /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
                 onClick: action.onClick,
-                className: cn("mt-2 text-sm font-medium underline hover:no-underline", "notification_action", classNames?.action),
+                className: cn("mt-2 font-medium underline hover:no-underline", descriptionSizeClasses[size], "notification_action", classNames?.action),
                 children: action.label
               }
             )
           ] }),
-          closable && /* @__PURE__ */ jsx(
+          isClosable && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -105,5 +104,5 @@ Notification.displayName = "Notification";
 var notification_default = Notification;
 
 export { notification_default };
-//# sourceMappingURL=chunk-X3YNHX77.js.map
-//# sourceMappingURL=chunk-X3YNHX77.js.map
+//# sourceMappingURL=chunk-U3RHF7QF.js.map
+//# sourceMappingURL=chunk-U3RHF7QF.js.map

package/dist/chunk-U3RHF7QF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/notification/index.tsx"],"names":[],"mappings":"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","file":"chunk-U3RHF7QF.js","sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport { X } from 'lucide-react'\nimport React from 'react'\n\nimport { cn, iconSizes } from '../utils'\nimport { colorVars } from '../variants'\nimport type { NotificationProps } from './types'\n\nconst notificationVariants = cva(\n  'relative flex gap-3 rounded-md transition-colors',\n  {\n    variants: {\n      variant: {\n        default: 'bg-slot border border-slot text-slot-fg',\n        solid: 'bg-slot text-slot-fg',\n        outline: 'bg-background border border-slot border-l-4 border-l-slot text-slot',\n        soft: 'bg-slot-10 border-l-4 border-l-slot text-slot',\n      },\n      color: colorVars,\n      size: {\n        xs: 'p-2 gap-2',\n        sm: 'p-3 gap-2.5',\n        md: 'p-4 gap-3',\n        lg: 'p-5 gap-3.5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      color: 'default',\n      size: 'md',\n    },\n  },\n)\n\nconst titleSizeClasses = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n}\n\nconst descriptionSizeClasses = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-sm',\n  lg: 'text-base',\n}\n\nconst Notification = React.memo<NotificationProps>(\n  ({\n    title,\n    description,\n    variant = 'default',\n    color = 'default',\n    size = 'md',\n    closable,\n    onClose,\n    action,\n    className,\n    classNames,\n    children,\n  }) => {\n    const isClosable = closable ?? (onClose !== undefined)\n\n    return (\n      <div\n        data-slot=\"root\"\n        role=\"alert\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        className={cn(\n          'notification_root',\n          notificationVariants({ variant, color, size }),\n          className,\n          classNames?.root,\n        )}\n      >\n        <div className={cn('flex-1 min-w-0', 'notification_content', classNames?.content)}>\n          {title && <div className={cn('font-semibold mb-1', titleSizeClasses[size], 'notification_title', classNames?.title)}>{title}</div>}\n          {description && (\n            <div className={cn('opacity-90', descriptionSizeClasses[size], 'notification_description', classNames?.description)}>{description}</div>\n          )}\n          {children && <div className=\"mt-2\">{children}</div>}\n          {action && (\n            <button\n              type=\"button\"\n              onClick={action.onClick}\n              className={cn('mt-2 font-medium underline hover:no-underline', descriptionSizeClasses[size], 'notification_action', classNames?.action)}\n            >\n              {action.label}\n            </button>\n          )}\n        </div>\n\n        {isClosable && (\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={cn('shrink-0 rounded-sm opacity-70 hover:opacity-100 transition-opacity', 'notification_closeButton', classNames?.closeButton)}\n            aria-label=\"Close notification\"\n          >\n            <X className={cn(iconSizes[size], 'notification_icon', classNames?.icon)} aria-hidden=\"true\" />\n          </button>\n        )}\n      </div>\n    )\n  },\n)\n\nNotification.displayName = 'Notification'\n\nexport type * from './types'\nexport default Notification\n"]}