@intlayer/design-system 6.1.5 → 6.1.6

package/dist/components/Button/Button.d.ts

@@ -1,6 +1,9 @@
 import { VariantProps } from 'class-variance-authority';
 import { LucideIcon } from 'lucide-react';
 import { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';
+/**
+ * Button size variants for different use cases
+ */
 export declare enum ButtonSize {
     SM = "sm",
     MD = "md",
@@ -11,10 +14,16 @@ export declare enum ButtonSize {
     ICON_LG = "icon-lg",
     ICON_XL = "icon-xl"
 }
+/**
+ * Icon positioning within the button
+ */
 export declare enum ButtonIconPosition {
     LEFT = "left",
     RIGHT = "right"
 }
+/**
+ * Button visual style variants
+ */
 export declare enum ButtonVariant {
     DEFAULT = "default",
     NONE = "none",
@@ -24,6 +33,9 @@ export declare enum ButtonVariant {
     HOVERABLE = "hoverable",
     INPUT = "input"
 }
+/**
+ * Button color themes that work with the design system
+ */
 export declare enum ButtonColor {
     PRIMARY = "primary",
     SECONDARY = "secondary",
@@ -37,11 +49,17 @@ export declare enum ButtonColor {
     SUCCESS = "success",
     CUSTOM = "custom"
 }
+/**
+ * Text alignment options for button content
+ */
 export declare enum ButtonTextAlign {
     LEFT = "left",
     CENTER = "center",
     RIGHT = "right"
 }
+/**
+ * Enhanced button variants with improved accessibility and focus states
+ */
 declare const buttonVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl" | null | undefined;
     color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text-inverse" | "error" | "success" | "custom" | null | undefined;
@@ -51,18 +69,94 @@ declare const buttonVariants: (props?: ({
     hasIconLeft?: boolean | null | undefined;
     hasIconRight?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Enhanced Button component props with comprehensive type safety and accessibility features
+ */
 export type ButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
     /**
-     * Optional icon to be displayed on the button
+     * Accessible label for screen readers and assistive technologies.
+     * This is required for accessibility compliance.
      */
     label: string;
+    /**
+     * Optional icon to display on the left side of the button
+     */
     Icon?: FC | LucideIcon;
+    /**
+     * Optional icon to display on the right side of the button
+     */
     IconRight?: FC | LucideIcon;
+    /**
+     * Additional CSS classes for icon styling
+     */
     iconClassName?: string;
+    /**
+     * Shows loading spinner and disables button interaction when true
+     */
     isLoading?: boolean;
+    /**
+     * Marks the button as active (useful for navigation or toggle states)
+     */
     isActive?: boolean;
+    /**
+     * Makes the button span the full width of its container
+     */
     isFullWidth?: boolean;
+    /**
+     * Additional description for complex buttons (optional)
+     */
+    'aria-describedby'?: string;
+    /**
+     * Expanded state for collapsible sections (optional)
+     */
+    'aria-expanded'?: boolean;
+    /**
+     * Controls whether the button has popup/menu (optional)
+     */
+    'aria-haspopup'?: boolean | 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /**
+     * Indicates if button controls are currently pressed (for toggle buttons)
+     */
+    'aria-pressed'?: boolean;
 };
+/**
+ * Button Component - A comprehensive, accessible button component
+ *
+ * Features:
+ * - Full accessibility compliance with ARIA attributes
+ * - Multiple variants and sizes for different use cases
+ * - Icon support (left and right positioning)
+ * - Loading states with spinner
+ * - Keyboard navigation support
+ * - Focus management with visible indicators
+ * - Responsive design adaptations
+ *
+ * @example
+ * ```tsx
+ * // Basic button
+ * <Button label="Click me">Click me</Button>
+ *
+ * // Button with icon and loading state
+ * <Button
+ *   label="Save document"
+ *   Icon={SaveIcon}
+ *   isLoading={saving}
+ *   disabled={!hasChanges}
+ * >
+ *   Save
+ * </Button>
+ *
+ * // Destructive action button
+ * <Button
+ *   variant={ButtonVariant.OUTLINE}
+ *   color={ButtonColor.DESTRUCTIVE}
+ *   label="Delete item permanently"
+ *   aria-describedby="delete-warning"
+ * >
+ *   Delete
+ * </Button>
+ * ```
+ */
 export declare const Button: FC<ButtonProps>;
 export {};
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AAGf,oBAAY,UAAU;IACpB,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAwBD,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,cAAc,mBAAmB;IACjC,SAAS,cAAc;IACvB,KAAK,UAAU;CAChB;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;IACb,YAAY,iBAAiB;IAC7B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,MAAM,WAAW;CAClB;AAED,oBAAY,eAAe;IACzB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,QAAA,MAAM,cAAc;;;;;;;;8EA6EnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,iBAAiB,CACzC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEJ,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA+ElC,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AAGf;;GAEG;AACH,oBAAY,UAAU;IACpB,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED;;GAEG;AACH,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAwBD;;GAEG;AACH,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,cAAc,mBAAmB;IACjC,SAAS,cAAc;IACvB,KAAK,UAAU;CAChB;AAED;;GAEG;AACH,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;IACb,YAAY,iBAAiB;IAC7B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,MAAM,WAAW;CAClB;AAED;;GAEG;AACH,oBAAY,eAAe;IACzB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED;;GAEG;AACH,QAAA,MAAM,cAAc;;;;;;;;8EAwFnB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,CACzC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,GACC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC;IAE5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,eAAe,CAAC,EACZ,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,CAAC;IAEb;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAqGlC,CAAC"}

package/dist/components/Button/Button.mjs

@@ -70,7 +70,7 @@ var ButtonTextAlign = /* @__PURE__ */ ((ButtonTextAlign2) => {
   return ButtonTextAlign2;
 })(ButtonTextAlign || {});
 const buttonVariants = cva(
-  "relative cursor-pointer truncate whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
+  "relative cursor-pointer truncate whitespace-nowrap font-medium transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       size: {
@@ -84,22 +84,22 @@ const buttonVariants = cva(
         [`${"icon-xl"}`]: "p-3"
       },
       color: {
-        [`${"primary"}`]: "text-primary *:text-text-light",
-        [`${"secondary"}`]: "text-secondary *:text-text-light",
-        [`${"destructive"}`]: "text-destructive *:text-text-light",
-        [`${"neutral"}`]: "text-neutral *:text-text-light",
-        [`${"light"}`]: "text-white *:text-text-light",
-        [`${"dark"}`]: "text-neutral-800 *:text-text-light",
-        [`${"text"}`]: "text-text *:text-text-opposite",
-        [`${"text-inverse"}`]: "text-text-opposite *:text-text",
-        [`${"error"}`]: "text-error *:text-text-light",
-        [`${"success"}`]: "text-success *:text-text-light",
-        [`${"custom"}`]: ""
+        [`${"primary"}`]: "text-primary *:text-text-light focus:ring-primary-500",
+        [`${"secondary"}`]: "text-secondary *:text-text-light focus:ring-secondary-500",
+        [`${"destructive"}`]: "text-destructive *:text-text-light focus:ring-destructive-500",
+        [`${"neutral"}`]: "text-neutral *:text-text-light focus:ring-neutral-500",
+        [`${"light"}`]: "text-white *:text-text-light focus:ring-white/50",
+        [`${"dark"}`]: "text-neutral-800 *:text-text-light focus:ring-neutral-800/50",
+        [`${"text"}`]: "text-text *:text-text-opposite focus:ring-neutral-500",
+        [`${"text-inverse"}`]: "text-text-opposite *:text-text focus:ring-neutral-500",
+        [`${"error"}`]: "text-error *:text-text-light focus:ring-error/50",
+        [`${"success"}`]: "text-success *:text-text-light focus:ring-success/50",
+        [`${"custom"}`]: "focus:ring-primary-500"
       },
       variant: {
-        [`${"default"}`]: "rounded-lg bg-current",
+        [`${"default"}`]: "rounded-lg bg-current hover:bg-current/90",
         [`${"none"}`]: "border-none bg-current/0 text-inherit hover:bg-current/0",
-        [`${"outline"}`]: "*:!text-current rounded-lg border-[1.5px] bg-current/0 hover:bg-current/30",
+        [`${"outline"}`]: "*:!text-current rounded-lg border-[1.5px] bg-current/0 hover:bg-current/30 border-current",
         [`${"link"}`]: "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline",
         [`${"invisible-link"}`]: "*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent",
         [`${"hoverable"}`]: "*:!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5",
@@ -147,25 +147,38 @@ const Button = ({
   Icon,
   IconRight,
   iconClassName,
-  isLoading,
-  isActive,
+  isLoading = false,
+  isActive = false,
   isFullWidth = false,
   textAlign,
   disabled,
   label,
   className,
   type = "button",
+  "aria-describedby": ariaDescribedBy,
+  "aria-expanded": ariaExpanded,
+  "aria-haspopup": ariaHasPopup,
+  "aria-pressed": ariaPressed,
   ...props
 }) => {
   const isLink = variant === "link" || variant === "invisible-link";
+  const isIconOnly = !children && (Icon || IconRight);
+  const accessibilityProps = {
+    "aria-label": isIconOnly ? label : void 0,
+    "aria-labelledby": !isIconOnly ? void 0 : void 0,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-pressed": isActive !== void 0 ? isActive : ariaPressed,
+    "aria-busy": isLoading,
+    "aria-current": isActive ? "page" : void 0,
+    "aria-disabled": disabled || isLoading
+  };
   return /* @__PURE__ */ jsxs(
     "button",
     {
       disabled: isLoading || disabled,
-      "aria-current": isActive ? "page" : void 0,
-      "aria-label": label,
-      "aria-busy": isLoading,
-      role: isLink ? "link" : void 0,
+      role: isLink ? "link" : "button",
       type,
       className: buttonVariants({
         variant,
@@ -174,13 +187,14 @@ const Button = ({
         isFullWidth,
         textAlign: textAlign ?? (IconRight ? "left" : "center"),
         hasIconLeft: Boolean(
-          typeof children !== "undefined" && (typeof Icon !== "undefined" || typeof isLoading !== "undefined")
+          typeof children !== "undefined" && (typeof Icon !== "undefined" || isLoading)
         ),
         hasIconRight: Boolean(
           typeof children !== "undefined" && typeof IconRight !== "undefined"
         ),
         className
       }),
+      ...accessibilityProps,
       ...props,
       children: [
         Icon && !isLoading && /* @__PURE__ */ jsx(
@@ -191,7 +205,8 @@ const Button = ({
               className: iconClassName,
               position: "left"
               /* LEFT */
-            })
+            }),
+            "aria-hidden": "true"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -203,10 +218,13 @@ const Button = ({
               position: "left"
               /* LEFT */
             }),
-            isLoading: isLoading ?? false
+            isLoading,
+            "aria-hidden": "true",
+            "data-testid": "loader"
           }
         ),
-        /* @__PURE__ */ jsx("span", { children }),
+        children && /* @__PURE__ */ jsx("span", { children }),
+        !children && isIconOnly && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
         IconRight && /* @__PURE__ */ jsx(
           IconRight,
           {
@@ -215,7 +233,8 @@ const Button = ({
               className: iconClassName,
               position: "right"
               /* RIGHT */
-            })
+            }),
+            "aria-hidden": "true"
           }
         )
       ]

package/dist/components/Button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { Loader } from '../Loader';\n\nexport enum ButtonSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  ICON_SM = 'icon-sm',\n  ICON_MD = 'icon-md',\n  ICON_LG = 'icon-lg',\n  ICON_XL = 'icon-xl',\n}\n\nexport enum ButtonIconPosition {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nconst buttonIconVariants = cva('', {\n  variants: {\n    size: {\n      [`${ButtonSize.SM}`]: 'size-3 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.MD}`]: 'size-4 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.LG}`]: 'size-5 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.XL}`]: 'size-6 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.ICON_SM}`]: 'size-3',\n      [`${ButtonSize.ICON_MD}`]: 'size-4',\n      [`${ButtonSize.ICON_LG}`]: 'size-5',\n      [`${ButtonSize.ICON_XL}`]: 'size-6',\n    },\n    position: {\n      [`${ButtonIconPosition.LEFT}`]: 'left-3',\n      [`${ButtonIconPosition.RIGHT}`]: 'right-3',\n    },\n  },\n  defaultVariants: {\n    size: ButtonSize.MD,\n  },\n});\n\nexport enum ButtonVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  LINK = 'link',\n  INVISIBLE_LINK = 'invisible-link',\n  HOVERABLE = 'hoverable',\n  INPUT = 'input',\n}\n\nexport enum ButtonColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  TEXT_INVERSE = 'text-inverse',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\nexport enum ButtonTextAlign {\n  LEFT = 'left',\n  CENTER = 'center',\n  RIGHT = 'right',\n}\n\nconst buttonVariants = cva(\n  'relative cursor-pointer truncate whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        [`${ButtonSize.SM}`]: 'min-h-7 px-3 max-md:py-1 text-xs',\n        [`${ButtonSize.MD}`]: 'min-h-8 px-6 max-md:py-2 text-sm',\n        [`${ButtonSize.LG}`]: 'min-h-10 px-8 max-md:py-3 text-lg',\n        [`${ButtonSize.XL}`]: 'min-h-11 px-10 max-md:py-4 text-xl',\n        [`${ButtonSize.ICON_SM}`]: 'p-1.5',\n        [`${ButtonSize.ICON_MD}`]: 'p-1.5',\n        [`${ButtonSize.ICON_LG}`]: 'p-2',\n        [`${ButtonSize.ICON_XL}`]: 'p-3',\n      },\n      color: {\n        [`${ButtonColor.PRIMARY}`]: 'text-primary *:text-text-light',\n        [`${ButtonColor.SECONDARY}`]: 'text-secondary *:text-text-light',\n        [`${ButtonColor.DESTRUCTIVE}`]: 'text-destructive *:text-text-light',\n        [`${ButtonColor.NEUTRAL}`]: 'text-neutral *:text-text-light',\n        [`${ButtonColor.LIGHT}`]: 'text-white *:text-text-light',\n        [`${ButtonColor.DARK}`]: 'text-neutral-800 *:text-text-light',\n        [`${ButtonColor.TEXT}`]: 'text-text *:text-text-opposite',\n        [`${ButtonColor.TEXT_INVERSE}`]: 'text-text-opposite *:text-text',\n        [`${ButtonColor.ERROR}`]: 'text-error *:text-text-light',\n        [`${ButtonColor.SUCCESS}`]: 'text-success *:text-text-light',\n        [`${ButtonColor.CUSTOM}`]: '',\n      },\n      variant: {\n        [`${ButtonVariant.DEFAULT}`]: 'rounded-lg bg-current',\n        [`${ButtonVariant.NONE}`]:\n          'border-none bg-current/0 text-inherit hover:bg-current/0',\n        [`${ButtonVariant.OUTLINE}`]:\n          '*:!text-current rounded-lg border-[1.5px] bg-current/0 hover:bg-current/30',\n        [`${ButtonVariant.LINK}`]:\n          '*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline',\n        [`${ButtonVariant.INVISIBLE_LINK}`]:\n          '*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent',\n        [`${ButtonVariant.HOVERABLE}`]:\n          '*:!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5',\n        [`${ButtonVariant.INPUT}`]: [\n          '*:!text-current w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n          'aria-[invalid=true]:border-error',\n          'disabled:opacity-50',\n        ],\n      },\n\n      textAlign: {\n        [`${ButtonTextAlign.LEFT}`]: 'text-left',\n        [`${ButtonTextAlign.CENTER}`]: 'text-center',\n        [`${ButtonTextAlign.RIGHT}`]: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n\n      hasIconLeft: {\n        true: 'px-12',\n        false: '',\n      },\n      hasIconRight: {\n        true: 'pr-8',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: ButtonVariant.DEFAULT,\n      size: ButtonSize.MD,\n      color: ButtonColor.CUSTOM,\n      textAlign: ButtonTextAlign.CENTER,\n      isFullWidth: false,\n      hasIconRight: false,\n      hasIconLeft: false,\n    },\n  }\n);\n\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Optional icon to be displayed on the button\n     */\n    label: string;\n    Icon?: FC | LucideIcon;\n    IconRight?: FC | LucideIcon;\n    iconClassName?: string;\n    isLoading?: boolean;\n    isActive?: boolean;\n    isFullWidth?: boolean;\n  };\n\nexport const Button: FC<ButtonProps> = ({\n  variant,\n  size,\n  color,\n  children,\n  Icon,\n  IconRight,\n  iconClassName,\n  isLoading,\n  isActive,\n  isFullWidth = false,\n  textAlign,\n  disabled,\n  label,\n  className,\n  type = 'button',\n  ...props\n}) => {\n  const isLink = variant === 'link' || variant === 'invisible-link';\n\n  return (\n    <button\n      disabled={isLoading || disabled}\n      aria-current={isActive ? 'page' : undefined}\n      aria-label={label}\n      aria-busy={isLoading}\n      role={isLink ? 'link' : undefined}\n      type={type}\n      className={buttonVariants({\n        variant,\n        size,\n        color,\n        isFullWidth,\n        textAlign:\n          textAlign ??\n          (IconRight ? ButtonTextAlign.LEFT : ButtonTextAlign.CENTER),\n        hasIconLeft: Boolean(\n          typeof children !== 'undefined' &&\n            (typeof Icon !== 'undefined' || typeof isLoading !== 'undefined')\n        ),\n        hasIconRight: Boolean(\n          typeof children !== 'undefined' && typeof IconRight !== 'undefined'\n        ),\n        className,\n      })}\n      {...props}\n    >\n      {Icon && !isLoading && (\n        <Icon\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: ButtonIconPosition.LEFT,\n          })}\n        />\n      )}\n\n      <Loader\n        className={buttonIconVariants({\n          size,\n          className: iconClassName,\n          position: ButtonIconPosition.LEFT,\n        })}\n        isLoading={isLoading ?? false}\n      />\n\n      <span>{children}</span>\n\n      {IconRight && (\n        <IconRight\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: ButtonIconPosition.RIGHT,\n          })}\n        />\n      )}\n    </button>\n  );\n};\n"],"names":["ButtonSize","ButtonIconPosition","ButtonVariant","ButtonColor","ButtonTextAlign"],"mappings":"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"}
+{"version":3,"file":"Button.mjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  type ButtonHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { Loader } from '../Loader';\n\n/**\n * Button size variants for different use cases\n */\nexport enum ButtonSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  ICON_SM = 'icon-sm',\n  ICON_MD = 'icon-md',\n  ICON_LG = 'icon-lg',\n  ICON_XL = 'icon-xl',\n}\n\n/**\n * Icon positioning within the button\n */\nexport enum ButtonIconPosition {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nconst buttonIconVariants = cva('', {\n  variants: {\n    size: {\n      [`${ButtonSize.SM}`]: 'size-3 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.MD}`]: 'size-4 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.LG}`]: 'size-5 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.XL}`]: 'size-6 absolute top-1/2 -translate-y-1/2',\n      [`${ButtonSize.ICON_SM}`]: 'size-3',\n      [`${ButtonSize.ICON_MD}`]: 'size-4',\n      [`${ButtonSize.ICON_LG}`]: 'size-5',\n      [`${ButtonSize.ICON_XL}`]: 'size-6',\n    },\n    position: {\n      [`${ButtonIconPosition.LEFT}`]: 'left-3',\n      [`${ButtonIconPosition.RIGHT}`]: 'right-3',\n    },\n  },\n  defaultVariants: {\n    size: ButtonSize.MD,\n  },\n});\n\n/**\n * Button visual style variants\n */\nexport enum ButtonVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  LINK = 'link',\n  INVISIBLE_LINK = 'invisible-link',\n  HOVERABLE = 'hoverable',\n  INPUT = 'input',\n}\n\n/**\n * Button color themes that work with the design system\n */\nexport enum ButtonColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  TEXT_INVERSE = 'text-inverse',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\n/**\n * Text alignment options for button content\n */\nexport enum ButtonTextAlign {\n  LEFT = 'left',\n  CENTER = 'center',\n  RIGHT = 'right',\n}\n\n/**\n * Enhanced button variants with improved accessibility and focus states\n */\nconst buttonVariants = cva(\n  'relative cursor-pointer truncate whitespace-nowrap font-medium transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        [`${ButtonSize.SM}`]: 'min-h-7 px-3 max-md:py-1 text-xs',\n        [`${ButtonSize.MD}`]: 'min-h-8 px-6 max-md:py-2 text-sm',\n        [`${ButtonSize.LG}`]: 'min-h-10 px-8 max-md:py-3 text-lg',\n        [`${ButtonSize.XL}`]: 'min-h-11 px-10 max-md:py-4 text-xl',\n        [`${ButtonSize.ICON_SM}`]: 'p-1.5',\n        [`${ButtonSize.ICON_MD}`]: 'p-1.5',\n        [`${ButtonSize.ICON_LG}`]: 'p-2',\n        [`${ButtonSize.ICON_XL}`]: 'p-3',\n      },\n      color: {\n        [`${ButtonColor.PRIMARY}`]:\n          'text-primary *:text-text-light focus:ring-primary-500',\n        [`${ButtonColor.SECONDARY}`]:\n          'text-secondary *:text-text-light focus:ring-secondary-500',\n        [`${ButtonColor.DESTRUCTIVE}`]:\n          'text-destructive *:text-text-light focus:ring-destructive-500',\n        [`${ButtonColor.NEUTRAL}`]:\n          'text-neutral *:text-text-light focus:ring-neutral-500',\n        [`${ButtonColor.LIGHT}`]:\n          'text-white *:text-text-light focus:ring-white/50',\n        [`${ButtonColor.DARK}`]:\n          'text-neutral-800 *:text-text-light focus:ring-neutral-800/50',\n        [`${ButtonColor.TEXT}`]:\n          'text-text *:text-text-opposite focus:ring-neutral-500',\n        [`${ButtonColor.TEXT_INVERSE}`]:\n          'text-text-opposite *:text-text focus:ring-neutral-500',\n        [`${ButtonColor.ERROR}`]:\n          'text-error *:text-text-light focus:ring-error/50',\n        [`${ButtonColor.SUCCESS}`]:\n          'text-success *:text-text-light focus:ring-success/50',\n        [`${ButtonColor.CUSTOM}`]: 'focus:ring-primary-500',\n      },\n      variant: {\n        [`${ButtonVariant.DEFAULT}`]:\n          'rounded-lg bg-current hover:bg-current/90',\n        [`${ButtonVariant.NONE}`]:\n          'border-none bg-current/0 text-inherit hover:bg-current/0',\n        [`${ButtonVariant.OUTLINE}`]:\n          '*:!text-current rounded-lg border-[1.5px] bg-current/0 hover:bg-current/30 border-current',\n        [`${ButtonVariant.LINK}`]:\n          '*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent hover:underline',\n        [`${ButtonVariant.INVISIBLE_LINK}`]:\n          '*:!text-current h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 hover:bg-transparent',\n        [`${ButtonVariant.HOVERABLE}`]:\n          '*:!text-current rounded-lg border-none bg-current/0 transition hover:bg-current/10 aria-[current]:bg-current/5',\n        [`${ButtonVariant.INPUT}`]: [\n          '*:!text-current w-full select-text resize-none rounded-xl border-2 bg-input-background text-sm text-input-text shadow-none outline-0 transition-all',\n          'border-input-border hover:border-input-border-hover focus:border-input-border-focus focus:outline-0 focus:[box-shadow:none]',\n          'aria-[invalid=true]:border-error',\n          'disabled:opacity-50',\n        ],\n      },\n\n      textAlign: {\n        [`${ButtonTextAlign.LEFT}`]: 'text-left',\n        [`${ButtonTextAlign.CENTER}`]: 'text-center',\n        [`${ButtonTextAlign.RIGHT}`]: 'text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n\n      hasIconLeft: {\n        true: 'px-12',\n        false: '',\n      },\n      hasIconRight: {\n        true: 'pr-8',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: ButtonVariant.DEFAULT,\n      size: ButtonSize.MD,\n      color: ButtonColor.CUSTOM,\n      textAlign: ButtonTextAlign.CENTER,\n      isFullWidth: false,\n      hasIconRight: false,\n      hasIconLeft: false,\n    },\n  }\n);\n\n/**\n * Enhanced Button component props with comprehensive type safety and accessibility features\n */\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Accessible label for screen readers and assistive technologies.\n     * This is required for accessibility compliance.\n     */\n    label: string;\n\n    /**\n     * Optional icon to display on the left side of the button\n     */\n    Icon?: FC | LucideIcon;\n\n    /**\n     * Optional icon to display on the right side of the button\n     */\n    IconRight?: FC | LucideIcon;\n\n    /**\n     * Additional CSS classes for icon styling\n     */\n    iconClassName?: string;\n\n    /**\n     * Shows loading spinner and disables button interaction when true\n     */\n    isLoading?: boolean;\n\n    /**\n     * Marks the button as active (useful for navigation or toggle states)\n     */\n    isActive?: boolean;\n\n    /**\n     * Makes the button span the full width of its container\n     */\n    isFullWidth?: boolean;\n\n    /**\n     * Additional description for complex buttons (optional)\n     */\n    'aria-describedby'?: string;\n\n    /**\n     * Expanded state for collapsible sections (optional)\n     */\n    'aria-expanded'?: boolean;\n\n    /**\n     * Controls whether the button has popup/menu (optional)\n     */\n    'aria-haspopup'?:\n      | boolean\n      | 'true'\n      | 'false'\n      | 'menu'\n      | 'listbox'\n      | 'tree'\n      | 'grid'\n      | 'dialog';\n\n    /**\n     * Indicates if button controls are currently pressed (for toggle buttons)\n     */\n    'aria-pressed'?: boolean;\n  };\n\n/**\n * Button Component - A comprehensive, accessible button component\n *\n * Features:\n * - Full accessibility compliance with ARIA attributes\n * - Multiple variants and sizes for different use cases\n * - Icon support (left and right positioning)\n * - Loading states with spinner\n * - Keyboard navigation support\n * - Focus management with visible indicators\n * - Responsive design adaptations\n *\n * @example\n * ```tsx\n * // Basic button\n * <Button label=\"Click me\">Click me</Button>\n *\n * // Button with icon and loading state\n * <Button\n *   label=\"Save document\"\n *   Icon={SaveIcon}\n *   isLoading={saving}\n *   disabled={!hasChanges}\n * >\n *   Save\n * </Button>\n *\n * // Destructive action button\n * <Button\n *   variant={ButtonVariant.OUTLINE}\n *   color={ButtonColor.DESTRUCTIVE}\n *   label=\"Delete item permanently\"\n *   aria-describedby=\"delete-warning\"\n * >\n *   Delete\n * </Button>\n * ```\n */\nexport const Button: FC<ButtonProps> = ({\n  variant,\n  size,\n  color,\n  children,\n  Icon,\n  IconRight,\n  iconClassName,\n  isLoading = false,\n  isActive = false,\n  isFullWidth = false,\n  textAlign,\n  disabled,\n  label,\n  className,\n  type = 'button',\n  'aria-describedby': ariaDescribedBy,\n  'aria-expanded': ariaExpanded,\n  'aria-haspopup': ariaHasPopup,\n  'aria-pressed': ariaPressed,\n  ...props\n}) => {\n  const isLink =\n    variant === ButtonVariant.LINK || variant === ButtonVariant.INVISIBLE_LINK;\n  const isIconOnly = !children && (Icon || IconRight);\n\n  const accessibilityProps = {\n    'aria-label': isIconOnly ? label : undefined,\n    'aria-labelledby': !isIconOnly ? undefined : undefined,\n    'aria-describedby': ariaDescribedBy,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\n    'aria-pressed': isActive !== undefined ? isActive : ariaPressed,\n    'aria-busy': isLoading,\n    'aria-current': (isActive ? 'page' : undefined) as 'page' | undefined,\n    'aria-disabled': disabled || isLoading,\n  };\n\n  return (\n    <button\n      disabled={isLoading || disabled}\n      role={isLink ? 'link' : 'button'}\n      type={type}\n      className={buttonVariants({\n        variant,\n        size,\n        color,\n        isFullWidth,\n        textAlign:\n          textAlign ??\n          (IconRight ? ButtonTextAlign.LEFT : ButtonTextAlign.CENTER),\n        hasIconLeft: Boolean(\n          typeof children !== 'undefined' &&\n            (typeof Icon !== 'undefined' || isLoading)\n        ),\n        hasIconRight: Boolean(\n          typeof children !== 'undefined' && typeof IconRight !== 'undefined'\n        ),\n        className,\n      })}\n      {...accessibilityProps}\n      {...props}\n    >\n      {Icon && !isLoading && (\n        <Icon\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: ButtonIconPosition.LEFT,\n          })}\n          aria-hidden=\"true\"\n        />\n      )}\n\n      <Loader\n        className={buttonIconVariants({\n          size,\n          className: iconClassName,\n          position: ButtonIconPosition.LEFT,\n        })}\n        isLoading={isLoading}\n        aria-hidden=\"true\"\n        data-testid=\"loader\"\n      />\n\n      {children && <span>{children}</span>}\n\n      {!children && isIconOnly && <span className=\"sr-only\">{label}</span>}\n\n      {IconRight && (\n        <IconRight\n          className={buttonIconVariants({\n            size,\n            className: iconClassName,\n            position: ButtonIconPosition.RIGHT,\n          })}\n          aria-hidden=\"true\"\n        />\n      )}\n    </button>\n  );\n};\n"],"names":["ButtonSize","ButtonIconPosition","ButtonVariant","ButtonColor","ButtonTextAlign"],"mappings":"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"}

package/dist/components/ClickOutsideDiv/index.cjs

@@ -6,21 +6,52 @@ const ReactExports = require("react");
 const ClickOutsideDiv = ({
   children,
   onClickOutSide,
+  listenForEscape = false,
+  disabled = false,
   ...props
 }) => {
   const divRef = ReactExports.useRef(null);
-  ReactExports.useEffect(() => {
-    const handleClick = (event) => {
+  const handleClickOutside = ReactExports.useCallback(
+    (event) => {
+      if (disabled) return;
       if (divRef.current && !divRef.current.contains(event.target)) {
         onClickOutSide();
       }
-    };
-    document.addEventListener("mousedown", handleClick, { passive: true });
+    },
+    [onClickOutSide, disabled]
+  );
+  const handleKeyDown = ReactExports.useCallback(
+    (event) => {
+      if (disabled || !listenForEscape) return;
+      if (event.key === "Escape") {
+        onClickOutSide();
+      }
+    },
+    [onClickOutSide, disabled, listenForEscape]
+  );
+  ReactExports.useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside, {
+      passive: true
+    });
+    if (listenForEscape) {
+      document.addEventListener("keydown", handleKeyDown);
+    }
     return () => {
-      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("mousedown", handleClickOutside);
+      if (listenForEscape) {
+        document.removeEventListener("keydown", handleKeyDown);
+      }
     };
-  }, [onClickOutSide]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: divRef, ...props, children });
+  }, [handleClickOutside, handleKeyDown, listenForEscape]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: divRef,
+      ...props,
+      role: props.role || "region",
+      children
+    }
+  );
 };
 exports.ClickOutsideDiv = ClickOutsideDiv;
 //# sourceMappingURL=index.cjs.map

package/dist/components/ClickOutsideDiv/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/ClickOutsideDiv/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useEffect,\n  useRef,\n} from 'react';\n\nexport type ClickOutsideDivProps = PropsWithChildren<{\n  onClickOutSide: () => void; // note: changed return type to `void`\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const ClickOutsideDiv: FC<ClickOutsideDivProps> = ({\n  children,\n  onClickOutSide,\n  ...props\n}) => {\n  const divRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      // If clicking outside of the referenced element, call onClickOutSide\n      if (divRef.current && !divRef.current.contains(event.target as Node)) {\n        onClickOutSide();\n      }\n    };\n\n    // Attach the event listener\n    document.addEventListener('mousedown', handleClick, { passive: true });\n\n    // Clean up on unmount\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, [onClickOutSide]);\n\n  return (\n    <div ref={divRef} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"names":["useRef","useEffect"],"mappings":";;;;;AAeO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,SAASA,aAAAA,OAAuB,IAAI;AAE1CC,eAAAA,UAAU,MAAM;AACd,UAAM,cAAc,CAAC,UAAsB;AAEzC,UAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,MAAc,GAAG;AACpE,uBAAA;AAAA,MACF;AAAA,IACF;AAGA,aAAS,iBAAiB,aAAa,aAAa,EAAE,SAAS,MAAM;AAGrE,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,WAAW;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAEnB,wCACG,OAAA,EAAI,KAAK,QAAS,GAAG,OACnB,UACH;AAEJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/ClickOutsideDiv/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nexport type ClickOutsideDivProps = PropsWithChildren<{\n  /**\n   * Callback function called when a click occurs outside the component\n   */\n  onClickOutSide: () => void;\n  /**\n   * Whether to listen for Escape key presses\n   * @default false\n   */\n  listenForEscape?: boolean;\n  /**\n   * Whether the component is disabled (won't trigger onClickOutSide)\n   * @default false\n   */\n  disabled?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const ClickOutsideDiv: FC<ClickOutsideDivProps> = ({\n  children,\n  onClickOutSide,\n  listenForEscape = false,\n  disabled = false,\n  ...props\n}) => {\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (disabled) return;\n\n      // If clicking outside of the referenced element, call onClickOutSide\n      if (divRef.current && !divRef.current.contains(event.target as Node)) {\n        onClickOutSide();\n      }\n    },\n    [onClickOutSide, disabled]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (disabled || !listenForEscape) return;\n\n      if (event.key === 'Escape') {\n        onClickOutSide();\n      }\n    },\n    [onClickOutSide, disabled, listenForEscape]\n  );\n\n  useEffect(() => {\n    // Attach the event listeners\n    document.addEventListener('mousedown', handleClickOutside, {\n      passive: true,\n    });\n\n    if (listenForEscape) {\n      document.addEventListener('keydown', handleKeyDown);\n    }\n\n    // Clean up on unmount\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      if (listenForEscape) {\n        document.removeEventListener('keydown', handleKeyDown);\n      }\n    };\n  }, [handleClickOutside, handleKeyDown, listenForEscape]);\n\n  return (\n    <div\n      ref={divRef}\n      {...props}\n      // Add role for better accessibility when used as a container\n      role={props.role || 'region'}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["useRef","useCallback","useEffect","jsx"],"mappings":";;;;;AA6BO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,GAAG;AACL,MAAM;AACJ,QAAM,SAASA,aAAAA,OAAuB,IAAI;AAE1C,QAAM,qBAAqBC,aAAAA;AAAAA,IACzB,CAAC,UAAsB;AACrB,UAAI,SAAU;AAGd,UAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,MAAc,GAAG;AACpE,uBAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,QAAQ;AAAA,EAAA;AAG3B,QAAM,gBAAgBA,aAAAA;AAAAA,IACpB,CAAC,UAAyB;AACxB,UAAI,YAAY,CAAC,gBAAiB;AAElC,UAAI,MAAM,QAAQ,UAAU;AAC1B,uBAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,UAAU,eAAe;AAAA,EAAA;AAG5CC,eAAAA,UAAU,MAAM;AAEd,aAAS,iBAAiB,aAAa,oBAAoB;AAAA,MACzD,SAAS;AAAA,IAAA,CACV;AAED,QAAI,iBAAiB;AACnB,eAAS,iBAAiB,WAAW,aAAa;AAAA,IACpD;AAGA,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,kBAAkB;AAC5D,UAAI,iBAAiB;AACnB,iBAAS,oBAAoB,WAAW,aAAa;AAAA,MACvD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,oBAAoB,eAAe,eAAe,CAAC;AAEvD,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG;AAAA,MAEJ,MAAM,MAAM,QAAQ;AAAA,MAEnB;AAAA,IAAA;AAAA,EAAA;AAGP;;"}

package/dist/components/ClickOutsideDiv/index.d.ts

@@ -1,6 +1,19 @@
 import { FC, HTMLAttributes, PropsWithChildren } from 'react';
 export type ClickOutsideDivProps = PropsWithChildren<{
+    /**
+     * Callback function called when a click occurs outside the component
+     */
     onClickOutSide: () => void;
+    /**
+     * Whether to listen for Escape key presses
+     * @default false
+     */
+    listenForEscape?: boolean;
+    /**
+     * Whether the component is disabled (won't trigger onClickOutSide)
+     * @default false
+     */
+    disabled?: boolean;
 }> & HTMLAttributes<HTMLDivElement>;
 export declare const ClickOutsideDiv: FC<ClickOutsideDivProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ClickOutsideDiv/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ClickOutsideDiv/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,cAAc,EACnB,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,CAAC;IACnD,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC,GACA,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA6BpD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ClickOutsideDiv/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,cAAc,EACnB,KAAK,iBAAiB,EAIvB,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,CAAC;IACnD;;OAEG;IACH,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,GACA,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA6DpD,CAAC"}

package/dist/components/ClickOutsideDiv/index.mjs

@@ -1,24 +1,55 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import { useRef, useCallback, useEffect } from "react";
 const ClickOutsideDiv = ({
   children,
   onClickOutSide,
+  listenForEscape = false,
+  disabled = false,
   ...props
 }) => {
   const divRef = useRef(null);
-  useEffect(() => {
-    const handleClick = (event) => {
+  const handleClickOutside = useCallback(
+    (event) => {
+      if (disabled) return;
       if (divRef.current && !divRef.current.contains(event.target)) {
         onClickOutSide();
       }
-    };
-    document.addEventListener("mousedown", handleClick, { passive: true });
+    },
+    [onClickOutSide, disabled]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (disabled || !listenForEscape) return;
+      if (event.key === "Escape") {
+        onClickOutSide();
+      }
+    },
+    [onClickOutSide, disabled, listenForEscape]
+  );
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside, {
+      passive: true
+    });
+    if (listenForEscape) {
+      document.addEventListener("keydown", handleKeyDown);
+    }
     return () => {
-      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("mousedown", handleClickOutside);
+      if (listenForEscape) {
+        document.removeEventListener("keydown", handleKeyDown);
+      }
     };
-  }, [onClickOutSide]);
-  return /* @__PURE__ */ jsx("div", { ref: divRef, ...props, children });
+  }, [handleClickOutside, handleKeyDown, listenForEscape]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: divRef,
+      ...props,
+      role: props.role || "region",
+      children
+    }
+  );
 };
 export {
   ClickOutsideDiv

package/dist/components/ClickOutsideDiv/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/ClickOutsideDiv/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useEffect,\n  useRef,\n} from 'react';\n\nexport type ClickOutsideDivProps = PropsWithChildren<{\n  onClickOutSide: () => void; // note: changed return type to `void`\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const ClickOutsideDiv: FC<ClickOutsideDivProps> = ({\n  children,\n  onClickOutSide,\n  ...props\n}) => {\n  const divRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleClick = (event: MouseEvent) => {\n      // If clicking outside of the referenced element, call onClickOutSide\n      if (divRef.current && !divRef.current.contains(event.target as Node)) {\n        onClickOutSide();\n      }\n    };\n\n    // Attach the event listener\n    document.addEventListener('mousedown', handleClick, { passive: true });\n\n    // Clean up on unmount\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n    };\n  }, [onClickOutSide]);\n\n  return (\n    <div ref={divRef} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AAeO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,SAAS,OAAuB,IAAI;AAE1C,YAAU,MAAM;AACd,UAAM,cAAc,CAAC,UAAsB;AAEzC,UAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,MAAc,GAAG;AACpE,uBAAA;AAAA,MACF;AAAA,IACF;AAGA,aAAS,iBAAiB,aAAa,aAAa,EAAE,SAAS,MAAM;AAGrE,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,WAAW;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,cAAc,CAAC;AAEnB,6BACG,OAAA,EAAI,KAAK,QAAS,GAAG,OACnB,UACH;AAEJ;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/ClickOutsideDiv/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\n\nexport type ClickOutsideDivProps = PropsWithChildren<{\n  /**\n   * Callback function called when a click occurs outside the component\n   */\n  onClickOutSide: () => void;\n  /**\n   * Whether to listen for Escape key presses\n   * @default false\n   */\n  listenForEscape?: boolean;\n  /**\n   * Whether the component is disabled (won't trigger onClickOutSide)\n   * @default false\n   */\n  disabled?: boolean;\n}> &\n  HTMLAttributes<HTMLDivElement>;\n\nexport const ClickOutsideDiv: FC<ClickOutsideDivProps> = ({\n  children,\n  onClickOutSide,\n  listenForEscape = false,\n  disabled = false,\n  ...props\n}) => {\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (disabled) return;\n\n      // If clicking outside of the referenced element, call onClickOutSide\n      if (divRef.current && !divRef.current.contains(event.target as Node)) {\n        onClickOutSide();\n      }\n    },\n    [onClickOutSide, disabled]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (disabled || !listenForEscape) return;\n\n      if (event.key === 'Escape') {\n        onClickOutSide();\n      }\n    },\n    [onClickOutSide, disabled, listenForEscape]\n  );\n\n  useEffect(() => {\n    // Attach the event listeners\n    document.addEventListener('mousedown', handleClickOutside, {\n      passive: true,\n    });\n\n    if (listenForEscape) {\n      document.addEventListener('keydown', handleKeyDown);\n    }\n\n    // Clean up on unmount\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      if (listenForEscape) {\n        document.removeEventListener('keydown', handleKeyDown);\n      }\n    };\n  }, [handleClickOutside, handleKeyDown, listenForEscape]);\n\n  return (\n    <div\n      ref={divRef}\n      {...props}\n      // Add role for better accessibility when used as a container\n      role={props.role || 'region'}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;AA6BO,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,GAAG;AACL,MAAM;AACJ,QAAM,SAAS,OAAuB,IAAI;AAE1C,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAsB;AACrB,UAAI,SAAU;AAGd,UAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,MAAc,GAAG;AACpE,uBAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,QAAQ;AAAA,EAAA;AAG3B,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAAyB;AACxB,UAAI,YAAY,CAAC,gBAAiB;AAElC,UAAI,MAAM,QAAQ,UAAU;AAC1B,uBAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,UAAU,eAAe;AAAA,EAAA;AAG5C,YAAU,MAAM;AAEd,aAAS,iBAAiB,aAAa,oBAAoB;AAAA,MACzD,SAAS;AAAA,IAAA,CACV;AAED,QAAI,iBAAiB;AACnB,eAAS,iBAAiB,WAAW,aAAa;AAAA,IACpD;AAGA,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,kBAAkB;AAC5D,UAAI,iBAAiB;AACnB,iBAAS,oBAAoB,WAAW,aAAa;AAAA,MACvD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,oBAAoB,eAAe,eAAe,CAAC;AAEvD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG;AAAA,MAEJ,MAAM,MAAM,QAAQ;AAAA,MAEnB;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Container/index.cjs

@@ -143,6 +143,7 @@ const Container = ({
   border,
   borderColor,
   background,
+  gap,
   ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
@@ -156,6 +157,7 @@ const Container = ({
         border: typeof border === "boolean" ? border ? "with" : "none" : void 0,
         background,
         borderColor,
+        gap,
         className
       })
     ),

package/dist/components/Container/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type DetailedHTMLProps,\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport const containerVariants = cva('flex text-text flex-col backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      xl: 'rounded-xl',\n      '2xl': 'rounded-2xl',\n      '3xl': 'rounded-3xl',\n      full: 'rounded-full',\n    },\n    transparency: {\n      none: 'bg-card',\n      sm: 'bg-card/95',\n      md: 'bg-card/70',\n      lg: 'bg-card/40',\n      xl: 'bg-card/20',\n      full: '',\n    },\n    padding: {\n      none: 'p-0',\n      sm: 'p-1',\n      md: 'p-2',\n      lg: 'p-3',\n      xl: 'p-4',\n    },\n    separator: {\n      without: '',\n      x: 'divide-x divide-dashed divide-text/20',\n      y: 'divide-y divide-dashed divide-text/20',\n      both: 'divide-x divide-y divide-dashed divide-text/20',\n    },\n    border: {\n      none: '',\n      with: 'border-[1.5px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      text: 'border-text ',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: 'bg-inherit',\n      hoverable:\n        '!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur',\n      with: '',\n    },\n    gap: {\n      none: 'gap-0',\n      sm: 'gap-1',\n      md: 'gap-3',\n      lg: 'gap-5',\n      xl: 'gap-8',\n      '2xl': 'gap-10',\n    },\n  },\n  defaultVariants: {\n    roundedSize: 'md',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n});\n\nexport enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\n  THREE_XL = '3xl',\n  FULL = 'full',\n}\n\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\n}\n\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    border?: boolean;\n  };\n\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  background,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        borderColor,\n        className,\n      })\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"names":["cva","ContainerRoundedSize","ContainerTransparency","ContainerPadding","ContainerSeparator","ContainerBorderColor","ContainerBackground","ContainerGap","jsx","cn"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Container/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  type DetailedHTMLProps,\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Container component variants using class-variance-authority\n * Provides flexible styling options for background, padding, borders, and layout\n */\nexport const containerVariants = cva('flex text-text flex-col backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      xl: 'rounded-xl',\n      '2xl': 'rounded-2xl',\n      '3xl': 'rounded-3xl',\n      full: 'rounded-full',\n    },\n    transparency: {\n      none: 'bg-card',\n      sm: 'bg-card/95',\n      md: 'bg-card/70',\n      lg: 'bg-card/40',\n      xl: 'bg-card/20',\n      full: '',\n    },\n    padding: {\n      none: 'p-0',\n      sm: 'p-1',\n      md: 'p-2',\n      lg: 'p-3',\n      xl: 'p-4',\n    },\n    separator: {\n      without: '',\n      x: 'divide-x divide-dashed divide-text/20',\n      y: 'divide-y divide-dashed divide-text/20',\n      both: 'divide-x divide-y divide-dashed divide-text/20',\n    },\n    border: {\n      none: '',\n      with: 'border-[1.5px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      text: 'border-text ',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: 'bg-inherit',\n      hoverable:\n        '!bg-opacity-5 backdrop-blur-0 hover:!bg-opacity-10 hover:backdrop-blur focus:!bg-opacity-10 focus:backdrop-blur aria-selected:!bg-opacity-15 aria-selected:backdrop-blur',\n      with: '',\n    },\n    gap: {\n      none: 'gap-0',\n      sm: 'gap-1',\n      md: 'gap-3',\n      lg: 'gap-5',\n      xl: 'gap-8',\n      '2xl': 'gap-10',\n    },\n  },\n  defaultVariants: {\n    roundedSize: 'md',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n});\n\n/** Available rounded corner sizes for the container */\nexport enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\n  THREE_XL = '3xl',\n  FULL = 'full',\n}\n\n/** Background transparency levels for the container */\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\n/** Padding sizes for container content */\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\n/** Separator options for dividing container children */\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\n/** Border color options for the container */\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\n/** Background interaction states for the container */\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\n/** Gap sizes between container children */\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  TWO_XL = '2xl',\n}\n\n/** Container component props extending HTML div attributes */\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    /** Whether to show a border around the container */\n    border?: boolean;\n  };\n\n/**\n * Container Component\n *\n * A flexible container component for organizing content with customizable styling options.\n * Supports various visual states, layouts, and accessibility features.\n *\n * ## Features\n * - **Flexible Layout**: Supports different padding, gap, and separator options\n * - **Visual Variants**: Multiple background transparency levels and border styles\n * - **Responsive Design**: Configurable rounded corners and spacing\n * - **Semantic HTML**: Proper div element with extensible attributes\n *\n * ## Accessibility\n * - Inherits all standard div accessibility features\n * - Supports ARIA attributes through spread props\n * - Maintains proper semantic structure for screen readers\n *\n * @param children - The content to display inside the container\n * @param roundedSize - Border radius size (default: 'md')\n * @param transparency - Background transparency level (default: 'md')\n * @param padding - Internal padding size (default: 'none')\n * @param separator - Divider lines between children (default: 'without')\n * @param border - Whether to show border (default: false)\n * @param borderColor - Color of the border (default: 'text')\n * @param background - Background interaction behavior (default: 'none')\n * @param gap - Space between child elements (default: 'none')\n * @param className - Additional CSS classes\n * @param props - Additional HTML div attributes including ARIA attributes\n */\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  background,\n  gap,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        borderColor,\n        gap,\n        className,\n      })\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"names":["cva","ContainerRoundedSize","ContainerTransparency","ContainerPadding","ContainerSeparator","ContainerBorderColor","ContainerBackground","ContainerGap","jsx","cn"],"mappings":"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"}