@pk-design/react-tailwind 1.5.4 → 1.7.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import React from 'react'\nimport { Button } from '../Button'\nimport { usePagination, DOTS } from './usePagination'\nimport { buildClassName } from '../../utils/build-classname'\nimport ChevronLeftIcon from '../Icons/ChevronLeft.svg'\nimport ChevronRightIcon from '../Icons/ChevronRight.svg'\nimport type { PaginationProps } from './Pagination.types'\n\nexport const Pagination: React.FC<PaginationProps> = ({\n  page: currentPage,\n  limit,\n  total,\n  onChange,\n  className,\n  ellipsis = true, // Default to showing ellipsis\n}) => {\n  const pages = new Array(Math.ceil(total / limit)).fill(null).map((_, i) => i + 1)\n  const isFirstPage = currentPage === 1\n  const isLastPage = total === 0 || pages.length === currentPage\n\n  const range = usePagination({ totalPages: pages.length, currentPage })\n\n  const handlePageChange = (nextVal: number) => {\n    if (nextVal === currentPage) return\n\n    onChange({ page: nextVal })\n  }\n\n  if (ellipsis) {\n    return (\n      <div\n        data-testid=\"pagination-container\"\n        className={buildClassName(\n          'flex items-center justify-between bg-white dark:bg-gray-800 px-4 py-3 sm:px-6',\n          className,\n        )}\n      >\n        <div className=\"flex flex-1 justify-between sm:hidden\">\n          <Button\n            size=\"xs\"\n            theme=\"secondary\"\n            variant=\"plain\"\n            disabled={isFirstPage}\n            onClick={() => handlePageChange(currentPage - 1)}\n            data-testid=\"ellipsis-mobile-prev-btn\"\n          >\n            <span>Previous</span>\n            <ChevronLeftIcon className=\"size-4\" />\n          </Button>\n          <Button\n            size=\"xs\"\n            theme=\"secondary\"\n            variant=\"plain\"\n            disabled={isLastPage}\n            onClick={() => handlePageChange(currentPage + 1)}\n            data-testid=\"ellipsis-mobile-next-btn\"\n          >\n            <span>Next</span>\n            <ChevronRightIcon className=\"size-4\" />\n          </Button>\n        </div>\n        <div className=\"hidden sm:flex sm:flex-1 sm:items-center sm:justify-between\">\n          <p\n            data-testid=\"pagination-summary\"\n            className=\"text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1\"\n          >\n            Showing\n            <span className=\"font-medium\">\n              {total === 0 ? 0 : Math.max(currentPage * limit - limit + 1, 1)}\n            </span>\n            to\n            <span className=\"font-medium\">{Math.min(currentPage * limit, total)}</span>\n            of\n            <span className=\"font-medium\">{total}</span>\n            results\n          </p>\n          <ul className=\"flex items-center space-x-2 text-sm\">\n            <li>\n              <Button\n                size=\"xs\"\n                theme=\"secondary\"\n                variant=\"plain\"\n                disabled={isFirstPage}\n                onClick={() => handlePageChange(currentPage - 1)}\n                data-testid=\"ellipsis-prev-btn\"\n              >\n                Prev\n              </Button>\n            </li>\n            {range.map((page, idx) => {\n              if (page === DOTS) {\n                return (\n                  <li\n                    key={`${page}-${idx}`}\n                    data-testid={`page-${page}`}\n                    className=\"px-2 py-1 text-gray-400\"\n                  >\n                    &hellip;\n                  </li>\n                )\n              }\n              return (\n                <li key={`${page}-${idx}`}>\n                  <Button\n                    size=\"xs\"\n                    theme={page === currentPage ? 'primary' : 'secondary'}\n                    variant={page === currentPage ? 'default' : 'plain'}\n                    aria-current={page === currentPage ? 'page' : undefined}\n                    onClick={() => handlePageChange(page as number)}\n                  >\n                    {page}\n                  </Button>\n                </li>\n              )\n            })}\n            <li>\n              <Button\n                size=\"xs\"\n                theme=\"secondary\"\n                variant=\"plain\"\n                disabled={isLastPage}\n                onClick={() => handlePageChange(currentPage + 1)}\n                data-testid=\"ellipsis-next-btn\"\n              >\n                Next\n              </Button>\n            </li>\n          </ul>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div\n      data-testid=\"pagination-container\"\n      className={buildClassName(\n        'flex items-center justify-between bg-white dark:bg-gray-800 px-4 py-3 sm:px-6',\n        className,\n      )}\n    >\n      <div className=\"flex flex-1 justify-between sm:hidden\">\n        <Button\n          size=\"xs\"\n          theme=\"secondary\"\n          variant=\"plain\"\n          disabled={isFirstPage}\n          onClick={() => handlePageChange(currentPage - 1)}\n          data-testid=\"mobile-prev-btn\"\n        >\n          <span>Previous</span>\n          <ChevronLeftIcon className=\"size-4\" />\n        </Button>\n        <Button\n          size=\"xs\"\n          theme=\"secondary\"\n          variant=\"plain\"\n          disabled={isLastPage}\n          onClick={() => handlePageChange(currentPage + 1)}\n          data-testid=\"mobile-next-btn\"\n        >\n          <span>Next</span>\n          <ChevronRightIcon className=\"size-4\" />\n        </Button>\n      </div>\n      <div className=\"hidden sm:flex sm:flex-1 sm:items-center sm:justify-between\">\n        <p\n          data-testid=\"pagination-summary\"\n          className=\"text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1\"\n        >\n          Showing\n          <span className=\"font-medium\">\n            {total === 0 ? 0 : Math.max(currentPage * limit - limit + 1, 1)}\n          </span>\n          to\n          <span className=\"font-medium\">{Math.min(currentPage * limit, total)}</span>\n          of\n          <span className=\"font-medium\">{total}</span>\n          results\n        </p>\n        <nav className=\"isolate inline-flex items-center rounded-md\" aria-label=\"Pagination\">\n          <Button\n            size=\"xs\"\n            theme=\"secondary\"\n            variant=\"plain\"\n            disabled={isFirstPage}\n            onClick={() => handlePageChange(currentPage - 1)}\n            data-testid=\"prev-btn\"\n          >\n            <span className=\"sr-only\">Previous</span>\n            <ChevronLeftIcon className=\"size-4\" />\n          </Button>\n          {pages.map((page) => (\n            <Button\n              key={page}\n              size=\"xs\"\n              theme={page === currentPage ? 'primary' : 'secondary'}\n              variant={page === currentPage ? 'default' : 'plain'}\n              aria-current={page === currentPage ? 'page' : undefined}\n              onClick={() => handlePageChange(page)}\n            >\n              <span className=\"size-4 block\">{page}</span>\n            </Button>\n          ))}\n          <Button\n            size=\"xs\"\n            theme=\"secondary\"\n            variant=\"plain\"\n            disabled={isLastPage}\n            onClick={() => handlePageChange(currentPage + 1)}\n            data-testid=\"next-btn\"\n          >\n            <span className=\"sr-only\">Next</span>\n            <ChevronRightIcon className=\"size-4\" />\n          </Button>\n        </nav>\n      </div>\n    </div>\n  )\n}\n"],"names":["usePagination","_jsxs","buildClassName","Button","_jsx","ChevronLeftIcon","ChevronRightIcon","DOTS"],"mappings":"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"}

package/dist/cjs/components/Pagination/usePagination.js

@@ -0,0 +1,33 @@
+'use strict';
+
+const DOTS = '...';
+const usePagination = ({ totalPages, currentPage, siblingCount = 1, // number of pages to show around currentPage
+ }) => {
+    const totalPageNumbers = siblingCount * 2 + 5;
+    if (totalPageNumbers >= totalPages) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPages;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+        const leftRange = Array.from({ length: 3 + 2 * siblingCount }, (_, i) => i + 1);
+        return [...leftRange, DOTS, totalPages];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+        const rightRange = Array.from({ length: 3 + 2 * siblingCount }, (_, i) => totalPages - (3 + 2 * siblingCount) + 1 + i);
+        return [firstPageIndex, DOTS, ...rightRange];
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+        const middleRange = Array.from({ length: 2 * siblingCount + 1 }, (_, i) => leftSiblingIndex + i);
+        return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
+    }
+    return [];
+};
+
+exports.DOTS = DOTS;
+exports.usePagination = usePagination;
+//# sourceMappingURL=usePagination.js.map

package/dist/cjs/components/Pagination/usePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.js","sources":["../../../../../src/components/Pagination/usePagination.tsx"],"sourcesContent":["import { UsePaginationProps } from './Pagination.types'\n\nexport const DOTS = '...'\n\nexport const usePagination = ({\n  totalPages,\n  currentPage,\n  siblingCount = 1, // number of pages to show around currentPage\n}: UsePaginationProps): (number | string)[] => {\n  const totalPageNumbers = siblingCount * 2 + 5\n\n  if (totalPageNumbers >= totalPages) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1)\n  }\n\n  const leftSiblingIndex = Math.max(currentPage - siblingCount, 1)\n  const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages)\n\n  const shouldShowLeftDots = leftSiblingIndex > 2\n  const shouldShowRightDots = rightSiblingIndex < totalPages - 1\n\n  const firstPageIndex = 1\n  const lastPageIndex = totalPages\n\n  if (!shouldShowLeftDots && shouldShowRightDots) {\n    const leftRange = Array.from({ length: 3 + 2 * siblingCount }, (_, i) => i + 1)\n    return [...leftRange, DOTS, totalPages]\n  }\n\n  if (shouldShowLeftDots && !shouldShowRightDots) {\n    const rightRange = Array.from(\n      { length: 3 + 2 * siblingCount },\n      (_, i) => totalPages - (3 + 2 * siblingCount) + 1 + i,\n    )\n    return [firstPageIndex, DOTS, ...rightRange]\n  }\n\n  if (shouldShowLeftDots && shouldShowRightDots) {\n    const middleRange = Array.from({ length: 2 * siblingCount + 1 }, (_, i) => leftSiblingIndex + i)\n    return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex]\n  }\n\n  return []\n}\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG;AAEb,MAAM,aAAa,GAAG,CAAC,EAC5B,UAAU,EACV,WAAW,EACX,YAAY,GAAG,CAAC;AACG,EAAA,KAAyB;AAC5C,IAAA,MAAM,gBAAgB,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;AAE7C,IAAA,IAAI,gBAAgB,IAAI,UAAU,EAAE;QAClC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC5D;AAEA,IAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,YAAY,EAAE,CAAC,CAAC;AAChE,IAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,YAAY,EAAE,UAAU,CAAC;AAE1E,IAAA,MAAM,kBAAkB,GAAG,gBAAgB,GAAG,CAAC;AAC/C,IAAA,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,UAAU,GAAG,CAAC;IAE9D,MAAM,cAAc,GAAG,CAAC;IACxB,MAAM,aAAa,GAAG,UAAU;AAEhC,IAAA,IAAI,CAAC,kBAAkB,IAAI,mBAAmB,EAAE;QAC9C,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,YAAY,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC/E,OAAO,CAAC,GAAG,SAAS,EAAE,IAAI,EAAE,UAAU,CAAC;IACzC;AAEA,IAAA,IAAI,kBAAkB,IAAI,CAAC,mBAAmB,EAAE;AAC9C,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAC3B,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,GAAG,YAAY,EAAE,EAChC,CAAC,CAAC,EAAE,CAAC,KAAK,UAAU,IAAI,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,CACtD;QACD,OAAO,CAAC,cAAc,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC;IAC9C;AAEA,IAAA,IAAI,kBAAkB,IAAI,mBAAmB,EAAE;QAC7C,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,YAAY,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,gBAAgB,GAAG,CAAC,CAAC;AAChG,QAAA,OAAO,CAAC,cAAc,EAAE,IAAI,EAAE,GAAG,WAAW,EAAE,IAAI,EAAE,aAAa,CAAC;IACpE;AAEA,IAAA,OAAO,EAAE;AACX;;;;;"}

package/dist/cjs/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Input = require('../Input/Input.js');
+var Button = require('../Button/Button.js');
+
+const PASSWORD_TYPE = 'password';
+const PASSWORD_PLACEHOLDER = '••••••••••';
+function evaluatePasswordStrength(val) {
+    if (!val)
+        return { score: 0, label: 'Weak', colorClass: 'bg-gray-200 dark:bg-gray-700', percent: 0 };
+    let score = 0;
+    if (val.length >= 8)
+        score += 1;
+    if (val.length >= 12)
+        score += 1;
+    if (/[0-9]/.test(val))
+        score += 1;
+    if (/[a-z]/.test(val) && /[A-Z]/.test(val))
+        score += 1;
+    if (/[^A-Za-z0-9]/.test(val))
+        score += 1;
+    if (score <= 1) {
+        return { score: 1, label: 'Weak', colorClass: 'bg-red-500', percent: 25 };
+    }
+    if (score === 2) {
+        return { score: 2, label: 'Fair', colorClass: 'bg-amber-500', percent: 50 };
+    }
+    if (score === 3) {
+        return { score: 3, label: 'Good', colorClass: 'bg-blue-500', percent: 75 };
+    }
+    return { score: 4, label: 'Strong', colorClass: 'bg-emerald-500', percent: 100 };
+}
+const PasswordInput = React.forwardRef((props, ref) => {
+    const { showStrength = false, placeholder = PASSWORD_PLACEHOLDER, onChange, value, defaultValue, ...inputProps } = props;
+    const [showPassword, setShowPassword] = React.useState(false);
+    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 handleInputChange = (e) => {
+        if (!isControlled) {
+            setUncontrolledValue(e.target.value);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    };
+    const strength = evaluatePasswordStrength(currentVal);
+    return (jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [jsxRuntime.jsx(Input.Input, { ref: ref, ...inputProps, value: value, defaultValue: defaultValue, onChange: handleInputChange, type: showPassword ? 'text' : PASSWORD_TYPE, placeholder: placeholder, rightGroup: jsxRuntime.jsx(Button.Button, { theme: "secondary", variant: "plain", size: "xs", className: "px-1.5 mr-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200", type: "button", onClick: () => setShowPassword((prev) => !prev), tabIndex: -1, "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "size-4", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" }) })) : (jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "size-4", children: [jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" }), jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" })] })) }) }), showStrength && currentVal.length > 0 && (jsxRuntime.jsxs("div", { className: "pt-0.5 space-y-1", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-[11px] font-medium text-gray-500 dark:text-gray-400", children: [jsxRuntime.jsx("span", { children: "Password Strength" }), jsxRuntime.jsx("span", { className: "font-semibold text-gray-700 dark:text-gray-200", children: strength.label })] }), jsxRuntime.jsx("div", { className: "h-1.5 w-full bg-gray-200 dark:bg-gray-800 rounded-full overflow-hidden flex gap-1 p-0.5", children: jsxRuntime.jsx("div", { className: `h-full transition-all duration-300 rounded-full ${strength.colorClass}`, style: { width: `${strength.percent}%` } }) })] }))] }));
+});
+PasswordInput.displayName = 'PasswordInput';
+
+exports.PASSWORD_PLACEHOLDER = PASSWORD_PLACEHOLDER;
+exports.PASSWORD_TYPE = PASSWORD_TYPE;
+exports.PasswordInput = PasswordInput;
+exports.evaluatePasswordStrength = evaluatePasswordStrength;
+//# sourceMappingURL=PasswordInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.js","sources":["../../../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import { forwardRef, useState, type ChangeEvent } from 'react'\nimport { Input } from '../Input'\nimport { Button } from '../Button'\nimport type { PasswordInputProps } from './PasswordInput.types'\n\nexport const PASSWORD_TYPE = 'password'\nexport const PASSWORD_PLACEHOLDER = '••••••••••'\n\nexport function evaluatePasswordStrength(val: string): {\n  score: number\n  label: 'Weak' | 'Fair' | 'Good' | 'Strong'\n  colorClass: string\n  percent: number\n} {\n  if (!val)\n    return { score: 0, label: 'Weak', colorClass: 'bg-gray-200 dark:bg-gray-700', percent: 0 }\n\n  let score = 0\n  if (val.length >= 8) score += 1\n  if (val.length >= 12) score += 1\n  if (/[0-9]/.test(val)) score += 1\n  if (/[a-z]/.test(val) && /[A-Z]/.test(val)) score += 1\n  if (/[^A-Za-z0-9]/.test(val)) score += 1\n\n  if (score <= 1) {\n    return { score: 1, label: 'Weak', colorClass: 'bg-red-500', percent: 25 }\n  }\n  if (score === 2) {\n    return { score: 2, label: 'Fair', colorClass: 'bg-amber-500', percent: 50 }\n  }\n  if (score === 3) {\n    return { score: 3, label: 'Good', colorClass: 'bg-blue-500', percent: 75 }\n  }\n  return { score: 4, label: 'Strong', colorClass: 'bg-emerald-500', percent: 100 }\n}\n\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((props, ref) => {\n  const {\n    showStrength = false,\n    placeholder = PASSWORD_PLACEHOLDER,\n    onChange,\n    value,\n    defaultValue,\n    ...inputProps\n  } = props\n\n  const [showPassword, setShowPassword] = useState(false)\n  const [uncontrolledValue, setUncontrolledValue] = useState<string>(String(defaultValue ?? ''))\n\n  const isControlled = value !== undefined\n  const currentVal = isControlled ? String(value ?? '') : uncontrolledValue\n\n  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setUncontrolledValue(e.target.value)\n    }\n    onChange?.(e)\n  }\n\n  const strength = evaluatePasswordStrength(currentVal)\n\n  return (\n    <div className=\"space-y-1.5\">\n      <Input\n        ref={ref}\n        {...inputProps}\n        value={value}\n        defaultValue={defaultValue}\n        onChange={handleInputChange}\n        type={showPassword ? 'text' : PASSWORD_TYPE}\n        placeholder={placeholder}\n        rightGroup={\n          <Button\n            theme=\"secondary\"\n            variant=\"plain\"\n            size=\"xs\"\n            className=\"px-1.5 mr-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200\"\n            type=\"button\"\n            onClick={() => setShowPassword((prev) => !prev)}\n            tabIndex={-1}\n            aria-label={showPassword ? 'Hide password' : 'Show password'}\n          >\n            {showPassword ? (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                strokeWidth=\"1.5\"\n                stroke=\"currentColor\"\n                className=\"size-4\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  d=\"M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88\"\n                />\n              </svg>\n            ) : (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                strokeWidth=\"1.5\"\n                stroke=\"currentColor\"\n                className=\"size-4\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  d=\"M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z\"\n                />\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"\n                />\n              </svg>\n            )}\n          </Button>\n        }\n      />\n\n      {/* Visual Password Strength Indicator */}\n      {showStrength && currentVal.length > 0 && (\n        <div className=\"pt-0.5 space-y-1\">\n          <div className=\"flex items-center justify-between text-[11px] font-medium text-gray-500 dark:text-gray-400\">\n            <span>Password Strength</span>\n            <span className=\"font-semibold text-gray-700 dark:text-gray-200\">{strength.label}</span>\n          </div>\n          <div className=\"h-1.5 w-full bg-gray-200 dark:bg-gray-800 rounded-full overflow-hidden flex gap-1 p-0.5\">\n            <div\n              className={`h-full transition-all duration-300 rounded-full ${strength.colorClass}`}\n              style={{ width: `${strength.percent}%` }}\n            />\n          </div>\n        </div>\n      )}\n    </div>\n  )\n})\n\nPasswordInput.displayName = 'PasswordInput'\n"],"names":["forwardRef","useState","_jsxs","_jsx","Input","Button"],"mappings":"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"}

package/dist/cjs/components/PinInput/PinInput.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var buildClassname = require('../../utils/build-classname.js');
+
+function PinInput({ length = 4, value: externalValue, onChange, onComplete, mask = false, size = 'md', type = 'numeric', error, disabled = false, autoFocus = false, containerClass = '', inputClass = '', }) {
+    const [internalValue, setInternalValue] = React.useState('');
+    const inputRefs = React.useRef([]);
+    const pinValue = externalValue !== undefined ? externalValue : internalValue;
+    const digits = Array.from({ length }, (_, i) => pinValue[i] || '');
+    React.useEffect(() => {
+        if (autoFocus && inputRefs.current[0] && !disabled) {
+            inputRefs.current[0].focus();
+        }
+    }, [autoFocus, disabled]);
+    const updatePin = (newDigits) => {
+        const newPin = newDigits.join('').slice(0, length);
+        setInternalValue(newPin);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newPin);
+        if (newPin.length === length) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(newPin);
+        }
+    };
+    const handleInputChange = (e, index) => {
+        var _a;
+        const char = e.target.value.slice(-1);
+        if (!char)
+            return;
+        const isValid = type === 'numeric' ? /^[0-9]$/.test(char) : /^[a-zA-Z0-9]$/.test(char);
+        if (!isValid)
+            return;
+        const nextDigits = [...digits];
+        nextDigits[index] = char;
+        updatePin(nextDigits);
+        if (index < length - 1 && inputRefs.current[index + 1]) {
+            (_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    const handleKeyDown = (e, index) => {
+        var _a, _b, _c;
+        if (e.key === 'Backspace') {
+            if (!digits[index] && index > 0 && inputRefs.current[index - 1]) {
+                const nextDigits = [...digits];
+                nextDigits[index - 1] = '';
+                updatePin(nextDigits);
+                (_a = inputRefs.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else if (digits[index]) {
+                const nextDigits = [...digits];
+                nextDigits[index] = '';
+                updatePin(nextDigits);
+            }
+        }
+        else if (e.key === 'ArrowLeft' && index > 0) {
+            (_b = inputRefs.current[index - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        else if (e.key === 'ArrowRight' && index < length - 1) {
+            (_c = inputRefs.current[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+    };
+    const handlePaste = (e) => {
+        e.preventDefault();
+        if (disabled)
+            return;
+        const pastedData = e.clipboardData.getData('text').trim();
+        const regex = type === 'numeric' ? /[0-9]/g : /[a-zA-Z0-9]/g;
+        const matchedChars = pastedData.match(regex) || [];
+        if (matchedChars.length === 0)
+            return;
+        const nextDigits = Array.from({ length }, (_, i) => matchedChars[i] || '');
+        updatePin(nextDigits);
+        const focusIndex = Math.min(matchedChars.length, length) - 1;
+        const targetRef = inputRefs.current[focusIndex >= 0 ? focusIndex : 0];
+        targetRef === null || targetRef === void 0 ? void 0 : targetRef.focus();
+    };
+    const sizeClasses = {
+        sm: 'size-9 text-sm rounded-lg',
+        md: 'size-11 text-base rounded-xl',
+        lg: 'size-14 text-lg rounded-2xl',
+    }[size];
+    return (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('space-y-1.5', containerClass), "data-testid": "pin-input-container", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2.5 sm:gap-3", children: digits.map((digit, index) => {
+                    const isFilled = Boolean(digit);
+                    return (jsxRuntime.jsx("input", { ref: (el) => {
+                            inputRefs.current[index] = el;
+                        }, type: mask ? 'password' : 'text', inputMode: type === 'numeric' ? 'numeric' : 'text', pattern: type === 'numeric' ? '[0-9]*' : undefined, maxLength: 1, value: digit, disabled: disabled, onChange: (e) => handleInputChange(e, index), onKeyDown: (e) => handleKeyDown(e, index), onPaste: handlePaste, className: buildClassname.buildClassName('text-center font-bold transition-all duration-150 outline outline-1 -outline-offset-1 select-none', sizeClasses, disabled
+                            ? 'pointer-events-none bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-600 outline-[var(--ui-border-muted)]'
+                            : error
+                                ? 'bg-red-50/50 dark:bg-red-950/20 text-red-600 dark:text-red-400 outline-red-500 focus:outline-red-500 focus:outline-2 focus:-outline-offset-2'
+                                : isFilled
+                                    ? 'bg-blue-50/30 dark:bg-blue-950/30 text-gray-900 dark:text-white outline-blue-500 dark:outline-blue-400 focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2'
+                                    : 'bg-white dark:bg-gray-800 text-gray-900 dark:text-white outline-[var(--ui-border)] focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2', inputClass), "data-testid": `pin-input-box-${index}` }, index));
+                }) }), typeof error === 'string' && (jsxRuntime.jsx("div", { className: "text-xs text-red-500 dark:text-red-400 font-medium pt-0.5", "data-testid": "pin-input-error", children: error }))] }));
+}
+PinInput.displayName = 'PinInput';
+
+exports.PinInput = PinInput;
+//# sourceMappingURL=PinInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PinInput.js","sources":["../../../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect } from 'react'\nimport type { PinInputProps } from './PinInput.types'\nimport { buildClassName } from '../../utils/build-classname'\n\nexport function PinInput({\n  length = 4,\n  value: externalValue,\n  onChange,\n  onComplete,\n  mask = false,\n  size = 'md',\n  type = 'numeric',\n  error,\n  disabled = false,\n  autoFocus = false,\n  containerClass = '',\n  inputClass = '',\n}: PinInputProps) {\n  const [internalValue, setInternalValue] = useState('')\n  const inputRefs = useRef<(HTMLInputElement | null)[]>([])\n\n  const pinValue = externalValue !== undefined ? externalValue : internalValue\n  const digits = Array.from({ length }, (_, i) => pinValue[i] || '')\n\n  useEffect(() => {\n    if (autoFocus && inputRefs.current[0] && !disabled) {\n      inputRefs.current[0].focus()\n    }\n  }, [autoFocus, disabled])\n\n  const updatePin = (newDigits: string[]) => {\n    const newPin = newDigits.join('').slice(0, length)\n    setInternalValue(newPin)\n    onChange?.(newPin)\n\n    if (newPin.length === length) {\n      onComplete?.(newPin)\n    }\n  }\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {\n    const char = e.target.value.slice(-1)\n    if (!char) return\n\n    const isValid = type === 'numeric' ? /^[0-9]$/.test(char) : /^[a-zA-Z0-9]$/.test(char)\n\n    if (!isValid) return\n\n    const nextDigits = [...digits]\n    nextDigits[index] = char\n    updatePin(nextDigits)\n\n    if (index < length - 1 && inputRefs.current[index + 1]) {\n      inputRefs.current[index + 1]?.focus()\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {\n    if (e.key === 'Backspace') {\n      if (!digits[index] && index > 0 && inputRefs.current[index - 1]) {\n        const nextDigits = [...digits]\n        nextDigits[index - 1] = ''\n        updatePin(nextDigits)\n        inputRefs.current[index - 1]?.focus()\n      } else if (digits[index]) {\n        const nextDigits = [...digits]\n        nextDigits[index] = ''\n        updatePin(nextDigits)\n      }\n    } else if (e.key === 'ArrowLeft' && index > 0) {\n      inputRefs.current[index - 1]?.focus()\n    } else if (e.key === 'ArrowRight' && index < length - 1) {\n      inputRefs.current[index + 1]?.focus()\n    }\n  }\n\n  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault()\n    if (disabled) return\n\n    const pastedData = e.clipboardData.getData('text').trim()\n    const regex = type === 'numeric' ? /[0-9]/g : /[a-zA-Z0-9]/g\n    const matchedChars = pastedData.match(regex) || []\n\n    if (matchedChars.length === 0) return\n\n    const nextDigits = Array.from({ length }, (_, i) => matchedChars[i] || '')\n    updatePin(nextDigits)\n\n    const focusIndex = Math.min(matchedChars.length, length) - 1\n    const targetRef = inputRefs.current[focusIndex >= 0 ? focusIndex : 0]\n    targetRef?.focus()\n  }\n\n  const sizeClasses = {\n    sm: 'size-9 text-sm rounded-lg',\n    md: 'size-11 text-base rounded-xl',\n    lg: 'size-14 text-lg rounded-2xl',\n  }[size]\n\n  return (\n    <div\n      className={buildClassName('space-y-1.5', containerClass)}\n      data-testid=\"pin-input-container\"\n    >\n      <div className=\"flex items-center gap-2.5 sm:gap-3\">\n        {digits.map((digit, index) => {\n          const isFilled = Boolean(digit)\n\n          return (\n            <input\n              key={index}\n              ref={(el) => {\n                inputRefs.current[index] = el\n              }}\n              type={mask ? 'password' : 'text'}\n              inputMode={type === 'numeric' ? 'numeric' : 'text'}\n              pattern={type === 'numeric' ? '[0-9]*' : undefined}\n              maxLength={1}\n              value={digit}\n              disabled={disabled}\n              onChange={(e) => handleInputChange(e, index)}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n              onPaste={handlePaste}\n              className={buildClassName(\n                'text-center font-bold transition-all duration-150 outline outline-1 -outline-offset-1 select-none',\n                sizeClasses,\n                disabled\n                  ? 'pointer-events-none bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-600 outline-[var(--ui-border-muted)]'\n                  : error\n                    ? 'bg-red-50/50 dark:bg-red-950/20 text-red-600 dark:text-red-400 outline-red-500 focus:outline-red-500 focus:outline-2 focus:-outline-offset-2'\n                    : isFilled\n                      ? 'bg-blue-50/30 dark:bg-blue-950/30 text-gray-900 dark:text-white outline-blue-500 dark:outline-blue-400 focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2'\n                      : 'bg-white dark:bg-gray-800 text-gray-900 dark:text-white outline-[var(--ui-border)] focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2',\n                inputClass,\n              )}\n              data-testid={`pin-input-box-${index}`}\n            />\n          )\n        })}\n      </div>\n\n      {typeof error === 'string' && (\n        <div\n          className=\"text-xs text-red-500 dark:text-red-400 font-medium pt-0.5\"\n          data-testid=\"pin-input-error\"\n        >\n          {error}\n        </div>\n      )}\n    </div>\n  )\n}\n\nPinInput.displayName = 'PinInput'\n"],"names":["useState","useRef","useEffect","_jsxs","buildClassName","_jsx"],"mappings":";;;;;;AAIM,SAAU,QAAQ,CAAC,EACvB,MAAM,GAAG,CAAC,EACV,KAAK,EAAE,aAAa,EACpB,QAAQ,EACR,UAAU,EACV,IAAI,GAAG,KAAK,EACZ,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,SAAS,EAChB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,cAAc,GAAG,EAAE,EACnB,UAAU,GAAG,EAAE,GACD,EAAA;IACd,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAAC,EAAE,CAAC;AACtD,IAAA,MAAM,SAAS,GAAGC,YAAM,CAA8B,EAAE,CAAC;AAEzD,IAAA,MAAM,QAAQ,GAAG,aAAa,KAAK,SAAS,GAAG,aAAa,GAAG,aAAa;IAC5E,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAElEC,eAAS,CAAC,MAAK;AACb,QAAA,IAAI,SAAS,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClD,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE;QAC9B;AACF,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAEzB,IAAA,MAAM,SAAS,GAAG,CAAC,SAAmB,KAAI;AACxC,QAAA,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC;QAClD,gBAAgB,CAAC,MAAM,CAAC;AACxB,QAAA,QAAQ,aAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,CAAG,MAAM,CAAC;AAElB,QAAA,IAAI,MAAM,CAAC,MAAM,KAAK,MAAM,EAAE;AAC5B,YAAA,UAAU,aAAV,UAAU,KAAA,MAAA,GAAA,MAAA,GAAV,UAAU,CAAG,MAAM,CAAC;QACtB;AACF,IAAA,CAAC;AAED,IAAA,MAAM,iBAAiB,GAAG,CAAC,CAAsC,EAAE,KAAa,KAAI;;AAClF,QAAA,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;AACrC,QAAA,IAAI,CAAC,IAAI;YAAE;QAEX,MAAM,OAAO,GAAG,IAAI,KAAK,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;AAEtF,QAAA,IAAI,CAAC,OAAO;YAAE;AAEd,QAAA,MAAM,UAAU,GAAG,CAAC,GAAG,MAAM,CAAC;AAC9B,QAAA,UAAU,CAAC,KAAK,CAAC,GAAG,IAAI;QACxB,SAAS,CAAC,UAAU,CAAC;AAErB,QAAA,IAAI,KAAK,GAAG,MAAM,GAAG,CAAC,IAAI,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE;YACtD,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,EAAE;QACvC;AACF,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,CAAwC,EAAE,KAAa,KAAI;;AAChF,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;AACzB,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,IAAI,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE;AAC/D,gBAAA,MAAM,UAAU,GAAG,CAAC,GAAG,MAAM,CAAC;AAC9B,gBAAA,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,EAAE;gBAC1B,SAAS,CAAC,UAAU,CAAC;gBACrB,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,EAAE;YACvC;AAAO,iBAAA,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE;AACxB,gBAAA,MAAM,UAAU,GAAG,CAAC,GAAG,MAAM,CAAC;AAC9B,gBAAA,UAAU,CAAC,KAAK,CAAC,GAAG,EAAE;gBACtB,SAAS,CAAC,UAAU,CAAC;YACvB;QACF;aAAO,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,GAAG,CAAC,EAAE;YAC7C,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,EAAE;QACvC;AAAO,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,IAAI,KAAK,GAAG,MAAM,GAAG,CAAC,EAAE;YACvD,CAAA,EAAA,GAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,EAAE;QACvC;AACF,IAAA,CAAC;AAED,IAAA,MAAM,WAAW,GAAG,CAAC,CAAyC,KAAI;QAChE,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,IAAI,QAAQ;YAAE;AAEd,QAAA,MAAM,UAAU,GAAG,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE;AACzD,QAAA,MAAM,KAAK,GAAG,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,cAAc;QAC5D,MAAM,YAAY,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE;AAElD,QAAA,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC;YAAE;QAE/B,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QAC1E,SAAS,CAAC,UAAU,CAAC;AAErB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC;AAC5D,QAAA,MAAM,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC,UAAU,IAAI,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC;AACrE,QAAA,SAAS,aAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,KAAK,EAAE;AACpB,IAAA,CAAC;AAED,IAAA,MAAM,WAAW,GAAG;AAClB,QAAA,EAAE,EAAE,2BAA2B;AAC/B,QAAA,EAAE,EAAE,8BAA8B;AAClC,QAAA,EAAE,EAAE,6BAA6B;KAClC,CAAC,IAAI,CAAC;IAEP,QACEC,eAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,6BAAc,CAAC,aAAa,EAAE,cAAc,CAAC,EAAA,aAAA,EAC5C,qBAAqB,EAAA,QAAA,EAAA,CAEjCC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oCAAoC,EAAA,QAAA,EAChD,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;AAC3B,oBAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC;AAE/B,oBAAA,QACEA,cAAA,CAAA,OAAA,EAAA,EAEE,GAAG,EAAE,CAAC,EAAE,KAAI;AACV,4BAAA,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE;wBAC/B,CAAC,EACD,IAAI,EAAE,IAAI,GAAG,UAAU,GAAG,MAAM,EAChC,SAAS,EAAE,IAAI,KAAK,SAAS,GAAG,SAAS,GAAG,MAAM,EAClD,OAAO,EAAE,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS,EAClD,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,iBAAiB,CAAC,CAAC,EAAE,KAAK,CAAC,EAC5C,SAAS,EAAE,CAAC,CAAC,KAAK,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EACzC,OAAO,EAAE,WAAW,EACpB,SAAS,EAAED,6BAAc,CACvB,mGAAmG,EACnG,WAAW,EACX;AACE,8BAAE;AACF,8BAAE;AACA,kCAAE;AACF,kCAAE;AACA,sCAAE;AACF,sCAAE,iKAAiK,EACzK,UAAU,CACX,EAAA,aAAA,EACY,CAAA,cAAA,EAAiB,KAAK,CAAA,CAAE,EAAA,EAzBhC,KAAK,CA0BV;gBAEN,CAAC,CAAC,GACE,EAEL,OAAO,KAAK,KAAK,QAAQ,KACxBC,cAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAC,2DAA2D,iBACzD,iBAAiB,EAAA,QAAA,EAE5B,KAAK,EAAA,CACF,CACP,CAAA,EAAA,CACG;AAEV;AAEA,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/cjs/components/PullToRefresh/PullToRefresh.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../Loader/index.js');
+var buildClassname = require('../../utils/build-classname.js');
+
+function PullArrowIcon({ progress }) {
+    const rotation = Math.min(180, progress * 180);
+    return (jsxRuntime.jsx("svg", { className: "size-4 text-blue-600 dark:text-blue-400 transition-transform duration-150", style: { transform: `rotate(${rotation}deg)` }, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }));
+}
+function PullToRefresh({ onRefresh, pullThreshold = 70, maxPullDistance = 120, disabled = false, refreshing: externalRefreshing, pullingContent, refreshingContent, children, className = '', contentClass = '', }) {
+    const containerRef = React.useRef(null);
+    const startYRef = React.useRef(0);
+    const isPullingRef = React.useRef(false);
+    const [pullDistance, setPullDistance] = React.useState(0);
+    const [internalRefreshing, setInternalRefreshing] = React.useState(false);
+    const isRefreshing = externalRefreshing !== undefined ? externalRefreshing : internalRefreshing;
+    const handleTouchStart = React.useCallback((e) => {
+        if (disabled || isRefreshing)
+            return;
+        const container = containerRef.current;
+        if (container && container.scrollTop === 0) {
+            startYRef.current = e.touches[0].clientY;
+            isPullingRef.current = true;
+        }
+    }, [disabled, isRefreshing]);
+    const handleTouchMove = React.useCallback((e) => {
+        if (!isPullingRef.current || disabled || isRefreshing)
+            return;
+        const container = containerRef.current;
+        if (!container || container.scrollTop > 0)
+            return;
+        const currentY = e.touches[0].clientY;
+        const rawDistance = currentY - startYRef.current;
+        if (rawDistance > 0) {
+            // Rubber-band resistance formula
+            const dampened = Math.min(maxPullDistance, rawDistance * 0.45);
+            setPullDistance(dampened);
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        }
+        else {
+            setPullDistance(0);
+        }
+    }, [disabled, isRefreshing, maxPullDistance]);
+    const handleTouchEnd = React.useCallback(async () => {
+        if (!isPullingRef.current || disabled || isRefreshing)
+            return;
+        isPullingRef.current = false;
+        if (pullDistance >= pullThreshold) {
+            setPullDistance(pullThreshold);
+            setInternalRefreshing(true);
+            try {
+                await onRefresh();
+            }
+            finally {
+                setInternalRefreshing(false);
+                setPullDistance(0);
+            }
+        }
+        else {
+            setPullDistance(0);
+        }
+    }, [disabled, isRefreshing, onRefresh, pullDistance, pullThreshold]);
+    const progress = Math.min(1, pullDistance / pullThreshold);
+    const isReady = pullDistance >= pullThreshold;
+    return (jsxRuntime.jsxs("div", { ref: containerRef, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, className: buildClassname.buildClassName('relative overflow-y-auto overscroll-none', className), "data-testid": "pull-to-refresh-container", children: [jsxRuntime.jsx("div", { className: "left-0 right-0 top-0 flex items-center justify-center pointer-events-none transition-all duration-150 z-20", style: {
+                    height: isRefreshing ? `${pullThreshold}px` : `${pullDistance}px`,
+                    opacity: pullDistance > 0 || isRefreshing ? 1 : 0,
+                }, "data-testid": "pull-to-refresh-indicator", children: jsxRuntime.jsx("div", { className: "flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white dark:bg-gray-800 border border-[var(--ui-border)] shadow-md text-xs font-semibold text-gray-700 dark:text-gray-200", children: isRefreshing ? (refreshingContent || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index.Loader, { size: "sm" }), jsxRuntime.jsx("span", { children: "Refreshing..." })] }))) : pullingContent ? (pullingContent) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PullArrowIcon, { progress: progress }), jsxRuntime.jsx("span", { children: isReady ? 'Release to refresh' : 'Pull down to refresh' })] })) }) }), jsxRuntime.jsx("div", { className: buildClassname.buildClassName('transition-transform duration-150', contentClass), style: {
+                    transform: isRefreshing
+                        ? `translateY(${pullThreshold}px)`
+                        : pullDistance > 0
+                            ? `translateY(${pullDistance}px)`
+                            : 'translateY(0px)',
+                }, "data-testid": "pull-to-refresh-content", children: children })] }));
+}
+PullToRefresh.displayName = 'PullToRefresh';
+
+exports.PullToRefresh = PullToRefresh;
+//# sourceMappingURL=PullToRefresh.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PullToRefresh.js","sources":["../../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["import React, { useRef, useState, useCallback } from 'react'\nimport type { PullToRefreshProps } from './PullToRefresh.types'\nimport { Loader } from '../Loader'\nimport { buildClassName } from '../../utils/build-classname'\n\nfunction PullArrowIcon({ progress }: { progress: number }) {\n  const rotation = Math.min(180, progress * 180)\n  return (\n    <svg\n      className=\"size-4 text-blue-600 dark:text-blue-400 transition-transform duration-150\"\n      style={{ transform: `rotate(${rotation}deg)` }}\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth={2.5}\n        d=\"M19 14l-7 7m0 0l-7-7m7 7V3\"\n      />\n    </svg>\n  )\n}\n\nexport function PullToRefresh({\n  onRefresh,\n  pullThreshold = 70,\n  maxPullDistance = 120,\n  disabled = false,\n  refreshing: externalRefreshing,\n  pullingContent,\n  refreshingContent,\n  children,\n  className = '',\n  contentClass = '',\n}: PullToRefreshProps) {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const startYRef = useRef<number>(0)\n  const isPullingRef = useRef<boolean>(false)\n\n  const [pullDistance, setPullDistance] = useState<number>(0)\n  const [internalRefreshing, setInternalRefreshing] = useState<boolean>(false)\n\n  const isRefreshing = externalRefreshing !== undefined ? externalRefreshing : internalRefreshing\n\n  const handleTouchStart = useCallback(\n    (e: React.TouchEvent<HTMLDivElement>) => {\n      if (disabled || isRefreshing) return\n      const container = containerRef.current\n      if (container && container.scrollTop === 0) {\n        startYRef.current = e.touches[0].clientY\n        isPullingRef.current = true\n      }\n    },\n    [disabled, isRefreshing],\n  )\n\n  const handleTouchMove = useCallback(\n    (e: React.TouchEvent<HTMLDivElement>) => {\n      if (!isPullingRef.current || disabled || isRefreshing) return\n      const container = containerRef.current\n      if (!container || container.scrollTop > 0) return\n\n      const currentY = e.touches[0].clientY\n      const rawDistance = currentY - startYRef.current\n\n      if (rawDistance > 0) {\n        // Rubber-band resistance formula\n        const dampened = Math.min(maxPullDistance, rawDistance * 0.45)\n        setPullDistance(dampened)\n        if (e.cancelable) {\n          e.preventDefault()\n        }\n      } else {\n        setPullDistance(0)\n      }\n    },\n    [disabled, isRefreshing, maxPullDistance],\n  )\n\n  const handleTouchEnd = useCallback(async () => {\n    if (!isPullingRef.current || disabled || isRefreshing) return\n    isPullingRef.current = false\n\n    if (pullDistance >= pullThreshold) {\n      setPullDistance(pullThreshold)\n      setInternalRefreshing(true)\n      try {\n        await onRefresh()\n      } finally {\n        setInternalRefreshing(false)\n        setPullDistance(0)\n      }\n    } else {\n      setPullDistance(0)\n    }\n  }, [disabled, isRefreshing, onRefresh, pullDistance, pullThreshold])\n\n  const progress = Math.min(1, pullDistance / pullThreshold)\n  const isReady = pullDistance >= pullThreshold\n\n  return (\n    <div\n      ref={containerRef}\n      onTouchStart={handleTouchStart}\n      onTouchMove={handleTouchMove}\n      onTouchEnd={handleTouchEnd}\n      className={buildClassName('relative overflow-y-auto overscroll-none', className)}\n      data-testid=\"pull-to-refresh-container\"\n    >\n      {/* Pull / Refresh Indicator Header */}\n      <div\n        className=\"left-0 right-0 top-0 flex items-center justify-center pointer-events-none transition-all duration-150 z-20\"\n        style={{\n          height: isRefreshing ? `${pullThreshold}px` : `${pullDistance}px`,\n          opacity: pullDistance > 0 || isRefreshing ? 1 : 0,\n        }}\n        data-testid=\"pull-to-refresh-indicator\"\n      >\n        <div className=\"flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white dark:bg-gray-800 border border-[var(--ui-border)] shadow-md text-xs font-semibold text-gray-700 dark:text-gray-200\">\n          {isRefreshing ? (\n            refreshingContent || (\n              <>\n                <Loader size=\"sm\" />\n                <span>Refreshing...</span>\n              </>\n            )\n          ) : pullingContent ? (\n            pullingContent\n          ) : (\n            <>\n              <PullArrowIcon progress={progress} />\n              <span>{isReady ? 'Release to refresh' : 'Pull down to refresh'}</span>\n            </>\n          )}\n        </div>\n      </div>\n\n      {/* Main Content */}\n      <div\n        className={buildClassName('transition-transform duration-150', contentClass)}\n        style={{\n          transform: isRefreshing\n            ? `translateY(${pullThreshold}px)`\n            : pullDistance > 0\n              ? `translateY(${pullDistance}px)`\n              : 'translateY(0px)',\n        }}\n        data-testid=\"pull-to-refresh-content\"\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nPullToRefresh.displayName = 'PullToRefresh'\n"],"names":["_jsx","useRef","useState","useCallback","_jsxs","buildClassName","Loader","_Fragment"],"mappings":"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"}

package/dist/cjs/components/QuantityStepper/QuantityStepper.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var buildClassname = require('../../utils/build-classname.js');
+var Label = require('../Label/Label.js');
+var TextContent = require('../TextContent/TextContent.js');
+
+const MinusIcon = ({ className }) => (jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true", children: jsxRuntime.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) }));
+const PlusIcon = ({ className }) => (jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true", children: [jsxRuntime.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), jsxRuntime.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }));
+const CONTAINER_SIZE_CLASS = {
+    sm: 'h-8 text-xs',
+    md: 'h-10 text-sm',
+    lg: 'h-12 text-base',
+};
+const BUTTON_SIZE_CLASS = {
+    sm: 'w-7.5 h-full',
+    md: 'w-9.5 h-full',
+    lg: 'w-11 h-full',
+};
+const ICON_SIZE_CLASS = {
+    sm: 'size-3.5',
+    md: 'size-4',
+    lg: 'size-4.5',
+};
+const INPUT_TEXT_CLASS = {
+    sm: 'w-12 text-xs',
+    md: 'w-16 text-sm',
+    lg: 'w-20 text-base',
+};
+const QuantityStepper = React.forwardRef((props, ref) => {
+    const { value, onChange, min = 0, max = 99999, step = 1, label, labelHint, helperText, error, showErrorMessage = true, size = 'md', prefix, suffix, disabled = false, className, onFocus, id: customId, ...restProps } = props;
+    const autoId = React.useId();
+    const stepperId = customId || `stepper-${autoId}`;
+    const hasError = Boolean(error);
+    const handleDecrement = () => {
+        if (disabled)
+            return;
+        const next = Math.max(min, Number((value - step).toFixed(4)));
+        onChange(next);
+    };
+    const handleIncrement = () => {
+        if (disabled)
+            return;
+        const next = Math.min(max, Number((value + step).toFixed(4)));
+        onChange(next);
+    };
+    const handleInputChange = (e) => {
+        const raw = e.target.value;
+        if (raw === '') {
+            onChange(0);
+            return;
+        }
+        const parsed = parseFloat(raw);
+        if (!isNaN(parsed)) {
+            onChange(Math.max(min, Math.min(max, parsed)));
+        }
+    };
+    const isAtMin = disabled || value <= min;
+    const isAtMax = disabled || value >= max;
+    return (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('flex flex-col gap-1 inline-flex', className), children: [label && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsxRuntime.jsx(Label.Label, { htmlFor: stepperId, className: disabled ? 'opacity-70 cursor-not-allowed' : '', children: label }), labelHint && jsxRuntime.jsx(TextContent.TextContent, { xsmall: true, children: labelHint })] })), jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('inline-flex items-center rounded-lg shadow-2xs transition-all duration-150', 'outline outline-1 -outline-offset-1', CONTAINER_SIZE_CLASS[size], 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 outline-[var(--ui-border-muted)]'
+                    : 'bg-white dark:bg-gray-700', 'focus-within:outline-[var(--ui-focus-ring)] focus-within:outline-2 focus-within:-outline-offset-2'), "data-testid": "quantity-stepper", children: [jsxRuntime.jsx("button", { type: "button", disabled: isAtMin, onClick: handleDecrement, tabIndex: -1, "aria-label": "Decrease quantity", className: buildClassname.buildClassName('flex items-center justify-center rounded-l-lg text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white transition-colors shrink-0', BUTTON_SIZE_CLASS[size], isAtMin
+                            ? 'opacity-30 hover:bg-transparent cursor-not-allowed'
+                            : 'cursor-pointer hover:bg-gray-100/80 dark:hover:bg-gray-600/60'), "data-testid": "stepper-decrement", children: jsxRuntime.jsx(MinusIcon, { className: ICON_SIZE_CLASS[size] }) }), prefix && (jsxRuntime.jsx("span", { className: "pl-1 text-gray-400 dark:text-gray-400 select-none text-xs shrink-0", children: prefix })), jsxRuntime.jsx("input", { ref: ref, id: stepperId, type: "number", min: min, max: max, step: step, value: value === 0 ? '' : value, placeholder: "0", disabled: disabled, onFocus: (e) => {
+                            e.target.select();
+                            onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+                        }, onChange: handleInputChange, className: buildClassname.buildClassName('text-center font-semibold text-gray-900 dark:text-white bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', INPUT_TEXT_CLASS[size]), "data-testid": "stepper-input", ...restProps }), suffix && (jsxRuntime.jsx("span", { className: "pr-1 text-gray-500 dark:text-gray-400 select-none text-xs shrink-0", children: suffix })), jsxRuntime.jsx("button", { type: "button", disabled: isAtMax, onClick: handleIncrement, tabIndex: -1, "aria-label": "Increase quantity", className: buildClassname.buildClassName('flex items-center justify-center rounded-r-lg text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white transition-colors shrink-0', BUTTON_SIZE_CLASS[size], isAtMax
+                            ? 'opacity-30 hover:bg-transparent cursor-not-allowed'
+                            : 'cursor-pointer hover:bg-gray-100/80 dark:hover:bg-gray-600/60'), "data-testid": "stepper-increment", children: jsxRuntime.jsx(PlusIcon, { className: ICON_SIZE_CLASS[size] }) })] }), (showErrorMessage && error) || helperText ? (jsxRuntime.jsx("div", { className: "flex items-center justify-between gap-2 mt-0.5", children: showErrorMessage && error ? (jsxRuntime.jsx(TextContent.TextContent, { xsmall: true, className: "text-red-500 dark:text-red-400 font-medium", children: error })) : helperText ? (jsxRuntime.jsx(TextContent.TextContent, { xsmall: true, muted: true, children: helperText })) : null })) : null] }));
+});
+QuantityStepper.displayName = 'QuantityStepper';
+
+exports.QuantityStepper = QuantityStepper;
+//# sourceMappingURL=QuantityStepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuantityStepper.js","sources":["../../../../../src/components/QuantityStepper/QuantityStepper.tsx"],"sourcesContent":["import React, { forwardRef, useId } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Label } from '../Label'\nimport { TextContent } from '../TextContent'\nimport type { QuantityStepperProps, QuantityStepperSize } from './QuantityStepper.types'\n\nconst MinusIcon = ({ className }: { className?: string }) => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className={className}\n    aria-hidden=\"true\"\n  >\n    <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n  </svg>\n)\n\nconst PlusIcon = ({ className }: { className?: string }) => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className={className}\n    aria-hidden=\"true\"\n  >\n    <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n    <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n  </svg>\n)\n\nconst CONTAINER_SIZE_CLASS: Record<QuantityStepperSize, string> = {\n  sm: 'h-8 text-xs',\n  md: 'h-10 text-sm',\n  lg: 'h-12 text-base',\n}\n\nconst BUTTON_SIZE_CLASS: Record<QuantityStepperSize, string> = {\n  sm: 'w-7.5 h-full',\n  md: 'w-9.5 h-full',\n  lg: 'w-11 h-full',\n}\n\nconst ICON_SIZE_CLASS: Record<QuantityStepperSize, string> = {\n  sm: 'size-3.5',\n  md: 'size-4',\n  lg: 'size-4.5',\n}\n\nconst INPUT_TEXT_CLASS: Record<QuantityStepperSize, string> = {\n  sm: 'w-12 text-xs',\n  md: 'w-16 text-sm',\n  lg: 'w-20 text-base',\n}\n\nexport const QuantityStepper = forwardRef<HTMLInputElement, QuantityStepperProps>((props, ref) => {\n  const {\n    value,\n    onChange,\n    min = 0,\n    max = 99999,\n    step = 1,\n    label,\n    labelHint,\n    helperText,\n    error,\n    showErrorMessage = true,\n    size = 'md',\n    prefix,\n    suffix,\n    disabled = false,\n    className,\n    onFocus,\n    id: customId,\n    ...restProps\n  } = props\n\n  const autoId = useId()\n  const stepperId = customId || `stepper-${autoId}`\n  const hasError = Boolean(error)\n\n  const handleDecrement = () => {\n    if (disabled) return\n    const next = Math.max(min, Number((value - step).toFixed(4)))\n    onChange(next)\n  }\n\n  const handleIncrement = () => {\n    if (disabled) return\n    const next = Math.min(max, Number((value + step).toFixed(4)))\n    onChange(next)\n  }\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const raw = e.target.value\n    if (raw === '') {\n      onChange(0)\n      return\n    }\n    const parsed = parseFloat(raw)\n    if (!isNaN(parsed)) {\n      onChange(Math.max(min, Math.min(max, parsed)))\n    }\n  }\n\n  const isAtMin = disabled || value <= min\n  const isAtMax = disabled || value >= max\n\n  return (\n    <div className={buildClassName('flex flex-col gap-1 inline-flex', className)}>\n      {/* Label Header Row matching Input */}\n      {label && (\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor={stepperId} className={disabled ? 'opacity-70 cursor-not-allowed' : ''}>\n            {label}\n          </Label>\n          {labelHint && <TextContent xsmall>{labelHint}</TextContent>}\n        </div>\n      )}\n\n      {/* Input Container Frame matching Input outline & focus ring */}\n      <div\n        className={buildClassName(\n          'inline-flex items-center rounded-lg shadow-2xs transition-all duration-150',\n          'outline outline-1 -outline-offset-1',\n          CONTAINER_SIZE_CLASS[size],\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 outline-[var(--ui-border-muted)]'\n            : 'bg-white dark:bg-gray-700',\n          'focus-within:outline-[var(--ui-focus-ring)] focus-within:outline-2 focus-within:-outline-offset-2',\n        )}\n        data-testid=\"quantity-stepper\"\n      >\n        {/* Decrement Button */}\n        <button\n          type=\"button\"\n          disabled={isAtMin}\n          onClick={handleDecrement}\n          tabIndex={-1}\n          aria-label=\"Decrease quantity\"\n          className={buildClassName(\n            'flex items-center justify-center rounded-l-lg text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white transition-colors shrink-0',\n            BUTTON_SIZE_CLASS[size],\n            isAtMin\n              ? 'opacity-30 hover:bg-transparent cursor-not-allowed'\n              : 'cursor-pointer hover:bg-gray-100/80 dark:hover:bg-gray-600/60',\n          )}\n          data-testid=\"stepper-decrement\"\n        >\n          <MinusIcon className={ICON_SIZE_CLASS[size]} />\n        </button>\n\n        {prefix && (\n          <span className=\"pl-1 text-gray-400 dark:text-gray-400 select-none text-xs shrink-0\">\n            {prefix}\n          </span>\n        )}\n\n        {/* Number Input */}\n        <input\n          ref={ref}\n          id={stepperId}\n          type=\"number\"\n          min={min}\n          max={max}\n          step={step}\n          value={value === 0 ? '' : value}\n          placeholder=\"0\"\n          disabled={disabled}\n          onFocus={(e) => {\n            e.target.select()\n            onFocus?.(e)\n          }}\n          onChange={handleInputChange}\n          className={buildClassName(\n            'text-center font-semibold text-gray-900 dark:text-white bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',\n            INPUT_TEXT_CLASS[size],\n          )}\n          data-testid=\"stepper-input\"\n          {...restProps}\n        />\n\n        {suffix && (\n          <span className=\"pr-1 text-gray-500 dark:text-gray-400 select-none text-xs shrink-0\">\n            {suffix}\n          </span>\n        )}\n\n        {/* Increment Button */}\n        <button\n          type=\"button\"\n          disabled={isAtMax}\n          onClick={handleIncrement}\n          tabIndex={-1}\n          aria-label=\"Increase quantity\"\n          className={buildClassName(\n            'flex items-center justify-center rounded-r-lg text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white transition-colors shrink-0',\n            BUTTON_SIZE_CLASS[size],\n            isAtMax\n              ? 'opacity-30 hover:bg-transparent cursor-not-allowed'\n              : 'cursor-pointer hover:bg-gray-100/80 dark:hover:bg-gray-600/60',\n          )}\n          data-testid=\"stepper-increment\"\n        >\n          <PlusIcon className={ICON_SIZE_CLASS[size]} />\n        </button>\n      </div>\n\n      {/* Footer Row matching Input error / helper text */}\n      {(showErrorMessage && error) || helperText ? (\n        <div className=\"flex items-center justify-between gap-2 mt-0.5\">\n          {showErrorMessage && error ? (\n            <TextContent xsmall className=\"text-red-500 dark:text-red-400 font-medium\">\n              {error}\n            </TextContent>\n          ) : helperText ? (\n            <TextContent xsmall muted>\n              {helperText}\n            </TextContent>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  )\n})\n\nQuantityStepper.displayName = 'QuantityStepper'\n"],"names":["_jsx","_jsxs","forwardRef","useId","buildClassName","Label","TextContent"],"mappings":"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"}

package/dist/cjs/components/Radio/Radio.js

@@ -0,0 +1,34 @@
+'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 SIZE_MAP = {
+    sm: 'size-4',
+    md: 'size-4.5',
+    lg: 'size-5.5',
+};
+const THEME_MAP = {
+    primary: 'checked:border-[var(--ui-primary)] checked:hover:border-[var(--ui-primary)] focus:ring-[var(--ui-primary-ring)]',
+    success: 'checked:border-emerald-600 checked:hover:border-emerald-600 focus:ring-emerald-500',
+    danger: 'checked:border-[var(--ui-danger)] checked:hover:border-[var(--ui-danger)] focus:ring-[var(--ui-danger-ring)]',
+};
+const Radio = React.forwardRef((props, ref) => {
+    const { id, name, label, description, size = 'md', theme = 'primary', labelClass = '', descriptionClass = '', wrapperClass = '', containerClass = '', error, disabled = false, className = '', ...rest } = props;
+    const generatedId = React.useId();
+    const radioId = id !== null && id !== void 0 ? id : (name && rest.value ? `${name}-${rest.value}` : generatedId);
+    return (jsxRuntime.jsxs("div", { className: buildClassname.buildClassName(wrapperClass), children: [jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('flex items-start gap-2.5', containerClass), children: [jsxRuntime.jsx("div", { className: "grid place-items-center shrink-0 pt-0.5", children: jsxRuntime.jsx("input", { ref: ref, ...rest, id: radioId, name: name, type: "radio", disabled: disabled, "aria-checked": rest.checked, className: buildClassname.buildClassName('peer transition-all col-start-1 row-start-1 appearance-none shrink-0 rounded-full', 'border focus:ring-2 focus:ring-offset-2', 'checked:border-5 checked:bg-white', 'dark:focus:ring-offset-gray-800', SIZE_MAP[size], THEME_MAP[theme], 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 cursor-pointer', className) }) }), (label || description) && (jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [label && (jsxRuntime.jsx(Label.Label, { htmlFor: radioId, className: buildClassname.buildClassName(disabled
+                                    ? 'cursor-not-allowed text-gray-400 dark:text-gray-500'
+                                    : 'cursor-pointer text-gray-700 dark:text-gray-200 font-medium', labelClass), children: label })), description && (jsxRuntime.jsx("p", { className: buildClassname.buildClassName('text-xs leading-normal', disabled
+                                    ? 'text-gray-300 dark:text-gray-600'
+                                    : 'text-gray-500 dark:text-gray-400', descriptionClass), children: description }))] }))] }), error && (jsxRuntime.jsx("div", { className: "mt-1", children: jsxRuntime.jsx(TextContent.TextContent, { error: true, small: true, children: error }) }))] }));
+});
+Radio.displayName = 'Radio';
+
+exports.Radio = Radio;
+//# sourceMappingURL=Radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { forwardRef, useId } from 'react'\nimport { Label } from '../Label'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { RadioProps, RadioSize, RadioTheme } from './Radio.types'\nimport { TextContent } from '../TextContent'\n\nconst SIZE_MAP: Record<RadioSize, string> = {\n  sm: 'size-4',\n  md: 'size-4.5',\n  lg: 'size-5.5',\n}\n\nconst THEME_MAP: Record<RadioTheme, string> = {\n  primary:\n    'checked:border-[var(--ui-primary)] checked:hover:border-[var(--ui-primary)] focus:ring-[var(--ui-primary-ring)]',\n  success: 'checked:border-emerald-600 checked:hover:border-emerald-600 focus:ring-emerald-500',\n  danger:\n    'checked:border-[var(--ui-danger)] checked:hover:border-[var(--ui-danger)] focus:ring-[var(--ui-danger-ring)]',\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {\n  const {\n    id,\n    name,\n    label,\n    description,\n    size = 'md',\n    theme = 'primary',\n    labelClass = '',\n    descriptionClass = '',\n    wrapperClass = '',\n    containerClass = '',\n    error,\n    disabled = false,\n    className = '',\n    ...rest\n  } = props\n\n  const generatedId = useId()\n  const radioId = id ?? (name && rest.value ? `${name}-${rest.value}` : generatedId)\n\n  return (\n    <div className={buildClassName(wrapperClass)}>\n      <div className={buildClassName('flex items-start gap-2.5', containerClass)}>\n        <div className=\"grid place-items-center shrink-0 pt-0.5\">\n          <input\n            ref={ref}\n            {...rest}\n            id={radioId}\n            name={name}\n            type=\"radio\"\n            disabled={disabled}\n            aria-checked={rest.checked}\n            className={buildClassName(\n              'peer transition-all col-start-1 row-start-1 appearance-none shrink-0 rounded-full',\n              'border focus:ring-2 focus:ring-offset-2',\n              'checked:border-5 checked:bg-white',\n              'dark:focus:ring-offset-gray-800',\n              SIZE_MAP[size],\n              THEME_MAP[theme],\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 cursor-pointer',\n              className,\n            )}\n          />\n        </div>\n        {(label || description) && (\n          <div className=\"flex flex-col gap-0.5 min-w-0\">\n            {label && (\n              <Label\n                htmlFor={radioId}\n                className={buildClassName(\n                  disabled\n                    ? 'cursor-not-allowed text-gray-400 dark:text-gray-500'\n                    : 'cursor-pointer text-gray-700 dark:text-gray-200 font-medium',\n                  labelClass,\n                )}\n              >\n                {label}\n              </Label>\n            )}\n            {description && (\n              <p\n                className={buildClassName(\n                  'text-xs leading-normal',\n                  disabled\n                    ? 'text-gray-300 dark:text-gray-600'\n                    : 'text-gray-500 dark:text-gray-400',\n                  descriptionClass,\n                )}\n              >\n                {description}\n              </p>\n            )}\n          </div>\n        )}\n      </div>\n      {error && (\n        <div className=\"mt-1\">\n          <TextContent error small>\n            {error}\n          </TextContent>\n        </div>\n      )}\n    </div>\n  )\n})\n\nRadio.displayName = 'Radio'\n"],"names":["forwardRef","useId","_jsxs","buildClassName","_jsx","Label","TextContent"],"mappings":";;;;;;;;AAMA,MAAM,QAAQ,GAA8B;AAC1C,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,UAAU;AACd,IAAA,EAAE,EAAE,UAAU;CACf;AAED,MAAM,SAAS,GAA+B;AAC5C,IAAA,OAAO,EACL,iHAAiH;AACnH,IAAA,OAAO,EAAE,oFAAoF;AAC7F,IAAA,MAAM,EACJ,8GAA8G;CACjH;AAEM,MAAM,KAAK,GAAGA,gBAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,KAAI;IAC3E,MAAM,EACJ,EAAE,EACF,IAAI,EACJ,KAAK,EACL,WAAW,EACX,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,SAAS,EACjB,UAAU,GAAG,EAAE,EACf,gBAAgB,GAAG,EAAE,EACrB,YAAY,GAAG,EAAE,EACjB,cAAc,GAAG,EAAE,EACnB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,EACd,GAAG,IAAI,EACR,GAAG,KAAK;AAET,IAAA,MAAM,WAAW,GAAGC,WAAK,EAAE;AAC3B,IAAA,MAAM,OAAO,GAAG,EAAE,KAAA,IAAA,IAAF,EAAE,KAAA,MAAA,GAAF,EAAE,IAAK,IAAI,IAAI,IAAI,CAAC,KAAK,GAAG,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,WAAW,CAAC;AAElF,IAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,6BAAc,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,CAC1CD,yBAAK,SAAS,EAAEC,6BAAc,CAAC,0BAA0B,EAAE,cAAc,CAAC,EAAA,QAAA,EAAA,CACxEC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,YACtDA,cAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,GAAG,KACJ,IAAI,EACR,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,IAAI,CAAC,OAAO,EAC1B,SAAS,EAAED,6BAAc,CACvB,mFAAmF,EACnF,yCAAyC,EACzC,mCAAmC,EACnC,iCAAiC,EACjC,QAAQ,CAAC,IAAI,CAAC,EACd,SAAS,CAAC,KAAK,CAAC,EAChB;AACE,kCAAE;AACF,kCAAE,qHAAqH,EACzH,SAAS,CACV,EAAA,CACD,EAAA,CACE,EACL,CAAC,KAAK,IAAI,WAAW,MACpBD,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,+BAA+B,EAAA,QAAA,EAAA,CAC3C,KAAK,KACJE,eAACC,WAAK,EAAA,EACJ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAEF,6BAAc,CACvB;AACE,sCAAE;sCACA,6DAA6D,EACjE,UAAU,CACX,EAAA,QAAA,EAEA,KAAK,GACA,CACT,EACA,WAAW,KACVC,sBACE,SAAS,EAAED,6BAAc,CACvB,wBAAwB,EACxB;AACE,sCAAE;AACF,sCAAE,kCAAkC,EACtC,gBAAgB,CACjB,EAAA,QAAA,EAEA,WAAW,EAAA,CACV,CACL,IACG,CACP,CAAA,EAAA,CACG,EACL,KAAK,KACJC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,MAAM,EAAA,QAAA,EACnBA,cAAA,CAACE,uBAAW,IAAC,KAAK,EAAA,IAAA,EAAC,KAAK,EAAA,IAAA,EAAA,QAAA,EACrB,KAAK,EAAA,CACM,EAAA,CACV,CACP,CAAA,EAAA,CACG;AAEV,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}