@mdigital_ui/ui 0.4.0 → 0.4.2

package/dist/chunk-Y4XAXZHB.js

@@ -0,0 +1,42 @@
+import { textColorClasses } from './chunk-POXI7JJ4.js';
+import { cn } from './chunk-NGYLRX6F.js';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var spinnerVariants = cva(
+  "inline-block border border-current border-t-transparent rounded-full animate-spin",
+  {
+    variants: {
+      size: {
+        xs: "w-3 h-3 border",
+        sm: "w-4 h-4 border",
+        md: "w-6 h-6 border-2",
+        lg: "w-8 h-8 border-2"
+      },
+      color: textColorClasses
+    },
+    defaultVariants: {
+      size: "sm",
+      color: "primary"
+    }
+  }
+);
+var Spinner = ({ size = "sm", color = "primary", label, className }) => {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "root", className: cn("spinner_root", "inline-flex flex-col items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: spinnerVariants({ size, color }),
+        role: "status",
+        "aria-label": label || "Loading"
+      }
+    ),
+    label && /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: label })
+  ] });
+};
+Spinner.displayName = "Spinner";
+var spinner_default = Spinner;
+
+export { Spinner, spinner_default };
+//# sourceMappingURL=chunk-Y4XAXZHB.js.map
+//# sourceMappingURL=chunk-Y4XAXZHB.js.map

package/dist/chunk-Y4XAXZHB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spinner/index.tsx"],"names":[],"mappings":";;;;;AAOA,IAAM,eAAA,GAAkB,GAAA;AAAA,EACtB,mFAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,gBAAA;AAAA,QACJ,EAAA,EAAI,gBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,KAAA,EAAO;AAAA,KACT;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,IAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT;AAEJ,CAAA;AAEO,IAAM,OAAA,GAAkC,CAAC,EAAE,IAAA,GAAO,MAAM,KAAA,GAAQ,SAAA,EAAW,KAAA,EAAO,SAAA,EAAU,KAAM;AACvG,EAAA,uBACE,IAAA,CAAC,SAAI,WAAA,EAAU,MAAA,EAAO,WAAW,EAAA,CAAG,cAAA,EAAgB,yCAAA,EAA2C,SAAS,CAAA,EACtG,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,eAAA,CAAgB,EAAE,IAAA,EAAM,OAAO,CAAA;AAAA,QAC1C,IAAA,EAAK,QAAA;AAAA,QACL,cAAY,KAAA,IAAS;AAAA;AAAA,KACvB;AAAA,IACC,KAAA,oBAAS,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,+BAA+B,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACjE,CAAA;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;AAGtB,IAAO,eAAA,GAAQ","file":"chunk-Y4XAXZHB.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport { textColorClasses } from '../variants'\nimport type { SpinnerProps } from './types'\n\nconst spinnerVariants = cva(\n  'inline-block border border-current border-t-transparent rounded-full animate-spin',\n  {\n    variants: {\n      size: {\n        xs: 'w-3 h-3 border',\n        sm: 'w-4 h-4 border',\n        md: 'w-6 h-6 border-2',\n        lg: 'w-8 h-8 border-2',\n      },\n      color: textColorClasses,\n    },\n    defaultVariants: {\n      size: 'sm',\n      color: 'primary',\n    },\n  },\n)\n\nexport const Spinner: React.FC<SpinnerProps> = ({ size = 'sm', color = 'primary', label, className }) => {\n  return (\n    <div data-slot=\"root\" className={cn('spinner_root', 'inline-flex flex-col items-center gap-2', className)}>\n      <div\n        className={spinnerVariants({ size, color })}\n        role=\"status\"\n        aria-label={label || 'Loading'}\n      />\n      {label && <span className=\"text-sm text-text-secondary\">{label}</span>}\n    </div>\n  )\n}\n\nSpinner.displayName = 'Spinner'\n\nexport type * from './types'\nexport default Spinner\n"]}

package/dist/chunk-YJOLLSHH.js

@@ -0,0 +1,132 @@
+import { cn } from './chunk-NGYLRX6F.js';
+import React, { useId } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var scrollbarSizes = {
+  xs: "4px",
+  sm: "6px",
+  md: "8px",
+  lg: "10px"
+};
+var scrollAreaVariants = cva("scroll-area_root relative overflow-hidden", {
+  variants: {
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: ""
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var ScrollArea = React.memo(
+  ({
+    children,
+    maxHeight,
+    maxWidth,
+    direction = "vertical",
+    size = "md",
+    scrollbarVisibility = "auto",
+    className,
+    classNames,
+    ref,
+    style,
+    ...props
+  }) => {
+    const scrollId = useId().replace(/:/g, "");
+    const scrollClass = `scroll-area-${scrollId}`;
+    const thickness = scrollbarSizes[size];
+    const getOverflowClass = () => {
+      if (direction === "vertical") return "overflow-y-auto overflow-x-hidden";
+      if (direction === "horizontal") return "overflow-x-auto overflow-y-hidden";
+      return "overflow-auto";
+    };
+    const viewportStyle = {
+      ...style,
+      ...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 */
+        .${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"};
+        }
+
+        .${scrollClass}::-webkit-scrollbar-track {
+          background: transparent;
+          border-radius: ${thickness};
+        }
+
+        .${scrollClass}::-webkit-scrollbar-thumb {
+          background: hsl(var(--color-border));
+          border-radius: ${thickness};
+          opacity: ${baseOpacity};
+          transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
+        }
+
+        .${scrollClass}::-webkit-scrollbar-thumb:hover {
+          background: hsl(var(--color-border-strong));
+        }
+
+        ${scrollbarVisibility === "hover" ? `
+        .${scrollClass}:hover::-webkit-scrollbar-thumb {
+          opacity: ${hoverOpacity};
+        }
+        ` : ""}
+
+        .${scrollClass}::-webkit-scrollbar-corner {
+          background: transparent;
+        }
+      `;
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          scrollAreaVariants({ size }),
+          classNames?.root,
+          className
+        ),
+        "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
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ScrollArea.displayName = "ScrollArea";
+var scroll_area_default = ScrollArea;
+
+export { scroll_area_default };
+//# sourceMappingURL=chunk-YJOLLSHH.js.map
+//# sourceMappingURL=chunk-YJOLLSHH.js.map

package/dist/chunk-YJOLLSHH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/scroll-area/index.tsx"],"names":[],"mappings":"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","file":"chunk-YJOLLSHH.js","sourcesContent":["'use client'\n\nimport React, { useId } from 'react'\nimport { cva } from 'class-variance-authority'\n\nimport { cn } from '../utils'\nimport type { ScrollAreaProps, ScrollAreaSize } from './types'\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\n    // Determine overflow based on direction\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    // Build style object\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    // Generate scrollbar CSS based on visibility\n    const getScrollbarStyles = () => {\n      const baseOpacity = scrollbarVisibility === 'hover' ? '0' : '1'\n      const hoverOpacity = '1'\n\n      return `\n        /* Firefox */\n        .${scrollClass} {\n          scrollbar-width: thin;\n          scrollbar-color: hsl(var(--color-border)) transparent;\n        }\n\n        /* Webkit (Chrome, Safari, Edge) */\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            ? `\n        .${scrollClass}:hover::-webkit-scrollbar-thumb {\n          opacity: ${hoverOpacity};\n        }\n        `\n            : ''\n        }\n\n        .${scrollClass}::-webkit-scrollbar-corner {\n          background: transparent;\n        }\n      `\n    }\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        <style dangerouslySetInnerHTML={{ __html: getScrollbarStyles() }} />\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-YS5AIY4A.js

@@ -0,0 +1,43 @@
+import { bgSkeletonColorClasses } from './chunk-POXI7JJ4.js';
+import { cn } from './chunk-NGYLRX6F.js';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var skeletonVariants = cva("animate-pulse rounded", {
+  variants: {
+    size: {
+      xs: "h-3",
+      sm: "h-4",
+      md: "h-5",
+      lg: "h-6"
+    },
+    color: bgSkeletonColorClasses
+  },
+  defaultVariants: {
+    size: "md",
+    color: "default"
+  }
+});
+var Skeleton = React.memo(
+  ({ color = "default", size = "md", className, circle = false }) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "root",
+        className: cn(
+          "skeleton_root",
+          skeletonVariants({ size, color }),
+          circle && "rounded-full aspect-square",
+          className
+        )
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+var skeleton_default = Skeleton;
+
+export { skeleton_default };
+//# sourceMappingURL=chunk-YS5AIY4A.js.map
+//# sourceMappingURL=chunk-YS5AIY4A.js.map

package/dist/chunk-YS5AIY4A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/skeleton/index.tsx"],"names":[],"mappings":";;;;;;AAOA,IAAM,gBAAA,GAAmB,IAAI,uBAAA,EAAyB;AAAA,EACpD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,KAAA;AAAA,MACJ,EAAA,EAAI,KAAA;AAAA,MACJ,EAAA,EAAI,KAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,KAAA,EAAO;AAAA,GACT;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAED,IAAM,WAAW,KAAA,CAAM,IAAA;AAAA,EACrB,CAAC,EAAE,KAAA,GAAQ,SAAA,EAAW,OAAO,IAAA,EAAM,SAAA,EAAW,MAAA,GAAS,KAAA,EAAM,KAAM;AACjE,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,MAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,eAAA;AAAA,UACA,gBAAA,CAAiB,EAAE,IAAA,EAAM,KAAA,EAAO,CAAA;AAAA,UAChC,MAAA,IAAU,4BAAA;AAAA,UACV;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AACF,CAAA;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;AAGvB,IAAO,gBAAA,GAAQ","file":"chunk-YS5AIY4A.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport { bgSkeletonColorClasses } from '../variants'\nimport type { SkeletonProps } from './types'\n\nconst skeletonVariants = cva('animate-pulse rounded', {\n  variants: {\n    size: {\n      xs: 'h-3',\n      sm: 'h-4',\n      md: 'h-5',\n      lg: 'h-6',\n    },\n    color: bgSkeletonColorClasses,\n  },\n  defaultVariants: {\n    size: 'md',\n    color: 'default',\n  },\n})\n\nconst Skeleton = React.memo<SkeletonProps>(\n  ({ color = 'default', size = 'md', className, circle = false }) => {\n    return (\n      <div\n        data-slot=\"root\"\n        className={cn(\n          'skeleton_root',\n          skeletonVariants({ size, color }),\n          circle && 'rounded-full aspect-square',\n          className,\n        )}\n      />\n    )\n  },\n)\n\nSkeleton.displayName = 'Skeleton'\n\nexport type * from './types'\nexport default Skeleton\n"]}

package/dist/chunk-YXLIGJTN.js

@@ -0,0 +1,336 @@
+import { cn } from './chunk-NGYLRX6F.js';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cva } from 'class-variance-authority';
+import { XIcon } from 'lucide-react';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Modal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "modal", ...props });
+}
+function ModalTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Trigger,
+    {
+      "data-slot": "modal-trigger",
+      className: cn("modal_trigger", className),
+      ...props
+    }
+  );
+}
+function ModalPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "modal-portal", ...props });
+}
+function ModalClose({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Close,
+    {
+      "data-slot": "modal-close",
+      className: cn("modal_close", className),
+      ...props
+    }
+  );
+}
+var modalOverlayVariants = cva(
+  "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
+  {
+    variants: {
+      opacity: {
+        light: "bg-black/10",
+        medium: "bg-black/20",
+        heavy: "bg-black/40"
+      }
+    },
+    defaultVariants: {
+      opacity: "medium"
+    }
+  }
+);
+function ModalOverlay({
+  className,
+  opacity = "medium",
+  classNames,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "modal-overlay",
+      className: cn(
+        "modal_overlay",
+        modalOverlayVariants({ opacity }),
+        classNames?.overlay,
+        className
+      ),
+      ...props
+    }
+  );
+}
+var modalContentVariants = cva(
+  "bg-background will-change-[transform,_opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-md border duration-200",
+  {
+    variants: {
+      size: {
+        xs: "max-w-(--modal-max-width-xs) gap-(--modal-gap-xs) p-(--modal-padding-xs) sm:max-w-(--modal-max-width-xs)",
+        sm: "max-w-(--modal-max-width-sm) gap-(--modal-gap-sm) p-(--modal-padding-sm) sm:max-w-(--modal-max-width-sm)",
+        md: "max-w-(--modal-max-width-md) gap-(--modal-gap-md) p-(--modal-padding-md) sm:max-w-(--modal-max-width-md)",
+        lg: "max-w-(--modal-max-width-lg) gap-(--modal-gap-lg) p-(--modal-padding-lg) sm:max-w-(--modal-max-width-lg)"
+      },
+      color: {
+        default: "border-border",
+        primary: "border-primary border-l-4",
+        secondary: "border-secondary border-l-4",
+        accent: "border-accent border-l-4",
+        success: "border-success border-l-4",
+        error: "border-error border-l-4",
+        warning: "border-warning border-l-4",
+        info: "border-info border-l-4"
+      },
+      centered: {
+        true: "text-center",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "default",
+      centered: false
+    }
+  }
+);
+var modalCloseVariants = cva(
+  "absolute right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden cursor-pointer disabled:pointer-events-none text-text-secondary hover:text-text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      size: {
+        xs: "top-3 [&_svg]:size-3.5",
+        sm: "top-3 [&_svg]:size-3.5",
+        md: "top-4 [&_svg]:size-4",
+        lg: "top-6 [&_svg]:size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function ModalContent({
+  className,
+  children,
+  showCloseButton = true,
+  size = "md",
+  color = "default",
+  centered = false,
+  classNames,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(ModalPortal, { "data-slot": "modal-portal", children: [
+    /* @__PURE__ */ jsx(ModalOverlay, { classNames }),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "modal-content",
+        className: cn(
+          "modal_content",
+          modalContentVariants({ size, color, centered }),
+          classNames?.content,
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "modal-close",
+              className: cn(
+                "modal_closeButton",
+                modalCloseVariants({ size }),
+                classNames?.closeButton
+              ),
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var modalHeaderVariants = cva("flex flex-col text-text-primary", {
+  variants: {
+    size: {
+      xs: "gap-1.5",
+      sm: "gap-1.5",
+      md: "gap-2",
+      lg: "gap-3"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var ModalHeader = React.memo(function ModalHeader2({ className, size = "md", classNames, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "modal-header",
+      className: cn(
+        "modal_header",
+        modalHeaderVariants({ size }),
+        classNames?.header,
+        className
+      ),
+      ...props
+    }
+  );
+});
+var modalFooterVariants = cva(
+  "flex flex-col-reverse sm:flex-row sm:justify-end",
+  {
+    variants: {
+      size: {
+        xs: "gap-1.5",
+        sm: "gap-1.5",
+        md: "gap-2",
+        lg: "gap-3"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var ModalFooter = React.memo(function ModalFooter2({ className, size = "md", classNames, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "modal-footer",
+      className: cn(
+        "modal_footer",
+        modalFooterVariants({ size }),
+        classNames?.footer,
+        className
+      ),
+      ...props
+    }
+  );
+});
+var modalTitleVariants = cva("leading-none font-semibold text-text-primary", {
+  variants: {
+    size: {
+      xs: "text-base",
+      sm: "text-base",
+      md: "text-lg",
+      lg: "text-2xl"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var ModalTitle = React.memo(function ModalTitle2({ className, size = "md", classNames, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "modal-title",
+      className: cn(
+        "modal_title",
+        modalTitleVariants({ size }),
+        classNames?.title,
+        className
+      ),
+      ...props
+    }
+  );
+});
+var modalDescriptionVariants = cva("text-text-secondary", {
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var ModalDescription = React.memo(function ModalDescription2({ className, size = "md", classNames, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "modal-description",
+      className: cn(
+        "modal_description",
+        modalDescriptionVariants({ size }),
+        classNames?.description,
+        className
+      ),
+      ...props
+    }
+  );
+});
+function ComposedModal({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  size = "md",
+  color = "default",
+  centered = false,
+  showCloseButton = true,
+  hideHeader = false,
+  hideFooter = false,
+  className,
+  contentClassName,
+  classNames
+}) {
+  return /* @__PURE__ */ jsx(Modal, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    ModalContent,
+    {
+      size,
+      color,
+      centered,
+      showCloseButton,
+      className: contentClassName,
+      classNames,
+      children: [
+        !hideHeader && (title || description) && /* @__PURE__ */ jsxs(
+          ModalHeader,
+          {
+            size,
+            className,
+            classNames,
+            children: [
+              title && /* @__PURE__ */ jsx(ModalTitle, { size, classNames, children: title }),
+              description && /* @__PURE__ */ jsx(ModalDescription, { size, classNames, children: description })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn("modal_body", classNames?.body), children }),
+        !hideFooter && footer && /* @__PURE__ */ jsx(ModalFooter, { size, classNames, children: footer })
+      ]
+    }
+  ) });
+}
+var modal_default = ComposedModal;
+
+export { Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, modal_default };
+//# sourceMappingURL=chunk-YXLIGJTN.js.map
+//# sourceMappingURL=chunk-YXLIGJTN.js.map

package/dist/chunk-YXLIGJTN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modal/index.tsx"],"names":["ModalHeader","ModalFooter","ModalTitle","ModalDescription"],"mappings":"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","file":"chunk-YXLIGJTN.js","sourcesContent":["\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { cva } from \"class-variance-authority\";\nimport { XIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../utils\";\nimport type {\n  ComposedModalProps,\n  ModalClassNames,\n  ModalColor,\n  ModalSize,\n} from \"./types\";\n\nfunction Modal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"modal\" {...props} />;\n}\n\nfunction ModalTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return (\n    <DialogPrimitive.Trigger\n      data-slot=\"modal-trigger\"\n      className={cn(\"modal_trigger\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ModalPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"modal-portal\" {...props} />;\n}\n\nfunction ModalClose({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return (\n    <DialogPrimitive.Close\n      data-slot=\"modal-close\"\n      className={cn(\"modal_close\", className)}\n      {...props}\n    />\n  );\n}\n\nconst modalOverlayVariants = cva(\n  \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm\",\n  {\n    variants: {\n      opacity: {\n        light: \"bg-black/10\",\n        medium: \"bg-black/20\",\n        heavy: \"bg-black/40\",\n      },\n    },\n    defaultVariants: {\n      opacity: \"medium\",\n    },\n  },\n);\n\nfunction ModalOverlay({\n  className,\n  opacity = \"medium\",\n  classNames,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay> & {\n  opacity?: \"light\" | \"medium\" | \"heavy\";\n  classNames?: ModalClassNames;\n}) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"modal-overlay\"\n      className={cn(\n        \"modal_overlay\",\n        modalOverlayVariants({ opacity }),\n        classNames?.overlay,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst modalContentVariants = cva(\n  \"bg-background will-change-[transform,_opacity] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-md border duration-200\",\n  {\n    variants: {\n      size: {\n        xs: \"max-w-(--modal-max-width-xs) gap-(--modal-gap-xs) p-(--modal-padding-xs) sm:max-w-(--modal-max-width-xs)\",\n        sm: \"max-w-(--modal-max-width-sm) gap-(--modal-gap-sm) p-(--modal-padding-sm) sm:max-w-(--modal-max-width-sm)\",\n        md: \"max-w-(--modal-max-width-md) gap-(--modal-gap-md) p-(--modal-padding-md) sm:max-w-(--modal-max-width-md)\",\n        lg: \"max-w-(--modal-max-width-lg) gap-(--modal-gap-lg) p-(--modal-padding-lg) sm:max-w-(--modal-max-width-lg)\",\n      },\n      color: {\n        default: \"border-border\",\n        primary: \"border-primary border-l-4\",\n        secondary: \"border-secondary border-l-4\",\n        accent: \"border-accent border-l-4\",\n        success: \"border-success border-l-4\",\n        error: \"border-error border-l-4\",\n        warning: \"border-warning border-l-4\",\n        info: \"border-info border-l-4\",\n      },\n      centered: {\n        true: \"text-center\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      color: \"default\",\n      centered: false,\n    },\n  },\n);\n\nconst modalCloseVariants = cva(\n  \"absolute right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden cursor-pointer disabled:pointer-events-none text-text-secondary hover:text-text-primary [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      size: {\n        xs: \"top-3 [&_svg]:size-3.5\",\n        sm: \"top-3 [&_svg]:size-3.5\",\n        md: \"top-4 [&_svg]:size-4\",\n        lg: \"top-6 [&_svg]:size-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  },\n);\n\nfunction ModalContent({\n  className,\n  children,\n  showCloseButton = true,\n  size = \"md\",\n  color = \"default\",\n  centered = false,\n  classNames,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean;\n  size?: ModalSize;\n  color?: ModalColor;\n  centered?: boolean;\n  classNames?: ModalClassNames;\n}) {\n  return (\n    <ModalPortal data-slot=\"modal-portal\">\n      <ModalOverlay classNames={classNames} />\n      <DialogPrimitive.Content\n        data-slot=\"modal-content\"\n        className={cn(\n          \"modal_content\",\n          modalContentVariants({ size, color, centered }),\n          classNames?.content,\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"modal-close\"\n            className={cn(\n              \"modal_closeButton\",\n              modalCloseVariants({ size }),\n              classNames?.closeButton,\n            )}\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </ModalPortal>\n  );\n}\n\nconst modalHeaderVariants = cva(\"flex flex-col text-text-primary\", {\n  variants: {\n    size: {\n      xs: \"gap-1.5\",\n      sm: \"gap-1.5\",\n      md: \"gap-2\",\n      lg: \"gap-3\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\n// Performance optimization: Memoize Modal subcomponents to prevent unnecessary\n// re-renders when modal state changes but subcomponent props haven't changed\nconst ModalHeader = React.memo<\n  React.ComponentProps<\"div\"> & {\n    size?: ModalSize;\n    classNames?: ModalClassNames;\n  }\n>(function ModalHeader({ className, size = \"md\", classNames, ...props }) {\n  return (\n    <div\n      data-slot=\"modal-header\"\n      className={cn(\n        \"modal_header\",\n        modalHeaderVariants({ size }),\n        classNames?.header,\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst modalFooterVariants = cva(\n  \"flex flex-col-reverse sm:flex-row sm:justify-end\",\n  {\n    variants: {\n      size: {\n        xs: \"gap-1.5\",\n        sm: \"gap-1.5\",\n        md: \"gap-2\",\n        lg: \"gap-3\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  },\n);\n\nconst ModalFooter = React.memo<\n  React.ComponentProps<\"div\"> & {\n    size?: ModalSize;\n    classNames?: ModalClassNames;\n  }\n>(function ModalFooter({ className, size = \"md\", classNames, ...props }) {\n  return (\n    <div\n      data-slot=\"modal-footer\"\n      className={cn(\n        \"modal_footer\",\n        modalFooterVariants({ size }),\n        classNames?.footer,\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst modalTitleVariants = cva(\"leading-none font-semibold text-text-primary\", {\n  variants: {\n    size: {\n      xs: \"text-base\",\n      sm: \"text-base\",\n      md: \"text-lg\",\n      lg: \"text-2xl\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nconst ModalTitle = React.memo<\n  React.ComponentProps<typeof DialogPrimitive.Title> & {\n    size?: ModalSize;\n    classNames?: ModalClassNames;\n  }\n>(function ModalTitle({ className, size = \"md\", classNames, ...props }) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"modal-title\"\n      className={cn(\n        \"modal_title\",\n        modalTitleVariants({ size }),\n        classNames?.title,\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nconst modalDescriptionVariants = cva(\"text-text-secondary\", {\n  variants: {\n    size: {\n      xs: \"text-xs\",\n      sm: \"text-xs\",\n      md: \"text-sm\",\n      lg: \"text-base\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nconst ModalDescription = React.memo<\n  React.ComponentProps<typeof DialogPrimitive.Description> & {\n    size?: ModalSize;\n    classNames?: ModalClassNames;\n  }\n>(function ModalDescription({ className, size = \"md\", classNames, ...props }) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"modal-description\"\n      className={cn(\n        \"modal_description\",\n        modalDescriptionVariants({ size }),\n        classNames?.description,\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nfunction ComposedModal({\n  open,\n  onOpenChange,\n  title,\n  description,\n  children,\n  footer,\n  size = \"md\",\n  color = \"default\",\n  centered = false,\n  showCloseButton = true,\n  hideHeader = false,\n  hideFooter = false,\n  className,\n  contentClassName,\n  classNames,\n}: ComposedModalProps) {\n  return (\n    <Modal open={open} onOpenChange={onOpenChange}>\n      <ModalContent\n        size={size}\n        color={color}\n        centered={centered}\n        showCloseButton={showCloseButton}\n        className={contentClassName}\n        classNames={classNames}\n      >\n        {!hideHeader && (title || description) && (\n          <ModalHeader\n            size={size}\n            className={className}\n            classNames={classNames}\n          >\n            {title && (\n              <ModalTitle size={size} classNames={classNames}>\n                {title}\n              </ModalTitle>\n            )}\n            {description && (\n              <ModalDescription size={size} classNames={classNames}>\n                {description}\n              </ModalDescription>\n            )}\n          </ModalHeader>\n        )}\n        <div className={cn(\"modal_body\", classNames?.body)}>{children}</div>\n        {!hideFooter && footer && (\n          <ModalFooter size={size} classNames={classNames}>\n            {footer}\n          </ModalFooter>\n        )}\n      </ModalContent>\n    </Modal>\n  );\n}\n\nexport type * from \"./types\";\nexport {\n  Modal,\n  ModalClose,\n  ModalContent,\n  ModalDescription,\n  ModalFooter,\n  ModalHeader,\n  ModalOverlay,\n  ModalPortal,\n  ModalTitle,\n  ModalTrigger,\n};\nexport default ComposedModal;\n"]}