@fuf-stack/pixels 1.3.0 → 1.3.2

package/dist/Progress/index.cjs

@@ -2,12 +2,12 @@
 
 
 
-var _chunkIY2NXW6Xcjs = require('../chunk-IY2NXW6X.cjs');
-require('../chunk-OLI32URU.cjs');
+var _chunkKM3PZ3GHcjs = require('../chunk-KM3PZ3GH.cjs');
+require('../chunk-7ZIK4LWC.cjs');
 require('../chunk-AHEA4IJV.cjs');
 
 
 
 
-exports.Progress = _chunkIY2NXW6Xcjs.Progress_default; exports.default = _chunkIY2NXW6Xcjs.Progress_default2; exports.progressVariants = _chunkIY2NXW6Xcjs.progressVariants;
+exports.Progress = _chunkKM3PZ3GHcjs.Progress_default; exports.default = _chunkKM3PZ3GHcjs.Progress_default2; exports.progressVariants = _chunkKM3PZ3GHcjs.progressVariants;
 //# sourceMappingURL=index.cjs.map

package/dist/Progress/index.js

@@ -2,8 +2,8 @@ import {
   Progress_default,
   Progress_default2,
   progressVariants
-} from "../chunk-TYY3HIYL.js";
-import "../chunk-B3XKBNXD.js";
+} from "../chunk-EYUII2LV.js";
+import "../chunk-VTSVKRA7.js";
 import "../chunk-OAIRL2FN.js";
 export {
   Progress_default as Progress,

package/dist/ProgressCircular/index.cjs

@@ -2,12 +2,12 @@
 
 
 
-var _chunkAZ7VMRHXcjs = require('../chunk-AZ7VMRHX.cjs');
-require('../chunk-OLI32URU.cjs');
+var _chunkRZGLEDWNcjs = require('../chunk-RZGLEDWN.cjs');
+require('../chunk-7ZIK4LWC.cjs');
 require('../chunk-AHEA4IJV.cjs');
 
 
 
 
-exports.ProgressCircular = _chunkAZ7VMRHXcjs.ProgressCircular_default; exports.default = _chunkAZ7VMRHXcjs.ProgressCircular_default2; exports.progressCircularVariants = _chunkAZ7VMRHXcjs.progressCircularVariants;
+exports.ProgressCircular = _chunkRZGLEDWNcjs.ProgressCircular_default; exports.default = _chunkRZGLEDWNcjs.ProgressCircular_default2; exports.progressCircularVariants = _chunkRZGLEDWNcjs.progressCircularVariants;
 //# sourceMappingURL=index.cjs.map

package/dist/ProgressCircular/index.js

@@ -2,8 +2,8 @@ import {
   ProgressCircular_default,
   ProgressCircular_default2,
   progressCircularVariants
-} from "../chunk-2O3IUQR4.js";
-import "../chunk-B3XKBNXD.js";
+} from "../chunk-FFNMGR72.js";
+import "../chunk-VTSVKRA7.js";
 import "../chunk-OAIRL2FN.js";
 export {
   ProgressCircular_default as ProgressCircular,

package/dist/SearchInput/index.cjs

@@ -1,6 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});require('../chunk-AHEA4IJV.cjs');
 
 // src/SearchInput/SearchInput.tsx
+var _react = require('react');
 var _fa = require('react-icons/fa');
 var _input = require('@heroui/input');
 var _pixelutils = require('@fuf-stack/pixel-utils');
@@ -19,26 +20,32 @@ var inputVariants = _pixelutils.tv.call(void 0, {
 });
 var SearchInput = ({
   className: _className = void 0,
-  clearable = false,
   disabled = false,
   endContent = void 0,
   onChange,
-  onClear = void 0,
   placeholder = void 0,
   size = void 0,
   startContent = void 0,
   testId = void 0,
-  value = void 0
+  initialValue = void 0
 }) => {
+  const [value, setValue] = _react.useState.call(void 0, initialValue != null ? initialValue : "");
+  const handleChange = (e) => {
+    var _a, _b, _c, _d;
+    setValue((_b = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value) != null ? _b : "");
+    onChange((_d = (_c = e == null ? void 0 : e.target) == null ? void 0 : _c.value) != null ? _d : null);
+  };
   const variants = inputVariants();
   const classNames = _pixelutils.variantsToClassNames.call(void 0, variants, _className, "base");
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _input.Input,
     {
+      isClearable: true,
       "data-testid": testId ? _pixelutils.slugify.call(void 0, testId) : void 0,
       endContent,
-      isClearable: clearable,
       isDisabled: disabled,
+      onChange: handleChange,
+      onClear: handleChange,
       placeholder,
       radius: "sm",
       size,
@@ -50,13 +57,7 @@ var SearchInput = ({
         clearButton: classNames.clearButton,
         input: classNames.input,
         inputWrapper: classNames.inputWrapper
-      },
-      onChange: (e) => {
-        onChange(e.target.value);
-      },
-      onClear: onClear ? () => {
-        onClear();
-      } : void 0
+      }
     }
   );
 };

package/dist/SearchInput/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/SearchInput/index.cjs","../../src/SearchInput/SearchInput.tsx","../../src/SearchInput/index.ts"],"names":["SearchInput_default"],"mappings":"AAAA,0GAA8B;AAC9B;AACA;ACCA,oCAAyB;AAEzB,sCAAmC;AAEnC,oDAAkD;AAyEd,+CAAA;AAtE7B,IAAM,cAAA,EAAgB,4BAAA;AAAG,EAC9B,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,WAAA,EAAa,EAAA;AAAA;AAAA,IAEb,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,YAAA,EAAc;AAAA,EAChB;AACF,CAAC,CAAA;AAiCD,IAAM,YAAA,EAAc,CAAC;AAAA,EACnB,SAAA,EAAW,WAAA,EAAa,KAAA,CAAA;AAAA,EACxB,UAAA,EAAY,KAAA;AAAA,EACZ,SAAA,EAAW,KAAA;AAAA,EACX,WAAA,EAAa,KAAA,CAAA;AAAA,EACb,QAAA;AAAA,EACA,QAAA,EAAU,KAAA,CAAA;AAAA,EACV,YAAA,EAAc,KAAA,CAAA;AAAA,EACd,KAAA,EAAO,KAAA,CAAA;AAAA,EACP,aAAA,EAAe,KAAA,CAAA;AAAA,EACf,OAAA,EAAS,KAAA,CAAA;AAAA,EACT,MAAA,EAAQ,KAAA;AACV,CAAA,EAAA,GAAwB;AAEtB,EAAA,MAAM,SAAA,EAAW,aAAA,CAAc,CAAA;AAC/B,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,UAAA,EAAY,MAAM,CAAA;AAEpE,EAAA,uBACE,6BAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAa,OAAA,EAAS,iCAAA,MAAc,EAAA,EAAI,KAAA,CAAA;AAAA,MACxC,UAAA;AAAA,MACA,WAAA,EAAa,SAAA;AAAA,MACb,UAAA,EAAY,QAAA;AAAA,MACZ,WAAA;AAAA,MACA,MAAA,EAAO,IAAA;AAAA,MACP,IAAA;AAAA,MACA,YAAA,EAAc,aAAA,GAAA,KAAA,EAAA,aAAA,kBAAgB,6BAAA,YAAC,EAAA,EAAS,SAAA,EAAU,aAAA,CAAa,CAAA;AAAA,MAC/D,KAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MACR,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,UAAA,CAAW,IAAA;AAAA,QACjB,WAAA,EAAa,UAAA,CAAW,WAAA;AAAA,QACxB,KAAA,EAAO,UAAA,CAAW,KAAA;AAAA,QAClB,YAAA,EAAc,UAAA,CAAW;AAAA,MAC3B,CAAA;AAAA,MACA,QAAA,EAAU,CAAC,CAAA,EAAA,GAAM;AACf,QAAA,QAAA,CAAS,CAAA,CAAE,MAAA,CAAO,KAAK,CAAA;AAAA,MACzB,CAAA;AAAA,MACA,OAAA,EACE,QAAA,EACI,CAAA,EAAA,GAAM;AACJ,QAAA,OAAA,CAAQ,CAAA;AAAA,MACV,EAAA,EACA,KAAA;AAAA,IAAA;AAAA,EAER,CAAA;AAEJ,CAAA;AAEA,IAAO,oBAAA,EAAQ,WAAA;ADxCf;AACA;AE1DA,IAAOA,qBAAAA,EAAQ,mBAAA;AF4Df;AACE;AACA;AACF,kFAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/SearchInput/index.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { FaSearch } from 'react-icons/fa';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// input variants\nexport const inputVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface SearchInputProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** shows clear button when input has value */\n  clearable?: boolean;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** callback that is fired when the value is cleared */\n  onClear?: () => void;\n  /** callback that is fired when the value is changed */\n  onChange: (value?: string) => void;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** value of the input */\n  value?: string;\n}\n\n/**\n * SearchInput component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst SearchInput = ({\n  className: _className = undefined,\n  clearable = false,\n  disabled = false,\n  endContent = undefined,\n  onChange,\n  onClear = undefined,\n  placeholder = undefined,\n  size = undefined,\n  startContent = undefined,\n  testId = undefined,\n  value = undefined,\n}: SearchInputProps) => {\n  // classNames from slots\n  const variants = inputVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroInput\n      data-testid={testId ? slugify(testId) : undefined}\n      endContent={endContent}\n      isClearable={clearable}\n      isDisabled={disabled}\n      placeholder={placeholder}\n      radius=\"sm\"\n      size={size}\n      startContent={startContent ?? <FaSearch className=\"opacity-50\" />}\n      value={value}\n      variant=\"bordered\"\n      classNames={{\n        base: classNames.base,\n        clearButton: classNames.clearButton,\n        input: classNames.input,\n        inputWrapper: classNames.inputWrapper,\n      }}\n      onChange={(e) => {\n        onChange(e.target.value);\n      }}\n      onClear={\n        onClear\n          ? () => {\n              onClear();\n            }\n          : undefined\n      }\n    />\n  );\n};\n\nexport default SearchInput;\n","import SearchInput from './SearchInput';\n\nexport type { SearchInputProps } from './SearchInput';\n\nexport { SearchInput };\n\nexport default SearchInput;\n"]}
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/SearchInput/index.cjs","../../src/SearchInput/SearchInput.tsx","../../src/SearchInput/index.ts"],"names":["SearchInput_default"],"mappings":"AAAA,0GAA8B;AAC9B;AACA;ACCA,8BAAyB;AACzB,oCAAyB;AAEzB,sCAAmC;AAEnC,oDAAkD;AA6Ed,+CAAA;AA1E7B,IAAM,cAAA,EAAgB,4BAAA;AAAG,EAC9B,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,WAAA,EAAa,EAAA;AAAA;AAAA,IAEb,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,YAAA,EAAc;AAAA,EAChB;AACF,CAAC,CAAA;AA6BD,IAAM,YAAA,EAAc,CAAC;AAAA,EACnB,SAAA,EAAW,WAAA,EAAa,KAAA,CAAA;AAAA,EACxB,SAAA,EAAW,KAAA;AAAA,EACX,WAAA,EAAa,KAAA,CAAA;AAAA,EACb,QAAA;AAAA,EACA,YAAA,EAAc,KAAA,CAAA;AAAA,EACd,KAAA,EAAO,KAAA,CAAA;AAAA,EACP,aAAA,EAAe,KAAA,CAAA;AAAA,EACf,OAAA,EAAS,KAAA,CAAA;AAAA,EACT,aAAA,EAAe,KAAA;AACjB,CAAA,EAAA,GAAwB;AAEtB,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,EAAA,EAAI,6BAAA,aAAS,GAAA,KAAA,EAAA,aAAA,EAAgB,EAAE,CAAA;AAErD,EAAA,MAAM,aAAA,EAAe,CAAC,CAAA,EAAA,GAAsC;AAjE9D,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAkEI,IAAA,QAAA,CAAA,CAAS,GAAA,EAAA,CAAA,GAAA,EAAA,EAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,CAAA,CAAG,MAAA,EAAA,GAAH,KAAA,EAAA,KAAA,EAAA,EAAA,EAAA,CAAW,KAAA,EAAA,GAAX,KAAA,EAAA,GAAA,EAAoB,EAAE,CAAA;AAC/B,IAAA,QAAA,CAAA,CAAS,GAAA,EAAA,CAAA,GAAA,EAAA,EAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,CAAA,CAAG,MAAA,EAAA,GAAH,KAAA,EAAA,KAAA,EAAA,EAAA,EAAA,CAAW,KAAA,EAAA,GAAX,KAAA,EAAA,GAAA,EAAoB,IAAI,CAAA;AAAA,EACnC,CAAA;AAGA,EAAA,MAAM,SAAA,EAAW,aAAA,CAAc,CAAA;AAC/B,EAAA,MAAM,WAAA,EAAa,8CAAA,QAAqB,EAAU,UAAA,EAAY,MAAM,CAAA;AAEpE,EAAA,uBACE,6BAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,OAAA,EAAS,iCAAA,MAAc,EAAA,EAAI,KAAA,CAAA;AAAA,MACxC,UAAA;AAAA,MACA,UAAA,EAAY,QAAA;AAAA,MACZ,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,YAAA;AAAA,MACT,WAAA;AAAA,MACA,MAAA,EAAO,IAAA;AAAA,MACP,IAAA;AAAA,MACA,YAAA,EAAc,aAAA,GAAA,KAAA,EAAA,aAAA,kBAAgB,6BAAA,YAAC,EAAA,EAAS,SAAA,EAAU,aAAA,CAAa,CAAA;AAAA,MAC/D,KAAA;AAAA,MACA,OAAA,EAAQ,UAAA;AAAA,MACR,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,UAAA,CAAW,IAAA;AAAA,QACjB,WAAA,EAAa,UAAA,CAAW,WAAA;AAAA,QACxB,KAAA,EAAO,UAAA,CAAW,KAAA;AAAA,QAClB,YAAA,EAAc,UAAA,CAAW;AAAA,MAC3B;AAAA,IAAA;AAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,oBAAA,EAAQ,WAAA;ADlCf;AACA;AE3DA,IAAOA,qBAAAA,EAAQ,mBAAA;AF6Df;AACE;AACA;AACF,kFAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/SearchInput/index.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { useState } from 'react';\nimport { FaSearch } from 'react-icons/fa';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// input variants\nexport const inputVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface SearchInputProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** optional initial value of the input */\n  initialValue?: string;\n  /** callback that is fired when the value is changed or cleared */\n  onChange: (value: string | null) => void;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * SearchInput component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst SearchInput = ({\n  className: _className = undefined,\n  disabled = false,\n  endContent = undefined,\n  onChange,\n  placeholder = undefined,\n  size = undefined,\n  startContent = undefined,\n  testId = undefined,\n  initialValue = undefined,\n}: SearchInputProps) => {\n  // handle controlled value with initial value\n  const [value, setValue] = useState(initialValue ?? '');\n\n  const handleChange = (e?: ChangeEvent<HTMLInputElement>) => {\n    setValue(e?.target?.value ?? '');\n    onChange(e?.target?.value ?? null);\n  };\n\n  // classNames from slots\n  const variants = inputVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroInput\n      isClearable\n      data-testid={testId ? slugify(testId) : undefined}\n      endContent={endContent}\n      isDisabled={disabled}\n      onChange={handleChange}\n      onClear={handleChange}\n      placeholder={placeholder}\n      radius=\"sm\"\n      size={size}\n      startContent={startContent ?? <FaSearch className=\"opacity-50\" />}\n      value={value}\n      variant=\"bordered\"\n      classNames={{\n        base: classNames.base,\n        clearButton: classNames.clearButton,\n        input: classNames.input,\n        inputWrapper: classNames.inputWrapper,\n      }}\n    />\n  );\n};\n\nexport default SearchInput;\n","import SearchInput from './SearchInput';\n\nexport type { SearchInputProps } from './SearchInput';\n\nexport { SearchInput };\n\nexport default SearchInput;\n"]}

package/dist/SearchInput/index.d.cts

@@ -63,16 +63,14 @@ type ClassName = TVClassName<typeof inputVariants>;
 interface SearchInputProps extends VariantProps {
     /** CSS class name */
     className?: ClassName;
-    /** shows clear button when input has value */
-    clearable?: boolean;
     /** input field is disabled */
     disabled?: boolean;
     /** added content to the end of the input Field. */
     endContent?: ReactNode;
-    /** callback that is fired when the value is cleared */
-    onClear?: () => void;
-    /** callback that is fired when the value is changed */
-    onChange: (value?: string) => void;
+    /** optional initial value of the input */
+    initialValue?: string;
+    /** callback that is fired when the value is changed or cleared */
+    onChange: (value: string | null) => void;
     /** form field placeholder */
     placeholder?: string;
     /** size of the input */
@@ -81,12 +79,10 @@ interface SearchInputProps extends VariantProps {
     startContent?: ReactNode;
     /** HTML data-testid attribute used in e2e tests */
     testId?: string;
-    /** value of the input */
-    value?: string;
 }
 /**
  * SearchInput component based on [HeroUI Input](https://www.heroui.com//docs/components/input)
  */
-declare const SearchInput: ({ className: _className, clearable, disabled, endContent, onChange, onClear, placeholder, size, startContent, testId, value, }: SearchInputProps) => react_jsx_runtime.JSX.Element;
+declare const SearchInput: ({ className: _className, disabled, endContent, onChange, placeholder, size, startContent, testId, initialValue, }: SearchInputProps) => react_jsx_runtime.JSX.Element;
 
 export { SearchInput, type SearchInputProps, SearchInput as default };

package/dist/SearchInput/index.d.ts

@@ -63,16 +63,14 @@ type ClassName = TVClassName<typeof inputVariants>;
 interface SearchInputProps extends VariantProps {
     /** CSS class name */
     className?: ClassName;
-    /** shows clear button when input has value */
-    clearable?: boolean;
     /** input field is disabled */
     disabled?: boolean;
     /** added content to the end of the input Field. */
     endContent?: ReactNode;
-    /** callback that is fired when the value is cleared */
-    onClear?: () => void;
-    /** callback that is fired when the value is changed */
-    onChange: (value?: string) => void;
+    /** optional initial value of the input */
+    initialValue?: string;
+    /** callback that is fired when the value is changed or cleared */
+    onChange: (value: string | null) => void;
     /** form field placeholder */
     placeholder?: string;
     /** size of the input */
@@ -81,12 +79,10 @@ interface SearchInputProps extends VariantProps {
     startContent?: ReactNode;
     /** HTML data-testid attribute used in e2e tests */
     testId?: string;
-    /** value of the input */
-    value?: string;
 }
 /**
  * SearchInput component based on [HeroUI Input](https://www.heroui.com//docs/components/input)
  */
-declare const SearchInput: ({ className: _className, clearable, disabled, endContent, onChange, onClear, placeholder, size, startContent, testId, value, }: SearchInputProps) => react_jsx_runtime.JSX.Element;
+declare const SearchInput: ({ className: _className, disabled, endContent, onChange, placeholder, size, startContent, testId, initialValue, }: SearchInputProps) => react_jsx_runtime.JSX.Element;
 
 export { SearchInput, type SearchInputProps, SearchInput as default };

package/dist/SearchInput/index.js

@@ -1,6 +1,7 @@
 import "../chunk-OAIRL2FN.js";
 
 // src/SearchInput/SearchInput.tsx
+import { useState } from "react";
 import { FaSearch } from "react-icons/fa";
 import { Input as HeroInput } from "@heroui/input";
 import { slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
@@ -19,26 +20,32 @@ var inputVariants = tv({
 });
 var SearchInput = ({
   className: _className = void 0,
-  clearable = false,
   disabled = false,
   endContent = void 0,
   onChange,
-  onClear = void 0,
   placeholder = void 0,
   size = void 0,
   startContent = void 0,
   testId = void 0,
-  value = void 0
+  initialValue = void 0
 }) => {
+  const [value, setValue] = useState(initialValue != null ? initialValue : "");
+  const handleChange = (e) => {
+    var _a, _b, _c, _d;
+    setValue((_b = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value) != null ? _b : "");
+    onChange((_d = (_c = e == null ? void 0 : e.target) == null ? void 0 : _c.value) != null ? _d : null);
+  };
   const variants = inputVariants();
   const classNames = variantsToClassNames(variants, _className, "base");
   return /* @__PURE__ */ jsx(
     HeroInput,
     {
+      isClearable: true,
       "data-testid": testId ? slugify(testId) : void 0,
       endContent,
-      isClearable: clearable,
       isDisabled: disabled,
+      onChange: handleChange,
+      onClear: handleChange,
       placeholder,
       radius: "sm",
       size,
@@ -50,13 +57,7 @@ var SearchInput = ({
         clearButton: classNames.clearButton,
         input: classNames.input,
         inputWrapper: classNames.inputWrapper
-      },
-      onChange: (e) => {
-        onChange(e.target.value);
-      },
-      onClear: onClear ? () => {
-        onClear();
-      } : void 0
+      }
     }
   );
 };

package/dist/SearchInput/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SearchInput/SearchInput.tsx","../../src/SearchInput/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { FaSearch } from 'react-icons/fa';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// input variants\nexport const inputVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface SearchInputProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** shows clear button when input has value */\n  clearable?: boolean;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** callback that is fired when the value is cleared */\n  onClear?: () => void;\n  /** callback that is fired when the value is changed */\n  onChange: (value?: string) => void;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** value of the input */\n  value?: string;\n}\n\n/**\n * SearchInput component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst SearchInput = ({\n  className: _className = undefined,\n  clearable = false,\n  disabled = false,\n  endContent = undefined,\n  onChange,\n  onClear = undefined,\n  placeholder = undefined,\n  size = undefined,\n  startContent = undefined,\n  testId = undefined,\n  value = undefined,\n}: SearchInputProps) => {\n  // classNames from slots\n  const variants = inputVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroInput\n      data-testid={testId ? slugify(testId) : undefined}\n      endContent={endContent}\n      isClearable={clearable}\n      isDisabled={disabled}\n      placeholder={placeholder}\n      radius=\"sm\"\n      size={size}\n      startContent={startContent ?? <FaSearch className=\"opacity-50\" />}\n      value={value}\n      variant=\"bordered\"\n      classNames={{\n        base: classNames.base,\n        clearButton: classNames.clearButton,\n        input: classNames.input,\n        inputWrapper: classNames.inputWrapper,\n      }}\n      onChange={(e) => {\n        onChange(e.target.value);\n      }}\n      onClear={\n        onClear\n          ? () => {\n              onClear();\n            }\n          : undefined\n      }\n    />\n  );\n};\n\nexport default SearchInput;\n","import SearchInput from './SearchInput';\n\nexport type { SearchInputProps } from './SearchInput';\n\nexport { SearchInput };\n\nexport default SearchInput;\n"],"mappings":";;;AAGA,SAAS,gBAAgB;AAEzB,SAAS,SAAS,iBAAiB;AAEnC,SAAS,SAAS,IAAI,4BAA4B;AAyEd;AAtE7B,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA;AAAA,IAEN,aAAa;AAAA;AAAA,IAEb,OAAO;AAAA;AAAA,IAEP,cAAc;AAAA,EAChB;AACF,CAAC;AAiCD,IAAM,cAAc,CAAC;AAAA,EACnB,WAAW,aAAa;AAAA,EACxB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,SAAS;AAAA,EACT,QAAQ;AACV,MAAwB;AAEtB,QAAM,WAAW,cAAc;AAC/B,QAAM,aAAa,qBAAqB,UAAU,YAAY,MAAM;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,SAAS,QAAQ,MAAM,IAAI;AAAA,MACxC;AAAA,MACA,aAAa;AAAA,MACb,YAAY;AAAA,MACZ;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA,cAAc,sCAAgB,oBAAC,YAAS,WAAU,cAAa;AAAA,MAC/D;AAAA,MACA,SAAQ;AAAA,MACR,YAAY;AAAA,QACV,MAAM,WAAW;AAAA,QACjB,aAAa,WAAW;AAAA,QACxB,OAAO,WAAW;AAAA,QAClB,cAAc,WAAW;AAAA,MAC3B;AAAA,MACA,UAAU,CAAC,MAAM;AACf,iBAAS,EAAE,OAAO,KAAK;AAAA,MACzB;AAAA,MACA,SACE,UACI,MAAM;AACJ,gBAAQ;AAAA,MACV,IACA;AAAA;AAAA,EAER;AAEJ;AAEA,IAAO,sBAAQ;;;ACjGf,IAAOA,uBAAQ;","names":["SearchInput_default"]}
+{"version":3,"sources":["../../src/SearchInput/SearchInput.tsx","../../src/SearchInput/index.ts"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ChangeEvent, ReactNode } from 'react';\n\nimport { useState } from 'react';\nimport { FaSearch } from 'react-icons/fa';\n\nimport { Input as HeroInput } from '@heroui/input';\n\nimport { slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// input variants\nexport const inputVariants = tv({\n  slots: {\n    /** wrapper around the whole input */\n    base: '',\n    /** clear button */\n    clearButton: '',\n    /** actual input element */\n    input: '',\n    /** inner wrapper (HeroUI inputWrapper slot) */\n    inputWrapper: 'bg-content1 group-data-[focus=true]:border-focus',\n  },\n});\n\ntype VariantProps = TVProps<typeof inputVariants>;\ntype ClassName = TVClassName<typeof inputVariants>;\n\nexport interface SearchInputProps extends VariantProps {\n  /** CSS class name */\n  className?: ClassName;\n  /** input field is disabled */\n  disabled?: boolean;\n  /** added content to the end of the input Field. */\n  endContent?: ReactNode;\n  /** optional initial value of the input */\n  initialValue?: string;\n  /** callback that is fired when the value is changed or cleared */\n  onChange: (value: string | null) => void;\n  /** form field placeholder */\n  placeholder?: string;\n  /** size of the input */\n  size?: 'sm' | 'md' | 'lg';\n  /** content added to the start of the input field */\n  startContent?: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * SearchInput component based on [HeroUI Input](https://www.heroui.com//docs/components/input)\n */\nconst SearchInput = ({\n  className: _className = undefined,\n  disabled = false,\n  endContent = undefined,\n  onChange,\n  placeholder = undefined,\n  size = undefined,\n  startContent = undefined,\n  testId = undefined,\n  initialValue = undefined,\n}: SearchInputProps) => {\n  // handle controlled value with initial value\n  const [value, setValue] = useState(initialValue ?? '');\n\n  const handleChange = (e?: ChangeEvent<HTMLInputElement>) => {\n    setValue(e?.target?.value ?? '');\n    onChange(e?.target?.value ?? null);\n  };\n\n  // classNames from slots\n  const variants = inputVariants();\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroInput\n      isClearable\n      data-testid={testId ? slugify(testId) : undefined}\n      endContent={endContent}\n      isDisabled={disabled}\n      onChange={handleChange}\n      onClear={handleChange}\n      placeholder={placeholder}\n      radius=\"sm\"\n      size={size}\n      startContent={startContent ?? <FaSearch className=\"opacity-50\" />}\n      value={value}\n      variant=\"bordered\"\n      classNames={{\n        base: classNames.base,\n        clearButton: classNames.clearButton,\n        input: classNames.input,\n        inputWrapper: classNames.inputWrapper,\n      }}\n    />\n  );\n};\n\nexport default SearchInput;\n","import SearchInput from './SearchInput';\n\nexport type { SearchInputProps } from './SearchInput';\n\nexport { SearchInput };\n\nexport default SearchInput;\n"],"mappings":";;;AAGA,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAEzB,SAAS,SAAS,iBAAiB;AAEnC,SAAS,SAAS,IAAI,4BAA4B;AA6Ed;AA1E7B,IAAM,gBAAgB,GAAG;AAAA,EAC9B,OAAO;AAAA;AAAA,IAEL,MAAM;AAAA;AAAA,IAEN,aAAa;AAAA;AAAA,IAEb,OAAO;AAAA;AAAA,IAEP,cAAc;AAAA,EAChB;AACF,CAAC;AA6BD,IAAM,cAAc,CAAC;AAAA,EACnB,WAAW,aAAa;AAAA,EACxB,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,eAAe;AAAA,EACf,SAAS;AAAA,EACT,eAAe;AACjB,MAAwB;AAEtB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,sCAAgB,EAAE;AAErD,QAAM,eAAe,CAAC,MAAsC;AAjE9D;AAkEI,cAAS,kCAAG,WAAH,mBAAW,UAAX,YAAoB,EAAE;AAC/B,cAAS,kCAAG,WAAH,mBAAW,UAAX,YAAoB,IAAI;AAAA,EACnC;AAGA,QAAM,WAAW,cAAc;AAC/B,QAAM,aAAa,qBAAqB,UAAU,YAAY,MAAM;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,eAAa,SAAS,QAAQ,MAAM,IAAI;AAAA,MACxC;AAAA,MACA,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,SAAS;AAAA,MACT;AAAA,MACA,QAAO;AAAA,MACP;AAAA,MACA,cAAc,sCAAgB,oBAAC,YAAS,WAAU,cAAa;AAAA,MAC/D;AAAA,MACA,SAAQ;AAAA,MACR,YAAY;AAAA,QACV,MAAM,WAAW;AAAA,QACjB,aAAa,WAAW;AAAA,QACxB,OAAO,WAAW;AAAA,QAClB,cAAc,WAAW;AAAA,MAC3B;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,sBAAQ;;;AC5Ff,IAAOA,uBAAQ;","names":["SearchInput_default"]}

package/dist/{chunk-OLI32URU.cjs → chunk-7ZIK4LWC.cjs}

@@ -80,4 +80,4 @@ var useLocalStorage = (key, initialValue) => {
 
 
 exports.useDebounce = useDebounce; exports.useIsInitialRenderCycle = useIsInitialRenderCycle; exports.useLocalStorage = useLocalStorage;
-//# sourceMappingURL=chunk-OLI32URU.cjs.map
+//# sourceMappingURL=chunk-7ZIK4LWC.cjs.map

package/dist/chunk-7ZIK4LWC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-7ZIK4LWC.cjs","../src/hooks/useDebounce.ts","../src/hooks/useIsInitialRenderCycle.ts","../src/hooks/useLocalStorage.ts"],"names":["useEffect","useState"],"mappings":"AAAA;ACEA,8BAAoC;AAE7B,IAAM,YAAA,EAAc,CAAQ,KAAA,EAAc,KAAA,EAAA,GAAkB;AAEjE,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,EAAA,EAAI,6BAAA,KAAc,CAAA;AAC1D,EAAA,8BAAA;AAAA,IACE,CAAA,EAAA,GAAM;AAEJ,MAAA,MAAM,QAAA,EAAU,UAAA,CAAW,CAAA,EAAA,GAAM;AAC/B,QAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA,MACzB,CAAA,EAAG,KAAK,CAAA;AAIR,MAAA,OAAO,CAAA,EAAA,GAAM;AACX,QAAA,YAAA,CAAa,OAAO,CAAA;AAAA,MACtB,CAAA;AAAA,IACF,CAAA;AAAA,IACA,CAAC,KAAA,EAAO,KAAK;AAAA;AAAA,EACf,CAAA;AACA,EAAA,OAAO,cAAA;AACT,CAAA;ADLA;AACA;AEjBA;AAOO,IAAM,wBAAA,EAA0B,CAAA,EAAA,GAAe;AAEpD,EAAA,MAAM,gBAAA,EAAkB,2BAAA,IAAW,CAAA;AAGnC,EAAAA,8BAAAA,CAAU,EAAA,GAAM;AAEd,IAAA,eAAA,CAAgB,QAAA,EAAU,KAAA;AAAA,EAG5B,CAAA,EAAG,CAAC,CAAC,CAAA;AAEL,EAAA,OAAO,eAAA,CAAgB,OAAA;AACzB,CAAA;AFMA;AACA;AGzBA;AAEO,IAAM,gBAAA,EAAkB,CAC7B,GAAA,EACA,YAAA,EAAA,GACqC;AAGrC,EAAA,MAAM,UAAA,EAAY,CAAA,EAAA,GAAM;AAEtB,IAAA,GAAA,CAAI,OAAO,OAAA,IAAW,WAAA,EAAa;AACjC,MAAA,OAAO,YAAA;AAAA,IACT;AAEA,IAAA,IAAI;AACF,MAAA,MAAM,KAAA,EAAO,MAAA,CAAO,YAAA,CAAa,OAAA,CAAQ,GAAG,CAAA;AAC5C,MAAA,OAAO,KAAA,EAAO,IAAA,CAAK,KAAA,CAAM,IAAI,EAAA,EAAI,YAAA;AAAA,IACnC,EAAA,MAAA,CAAS,KAAA,EAAO;AACd,MAAA,OAAA,CAAQ,IAAA,CAAK,CAAA,qCAAA,EAAmC,GAAG,CAAA,OAAA,CAAA,EAAM,KAAK,CAAA;AAC9D,MAAA,OAAO,YAAA;AAAA,IACT;AAAA,EACF,CAAA;AAIA,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,EAAA,EAAIC,6BAAAA,SAAqB,CAAA;AAI3D,EAAA,MAAM,SAAA,EAAwC,CAAC,KAAA,EAAA,GAAU;AAEvD,IAAA,GAAA,CAAI,OAAO,OAAA,IAAW,WAAA,EAAa;AACjC,MAAA,OAAA,CAAQ,IAAA;AAAA,QACN,CAAA,qCAAA,EAAmC,GAAG,CAAA,8CAAA;AAAA,MACxC,CAAA;AAAA,IACF;AAEA,IAAA,IAAI;AAEF,MAAA,MAAM,SAAA,EAAW,MAAA,WAAiB,SAAA,EAAW,KAAA,CAAM,WAAW,EAAA,EAAI,KAAA;AAGlE,MAAA,MAAA,CAAO,YAAA,CAAa,OAAA,CAAQ,GAAA,EAAK,IAAA,CAAK,SAAA,CAAU,QAAQ,CAAC,CAAA;AAGzD,MAAA,cAAA,CAAe,QAAQ,CAAA;AAGvB,MAAA,MAAA,CAAO,aAAA,CAAc,IAAI,KAAA,CAAM,eAAe,CAAC,CAAA;AAAA,IACjD,EAAA,MAAA,CAAS,KAAA,EAAO;AACd,MAAA,OAAA,CAAQ,IAAA,CAAK,CAAA,qCAAA,EAAmC,GAAG,CAAA,OAAA,CAAA,EAAM,KAAK,CAAA;AAAA,IAChE;AAAA,EACF,CAAA;AAEA,EAAAD,8BAAAA,CAAU,EAAA,GAAM;AACd,IAAA,cAAA,CAAe,SAAA,CAAU,CAAC,CAAA;AAAA,EAE5B,CAAA,EAAG,CAAC,CAAC,CAAA;AAEL,EAAAA,8BAAAA,CAAU,EAAA,GAAM;AACd,IAAA,MAAM,oBAAA,EAAsB,CAAA,EAAA,GAAM;AAChC,MAAA,cAAA,CAAe,SAAA,CAAU,CAAC,CAAA;AAAA,IAC5B,CAAA;AAGA,IAAA,MAAA,CAAO,gBAAA,CAAiB,SAAA,EAAW,mBAAmB,CAAA;AAGtD,IAAA,MAAA,CAAO,gBAAA,CAAiB,eAAA,EAAiB,mBAAmB,CAAA;AAE5D,IAAA,OAAO,CAAA,EAAA,GAAM;AACX,MAAA,MAAA,CAAO,mBAAA,CAAoB,SAAA,EAAW,mBAAmB,CAAA;AACzD,MAAA,MAAA,CAAO,mBAAA,CAAoB,eAAA,EAAiB,mBAAmB,CAAA;AAAA,IACjE,CAAA;AAAA,EAEF,CAAA,EAAG,CAAC,CAAC,CAAA;AAEL,EAAA,OAAO,CAAC,WAAA,EAAa,QAAQ,CAAA;AAC/B,CAAA;AHNA;AACA;AACE;AACA;AACA;AACF,wIAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-7ZIK4LWC.cjs","sourcesContent":[null,"/* eslint-disable import-x/prefer-default-export */\n\nimport { useEffect, useState } from 'react';\n\nexport const useDebounce = <Value>(value: Value, delay: number) => {\n  // State and setters for debounced value\n  const [debouncedValue, setDebouncedValue] = useState(value);\n  useEffect(\n    () => {\n      // Update debounced value after delay\n      const handler = setTimeout(() => {\n        setDebouncedValue(value);\n      }, delay);\n      // Cancel the timeout if value changes (also on delay change or unmount)\n      // This is how we prevent debounced value from updating if value is changed ...\n      // .. within the delay period. Timeout gets cleared and restarted.\n      return () => {\n        clearTimeout(handler);\n      };\n    },\n    [value, delay], // Only re-call effect if value or delay changes\n  );\n  return debouncedValue;\n};\n","/* eslint-disable import/prefer-default-export */\n\nimport { useEffect, useRef } from 'react';\n\n/**\n * A hook that returns true on initial render and false afterward.\n *\n * @returns {boolean} - True on initial render, false afterward\n */\nexport const useIsInitialRenderCycle = (): boolean => {\n  // Use ref to avoid re-renders\n  const isInitialRender = useRef(true);\n\n  // Update ref after first render\n  useEffect(() => {\n    // Set to false after component mounts\n    isInitialRender.current = false;\n\n    // No cleanup needed for this effect\n  }, []);\n\n  return isInitialRender.current;\n};\n","/* eslint-disable import/prefer-default-export */\n\nimport type { Dispatch, SetStateAction } from 'react';\n\nimport { useEffect, useState } from 'react';\n\nexport const useLocalStorage = <T>(\n  key: string,\n  initialValue: T | (() => T),\n): [T, Dispatch<SetStateAction<T>>] => {\n  // Get from local storage then\n  // parse stored json or return initialValue\n  const readValue = () => {\n    // Prevent build error \"window is undefined\" but keep keep working\n    if (typeof window === 'undefined') {\n      return initialValue;\n    }\n\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? JSON.parse(item) : initialValue;\n    } catch (error) {\n      console.warn(`Error reading localStorage key “${key}”:`, error);\n      return initialValue;\n    }\n  };\n\n  // State to store our value\n  // Pass initial state function to useState so logic is only executed once\n  const [storedValue, setStoredValue] = useState<T>(readValue);\n\n  // Return a wrapped version of useState's setter function that ...\n  // ... persists the new value to localStorage.\n  const setValue: Dispatch<SetStateAction<T>> = (value) => {\n    // Prevent build error \"window is undefined\" but keeps working\n    if (typeof window === 'undefined') {\n      console.warn(\n        `Tried setting localStorage key “${key}” even though environment is not a client`,\n      );\n    }\n\n    try {\n      // Allow value to be a function so we have the same API as useState\n      const newValue = value instanceof Function ? value(storedValue) : value;\n\n      // Save to local storage\n      window.localStorage.setItem(key, JSON.stringify(newValue));\n\n      // Save state\n      setStoredValue(newValue);\n\n      // We dispatch a custom event so every useLocalStorage hook are notified\n      window.dispatchEvent(new Event('local-storage'));\n    } catch (error) {\n      console.warn(`Error setting localStorage key “${key}”:`, error);\n    }\n  };\n\n  useEffect(() => {\n    setStoredValue(readValue());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const handleStorageChange = () => {\n      setStoredValue(readValue());\n    };\n\n    // this only works for other documents, not the current one\n    window.addEventListener('storage', handleStorageChange);\n\n    // this is a custom event, triggered in writeValueToLocalStorage\n    window.addEventListener('local-storage', handleStorageChange);\n\n    return () => {\n      window.removeEventListener('storage', handleStorageChange);\n      window.removeEventListener('local-storage', handleStorageChange);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return [storedValue, setValue];\n};\n"]}

package/dist/{chunk-TYY3HIYL.js → chunk-EYUII2LV.js}

@@ -1,6 +1,6 @@
 import {
   useIsInitialRenderCycle
-} from "./chunk-B3XKBNXD.js";
+} from "./chunk-VTSVKRA7.js";
 
 // src/Progress/Progress.tsx
 import { Progress as HeroProgress } from "@heroui/progress";
@@ -100,4 +100,4 @@ export {
   Progress_default,
   Progress_default2
 };
-//# sourceMappingURL=chunk-TYY3HIYL.js.map
+//# sourceMappingURL=chunk-EYUII2LV.js.map

package/dist/{chunk-2O3IUQR4.js → chunk-FFNMGR72.js}

@@ -1,6 +1,6 @@
 import {
   useIsInitialRenderCycle
-} from "./chunk-B3XKBNXD.js";
+} from "./chunk-VTSVKRA7.js";
 import {
   __spreadValues
 } from "./chunk-OAIRL2FN.js";
@@ -142,4 +142,4 @@ export {
   ProgressCircular_default,
   ProgressCircular_default2
 };
-//# sourceMappingURL=chunk-2O3IUQR4.js.map
+//# sourceMappingURL=chunk-FFNMGR72.js.map

package/dist/{chunk-IY2NXW6X.cjs → chunk-KM3PZ3GH.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkOLI32URUcjs = require('./chunk-OLI32URU.cjs');
+var _chunk7ZIK4LWCcjs = require('./chunk-7ZIK4LWC.cjs');
 
 // src/Progress/Progress.tsx
 var _progress = require('@heroui/progress');
@@ -65,7 +65,7 @@ var Progress = ({
   size = "md",
   testId = void 0
 }) => {
-  const isInitialRenderCycle = _chunkOLI32URUcjs.useIsInitialRenderCycle.call(void 0, );
+  const isInitialRenderCycle = _chunk7ZIK4LWCcjs.useIsInitialRenderCycle.call(void 0, );
   const isFinished = percent >= 100 && !disableFinishedState;
   let progressColor = color;
   if (isFinished) {
@@ -100,4 +100,4 @@ var Progress_default2 = Progress_default;
 
 
 exports.progressVariants = progressVariants; exports.Progress_default = Progress_default; exports.Progress_default2 = Progress_default2;
-//# sourceMappingURL=chunk-IY2NXW6X.cjs.map
+//# sourceMappingURL=chunk-KM3PZ3GH.cjs.map

package/dist/{chunk-IY2NXW6X.cjs.map → chunk-KM3PZ3GH.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-IY2NXW6X.cjs","../src/Progress/Progress.tsx","../src/Progress/index.ts"],"names":["Progress_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACDA,4CAAyC;AAEzC,oDAAyC;AAsHrC,+CAAA;AAjHG,IAAM,iBAAA,EAAmB,4BAAA;AAAG,EACjC,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,SAAA,EAAW,EAAA;AAAA;AAAA,IAEX,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,YAAA,EAAc,EAAA;AAAA;AAAA,IAEd,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,KAAA,EAAO;AAAA,EACT,CAAA;AAAA,EACA,QAAA,EAAU;AAAA;AAAA,IAER,KAAA,EAAO;AAAA,MACL,MAAA,EAAQ;AAAA,QACN,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,SAAA,EAAW;AAAA,QACT,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF,CAAC,CAAA;AAiCD,IAAM,cAAA,EAAgB,CAAC,QAAA,EAAU,CAAA,EAAA,GAAM;AACrC,EAAA,OAAO,CAAA,EAAA;AACT;AAKM;AACJ,EAAA;AACA,EAAA;AACQ,EAAA;AACR,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACQ,EAAA;AACR,EAAA;AACA,EAAA;AACO,EAAA;AACP,EAAA;AACmB;AAEb,EAAA;AAGA,EAAA;AAGF,EAAA;AACA,EAAA;AACF,IAAA;AACF,EAAA;AAEM,EAAA;AACA,EAAA;AAEA,EAAA;AAGJ,EAAA;AAAC,IAAA;AAAA,IAAA;AACC,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AAAyB,IAAA;AAC3B,EAAA;AAEJ;AAEO;AD7CG;AACA;AExFHA;AF0FG;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-IY2NXW6X.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Progress as HeroProgress } from '@heroui/progress';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\n// progress styling variants\nexport const progressVariants = tv({\n  slots: {\n    // wrapper around the whole component\n    base: '',\n    // indicator of the progress (finished part)\n    indicator: '',\n    // label at the top left of the progress bar\n    label: '',\n    // wrapper around progress label and label span\n    labelWrapper: '',\n    // track of the progress (not finished part)\n    track: '',\n    // span around the progress value\n    value: '',\n  },\n  variants: {\n    // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n    color: {\n      danger: {\n        indicator: 'bg-danger',\n      },\n      default: {\n        indicator: 'bg-default-400',\n      },\n      info: {\n        indicator: 'bg-info',\n      },\n      primary: {\n        indicator: 'bg-primary',\n      },\n      secondary: {\n        indicator: 'bg-secondary',\n      },\n      success: {\n        indicator: 'bg-success',\n      },\n      warning: {\n        indicator: 'bg-warning',\n      },\n    },\n  },\n});\n\nexport type VariantProps = TVProps<typeof progressVariants>;\ntype ClassName = TVClassName<typeof progressVariants>;\n\nexport interface ProgressProps extends VariantProps {\n  /** sets HTML aria-label attribute */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** color of the progress bar */\n  color?: VariantProps['color'];\n  /** disables all animations */\n  disableAnimation?: boolean;\n  /** disables special finished state (checkmark icon and success color) */\n  disableFinishedState?: boolean;\n  /** function to format the progress value */\n  format?: (percent: number) => ReactNode;\n  /** shows indeterminate progress animation */\n  indeterminate?: boolean;\n  /** label of the progress bar */\n  label?: ReactNode;\n  /** percentage / progress of the progress bar */\n  percent: number;\n  /** whether to show the value label */\n  showValueLabel?: boolean;\n  /** size of the progress bar */\n  size?: 'sm' | 'md' | 'lg';\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => {\n  return `${percent}%`;\n};\n\n/**\n * Progress component based on [HeroUI Progress](https://www.heroui.com//docs/components/progress)\n */\nconst Progress = ({\n  ariaLabel = 'progress',\n  className = undefined,\n  color = 'info',\n  disableAnimation = false,\n  disableFinishedState = false,\n  format = defaultFormat,\n  indeterminate = false,\n  label = undefined,\n  percent,\n  showValueLabel = false,\n  size = 'md',\n  testId = undefined,\n}: ProgressProps) => {\n  // used to disable animation on initial render cycle\n  const isInitialRenderCycle = useIsInitialRenderCycle();\n\n  // Apply finished state if percent is 100 or more and not disabled by disableFinishedState\n  const isFinished = percent >= 100 && !disableFinishedState;\n\n  // handle special states\n  let progressColor: VariantProps['color'] = color;\n  if (isFinished) {\n    progressColor = 'success';\n  }\n\n  const variants = progressVariants({ color: progressColor });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const value = format(percent);\n\n  return (\n    <HeroProgress\n      aria-label={ariaLabel}\n      classNames={classNames}\n      data-testid={testId}\n      disableAnimation={isInitialRenderCycle || disableAnimation}\n      isIndeterminate={indeterminate}\n      label={label}\n      showValueLabel={showValueLabel}\n      size={size}\n      value={percent || 0}\n      valueLabel={!!percent && value}\n    />\n  );\n};\n\nexport default Progress;\n","import Progress, { progressVariants } from './Progress';\n\nexport type { ProgressProps } from './Progress';\n\nexport { Progress, progressVariants };\n\nexport default Progress;\n"]}
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-KM3PZ3GH.cjs","../src/Progress/Progress.tsx","../src/Progress/index.ts"],"names":["Progress_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACDA,4CAAyC;AAEzC,oDAAyC;AAsHrC,+CAAA;AAjHG,IAAM,iBAAA,EAAmB,4BAAA;AAAG,EACjC,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,SAAA,EAAW,EAAA;AAAA;AAAA,IAEX,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,YAAA,EAAc,EAAA;AAAA;AAAA,IAEd,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,KAAA,EAAO;AAAA,EACT,CAAA;AAAA,EACA,QAAA,EAAU;AAAA;AAAA,IAER,KAAA,EAAO;AAAA,MACL,MAAA,EAAQ;AAAA,QACN,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,SAAA,EAAW;AAAA,QACT,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MACA,OAAA,EAAS;AAAA,QACP,SAAA,EAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF,CAAC,CAAA;AAiCD,IAAM,cAAA,EAAgB,CAAC,QAAA,EAAU,CAAA,EAAA,GAAM;AACrC,EAAA,OAAO,CAAA,EAAA;AACT;AAKM;AACJ,EAAA;AACA,EAAA;AACQ,EAAA;AACR,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACQ,EAAA;AACR,EAAA;AACA,EAAA;AACO,EAAA;AACP,EAAA;AACmB;AAEb,EAAA;AAGA,EAAA;AAGF,EAAA;AACA,EAAA;AACF,IAAA;AACF,EAAA;AAEM,EAAA;AACA,EAAA;AAEA,EAAA;AAGJ,EAAA;AAAC,IAAA;AAAA,IAAA;AACC,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AAAyB,IAAA;AAC3B,EAAA;AAEJ;AAEO;AD7CG;AACA;AExFHA;AF0FG;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-KM3PZ3GH.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ReactNode } from 'react';\n\nimport { Progress as HeroProgress } from '@heroui/progress';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\n// progress styling variants\nexport const progressVariants = tv({\n  slots: {\n    // wrapper around the whole component\n    base: '',\n    // indicator of the progress (finished part)\n    indicator: '',\n    // label at the top left of the progress bar\n    label: '',\n    // wrapper around progress label and label span\n    labelWrapper: '',\n    // track of the progress (not finished part)\n    track: '',\n    // span around the progress value\n    value: '',\n  },\n  variants: {\n    // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n    color: {\n      danger: {\n        indicator: 'bg-danger',\n      },\n      default: {\n        indicator: 'bg-default-400',\n      },\n      info: {\n        indicator: 'bg-info',\n      },\n      primary: {\n        indicator: 'bg-primary',\n      },\n      secondary: {\n        indicator: 'bg-secondary',\n      },\n      success: {\n        indicator: 'bg-success',\n      },\n      warning: {\n        indicator: 'bg-warning',\n      },\n    },\n  },\n});\n\nexport type VariantProps = TVProps<typeof progressVariants>;\ntype ClassName = TVClassName<typeof progressVariants>;\n\nexport interface ProgressProps extends VariantProps {\n  /** sets HTML aria-label attribute */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** color of the progress bar */\n  color?: VariantProps['color'];\n  /** disables all animations */\n  disableAnimation?: boolean;\n  /** disables special finished state (checkmark icon and success color) */\n  disableFinishedState?: boolean;\n  /** function to format the progress value */\n  format?: (percent: number) => ReactNode;\n  /** shows indeterminate progress animation */\n  indeterminate?: boolean;\n  /** label of the progress bar */\n  label?: ReactNode;\n  /** percentage / progress of the progress bar */\n  percent: number;\n  /** whether to show the value label */\n  showValueLabel?: boolean;\n  /** size of the progress bar */\n  size?: 'sm' | 'md' | 'lg';\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => {\n  return `${percent}%`;\n};\n\n/**\n * Progress component based on [HeroUI Progress](https://www.heroui.com//docs/components/progress)\n */\nconst Progress = ({\n  ariaLabel = 'progress',\n  className = undefined,\n  color = 'info',\n  disableAnimation = false,\n  disableFinishedState = false,\n  format = defaultFormat,\n  indeterminate = false,\n  label = undefined,\n  percent,\n  showValueLabel = false,\n  size = 'md',\n  testId = undefined,\n}: ProgressProps) => {\n  // used to disable animation on initial render cycle\n  const isInitialRenderCycle = useIsInitialRenderCycle();\n\n  // Apply finished state if percent is 100 or more and not disabled by disableFinishedState\n  const isFinished = percent >= 100 && !disableFinishedState;\n\n  // handle special states\n  let progressColor: VariantProps['color'] = color;\n  if (isFinished) {\n    progressColor = 'success';\n  }\n\n  const variants = progressVariants({ color: progressColor });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  const value = format(percent);\n\n  return (\n    <HeroProgress\n      aria-label={ariaLabel}\n      classNames={classNames}\n      data-testid={testId}\n      disableAnimation={isInitialRenderCycle || disableAnimation}\n      isIndeterminate={indeterminate}\n      label={label}\n      showValueLabel={showValueLabel}\n      size={size}\n      value={percent || 0}\n      valueLabel={!!percent && value}\n    />\n  );\n};\n\nexport default Progress;\n","import Progress, { progressVariants } from './Progress';\n\nexport type { ProgressProps } from './Progress';\n\nexport { Progress, progressVariants };\n\nexport default Progress;\n"]}

package/dist/{chunk-AZ7VMRHX.cjs → chunk-RZGLEDWN.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkOLI32URUcjs = require('./chunk-OLI32URU.cjs');
+var _chunk7ZIK4LWCcjs = require('./chunk-7ZIK4LWC.cjs');
 
 
 var _chunkAHEA4IJVcjs = require('./chunk-AHEA4IJV.cjs');
@@ -83,7 +83,7 @@ var ProgressCircular = ({
   color = "info",
   strokeWidth: strokeWidthProp = void 0
 }) => {
-  const isInitialRenderCycle = _chunkOLI32URUcjs.useIsInitialRenderCycle.call(void 0, );
+  const isInitialRenderCycle = _chunk7ZIK4LWCcjs.useIsInitialRenderCycle.call(void 0, );
   const isFinished = !hasError && percent >= 100 && !disableFinishedState;
   const variants = progressCircularVariants({
     color,
@@ -142,4 +142,4 @@ var ProgressCircular_default2 = ProgressCircular_default;
 
 
 exports.progressCircularVariants = progressCircularVariants; exports.ProgressCircular_default = ProgressCircular_default; exports.ProgressCircular_default2 = ProgressCircular_default2;
-//# sourceMappingURL=chunk-AZ7VMRHX.cjs.map
+//# sourceMappingURL=chunk-RZGLEDWN.cjs.map

package/dist/{chunk-AZ7VMRHX.cjs.map → chunk-RZGLEDWN.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-AZ7VMRHX.cjs","../src/ProgressCircular/ProgressCircular.tsx","../src/ProgressCircular/index.ts"],"names":["ProgressCircular_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACHA,oCAAiC;AAEjC,4CAAyD;AACzD,sCAAiE;AAEjE,oDAAyC;AAmJ7B,+CAAA;AA/IL,IAAM,yBAAA,EAA2B,4BAAA;AAAG,EACzC,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,SAAA,EAAW,EAAA;AAAA;AAAA,IAEX,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,GAAA,EAAK,EAAA;AAAA;AAAA,IAEL,UAAA,EAAY,EAAA;AAAA;AAAA,IAEZ,KAAA,EAAO,oBAAA;AAAA;AAAA,IAEP,KAAA,EAAO;AAAA,EACT,CAAA;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO,8CAAA;AAAA,MACL,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IAAA,CAAA,EAEG,uBAAA,CAA6B,QAAA,CAAS,KAAA,CAAA;AAAA,IAE3C,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF,CAAC,CAAA;AA6BD,IAAM,cAAA,EAAgB,CAAC,QAAA,EAAU,CAAA,EAAA,GAAM;AACrC,EAAA,OAAO,CAAA,EAAA;AACT;AAKM;AACJ,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACO,EAAA;AACC,EAAA;AACR,EAAA;AAC2B;AAErB,EAAA;AAGA,EAAA;AAEA,EAAA;AACJ,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACD,EAAA;AACK,EAAA;AAGF,EAAA;AAEA,EAAA;AAEC,EAAA;AACH,IAAA;AACE,MAAA;AACE,QAAA;AACA,QAAA;AACF,MAAA;AACE,QAAA;AACA,QAAA;AACF,MAAA;AACE,QAAA;AACA,QAAA;AACJ,IAAA;AACF,EAAA;AAGI,EAAA;AACA,EAAA;AACF,IAAA;AACA,IAAA;AACF,EAAA;AACE,IAAA;AACA,IAAA;AACF,EAAA;AAGM,EAAA;AACJ,IAAA;AACA,EAAA;AAKA,EAAA;AAAC,IAAA;AAAA,IAAA;AACC,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AAEA,MAAA;AACA,MAAA;AAAY,IAAA;AACd,EAAA;AAEJ;AAEO;ADjDG;AACA;AElIHA;AFoIG;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-AZ7VMRHX.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { CircularProgressProps as HeroCircularProgressProps } from '@heroui/progress';\nimport type { ReactNode } from 'react';\n\nimport { FaCheck, FaTimes } from 'react-icons/fa';\n\nimport { CircularProgress as HeroCircularProgress } from '@heroui/progress';\nimport { circularProgress as heroCircularProgressVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\nexport const progressCircularVariants = tv({\n  slots: {\n    // wrapper around the whole component\n    base: '',\n    // indicator of the circle (finished part)\n    indicator: '',\n    // label next to the svgWrapper\n    label: '',\n    // wrapper for the circle\n    svg: '',\n    // wrapper around progress svg and value span\n    svgWrapper: '',\n    // track of the circle (not finished part)\n    track: 'stroke-default-300',\n    // outer span next to the svg\n    value: '',\n  },\n  variants: {\n    color: {\n      info: {\n        svg: 'text-info',\n      },\n      // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n      ...heroCircularProgressVariants.variants.color,\n    },\n    hasError: {\n      true: {\n        svg: 'text-danger',\n      },\n    },\n    isFinished: {\n      true: {\n        svg: 'text-success',\n      },\n    },\n    size: {\n      xs: {\n        svg: 'h-10 w-10',\n        value: 'text-[0.6rem]',\n      },\n      sm: {\n        svg: 'h-12 w-12',\n        value: 'text-xs',\n      },\n      md: {\n        svg: 'h-16 w-16',\n        value: 'text-md',\n      },\n      lg: {\n        svg: 'h-20 w-20',\n        value: 'text-lg',\n      },\n      xl: {\n        svg: 'h-24 w-24',\n        value: 'text-xl',\n      },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof progressCircularVariants>;\ntype ClassName = TVClassName<typeof progressCircularVariants>;\n\nexport interface ProgressCircularProps extends VariantProps {\n  /** sets HTML aria-label attribute */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** color options */\n  color?: VariantProps['color'];\n  /** disables all animations */\n  disableAnimation?: boolean;\n  /** disables special finished state (checkmark icon and success color) */\n  disableFinishedState?: boolean;\n  /** formats the display value of the progress in the center */\n  format?: (percent?: number) => ReactNode;\n  /** enables error version */\n  hasError?: boolean;\n  /** percentage / progress of the circular progress bar */\n  percent: number;\n  /** size options */\n  size?: VariantProps['size'];\n  /** stroke width of the circular progress bar */\n  strokeWidth?: number;\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => {\n  return `${percent}%`;\n};\n\n/**\n * ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)\n */\nconst ProgressCircular = ({\n  ariaLabel = 'progress',\n  className = undefined,\n  format = defaultFormat,\n  hasError = false,\n  percent,\n  disableAnimation = false,\n  disableFinishedState = false,\n  size = 'md',\n  color = 'info',\n  strokeWidth: strokeWidthProp = undefined,\n}: ProgressCircularProps) => {\n  // used to disable animation on initial render cycle\n  const isInitialRenderCycle = useIsInitialRenderCycle();\n\n  // Apply finished state if percent is 100 or more and not disabled by disableFinishedState\n  const isFinished = !hasError && percent >= 100 && !disableFinishedState;\n\n  const variants = progressCircularVariants({\n    color,\n    hasError,\n    isFinished,\n    size,\n  });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // format value\n  let value = format(percent);\n\n  let strokeWidth = strokeWidthProp;\n  // set strokeWidth based on size prop when no strokeWidth provided\n  if (!strokeWidth) {\n    switch (size) {\n      case 'xs':\n        strokeWidth = 2;\n        break;\n      case 'sm':\n        strokeWidth = 1.8;\n        break;\n      default:\n        strokeWidth = 1.6;\n        break;\n    }\n  }\n\n  // handle special states\n  let progressColor: VariantProps['color'] = color;\n  if (hasError) {\n    progressColor = 'danger';\n    value = <FaTimes className=\"text-danger\" />;\n  } else if (isFinished) {\n    progressColor = 'success';\n    value = <FaCheck className=\"text-success\" />;\n  }\n\n  // pass only HeroUI colors as props\n  const heroUiColor = Object.keys(\n    heroCircularProgressVariants.variants.color,\n  ).includes(color)\n    ? (progressColor as HeroCircularProgressProps['color'])\n    : undefined;\n\n  return (\n    <HeroCircularProgress\n      showValueLabel\n      aria-label={ariaLabel}\n      classNames={classNames}\n      color={heroUiColor}\n      disableAnimation={isInitialRenderCycle || disableAnimation}\n      strokeWidth={strokeWidth}\n      // INFO: we do NOT use spinner animation when no percent provided\n      value={percent || 0}\n      valueLabel={value}\n    />\n  );\n};\n\nexport default ProgressCircular;\n","import ProgressCircular, { progressCircularVariants } from './ProgressCircular';\n\nexport type { ProgressCircularProps } from './ProgressCircular';\n\nexport { ProgressCircular, progressCircularVariants };\n\nexport default ProgressCircular;\n"]}
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-RZGLEDWN.cjs","../src/ProgressCircular/ProgressCircular.tsx","../src/ProgressCircular/index.ts"],"names":["ProgressCircular_default"],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACHA,oCAAiC;AAEjC,4CAAyD;AACzD,sCAAiE;AAEjE,oDAAyC;AAmJ7B,+CAAA;AA/IL,IAAM,yBAAA,EAA2B,4BAAA;AAAG,EACzC,KAAA,EAAO;AAAA;AAAA,IAEL,IAAA,EAAM,EAAA;AAAA;AAAA,IAEN,SAAA,EAAW,EAAA;AAAA;AAAA,IAEX,KAAA,EAAO,EAAA;AAAA;AAAA,IAEP,GAAA,EAAK,EAAA;AAAA;AAAA,IAEL,UAAA,EAAY,EAAA;AAAA;AAAA,IAEZ,KAAA,EAAO,oBAAA;AAAA;AAAA,IAEP,KAAA,EAAO;AAAA,EACT,CAAA;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO,8CAAA;AAAA,MACL,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IAAA,CAAA,EAEG,uBAAA,CAA6B,QAAA,CAAS,KAAA,CAAA;AAAA,IAE3C,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,QACJ,GAAA,EAAK;AAAA,MACP;AAAA,IACF,CAAA;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT,CAAA;AAAA,MACA,EAAA,EAAI;AAAA,QACF,GAAA,EAAK,WAAA;AAAA,QACL,KAAA,EAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF,CAAC,CAAA;AA6BD,IAAM,cAAA,EAAgB,CAAC,QAAA,EAAU,CAAA,EAAA,GAAM;AACrC,EAAA,OAAO,CAAA,EAAA;AACT;AAKM;AACJ,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACO,EAAA;AACC,EAAA;AACR,EAAA;AAC2B;AAErB,EAAA;AAGA,EAAA;AAEA,EAAA;AACJ,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACD,EAAA;AACK,EAAA;AAGF,EAAA;AAEA,EAAA;AAEC,EAAA;AACH,IAAA;AACE,MAAA;AACE,QAAA;AACA,QAAA;AACF,MAAA;AACE,QAAA;AACA,QAAA;AACF,MAAA;AACE,QAAA;AACA,QAAA;AACJ,IAAA;AACF,EAAA;AAGI,EAAA;AACA,EAAA;AACF,IAAA;AACA,IAAA;AACF,EAAA;AACE,IAAA;AACA,IAAA;AACF,EAAA;AAGM,EAAA;AACJ,IAAA;AACA,EAAA;AAKA,EAAA;AAAC,IAAA;AAAA,IAAA;AACC,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AAEA,MAAA;AACA,MAAA;AAAY,IAAA;AACd,EAAA;AAEJ;AAEO;ADjDG;AACA;AElIHA;AFoIG;AACA;AACA;AACA;AACA;AACA","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-RZGLEDWN.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { CircularProgressProps as HeroCircularProgressProps } from '@heroui/progress';\nimport type { ReactNode } from 'react';\n\nimport { FaCheck, FaTimes } from 'react-icons/fa';\n\nimport { CircularProgress as HeroCircularProgress } from '@heroui/progress';\nimport { circularProgress as heroCircularProgressVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport { useIsInitialRenderCycle } from '../hooks';\n\nexport const progressCircularVariants = tv({\n  slots: {\n    // wrapper around the whole component\n    base: '',\n    // indicator of the circle (finished part)\n    indicator: '',\n    // label next to the svgWrapper\n    label: '',\n    // wrapper for the circle\n    svg: '',\n    // wrapper around progress svg and value span\n    svgWrapper: '',\n    // track of the circle (not finished part)\n    track: 'stroke-default-300',\n    // outer span next to the svg\n    value: '',\n  },\n  variants: {\n    color: {\n      info: {\n        svg: 'text-info',\n      },\n      // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/progress.ts\n      ...heroCircularProgressVariants.variants.color,\n    },\n    hasError: {\n      true: {\n        svg: 'text-danger',\n      },\n    },\n    isFinished: {\n      true: {\n        svg: 'text-success',\n      },\n    },\n    size: {\n      xs: {\n        svg: 'h-10 w-10',\n        value: 'text-[0.6rem]',\n      },\n      sm: {\n        svg: 'h-12 w-12',\n        value: 'text-xs',\n      },\n      md: {\n        svg: 'h-16 w-16',\n        value: 'text-md',\n      },\n      lg: {\n        svg: 'h-20 w-20',\n        value: 'text-lg',\n      },\n      xl: {\n        svg: 'h-24 w-24',\n        value: 'text-xl',\n      },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof progressCircularVariants>;\ntype ClassName = TVClassName<typeof progressCircularVariants>;\n\nexport interface ProgressCircularProps extends VariantProps {\n  /** sets HTML aria-label attribute */\n  ariaLabel?: string;\n  /** CSS class name */\n  className?: ClassName;\n  /** color options */\n  color?: VariantProps['color'];\n  /** disables all animations */\n  disableAnimation?: boolean;\n  /** disables special finished state (checkmark icon and success color) */\n  disableFinishedState?: boolean;\n  /** formats the display value of the progress in the center */\n  format?: (percent?: number) => ReactNode;\n  /** enables error version */\n  hasError?: boolean;\n  /** percentage / progress of the circular progress bar */\n  percent: number;\n  /** size options */\n  size?: VariantProps['size'];\n  /** stroke width of the circular progress bar */\n  strokeWidth?: number;\n}\n\n/** formats percent with percent sign */\nconst defaultFormat = (percent = 0) => {\n  return `${percent}%`;\n};\n\n/**\n * ProgressCircular component based on [HeroUI CircularProgress](https://www.heroui.com/docs/components/circular-progress)\n */\nconst ProgressCircular = ({\n  ariaLabel = 'progress',\n  className = undefined,\n  format = defaultFormat,\n  hasError = false,\n  percent,\n  disableAnimation = false,\n  disableFinishedState = false,\n  size = 'md',\n  color = 'info',\n  strokeWidth: strokeWidthProp = undefined,\n}: ProgressCircularProps) => {\n  // used to disable animation on initial render cycle\n  const isInitialRenderCycle = useIsInitialRenderCycle();\n\n  // Apply finished state if percent is 100 or more and not disabled by disableFinishedState\n  const isFinished = !hasError && percent >= 100 && !disableFinishedState;\n\n  const variants = progressCircularVariants({\n    color,\n    hasError,\n    isFinished,\n    size,\n  });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  // format value\n  let value = format(percent);\n\n  let strokeWidth = strokeWidthProp;\n  // set strokeWidth based on size prop when no strokeWidth provided\n  if (!strokeWidth) {\n    switch (size) {\n      case 'xs':\n        strokeWidth = 2;\n        break;\n      case 'sm':\n        strokeWidth = 1.8;\n        break;\n      default:\n        strokeWidth = 1.6;\n        break;\n    }\n  }\n\n  // handle special states\n  let progressColor: VariantProps['color'] = color;\n  if (hasError) {\n    progressColor = 'danger';\n    value = <FaTimes className=\"text-danger\" />;\n  } else if (isFinished) {\n    progressColor = 'success';\n    value = <FaCheck className=\"text-success\" />;\n  }\n\n  // pass only HeroUI colors as props\n  const heroUiColor = Object.keys(\n    heroCircularProgressVariants.variants.color,\n  ).includes(color)\n    ? (progressColor as HeroCircularProgressProps['color'])\n    : undefined;\n\n  return (\n    <HeroCircularProgress\n      showValueLabel\n      aria-label={ariaLabel}\n      classNames={classNames}\n      color={heroUiColor}\n      disableAnimation={isInitialRenderCycle || disableAnimation}\n      strokeWidth={strokeWidth}\n      // INFO: we do NOT use spinner animation when no percent provided\n      value={percent || 0}\n      valueLabel={value}\n    />\n  );\n};\n\nexport default ProgressCircular;\n","import ProgressCircular, { progressCircularVariants } from './ProgressCircular';\n\nexport type { ProgressCircularProps } from './ProgressCircular';\n\nexport { ProgressCircular, progressCircularVariants };\n\nexport default ProgressCircular;\n"]}

package/dist/{chunk-B3XKBNXD.js → chunk-VTSVKRA7.js}

@@ -80,4 +80,4 @@ export {
   useIsInitialRenderCycle,
   useLocalStorage
 };
-//# sourceMappingURL=chunk-B3XKBNXD.js.map
+//# sourceMappingURL=chunk-VTSVKRA7.js.map

package/dist/chunk-VTSVKRA7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useDebounce.ts","../src/hooks/useIsInitialRenderCycle.ts","../src/hooks/useLocalStorage.ts"],"sourcesContent":["/* eslint-disable import-x/prefer-default-export */\n\nimport { useEffect, useState } from 'react';\n\nexport const useDebounce = <Value>(value: Value, delay: number) => {\n  // State and setters for debounced value\n  const [debouncedValue, setDebouncedValue] = useState(value);\n  useEffect(\n    () => {\n      // Update debounced value after delay\n      const handler = setTimeout(() => {\n        setDebouncedValue(value);\n      }, delay);\n      // Cancel the timeout if value changes (also on delay change or unmount)\n      // This is how we prevent debounced value from updating if value is changed ...\n      // .. within the delay period. Timeout gets cleared and restarted.\n      return () => {\n        clearTimeout(handler);\n      };\n    },\n    [value, delay], // Only re-call effect if value or delay changes\n  );\n  return debouncedValue;\n};\n","/* eslint-disable import/prefer-default-export */\n\nimport { useEffect, useRef } from 'react';\n\n/**\n * A hook that returns true on initial render and false afterward.\n *\n * @returns {boolean} - True on initial render, false afterward\n */\nexport const useIsInitialRenderCycle = (): boolean => {\n  // Use ref to avoid re-renders\n  const isInitialRender = useRef(true);\n\n  // Update ref after first render\n  useEffect(() => {\n    // Set to false after component mounts\n    isInitialRender.current = false;\n\n    // No cleanup needed for this effect\n  }, []);\n\n  return isInitialRender.current;\n};\n","/* eslint-disable import/prefer-default-export */\n\nimport type { Dispatch, SetStateAction } from 'react';\n\nimport { useEffect, useState } from 'react';\n\nexport const useLocalStorage = <T>(\n  key: string,\n  initialValue: T | (() => T),\n): [T, Dispatch<SetStateAction<T>>] => {\n  // Get from local storage then\n  // parse stored json or return initialValue\n  const readValue = () => {\n    // Prevent build error \"window is undefined\" but keep keep working\n    if (typeof window === 'undefined') {\n      return initialValue;\n    }\n\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? JSON.parse(item) : initialValue;\n    } catch (error) {\n      console.warn(`Error reading localStorage key “${key}”:`, error);\n      return initialValue;\n    }\n  };\n\n  // State to store our value\n  // Pass initial state function to useState so logic is only executed once\n  const [storedValue, setStoredValue] = useState<T>(readValue);\n\n  // Return a wrapped version of useState's setter function that ...\n  // ... persists the new value to localStorage.\n  const setValue: Dispatch<SetStateAction<T>> = (value) => {\n    // Prevent build error \"window is undefined\" but keeps working\n    if (typeof window === 'undefined') {\n      console.warn(\n        `Tried setting localStorage key “${key}” even though environment is not a client`,\n      );\n    }\n\n    try {\n      // Allow value to be a function so we have the same API as useState\n      const newValue = value instanceof Function ? value(storedValue) : value;\n\n      // Save to local storage\n      window.localStorage.setItem(key, JSON.stringify(newValue));\n\n      // Save state\n      setStoredValue(newValue);\n\n      // We dispatch a custom event so every useLocalStorage hook are notified\n      window.dispatchEvent(new Event('local-storage'));\n    } catch (error) {\n      console.warn(`Error setting localStorage key “${key}”:`, error);\n    }\n  };\n\n  useEffect(() => {\n    setStoredValue(readValue());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const handleStorageChange = () => {\n      setStoredValue(readValue());\n    };\n\n    // this only works for other documents, not the current one\n    window.addEventListener('storage', handleStorageChange);\n\n    // this is a custom event, triggered in writeValueToLocalStorage\n    window.addEventListener('local-storage', handleStorageChange);\n\n    return () => {\n      window.removeEventListener('storage', handleStorageChange);\n      window.removeEventListener('local-storage', handleStorageChange);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return [storedValue, setValue];\n};\n"],"mappings":";AAEA,SAAS,WAAW,gBAAgB;AAE7B,IAAM,cAAc,CAAQ,OAAc,UAAkB;AAEjE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D;AAAA,IACE,MAAM;AAEJ,YAAM,UAAU,WAAW,MAAM;AAC/B,0BAAkB,KAAK;AAAA,MACzB,GAAG,KAAK;AAIR,aAAO,MAAM;AACX,qBAAa,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC,OAAO,KAAK;AAAA;AAAA,EACf;AACA,SAAO;AACT;;;ACrBA,SAAS,aAAAA,YAAW,cAAc;AAO3B,IAAM,0BAA0B,MAAe;AAEpD,QAAM,kBAAkB,OAAO,IAAI;AAGnC,EAAAA,WAAU,MAAM;AAEd,oBAAgB,UAAU;AAAA,EAG5B,GAAG,CAAC,CAAC;AAEL,SAAO,gBAAgB;AACzB;;;AClBA,SAAS,aAAAC,YAAW,YAAAC,iBAAgB;AAE7B,IAAM,kBAAkB,CAC7B,KACA,iBACqC;AAGrC,QAAM,YAAY,MAAM;AAEtB,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AAEA,QAAI;AACF,YAAM,OAAO,OAAO,aAAa,QAAQ,GAAG;AAC5C,aAAO,OAAO,KAAK,MAAM,IAAI,IAAI;AAAA,IACnC,SAAS,OAAO;AACd,cAAQ,KAAK,wCAAmC,GAAG,WAAM,KAAK;AAC9D,aAAO;AAAA,IACT;AAAA,EACF;AAIA,QAAM,CAAC,aAAa,cAAc,IAAIA,UAAY,SAAS;AAI3D,QAAM,WAAwC,CAAC,UAAU;AAEvD,QAAI,OAAO,WAAW,aAAa;AACjC,cAAQ;AAAA,QACN,wCAAmC,GAAG;AAAA,MACxC;AAAA,IACF;AAEA,QAAI;AAEF,YAAM,WAAW,iBAAiB,WAAW,MAAM,WAAW,IAAI;AAGlE,aAAO,aAAa,QAAQ,KAAK,KAAK,UAAU,QAAQ,CAAC;AAGzD,qBAAe,QAAQ;AAGvB,aAAO,cAAc,IAAI,MAAM,eAAe,CAAC;AAAA,IACjD,SAAS,OAAO;AACd,cAAQ,KAAK,wCAAmC,GAAG,WAAM,KAAK;AAAA,IAChE;AAAA,EACF;AAEA,EAAAD,WAAU,MAAM;AACd,mBAAe,UAAU,CAAC;AAAA,EAE5B,GAAG,CAAC,CAAC;AAEL,EAAAA,WAAU,MAAM;AACd,UAAM,sBAAsB,MAAM;AAChC,qBAAe,UAAU,CAAC;AAAA,IAC5B;AAGA,WAAO,iBAAiB,WAAW,mBAAmB;AAGtD,WAAO,iBAAiB,iBAAiB,mBAAmB;AAE5D,WAAO,MAAM;AACX,aAAO,oBAAoB,WAAW,mBAAmB;AACzD,aAAO,oBAAoB,iBAAiB,mBAAmB;AAAA,IACjE;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,aAAa,QAAQ;AAC/B;","names":["useEffect","useEffect","useState"]}

package/dist/hooks/index.cjs

@@ -2,11 +2,11 @@
 
 
 
-var _chunkOLI32URUcjs = require('../chunk-OLI32URU.cjs');
+var _chunk7ZIK4LWCcjs = require('../chunk-7ZIK4LWC.cjs');
 require('../chunk-AHEA4IJV.cjs');
 
 
 
 
-exports.useDebounce = _chunkOLI32URUcjs.useDebounce; exports.useIsInitialRenderCycle = _chunkOLI32URUcjs.useIsInitialRenderCycle; exports.useLocalStorage = _chunkOLI32URUcjs.useLocalStorage;
+exports.useDebounce = _chunk7ZIK4LWCcjs.useDebounce; exports.useIsInitialRenderCycle = _chunk7ZIK4LWCcjs.useIsInitialRenderCycle; exports.useLocalStorage = _chunk7ZIK4LWCcjs.useLocalStorage;
 //# sourceMappingURL=index.cjs.map

package/dist/hooks/index.js

@@ -2,7 +2,7 @@ import {
   useDebounce,
   useIsInitialRenderCycle,
   useLocalStorage
-} from "../chunk-B3XKBNXD.js";
+} from "../chunk-VTSVKRA7.js";
 import "../chunk-OAIRL2FN.js";
 export {
   useDebounce,

package/dist/index.cjs

@@ -1,16 +1,16 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkIY2NXW6Xcjs = require('./chunk-IY2NXW6X.cjs');
+var _chunkKM3PZ3GHcjs = require('./chunk-KM3PZ3GH.cjs');
 
 
 
-var _chunkAZ7VMRHXcjs = require('./chunk-AZ7VMRHX.cjs');
+var _chunkRZGLEDWNcjs = require('./chunk-RZGLEDWN.cjs');
 
 
 
 
-var _chunkOLI32URUcjs = require('./chunk-OLI32URU.cjs');
+var _chunk7ZIK4LWCcjs = require('./chunk-7ZIK4LWC.cjs');
 
 
 
@@ -131,5 +131,5 @@ require('./chunk-AHEA4IJV.cjs');
 
 
 
-exports.Accordion = _chunkPF4VI6L7cjs.Accordion_default; exports.Alert = _chunkUECUQP2Bcjs.Alert_default; exports.Avatar = _chunk77J7NZYBcjs.Avatar_default; exports.AvatarGroup = _chunkS4O4KDC3cjs.AvatarGroup_default; exports.Badge = _chunkHG7AE6Q2cjs.Badge_default; exports.Breadcrumb = _chunkIBX6A72Pcjs.Breadcrumb_default; exports.Button = _chunkKB6PZSJ5cjs.Button_default; exports.ButtonGroup = _chunkY3RSI2KVcjs.ButtonGroup_default; exports.Card = _chunkZ363QVXWcjs.Card_default; exports.Drawer = _chunkOLU26V56cjs.Drawer_default; exports.Json = _chunkERSNLQGGcjs.Json_default; exports.Label = _chunkBPBEZCSPcjs.Label_default; exports.Menu = _chunkC43BKEAScjs.Menu_default; exports.Modal = _chunkHPZBCSP3cjs.Modal_default; exports.Popover = _chunkYW4S32XVcjs.Popover_default; exports.Progress = _chunkIY2NXW6Xcjs.Progress_default; exports.ProgressCircular = _chunkAZ7VMRHXcjs.ProgressCircular_default; exports.Table = _chunkTFRAQ6OQcjs.Table_default; exports.Tabs = _chunkG3YTOGEGcjs.Tabs_default; exports.Toast = _chunkLX5LJN3Icjs.Toast; exports.ToastProvider = _chunkLX5LJN3Icjs.ToastProvider_default; exports.Tooltip = _chunkJ2LI4ONScjs.Tooltip_default; exports.accordionVariants = _chunkPF4VI6L7cjs.accordionVariants; exports.addToast = _chunkLX5LJN3Icjs.addToast; exports.alertVariants = _chunkUECUQP2Bcjs.alertVariants; exports.breadcrumbVariants = _chunkIBX6A72Pcjs.breadcrumbVariants; exports.buttonVariants = _chunkKB6PZSJ5cjs.buttonVariants; exports.cardVariants = _chunkZ363QVXWcjs.cardVariants; exports.drawerBackdrops = _chunkOLU26V56cjs.drawerBackdrops; exports.drawerPlacements = _chunkOLU26V56cjs.drawerPlacements; exports.drawerRadii = _chunkOLU26V56cjs.drawerRadii; exports.drawerSizes = _chunkOLU26V56cjs.drawerSizes; exports.drawerVariants = _chunkOLU26V56cjs.drawerVariants; exports.labelVariants = _chunkBPBEZCSPcjs.labelVariants; exports.modalVariants = _chunkHPZBCSP3cjs.modalVariants; exports.progressCircularVariants = _chunkAZ7VMRHXcjs.progressCircularVariants; exports.progressVariants = _chunkIY2NXW6Xcjs.progressVariants; exports.tableVariants = _chunkTFRAQ6OQcjs.tableVariants; exports.tabsVariants = _chunkG3YTOGEGcjs.tabsVariants; exports.toastVariants = _chunkLX5LJN3Icjs.toastVariants; exports.useDebounce = _chunkOLI32URUcjs.useDebounce; exports.useIsInitialRenderCycle = _chunkOLI32URUcjs.useIsInitialRenderCycle; exports.useLocalStorage = _chunkOLI32URUcjs.useLocalStorage;
+exports.Accordion = _chunkPF4VI6L7cjs.Accordion_default; exports.Alert = _chunkUECUQP2Bcjs.Alert_default; exports.Avatar = _chunk77J7NZYBcjs.Avatar_default; exports.AvatarGroup = _chunkS4O4KDC3cjs.AvatarGroup_default; exports.Badge = _chunkHG7AE6Q2cjs.Badge_default; exports.Breadcrumb = _chunkIBX6A72Pcjs.Breadcrumb_default; exports.Button = _chunkKB6PZSJ5cjs.Button_default; exports.ButtonGroup = _chunkY3RSI2KVcjs.ButtonGroup_default; exports.Card = _chunkZ363QVXWcjs.Card_default; exports.Drawer = _chunkOLU26V56cjs.Drawer_default; exports.Json = _chunkERSNLQGGcjs.Json_default; exports.Label = _chunkBPBEZCSPcjs.Label_default; exports.Menu = _chunkC43BKEAScjs.Menu_default; exports.Modal = _chunkHPZBCSP3cjs.Modal_default; exports.Popover = _chunkYW4S32XVcjs.Popover_default; exports.Progress = _chunkKM3PZ3GHcjs.Progress_default; exports.ProgressCircular = _chunkRZGLEDWNcjs.ProgressCircular_default; exports.Table = _chunkTFRAQ6OQcjs.Table_default; exports.Tabs = _chunkG3YTOGEGcjs.Tabs_default; exports.Toast = _chunkLX5LJN3Icjs.Toast; exports.ToastProvider = _chunkLX5LJN3Icjs.ToastProvider_default; exports.Tooltip = _chunkJ2LI4ONScjs.Tooltip_default; exports.accordionVariants = _chunkPF4VI6L7cjs.accordionVariants; exports.addToast = _chunkLX5LJN3Icjs.addToast; exports.alertVariants = _chunkUECUQP2Bcjs.alertVariants; exports.breadcrumbVariants = _chunkIBX6A72Pcjs.breadcrumbVariants; exports.buttonVariants = _chunkKB6PZSJ5cjs.buttonVariants; exports.cardVariants = _chunkZ363QVXWcjs.cardVariants; exports.drawerBackdrops = _chunkOLU26V56cjs.drawerBackdrops; exports.drawerPlacements = _chunkOLU26V56cjs.drawerPlacements; exports.drawerRadii = _chunkOLU26V56cjs.drawerRadii; exports.drawerSizes = _chunkOLU26V56cjs.drawerSizes; exports.drawerVariants = _chunkOLU26V56cjs.drawerVariants; exports.labelVariants = _chunkBPBEZCSPcjs.labelVariants; exports.modalVariants = _chunkHPZBCSP3cjs.modalVariants; exports.progressCircularVariants = _chunkRZGLEDWNcjs.progressCircularVariants; exports.progressVariants = _chunkKM3PZ3GHcjs.progressVariants; exports.tableVariants = _chunkTFRAQ6OQcjs.tableVariants; exports.tabsVariants = _chunkG3YTOGEGcjs.tabsVariants; exports.toastVariants = _chunkLX5LJN3Icjs.toastVariants; exports.useDebounce = _chunk7ZIK4LWCcjs.useDebounce; exports.useIsInitialRenderCycle = _chunk7ZIK4LWCcjs.useIsInitialRenderCycle; exports.useLocalStorage = _chunk7ZIK4LWCcjs.useLocalStorage;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,16 +1,16 @@
 import {
   Progress_default,
   progressVariants
-} from "./chunk-TYY3HIYL.js";
+} from "./chunk-EYUII2LV.js";
 import {
   ProgressCircular_default,
   progressCircularVariants
-} from "./chunk-2O3IUQR4.js";
+} from "./chunk-FFNMGR72.js";
 import {
   useDebounce,
   useIsInitialRenderCycle,
   useLocalStorage
-} from "./chunk-B3XKBNXD.js";
+} from "./chunk-VTSVKRA7.js";
 import {
   Table_default,
   tableVariants

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fuf-stack/pixels",
   "description": "fuf core react component library",
   "author": "Fröhlich ∧ Frei",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/dist/chunk-B3XKBNXD.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hooks/useDebounce.ts","../src/hooks/useIsInitialRenderCycle.ts","../src/hooks/useLocalStorage.ts"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\n\nimport { useEffect, useState } from 'react';\n\nexport const useDebounce = <Value>(value: Value, delay: number) => {\n  // State and setters for debounced value\n  const [debouncedValue, setDebouncedValue] = useState(value);\n  useEffect(\n    () => {\n      // Update debounced value after delay\n      const handler = setTimeout(() => {\n        setDebouncedValue(value);\n      }, delay);\n      // Cancel the timeout if value changes (also on delay change or unmount)\n      // This is how we prevent debounced value from updating if value is changed ...\n      // .. within the delay period. Timeout gets cleared and restarted.\n      return () => {\n        clearTimeout(handler);\n      };\n    },\n    [value, delay], // Only re-call effect if value or delay changes\n  );\n  return debouncedValue;\n};\n","/* eslint-disable import/prefer-default-export */\n\nimport { useEffect, useRef } from 'react';\n\n/**\n * A hook that returns true on initial render and false afterward.\n *\n * @returns {boolean} - True on initial render, false afterward\n */\nexport const useIsInitialRenderCycle = (): boolean => {\n  // Use ref to avoid re-renders\n  const isInitialRender = useRef(true);\n\n  // Update ref after first render\n  useEffect(() => {\n    // Set to false after component mounts\n    isInitialRender.current = false;\n\n    // No cleanup needed for this effect\n  }, []);\n\n  return isInitialRender.current;\n};\n","/* eslint-disable import/prefer-default-export */\n\nimport type { Dispatch, SetStateAction } from 'react';\n\nimport { useEffect, useState } from 'react';\n\nexport const useLocalStorage = <T>(\n  key: string,\n  initialValue: T | (() => T),\n): [T, Dispatch<SetStateAction<T>>] => {\n  // Get from local storage then\n  // parse stored json or return initialValue\n  const readValue = () => {\n    // Prevent build error \"window is undefined\" but keep keep working\n    if (typeof window === 'undefined') {\n      return initialValue;\n    }\n\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? JSON.parse(item) : initialValue;\n    } catch (error) {\n      console.warn(`Error reading localStorage key “${key}”:`, error);\n      return initialValue;\n    }\n  };\n\n  // State to store our value\n  // Pass initial state function to useState so logic is only executed once\n  const [storedValue, setStoredValue] = useState<T>(readValue);\n\n  // Return a wrapped version of useState's setter function that ...\n  // ... persists the new value to localStorage.\n  const setValue: Dispatch<SetStateAction<T>> = (value) => {\n    // Prevent build error \"window is undefined\" but keeps working\n    if (typeof window === 'undefined') {\n      console.warn(\n        `Tried setting localStorage key “${key}” even though environment is not a client`,\n      );\n    }\n\n    try {\n      // Allow value to be a function so we have the same API as useState\n      const newValue = value instanceof Function ? value(storedValue) : value;\n\n      // Save to local storage\n      window.localStorage.setItem(key, JSON.stringify(newValue));\n\n      // Save state\n      setStoredValue(newValue);\n\n      // We dispatch a custom event so every useLocalStorage hook are notified\n      window.dispatchEvent(new Event('local-storage'));\n    } catch (error) {\n      console.warn(`Error setting localStorage key “${key}”:`, error);\n    }\n  };\n\n  useEffect(() => {\n    setStoredValue(readValue());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const handleStorageChange = () => {\n      setStoredValue(readValue());\n    };\n\n    // this only works for other documents, not the current one\n    window.addEventListener('storage', handleStorageChange);\n\n    // this is a custom event, triggered in writeValueToLocalStorage\n    window.addEventListener('local-storage', handleStorageChange);\n\n    return () => {\n      window.removeEventListener('storage', handleStorageChange);\n      window.removeEventListener('local-storage', handleStorageChange);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return [storedValue, setValue];\n};\n"],"mappings":";AAEA,SAAS,WAAW,gBAAgB;AAE7B,IAAM,cAAc,CAAQ,OAAc,UAAkB;AAEjE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D;AAAA,IACE,MAAM;AAEJ,YAAM,UAAU,WAAW,MAAM;AAC/B,0BAAkB,KAAK;AAAA,MACzB,GAAG,KAAK;AAIR,aAAO,MAAM;AACX,qBAAa,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC,OAAO,KAAK;AAAA;AAAA,EACf;AACA,SAAO;AACT;;;ACrBA,SAAS,aAAAA,YAAW,cAAc;AAO3B,IAAM,0BAA0B,MAAe;AAEpD,QAAM,kBAAkB,OAAO,IAAI;AAGnC,EAAAA,WAAU,MAAM;AAEd,oBAAgB,UAAU;AAAA,EAG5B,GAAG,CAAC,CAAC;AAEL,SAAO,gBAAgB;AACzB;;;AClBA,SAAS,aAAAC,YAAW,YAAAC,iBAAgB;AAE7B,IAAM,kBAAkB,CAC7B,KACA,iBACqC;AAGrC,QAAM,YAAY,MAAM;AAEtB,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AAEA,QAAI;AACF,YAAM,OAAO,OAAO,aAAa,QAAQ,GAAG;AAC5C,aAAO,OAAO,KAAK,MAAM,IAAI,IAAI;AAAA,IACnC,SAAS,OAAO;AACd,cAAQ,KAAK,wCAAmC,GAAG,WAAM,KAAK;AAC9D,aAAO;AAAA,IACT;AAAA,EACF;AAIA,QAAM,CAAC,aAAa,cAAc,IAAIA,UAAY,SAAS;AAI3D,QAAM,WAAwC,CAAC,UAAU;AAEvD,QAAI,OAAO,WAAW,aAAa;AACjC,cAAQ;AAAA,QACN,wCAAmC,GAAG;AAAA,MACxC;AAAA,IACF;AAEA,QAAI;AAEF,YAAM,WAAW,iBAAiB,WAAW,MAAM,WAAW,IAAI;AAGlE,aAAO,aAAa,QAAQ,KAAK,KAAK,UAAU,QAAQ,CAAC;AAGzD,qBAAe,QAAQ;AAGvB,aAAO,cAAc,IAAI,MAAM,eAAe,CAAC;AAAA,IACjD,SAAS,OAAO;AACd,cAAQ,KAAK,wCAAmC,GAAG,WAAM,KAAK;AAAA,IAChE;AAAA,EACF;AAEA,EAAAD,WAAU,MAAM;AACd,mBAAe,UAAU,CAAC;AAAA,EAE5B,GAAG,CAAC,CAAC;AAEL,EAAAA,WAAU,MAAM;AACd,UAAM,sBAAsB,MAAM;AAChC,qBAAe,UAAU,CAAC;AAAA,IAC5B;AAGA,WAAO,iBAAiB,WAAW,mBAAmB;AAGtD,WAAO,iBAAiB,iBAAiB,mBAAmB;AAE5D,WAAO,MAAM;AACX,aAAO,oBAAoB,WAAW,mBAAmB;AACzD,aAAO,oBAAoB,iBAAiB,mBAAmB;AAAA,IACjE;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,aAAa,QAAQ;AAC/B;","names":["useEffect","useEffect","useState"]}

package/dist/chunk-OLI32URU.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-OLI32URU.cjs","../src/hooks/useDebounce.ts","../src/hooks/useIsInitialRenderCycle.ts","../src/hooks/useLocalStorage.ts"],"names":["useEffect","useState"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-OLI32URU.cjs","sourcesContent":[null,"/* eslint-disable import/prefer-default-export */\n\nimport { useEffect, useState } from 'react';\n\nexport const useDebounce = <Value>(value: Value, delay: number) => {\n  // State and setters for debounced value\n  const [debouncedValue, setDebouncedValue] = useState(value);\n  useEffect(\n    () => {\n      // Update debounced value after delay\n      const handler = setTimeout(() => {\n        setDebouncedValue(value);\n      }, delay);\n      // Cancel the timeout if value changes (also on delay change or unmount)\n      // This is how we prevent debounced value from updating if value is changed ...\n      // .. within the delay period. Timeout gets cleared and restarted.\n      return () => {\n        clearTimeout(handler);\n      };\n    },\n    [value, delay], // Only re-call effect if value or delay changes\n  );\n  return debouncedValue;\n};\n","/* eslint-disable import/prefer-default-export */\n\nimport { useEffect, useRef } from 'react';\n\n/**\n * A hook that returns true on initial render and false afterward.\n *\n * @returns {boolean} - True on initial render, false afterward\n */\nexport const useIsInitialRenderCycle = (): boolean => {\n  // Use ref to avoid re-renders\n  const isInitialRender = useRef(true);\n\n  // Update ref after first render\n  useEffect(() => {\n    // Set to false after component mounts\n    isInitialRender.current = false;\n\n    // No cleanup needed for this effect\n  }, []);\n\n  return isInitialRender.current;\n};\n","/* eslint-disable import/prefer-default-export */\n\nimport type { Dispatch, SetStateAction } from 'react';\n\nimport { useEffect, useState } from 'react';\n\nexport const useLocalStorage = <T>(\n  key: string,\n  initialValue: T | (() => T),\n): [T, Dispatch<SetStateAction<T>>] => {\n  // Get from local storage then\n  // parse stored json or return initialValue\n  const readValue = () => {\n    // Prevent build error \"window is undefined\" but keep keep working\n    if (typeof window === 'undefined') {\n      return initialValue;\n    }\n\n    try {\n      const item = window.localStorage.getItem(key);\n      return item ? JSON.parse(item) : initialValue;\n    } catch (error) {\n      console.warn(`Error reading localStorage key “${key}”:`, error);\n      return initialValue;\n    }\n  };\n\n  // State to store our value\n  // Pass initial state function to useState so logic is only executed once\n  const [storedValue, setStoredValue] = useState<T>(readValue);\n\n  // Return a wrapped version of useState's setter function that ...\n  // ... persists the new value to localStorage.\n  const setValue: Dispatch<SetStateAction<T>> = (value) => {\n    // Prevent build error \"window is undefined\" but keeps working\n    if (typeof window === 'undefined') {\n      console.warn(\n        `Tried setting localStorage key “${key}” even though environment is not a client`,\n      );\n    }\n\n    try {\n      // Allow value to be a function so we have the same API as useState\n      const newValue = value instanceof Function ? value(storedValue) : value;\n\n      // Save to local storage\n      window.localStorage.setItem(key, JSON.stringify(newValue));\n\n      // Save state\n      setStoredValue(newValue);\n\n      // We dispatch a custom event so every useLocalStorage hook are notified\n      window.dispatchEvent(new Event('local-storage'));\n    } catch (error) {\n      console.warn(`Error setting localStorage key “${key}”:`, error);\n    }\n  };\n\n  useEffect(() => {\n    setStoredValue(readValue());\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    const handleStorageChange = () => {\n      setStoredValue(readValue());\n    };\n\n    // this only works for other documents, not the current one\n    window.addEventListener('storage', handleStorageChange);\n\n    // this is a custom event, triggered in writeValueToLocalStorage\n    window.addEventListener('local-storage', handleStorageChange);\n\n    return () => {\n      window.removeEventListener('storage', handleStorageChange);\n      window.removeEventListener('local-storage', handleStorageChange);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return [storedValue, setValue];\n};\n"]}