@pk-design/react-tailwind 1.6.0 → 1.7.0

package/dist/cjs/components/Button/Button.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var buildClassname = require('../../utils/build-classname.js');
+var index = require('../Loader/index.js');
+var TextContent = require('../TextContent/TextContent.js');
+
+/**
+ * Tailwind CSS classes for theme + variant combinations.
+ */
+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)]',
+    },
+    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)]',
+    },
+    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',
+    },
+    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',
+        outlined: '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',
+        plain: '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',
+    },
+    warning: {
+        default: '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',
+        outlined: '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',
+        plain: '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',
+    },
+};
+const LOADER_TEXT_CLASS = {
+    primary: {
+        default: 'text-white',
+        outlined: 'text-[var(--ui-primary-text)]',
+        plain: 'text-[var(--ui-primary-text)]',
+    },
+    danger: {
+        default: 'text-white',
+        outlined: 'text-[var(--ui-danger-text)]',
+        plain: 'text-[var(--ui-danger-text)]',
+    },
+    secondary: {
+        default: 'text-gray-700 dark:text-white',
+        outlined: 'text-gray-700 dark:text-gray-200',
+        plain: 'text-gray-700 dark:text-gray-200',
+    },
+    success: {
+        default: 'text-white',
+        outlined: 'text-emerald-600 dark:text-emerald-400',
+        plain: 'text-emerald-600 dark:text-emerald-400',
+    },
+    warning: {
+        default: 'text-white',
+        outlined: 'text-amber-600 dark:text-amber-400',
+        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';
+    }
+};
+/**
+ * Base shared tailwind classes.
+ */
+const BASE_BTN_CLASS = 'font-medium flex items-center justify-center shrink-0 cursor-pointer ' +
+    '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 = React.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;
+    const Component = as || '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;
+    // Clean invalid props when not rendering a real button
+    const { type: _ignoreType, disabled: _ignoreDisabled, ...cleanRest } = restProps;
+    const buttonSpecificProps = Component === 'button'
+        ? {
+            type: type !== null && type !== void 0 ? type : 'button',
+            disabled: resolvedDisabled,
+        }
+        : {};
+    const classes = React.useMemo(() => buildClassname.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]);
+    /**
+     * SPECIAL CASE: iconOnly + loading → show spinner only
+     */
+    if (loading && iconOnly) {
+        return (jsxRuntime.jsx(Component, { ref: ref, className: classes, ...buttonSpecificProps, ...cleanRest, children: jsxRuntime.jsx(index.Loader, { "data-testid": "btn-loader-icon", size: "xs", className: buildClassname.buildClassName(LOADER_TEXT_CLASS[theme][variant]) }) }));
+    }
+    const loaderIcon = (jsxRuntime.jsx(index.Loader, { "data-testid": "btn-loader-icon", size: "xs", className: buildClassname.buildClassName(LOADER_TEXT_CLASS[theme][variant]) }));
+    return (jsxRuntime.jsx(Component, { ref: ref, className: classes, ...buttonSpecificProps, ...cleanRest, children: loading && !loadingText ? (jsxRuntime.jsxs("span", { className: "flex items-center gap-2", "aria-live": "polite", children: [loaderIcon, children] })) : loading && loadingText ? (jsxRuntime.jsxs("span", { className: "flex items-center gap-2", "aria-live": "polite", children: [loaderIcon, jsxRuntime.jsx(TextContent.TextContent, { className: buildClassname.buildClassName(LOADER_TEXT_CLASS[theme][variant]), children: loadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [leftIcon && jsxRuntime.jsx("span", { className: "shrink-0 flex items-center", children: leftIcon }), children, rightIcon && jsxRuntime.jsx("span", { className: "shrink-0 flex items-center", children: rightIcon })] })) }));
+});
+Button.displayName = 'Button';
+
+exports.Button = Button;
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +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":["forwardRef","useMemo","buildClassName","_jsx","Loader","_jsxs","TextContent"],"mappings":"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"}

package/dist/cjs/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,100 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var buildClassname = require('../../utils/build-classname.js');
+
+const EDGE_ROUNDING = {
+    horizontal: {
+        xs: { first: 'rounded-l-sm rounded-r-none', last: 'rounded-r-sm rounded-l-none' },
+        sm: { first: 'rounded-l rounded-r-none', last: 'rounded-r rounded-l-none' },
+        md: { first: 'rounded-l-md rounded-r-none', last: 'rounded-r-md rounded-l-none' },
+        lg: { first: 'rounded-l-lg rounded-r-none', last: 'rounded-r-lg rounded-l-none' },
+    },
+    vertical: {
+        xs: { first: 'rounded-t-sm rounded-b-none', last: 'rounded-b-sm rounded-t-none' },
+        sm: { first: 'rounded-t rounded-b-none', last: 'rounded-b rounded-t-none' },
+        md: { first: 'rounded-t-md rounded-b-none', last: 'rounded-b-md rounded-t-none' },
+        lg: { first: 'rounded-t-lg rounded-b-none', last: 'rounded-b-lg rounded-t-none' },
+    },
+};
+const PILL_EDGE_ROUNDING = {
+    horizontal: { first: 'rounded-l-full rounded-r-none', last: 'rounded-r-full rounded-l-none' },
+    vertical: { first: 'rounded-t-full rounded-b-none', last: 'rounded-b-full rounded-t-none' },
+};
+const getEdgeRoundingClass = ({ index, count, size, orientation, pill, }) => {
+    if (count <= 1)
+        return '';
+    if (index !== 0 && index !== count - 1)
+        return 'rounded-none';
+    const position = index === 0 ? 'first' : 'last';
+    return pill
+        ? PILL_EDGE_ROUNDING[orientation][position]
+        : EDGE_ROUNDING[orientation][size][position];
+};
+const ButtonGroup = ({ children, orientation = 'horizontal', theme = 'secondary', variant = 'default', size = 'md', value, onChange, disabled: groupDisabled = false, rounded = false, fullWidth = false, label, className = '', }) => {
+    const isVertical = orientation === 'vertical';
+    const items = React.useMemo(() => React.Children.toArray(children).filter(React.isValidElement), [children]);
+    const count = items.length;
+    const isToggleMode = value !== undefined;
+    return (jsxRuntime.jsx("div", { role: "group", "aria-label": label, className: buildClassname.buildClassName('inline-flex items-stretch', isVertical ? 'flex-col' : 'flex-row', fullWidth && 'flex w-full', className), children: items.map((child, index) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const childProps = child.props;
+            const childSize = (_a = childProps.size) !== null && _a !== void 0 ? _a : size;
+            const childDisabled = (_b = childProps.disabled) !== null && _b !== void 0 ? _b : groupDisabled;
+            // Resolve item value for toggle mode
+            const itemVal = (_d = (_c = childProps.value) !== null && _c !== void 0 ? _c : childProps.id) !== null && _d !== void 0 ? _d : (typeof childProps.children === 'string' || typeof childProps.children === 'number'
+                ? childProps.children
+                : index);
+            const isSelected = isToggleMode
+                ? Array.isArray(value)
+                    ? value.includes(itemVal)
+                    : value === itemVal
+                : false;
+            const resolvedTheme = isToggleMode
+                ? isSelected
+                    ? ((_e = childProps.theme) !== null && _e !== void 0 ? _e : 'primary')
+                    : ((_f = childProps.theme) !== null && _f !== void 0 ? _f : 'secondary')
+                : ((_g = childProps.theme) !== null && _g !== void 0 ? _g : theme);
+            const resolvedVariant = (_h = childProps.variant) !== null && _h !== void 0 ? _h : variant;
+            const handleClick = (e) => {
+                var _a;
+                (_a = childProps.onClick) === null || _a === void 0 ? void 0 : _a.call(childProps, e);
+                if (isToggleMode && !childDisabled) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(itemVal);
+                }
+            };
+            return React.cloneElement(child, {
+                theme: resolvedTheme,
+                variant: resolvedVariant,
+                size: childSize,
+                disabled: childDisabled,
+                ...(isToggleMode ? { 'aria-pressed': isSelected } : {}),
+                onClick: handleClick,
+                className: buildClassname.buildClassName(childProps.className, getEdgeRoundingClass({
+                    index,
+                    count,
+                    size: childSize,
+                    orientation,
+                    pill: rounded,
+                }), count > 1 && [
+                    'relative shadow-none hover:z-10 focus:z-10 focus-visible:z-10',
+                    isSelected && 'z-10',
+                    index > 0 && (isVertical ? '-mt-px' : '-ml-px'),
+                    index > 0 &&
+                        resolvedVariant === 'default' &&
+                        (isVertical
+                            ? resolvedTheme === 'primary' || resolvedTheme === 'danger'
+                                ? 'border-t border-white/25 dark:border-white/20'
+                                : 'border-t border-[var(--ui-border)]'
+                            : resolvedTheme === 'primary' || resolvedTheme === 'danger'
+                                ? 'border-l border-white/25 dark:border-white/20'
+                                : 'border-l border-[var(--ui-border)]'),
+                ], fullWidth && 'flex-1'),
+            });
+        }) }));
+};
+ButtonGroup.displayName = 'ButtonGroup';
+
+exports.ButtonGroup = ButtonGroup;
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/cjs/components/ButtonGroup/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sources":["../../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, { Children, cloneElement, isValidElement, useMemo } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { ButtonSize, ButtonTheme } from '../Button/Button.types'\nimport type { ButtonGroupOrientation, ButtonGroupProps } from './ButtonGroup.types'\n\nconst EDGE_ROUNDING: Record<\n  ButtonGroupOrientation,\n  Record<ButtonSize, { first: string; last: string }>\n> = {\n  horizontal: {\n    xs: { first: 'rounded-l-sm rounded-r-none', last: 'rounded-r-sm rounded-l-none' },\n    sm: { first: 'rounded-l rounded-r-none', last: 'rounded-r rounded-l-none' },\n    md: { first: 'rounded-l-md rounded-r-none', last: 'rounded-r-md rounded-l-none' },\n    lg: { first: 'rounded-l-lg rounded-r-none', last: 'rounded-r-lg rounded-l-none' },\n  },\n  vertical: {\n    xs: { first: 'rounded-t-sm rounded-b-none', last: 'rounded-b-sm rounded-t-none' },\n    sm: { first: 'rounded-t rounded-b-none', last: 'rounded-b rounded-t-none' },\n    md: { first: 'rounded-t-md rounded-b-none', last: 'rounded-b-md rounded-t-none' },\n    lg: { first: 'rounded-t-lg rounded-b-none', last: 'rounded-b-lg rounded-t-none' },\n  },\n}\n\nconst PILL_EDGE_ROUNDING: Record<ButtonGroupOrientation, { first: string; last: string }> = {\n  horizontal: { first: 'rounded-l-full rounded-r-none', last: 'rounded-r-full rounded-l-none' },\n  vertical: { first: 'rounded-t-full rounded-b-none', last: 'rounded-b-full rounded-t-none' },\n}\n\nconst getEdgeRoundingClass = ({\n  index,\n  count,\n  size,\n  orientation,\n  pill,\n}: {\n  index: number\n  count: number\n  size: ButtonSize\n  orientation: ButtonGroupOrientation\n  pill: boolean\n}) => {\n  if (count <= 1) return ''\n  if (index !== 0 && index !== count - 1) return 'rounded-none'\n\n  const position = index === 0 ? 'first' : 'last'\n  return pill\n    ? PILL_EDGE_ROUNDING[orientation][position]\n    : EDGE_ROUNDING[orientation][size][position]\n}\n\nexport const ButtonGroup: React.FC<ButtonGroupProps> = ({\n  children,\n  orientation = 'horizontal',\n  theme = 'secondary',\n  variant = 'default',\n  size = 'md',\n  value,\n  onChange,\n  disabled: groupDisabled = false,\n  rounded = false,\n  fullWidth = false,\n  label,\n  className = '',\n}) => {\n  const isVertical = orientation === 'vertical'\n  const items = useMemo(() => Children.toArray(children).filter(isValidElement), [children])\n  const count = items.length\n  const isToggleMode = value !== undefined\n\n  return (\n    <div\n      role=\"group\"\n      aria-label={label}\n      className={buildClassName(\n        'inline-flex items-stretch',\n        isVertical ? 'flex-col' : 'flex-row',\n        fullWidth && 'flex w-full',\n        className,\n      )}\n    >\n      {items.map((child, index) => {\n        const childProps = child.props as Record<string, any>\n        const childSize = (childProps.size as ButtonSize) ?? size\n        const childDisabled = childProps.disabled ?? groupDisabled\n\n        // Resolve item value for toggle mode\n        const itemVal =\n          childProps.value ??\n          childProps.id ??\n          (typeof childProps.children === 'string' || typeof childProps.children === 'number'\n            ? childProps.children\n            : index)\n\n        const isSelected = isToggleMode\n          ? Array.isArray(value)\n            ? value.includes(itemVal)\n            : value === itemVal\n          : false\n\n        const resolvedTheme: ButtonTheme = isToggleMode\n          ? isSelected\n            ? (childProps.theme ?? 'primary')\n            : (childProps.theme ?? 'secondary')\n          : (childProps.theme ?? theme)\n\n        const resolvedVariant = childProps.variant ?? variant\n\n        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n          childProps.onClick?.(e)\n          if (isToggleMode && !childDisabled) {\n            onChange?.(itemVal)\n          }\n        }\n\n        return cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n          theme: resolvedTheme,\n          variant: resolvedVariant,\n          size: childSize,\n          disabled: childDisabled,\n          ...(isToggleMode ? { 'aria-pressed': isSelected } : {}),\n          onClick: handleClick,\n          className: buildClassName(\n            childProps.className,\n            getEdgeRoundingClass({\n              index,\n              count,\n              size: childSize,\n              orientation,\n              pill: rounded,\n            }),\n            count > 1 && [\n              'relative shadow-none hover:z-10 focus:z-10 focus-visible:z-10',\n              isSelected && 'z-10',\n              index > 0 && (isVertical ? '-mt-px' : '-ml-px'),\n              index > 0 &&\n                resolvedVariant === 'default' &&\n                (isVertical\n                  ? resolvedTheme === 'primary' || resolvedTheme === 'danger'\n                    ? 'border-t border-white/25 dark:border-white/20'\n                    : 'border-t border-[var(--ui-border)]'\n                  : resolvedTheme === 'primary' || resolvedTheme === 'danger'\n                    ? 'border-l border-white/25 dark:border-white/20'\n                    : 'border-l border-[var(--ui-border)]'),\n            ],\n            fullWidth && 'flex-1',\n          ),\n        })\n      })}\n    </div>\n  )\n}\n\nButtonGroup.displayName = 'ButtonGroup'\n"],"names":["useMemo","Children","isValidElement","_jsx","buildClassName","cloneElement"],"mappings":"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"}

package/dist/cjs/components/Card/Card.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var buildClassname = require('../../utils/build-classname.js');
+
+const RADIUS_CLASS = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    '2xl': 'rounded-2xl',
+};
+const ASPECT_RATIO_CLASS = {
+    auto: 'aspect-auto',
+    square: 'aspect-square',
+    video: 'aspect-video',
+    wide: 'aspect-[21/9]',
+};
+function ChevronRightIcon({ className = 'size-4' }) {
+    return (jsxRuntime.jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }));
+}
+const Card = React.forwardRef(({ as, ...props }, ref) => {
+    const { variant = 'outlined', radius = 'xl', hoverable = false, clickable = false, selected = false, bordered = true, compact = false, zeroPadding = false, title, subtitle, leading, trailing, badge, showChevron = false, children, onClick, ...rest } = props;
+    const Component = as || 'div';
+    const { className, ...cleanRest } = rest;
+    const isClickable = clickable || Boolean(onClick);
+    const isOutlined = variant === 'outlined' && bordered;
+    const isElevated = variant === 'elevated';
+    const isFilled = variant === 'filled';
+    const isGhost = variant === 'ghost';
+    const classes = buildClassname.buildClassName('block transition-all duration-150 select-none', RADIUS_CLASS[radius] || RADIUS_CLASS.xl, zeroPadding ? '' : compact ? 'p-3 sm:p-4' : 'p-5 sm:p-6', 
+    // Surface variants
+    isOutlined && 'bg-white dark:bg-gray-900 border border-[var(--ui-border)]', isElevated &&
+        'bg-white dark:bg-gray-900 border border-[var(--ui-border)] shadow-md shadow-gray-200/50 dark:shadow-none', isFilled && 'bg-gray-50/80 dark:bg-gray-800/60 border border-transparent', isGhost && 'bg-transparent border border-transparent', 
+    // Hoverable & Clickable mobile/web touch states
+    hoverable && 'hover:bg-gray-100/80 dark:hover:bg-gray-800/80', isClickable &&
+        'cursor-pointer hover:-translate-y-0.5 hover:shadow-lg active:scale-[0.99] active:bg-gray-100 dark:active:bg-gray-800/90', selected && 'ring-2 ring-[var(--ui-primary)] border-[var(--ui-primary)]', className);
+    const hasHeaderRow = title || subtitle || leading || trailing || badge || showChevron;
+    return (jsxRuntime.jsxs(Component, { ref: ref, className: classes, onClick: onClick, ...cleanRest, children: [hasHeaderRow && (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('flex items-center gap-3 w-full min-w-0', children && 'mb-3'), children: [leading && jsxRuntime.jsx("div", { className: "shrink-0 flex items-center justify-center", children: leading }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 text-left", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [title && (jsxRuntime.jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-white truncate", children: title })), badge] }), subtitle && (jsxRuntime.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate", children: subtitle }))] }), (trailing || showChevron) && (jsxRuntime.jsxs("div", { className: "shrink-0 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400", children: [trailing, showChevron && jsxRuntime.jsx(ChevronRightIcon, { className: "size-4 text-gray-400" })] }))] })), children] }));
+});
+const CardHeader = ({ className, bordered = false, children, ...props }) => (jsxRuntime.jsx("div", { className: buildClassname.buildClassName('flex items-center justify-between gap-4 mb-4', bordered && 'pb-4 border-b border-[var(--ui-border)]', className), ...props, children: children }));
+const CardTitle = ({ className, as: Component = 'h3', children, ...props }) => (jsxRuntime.jsx(Component, { className: buildClassname.buildClassName('text-lg font-semibold text-gray-900 dark:text-white tracking-tight', className), ...props, children: children }));
+const CardDescription = ({ className, children, ...props }) => (jsxRuntime.jsx("p", { className: buildClassname.buildClassName('text-sm text-gray-500 dark:text-gray-400 font-normal mt-1', className), ...props, children: children }));
+const CardContent = ({ className, children, ...props }) => (jsxRuntime.jsx("div", { className: buildClassname.buildClassName('space-y-3', className), ...props, children: children }));
+const CardFooter = ({ className, bordered = false, children, ...props }) => (jsxRuntime.jsx("div", { className: buildClassname.buildClassName('flex items-center justify-end gap-3 mt-4', bordered && 'pt-4 border-t border-[var(--ui-border)]', className), ...props, children: children }));
+const CardMedia = ({ className, aspectRatio = 'video', alt = '', ...props }) => (jsxRuntime.jsx("div", { className: buildClassname.buildClassName('overflow-hidden -mx-5 -mt-5 mb-4 sm:-mx-6 sm:-mt-6', className), children: jsxRuntime.jsx("img", { alt: alt, className: buildClassname.buildClassName('w-full object-cover', ASPECT_RATIO_CLASS[aspectRatio] || ASPECT_RATIO_CLASS.video), ...props }) }));
+Card.Header = CardHeader;
+Card.Title = CardTitle;
+Card.Description = CardDescription;
+Card.Content = CardContent;
+Card.Body = CardContent;
+Card.Footer = CardFooter;
+Card.Media = CardMedia;
+Card.displayName = 'Card';
+
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardMedia = CardMedia;
+exports.CardTitle = CardTitle;
+//# sourceMappingURL=Card.js.map

package/dist/cjs/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { ElementType, forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type {\n  CardComponent,\n  CardContentProps,\n  CardDescriptionProps,\n  CardFooterProps,\n  CardHeaderProps,\n  CardMediaProps,\n  CardProps,\n  CardTitleProps,\n} from './Card.types'\nimport type { PolymorphicRef } from '../common-type'\n\nconst RADIUS_CLASS: Record<string, string> = {\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}\n\nconst ASPECT_RATIO_CLASS: Record<string, string> = {\n  auto: 'aspect-auto',\n  square: 'aspect-square',\n  video: 'aspect-video',\n  wide: 'aspect-[21/9]',\n}\n\nfunction ChevronRightIcon({ className = 'size-4' }: { className?: string }) {\n  return (\n    <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n    </svg>\n  )\n}\n\nexport const Card = forwardRef(\n  <C extends ElementType = 'div'>({ as, ...props }: CardProps<C>, ref: PolymorphicRef<C>) => {\n    const {\n      variant = 'outlined',\n      radius = 'xl',\n      hoverable = false,\n      clickable = false,\n      selected = false,\n      bordered = true,\n      compact = false,\n      zeroPadding = false,\n      title,\n      subtitle,\n      leading,\n      trailing,\n      badge,\n      showChevron = false,\n      children,\n      onClick,\n      ...rest\n    } = props\n\n    const Component = as || 'div'\n    const { className, ...cleanRest } = rest as { className?: string }\n\n    const isClickable = clickable || Boolean(onClick)\n    const isOutlined = variant === 'outlined' && bordered\n    const isElevated = variant === 'elevated'\n    const isFilled = variant === 'filled'\n    const isGhost = variant === 'ghost'\n\n    const classes = buildClassName(\n      'block transition-all duration-150 select-none',\n      RADIUS_CLASS[radius] || RADIUS_CLASS.xl,\n      zeroPadding ? '' : compact ? 'p-3 sm:p-4' : 'p-5 sm:p-6',\n\n      // Surface variants\n      isOutlined && 'bg-white dark:bg-gray-900 border border-[var(--ui-border)]',\n      isElevated &&\n        'bg-white dark:bg-gray-900 border border-[var(--ui-border)] shadow-md shadow-gray-200/50 dark:shadow-none',\n      isFilled && 'bg-gray-50/80 dark:bg-gray-800/60 border border-transparent',\n      isGhost && 'bg-transparent border border-transparent',\n\n      // Hoverable & Clickable mobile/web touch states\n      hoverable && 'hover:bg-gray-100/80 dark:hover:bg-gray-800/80',\n      isClickable &&\n        'cursor-pointer hover:-translate-y-0.5 hover:shadow-lg active:scale-[0.99] active:bg-gray-100 dark:active:bg-gray-800/90',\n      selected && 'ring-2 ring-[var(--ui-primary)] border-[var(--ui-primary)]',\n\n      className,\n    )\n\n    const hasHeaderRow = title || subtitle || leading || trailing || badge || showChevron\n\n    return (\n      <Component ref={ref} className={classes} onClick={onClick} {...cleanRest}>\n        {hasHeaderRow && (\n          <div\n            className={buildClassName('flex items-center gap-3 w-full min-w-0', children && 'mb-3')}\n          >\n            {leading && <div className=\"shrink-0 flex items-center justify-center\">{leading}</div>}\n            <div className=\"flex-1 min-w-0 text-left\">\n              <div className=\"flex items-center gap-2 flex-wrap\">\n                {title && (\n                  <span className=\"text-sm font-semibold text-gray-900 dark:text-white truncate\">\n                    {title}\n                  </span>\n                )}\n                {badge}\n              </div>\n              {subtitle && (\n                <div className=\"text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate\">\n                  {subtitle}\n                </div>\n              )}\n            </div>\n            {(trailing || showChevron) && (\n              <div className=\"shrink-0 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400\">\n                {trailing}\n                {showChevron && <ChevronRightIcon className=\"size-4 text-gray-400\" />}\n              </div>\n            )}\n          </div>\n        )}\n        {children}\n      </Component>\n    )\n  },\n) as unknown as CardComponent\n\nexport const CardHeader = ({\n  className,\n  bordered = false,\n  children,\n  ...props\n}: CardHeaderProps) => (\n  <div\n    className={buildClassName(\n      'flex items-center justify-between gap-4 mb-4',\n      bordered && 'pb-4 border-b border-[var(--ui-border)]',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n)\n\nexport const CardTitle = ({\n  className,\n  as: Component = 'h3',\n  children,\n  ...props\n}: CardTitleProps) => (\n  <Component\n    className={buildClassName(\n      'text-lg font-semibold text-gray-900 dark:text-white tracking-tight',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </Component>\n)\n\nexport const CardDescription = ({ className, children, ...props }: CardDescriptionProps) => (\n  <p\n    className={buildClassName(\n      'text-sm text-gray-500 dark:text-gray-400 font-normal mt-1',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </p>\n)\n\nexport const CardContent = ({ className, children, ...props }: CardContentProps) => (\n  <div className={buildClassName('space-y-3', className)} {...props}>\n    {children}\n  </div>\n)\n\nexport const CardFooter = ({\n  className,\n  bordered = false,\n  children,\n  ...props\n}: CardFooterProps) => (\n  <div\n    className={buildClassName(\n      'flex items-center justify-end gap-3 mt-4',\n      bordered && 'pt-4 border-t border-[var(--ui-border)]',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n)\n\nexport const CardMedia = ({\n  className,\n  aspectRatio = 'video',\n  alt = '',\n  ...props\n}: CardMediaProps) => (\n  <div className={buildClassName('overflow-hidden -mx-5 -mt-5 mb-4 sm:-mx-6 sm:-mt-6', className)}>\n    <img\n      alt={alt}\n      className={buildClassName(\n        'w-full object-cover',\n        ASPECT_RATIO_CLASS[aspectRatio] || ASPECT_RATIO_CLASS.video,\n      )}\n      {...props}\n    />\n  </div>\n)\n\nCard.Header = CardHeader\nCard.Title = CardTitle\nCard.Description = CardDescription\nCard.Content = CardContent\nCard.Body = CardContent\nCard.Footer = CardFooter\nCard.Media = CardMedia\n\nCard.displayName = 'Card'\n"],"names":["_jsx","forwardRef","buildClassName","_jsxs"],"mappings":"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"}

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Label = require('../Label/Label.js');
+var buildClassname = require('../../utils/build-classname.js');
+var TextContent = require('../TextContent/TextContent.js');
+
+const sizeStyles = {
+    sm: {
+        box: 'size-3.5',
+        svg: 'size-2.75',
+        text: 'text-xs',
+        subtext: 'text-[11px]',
+    },
+    md: {
+        box: 'size-4.5',
+        svg: 'size-3.5',
+        text: 'text-sm',
+        subtext: 'text-xs',
+    },
+    lg: {
+        box: 'size-5.5',
+        svg: 'size-4.25',
+        text: 'text-base',
+        subtext: 'text-sm',
+    },
+};
+const Checkbox = React.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 generatedId = React.useId();
+    const checkboxId = (_a = id !== null && id !== void 0 ? id : name) !== null && _a !== void 0 ? _a : generatedId;
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    React.useEffect(() => {
+        if (innerRef.current) {
+            innerRef.current.indeterminate = Boolean(indeterminate);
+        }
+    }, [indeterminate]);
+    const currentSize = sizeStyles[size] || sizeStyles.md;
+    const isCard = variant === 'card';
+    return (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName(wrapperClass), children: [jsxRuntime.jsx("div", { className: buildClassname.buildClassName(isCard
+                    ? 'rounded-xl border p-3.5 transition-all duration-150 relative'
+                    : 'flex items-center', isCard &&
+                    (disabled
+                        ? '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: jsxRuntime.jsxs("label", { htmlFor: checkboxId, className: buildClassname.buildClassName('inline-flex relative select-none w-full', description ? 'items-start' : 'items-center', disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'), children: [jsxRuntime.jsxs("div", { className: "relative inline-flex items-center justify-center shrink-0", children: [jsxRuntime.jsx("input", { ref: innerRef, ...rest, id: checkboxId, name: name, type: "checkbox", disabled: disabled, checked: checked, onChange: onChange, "aria-checked": indeterminate ? 'mixed' : checked, className: buildClassname.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 && (jsxRuntime.jsx("span", { className: buildClassname.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: jsxRuntime.jsx("svg", { className: currentSize.svg, viewBox: "0 0 20 20", fill: "currentColor", children: jsxRuntime.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 && (jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center text-white pointer-events-none opacity-100 z-10", children: jsxRuntime.jsx("svg", { className: currentSize.svg, viewBox: "0 0 20 20", fill: "currentColor", children: jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z", clipRule: "evenodd" }) }) }))] }), (label || description) && (jsxRuntime.jsxs("div", { className: "ml-2.5 flex flex-col justify-center min-w-0 flex-1", children: [label && (jsxRuntime.jsx(Label.Label, { htmlFor: checkboxId, className: buildClassname.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 && (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('mt-0.5 text-gray-500 dark:text-gray-400 font-normal leading-normal', currentSize.subtext), children: description }))] }))] }) }), (error || helperText) && (jsxRuntime.jsx("div", { className: "mt-1.5 ml-0.5", children: error ? (jsxRuntime.jsx(TextContent.TextContent, { error: true, small: true, children: error })) : (jsxRuntime.jsx(TextContent.TextContent, { muted: true, small: true, children: helperText })) }))] }));
+});
+Checkbox.displayName = 'Checkbox';
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +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":["forwardRef","useId","useRef","useImperativeHandle","useEffect","_jsxs","buildClassName","_jsx","Label","TextContent"],"mappings":"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"}

package/dist/cjs/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,82 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Checkbox = require('../Checkbox/Checkbox.js');
+var Label = require('../Label/Label.js');
+var BodyText = require('../BodyText/BodyText.js');
+var TextContent = require('../TextContent/TextContent.js');
+var buildClassname = require('../../utils/build-classname.js');
+
+const columnClasses = {
+    1: 'grid grid-cols-1 gap-3',
+    2: 'grid grid-cols-1 sm:grid-cols-2 gap-3',
+    3: 'grid grid-cols-1 sm:grid-cols-3 gap-3',
+    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 groupId = React.useId();
+    const [internalValue, setInternalValue] = React.useState(defaultValue || []);
+    const isControlled = controlledValue !== undefined;
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const items = React.useMemo(() => options.map((opt) => typeof opt === 'string' ? { label: opt, value: opt } : opt), [options]);
+    const enabledItems = React.useMemo(() => items.filter((i) => !i.disabled && !disabled), [items, disabled]);
+    // Select All State calculation
+    const allSelected = React.useMemo(() => {
+        if (!enabledItems.length)
+            return false;
+        return enabledItems.every((item) => currentValue.includes(item.value));
+    }, [enabledItems, currentValue]);
+    const isIndeterminate = React.useMemo(() => {
+        if (allSelected)
+            return false;
+        return enabledItems.some((item) => currentValue.includes(item.value));
+    }, [allSelected, enabledItems, currentValue]);
+    const handleSelectAllChange = (e) => {
+        let updated;
+        if (allSelected || isIndeterminate) {
+            const enabledValues = new Set(enabledItems.map((i) => i.value));
+            updated = currentValue.filter((v) => !enabledValues.has(v));
+        }
+        else {
+            const enabledValues = enabledItems.map((i) => i.value);
+            const uniqueSet = new Set([...currentValue, ...enabledValues]);
+            updated = Array.from(uniqueSet);
+        }
+        if (!isControlled) {
+            setInternalValue(updated);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(updated, e);
+    };
+    const handleGroupChange = (e) => {
+        const raw = e.target.value;
+        const checked = e.target.checked;
+        const matched = items.find((i) => String(i.value) === raw);
+        const itemValue = matched ? matched.value : raw;
+        let updated;
+        if (checked) {
+            updated = [...currentValue, itemValue];
+        }
+        else {
+            updated = currentValue.filter((v) => v !== itemValue);
+        }
+        if (!isControlled) {
+            setInternalValue(updated);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(updated, e);
+    };
+    const layoutClass = columns
+        ? columnClasses[columns]
+        : inline
+            ? 'flex flex-wrap gap-3'
+            : 'flex flex-col gap-3';
+    return (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('mb-3 space-y-3', containerClass), children: [label && (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsxRuntime.jsx(Label.Label, { className: labelClass, children: label }), labelHint && (jsxRuntime.jsx(BodyText.BodyText, { muted: true, small: true, children: labelHint }))] })), showSelectAll && items.length > 0 && (jsxRuntime.jsx("div", { className: "pb-1 border-b border-[var(--ui-border)]", children: jsxRuntime.jsx(Checkbox.Checkbox, { id: `${groupId}-select-all`, label: selectAllLabel, size: size, variant: variant, checked: allSelected, indeterminate: isIndeterminate, disabled: disabled || enabledItems.length === 0, onChange: handleSelectAllChange }) })), jsxRuntime.jsx("div", { className: layoutClass, children: items.map((item, index) => {
+                    const key = typeof item.value === 'string' || typeof item.value === 'number' ? item.value : index;
+                    return (jsxRuntime.jsx(Checkbox.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) && (jsxRuntime.jsx("div", { className: "mt-1.5 ml-0.5", children: error ? (jsxRuntime.jsx(TextContent.TextContent, { error: true, small: true, children: error })) : (jsxRuntime.jsx(TextContent.TextContent, { muted: true, small: true, children: helperText })) }))] }));
+};
+CheckboxGroup.displayName = 'CheckboxGroup';
+
+exports.CheckboxGroup = CheckboxGroup;
+//# sourceMappingURL=CheckboxGroup.js.map

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

@@ -0,0 +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":["useId","useState","useMemo","_jsxs","buildClassName","_jsx","Label","BodyText","Checkbox","TextContent"],"mappings":"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"}