@pk-design/react-tailwind 1.6.0 → 1.7.1

package/dist/cjs/components/Input/Input.js

@@ -0,0 +1,85 @@
+'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 sizeClasses = {
+    sm: {
+        input: 'px-2.5 py-1.5 text-xs leading-5',
+        group: 'w-8 text-xs',
+        icon: 'size-3.5',
+        text: 'text-xs',
+    },
+    md: {
+        input: 'px-3.5 py-2 text-sm leading-6',
+        group: 'w-10 text-sm',
+        icon: 'size-4',
+        text: 'text-sm',
+    },
+    lg: {
+        input: 'px-4 py-2.5 text-base leading-7',
+        group: 'w-12 text-base',
+        icon: 'size-5',
+        text: 'text-base',
+    },
+};
+function buildInputClass(className, { isFocusWithin = false, disabled = false, hasError = false, size = 'md', } = {}) {
+    const currentSize = sizeClasses[size] || sizeClasses.md;
+    return buildClassname.buildClassName('transition-all duration-150', 'block w-full rounded-lg bg-white', currentSize.input, 'text-gray-900 outline outline-1 -outline-offset-1', hasError
+        ? '!outline-red-500 !ring-1 !ring-red-500/50 dark:!outline-red-500'
+        : 'outline-[var(--ui-border)]', disabled
+        ? 'pointer-events-none bg-gray-100 dark:bg-gray-800 dark:text-gray-600 dark:placeholder-gray-600 placeholder-gray-400 outline-[var(--ui-border-muted)]'
+        : 'bg-white dark:bg-gray-700 dark:text-white outline-[var(--ui-border)] dark:placeholder-gray-400 placeholder-gray-400', isFocusWithin
+        ? 'focus-within:outline-[var(--ui-focus-ring)] focus-within:outline-2 focus-within:-outline-offset-2'
+        : 'focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2', className);
+}
+const Input = React.forwardRef((props, ref) => {
+    const { name, id = name, type, label, labelHint, className, labelClass, labelWrapperClass, containerClass, error, showErrorMessage = true, rightGroup, leftGroup, prefix, suffix, clearable = false, onClear, showCount = false, helperText, size = 'md', value, defaultValue, onChange, maxLength, ...inputProps } = props;
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(String(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ''));
+    const isControlled = value !== undefined;
+    const currentVal = isControlled ? String(value !== null && value !== void 0 ? value : '') : uncontrolledValue;
+    const charLength = currentVal.length;
+    const handleInputChange = (e) => {
+        if (!isControlled) {
+            setUncontrolledValue(e.target.value);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    };
+    const handleClear = () => {
+        if (innerRef.current) {
+            innerRef.current.value = '';
+            const event = new Event('input', {
+                bubbles: true,
+            });
+            Object.defineProperty(event, 'target', { writable: true, value: { value: '' } });
+            if (!isControlled) {
+                setUncontrolledValue('');
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        }
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    };
+    const hasError = Boolean(error);
+    const currentSize = sizeClasses[size] || sizeClasses.md;
+    const showClearButton = clearable && charLength > 0 && !inputProps.disabled;
+    const actualRightGroup = rightGroup !== null && rightGroup !== void 0 ? rightGroup : (showClearButton ? (jsxRuntime.jsx("button", { type: "button", onClick: handleClear, className: "p-1 rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer", title: "Clear text", tabIndex: -1, children: jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: currentSize.icon, children: jsxRuntime.jsx("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) }) })) : null);
+    const hasRightGroup = actualRightGroup !== null && actualRightGroup !== undefined;
+    const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
+    return (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('flex items-center justify-between mb-1.5', labelWrapperClass), children: [jsxRuntime.jsx(Label.Label, { className: labelClass, htmlFor: id, children: label }), labelHint && jsxRuntime.jsx(TextContent.TextContent, { xsmall: true, children: labelHint })] })), jsxRuntime.jsxs("div", { className: "flex rounded-lg shadow-2xs", children: [prefix && (jsxRuntime.jsx("span", { className: "inline-flex items-center px-3 rounded-l-lg border border-r-0 border-[var(--ui-border)] bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-xs font-medium shrink-0", children: prefix })), jsxRuntime.jsxs("div", { className: "relative flex-1 min-w-0", children: [hasLeftGroup && (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('absolute top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: leftGroup })), jsxRuntime.jsx("input", { ref: innerRef, autoComplete: "off", ...inputProps, value: value, defaultValue: defaultValue, onChange: handleInputChange, maxLength: maxLength, name: name, id: id, type: type, className: buildClassname.buildClassName(buildInputClass(className, {
+                                    disabled: inputProps.disabled,
+                                    hasError,
+                                    size,
+                                }), prefix ? '!rounded-l-none' : '', suffix ? '!rounded-r-none' : '', hasRightGroup ? (size === 'lg' ? 'pe-12' : size === 'sm' ? 'pe-8' : 'pe-10') : '', hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : '') }), hasRightGroup && (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('absolute end-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500', currentSize.group), children: actualRightGroup }))] }), suffix && (jsxRuntime.jsx("span", { className: "inline-flex items-center px-3 rounded-r-lg border border-l-0 border-[var(--ui-border)] bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-xs font-medium shrink-0", children: suffix }))] }), (showErrorMessage && error) || helperText || showCount ? (jsxRuntime.jsxs("div", { className: "mt-1.5 flex items-center justify-between gap-2 text-xs", children: [jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: showErrorMessage && error ? (jsxRuntime.jsx(TextContent.TextContent, { error: true, small: true, children: error })) : helperText ? (jsxRuntime.jsx(TextContent.TextContent, { muted: true, small: true, children: helperText })) : null }), showCount && (jsxRuntime.jsxs("span", { className: buildClassname.buildClassName('text-[11px] font-medium shrink-0 ml-auto', maxLength && charLength >= maxLength
+                            ? 'text-red-500 font-semibold'
+                            : 'text-gray-400 dark:text-gray-500'), children: [charLength, maxLength ? ` / ${maxLength}` : ''] }))] })) : null] }));
+});
+Input.displayName = 'Input';
+
+exports.Input = Input;
+exports.buildInputClass = buildInputClass;
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useRef, useState, type ChangeEvent } from 'react'\nimport { Label } from '../Label'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { InputProps, InputSize } from './Input.types'\nimport { TextContent } from '../TextContent'\n\nconst sizeClasses: Record<InputSize, { input: string; group: string; icon: string; text: string }> =\n  {\n    sm: {\n      input: 'px-2.5 py-1.5 text-xs leading-5',\n      group: 'w-8 text-xs',\n      icon: 'size-3.5',\n      text: 'text-xs',\n    },\n    md: {\n      input: 'px-3.5 py-2 text-sm leading-6',\n      group: 'w-10 text-sm',\n      icon: 'size-4',\n      text: 'text-sm',\n    },\n    lg: {\n      input: 'px-4 py-2.5 text-base leading-7',\n      group: 'w-12 text-base',\n      icon: 'size-5',\n      text: 'text-base',\n    },\n  }\n\nexport function buildInputClass(\n  className?: string,\n  {\n    isFocusWithin = false,\n    disabled = false,\n    hasError = false,\n    size = 'md',\n  }: { isFocusWithin?: boolean; disabled?: boolean; hasError?: boolean; size?: InputSize } = {},\n) {\n  const currentSize = sizeClasses[size] || sizeClasses.md\n\n  return buildClassName(\n    'transition-all duration-150',\n    'block w-full rounded-lg bg-white',\n    currentSize.input,\n    'text-gray-900 outline outline-1 -outline-offset-1',\n    hasError\n      ? '!outline-red-500 !ring-1 !ring-red-500/50 dark:!outline-red-500'\n      : 'outline-[var(--ui-border)]',\n    disabled\n      ? 'pointer-events-none bg-gray-100 dark:bg-gray-800 dark:text-gray-600 dark:placeholder-gray-600 placeholder-gray-400 outline-[var(--ui-border-muted)]'\n      : 'bg-white dark:bg-gray-700 dark:text-white outline-[var(--ui-border)] dark:placeholder-gray-400 placeholder-gray-400',\n    isFocusWithin\n      ? 'focus-within:outline-[var(--ui-focus-ring)] focus-within:outline-2 focus-within:-outline-offset-2'\n      : 'focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2',\n    className,\n  )\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n  const {\n    name,\n    id = name,\n    type,\n    label,\n    labelHint,\n    className,\n    labelClass,\n    labelWrapperClass,\n    containerClass,\n    error,\n    showErrorMessage = true,\n    rightGroup,\n    leftGroup,\n    prefix,\n    suffix,\n    clearable = false,\n    onClear,\n    showCount = false,\n    helperText,\n    size = 'md',\n    value,\n    defaultValue,\n    onChange,\n    maxLength,\n    ...inputProps\n  } = props\n\n  const innerRef = useRef<HTMLInputElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLInputElement)\n\n  const [uncontrolledValue, setUncontrolledValue] = useState<string>(String(defaultValue ?? ''))\n\n  const isControlled = value !== undefined\n  const currentVal = isControlled ? String(value ?? '') : uncontrolledValue\n  const charLength = currentVal.length\n\n  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setUncontrolledValue(e.target.value)\n    }\n    onChange?.(e)\n  }\n\n  const handleClear = () => {\n    if (innerRef.current) {\n      innerRef.current.value = ''\n      const event = new Event('input', {\n        bubbles: true,\n      }) as unknown as ChangeEvent<HTMLInputElement>\n      Object.defineProperty(event, 'target', { writable: true, value: { value: '' } })\n      if (!isControlled) {\n        setUncontrolledValue('')\n      }\n      onChange?.(event)\n    }\n    onClear?.()\n  }\n\n  const hasError = Boolean(error)\n  const currentSize = sizeClasses[size] || sizeClasses.md\n\n  const showClearButton = clearable && charLength > 0 && !inputProps.disabled\n\n  const actualRightGroup =\n    rightGroup ??\n    (showClearButton ? (\n      <button\n        type=\"button\"\n        onClick={handleClear}\n        className=\"p-1 rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer\"\n        title=\"Clear text\"\n        tabIndex={-1}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          fill=\"currentColor\"\n          className={currentSize.icon}\n        >\n          <path d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n        </svg>\n      </button>\n    ) : null)\n\n  const hasRightGroup = actualRightGroup !== null && actualRightGroup !== undefined\n  const hasLeftGroup = leftGroup != null && leftGroup !== undefined\n\n  return (\n    <div className={buildClassName('group', hasError && 'has-error', containerClass)}>\n      {label && (\n        <div\n          className={buildClassName('flex items-center justify-between mb-1.5', labelWrapperClass)}\n        >\n          <Label className={labelClass} htmlFor={id}>\n            {label}\n          </Label>\n          {labelHint && <TextContent xsmall>{labelHint}</TextContent>}\n        </div>\n      )}\n\n      <div className=\"flex rounded-lg shadow-2xs\">\n        {/* Static Prefix Addon */}\n        {prefix && (\n          <span className=\"inline-flex items-center px-3 rounded-l-lg border border-r-0 border-[var(--ui-border)] bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-xs font-medium shrink-0\">\n            {prefix}\n          </span>\n        )}\n\n        <div className=\"relative flex-1 min-w-0\">\n          {hasLeftGroup && (\n            <span\n              className={buildClassName(\n                'absolute top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500',\n                currentSize.group,\n              )}\n            >\n              {leftGroup}\n            </span>\n          )}\n\n          <input\n            ref={innerRef}\n            autoComplete=\"off\"\n            {...inputProps}\n            value={value}\n            defaultValue={defaultValue}\n            onChange={handleInputChange}\n            maxLength={maxLength}\n            name={name}\n            id={id}\n            type={type}\n            className={buildClassName(\n              buildInputClass(className, {\n                disabled: inputProps.disabled,\n                hasError,\n                size,\n              }),\n              prefix ? '!rounded-l-none' : '',\n              suffix ? '!rounded-r-none' : '',\n              hasRightGroup ? (size === 'lg' ? 'pe-12' : size === 'sm' ? 'pe-8' : 'pe-10') : '',\n              hasLeftGroup ? (size === 'lg' ? 'ps-12' : size === 'sm' ? 'ps-8' : 'ps-10') : '',\n            )}\n          />\n\n          {hasRightGroup && (\n            <span\n              className={buildClassName(\n                'absolute end-0 top-0 h-full flex items-center justify-center text-gray-400 dark:text-gray-500',\n                currentSize.group,\n              )}\n            >\n              {actualRightGroup}\n            </span>\n          )}\n        </div>\n\n        {/* Static Suffix Addon */}\n        {suffix && (\n          <span className=\"inline-flex items-center px-3 rounded-r-lg border border-l-0 border-[var(--ui-border)] bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-xs font-medium shrink-0\">\n            {suffix}\n          </span>\n        )}\n      </div>\n\n      {/* Footer Row: Error / Helper Text & Live Character Count */}\n      {(showErrorMessage && error) || helperText || showCount ? (\n        <div className=\"mt-1.5 flex items-center justify-between gap-2 text-xs\">\n          <div className=\"min-w-0 flex-1\">\n            {showErrorMessage && error ? (\n              <TextContent error small>\n                {error}\n              </TextContent>\n            ) : helperText ? (\n              <TextContent muted small>\n                {helperText}\n              </TextContent>\n            ) : null}\n          </div>\n\n          {showCount && (\n            <span\n              className={buildClassName(\n                'text-[11px] font-medium shrink-0 ml-auto',\n                maxLength && charLength >= maxLength\n                  ? 'text-red-500 font-semibold'\n                  : 'text-gray-400 dark:text-gray-500',\n              )}\n            >\n              {charLength}\n              {maxLength ? ` / ${maxLength}` : ''}\n            </span>\n          )}\n        </div>\n      ) : null}\n    </div>\n  )\n})\n\nInput.displayName = 'Input'\n"],"names":["buildClassName","forwardRef","useRef","useImperativeHandle","useState","_jsx","_jsxs","Label","TextContent"],"mappings":";;;;;;;;AAMA,MAAM,WAAW,GACf;AACE,IAAA,EAAE,EAAE;AACF,QAAA,KAAK,EAAE,iCAAiC;AACxC,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,KAAK,EAAE,+BAA+B;AACtC,QAAA,KAAK,EAAE,cAAc;AACrB,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,KAAK,EAAE,iCAAiC;AACxC,QAAA,KAAK,EAAE,gBAAgB;AACvB,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,IAAI,EAAE,WAAW;AAClB,KAAA;CACF;AAEG,SAAU,eAAe,CAC7B,SAAkB,EAClB,EACE,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,IAAI,GAAA,GAC8E,EAAE,EAAA;IAE7F,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,EAAE;AAEvD,IAAA,OAAOA,6BAAc,CACnB,6BAA6B,EAC7B,kCAAkC,EAClC,WAAW,CAAC,KAAK,EACjB,mDAAmD,EACnD;AACE,UAAE;UACA,4BAA4B,EAChC;AACE,UAAE;UACA,qHAAqH,EACzH;AACE,UAAE;AACF,UAAE,8EAA8E,EAClF,SAAS,CACV;AACH;AAEO,MAAM,KAAK,GAAGC,gBAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,KAAI;AAC3E,IAAA,MAAM,EACJ,IAAI,EACJ,EAAE,GAAG,IAAI,EACT,IAAI,EACJ,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,KAAK,EACL,gBAAgB,GAAG,IAAI,EACvB,UAAU,EACV,SAAS,EACT,MAAM,EACN,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,UAAU,EACV,IAAI,GAAG,IAAI,EACX,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,GAAG,UAAU,EACd,GAAG,KAAK;AAET,IAAA,MAAM,QAAQ,GAAGC,YAAM,CAAmB,IAAI,CAAC;IAC/CC,yBAAmB,CAAC,GAAG,EAAE,MAAM,QAAQ,CAAC,OAA2B,CAAC;AAEpE,IAAA,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAGC,cAAQ,CAAS,MAAM,CAAC,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAZ,YAAY,GAAI,EAAE,CAAC,CAAC;AAE9F,IAAA,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS;IACxC,MAAM,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAL,KAAK,GAAI,EAAE,CAAC,GAAG,iBAAiB;AACzE,IAAA,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM;AAEpC,IAAA,MAAM,iBAAiB,GAAG,CAAC,CAAgC,KAAI;QAC7D,IAAI,CAAC,YAAY,EAAE;AACjB,YAAA,oBAAoB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QACtC;AACA,QAAA,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAG,CAAC,CAAC;AACf,IAAA,CAAC;IAED,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,IAAI,QAAQ,CAAC,OAAO,EAAE;AACpB,YAAA,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE;AAC3B,YAAA,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,OAAO,EAAE;AAC/B,gBAAA,OAAO,EAAE,IAAI;AACd,aAAA,CAA6C;YAC9C,MAAM,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC;YAChF,IAAI,CAAC,YAAY,EAAE;gBACjB,oBAAoB,CAAC,EAAE,CAAC;YAC1B;AACA,YAAA,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAG,KAAK,CAAC;QACnB;AACA,QAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,EAAI;AACb,IAAA,CAAC;AAED,IAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC;IAC/B,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,EAAE;AAEvD,IAAA,MAAM,eAAe,GAAG,SAAS,IAAI,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ;AAE3E,IAAA,MAAM,gBAAgB,GACpB,UAAU,KAAA,IAAA,IAAV,UAAU,KAAA,MAAA,GAAV,UAAU,IACT,eAAe,IACdC,cAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,WAAW,EACpB,SAAS,EAAC,uJAAuJ,EACjK,KAAK,EAAC,YAAY,EAClB,QAAQ,EAAE,EAAE,EAAA,QAAA,EAEZA,cAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EACnB,SAAS,EAAE,WAAW,CAAC,IAAI,EAAA,QAAA,EAE3BA,cAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,8KAA8K,EAAA,CAAG,EAAA,CACrL,EAAA,CACC,IACP,IAAI,CAAC;IAEX,MAAM,aAAa,GAAG,gBAAgB,KAAK,IAAI,IAAI,gBAAgB,KAAK,SAAS;IACjF,MAAM,YAAY,GAAG,SAAS,IAAI,IAAI,IAAI,SAAS,KAAK,SAAS;AAEjE,IAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEN,6BAAc,CAAC,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,cAAc,CAAC,EAAA,QAAA,EAAA,CAC7E,KAAK,KACJM,eAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEN,6BAAc,CAAC,0CAA0C,EAAE,iBAAiB,CAAC,EAAA,QAAA,EAAA,CAExFK,cAAA,CAACE,WAAK,EAAA,EAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,EAAA,QAAA,EACtC,KAAK,GACA,EACP,SAAS,IAAIF,cAAA,CAACG,uBAAW,EAAA,EAAC,MAAM,EAAA,IAAA,EAAA,QAAA,EAAE,SAAS,EAAA,CAAe,CAAA,EAAA,CACvD,CACP,EAEDF,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,aAExC,MAAM,KACLD,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kLAAkL,EAAA,QAAA,EAC/L,MAAM,EAAA,CACF,CACR,EAEDC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,EAAA,QAAA,EAAA,CACrC,YAAY,KACXD,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEL,6BAAc,CACvB,yFAAyF,EACzF,WAAW,CAAC,KAAK,CAClB,EAAA,QAAA,EAEA,SAAS,EAAA,CACL,CACR,EAEDK,cAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,YAAY,EAAC,KAAK,KACd,UAAU,EACd,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,SAAS,EAAEL,6BAAc,CACvB,eAAe,CAAC,SAAS,EAAE;oCACzB,QAAQ,EAAE,UAAU,CAAC,QAAQ;oCAC7B,QAAQ;oCACR,IAAI;iCACL,CAAC,EACF,MAAM,GAAG,iBAAiB,GAAG,EAAE,EAC/B,MAAM,GAAG,iBAAiB,GAAG,EAAE,EAC/B,aAAa,IAAI,IAAI,KAAK,IAAI,GAAG,OAAO,GAAG,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,OAAO,IAAI,EAAE,EACjF,YAAY,IAAI,IAAI,KAAK,IAAI,GAAG,OAAO,GAAG,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,OAAO,IAAI,EAAE,CACjF,EAAA,CACD,EAED,aAAa,KACZK,cAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAEL,6BAAc,CACvB,+FAA+F,EAC/F,WAAW,CAAC,KAAK,CAClB,EAAA,QAAA,EAEA,gBAAgB,EAAA,CACZ,CACR,IACG,EAGL,MAAM,KACLK,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,kLAAkL,YAC/L,MAAM,EAAA,CACF,CACR,CAAA,EAAA,CACG,EAGL,CAAC,gBAAgB,IAAI,KAAK,KAAK,UAAU,IAAI,SAAS,IACrDC,yBAAK,SAAS,EAAC,wDAAwD,EAAA,QAAA,EAAA,CACrED,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,YAC5B,gBAAgB,IAAI,KAAK,IACxBA,cAAA,CAACG,uBAAW,IAAC,KAAK,EAAA,IAAA,EAAC,KAAK,EAAA,IAAA,EAAA,QAAA,EACrB,KAAK,GACM,IACZ,UAAU,IACZH,cAAA,CAACG,uBAAW,EAAA,EAAC,KAAK,EAAA,IAAA,EAAC,KAAK,kBACrB,UAAU,EAAA,CACC,IACZ,IAAI,EAAA,CACJ,EAEL,SAAS,KACRF,0BACE,SAAS,EAAEN,6BAAc,CACvB,0CAA0C,EAC1C,SAAS,IAAI,UAAU,IAAI;AACzB,8BAAE;8BACA,kCAAkC,CACvC,EAAA,QAAA,EAAA,CAEA,UAAU,EACV,SAAS,GAAG,CAAA,GAAA,EAAM,SAAS,CAAA,CAAE,GAAG,EAAE,CAAA,EAAA,CAC9B,CACR,CAAA,EAAA,CACG,IACJ,IAAI,CAAA,EAAA,CACJ;AAEV,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO;;;;;"}

package/dist/cjs/components/Label/Label.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var buildClassname = require('../../utils/build-classname.js');
+
+const Label = React.forwardRef((props, ref) => {
+    const { className, children, ...labelProps } = props;
+    return (jsxRuntime.jsx("label", { ref: ref, ...labelProps, className: buildClassname.buildClassName('block text-sm font-medium text-gray-600 dark:text-gray-300', className), children: children }));
+});
+Label.displayName = 'Label';
+
+exports.Label = Label;
+//# sourceMappingURL=Label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sources":["../../../../../src/components/Label/Label.tsx"],"sourcesContent":["import React, { forwardRef, type LabelHTMLAttributes } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\n\ninterface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {\n  htmlFor?: string\n}\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>((props, ref) => {\n  const { className, children, ...labelProps } = props\n  return (\n    <label\n      ref={ref}\n      {...labelProps}\n      className={buildClassName(\n        'block text-sm font-medium text-gray-600 dark:text-gray-300',\n        className,\n      )}\n    >\n      {children}\n    </label>\n  )\n})\n\nLabel.displayName = 'Label'\n"],"names":["forwardRef","_jsx","buildClassName"],"mappings":";;;;;;AAOO,MAAM,KAAK,GAAGA,gBAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,KAAI;IAC3E,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK;IACpD,QACEC,0BACE,GAAG,EAAE,GAAG,EAAA,GACJ,UAAU,EACd,SAAS,EAAEC,6BAAc,CACvB,4DAA4D,EAC5D,SAAS,CACV,YAEA,QAAQ,EAAA,CACH;AAEZ,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/cjs/components/Loader/index.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var buildClassname = require('../../utils/build-classname.js');
+
+const loaderSizeMap = {
+    xs: 'size-4',
+    sm: 'size-6',
+    md: 'size-8',
+    lg: 'size-10',
+};
+const Loader = ({ className = '', size = 'md', ...props }) => {
+    const hasColorClass = /\btext-/.test(className);
+    return (jsxRuntime.jsx("svg", { className: buildClassname.buildClassName(!hasColorClass && 'text-blue-600 dark:text-white', loaderSizeMap[size], className, 'spinner'), viewBox: "0 0 50 50", ...props, children: jsxRuntime.jsx("circle", { className: "path", cx: "25", cy: "25", r: "20", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "5" }) }));
+};
+
+exports.Loader = Loader;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Loader/index.tsx"],"sourcesContent":["import React from 'react'\nimport { buildClassName } from '../../utils/build-classname'\n\nimport './loader.css'\n\nexport type LoaderSize = 'xs' | 'sm' | 'md' | 'lg'\n\ntype LoaderSizeMap = {\n  [k in LoaderSize]: string\n}\n\ninterface LoaderProps extends React.SVGAttributes<SVGSVGElement> {\n  size?: LoaderSize\n  className?: string\n}\n\nconst loaderSizeMap: LoaderSizeMap = {\n  xs: 'size-4',\n  sm: 'size-6',\n  md: 'size-8',\n  lg: 'size-10',\n}\n\nexport const Loader: React.FC<LoaderProps> = ({ className = '', size = 'md', ...props }) => {\n  const hasColorClass = /\\btext-/.test(className)\n\n  return (\n    <svg\n      className={buildClassName(\n        !hasColorClass && 'text-blue-600 dark:text-white',\n        loaderSizeMap[size],\n        className,\n        'spinner',\n      )}\n      viewBox=\"0 0 50 50\"\n      {...props}\n    >\n      <circle\n        className=\"path\"\n        cx=\"25\"\n        cy=\"25\"\n        r=\"20\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"5\"\n      />\n    </svg>\n  )\n}\n"],"names":["_jsx","buildClassName"],"mappings":";;;;;AAgBA,MAAM,aAAa,GAAkB;AACnC,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,SAAS;CACd;AAEM,MAAM,MAAM,GAA0B,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,KAAI;IACzF,MAAM,aAAa,GAAG,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;AAE/C,IAAA,QACEA,cAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,6BAAc,CACvB,CAAC,aAAa,IAAI,+BAA+B,EACjD,aAAa,CAAC,IAAI,CAAC,EACnB,SAAS,EACT,SAAS,CACV,EACD,OAAO,EAAC,WAAW,EAAA,GACf,KAAK,EAAA,QAAA,EAETD,cAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAC,MAAM,EAChB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,WAAW,EAAC,GAAG,EAAA,CACf,EAAA,CACE;AAEV;;;;"}

package/dist/cjs/components/MobileHeader/MobileHeader.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var buildClassname = require('../../utils/build-classname.js');
+
+function ChevronLeftIcon() {
+    return (jsxRuntime.jsx("svg", { className: "size-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }));
+}
+function SearchIcon() {
+    return (jsxRuntime.jsx("svg", { className: "size-4 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }));
+}
+function ClearIcon() {
+    return (jsxRuntime.jsx("svg", { className: "size-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }));
+}
+function MobileHeader({ title, subtitle, titleAlign = 'center', onBack, backLabel = 'Back', leading, actions, searchable = false, searchValue: externalSearchValue, onSearchChange, searchPlaceholder = 'Search...', sticky = true, transparent = false, bottomSlot, className = '', }) {
+    const [isSearchActive, setIsSearchActive] = React.useState(false);
+    const [internalSearchValue, setInternalSearchValue] = React.useState('');
+    const searchValue = externalSearchValue !== undefined ? externalSearchValue : internalSearchValue;
+    const handleSearchInput = (e) => {
+        const val = e.target.value;
+        setInternalSearchValue(val);
+        onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(val);
+    };
+    const handleClearSearch = () => {
+        setInternalSearchValue('');
+        onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange('');
+    };
+    return (jsxRuntime.jsxs("header", { className: buildClassname.buildClassName('w-full transition-colors select-none z-30', sticky && 'sticky top-0', transparent
+            ? 'bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-[var(--ui-border-muted)]'
+            : 'bg-white dark:bg-gray-900 border-b border-[var(--ui-border)] shadow-xs', 'pt-[env(safe-area-inset-top,0px)]', className), "data-testid": "mobile-header", children: [jsxRuntime.jsx("div", { className: "h-14 px-3.5 flex items-center justify-between gap-3 relative", children: searchable && isSearchActive ? (jsxRuntime.jsxs("div", { className: "flex-1 flex items-center gap-2", "data-testid": "mobile-header-search-container", children: [jsxRuntime.jsxs("div", { className: "relative flex-1 flex items-center", children: [jsxRuntime.jsx("span", { className: "absolute left-3 pointer-events-none", children: jsxRuntime.jsx(SearchIcon, {}) }), jsxRuntime.jsx("input", { type: "text", value: searchValue, onChange: handleSearchInput, placeholder: searchPlaceholder, autoFocus: true, className: "w-full pl-9 pr-8 py-1.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-full border border-transparent focus:border-blue-500 focus:outline-hidden transition-all", "data-testid": "mobile-header-search-input" }), searchValue && (jsxRuntime.jsx("button", { type: "button", onClick: handleClearSearch, "aria-label": "Clear search", className: "absolute right-2.5 p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer", children: jsxRuntime.jsx(ClearIcon, {}) }))] }), jsxRuntime.jsx("button", { type: "button", onClick: () => setIsSearchActive(false), className: "text-xs font-semibold text-blue-600 dark:text-blue-400 px-2 py-1.5 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-950/40 cursor-pointer", children: "Cancel" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "flex items-center gap-1 min-w-[40px] shrink-0 z-10", children: onBack ? (jsxRuntime.jsxs("button", { type: "button", onClick: onBack, "aria-label": backLabel, className: "flex items-center gap-0.5 text-blue-600 dark:text-blue-400 hover:text-blue-700 p-1 -ml-1 rounded-xl transition-colors cursor-pointer", "data-testid": "mobile-header-back-btn", children: [jsxRuntime.jsx(ChevronLeftIcon, {}), jsxRuntime.jsx("span", { className: "text-xs font-semibold hidden sm:inline", children: backLabel })] })) : (leading) }), jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('flex-1 min-w-0 px-2', titleAlign === 'center'
+                                ? 'absolute inset-x-12 text-center pointer-events-none flex flex-col items-center justify-center'
+                                : 'text-left'), children: [title && (jsxRuntime.jsx("div", { className: "text-sm font-bold text-gray-900 dark:text-white truncate pointer-events-auto", "data-testid": "mobile-header-title", children: title })), subtitle && (jsxRuntime.jsx("div", { className: "text-[11px] text-gray-500 dark:text-gray-400 truncate pointer-events-auto", "data-testid": "mobile-header-subtitle", children: subtitle }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1 min-w-[40px] shrink-0 justify-end z-10", children: [searchable && (jsxRuntime.jsx("button", { type: "button", onClick: () => setIsSearchActive(true), "aria-label": "Search", className: "p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors cursor-pointer", "data-testid": "mobile-header-search-toggle", children: jsxRuntime.jsx(SearchIcon, {}) })), actions === null || actions === void 0 ? void 0 : actions.map((action) => {
+                                    const badgeColor = {
+                                        danger: 'bg-red-500 text-white',
+                                        info: 'bg-blue-500 text-white',
+                                        success: 'bg-emerald-500 text-white',
+                                    }[action.badgeVariant || 'danger'];
+                                    return (jsxRuntime.jsxs("button", { type: "button", disabled: action.disabled, onClick: action.onClick, "aria-label": action.label, className: buildClassname.buildClassName('p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors relative cursor-pointer', action.disabled && 'opacity-40 cursor-not-allowed pointer-events-none'), "data-testid": `mobile-header-action-${action.id}`, children: [jsxRuntime.jsx("span", { className: "text-base", children: action.icon }), action.badge !== undefined && action.badge !== null && (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('absolute top-1 right-1 min-w-[14px] h-3.5 px-0.5 rounded-full text-[9px] font-bold flex items-center justify-center shadow-xs', badgeColor), "data-testid": `mobile-header-badge-${action.id}`, children: action.badge }))] }, action.id));
+                                })] })] })) }), bottomSlot && (jsxRuntime.jsx("div", { className: "px-3 py-2 border-t border-[var(--ui-border-muted)]", "data-testid": "mobile-header-bottom-slot", children: bottomSlot }))] }));
+}
+MobileHeader.displayName = 'MobileHeader';
+
+exports.MobileHeader = MobileHeader;
+//# sourceMappingURL=MobileHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MobileHeader.js","sources":["../../../../../src/components/MobileHeader/MobileHeader.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport type { MobileHeaderProps, MobileHeaderAction } from './MobileHeader.types'\nimport { buildClassName } from '../../utils/build-classname'\n\nfunction ChevronLeftIcon() {\n  return (\n    <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2.5} d=\"M15 19l-7-7 7-7\" />\n    </svg>\n  )\n}\n\nfunction SearchIcon() {\n  return (\n    <svg className=\"size-4 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2}\n        d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"\n      />\n    </svg>\n  )\n}\n\nfunction ClearIcon() {\n  return (\n    <svg className=\"size-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n    </svg>\n  )\n}\n\nexport function MobileHeader({\n  title,\n  subtitle,\n  titleAlign = 'center',\n  onBack,\n  backLabel = 'Back',\n  leading,\n  actions,\n  searchable = false,\n  searchValue: externalSearchValue,\n  onSearchChange,\n  searchPlaceholder = 'Search...',\n  sticky = true,\n  transparent = false,\n  bottomSlot,\n  className = '',\n}: MobileHeaderProps) {\n  const [isSearchActive, setIsSearchActive] = useState(false)\n  const [internalSearchValue, setInternalSearchValue] = useState('')\n\n  const searchValue = externalSearchValue !== undefined ? externalSearchValue : internalSearchValue\n\n  const handleSearchInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const val = e.target.value\n    setInternalSearchValue(val)\n    onSearchChange?.(val)\n  }\n\n  const handleClearSearch = () => {\n    setInternalSearchValue('')\n    onSearchChange?.('')\n  }\n\n  return (\n    <header\n      className={buildClassName(\n        'w-full transition-colors select-none z-30',\n        sticky && 'sticky top-0',\n        transparent\n          ? 'bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-[var(--ui-border-muted)]'\n          : 'bg-white dark:bg-gray-900 border-b border-[var(--ui-border)] shadow-xs',\n        'pt-[env(safe-area-inset-top,0px)]',\n        className,\n      )}\n      data-testid=\"mobile-header\"\n    >\n      {/* Main Header Row */}\n      <div className=\"h-14 px-3.5 flex items-center justify-between gap-3 relative\">\n        {/* Search Mode Header View */}\n        {searchable && isSearchActive ? (\n          <div\n            className=\"flex-1 flex items-center gap-2\"\n            data-testid=\"mobile-header-search-container\"\n          >\n            <div className=\"relative flex-1 flex items-center\">\n              <span className=\"absolute left-3 pointer-events-none\">\n                <SearchIcon />\n              </span>\n              <input\n                type=\"text\"\n                value={searchValue}\n                onChange={handleSearchInput}\n                placeholder={searchPlaceholder}\n                autoFocus\n                className=\"w-full pl-9 pr-8 py-1.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-full border border-transparent focus:border-blue-500 focus:outline-hidden transition-all\"\n                data-testid=\"mobile-header-search-input\"\n              />\n              {searchValue && (\n                <button\n                  type=\"button\"\n                  onClick={handleClearSearch}\n                  aria-label=\"Clear search\"\n                  className=\"absolute right-2.5 p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 cursor-pointer\"\n                >\n                  <ClearIcon />\n                </button>\n              )}\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => setIsSearchActive(false)}\n              className=\"text-xs font-semibold text-blue-600 dark:text-blue-400 px-2 py-1.5 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-950/40 cursor-pointer\"\n            >\n              Cancel\n            </button>\n          </div>\n        ) : (\n          <>\n            {/* Left Leading / Back Section */}\n            <div className=\"flex items-center gap-1 min-w-[40px] shrink-0 z-10\">\n              {onBack ? (\n                <button\n                  type=\"button\"\n                  onClick={onBack}\n                  aria-label={backLabel}\n                  className=\"flex items-center gap-0.5 text-blue-600 dark:text-blue-400 hover:text-blue-700 p-1 -ml-1 rounded-xl transition-colors cursor-pointer\"\n                  data-testid=\"mobile-header-back-btn\"\n                >\n                  <ChevronLeftIcon />\n                  <span className=\"text-xs font-semibold hidden sm:inline\">{backLabel}</span>\n                </button>\n              ) : (\n                leading\n              )}\n            </div>\n\n            {/* Title & Subtitle Section */}\n            <div\n              className={buildClassName(\n                'flex-1 min-w-0 px-2',\n                titleAlign === 'center'\n                  ? 'absolute inset-x-12 text-center pointer-events-none flex flex-col items-center justify-center'\n                  : 'text-left',\n              )}\n            >\n              {title && (\n                <div\n                  className=\"text-sm font-bold text-gray-900 dark:text-white truncate pointer-events-auto\"\n                  data-testid=\"mobile-header-title\"\n                >\n                  {title}\n                </div>\n              )}\n              {subtitle && (\n                <div\n                  className=\"text-[11px] text-gray-500 dark:text-gray-400 truncate pointer-events-auto\"\n                  data-testid=\"mobile-header-subtitle\"\n                >\n                  {subtitle}\n                </div>\n              )}\n            </div>\n\n            {/* Right Actions Section */}\n            <div className=\"flex items-center gap-1 min-w-[40px] shrink-0 justify-end z-10\">\n              {searchable && (\n                <button\n                  type=\"button\"\n                  onClick={() => setIsSearchActive(true)}\n                  aria-label=\"Search\"\n                  className=\"p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors cursor-pointer\"\n                  data-testid=\"mobile-header-search-toggle\"\n                >\n                  <SearchIcon />\n                </button>\n              )}\n\n              {actions?.map((action: MobileHeaderAction) => {\n                const badgeColor = {\n                  danger: 'bg-red-500 text-white',\n                  info: 'bg-blue-500 text-white',\n                  success: 'bg-emerald-500 text-white',\n                }[action.badgeVariant || 'danger']\n\n                return (\n                  <button\n                    key={action.id}\n                    type=\"button\"\n                    disabled={action.disabled}\n                    onClick={action.onClick}\n                    aria-label={action.label}\n                    className={buildClassName(\n                      'p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-colors relative cursor-pointer',\n                      action.disabled && 'opacity-40 cursor-not-allowed pointer-events-none',\n                    )}\n                    data-testid={`mobile-header-action-${action.id}`}\n                  >\n                    <span className=\"text-base\">{action.icon}</span>\n                    {action.badge !== undefined && action.badge !== null && (\n                      <span\n                        className={buildClassName(\n                          'absolute top-1 right-1 min-w-[14px] h-3.5 px-0.5 rounded-full text-[9px] font-bold flex items-center justify-center shadow-xs',\n                          badgeColor,\n                        )}\n                        data-testid={`mobile-header-badge-${action.id}`}\n                      >\n                        {action.badge}\n                      </span>\n                    )}\n                  </button>\n                )\n              })}\n            </div>\n          </>\n        )}\n      </div>\n\n      {/* Optional Bottom Sub-Header Slot (e.g. Category tabs or filter bar) */}\n      {bottomSlot && (\n        <div\n          className=\"px-3 py-2 border-t border-[var(--ui-border-muted)]\"\n          data-testid=\"mobile-header-bottom-slot\"\n        >\n          {bottomSlot}\n        </div>\n      )}\n    </header>\n  )\n}\n\nMobileHeader.displayName = 'MobileHeader'\n"],"names":["_jsx","useState","_jsxs","buildClassName","_Fragment"],"mappings":"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"}