@fuf-stack/pixels 1.4.0 → 1.5.0

package/dist/Button/index.cjs

@@ -2,11 +2,11 @@
 
 
 
-var _chunkZFHOZRR2cjs = require('../chunk-ZFHOZRR2.cjs');
+var _chunkFVQDVD3Ecjs = require('../chunk-FVQDVD3E.cjs');
 require('../chunk-AHEA4IJV.cjs');
 
 
 
 
-exports.Button = _chunkZFHOZRR2cjs.Button_default; exports.buttonVariants = _chunkZFHOZRR2cjs.buttonVariants; exports.default = _chunkZFHOZRR2cjs.Button_default2;
+exports.Button = _chunkFVQDVD3Ecjs.Button_default; exports.buttonVariants = _chunkFVQDVD3Ecjs.buttonVariants; exports.default = _chunkFVQDVD3Ecjs.Button_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Button/index.d.cts

@@ -1,10 +1,9 @@
-import { B as Button } from '../Button-BOaEQrs9.cjs';
-export { a as ButtonProps, b as buttonVariants } from '../Button-BOaEQrs9.cjs';
-import 'react/jsx-runtime';
+import { B as Button } from '../Button-nJ22qVMK.cjs';
+export { a as ButtonProps, b as buttonVariants } from '../Button-nJ22qVMK.cjs';
+import 'react';
 import 'tailwind-variants';
 import '@fuf-stack/pixel-utils';
 import '@heroui/button';
-import 'react';
 
 
 

package/dist/Button/index.d.ts

@@ -1,10 +1,9 @@
-import { B as Button } from '../Button-BOaEQrs9.js';
-export { a as ButtonProps, b as buttonVariants } from '../Button-BOaEQrs9.js';
-import 'react/jsx-runtime';
+import { B as Button } from '../Button-nJ22qVMK.js';
+export { a as ButtonProps, b as buttonVariants } from '../Button-nJ22qVMK.js';
+import 'react';
 import 'tailwind-variants';
 import '@fuf-stack/pixel-utils';
 import '@heroui/button';
-import 'react';
 
 
 

package/dist/Button/index.js

@@ -2,7 +2,7 @@ import {
   Button_default,
   Button_default2,
   buttonVariants
-} from "../chunk-FPR33UFC.js";
+} from "../chunk-2NMIKTA5.js";
 import "../chunk-OAIRL2FN.js";
 export {
   Button_default as Button,

package/dist/{Button-BOaEQrs9.d.cts → Button-nJ22qVMK.d.cts}

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
 import * as tailwind_variants from 'tailwind-variants';
 import { TVProps } from '@fuf-stack/pixel-utils';
 import { ButtonProps as ButtonProps$1 } from '@heroui/button';
-import { ReactNode } from 'react';
 
 declare const buttonVariants: tailwind_variants.TVReturnType<{
     color: {
@@ -235,8 +235,12 @@ interface ButtonProps extends VariantProps {
     loading?: boolean;
     /** optional icon */
     icon?: ReactNode;
+    /** blur event handler */
+    onBlur?: ButtonProps$1['onBlur'];
     /** click event handler */
     onClick?: ButtonProps$1['onPress'];
+    /** focus event handler */
+    onFocus?: ButtonProps$1['onFocus'];
     /** border radius size */
     radius?: VariantProps['radius'];
     /** enable ripple animation effect on click */
@@ -253,6 +257,6 @@ interface ButtonProps extends VariantProps {
 /**
  * Button component based on [HeroUI Button](https://www.heroui.com//docs/components/button)
  */
-declare const Button: ({ ariaLabel, children, className: _className, color, disableAnimation, disabled, icon, loading, onClick, radius, ripple, size, testId, type, variant, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 export { Button as B, type ButtonProps as a, buttonVariants as b };

package/dist/{Button-BOaEQrs9.d.ts → Button-nJ22qVMK.d.ts}

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
 import * as tailwind_variants from 'tailwind-variants';
 import { TVProps } from '@fuf-stack/pixel-utils';
 import { ButtonProps as ButtonProps$1 } from '@heroui/button';
-import { ReactNode } from 'react';
 
 declare const buttonVariants: tailwind_variants.TVReturnType<{
     color: {
@@ -235,8 +235,12 @@ interface ButtonProps extends VariantProps {
     loading?: boolean;
     /** optional icon */
     icon?: ReactNode;
+    /** blur event handler */
+    onBlur?: ButtonProps$1['onBlur'];
     /** click event handler */
     onClick?: ButtonProps$1['onPress'];
+    /** focus event handler */
+    onFocus?: ButtonProps$1['onFocus'];
     /** border radius size */
     radius?: VariantProps['radius'];
     /** enable ripple animation effect on click */
@@ -253,6 +257,6 @@ interface ButtonProps extends VariantProps {
 /**
  * Button component based on [HeroUI Button](https://www.heroui.com//docs/components/button)
  */
-declare const Button: ({ ariaLabel, children, className: _className, color, disableAnimation, disabled, icon, loading, onClick, radius, ripple, size, testId, type, variant, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 export { Button as B, type ButtonProps as a, buttonVariants as b };

package/dist/Json/index.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkVVAZOJQGcjs = require('../chunk-VVAZOJQG.cjs');
-require('../chunk-ZFHOZRR2.cjs');
+var _chunkIBP3GUEAcjs = require('../chunk-IBP3GUEA.cjs');
+require('../chunk-FVQDVD3E.cjs');
 require('../chunk-AHEA4IJV.cjs');
 
 
 
-exports.Json = _chunkVVAZOJQGcjs.Json_default; exports.default = _chunkVVAZOJQGcjs.Json_default2;
+exports.Json = _chunkIBP3GUEAcjs.Json_default; exports.default = _chunkIBP3GUEAcjs.Json_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Json/index.js

@@ -1,8 +1,8 @@
 import {
   Json_default,
   Json_default2
-} from "../chunk-IZM2I62C.js";
-import "../chunk-FPR33UFC.js";
+} from "../chunk-65LUKHJB.js";
+import "../chunk-2NMIKTA5.js";
 import "../chunk-OAIRL2FN.js";
 export {
   Json_default as Json,

package/dist/Progress/index.cjs

@@ -2,12 +2,12 @@
 
 
 
-var _chunkWSVXM7H4cjs = require('../chunk-WSVXM7H4.cjs');
-require('../chunk-SCVJ4C6F.cjs');
+var _chunkZOSD26X7cjs = require('../chunk-ZOSD26X7.cjs');
+require('../chunk-BVZHFHLJ.cjs');
 require('../chunk-AHEA4IJV.cjs');
 
 
 
 
-exports.Progress = _chunkWSVXM7H4cjs.Progress_default; exports.default = _chunkWSVXM7H4cjs.Progress_default2; exports.progressVariants = _chunkWSVXM7H4cjs.progressVariants;
+exports.Progress = _chunkZOSD26X7cjs.Progress_default; exports.default = _chunkZOSD26X7cjs.Progress_default2; exports.progressVariants = _chunkZOSD26X7cjs.progressVariants;
 //# sourceMappingURL=index.cjs.map

package/dist/Progress/index.js

@@ -2,8 +2,8 @@ import {
   Progress_default,
   Progress_default2,
   progressVariants
-} from "../chunk-PENUA26F.js";
-import "../chunk-GGXNWO3B.js";
+} from "../chunk-JIK5JCPT.js";
+import "../chunk-2C53JQ3R.js";
 import "../chunk-OAIRL2FN.js";
 export {
   Progress_default as Progress,

package/dist/ProgressCircular/index.cjs

@@ -2,12 +2,12 @@
 
 
 
-var _chunkPICJQ5IHcjs = require('../chunk-PICJQ5IH.cjs');
-require('../chunk-SCVJ4C6F.cjs');
+var _chunkN7J3ZGJGcjs = require('../chunk-N7J3ZGJG.cjs');
+require('../chunk-BVZHFHLJ.cjs');
 require('../chunk-AHEA4IJV.cjs');
 
 
 
 
-exports.ProgressCircular = _chunkPICJQ5IHcjs.ProgressCircular_default; exports.default = _chunkPICJQ5IHcjs.ProgressCircular_default2; exports.progressCircularVariants = _chunkPICJQ5IHcjs.progressCircularVariants;
+exports.ProgressCircular = _chunkN7J3ZGJGcjs.ProgressCircular_default; exports.default = _chunkN7J3ZGJGcjs.ProgressCircular_default2; exports.progressCircularVariants = _chunkN7J3ZGJGcjs.progressCircularVariants;
 //# sourceMappingURL=index.cjs.map

package/dist/ProgressCircular/index.js

@@ -2,8 +2,8 @@ import {
   ProgressCircular_default,
   ProgressCircular_default2,
   progressCircularVariants
-} from "../chunk-JZNGNJI5.js";
-import "../chunk-GGXNWO3B.js";
+} from "../chunk-NGN5JCSI.js";
+import "../chunk-2C53JQ3R.js";
 import "../chunk-OAIRL2FN.js";
 export {
   ProgressCircular_default as ProgressCircular,

package/dist/{chunk-GGXNWO3B.js → chunk-2C53JQ3R.js}

@@ -1,9 +1,13 @@
 // src/hooks/useDebounce.ts
 import { useEffect, useState } from "react";
-var useDebounce = (value, delay) => {
+var useDebounce = (value, delay, disabled = false) => {
   const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(
     () => {
+      if (disabled) {
+        setDebouncedValue(value);
+        return void 0;
+      }
       const handler = setTimeout(() => {
         setDebouncedValue(value);
       }, delay);
@@ -11,8 +15,8 @@ var useDebounce = (value, delay) => {
         clearTimeout(handler);
       };
     },
-    [value, delay]
-    // Only re-call effect if value or delay changes
+    [value, delay, disabled]
+    // Only re-call effect if value, delay, or disabled changes
   );
   return debouncedValue;
 };
@@ -80,4 +84,4 @@ export {
   useIsInitialRenderCycle,
   useLocalStorage
 };
-//# sourceMappingURL=chunk-GGXNWO3B.js.map
+//# sourceMappingURL=chunk-2C53JQ3R.js.map

package/dist/chunk-2C53JQ3R.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\n/**\n * Hook that debounces a value\n * @param value - The value to debounce\n * @param delay - Delay in milliseconds\n * @param disabled - If true, returns the value immediately without debouncing\n * @returns The debounced value\n */\nexport const useDebounce = <Value>(\n  value: Value,\n  delay: number,\n  disabled = false,\n) => {\n  // State and setters for debounced value\n  const [debouncedValue, setDebouncedValue] = useState(value);\n\n  useEffect(\n    () => {\n      // If disabled, update immediately\n      if (disabled) {\n        setDebouncedValue(value);\n        return undefined;\n      }\n\n      // Update debounced value after delay\n      const handler = setTimeout(() => {\n        setDebouncedValue(value);\n      }, delay);\n\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, disabled], // Only re-call effect if value, delay, or disabled changes\n  );\n\n  return debouncedValue;\n};\n","/* eslint-disable import-x/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-x/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;AAS7B,IAAM,cAAc,CACzB,OACA,OACA,WAAW,UACR;AAEH,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAE1D;AAAA,IACE,MAAM;AAEJ,UAAI,UAAU;AACZ,0BAAkB,KAAK;AACvB,eAAO;AAAA,MACT;AAGA,YAAM,UAAU,WAAW,MAAM;AAC/B,0BAAkB,KAAK;AAAA,MACzB,GAAG,KAAK;AAKR,aAAO,MAAM;AACX,qBAAa,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC,OAAO,OAAO,QAAQ;AAAA;AAAA,EACzB;AAEA,SAAO;AACT;;;ACzCA,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-FPR33UFC.js → chunk-2NMIKTA5.js}

@@ -4,6 +4,7 @@ import {
 } from "./chunk-OAIRL2FN.js";
 
 // src/Button/Button.tsx
+import { forwardRef } from "react";
 import { Button as HeroButton } from "@heroui/button";
 import { button as heroButtonVariants } from "@heroui/theme";
 import { tv } from "@fuf-stack/pixel-utils";
@@ -116,52 +117,60 @@ var buttonVariants = tv({
     }
   ]
 });
-var Button = ({
-  ariaLabel = void 0,
-  children = void 0,
-  className: _className = void 0,
-  color = "default",
-  disableAnimation = false,
-  disabled = false,
-  icon = void 0,
-  loading = false,
-  onClick = void 0,
-  radius = void 0,
-  ripple = false,
-  size = void 0,
-  testId = void 0,
-  type = void 0,
-  variant = "solid"
-}) => {
-  const className = buttonVariants({
-    className: _className,
-    disableAnimation,
-    isDisabled: disabled,
-    color,
-    size,
-    variant,
-    isIconOnly: !!(icon && !children),
-    radius
-  });
-  return /* @__PURE__ */ jsxs2(
-    HeroButton,
-    {
-      "aria-label": ariaLabel,
-      className,
-      "data-testid": testId,
-      disableRipple: disableAnimation || !ripple,
+var Button = forwardRef(
+  ({
+    ariaLabel = void 0,
+    children = void 0,
+    className: _className = void 0,
+    color = "default",
+    disableAnimation = false,
+    disabled = false,
+    icon = void 0,
+    loading = false,
+    onBlur = void 0,
+    onClick = void 0,
+    onFocus = void 0,
+    radius = void 0,
+    ripple = false,
+    size = void 0,
+    testId = void 0,
+    type = void 0,
+    variant = "solid"
+  }, ref) => {
+    const className = buttonVariants({
+      className: _className,
+      disableAnimation,
       isDisabled: disabled,
-      isLoading: loading,
-      onPress: onClick,
-      spinner: /* @__PURE__ */ jsx2(LoadingSpinner_default, {}),
-      type,
-      children: [
-        icon,
-        children
-      ]
-    }
-  );
-};
+      color,
+      size,
+      variant,
+      isIconOnly: !!(icon && !children),
+      radius
+    });
+    return /* @__PURE__ */ jsxs2(
+      HeroButton,
+      {
+        ref,
+        "aria-label": ariaLabel,
+        className,
+        "data-testid": testId,
+        disableRipple: disableAnimation || !ripple,
+        isDisabled: disabled,
+        isLoading: loading,
+        onBlur,
+        onFocus,
+        onPress: onClick,
+        spinner: /* @__PURE__ */ jsx2(LoadingSpinner_default, {}),
+        type,
+        children: [
+          icon,
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
 var Button_default = Button;
 
 // src/Button/index.ts
@@ -172,4 +181,4 @@ export {
   Button_default,
   Button_default2
 };
-//# sourceMappingURL=chunk-FPR33UFC.js.map
+//# sourceMappingURL=chunk-2NMIKTA5.js.map

package/dist/chunk-2NMIKTA5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Button/Button.tsx","../src/Button/subcomponents/LoadingSpinner.tsx","../src/Button/index.ts"],"sourcesContent":["import type { TVProps } from '@fuf-stack/pixel-utils';\nimport type { ButtonProps as HeroButtonProps } from '@heroui/button';\nimport type { ReactNode } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport { Button as HeroButton } from '@heroui/button';\nimport { button as heroButtonVariants } from '@heroui/theme';\n\nimport { tv } from '@fuf-stack/pixel-utils';\n\nimport LoadingSpinner from './subcomponents/LoadingSpinner';\n\nexport const buttonVariants = tv({\n  extend: heroButtonVariants,\n  variants: {\n    color: {\n      ...heroButtonVariants.variants.color,\n      // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/button.ts\n      info: '',\n    },\n    variant: heroButtonVariants.variants.variant,\n    size: heroButtonVariants.variants.size,\n  },\n  compoundVariants: [\n    // white text on solid / shadow success button\n    {\n      color: 'success',\n      variant: 'solid',\n      class: 'text-white',\n    },\n    {\n      color: 'success',\n      variant: 'shadow',\n      class: 'text-white',\n    },\n    // white text on solid / shadow warning button\n    {\n      color: 'warning',\n      variant: 'solid',\n      class: 'text-white',\n    },\n    {\n      color: 'warning',\n      variant: 'shadow',\n      class: 'text-white',\n    },\n    {\n      color: 'info',\n      variant: 'solid',\n      class: 'bg-info text-info-foreground',\n    },\n    {\n      color: 'info',\n      variant: 'shadow',\n      class: 'shadow-info/40 bg-info text-info-foreground shadow-lg',\n    },\n    {\n      color: 'info',\n      variant: 'bordered',\n      class: 'border-medium border-info bg-transparent text-info',\n    },\n    {\n      color: 'info',\n      variant: 'flat',\n      class: 'bg-info/20 text-info-600',\n    },\n    {\n      color: 'info',\n      variant: 'faded',\n      class: 'border-default bg-default-100 text-info',\n    },\n    {\n      color: 'info',\n      variant: 'light',\n      class: 'bg-transparent text-info data-[hover=true]:bg-info-100',\n    },\n    {\n      color: 'info',\n      variant: 'ghost',\n      class:\n        'border-info text-info data-[hover=true]:!bg-info data-[hover=true]:!text-info-foreground',\n    },\n  ],\n});\n\ntype VariantProps = TVProps<typeof buttonVariants>;\n\n/* eslint-disable react/require-default-props -- not working with forwardRef */\nexport interface ButtonProps extends VariantProps {\n  /** sets HTML aria-label attribute */\n  ariaLabel?: string;\n  /** content of the button */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** color of the button */\n  color?: VariantProps['color'];\n  /** disables the button */\n  disabled?: boolean;\n  /** disables all animations */\n  disableAnimation?: boolean;\n  /** shows loading animation */\n  loading?: boolean;\n  /** optional icon */\n  icon?: ReactNode;\n  /** blur event handler */\n  onBlur?: HeroButtonProps['onBlur'];\n  /** click event handler */\n  onClick?: HeroButtonProps['onPress'];\n  /** focus event handler */\n  onFocus?: HeroButtonProps['onFocus'];\n  /** border radius size */\n  radius?: VariantProps['radius'];\n  /** enable ripple animation effect on click */\n  ripple?: boolean;\n  /** size options */\n  size?: VariantProps['size'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** HTML button type attribute */\n  type?: 'button' | 'submit' | 'reset' | undefined;\n  /** visual style variant */\n  variant?: VariantProps['variant'];\n}\n/* eslint-enable react/require-default-props */\n\n/**\n * Button component based on [HeroUI Button](https://www.heroui.com//docs/components/button)\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      ariaLabel = undefined,\n      children = undefined,\n      className: _className = undefined,\n      color = 'default',\n      disableAnimation = false,\n      disabled = false,\n      icon = undefined,\n      loading = false,\n      onBlur = undefined,\n      onClick = undefined,\n      onFocus = undefined,\n      radius = undefined,\n      ripple = false,\n      size = undefined,\n      testId = undefined,\n      type = undefined,\n      variant = 'solid',\n    },\n    ref,\n  ) => {\n    const className = buttonVariants({\n      className: _className,\n      disableAnimation,\n      isDisabled: disabled,\n      color,\n      size,\n      variant,\n      isIconOnly: !!(icon && !children),\n      radius,\n    });\n\n    return (\n      <HeroButton\n        ref={ref}\n        aria-label={ariaLabel}\n        className={className}\n        data-testid={testId}\n        disableRipple={disableAnimation || !ripple}\n        isDisabled={disabled}\n        isLoading={loading}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onPress={onClick}\n        spinner={<LoadingSpinner />}\n        type={type}\n      >\n        {icon}\n        {children}\n      </HeroButton>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n","/**\n * svg loading spinner for button\n * @see https://www.heroui.com//docs/components/button#loading\n * */\nconst LoadingSpinner = () => {\n  return (\n    <svg\n      className=\"h-5 w-5 animate-spin text-current\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle\n        className=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n      />\n      <path\n        className=\"opacity-75\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n\nexport default LoadingSpinner;\n","import Button, { buttonVariants } from './Button';\n\nexport type { ButtonProps } from './Button';\n\nexport { Button, buttonVariants };\n\nexport default Button;\n"],"mappings":"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","names":["jsx","jsxs","Button_default"]}

package/dist/{chunk-IZM2I62C.js → chunk-65LUKHJB.js}

@@ -1,6 +1,6 @@
 import {
   Button_default
-} from "./chunk-FPR33UFC.js";
+} from "./chunk-2NMIKTA5.js";
 import {
   __async,
   __commonJS,
@@ -2793,4 +2793,4 @@ export {
   Json_default,
   Json_default2
 };
-//# sourceMappingURL=chunk-IZM2I62C.js.map
+//# sourceMappingURL=chunk-65LUKHJB.js.map

package/dist/{chunk-SCVJ4C6F.cjs → chunk-BVZHFHLJ.cjs}

@@ -1,9 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/hooks/useDebounce.ts
 var _react = require('react');
-var useDebounce = (value, delay) => {
+var useDebounce = (value, delay, disabled = false) => {
   const [debouncedValue, setDebouncedValue] = _react.useState.call(void 0, value);
   _react.useEffect.call(void 0, 
     () => {
+      if (disabled) {
+        setDebouncedValue(value);
+        return void 0;
+      }
       const handler = setTimeout(() => {
         setDebouncedValue(value);
       }, delay);
@@ -11,8 +15,8 @@ var useDebounce = (value, delay) => {
         clearTimeout(handler);
       };
     },
-    [value, delay]
-    // Only re-call effect if value or delay changes
+    [value, delay, disabled]
+    // Only re-call effect if value, delay, or disabled changes
   );
   return debouncedValue;
 };
@@ -80,4 +84,4 @@ var useLocalStorage = (key, initialValue) => {
 
 
 exports.useDebounce = useDebounce; exports.useIsInitialRenderCycle = useIsInitialRenderCycle; exports.useLocalStorage = useLocalStorage;
-//# sourceMappingURL=chunk-SCVJ4C6F.cjs.map
+//# sourceMappingURL=chunk-BVZHFHLJ.cjs.map

package/dist/chunk-BVZHFHLJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-BVZHFHLJ.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-BVZHFHLJ.cjs","sourcesContent":[null,"/* eslint-disable import-x/prefer-default-export */\n\nimport { useEffect, useState } from 'react';\n\n/**\n * Hook that debounces a value\n * @param value - The value to debounce\n * @param delay - Delay in milliseconds\n * @param disabled - If true, returns the value immediately without debouncing\n * @returns The debounced value\n */\nexport const useDebounce = <Value>(\n  value: Value,\n  delay: number,\n  disabled = false,\n) => {\n  // State and setters for debounced value\n  const [debouncedValue, setDebouncedValue] = useState(value);\n\n  useEffect(\n    () => {\n      // If disabled, update immediately\n      if (disabled) {\n        setDebouncedValue(value);\n        return undefined;\n      }\n\n      // Update debounced value after delay\n      const handler = setTimeout(() => {\n        setDebouncedValue(value);\n      }, delay);\n\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, disabled], // Only re-call effect if value, delay, or disabled changes\n  );\n\n  return debouncedValue;\n};\n","/* eslint-disable import-x/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-x/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-ZFHOZRR2.cjs → chunk-FVQDVD3E.cjs}

@@ -4,6 +4,7 @@
 var _chunkAHEA4IJVcjs = require('./chunk-AHEA4IJV.cjs');
 
 // src/Button/Button.tsx
+var _react = require('react');
 var _button = require('@heroui/button');
 var _theme = require('@heroui/theme');
 var _pixelutils = require('@fuf-stack/pixel-utils');
@@ -116,52 +117,60 @@ var buttonVariants = _pixelutils.tv.call(void 0, {
     }
   ]
 });
-var Button = ({
-  ariaLabel = void 0,
-  children = void 0,
-  className: _className = void 0,
-  color = "default",
-  disableAnimation = false,
-  disabled = false,
-  icon = void 0,
-  loading = false,
-  onClick = void 0,
-  radius = void 0,
-  ripple = false,
-  size = void 0,
-  testId = void 0,
-  type = void 0,
-  variant = "solid"
-}) => {
-  const className = buttonVariants({
-    className: _className,
-    disableAnimation,
-    isDisabled: disabled,
-    color,
-    size,
-    variant,
-    isIconOnly: !!(icon && !children),
-    radius
-  });
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _button.Button,
-    {
-      "aria-label": ariaLabel,
-      className,
-      "data-testid": testId,
-      disableRipple: disableAnimation || !ripple,
+var Button = _react.forwardRef.call(void 0, 
+  ({
+    ariaLabel = void 0,
+    children = void 0,
+    className: _className = void 0,
+    color = "default",
+    disableAnimation = false,
+    disabled = false,
+    icon = void 0,
+    loading = false,
+    onBlur = void 0,
+    onClick = void 0,
+    onFocus = void 0,
+    radius = void 0,
+    ripple = false,
+    size = void 0,
+    testId = void 0,
+    type = void 0,
+    variant = "solid"
+  }, ref) => {
+    const className = buttonVariants({
+      className: _className,
+      disableAnimation,
       isDisabled: disabled,
-      isLoading: loading,
-      onPress: onClick,
-      spinner: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingSpinner_default, {}),
-      type,
-      children: [
-        icon,
-        children
-      ]
-    }
-  );
-};
+      color,
+      size,
+      variant,
+      isIconOnly: !!(icon && !children),
+      radius
+    });
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _button.Button,
+      {
+        ref,
+        "aria-label": ariaLabel,
+        className,
+        "data-testid": testId,
+        disableRipple: disableAnimation || !ripple,
+        isDisabled: disabled,
+        isLoading: loading,
+        onBlur,
+        onFocus,
+        onPress: onClick,
+        spinner: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingSpinner_default, {}),
+        type,
+        children: [
+          icon,
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
 var Button_default = Button;
 
 // src/Button/index.ts
@@ -172,4 +181,4 @@ var Button_default2 = Button_default;
 
 
 exports.buttonVariants = buttonVariants; exports.Button_default = Button_default; exports.Button_default2 = Button_default2;
-//# sourceMappingURL=chunk-ZFHOZRR2.cjs.map
+//# sourceMappingURL=chunk-FVQDVD3E.cjs.map

package/dist/chunk-FVQDVD3E.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-FVQDVD3E.cjs","../src/Button/Button.tsx","../src/Button/subcomponents/LoadingSpinner.tsx","../src/Button/index.ts"],"names":["jsxs","jsx","Button_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-FVQDVD3E.cjs","sourcesContent":[null,"import type { TVProps } from '@fuf-stack/pixel-utils';\nimport type { ButtonProps as HeroButtonProps } from '@heroui/button';\nimport type { ReactNode } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport { Button as HeroButton } from '@heroui/button';\nimport { button as heroButtonVariants } from '@heroui/theme';\n\nimport { tv } from '@fuf-stack/pixel-utils';\n\nimport LoadingSpinner from './subcomponents/LoadingSpinner';\n\nexport const buttonVariants = tv({\n  extend: heroButtonVariants,\n  variants: {\n    color: {\n      ...heroButtonVariants.variants.color,\n      // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/button.ts\n      info: '',\n    },\n    variant: heroButtonVariants.variants.variant,\n    size: heroButtonVariants.variants.size,\n  },\n  compoundVariants: [\n    // white text on solid / shadow success button\n    {\n      color: 'success',\n      variant: 'solid',\n      class: 'text-white',\n    },\n    {\n      color: 'success',\n      variant: 'shadow',\n      class: 'text-white',\n    },\n    // white text on solid / shadow warning button\n    {\n      color: 'warning',\n      variant: 'solid',\n      class: 'text-white',\n    },\n    {\n      color: 'warning',\n      variant: 'shadow',\n      class: 'text-white',\n    },\n    {\n      color: 'info',\n      variant: 'solid',\n      class: 'bg-info text-info-foreground',\n    },\n    {\n      color: 'info',\n      variant: 'shadow',\n      class: 'shadow-info/40 bg-info text-info-foreground shadow-lg',\n    },\n    {\n      color: 'info',\n      variant: 'bordered',\n      class: 'border-medium border-info bg-transparent text-info',\n    },\n    {\n      color: 'info',\n      variant: 'flat',\n      class: 'bg-info/20 text-info-600',\n    },\n    {\n      color: 'info',\n      variant: 'faded',\n      class: 'border-default bg-default-100 text-info',\n    },\n    {\n      color: 'info',\n      variant: 'light',\n      class: 'bg-transparent text-info data-[hover=true]:bg-info-100',\n    },\n    {\n      color: 'info',\n      variant: 'ghost',\n      class:\n        'border-info text-info data-[hover=true]:!bg-info data-[hover=true]:!text-info-foreground',\n    },\n  ],\n});\n\ntype VariantProps = TVProps<typeof buttonVariants>;\n\n/* eslint-disable react/require-default-props -- not working with forwardRef */\nexport interface ButtonProps extends VariantProps {\n  /** sets HTML aria-label attribute */\n  ariaLabel?: string;\n  /** content of the button */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: string;\n  /** color of the button */\n  color?: VariantProps['color'];\n  /** disables the button */\n  disabled?: boolean;\n  /** disables all animations */\n  disableAnimation?: boolean;\n  /** shows loading animation */\n  loading?: boolean;\n  /** optional icon */\n  icon?: ReactNode;\n  /** blur event handler */\n  onBlur?: HeroButtonProps['onBlur'];\n  /** click event handler */\n  onClick?: HeroButtonProps['onPress'];\n  /** focus event handler */\n  onFocus?: HeroButtonProps['onFocus'];\n  /** border radius size */\n  radius?: VariantProps['radius'];\n  /** enable ripple animation effect on click */\n  ripple?: boolean;\n  /** size options */\n  size?: VariantProps['size'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** HTML button type attribute */\n  type?: 'button' | 'submit' | 'reset' | undefined;\n  /** visual style variant */\n  variant?: VariantProps['variant'];\n}\n/* eslint-enable react/require-default-props */\n\n/**\n * Button component based on [HeroUI Button](https://www.heroui.com//docs/components/button)\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      ariaLabel = undefined,\n      children = undefined,\n      className: _className = undefined,\n      color = 'default',\n      disableAnimation = false,\n      disabled = false,\n      icon = undefined,\n      loading = false,\n      onBlur = undefined,\n      onClick = undefined,\n      onFocus = undefined,\n      radius = undefined,\n      ripple = false,\n      size = undefined,\n      testId = undefined,\n      type = undefined,\n      variant = 'solid',\n    },\n    ref,\n  ) => {\n    const className = buttonVariants({\n      className: _className,\n      disableAnimation,\n      isDisabled: disabled,\n      color,\n      size,\n      variant,\n      isIconOnly: !!(icon && !children),\n      radius,\n    });\n\n    return (\n      <HeroButton\n        ref={ref}\n        aria-label={ariaLabel}\n        className={className}\n        data-testid={testId}\n        disableRipple={disableAnimation || !ripple}\n        isDisabled={disabled}\n        isLoading={loading}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onPress={onClick}\n        spinner={<LoadingSpinner />}\n        type={type}\n      >\n        {icon}\n        {children}\n      </HeroButton>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n","/**\n * svg loading spinner for button\n * @see https://www.heroui.com//docs/components/button#loading\n * */\nconst LoadingSpinner = () => {\n  return (\n    <svg\n      className=\"h-5 w-5 animate-spin text-current\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <circle\n        className=\"opacity-25\"\n        cx=\"12\"\n        cy=\"12\"\n        r=\"10\"\n        stroke=\"currentColor\"\n        strokeWidth=\"4\"\n      />\n      <path\n        className=\"opacity-75\"\n        d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n\nexport default LoadingSpinner;\n","import Button, { buttonVariants } from './Button';\n\nexport type { ButtonProps } from './Button';\n\nexport { Button, buttonVariants };\n\nexport default Button;\n"]}

package/dist/{chunk-VVAZOJQG.cjs → chunk-IBP3GUEA.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkZFHOZRR2cjs = require('./chunk-ZFHOZRR2.cjs');
+var _chunkFVQDVD3Ecjs = require('./chunk-FVQDVD3E.cjs');
 
 
 
@@ -2666,7 +2666,7 @@ var ErrorRenderer = ({
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-medium", children: "Failed to parse JSON data" })
           ] }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkZFHOZRR2cjs.Button_default,
+            _chunkFVQDVD3Ecjs.Button_default,
             {
               "aria-controls": "error-details",
               "aria-expanded": showDetails,
@@ -2793,4 +2793,4 @@ var Json_default2 = Json_default;
 
 
 exports.Json_default = Json_default; exports.Json_default2 = Json_default2;
-//# sourceMappingURL=chunk-VVAZOJQG.cjs.map
+//# sourceMappingURL=chunk-IBP3GUEA.cjs.map