@pk-design/react-tailwind 1.7.1 → 1.8.0

package/dist/es/components/Button/Button.js

@@ -11,17 +11,17 @@ const THEMED_BTN_CLASS = {
     primary: {
         default: 'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:bg-[var(--ui-primary-disabled)]',
         outlined: 'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)] disabled:border-[var(--ui-primary-disabled)]',
-        plain: 'text-[var(--ui-primary-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)]',
+        plain: 'text-[var(--ui-primary-text)] hover:bg-blue-50/80 dark:hover:bg-blue-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)]',
     },
     danger: {
         default: 'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:bg-[var(--ui-danger-disabled)]',
         outlined: 'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)] disabled:border-[var(--ui-danger-disabled)]',
-        plain: 'text-[var(--ui-danger-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)]',
+        plain: 'text-[var(--ui-danger-text)] hover:bg-red-50/80 dark:hover:bg-red-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)]',
     },
     secondary: {
         default: 'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:bg-gray-200 dark:disabled:bg-gray-700',
         outlined: 'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400 disabled:border-[var(--ui-border-muted)]',
-        plain: 'text-gray-700 hover:bg-black/5 dark:text-gray-200 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400',
+        plain: 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400',
     },
     success: {
         default: 'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:bg-emerald-300 dark:disabled:bg-emerald-900',
@@ -61,54 +61,72 @@ const LOADER_TEXT_CLASS = {
         plain: 'text-amber-600 dark:text-amber-400',
     },
 };
-/**
- * Generate size classes.
- */
-const getBtnSizeClasses = (size, iconOnly = false) => {
-    switch (size) {
-        case 'xs':
-            return iconOnly ? 'h-7 w-7 p-1 rounded-sm text-xs' : 'h-7 px-2.5 rounded-sm gap-1 text-xs';
-        case 'sm':
-            return iconOnly ? 'h-8 w-8 p-1.5 rounded text-sm' : 'h-8 px-3 rounded gap-1.5 text-sm';
-        case 'md':
-            return iconOnly ? 'h-9 w-9 p-2 rounded-md text-sm' : 'h-9 px-4 rounded-md gap-2 text-sm';
-        case 'lg':
-            return iconOnly
-                ? 'h-10 w-10 p-2.5 rounded-lg text-base'
-                : 'h-10 px-5 rounded-lg gap-2 text-base';
-    }
+const SIZE_CLASSES = {
+    xs: { normal: 'h-7 px-2.5 rounded-sm gap-1 text-xs', iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs' },
+    sm: { normal: 'h-8 px-3 rounded gap-1.5 text-sm', iconOnly: 'h-8 w-8 p-1.5 rounded text-sm' },
+    md: { normal: 'h-9 px-4 rounded-md gap-2 text-sm', iconOnly: 'h-9 w-9 p-2 rounded-md text-sm' },
+    lg: {
+        normal: 'h-10 px-5 rounded-lg gap-2 text-base',
+        iconOnly: 'h-10 w-10 p-2.5 rounded-lg text-base',
+    },
+};
+const LOADER_SIZE = {
+    xs: 'xs',
+    sm: 'xs',
+    md: 'sm',
+    lg: 'sm',
 };
 /**
  * Base shared tailwind classes.
  */
-const BASE_BTN_CLASS = 'font-medium flex items-center justify-center shrink-0 cursor-pointer ' +
+const BASE_BTN_CLASS = 'font-medium inline-flex items-center justify-center shrink-0 cursor-pointer select-none ' +
     'disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-75 ' +
     'active:scale-[0.98] transition-all duration-150 ease-out focus:outline-none';
 const Button = forwardRef(({ as, type, ...props }, ref) => {
-    const { className = '', children, theme = 'primary', variant = 'default', size = 'md', leftIcon, rightIcon, fullWidth = false, loading = false, loadingText = '', rounded = false, disabled, iconOnly = false, noOutlineOnFocus = false, ...restProps } = props;
+    var _a, _b, _c, _d;
+    const { className = '', children, theme = 'primary', variant = 'default', size = 'md', leftIcon, rightIcon, fullWidth = false, loading = false, loadingText = '', rounded = false, disabled, iconOnly = false, noOutlineOnFocus = false, active, onClick, ...restProps } = props;
     const Component = as || 'button';
+    const isNativeButton = Component === 'button';
     // Accessibility guard for icon-only buttons
     if (iconOnly && !restProps['aria-label']) {
         console.warn('[ui] <Button iconOnly> requires aria-label for accessibility.');
     }
-    const resolvedDisabled = disabled || loading;
+    const resolvedDisabled = Boolean(disabled || loading);
     // Clean invalid props when not rendering a real button
     const { type: _ignoreType, disabled: _ignoreDisabled, ...cleanRest } = restProps;
-    const buttonSpecificProps = Component === 'button'
+    const handleClick = (e) => {
+        if (resolvedDisabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    const elementProps = isNativeButton
         ? {
             type: type !== null && type !== void 0 ? type : 'button',
             disabled: resolvedDisabled,
+            onClick: handleClick,
         }
-        : {};
-    const classes = useMemo(() => buildClassName(BASE_BTN_CLASS, THEMED_BTN_CLASS[theme][variant], getBtnSizeClasses(size, iconOnly), !noOutlineOnFocus && 'focus:outline focus:outline-2 focus:outline-offset-2', rounded && 'rounded-full', fullWidth && 'w-full', variant === 'default' && 'shadow-xs hover:shadow-none disabled:shadow-none', className), [theme, variant, size, iconOnly, rounded, fullWidth, noOutlineOnFocus, className]);
+        : {
+            role: (_a = cleanRest.role) !== null && _a !== void 0 ? _a : 'button',
+            tabIndex: resolvedDisabled ? -1 : ((_b = cleanRest.tabIndex) !== null && _b !== void 0 ? _b : 0),
+            'aria-disabled': resolvedDisabled ? true : undefined,
+            onClick: handleClick,
+        };
+    const sizeObj = SIZE_CLASSES[size] || SIZE_CLASSES.md;
+    const classes = useMemo(() => {
+        var _a;
+        return buildClassName(BASE_BTN_CLASS, ((_a = THEMED_BTN_CLASS[theme]) === null || _a === void 0 ? void 0 : _a[variant]) || THEMED_BTN_CLASS.primary.default, iconOnly ? sizeObj.iconOnly : sizeObj.normal, !noOutlineOnFocus && 'focus-visible:ring-2 focus-visible:ring-offset-2', rounded && 'rounded-full', fullWidth && 'w-full', variant === 'default' && 'shadow-xs hover:shadow-none disabled:shadow-none', active && 'ring-2 ring-offset-2 ring-current', className);
+    }, [theme, variant, sizeObj, iconOnly, noOutlineOnFocus, rounded, fullWidth, active, className]);
+    const loaderIcon = (jsx(Loader, { "data-testid": "btn-loader-icon", size: LOADER_SIZE[size] || 'xs', className: buildClassName((_c = LOADER_TEXT_CLASS[theme]) === null || _c === void 0 ? void 0 : _c[variant]) }));
     /**
      * SPECIAL CASE: iconOnly + loading → show spinner only
      */
     if (loading && iconOnly) {
-        return (jsx(Component, { ref: ref, className: classes, ...buttonSpecificProps, ...cleanRest, children: jsx(Loader, { "data-testid": "btn-loader-icon", size: "xs", className: buildClassName(LOADER_TEXT_CLASS[theme][variant]) }) }));
+        return (jsx(Component, { ref: ref, className: classes, "aria-busy": "true", "aria-pressed": active !== undefined ? active : undefined, ...elementProps, ...cleanRest, children: loaderIcon }));
     }
-    const loaderIcon = (jsx(Loader, { "data-testid": "btn-loader-icon", size: "xs", className: buildClassName(LOADER_TEXT_CLASS[theme][variant]) }));
-    return (jsx(Component, { ref: ref, className: classes, ...buttonSpecificProps, ...cleanRest, children: loading && !loadingText ? (jsxs("span", { className: "flex items-center gap-2", "aria-live": "polite", children: [loaderIcon, children] })) : loading && loadingText ? (jsxs("span", { className: "flex items-center gap-2", "aria-live": "polite", children: [loaderIcon, jsx(TextContent, { className: buildClassName(LOADER_TEXT_CLASS[theme][variant]), children: loadingText })] })) : (jsxs(Fragment, { children: [leftIcon && jsx("span", { className: "shrink-0 flex items-center", children: leftIcon }), children, rightIcon && jsx("span", { className: "shrink-0 flex items-center", children: rightIcon })] })) }));
+    return (jsx(Component, { ref: ref, className: classes, "aria-busy": loading ? 'true' : undefined, "aria-pressed": active !== undefined ? active : undefined, ...elementProps, ...cleanRest, children: loading ? (jsxs("span", { className: "inline-flex items-center gap-2", "aria-live": "polite", children: [loaderIcon, loadingText ? (jsx(TextContent, { className: buildClassName((_d = LOADER_TEXT_CLASS[theme]) === null || _d === void 0 ? void 0 : _d[variant]), children: loadingText })) : (children)] })) : (jsxs(Fragment, { children: [leftIcon && jsx("span", { className: "shrink-0 inline-flex items-center", children: leftIcon }), children, rightIcon && jsx("span", { className: "shrink-0 inline-flex items-center", children: rightIcon })] })) }));
 });
 Button.displayName = 'Button';
 

package/dist/es/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useMemo } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Loader } from '../Loader'\nimport { TextContent } from '../TextContent'\nimport type { ButtonComponent, ButtonProps, ButtonSize, ThemedButtonClass } from './Button.types'\nimport type { PolymorphicRef } from '../common-type'\n\n/**\n * Tailwind CSS classes for theme + variant combinations.\n */\nconst THEMED_BTN_CLASS: ThemedButtonClass = {\n  primary: {\n    default:\n      'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:bg-[var(--ui-primary-disabled)]',\n    outlined:\n      'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)] disabled:border-[var(--ui-primary-disabled)]',\n    plain:\n      'text-[var(--ui-primary-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)]',\n  },\n  danger: {\n    default:\n      'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:bg-[var(--ui-danger-disabled)]',\n    outlined:\n      'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)] disabled:border-[var(--ui-danger-disabled)]',\n    plain:\n      'text-[var(--ui-danger-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)]',\n  },\n  secondary: {\n    default:\n      'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:bg-gray-200 dark:disabled:bg-gray-700',\n    outlined:\n      'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400 disabled:border-[var(--ui-border-muted)]',\n    plain:\n      'text-gray-700 hover:bg-black/5 dark:text-gray-200 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400',\n  },\n  success: {\n    default:\n      'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:bg-emerald-300 dark:disabled:bg-emerald-900',\n    outlined:\n      'text-emerald-600 hover:text-white border border-emerald-600 hover:bg-emerald-600 dark:text-emerald-400 dark:border-emerald-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:opacity-50',\n    plain:\n      'text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:opacity-50',\n  },\n  warning: {\n    default:\n      'text-white bg-amber-500 hover:bg-amber-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:bg-amber-300 dark:disabled:bg-amber-900',\n    outlined:\n      'text-amber-600 hover:text-white border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:opacity-50',\n    plain:\n      'text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:opacity-50',\n  },\n}\n\nconst LOADER_TEXT_CLASS: ThemedButtonClass = {\n  primary: {\n    default: 'text-white',\n    outlined: 'text-[var(--ui-primary-text)]',\n    plain: 'text-[var(--ui-primary-text)]',\n  },\n  danger: {\n    default: 'text-white',\n    outlined: 'text-[var(--ui-danger-text)]',\n    plain: 'text-[var(--ui-danger-text)]',\n  },\n  secondary: {\n    default: 'text-gray-700 dark:text-white',\n    outlined: 'text-gray-700 dark:text-gray-200',\n    plain: 'text-gray-700 dark:text-gray-200',\n  },\n  success: {\n    default: 'text-white',\n    outlined: 'text-emerald-600 dark:text-emerald-400',\n    plain: 'text-emerald-600 dark:text-emerald-400',\n  },\n  warning: {\n    default: 'text-white',\n    outlined: 'text-amber-600 dark:text-amber-400',\n    plain: 'text-amber-600 dark:text-amber-400',\n  },\n}\n\n/**\n * Generate size classes.\n */\nconst getBtnSizeClasses = (size: ButtonSize, iconOnly = false) => {\n  switch (size) {\n    case 'xs':\n      return iconOnly ? 'h-7 w-7 p-1 rounded-sm text-xs' : 'h-7 px-2.5 rounded-sm gap-1 text-xs'\n\n    case 'sm':\n      return iconOnly ? 'h-8 w-8 p-1.5 rounded text-sm' : 'h-8 px-3 rounded gap-1.5 text-sm'\n\n    case 'md':\n      return iconOnly ? 'h-9 w-9 p-2 rounded-md text-sm' : 'h-9 px-4 rounded-md gap-2 text-sm'\n\n    case 'lg':\n      return iconOnly\n        ? 'h-10 w-10 p-2.5 rounded-lg text-base'\n        : 'h-10 px-5 rounded-lg gap-2 text-base'\n  }\n}\n\n/**\n * Base shared tailwind classes.\n */\nconst BASE_BTN_CLASS =\n  'font-medium flex items-center justify-center shrink-0 cursor-pointer ' +\n  'disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-75 ' +\n  'active:scale-[0.98] transition-all duration-150 ease-out focus:outline-none'\n\nexport const Button = forwardRef(\n  <C extends ElementType = 'button'>(\n    { as, type, ...props }: ButtonProps<C>,\n    ref: PolymorphicRef<C>,\n  ) => {\n    const {\n      className = '',\n      children,\n      theme = 'primary',\n      variant = 'default',\n      size = 'md',\n      leftIcon,\n      rightIcon,\n      fullWidth = false,\n      loading = false,\n      loadingText = '',\n      rounded = false,\n      disabled,\n      iconOnly = false,\n      noOutlineOnFocus = false,\n      ...restProps\n    } = props\n\n    const Component = as || 'button'\n\n    // Accessibility guard for icon-only buttons\n    if (iconOnly && !(restProps as Record<string, unknown>)['aria-label']) {\n      console.warn('[ui] <Button iconOnly> requires aria-label for accessibility.')\n    }\n\n    const resolvedDisabled = disabled || loading\n\n    // Clean invalid props when not rendering a real button\n    const { type: _ignoreType, disabled: _ignoreDisabled, ...cleanRest } = restProps\n\n    const buttonSpecificProps =\n      Component === 'button'\n        ? {\n            type: type ?? 'button',\n            disabled: resolvedDisabled,\n          }\n        : {}\n\n    const classes = useMemo(\n      () =>\n        buildClassName(\n          BASE_BTN_CLASS,\n          THEMED_BTN_CLASS[theme][variant],\n          getBtnSizeClasses(size, iconOnly),\n          !noOutlineOnFocus && 'focus:outline focus:outline-2 focus:outline-offset-2',\n          rounded && 'rounded-full',\n          fullWidth && 'w-full',\n          variant === 'default' && 'shadow-xs hover:shadow-none disabled:shadow-none',\n          className,\n        ),\n      [theme, variant, size, iconOnly, rounded, fullWidth, noOutlineOnFocus, className],\n    )\n\n    /**\n     * SPECIAL CASE: iconOnly + loading → show spinner only\n     */\n    if (loading && iconOnly) {\n      return (\n        <Component ref={ref} className={classes} {...buttonSpecificProps} {...cleanRest}>\n          <Loader\n            data-testid=\"btn-loader-icon\"\n            size=\"xs\"\n            className={buildClassName(LOADER_TEXT_CLASS[theme][variant])}\n          />\n        </Component>\n      )\n    }\n\n    const loaderIcon = (\n      <Loader\n        data-testid=\"btn-loader-icon\"\n        size=\"xs\"\n        className={buildClassName(LOADER_TEXT_CLASS[theme][variant])}\n      />\n    )\n\n    return (\n      <Component ref={ref} className={classes} {...buttonSpecificProps} {...cleanRest}>\n        {loading && !loadingText ? (\n          <span className=\"flex items-center gap-2\" aria-live=\"polite\">\n            {loaderIcon}\n            {children}\n          </span>\n        ) : loading && loadingText ? (\n          <span className=\"flex items-center gap-2\" aria-live=\"polite\">\n            {loaderIcon}\n            <TextContent className={buildClassName(LOADER_TEXT_CLASS[theme][variant])}>\n              {loadingText}\n            </TextContent>\n          </span>\n        ) : (\n          <>\n            {leftIcon && <span className=\"shrink-0 flex items-center\">{leftIcon}</span>}\n            {children}\n            {rightIcon && <span className=\"shrink-0 flex items-center\">{rightIcon}</span>}\n          </>\n        )}\n      </Component>\n    )\n  },\n) as ButtonComponent\n\nButton.displayName = 'Button'\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAOA;;AAEG;AACH,MAAM,gBAAgB,GAAsB;AAC1C,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EACL,4MAA4M;AAC9M,QAAA,QAAQ,EACN,oSAAoS;AACtS,QAAA,KAAK,EACH,+MAA+M;AAClN,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EACL,wMAAwM;AAC1M,QAAA,QAAQ,EACN,8RAA8R;AAChS,QAAA,KAAK,EACH,4MAA4M;AAC/M,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,OAAO,EACL,6QAA6Q;AAC/Q,QAAA,QAAQ,EACN,8SAA8S;AAChT,QAAA,KAAK,EACH,4LAA4L;AAC/L,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EACL,qLAAqL;AACvL,QAAA,QAAQ,EACN,oOAAoO;AACtO,QAAA,KAAK,EACH,6LAA6L;AAChM,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EACL,2KAA2K;AAC7K,QAAA,QAAQ,EACN,wNAAwN;AAC1N,QAAA,KAAK,EACH,mLAAmL;AACtL,KAAA;CACF;AAED,MAAM,iBAAiB,GAAsB;AAC3C,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EAAE,YAAY;AACrB,QAAA,QAAQ,EAAE,+BAA+B;AACzC,QAAA,KAAK,EAAE,+BAA+B;AACvC,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,YAAY;AACrB,QAAA,QAAQ,EAAE,8BAA8B;AACxC,QAAA,KAAK,EAAE,8BAA8B;AACtC,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,OAAO,EAAE,+BAA+B;AACxC,QAAA,QAAQ,EAAE,kCAAkC;AAC5C,QAAA,KAAK,EAAE,kCAAkC;AAC1C,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EAAE,YAAY;AACrB,QAAA,QAAQ,EAAE,wCAAwC;AAClD,QAAA,KAAK,EAAE,wCAAwC;AAChD,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EAAE,YAAY;AACrB,QAAA,QAAQ,EAAE,oCAAoC;AAC9C,QAAA,KAAK,EAAE,oCAAoC;AAC5C,KAAA;CACF;AAED;;AAEG;AACH,MAAM,iBAAiB,GAAG,CAAC,IAAgB,EAAE,QAAQ,GAAG,KAAK,KAAI;IAC/D,QAAQ,IAAI;AACV,QAAA,KAAK,IAAI;YACP,OAAO,QAAQ,GAAG,gCAAgC,GAAG,qCAAqC;AAE5F,QAAA,KAAK,IAAI;YACP,OAAO,QAAQ,GAAG,+BAA+B,GAAG,kCAAkC;AAExF,QAAA,KAAK,IAAI;YACP,OAAO,QAAQ,GAAG,gCAAgC,GAAG,mCAAmC;AAE1F,QAAA,KAAK,IAAI;AACP,YAAA,OAAO;AACL,kBAAE;kBACA,sCAAsC;;AAEhD,CAAC;AAED;;AAEG;AACH,MAAM,cAAc,GAClB,uEAAuE;IACvE,+EAA+E;AAC/E,IAAA,6EAA6E;AAExE,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,KAAK,EAAkB,EACtC,GAAsB,KACpB;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,KAAK,GAAG,SAAS,EACjB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,WAAW,GAAG,EAAE,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,gBAAgB,GAAG,KAAK,EACxB,GAAG,SAAS,EACb,GAAG,KAAK;AAET,IAAA,MAAM,SAAS,GAAG,EAAE,IAAI,QAAQ;;IAGhC,IAAI,QAAQ,IAAI,CAAE,SAAqC,CAAC,YAAY,CAAC,EAAE;AACrE,QAAA,OAAO,CAAC,IAAI,CAAC,+DAA+D,CAAC;IAC/E;AAEA,IAAA,MAAM,gBAAgB,GAAG,QAAQ,IAAI,OAAO;;AAG5C,IAAA,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE,GAAG,SAAS;AAEhF,IAAA,MAAM,mBAAmB,GACvB,SAAS,KAAK;AACZ,UAAE;AACE,YAAA,IAAI,EAAE,IAAI,KAAA,IAAA,IAAJ,IAAI,KAAA,MAAA,GAAJ,IAAI,GAAI,QAAQ;AACtB,YAAA,QAAQ,EAAE,gBAAgB;AAC3B;UACD,EAAE;AAER,IAAA,MAAM,OAAO,GAAG,OAAO,CACrB,MACE,cAAc,CACZ,cAAc,EACd,gBAAgB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,EAChC,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,EACjC,CAAC,gBAAgB,IAAI,sDAAsD,EAC3E,OAAO,IAAI,cAAc,EACzB,SAAS,IAAI,QAAQ,EACrB,OAAO,KAAK,SAAS,IAAI,kDAAkD,EAC3E,SAAS,CACV,EACH,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,CAAC,CAClF;AAED;;AAEG;AACH,IAAA,IAAI,OAAO,IAAI,QAAQ,EAAE;AACvB,QAAA,QACEA,GAAA,CAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,mBAAmB,EAAA,GAAM,SAAS,EAAA,QAAA,EAC7EA,GAAA,CAAC,MAAM,EAAA,EAAA,aAAA,EACO,iBAAiB,EAC7B,IAAI,EAAC,IAAI,EACT,SAAS,EAAE,cAAc,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,EAAA,CAC5D,EAAA,CACQ;IAEhB;IAEA,MAAM,UAAU,IACdA,GAAA,CAAC,MAAM,EAAA,EAAA,aAAA,EACO,iBAAiB,EAC7B,IAAI,EAAC,IAAI,EACT,SAAS,EAAE,cAAc,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,EAAA,CAC5D,CACH;IAED,QACEA,IAAC,SAAS,EAAA,EAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,mBAAmB,EAAA,GAAM,SAAS,EAAA,QAAA,EAC5E,OAAO,IAAI,CAAC,WAAW,IACtBC,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,yBAAyB,eAAW,QAAQ,EAAA,QAAA,EAAA,CACzD,UAAU,EACV,QAAQ,CAAA,EAAA,CACJ,IACL,OAAO,IAAI,WAAW,IACxBA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,yBAAyB,EAAA,WAAA,EAAW,QAAQ,aACzD,UAAU,EACXD,IAAC,WAAW,EAAA,EAAC,SAAS,EAAE,cAAc,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,EAAA,QAAA,EACtE,WAAW,GACA,CAAA,EAAA,CACT,KAEPC,4BACG,QAAQ,IAAID,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,4BAA4B,YAAE,QAAQ,EAAA,CAAQ,EAC1E,QAAQ,EACR,SAAS,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAE,SAAS,GAAQ,CAAA,EAAA,CAC5E,CACJ,EAAA,CACS;AAEhB,CAAC;AAGH,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useMemo } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Loader } from '../Loader'\nimport { TextContent } from '../TextContent'\nimport type { ButtonComponent, ButtonProps, ButtonSize, ThemedButtonClass } from './Button.types'\nimport type { PolymorphicRef } from '../common-type'\n\n/**\n * Tailwind CSS classes for theme + variant combinations.\n */\nconst THEMED_BTN_CLASS: ThemedButtonClass = {\n  primary: {\n    default:\n      'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:bg-[var(--ui-primary-disabled)]',\n    outlined:\n      'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)] disabled:border-[var(--ui-primary-disabled)]',\n    plain:\n      'text-[var(--ui-primary-text)] hover:bg-blue-50/80 dark:hover:bg-blue-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)]',\n  },\n  danger: {\n    default:\n      'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:bg-[var(--ui-danger-disabled)]',\n    outlined:\n      'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)] disabled:border-[var(--ui-danger-disabled)]',\n    plain:\n      'text-[var(--ui-danger-text)] hover:bg-red-50/80 dark:hover:bg-red-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)]',\n  },\n  secondary: {\n    default:\n      'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:bg-gray-200 dark:disabled:bg-gray-700',\n    outlined:\n      'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400 disabled:border-[var(--ui-border-muted)]',\n    plain:\n      'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400',\n  },\n  success: {\n    default:\n      'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:bg-emerald-300 dark:disabled:bg-emerald-900',\n    outlined:\n      'text-emerald-600 hover:text-white border border-emerald-600 hover:bg-emerald-600 dark:text-emerald-400 dark:border-emerald-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:opacity-50',\n    plain:\n      'text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:opacity-50',\n  },\n  warning: {\n    default:\n      'text-white bg-amber-500 hover:bg-amber-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:bg-amber-300 dark:disabled:bg-amber-900',\n    outlined:\n      'text-amber-600 hover:text-white border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:opacity-50',\n    plain:\n      'text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:opacity-50',\n  },\n}\n\nconst LOADER_TEXT_CLASS: ThemedButtonClass = {\n  primary: {\n    default: 'text-white',\n    outlined: 'text-[var(--ui-primary-text)]',\n    plain: 'text-[var(--ui-primary-text)]',\n  },\n  danger: {\n    default: 'text-white',\n    outlined: 'text-[var(--ui-danger-text)]',\n    plain: 'text-[var(--ui-danger-text)]',\n  },\n  secondary: {\n    default: 'text-gray-700 dark:text-white',\n    outlined: 'text-gray-700 dark:text-gray-200',\n    plain: 'text-gray-700 dark:text-gray-200',\n  },\n  success: {\n    default: 'text-white',\n    outlined: 'text-emerald-600 dark:text-emerald-400',\n    plain: 'text-emerald-600 dark:text-emerald-400',\n  },\n  warning: {\n    default: 'text-white',\n    outlined: 'text-amber-600 dark:text-amber-400',\n    plain: 'text-amber-600 dark:text-amber-400',\n  },\n}\n\nconst SIZE_CLASSES: Record<ButtonSize, { normal: string; iconOnly: string }> = {\n  xs: { normal: 'h-7 px-2.5 rounded-sm gap-1 text-xs', iconOnly: 'h-7 w-7 p-1 rounded-sm text-xs' },\n  sm: { normal: 'h-8 px-3 rounded gap-1.5 text-sm', iconOnly: 'h-8 w-8 p-1.5 rounded text-sm' },\n  md: { normal: 'h-9 px-4 rounded-md gap-2 text-sm', iconOnly: 'h-9 w-9 p-2 rounded-md text-sm' },\n  lg: {\n    normal: 'h-10 px-5 rounded-lg gap-2 text-base',\n    iconOnly: 'h-10 w-10 p-2.5 rounded-lg text-base',\n  },\n}\n\nconst LOADER_SIZE: Record<ButtonSize, 'xs' | 'sm'> = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n  lg: 'sm',\n}\n\n/**\n * Base shared tailwind classes.\n */\nconst BASE_BTN_CLASS =\n  'font-medium inline-flex items-center justify-center shrink-0 cursor-pointer select-none ' +\n  'disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-75 ' +\n  'active:scale-[0.98] transition-all duration-150 ease-out focus:outline-none'\n\nexport const Button = forwardRef(\n  <C extends ElementType = 'button'>(\n    { as, type, ...props }: ButtonProps<C>,\n    ref: PolymorphicRef<C>,\n  ) => {\n    const {\n      className = '',\n      children,\n      theme = 'primary',\n      variant = 'default',\n      size = 'md',\n      leftIcon,\n      rightIcon,\n      fullWidth = false,\n      loading = false,\n      loadingText = '',\n      rounded = false,\n      disabled,\n      iconOnly = false,\n      noOutlineOnFocus = false,\n      active,\n      onClick,\n      ...restProps\n    } = props\n\n    const Component = as || 'button'\n    const isNativeButton = Component === 'button'\n\n    // Accessibility guard for icon-only buttons\n    if (iconOnly && !(restProps as Record<string, unknown>)['aria-label']) {\n      console.warn('[ui] <Button iconOnly> requires aria-label for accessibility.')\n    }\n\n    const resolvedDisabled = Boolean(disabled || loading)\n\n    // Clean invalid props when not rendering a real button\n    const { type: _ignoreType, disabled: _ignoreDisabled, ...cleanRest } = restProps\n\n    const handleClick = (e: React.MouseEvent<any>) => {\n      if (resolvedDisabled) {\n        e.preventDefault()\n        e.stopPropagation()\n        return\n      }\n      onClick?.(e)\n    }\n\n    const elementProps = isNativeButton\n      ? {\n          type: type ?? 'button',\n          disabled: resolvedDisabled,\n          onClick: handleClick,\n        }\n      : {\n          role: cleanRest.role ?? 'button',\n          tabIndex: resolvedDisabled ? -1 : (cleanRest.tabIndex ?? 0),\n          'aria-disabled': resolvedDisabled ? true : undefined,\n          onClick: handleClick,\n        }\n\n    const sizeObj = SIZE_CLASSES[size] || SIZE_CLASSES.md\n\n    const classes = useMemo(\n      () =>\n        buildClassName(\n          BASE_BTN_CLASS,\n          THEMED_BTN_CLASS[theme]?.[variant] || THEMED_BTN_CLASS.primary.default,\n          iconOnly ? sizeObj.iconOnly : sizeObj.normal,\n          !noOutlineOnFocus && 'focus-visible:ring-2 focus-visible:ring-offset-2',\n          rounded && 'rounded-full',\n          fullWidth && 'w-full',\n          variant === 'default' && 'shadow-xs hover:shadow-none disabled:shadow-none',\n          active && 'ring-2 ring-offset-2 ring-current',\n          className,\n        ),\n      [theme, variant, sizeObj, iconOnly, noOutlineOnFocus, rounded, fullWidth, active, className],\n    )\n\n    const loaderIcon = (\n      <Loader\n        data-testid=\"btn-loader-icon\"\n        size={LOADER_SIZE[size] || 'xs'}\n        className={buildClassName(LOADER_TEXT_CLASS[theme]?.[variant])}\n      />\n    )\n\n    /**\n     * SPECIAL CASE: iconOnly + loading → show spinner only\n     */\n    if (loading && iconOnly) {\n      return (\n        <Component\n          ref={ref}\n          className={classes}\n          aria-busy=\"true\"\n          aria-pressed={active !== undefined ? active : undefined}\n          {...elementProps}\n          {...cleanRest}\n        >\n          {loaderIcon}\n        </Component>\n      )\n    }\n\n    return (\n      <Component\n        ref={ref}\n        className={classes}\n        aria-busy={loading ? 'true' : undefined}\n        aria-pressed={active !== undefined ? active : undefined}\n        {...elementProps}\n        {...cleanRest}\n      >\n        {loading ? (\n          <span className=\"inline-flex items-center gap-2\" aria-live=\"polite\">\n            {loaderIcon}\n            {loadingText ? (\n              <TextContent className={buildClassName(LOADER_TEXT_CLASS[theme]?.[variant])}>\n                {loadingText}\n              </TextContent>\n            ) : (\n              children\n            )}\n          </span>\n        ) : (\n          <>\n            {leftIcon && <span className=\"shrink-0 inline-flex items-center\">{leftIcon}</span>}\n            {children}\n            {rightIcon && <span className=\"shrink-0 inline-flex items-center\">{rightIcon}</span>}\n          </>\n        )}\n      </Component>\n    )\n  },\n) as ButtonComponent\n\nButton.displayName = 'Button'\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/es/components/Checkbox/Checkbox.js

@@ -3,6 +3,7 @@ import { forwardRef, useId, useRef, useImperativeHandle, useEffect } from 'react
 import { Label } from '../Label/Label.js';
 import { buildClassName } from '../../utils/build-classname.js';
 import { TextContent } from '../TextContent/TextContent.js';
+import { isEmpty } from '../../utils/is-empty.js';
 
 const sizeStyles = {
     sm: {
@@ -26,7 +27,7 @@ const sizeStyles = {
 };
 const Checkbox = forwardRef((props, ref) => {
     var _a;
-    const { id, name, label, labelClass = '', wrapperClass = '', containerClass = '', error, helperText, disabled = false, indeterminate = false, size = 'md', variant = 'default', description, className = '', checked, onChange, ...rest } = props;
+    const { id, name, label, labelClass = '', wrapperClass = '', containerClass = '', error, helperText, disabled = false, indeterminate = false, size = 'md', variant = 'default', description, className = '', checked, onChange, required, 'aria-describedby': ariaDescribedBy, ...rest } = props;
     const generatedId = useId();
     const checkboxId = (_a = id !== null && id !== void 0 ? id : name) !== null && _a !== void 0 ? _a : generatedId;
     const innerRef = useRef(null);
@@ -38,6 +39,11 @@ const Checkbox = forwardRef((props, ref) => {
     }, [indeterminate]);
     const currentSize = sizeStyles[size] || sizeStyles.md;
     const isCard = variant === 'card';
+    const hasError = !isEmpty(error);
+    const errorId = checkboxId && hasError ? `${checkboxId}-error` : undefined;
+    const helperId = checkboxId && helperText && !hasError ? `${checkboxId}-helper` : undefined;
+    const descId = checkboxId && description ? `${checkboxId}-desc` : undefined;
+    const describedBy = [ariaDescribedBy, errorId, helperId, descId].filter(Boolean).join(' ') || undefined;
     return (jsxs("div", { className: buildClassName(wrapperClass), children: [jsx("div", { className: buildClassName(isCard
                     ? 'rounded-xl border p-3.5 transition-all duration-150 relative'
                     : 'flex items-center', isCard &&
@@ -45,16 +51,16 @@ const Checkbox = forwardRef((props, ref) => {
                         ? 'border-[var(--ui-border-muted)] bg-gray-50/50 dark:bg-gray-900/40 opacity-70'
                         : checked || indeterminate
                             ? 'border-blue-500/80 bg-blue-50/30 dark:bg-blue-950/20 dark:border-blue-500/60 shadow-xs'
-                            : 'border-[var(--ui-border)] bg-white dark:bg-gray-900 hover:border-gray-300 dark:hover:border-gray-700 shadow-2xs'), containerClass), children: jsxs("label", { htmlFor: checkboxId, className: buildClassName('inline-flex relative select-none w-full', description ? 'items-start' : 'items-center', disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'), children: [jsxs("div", { className: "relative inline-flex items-center justify-center shrink-0", children: [jsx("input", { ref: innerRef, ...rest, id: checkboxId, name: name, type: "checkbox", disabled: disabled, checked: checked, onChange: onChange, "aria-checked": indeterminate ? 'mixed' : checked, className: buildClassName('peer cursor-pointer transition-all appearance-none rounded', currentSize.box, 'border focus:ring-2 focus:ring-offset-2', 'checked:bg-blue-600 checked:border-blue-600 dark:checked:bg-blue-600 dark:checked:border-blue-600', 'focus:ring-[var(--ui-focus-ring)] dark:focus:ring-offset-gray-900', disabled
+                            : 'border-[var(--ui-border)] bg-white dark:bg-gray-900 hover:border-gray-300 dark:hover:border-gray-700 shadow-2xs'), containerClass), children: jsxs("label", { htmlFor: checkboxId, className: buildClassName('inline-flex relative select-none w-full', description ? 'items-start' : 'items-center', disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'), children: [jsxs("div", { className: "relative inline-flex items-center justify-center shrink-0", children: [jsx("input", { ref: innerRef, ...rest, id: checkboxId, name: name, type: "checkbox", disabled: disabled, checked: checked, onChange: onChange, required: required, "aria-required": required ? true : undefined, "aria-invalid": hasError ? true : undefined, "aria-describedby": describedBy, "aria-checked": indeterminate ? 'mixed' : checked, className: buildClassName('peer cursor-pointer transition-all appearance-none rounded', currentSize.box, 'border focus:ring-2 focus:ring-offset-2', 'checked:bg-blue-600 checked:border-blue-600 dark:checked:bg-blue-600 dark:checked:border-blue-600', 'focus:ring-[var(--ui-focus-ring)] dark:focus:ring-offset-gray-900', disabled
                                         ? 'border-[var(--ui-border-muted)] bg-gray-100 dark:bg-gray-800 pointer-events-none'
                                         : 'bg-white dark:bg-gray-700 border-[var(--ui-border)] hover:border-gray-400 dark:hover:border-gray-500', indeterminate &&
                                         '!bg-blue-600 !border-blue-600 dark:!bg-blue-600 dark:!border-blue-600', className) }), !indeterminate && (jsx("span", { className: buildClassName('absolute inset-0 flex items-center justify-center text-white pointer-events-none transition-opacity', checked !== undefined
                                         ? checked
                                             ? 'opacity-100'
                                             : 'opacity-0'
-                                        : 'opacity-0 peer-checked:opacity-100'), children: jsx("svg", { className: currentSize.svg, viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })), indeterminate && (jsx("span", { className: "absolute inset-0 flex items-center justify-center text-white pointer-events-none opacity-100 z-10", children: jsx("svg", { className: currentSize.svg, viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { fillRule: "evenodd", d: "M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z", clipRule: "evenodd" }) }) }))] }), (label || description) && (jsxs("div", { className: "ml-2.5 flex flex-col justify-center min-w-0 flex-1", children: [label && (jsx(Label, { htmlFor: checkboxId, className: buildClassName(disabled
+                                        : 'opacity-0 peer-checked:opacity-100'), children: jsx("svg", { className: currentSize.svg, viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })), indeterminate && (jsx("span", { className: "absolute inset-0 flex items-center justify-center text-white pointer-events-none opacity-100 z-10", children: jsx("svg", { className: currentSize.svg, viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { fillRule: "evenodd", d: "M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z", clipRule: "evenodd" }) }) }))] }), (label || description) && (jsxs("div", { className: "ml-2.5 flex flex-col justify-center min-w-0 flex-1", children: [label && (jsx(Label, { htmlFor: checkboxId, "aria-required": required, className: buildClassName(disabled
                                         ? 'cursor-not-allowed text-gray-400 dark:text-gray-500'
-                                        : 'cursor-pointer text-gray-800 dark:text-gray-200 font-medium', currentSize.text, labelClass), children: label })), description && (jsx("span", { className: buildClassName('mt-0.5 text-gray-500 dark:text-gray-400 font-normal leading-normal', currentSize.subtext), children: description }))] }))] }) }), (error || helperText) && (jsx("div", { className: "mt-1.5 ml-0.5", children: error ? (jsx(TextContent, { error: true, small: true, children: error })) : (jsx(TextContent, { muted: true, small: true, children: helperText })) }))] }));
+                                        : 'cursor-pointer text-gray-800 dark:text-gray-200 font-medium', currentSize.text, labelClass), children: label })), description && (jsx("span", { id: descId, className: buildClassName('mt-0.5 text-gray-500 dark:text-gray-400 font-normal leading-normal', currentSize.subtext), children: description }))] }))] }) }), (error || helperText) && (jsx("div", { className: "mt-1.5 ml-0.5", children: error ? (jsx(TextContent, { error: true, small: true, id: errorId, children: error })) : (jsx(TextContent, { muted: true, small: true, id: helperId, children: helperText })) }))] }));
 });
 Checkbox.displayName = 'Checkbox';
 

package/dist/es/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { forwardRef, useEffect, useId, useRef, useImperativeHandle } from 'react'\nimport { Label } from '../Label'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { CheckboxProps, CheckboxSize } from './Checkbox.types'\nimport { TextContent } from '../TextContent'\n\nconst sizeStyles: Record<\n  CheckboxSize,\n  { box: string; svg: string; text: string; subtext: string }\n> = {\n  sm: {\n    box: 'size-3.5',\n    svg: 'size-2.75',\n    text: 'text-xs',\n    subtext: 'text-[11px]',\n  },\n  md: {\n    box: 'size-4.5',\n    svg: 'size-3.5',\n    text: 'text-sm',\n    subtext: 'text-xs',\n  },\n  lg: {\n    box: 'size-5.5',\n    svg: 'size-4.25',\n    text: 'text-base',\n    subtext: 'text-sm',\n  },\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {\n  const {\n    id,\n    name,\n    label,\n    labelClass = '',\n    wrapperClass = '',\n    containerClass = '',\n    error,\n    helperText,\n    disabled = false,\n    indeterminate = false,\n    size = 'md',\n    variant = 'default',\n    description,\n    className = '',\n    checked,\n    onChange,\n    ...rest\n  } = props\n\n  const generatedId = useId()\n  const checkboxId = id ?? name ?? generatedId\n\n  const innerRef = useRef<HTMLInputElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLInputElement)\n\n  useEffect(() => {\n    if (innerRef.current) {\n      innerRef.current.indeterminate = Boolean(indeterminate)\n    }\n  }, [indeterminate])\n\n  const currentSize = sizeStyles[size] || sizeStyles.md\n  const isCard = variant === 'card'\n\n  return (\n    <div className={buildClassName(wrapperClass)}>\n      <div\n        className={buildClassName(\n          isCard\n            ? 'rounded-xl border p-3.5 transition-all duration-150 relative'\n            : 'flex items-center',\n          isCard &&\n            (disabled\n              ? 'border-[var(--ui-border-muted)] bg-gray-50/50 dark:bg-gray-900/40 opacity-70'\n              : checked || indeterminate\n                ? 'border-blue-500/80 bg-blue-50/30 dark:bg-blue-950/20 dark:border-blue-500/60 shadow-xs'\n                : 'border-[var(--ui-border)] bg-white dark:bg-gray-900 hover:border-gray-300 dark:hover:border-gray-700 shadow-2xs'),\n          containerClass,\n        )}\n      >\n        <label\n          htmlFor={checkboxId}\n          className={buildClassName(\n            'inline-flex relative select-none w-full',\n            description ? 'items-start' : 'items-center',\n            disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer',\n          )}\n        >\n          {/* Custom Checkbox Input Container */}\n          <div className=\"relative inline-flex items-center justify-center shrink-0\">\n            <input\n              ref={innerRef}\n              {...rest}\n              id={checkboxId}\n              name={name}\n              type=\"checkbox\"\n              disabled={disabled}\n              checked={checked}\n              onChange={onChange}\n              aria-checked={indeterminate ? 'mixed' : checked}\n              className={buildClassName(\n                'peer cursor-pointer transition-all appearance-none rounded',\n                currentSize.box,\n                'border focus:ring-2 focus:ring-offset-2',\n                'checked:bg-blue-600 checked:border-blue-600 dark:checked:bg-blue-600 dark:checked:border-blue-600',\n                'focus:ring-[var(--ui-focus-ring)] dark:focus:ring-offset-gray-900',\n                disabled\n                  ? 'border-[var(--ui-border-muted)] bg-gray-100 dark:bg-gray-800 pointer-events-none'\n                  : 'bg-white dark:bg-gray-700 border-[var(--ui-border)] hover:border-gray-400 dark:hover:border-gray-500',\n                indeterminate &&\n                  '!bg-blue-600 !border-blue-600 dark:!bg-blue-600 dark:!border-blue-600',\n                className,\n              )}\n            />\n\n            {/* Checkmark SVG Icon — Rendered only when NOT indeterminate */}\n            {!indeterminate && (\n              <span\n                className={buildClassName(\n                  'absolute inset-0 flex items-center justify-center text-white pointer-events-none transition-opacity',\n                  checked !== undefined\n                    ? checked\n                      ? 'opacity-100'\n                      : 'opacity-0'\n                    : 'opacity-0 peer-checked:opacity-100',\n                )}\n              >\n                <svg className={currentSize.svg} viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                  <path\n                    fillRule=\"evenodd\"\n                    d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n                    clipRule=\"evenodd\"\n                  />\n                </svg>\n              </span>\n            )}\n\n            {/* Indeterminate Minus SVG Icon — Rendered only when indeterminate */}\n            {indeterminate && (\n              <span className=\"absolute inset-0 flex items-center justify-center text-white pointer-events-none opacity-100 z-10\">\n                <svg className={currentSize.svg} viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                  <path\n                    fillRule=\"evenodd\"\n                    d=\"M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z\"\n                    clipRule=\"evenodd\"\n                  />\n                </svg>\n              </span>\n            )}\n          </div>\n\n          {/* Label & Description Column */}\n          {(label || description) && (\n            <div className=\"ml-2.5 flex flex-col justify-center min-w-0 flex-1\">\n              {label && (\n                <Label\n                  htmlFor={checkboxId}\n                  className={buildClassName(\n                    disabled\n                      ? 'cursor-not-allowed text-gray-400 dark:text-gray-500'\n                      : 'cursor-pointer text-gray-800 dark:text-gray-200 font-medium',\n                    currentSize.text,\n                    labelClass,\n                  )}\n                >\n                  {label}\n                </Label>\n              )}\n\n              {description && (\n                <span\n                  className={buildClassName(\n                    'mt-0.5 text-gray-500 dark:text-gray-400 font-normal leading-normal',\n                    currentSize.subtext,\n                  )}\n                >\n                  {description}\n                </span>\n              )}\n            </div>\n          )}\n        </label>\n      </div>\n\n      {/* Helper text or error message */}\n      {(error || helperText) && (\n        <div className=\"mt-1.5 ml-0.5\">\n          {error ? (\n            <TextContent error small>\n              {error}\n            </TextContent>\n          ) : (\n            <TextContent muted small>\n              {helperText}\n            </TextContent>\n          )}\n        </div>\n      )}\n    </div>\n  )\n})\n\nCheckbox.displayName = 'Checkbox'\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { forwardRef, useEffect, useId, useRef, useImperativeHandle } from 'react'\nimport { Label } from '../Label'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { CheckboxProps, CheckboxSize } from './Checkbox.types'\nimport { TextContent } from '../TextContent'\nimport { isEmpty } from '../../utils/is-empty'\n\nconst sizeStyles: Record<\n  CheckboxSize,\n  { box: string; svg: string; text: string; subtext: string }\n> = {\n  sm: {\n    box: 'size-3.5',\n    svg: 'size-2.75',\n    text: 'text-xs',\n    subtext: 'text-[11px]',\n  },\n  md: {\n    box: 'size-4.5',\n    svg: 'size-3.5',\n    text: 'text-sm',\n    subtext: 'text-xs',\n  },\n  lg: {\n    box: 'size-5.5',\n    svg: 'size-4.25',\n    text: 'text-base',\n    subtext: 'text-sm',\n  },\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {\n  const {\n    id,\n    name,\n    label,\n    labelClass = '',\n    wrapperClass = '',\n    containerClass = '',\n    error,\n    helperText,\n    disabled = false,\n    indeterminate = false,\n    size = 'md',\n    variant = 'default',\n    description,\n    className = '',\n    checked,\n    onChange,\n    required,\n    'aria-describedby': ariaDescribedBy,\n    ...rest\n  } = props\n\n  const generatedId = useId()\n  const checkboxId = id ?? name ?? generatedId\n\n  const innerRef = useRef<HTMLInputElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLInputElement)\n\n  useEffect(() => {\n    if (innerRef.current) {\n      innerRef.current.indeterminate = Boolean(indeterminate)\n    }\n  }, [indeterminate])\n\n  const currentSize = sizeStyles[size] || sizeStyles.md\n  const isCard = variant === 'card'\n\n  const hasError = !isEmpty(error)\n  const errorId = checkboxId && hasError ? `${checkboxId}-error` : undefined\n  const helperId = checkboxId && helperText && !hasError ? `${checkboxId}-helper` : undefined\n  const descId = checkboxId && description ? `${checkboxId}-desc` : undefined\n  const describedBy =\n    [ariaDescribedBy, errorId, helperId, descId].filter(Boolean).join(' ') || undefined\n\n  return (\n    <div className={buildClassName(wrapperClass)}>\n      <div\n        className={buildClassName(\n          isCard\n            ? 'rounded-xl border p-3.5 transition-all duration-150 relative'\n            : 'flex items-center',\n          isCard &&\n            (disabled\n              ? 'border-[var(--ui-border-muted)] bg-gray-50/50 dark:bg-gray-900/40 opacity-70'\n              : checked || indeterminate\n                ? 'border-blue-500/80 bg-blue-50/30 dark:bg-blue-950/20 dark:border-blue-500/60 shadow-xs'\n                : 'border-[var(--ui-border)] bg-white dark:bg-gray-900 hover:border-gray-300 dark:hover:border-gray-700 shadow-2xs'),\n          containerClass,\n        )}\n      >\n        <label\n          htmlFor={checkboxId}\n          className={buildClassName(\n            'inline-flex relative select-none w-full',\n            description ? 'items-start' : 'items-center',\n            disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer',\n          )}\n        >\n          {/* Custom Checkbox Input Container */}\n          <div className=\"relative inline-flex items-center justify-center shrink-0\">\n            <input\n              ref={innerRef}\n              {...rest}\n              id={checkboxId}\n              name={name}\n              type=\"checkbox\"\n              disabled={disabled}\n              checked={checked}\n              onChange={onChange}\n              required={required}\n              aria-required={required ? true : undefined}\n              aria-invalid={hasError ? true : undefined}\n              aria-describedby={describedBy}\n              aria-checked={indeterminate ? 'mixed' : checked}\n              className={buildClassName(\n                'peer cursor-pointer transition-all appearance-none rounded',\n                currentSize.box,\n                'border focus:ring-2 focus:ring-offset-2',\n                'checked:bg-blue-600 checked:border-blue-600 dark:checked:bg-blue-600 dark:checked:border-blue-600',\n                'focus:ring-[var(--ui-focus-ring)] dark:focus:ring-offset-gray-900',\n                disabled\n                  ? 'border-[var(--ui-border-muted)] bg-gray-100 dark:bg-gray-800 pointer-events-none'\n                  : 'bg-white dark:bg-gray-700 border-[var(--ui-border)] hover:border-gray-400 dark:hover:border-gray-500',\n                indeterminate &&\n                  '!bg-blue-600 !border-blue-600 dark:!bg-blue-600 dark:!border-blue-600',\n                className,\n              )}\n            />\n\n            {/* Checkmark SVG Icon — Rendered only when NOT indeterminate */}\n            {!indeterminate && (\n              <span\n                className={buildClassName(\n                  'absolute inset-0 flex items-center justify-center text-white pointer-events-none transition-opacity',\n                  checked !== undefined\n                    ? checked\n                      ? 'opacity-100'\n                      : 'opacity-0'\n                    : 'opacity-0 peer-checked:opacity-100',\n                )}\n              >\n                <svg className={currentSize.svg} viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                  <path\n                    fillRule=\"evenodd\"\n                    d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n                    clipRule=\"evenodd\"\n                  />\n                </svg>\n              </span>\n            )}\n\n            {/* Indeterminate Minus SVG Icon — Rendered only when indeterminate */}\n            {indeterminate && (\n              <span className=\"absolute inset-0 flex items-center justify-center text-white pointer-events-none opacity-100 z-10\">\n                <svg className={currentSize.svg} viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                  <path\n                    fillRule=\"evenodd\"\n                    d=\"M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z\"\n                    clipRule=\"evenodd\"\n                  />\n                </svg>\n              </span>\n            )}\n          </div>\n\n          {/* Label & Description Column */}\n          {(label || description) && (\n            <div className=\"ml-2.5 flex flex-col justify-center min-w-0 flex-1\">\n              {label && (\n                <Label\n                  htmlFor={checkboxId}\n                  aria-required={required}\n                  className={buildClassName(\n                    disabled\n                      ? 'cursor-not-allowed text-gray-400 dark:text-gray-500'\n                      : 'cursor-pointer text-gray-800 dark:text-gray-200 font-medium',\n                    currentSize.text,\n                    labelClass,\n                  )}\n                >\n                  {label}\n                </Label>\n              )}\n\n              {description && (\n                <span\n                  id={descId}\n                  className={buildClassName(\n                    'mt-0.5 text-gray-500 dark:text-gray-400 font-normal leading-normal',\n                    currentSize.subtext,\n                  )}\n                >\n                  {description}\n                </span>\n              )}\n            </div>\n          )}\n        </label>\n      </div>\n\n      {/* Helper text or error message */}\n      {(error || helperText) && (\n        <div className=\"mt-1.5 ml-0.5\">\n          {error ? (\n            <TextContent error small id={errorId}>\n              {error}\n            </TextContent>\n          ) : (\n            <TextContent muted small id={helperId}>\n              {helperText}\n            </TextContent>\n          )}\n        </div>\n      )}\n    </div>\n  )\n})\n\nCheckbox.displayName = 'Checkbox'\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/es/components/CheckboxGroup/CheckboxGroup.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId, useState, useMemo } from 'react';
+import { useId, useState, useMemo, useCallback } from 'react';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 import { Label } from '../Label/Label.js';
 import { BodyText } from '../BodyText/BodyText.js';
@@ -13,25 +13,26 @@ const columnClasses = {
     4: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3',
 };
 const CheckboxGroup = (props) => {
-    const { name, options, label, labelClass = '', labelWrapperClass = '', labelHint, containerClass = '', value: controlledValue, defaultValue, onChange, inline = false, columns, size = 'md', variant = 'default', showSelectAll = false, selectAllLabel = 'Select All', error, helperText, disabled = false, } = props;
+    const { name, options, label, labelClass = '', labelWrapperClass = '', labelHint, containerClass = '', value: controlledValue, defaultValue, onChange, inline = false, columns, size = 'md', variant = 'default', showSelectAll = false, selectAllLabel = 'Select All', error, helperText, disabled = false, required, 'aria-describedby': ariaDescribedBy, } = props;
     const groupId = useId();
     const [internalValue, setInternalValue] = useState(defaultValue || []);
     const isControlled = controlledValue !== undefined;
-    const currentValue = isControlled ? controlledValue : internalValue;
+    const currentValue = isControlled ? controlledValue || [] : internalValue;
     const items = useMemo(() => options.map((opt) => typeof opt === 'string' ? { label: opt, value: opt } : opt), [options]);
     const enabledItems = useMemo(() => items.filter((i) => !i.disabled && !disabled), [items, disabled]);
+    const currentValueKeySet = useMemo(() => new Set(currentValue), [currentValue]);
     // Select All State calculation
     const allSelected = useMemo(() => {
         if (!enabledItems.length)
             return false;
-        return enabledItems.every((item) => currentValue.includes(item.value));
-    }, [enabledItems, currentValue]);
+        return enabledItems.every((item) => currentValueKeySet.has(item.value));
+    }, [enabledItems, currentValueKeySet]);
     const isIndeterminate = useMemo(() => {
         if (allSelected)
             return false;
-        return enabledItems.some((item) => currentValue.includes(item.value));
-    }, [allSelected, enabledItems, currentValue]);
-    const handleSelectAllChange = (e) => {
+        return enabledItems.some((item) => currentValueKeySet.has(item.value));
+    }, [allSelected, enabledItems, currentValueKeySet]);
+    const handleSelectAllChange = useCallback((e) => {
         let updated;
         if (allSelected || isIndeterminate) {
             const enabledValues = new Set(enabledItems.map((i) => i.value));
@@ -46,8 +47,8 @@ const CheckboxGroup = (props) => {
             setInternalValue(updated);
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(updated, e);
-    };
-    const handleGroupChange = (e) => {
+    }, [allSelected, isIndeterminate, enabledItems, currentValue, isControlled, onChange]);
+    const handleGroupChange = useCallback((e) => {
         const raw = e.target.value;
         const checked = e.target.checked;
         const matched = items.find((i) => String(i.value) === raw);
@@ -63,16 +64,21 @@ const CheckboxGroup = (props) => {
             setInternalValue(updated);
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(updated, e);
-    };
+    }, [items, currentValue, isControlled, onChange]);
+    const hasError = Boolean(error);
+    const labelId = label ? `${groupId}-label` : undefined;
+    const errorId = groupId && hasError ? `${groupId}-error` : undefined;
+    const helperId = groupId && helperText && !hasError ? `${groupId}-helper` : undefined;
+    const describedBy = [ariaDescribedBy, errorId, helperId].filter(Boolean).join(' ') || undefined;
     const layoutClass = columns
         ? columnClasses[columns]
         : inline
             ? 'flex flex-wrap gap-3'
             : 'flex flex-col gap-3';
-    return (jsxs("div", { className: buildClassName('mb-3 space-y-3', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, children: label }), labelHint && (jsx(BodyText, { muted: true, small: true, children: labelHint }))] })), showSelectAll && items.length > 0 && (jsx("div", { className: "pb-1 border-b border-[var(--ui-border)]", children: jsx(Checkbox, { id: `${groupId}-select-all`, label: selectAllLabel, size: size, variant: variant, checked: allSelected, indeterminate: isIndeterminate, disabled: disabled || enabledItems.length === 0, onChange: handleSelectAllChange }) })), jsx("div", { className: layoutClass, children: items.map((item, index) => {
+    return (jsxs("div", { role: "group", "aria-labelledby": labelId, "aria-describedby": describedBy, className: buildClassName('mb-3 space-y-3', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { id: labelId, className: labelClass, "aria-required": required, children: label }), labelHint && (jsx(BodyText, { muted: true, small: true, children: labelHint }))] })), showSelectAll && items.length > 0 && (jsx("div", { className: "pb-1 border-b border-[var(--ui-border)]", children: jsx(Checkbox, { id: `${groupId}-select-all`, label: selectAllLabel, size: size, variant: variant, checked: allSelected, indeterminate: isIndeterminate, disabled: disabled || enabledItems.length === 0, onChange: handleSelectAllChange }) })), jsx("div", { className: layoutClass, children: items.map((item, index) => {
                     const key = typeof item.value === 'string' || typeof item.value === 'number' ? item.value : index;
-                    return (jsx(Checkbox, { name: name, id: `${groupId}-${String(item.value)}`, label: item.label, description: item.description, value: String(item.value), size: size, variant: variant, disabled: disabled || item.disabled, checked: currentValue.includes(item.value), onChange: handleGroupChange }, key));
-                }) }), (error || helperText) && (jsx("div", { className: "mt-1.5 ml-0.5", children: error ? (jsx(TextContent, { error: true, small: true, children: error })) : (jsx(TextContent, { muted: true, small: true, children: helperText })) }))] }));
+                    return (jsx(Checkbox, { name: name, id: `${groupId}-${String(item.value)}`, label: item.label, description: item.description, value: String(item.value), size: size, variant: variant, disabled: disabled || item.disabled, checked: currentValueKeySet.has(item.value), onChange: handleGroupChange }, key));
+                }) }), (error || helperText) && (jsx("div", { className: "mt-1.5 ml-0.5", children: error ? (jsx(TextContent, { error: true, small: true, id: errorId, children: error })) : (jsx(TextContent, { muted: true, small: true, id: helperId, children: helperText })) }))] }));
 };
 CheckboxGroup.displayName = 'CheckboxGroup';
 

package/dist/es/components/CheckboxGroup/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import { useId, useMemo, useState, type ChangeEvent } from 'react'\nimport { Checkbox } from '../Checkbox'\nimport { Label } from '../Label'\nimport { BodyText } from '../BodyText'\nimport { TextContent } from '../TextContent'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { CheckboxGroupItem, CheckboxGroupProps } from './CheckboxGroup.types'\n\nconst columnClasses: Record<number, string> = {\n  1: 'grid grid-cols-1 gap-3',\n  2: 'grid grid-cols-1 sm:grid-cols-2 gap-3',\n  3: 'grid grid-cols-1 sm:grid-cols-3 gap-3',\n  4: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3',\n}\n\nexport const CheckboxGroup = <T,>(props: CheckboxGroupProps<T>) => {\n  const {\n    name,\n    options,\n    label,\n    labelClass = '',\n    labelWrapperClass = '',\n    labelHint,\n    containerClass = '',\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    inline = false,\n    columns,\n    size = 'md',\n    variant = 'default',\n    showSelectAll = false,\n    selectAllLabel = 'Select All',\n    error,\n    helperText,\n    disabled = false,\n  } = props\n\n  const groupId = useId()\n  const [internalValue, setInternalValue] = useState<T[]>(defaultValue || [])\n\n  const isControlled = controlledValue !== undefined\n  const currentValue = isControlled ? controlledValue : internalValue\n\n  const items = useMemo(\n    () =>\n      options.map((opt) =>\n        typeof opt === 'string' ? ({ label: opt, value: opt } as CheckboxGroupItem<T>) : opt,\n      ),\n    [options],\n  )\n\n  const enabledItems = useMemo(\n    () => items.filter((i) => !i.disabled && !disabled),\n    [items, disabled],\n  )\n\n  // Select All State calculation\n  const allSelected = useMemo(() => {\n    if (!enabledItems.length) return false\n    return enabledItems.every((item) => currentValue.includes(item.value))\n  }, [enabledItems, currentValue])\n\n  const isIndeterminate = useMemo(() => {\n    if (allSelected) return false\n    return enabledItems.some((item) => currentValue.includes(item.value))\n  }, [allSelected, enabledItems, currentValue])\n\n  const handleSelectAllChange = (e: ChangeEvent<HTMLInputElement>) => {\n    let updated: T[]\n    if (allSelected || isIndeterminate) {\n      const enabledValues = new Set(enabledItems.map((i) => i.value))\n      updated = currentValue.filter((v) => !enabledValues.has(v))\n    } else {\n      const enabledValues = enabledItems.map((i) => i.value)\n      const uniqueSet = new Set([...currentValue, ...enabledValues])\n      updated = Array.from(uniqueSet)\n    }\n\n    if (!isControlled) {\n      setInternalValue(updated)\n    }\n    onChange?.(updated, e)\n  }\n\n  const handleGroupChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const raw = e.target.value\n    const checked = e.target.checked\n\n    const matched = items.find((i) => String(i.value) === raw)\n    const itemValue = matched ? matched.value : (raw as unknown as T)\n\n    let updated: T[]\n    if (checked) {\n      updated = [...currentValue, itemValue]\n    } else {\n      updated = currentValue.filter((v) => v !== itemValue)\n    }\n\n    if (!isControlled) {\n      setInternalValue(updated)\n    }\n    onChange?.(updated, e)\n  }\n\n  const layoutClass = columns\n    ? columnClasses[columns]\n    : inline\n      ? 'flex flex-wrap gap-3'\n      : 'flex flex-col gap-3'\n\n  return (\n    <div className={buildClassName('mb-3 space-y-3', containerClass)}>\n      {label && (\n        <div className={buildClassName('flex items-center justify-between', labelWrapperClass)}>\n          <Label className={labelClass}>{label}</Label>\n          {labelHint && (\n            <BodyText muted small>\n              {labelHint}\n            </BodyText>\n          )}\n        </div>\n      )}\n\n      {/* Select All Checkbox Header */}\n      {showSelectAll && items.length > 0 && (\n        <div className=\"pb-1 border-b border-[var(--ui-border)]\">\n          <Checkbox\n            id={`${groupId}-select-all`}\n            label={selectAllLabel}\n            size={size}\n            variant={variant}\n            checked={allSelected}\n            indeterminate={isIndeterminate}\n            disabled={disabled || enabledItems.length === 0}\n            onChange={handleSelectAllChange}\n          />\n        </div>\n      )}\n\n      {/* Group Items Layout */}\n      <div className={layoutClass}>\n        {items.map((item, index) => {\n          const key =\n            typeof item.value === 'string' || typeof item.value === 'number' ? item.value : index\n\n          return (\n            <Checkbox\n              key={key}\n              name={name}\n              id={`${groupId}-${String(item.value)}`}\n              label={item.label}\n              description={item.description}\n              value={String(item.value)}\n              size={size}\n              variant={variant}\n              disabled={disabled || item.disabled}\n              checked={currentValue.includes(item.value)}\n              onChange={handleGroupChange}\n            />\n          )\n        })}\n      </div>\n\n      {/* Group-level Error or Helper Text */}\n      {(error || helperText) && (\n        <div className=\"mt-1.5 ml-0.5\">\n          {error ? (\n            <TextContent error small>\n              {error}\n            </TextContent>\n          ) : (\n            <TextContent muted small>\n              {helperText}\n            </TextContent>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import { useCallback, useId, useMemo, useState, type ChangeEvent } from 'react'\nimport { Checkbox } from '../Checkbox'\nimport { Label } from '../Label'\nimport { BodyText } from '../BodyText'\nimport { TextContent } from '../TextContent'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { CheckboxGroupItem, CheckboxGroupProps } from './CheckboxGroup.types'\n\nconst columnClasses: Record<number, string> = {\n  1: 'grid grid-cols-1 gap-3',\n  2: 'grid grid-cols-1 sm:grid-cols-2 gap-3',\n  3: 'grid grid-cols-1 sm:grid-cols-3 gap-3',\n  4: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3',\n}\n\nexport const CheckboxGroup = <T,>(props: CheckboxGroupProps<T>) => {\n  const {\n    name,\n    options,\n    label,\n    labelClass = '',\n    labelWrapperClass = '',\n    labelHint,\n    containerClass = '',\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    inline = false,\n    columns,\n    size = 'md',\n    variant = 'default',\n    showSelectAll = false,\n    selectAllLabel = 'Select All',\n    error,\n    helperText,\n    disabled = false,\n    required,\n    'aria-describedby': ariaDescribedBy,\n  } = props\n\n  const groupId = useId()\n  const [internalValue, setInternalValue] = useState<T[]>(defaultValue || [])\n\n  const isControlled = controlledValue !== undefined\n  const currentValue = isControlled ? controlledValue || [] : internalValue\n\n  const items = useMemo(\n    () =>\n      options.map((opt) =>\n        typeof opt === 'string' ? ({ label: opt, value: opt } as CheckboxGroupItem<T>) : opt,\n      ),\n    [options],\n  )\n\n  const enabledItems = useMemo(\n    () => items.filter((i) => !i.disabled && !disabled),\n    [items, disabled],\n  )\n\n  const currentValueKeySet = useMemo(() => new Set(currentValue), [currentValue])\n\n  // Select All State calculation\n  const allSelected = useMemo(() => {\n    if (!enabledItems.length) return false\n    return enabledItems.every((item) => currentValueKeySet.has(item.value))\n  }, [enabledItems, currentValueKeySet])\n\n  const isIndeterminate = useMemo(() => {\n    if (allSelected) return false\n    return enabledItems.some((item) => currentValueKeySet.has(item.value))\n  }, [allSelected, enabledItems, currentValueKeySet])\n\n  const handleSelectAllChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      let updated: T[]\n      if (allSelected || isIndeterminate) {\n        const enabledValues = new Set(enabledItems.map((i) => i.value))\n        updated = currentValue.filter((v) => !enabledValues.has(v))\n      } else {\n        const enabledValues = enabledItems.map((i) => i.value)\n        const uniqueSet = new Set([...currentValue, ...enabledValues])\n        updated = Array.from(uniqueSet)\n      }\n\n      if (!isControlled) {\n        setInternalValue(updated)\n      }\n      onChange?.(updated, e)\n    },\n    [allSelected, isIndeterminate, enabledItems, currentValue, isControlled, onChange],\n  )\n\n  const handleGroupChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const raw = e.target.value\n      const checked = e.target.checked\n\n      const matched = items.find((i) => String(i.value) === raw)\n      const itemValue = matched ? matched.value : (raw as unknown as T)\n\n      let updated: T[]\n      if (checked) {\n        updated = [...currentValue, itemValue]\n      } else {\n        updated = currentValue.filter((v) => v !== itemValue)\n      }\n\n      if (!isControlled) {\n        setInternalValue(updated)\n      }\n      onChange?.(updated, e)\n    },\n    [items, currentValue, isControlled, onChange],\n  )\n\n  const hasError = Boolean(error)\n  const labelId = label ? `${groupId}-label` : undefined\n  const errorId = groupId && hasError ? `${groupId}-error` : undefined\n  const helperId = groupId && helperText && !hasError ? `${groupId}-helper` : undefined\n  const describedBy = [ariaDescribedBy, errorId, helperId].filter(Boolean).join(' ') || undefined\n\n  const layoutClass = columns\n    ? columnClasses[columns]\n    : inline\n      ? 'flex flex-wrap gap-3'\n      : 'flex flex-col gap-3'\n\n  return (\n    <div\n      role=\"group\"\n      aria-labelledby={labelId}\n      aria-describedby={describedBy}\n      className={buildClassName('mb-3 space-y-3', containerClass)}\n    >\n      {label && (\n        <div className={buildClassName('flex items-center justify-between', labelWrapperClass)}>\n          <Label id={labelId} className={labelClass} aria-required={required}>\n            {label}\n          </Label>\n          {labelHint && (\n            <BodyText muted small>\n              {labelHint}\n            </BodyText>\n          )}\n        </div>\n      )}\n\n      {/* Select All Checkbox Header */}\n      {showSelectAll && items.length > 0 && (\n        <div className=\"pb-1 border-b border-[var(--ui-border)]\">\n          <Checkbox\n            id={`${groupId}-select-all`}\n            label={selectAllLabel}\n            size={size}\n            variant={variant}\n            checked={allSelected}\n            indeterminate={isIndeterminate}\n            disabled={disabled || enabledItems.length === 0}\n            onChange={handleSelectAllChange}\n          />\n        </div>\n      )}\n\n      {/* Group Items Layout */}\n      <div className={layoutClass}>\n        {items.map((item, index) => {\n          const key =\n            typeof item.value === 'string' || typeof item.value === 'number' ? item.value : index\n\n          return (\n            <Checkbox\n              key={key}\n              name={name}\n              id={`${groupId}-${String(item.value)}`}\n              label={item.label}\n              description={item.description}\n              value={String(item.value)}\n              size={size}\n              variant={variant}\n              disabled={disabled || item.disabled}\n              checked={currentValueKeySet.has(item.value)}\n              onChange={handleGroupChange}\n            />\n          )\n        })}\n      </div>\n\n      {/* Group-level Error or Helper Text */}\n      {(error || helperText) && (\n        <div className=\"mt-1.5 ml-0.5\">\n          {error ? (\n            <TextContent error small id={errorId}>\n              {error}\n            </TextContent>\n          ) : (\n            <TextContent muted small id={helperId}>\n              {helperText}\n            </TextContent>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/es/components/DataList/DataList.js

@@ -29,7 +29,7 @@ const parseNumericValue = (val) => {
     const cleaned = String(val).replace(/[^0-9.-]/g, '');
     return cleaned !== '' ? Number(cleaned) : NaN;
 };
-function DataList({ items, columns, renderItem, searchable = false, searchQuery: externalSearchQuery, onSearchChange, searchFields, filterFields, selectedFilters: externalFilters, onFilterChange, sorting: externalSorting, onSortChange, swipeableActions, rowKey = 'id', selectable = false, selectedKeys = [], onSelectionChange, onItemClick, loading = false, emptyMessage = 'No items found', pagination, setPagination, containerClass = '', itemClass = '', }) {
+function DataList({ items, columns, renderItem, searchable = false, searchQuery: externalSearchQuery, onSearchChange, searchFields, filterFields, selectedFilters: externalFilters, onFilterChange, sorting: externalSorting, onSortChange, swipeableActions, rowKey = 'id', selectable = false, selectedKeys = [], onSelectionChange, onItemClick, loading = false, emptyMessage = 'No items found', pagination, setPagination, paginationClass, paginationContainerClass, paginationProps, renderPagination, containerClass = '', itemClass = '', }) {
     // Internal Search State
     const [internalSearchQuery, setInternalSearchQuery] = useState('');
     const searchQuery = externalSearchQuery !== undefined ? externalSearchQuery : internalSearchQuery;
@@ -277,7 +277,7 @@ function DataList({ items, columns, renderItem, searchable = false, searchQuery:
                         return (jsx(SwipeableRow, { leftActions: actions.leftActions, rightActions: actions.rightActions, children: contentNode }, key));
                     }
                     return jsx("div", { children: contentNode }, key);
-                })) }), pagination && pagination.total > 0 && (jsx("div", { className: "pt-2 flex justify-center", children: jsx(Pagination, { ...pagination, onChange: (newPag) => setPagination === null || setPagination === void 0 ? void 0 : setPagination(newPag) }) }))] }));
+                })) }), pagination && pagination.total > 0 && (jsx("div", { className: buildClassName('pt-2 flex justify-center w-full', paginationClass, paginationContainerClass), children: renderPagination ? (renderPagination(pagination, setPagination)) : (jsx(Pagination, { ...pagination, ...paginationProps, onChange: (newPag) => setPagination === null || setPagination === void 0 ? void 0 : setPagination(newPag) })) }))] }));
 }
 DataList.displayName = 'DataList';