dash-ui-kit 1.0.94 → 2.1.0-dev

package/dist/react/components/valueCard/index.esm.js

@@ -0,0 +1,176 @@
+"use client";
+
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { useTheme } from '../../contexts/ThemeContext.esm.js';
+import { useColorScheme } from '../../hooks/useColorScheme.esm.js';
+
+const valueCard = cva('flex items-center transition-all outline outline-1 outline-offset-[-1px]', {
+  variants: {
+    theme: {
+      light: 'outline-gray-200',
+      dark: 'bg-gray-800/50 outline-gray-400'
+    },
+    colorScheme: {
+      default: '',
+      transparent: 'bg-transparent',
+      green: 'text-green-500 bg-green-200 outline-green-400',
+      lightBlue: 'bg-dash-brand-dim/10 !outline-dash-brand/20',
+      white: 'bg-white',
+      lightGray: 'bg-dash-primary-die-subdued',
+      yellow: 'bg-dash-yellow-light !outline-dash-yellow'
+    },
+    size: {
+      xs: 'px-[0.5rem] py-[0.25rem] rounded-[0.25rem]',
+      sm: 'dash-block-sm',
+      md: 'dash-block-md',
+      xl: 'dash-block-xl'
+    },
+    clickable: {
+      false: '',
+      true: 'cursor-pointer transition-colors active:translate-y-px active:opacity-90'
+    },
+    loading: {
+      false: '',
+      true: 'animate-pulse'
+    },
+    border: {
+      false: '!outline-none',
+      true: ''
+    }
+  },
+  compoundVariants: [
+  // default scheme hover
+  {
+    theme: 'light',
+    colorScheme: 'default',
+    clickable: true,
+    class: 'hover:bg-gray-200/50'
+  }, {
+    theme: 'dark',
+    colorScheme: 'default',
+    clickable: true,
+    class: 'hover:bg-gray-700/50'
+  },
+  // transparent scheme hover
+  {
+    theme: 'light',
+    colorScheme: 'transparent',
+    clickable: true,
+    class: 'hover:bg-gray-100'
+  }, {
+    theme: 'dark',
+    colorScheme: 'transparent',
+    clickable: true,
+    class: 'hover:bg-gray-900'
+  },
+  // green scheme hover
+  {
+    theme: 'light',
+    colorScheme: 'green',
+    clickable: true,
+    class: 'hover:bg-green-300'
+  }, {
+    theme: 'dark',
+    colorScheme: 'green',
+    clickable: true,
+    class: 'hover:bg-green-400'
+  },
+  // green lightBlue
+  {
+    colorScheme: 'lightBlue',
+    clickable: true,
+    class: 'hover:bg-dash-brand/15'
+  },
+  // white
+  {
+    theme: 'light',
+    colorScheme: 'white',
+    clickable: true,
+    class: 'hover:bg-gray-100'
+  }, {
+    theme: 'dark',
+    colorScheme: 'white',
+    clickable: true,
+    class: 'hover:bg-gray-100'
+  },
+  // lightGray scheme hover
+  {
+    theme: 'light',
+    colorScheme: 'lightGray',
+    clickable: true,
+    class: 'hover:bg-dash-primary-die'
+  }, {
+    theme: 'dark',
+    colorScheme: 'lightGray',
+    clickable: true,
+    class: 'hover:bg-gray-600'
+  },
+  // yellow scheme hover
+  {
+    colorScheme: 'yellow',
+    clickable: true,
+    class: 'hover:bg-dash-yellow'
+  }],
+  defaultVariants: {
+    theme: 'light',
+    colorScheme: 'default',
+    size: 'md',
+    clickable: false,
+    loading: false,
+    border: true
+  }
+});
+/**
+ * A card container that adapts to light/dark theme,
+ * supports various color schemes, sizes, clickability,
+ * loading state, and optional border styling.
+ *
+ * @example
+ * <ValueCard colorScheme="green" border as={Link} link="/foo">
+ *   Go
+ * </ValueCard>
+ */
+const ValueCard = _a => {
+  var _b;
+  var {
+      as,
+      link = '',
+      colorScheme,
+      colorSchemeLight,
+      colorSchemeDark,
+      size,
+      clickable = false,
+      loading,
+      border,
+      className = '',
+      children
+    } = _a,
+    props = __rest(_a, ["as", "link", "colorScheme", "colorSchemeLight", "colorSchemeDark", "size", "clickable", "loading", "border", "className", "children"]);
+  const {
+    theme
+  } = useTheme();
+  const effectiveColorScheme = (_b = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark)) !== null && _b !== void 0 ? _b : 'default';
+  const isClickable = Boolean(link !== '' || clickable);
+  const classes = valueCard({
+    theme,
+    colorScheme: effectiveColorScheme,
+    size,
+    clickable: isClickable,
+    loading,
+    border
+  }) + ' ' + String(className);
+  // choose element: custom `as`, or <a> if link, else <div>
+  const Component = as !== null && as !== void 0 ? as : link !== '' ? 'a' : 'div';
+  const mergedProps = Object.assign(Object.assign({}, props), {
+    className: classes
+  });
+  if (link !== '') mergedProps.href = link;
+  return jsx(Component, Object.assign({}, mergedProps, {
+    children: children
+  }));
+};
+
+export { ValueCard, ValueCard as default };
+//# sourceMappingURL=index.esm.js.map

package/dist/react/components/valueCard/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/react/components/valueCard/index.tsx"],"sourcesContent":["import React from 'react'\nimport { cva, VariantProps } from 'class-variance-authority'\nimport { useTheme } from '../../contexts/ThemeContext'\nimport { useColorScheme } from '../../hooks/useColorScheme'\n\nconst valueCard = cva(\n  'flex items-center transition-all outline outline-1 outline-offset-[-1px]',\n  {\n    variants: {\n      theme: {\n        light: 'outline-gray-200',\n        dark: 'bg-gray-800/50 outline-gray-400'\n      },\n      colorScheme: {\n        default: '',\n        transparent: 'bg-transparent',\n        green: 'text-green-500 bg-green-200 outline-green-400',\n        lightBlue: 'bg-dash-brand-dim/10 !outline-dash-brand/20',\n        white: 'bg-white',\n        lightGray: 'bg-dash-primary-die-subdued',\n        yellow: 'bg-dash-yellow-light !outline-dash-yellow'\n      },\n      size: {\n        xs: 'px-[0.5rem] py-[0.25rem] rounded-[0.25rem]',\n        sm: 'dash-block-sm',\n        md: 'dash-block-md',\n        xl: 'dash-block-xl'\n      },\n      clickable: {\n        false: '',\n        true: 'cursor-pointer transition-colors active:translate-y-px active:opacity-90'\n      },\n      loading: {\n        false: '',\n        true: 'animate-pulse'\n      },\n      border: {\n        false: '!outline-none',\n        true: ''\n      }\n    },\n    compoundVariants: [\n      // default scheme hover\n      { theme: 'light', colorScheme: 'default', clickable: true, class: 'hover:bg-gray-200/50' },\n      { theme: 'dark', colorScheme: 'default', clickable: true, class: 'hover:bg-gray-700/50' },\n      // transparent scheme hover\n      { theme: 'light', colorScheme: 'transparent', clickable: true, class: 'hover:bg-gray-100' },\n      { theme: 'dark', colorScheme: 'transparent', clickable: true, class: 'hover:bg-gray-900' },\n      // green scheme hover\n      { theme: 'light', colorScheme: 'green', clickable: true, class: 'hover:bg-green-300' },\n      { theme: 'dark', colorScheme: 'green', clickable: true, class: 'hover:bg-green-400' },\n      // green lightBlue\n      { colorScheme: 'lightBlue', clickable: true, class: 'hover:bg-dash-brand/15' },\n      // white\n      { theme: 'light', colorScheme: 'white', clickable: true, class: 'hover:bg-gray-100' },\n      { theme: 'dark', colorScheme: 'white', clickable: true, class: 'hover:bg-gray-100' },\n      // lightGray scheme hover\n      { theme: 'light', colorScheme: 'lightGray', clickable: true, class: 'hover:bg-dash-primary-die' },\n      { theme: 'dark', colorScheme: 'lightGray', clickable: true, class: 'hover:bg-gray-600' },\n      // yellow scheme hover\n      { colorScheme: 'yellow', clickable: true, class: 'hover:bg-dash-yellow' }\n    ],\n    defaultVariants: {\n      theme: 'light',\n      colorScheme: 'default',\n      size: 'md',\n      clickable: false,\n      loading: false,\n      border: true\n    }\n  }\n)\n\ntype ValueCardVariants = VariantProps<typeof valueCard>\n\nexport interface ValueCardProps extends Omit<ValueCardVariants, 'theme'> {\n  /** If you pass an `as` component, it'll receive `href` when `link` is set */\n  as?: React.ElementType\n  /** Only applies `href` if `as` is `'a'` or a component that accepts `href` */\n  link?: string\n  className?: string\n  children: React.ReactNode\n  /** Color scheme override for light theme */\n  colorSchemeLight?: 'default' | 'transparent' | 'green' | 'lightBlue' | 'white' | 'lightGray' | 'yellow'\n  /** Color scheme override for dark theme */\n  colorSchemeDark?: 'default' | 'transparent' | 'green' | 'lightBlue' | 'white' | 'lightGray' | 'yellow'\n  /** Additional props to pass to the underlying element */\n  [key: string]: any\n}\n\n/**\n * A card container that adapts to light/dark theme,\n * supports various color schemes, sizes, clickability,\n * loading state, and optional border styling.\n *\n * @example\n * <ValueCard colorScheme=\"green\" border as={Link} link=\"/foo\">\n *   Go\n * </ValueCard>\n */\nexport const ValueCard: React.FC<ValueCardProps> = ({\n  as,\n  link = '',\n  colorScheme,\n  colorSchemeLight,\n  colorSchemeDark,\n  size,\n  clickable = false,\n  loading,\n  border,\n  className = '',\n  children,\n  ...props\n}) => {\n  const { theme } = useTheme()\n  const effectiveColorScheme = useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) ?? 'default'\n  const isClickable = Boolean(link !== '' || clickable)\n\n  const classes = valueCard({\n    theme,\n    colorScheme: effectiveColorScheme,\n    size,\n    clickable: isClickable,\n    loading,\n    border\n  }) + ' ' + (String(className))\n\n  // choose element: custom `as`, or <a> if link, else <div>\n  const Component = as ?? (link !== '' ? 'a' : 'div')\n\n  const mergedProps: any = { ...props, className: classes }\n  if (link !== '') mergedProps.href = link\n\n  return <Component {...mergedProps}>{children}</Component>\n}\n\nexport default ValueCard "],"names":["valueCard","cva","variants","theme","light","dark","colorScheme","default","transparent","green","lightBlue","white","lightGray","yellow","size","xs","sm","md","xl","clickable","false","true","loading","border","compoundVariants","class","defaultVariants","ValueCard","_a","as","link","colorSchemeLight","colorSchemeDark","className","children","props","__rest","useTheme","effectiveColorScheme","_b","useColorScheme","isClickable","Boolean","classes","String","Component","mergedProps","href","_jsx","Object","assign"],"mappings":"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"}

package/dist/react/contexts/ThemeContext.cjs.js

@@ -0,0 +1,79 @@
+"use client";
+
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const ThemeContext = /*#__PURE__*/React.createContext(undefined);
+/**
+ * Provides theme context to its descendants and syncs theme with localStorage
+ * and the root HTML element's class list ('light' or 'dark').
+ *
+ * @param initialTheme - Optional initial theme override.
+ * @param children - React children.
+ */
+const ThemeProvider = ({
+  initialTheme,
+  children
+}) => {
+  /**
+   * Retrieve stored theme from localStorage, if available.
+   */
+  const getStoredTheme = () => {
+    if (typeof window === 'undefined') return null;
+    const stored = localStorage.getItem('theme');
+    return stored != null && (stored === 'light' || stored === 'dark') ? stored : null;
+  };
+  const [theme, setThemeState] = React.useState(() => {
+    var _a;
+    return (_a = initialTheme !== null && initialTheme !== void 0 ? initialTheme : getStoredTheme()) !== null && _a !== void 0 ? _a : 'light';
+  });
+  // Sync theme changes to document <html> class and localStorage.
+  React.useEffect(() => {
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+    document.documentElement.classList.toggle('light', theme === 'light');
+    try {
+      localStorage.setItem('theme', theme);
+    } catch (_a) {
+      // Ignore localStorage.
+    }
+  }, [theme]);
+  /**
+   * Update theme state explicitly.
+   * @param newTheme - The theme to set ('light' or 'dark').
+   */
+  const setTheme = newTheme => {
+    setThemeState(newTheme);
+  };
+  /**
+   * Toggle between 'light' and 'dark' theme.
+   */
+  const toggleTheme = () => {
+    setThemeState(current => current === 'light' ? 'dark' : 'light');
+  };
+  return jsxRuntime.jsx(ThemeContext.Provider, {
+    value: {
+      theme,
+      setTheme,
+      toggleTheme
+    },
+    children: children
+  });
+};
+/**
+ * Hook to access the theme context.
+ * @returns ThemeContextValue - Contains `theme`, `setTheme`, and `toggleTheme`.
+ * @throws If used outside of a ThemeProvider.
+ */
+function useTheme() {
+  const context = React.useContext(ThemeContext);
+  if (context == null) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;
+//# sourceMappingURL=ThemeContext.cjs.js.map

package/dist/react/contexts/ThemeContext.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.cjs.js","sources":["../../../src/react/contexts/ThemeContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useState, useEffect } from 'react'\n\nexport type Theme = 'light' | 'dark'\n\n/**\n * Context value shape for theme switching.\n */\nexport interface ThemeContextValue {\n  /** Current theme, either 'light' or 'dark'. */\n  theme: Theme\n  /** Set the theme explicitly. */\n  setTheme: (theme: Theme) => void\n  /** Toggle between 'light' and 'dark'. */\n  toggleTheme: () => void\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined)\n\n/**\n * Props for the ThemeProvider component.\n */\nexport interface ThemeProviderProps {\n  /** Initial theme; if not provided, reads from localStorage or defaults to 'light'. */\n  initialTheme?: Theme\n  /** React children that will have access to the theme context. */\n  children: React.ReactNode\n}\n\n/**\n * Provides theme context to its descendants and syncs theme with localStorage\n * and the root HTML element's class list ('light' or 'dark').\n *\n * @param initialTheme - Optional initial theme override.\n * @param children - React children.\n */\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ initialTheme, children }) => {\n  /**\n   * Retrieve stored theme from localStorage, if available.\n   */\n  const getStoredTheme = (): Theme | null => {\n    if (typeof window === 'undefined') return null\n    const stored = localStorage.getItem('theme')\n    return (stored != null && (stored === 'light' || stored === 'dark')) ? stored : null\n  }\n\n  const [theme, setThemeState] = useState<Theme>(() => {\n    return initialTheme ?? getStoredTheme() ?? 'light'\n  })\n\n  // Sync theme changes to document <html> class and localStorage.\n  useEffect(() => {\n    document.documentElement.classList.toggle('dark', theme === 'dark')\n    document.documentElement.classList.toggle('light', theme === 'light')\n    try {\n      localStorage.setItem('theme', theme)\n    } catch {\n      // Ignore localStorage.\n    }\n  }, [theme])\n\n  /**\n   * Update theme state explicitly.\n   * @param newTheme - The theme to set ('light' or 'dark').\n   */\n  const setTheme = (newTheme: Theme): void => {\n    setThemeState(newTheme)\n  }\n\n  /**\n   * Toggle between 'light' and 'dark' theme.\n   */\n  const toggleTheme = (): void => {\n    setThemeState((current) => (current === 'light' ? 'dark' : 'light'))\n  }\n\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n\n/**\n * Hook to access the theme context.\n * @returns ThemeContextValue - Contains `theme`, `setTheme`, and `toggleTheme`.\n * @throws If used outside of a ThemeProvider.\n */\nexport function useTheme (): ThemeContextValue {\n  const context = useContext(ThemeContext)\n  if (context == null) {\n    throw new Error('useTheme must be used within a ThemeProvider')\n  }\n  return context\n}\n"],"names":["ThemeContext","createContext","undefined","ThemeProvider","initialTheme","children","getStoredTheme","window","stored","localStorage","getItem","theme","setThemeState","useState","_a","useEffect","document","documentElement","classList","toggle","setItem","setTheme","newTheme","toggleTheme","current","_jsx","Provider","value","useTheme","context","useContext","Error"],"mappings":";;;;;;;AAgBA,MAAMA,YAAY,gBAAGC,mBAAa,CAAgCC,SAAS,CAAC;AAY5E;;;;;;AAMG;AACI,MAAMC,aAAa,GAAiCA,CAAC;EAAEC,YAAY;AAAEC,EAAAA;AAAU,CAAA,KAAI;AACxF;;AAEG;EACH,MAAMC,cAAc,GAAGA,MAAmB;AACxC,IAAA,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE,OAAO,IAAI;AAC9C,IAAA,MAAMC,MAAM,GAAGC,YAAY,CAACC,OAAO,CAAC,OAAO,CAAC;AAC5C,IAAA,OAAQF,MAAM,IAAI,IAAI,KAAKA,MAAM,KAAK,OAAO,IAAIA,MAAM,KAAK,MAAM,CAAC,GAAIA,MAAM,GAAG,IAAI;GACrF;EAED,MAAM,CAACG,KAAK,EAAEC,aAAa,CAAC,GAAGC,cAAQ,CAAQ,MAAK;;IAClD,OAAO,CAAAC,EAAA,GAAAV,YAAY,KAAA,IAAA,IAAZA,YAAY,KAAA,MAAA,GAAZA,YAAY,GAAIE,cAAc,EAAE,MAAI,IAAA,IAAAQ,EAAA,KAAA,MAAA,GAAAA,EAAA,GAAA,OAAO;AACpD,GAAC,CAAC;AAEF;AACAC,EAAAA,eAAS,CAAC,MAAK;AACbC,IAAAA,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,MAAM,CAAC,MAAM,EAAER,KAAK,KAAK,MAAM,CAAC;AACnEK,IAAAA,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,MAAM,CAAC,OAAO,EAAER,KAAK,KAAK,OAAO,CAAC;IACrE,IAAI;AACFF,MAAAA,YAAY,CAACW,OAAO,CAAC,OAAO,EAAET,KAAK,CAAC;KACrC,CAAC,OAAAG,EAAA,EAAM;AACN;AAAA;AAEJ,GAAC,EAAE,CAACH,KAAK,CAAC,CAAC;AAEX;;;AAGG;EACH,MAAMU,QAAQ,GAAIC,QAAe,IAAU;IACzCV,aAAa,CAACU,QAAQ,CAAC;GACxB;AAED;;AAEG;EACH,MAAMC,WAAW,GAAGA,MAAW;IAC7BX,aAAa,CAAEY,OAAO,IAAMA,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAQ,CAAC;GACrE;AAED,EAAA,OACEC,cAAC,CAAAzB,YAAY,CAAC0B,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAE;MAAEhB,KAAK;MAAEU,QAAQ;AAAEE,MAAAA;KAAa;cAC3DlB;AAAQ,GAAA,CACa;AAE5B;AAEA;;;;AAIG;SACauB,QAAQA,GAAA;AACtB,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAAC9B,YAAY,CAAC;EACxC,IAAI6B,OAAO,IAAI,IAAI,EAAE;AACnB,IAAA,MAAM,IAAIE,KAAK,CAAC,8CAA8C,CAAC;AACjE;AACA,EAAA,OAAOF,OAAO;AAChB;;;;;"}

package/dist/react/contexts/ThemeContext.esm.js

@@ -0,0 +1,76 @@
+"use client";
+
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect, createContext, useContext } from 'react';
+
+const ThemeContext = /*#__PURE__*/createContext(undefined);
+/**
+ * Provides theme context to its descendants and syncs theme with localStorage
+ * and the root HTML element's class list ('light' or 'dark').
+ *
+ * @param initialTheme - Optional initial theme override.
+ * @param children - React children.
+ */
+const ThemeProvider = ({
+  initialTheme,
+  children
+}) => {
+  /**
+   * Retrieve stored theme from localStorage, if available.
+   */
+  const getStoredTheme = () => {
+    if (typeof window === 'undefined') return null;
+    const stored = localStorage.getItem('theme');
+    return stored != null && (stored === 'light' || stored === 'dark') ? stored : null;
+  };
+  const [theme, setThemeState] = useState(() => {
+    var _a;
+    return (_a = initialTheme !== null && initialTheme !== void 0 ? initialTheme : getStoredTheme()) !== null && _a !== void 0 ? _a : 'light';
+  });
+  // Sync theme changes to document <html> class and localStorage.
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+    document.documentElement.classList.toggle('light', theme === 'light');
+    try {
+      localStorage.setItem('theme', theme);
+    } catch (_a) {
+      // Ignore localStorage.
+    }
+  }, [theme]);
+  /**
+   * Update theme state explicitly.
+   * @param newTheme - The theme to set ('light' or 'dark').
+   */
+  const setTheme = newTheme => {
+    setThemeState(newTheme);
+  };
+  /**
+   * Toggle between 'light' and 'dark' theme.
+   */
+  const toggleTheme = () => {
+    setThemeState(current => current === 'light' ? 'dark' : 'light');
+  };
+  return jsx(ThemeContext.Provider, {
+    value: {
+      theme,
+      setTheme,
+      toggleTheme
+    },
+    children: children
+  });
+};
+/**
+ * Hook to access the theme context.
+ * @returns ThemeContextValue - Contains `theme`, `setTheme`, and `toggleTheme`.
+ * @throws If used outside of a ThemeProvider.
+ */
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context == null) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
+
+export { ThemeProvider, useTheme };
+//# sourceMappingURL=ThemeContext.esm.js.map

package/dist/react/contexts/ThemeContext.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.esm.js","sources":["../../../src/react/contexts/ThemeContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useState, useEffect } from 'react'\n\nexport type Theme = 'light' | 'dark'\n\n/**\n * Context value shape for theme switching.\n */\nexport interface ThemeContextValue {\n  /** Current theme, either 'light' or 'dark'. */\n  theme: Theme\n  /** Set the theme explicitly. */\n  setTheme: (theme: Theme) => void\n  /** Toggle between 'light' and 'dark'. */\n  toggleTheme: () => void\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined)\n\n/**\n * Props for the ThemeProvider component.\n */\nexport interface ThemeProviderProps {\n  /** Initial theme; if not provided, reads from localStorage or defaults to 'light'. */\n  initialTheme?: Theme\n  /** React children that will have access to the theme context. */\n  children: React.ReactNode\n}\n\n/**\n * Provides theme context to its descendants and syncs theme with localStorage\n * and the root HTML element's class list ('light' or 'dark').\n *\n * @param initialTheme - Optional initial theme override.\n * @param children - React children.\n */\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ initialTheme, children }) => {\n  /**\n   * Retrieve stored theme from localStorage, if available.\n   */\n  const getStoredTheme = (): Theme | null => {\n    if (typeof window === 'undefined') return null\n    const stored = localStorage.getItem('theme')\n    return (stored != null && (stored === 'light' || stored === 'dark')) ? stored : null\n  }\n\n  const [theme, setThemeState] = useState<Theme>(() => {\n    return initialTheme ?? getStoredTheme() ?? 'light'\n  })\n\n  // Sync theme changes to document <html> class and localStorage.\n  useEffect(() => {\n    document.documentElement.classList.toggle('dark', theme === 'dark')\n    document.documentElement.classList.toggle('light', theme === 'light')\n    try {\n      localStorage.setItem('theme', theme)\n    } catch {\n      // Ignore localStorage.\n    }\n  }, [theme])\n\n  /**\n   * Update theme state explicitly.\n   * @param newTheme - The theme to set ('light' or 'dark').\n   */\n  const setTheme = (newTheme: Theme): void => {\n    setThemeState(newTheme)\n  }\n\n  /**\n   * Toggle between 'light' and 'dark' theme.\n   */\n  const toggleTheme = (): void => {\n    setThemeState((current) => (current === 'light' ? 'dark' : 'light'))\n  }\n\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n\n/**\n * Hook to access the theme context.\n * @returns ThemeContextValue - Contains `theme`, `setTheme`, and `toggleTheme`.\n * @throws If used outside of a ThemeProvider.\n */\nexport function useTheme (): ThemeContextValue {\n  const context = useContext(ThemeContext)\n  if (context == null) {\n    throw new Error('useTheme must be used within a ThemeProvider')\n  }\n  return context\n}\n"],"names":["ThemeContext","createContext","undefined","ThemeProvider","initialTheme","children","getStoredTheme","window","stored","localStorage","getItem","theme","setThemeState","useState","_a","useEffect","document","documentElement","classList","toggle","setItem","setTheme","newTheme","toggleTheme","current","_jsx","Provider","value","useTheme","context","useContext","Error"],"mappings":";;;;;AAgBA,MAAMA,YAAY,gBAAGC,aAAa,CAAgCC,SAAS,CAAC;AAY5E;;;;;;AAMG;AACI,MAAMC,aAAa,GAAiCA,CAAC;EAAEC,YAAY;AAAEC,EAAAA;AAAU,CAAA,KAAI;AACxF;;AAEG;EACH,MAAMC,cAAc,GAAGA,MAAmB;AACxC,IAAA,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE,OAAO,IAAI;AAC9C,IAAA,MAAMC,MAAM,GAAGC,YAAY,CAACC,OAAO,CAAC,OAAO,CAAC;AAC5C,IAAA,OAAQF,MAAM,IAAI,IAAI,KAAKA,MAAM,KAAK,OAAO,IAAIA,MAAM,KAAK,MAAM,CAAC,GAAIA,MAAM,GAAG,IAAI;GACrF;EAED,MAAM,CAACG,KAAK,EAAEC,aAAa,CAAC,GAAGC,QAAQ,CAAQ,MAAK;;IAClD,OAAO,CAAAC,EAAA,GAAAV,YAAY,KAAA,IAAA,IAAZA,YAAY,KAAA,MAAA,GAAZA,YAAY,GAAIE,cAAc,EAAE,MAAI,IAAA,IAAAQ,EAAA,KAAA,MAAA,GAAAA,EAAA,GAAA,OAAO;AACpD,GAAC,CAAC;AAEF;AACAC,EAAAA,SAAS,CAAC,MAAK;AACbC,IAAAA,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,MAAM,CAAC,MAAM,EAAER,KAAK,KAAK,MAAM,CAAC;AACnEK,IAAAA,QAAQ,CAACC,eAAe,CAACC,SAAS,CAACC,MAAM,CAAC,OAAO,EAAER,KAAK,KAAK,OAAO,CAAC;IACrE,IAAI;AACFF,MAAAA,YAAY,CAACW,OAAO,CAAC,OAAO,EAAET,KAAK,CAAC;KACrC,CAAC,OAAAG,EAAA,EAAM;AACN;AAAA;AAEJ,GAAC,EAAE,CAACH,KAAK,CAAC,CAAC;AAEX;;;AAGG;EACH,MAAMU,QAAQ,GAAIC,QAAe,IAAU;IACzCV,aAAa,CAACU,QAAQ,CAAC;GACxB;AAED;;AAEG;EACH,MAAMC,WAAW,GAAGA,MAAW;IAC7BX,aAAa,CAAEY,OAAO,IAAMA,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAQ,CAAC;GACrE;AAED,EAAA,OACEC,GAAC,CAAAzB,YAAY,CAAC0B,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAE;MAAEhB,KAAK;MAAEU,QAAQ;AAAEE,MAAAA;KAAa;cAC3DlB;AAAQ,GAAA,CACa;AAE5B;AAEA;;;;AAIG;SACauB,QAAQA,GAAA;AACtB,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAAC9B,YAAY,CAAC;EACxC,IAAI6B,OAAO,IAAI,IAAI,EAAE;AACnB,IAAA,MAAM,IAAIE,KAAK,CAAC,8CAA8C,CAAC;AACjE;AACA,EAAA,OAAOF,OAAO;AAChB;;;;"}

package/dist/react/contexts/index.cjs.js

@@ -0,0 +1,11 @@
+"use client";
+
+'use strict';
+
+var ThemeContext = require('./ThemeContext.cjs.js');
+
+
+
+exports.ThemeProvider = ThemeContext.ThemeProvider;
+exports.useTheme = ThemeContext.useTheme;
+//# sourceMappingURL=index.cjs.js.map

package/dist/react/contexts/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/react/contexts/index.esm.js

@@ -0,0 +1,4 @@
+"use client";
+
+export { ThemeProvider, useTheme } from './ThemeContext.esm.js';
+//# sourceMappingURL=index.esm.js.map

package/dist/react/contexts/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/react/hooks/index.d.ts

@@ -1 +1,2 @@
 export { default as useDebounce } from './useDebounce';
+export { useColorScheme } from './useColorScheme';

package/dist/react/hooks/useColorScheme.cjs.js

@@ -0,0 +1,25 @@
+"use client";
+
+'use strict';
+
+var ThemeContext = require('../contexts/ThemeContext.cjs.js');
+
+/**
+ * Resolves the effective color scheme based on the active theme.
+ *
+ * Priority:
+ *   1. colorSchemeLight — when theme is 'light' and value is provided
+ *   2. colorSchemeDark  — when theme is 'dark' and value is provided
+ *   3. colorScheme      — fallback, theme-independent
+ */
+function useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) {
+  const {
+    theme
+  } = ThemeContext.useTheme();
+  if (theme === 'light' && colorSchemeLight !== undefined) return colorSchemeLight;
+  if (theme === 'dark' && colorSchemeDark !== undefined) return colorSchemeDark;
+  return colorScheme;
+}
+
+exports.useColorScheme = useColorScheme;
+//# sourceMappingURL=useColorScheme.cjs.js.map

package/dist/react/hooks/useColorScheme.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorScheme.cjs.js","sources":["../../../src/react/hooks/useColorScheme.ts"],"sourcesContent":["import { useTheme } from '../contexts/ThemeContext'\n\n/**\n * Resolves the effective color scheme based on the active theme.\n *\n * Priority:\n *   1. colorSchemeLight — when theme is 'light' and value is provided\n *   2. colorSchemeDark  — when theme is 'dark' and value is provided\n *   3. colorScheme      — fallback, theme-independent\n */\nexport function useColorScheme<T>(\n  colorScheme?: T,\n  colorSchemeLight?: T,\n  colorSchemeDark?: T\n): T | undefined {\n  const { theme } = useTheme()\n\n  if (theme === 'light' && colorSchemeLight !== undefined) return colorSchemeLight\n  if (theme === 'dark' && colorSchemeDark !== undefined) return colorSchemeDark\n\n  return colorScheme\n}\n"],"names":["useColorScheme","colorScheme","colorSchemeLight","colorSchemeDark","theme","useTheme","undefined"],"mappings":";;;;;;AAEA;;;;;;;AAOG;SACaA,cAAcA,CAC5BC,WAAe,EACfC,gBAAoB,EACpBC,eAAmB,EAAA;EAEnB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,qBAAQ,EAAE;EAE5B,IAAID,KAAK,KAAK,OAAO,IAAIF,gBAAgB,KAAKI,SAAS,EAAE,OAAOJ,gBAAgB;EAChF,IAAIE,KAAK,KAAK,MAAM,IAAID,eAAe,KAAKG,SAAS,EAAE,OAAOH,eAAe;AAE7E,EAAA,OAAOF,WAAW;AACpB;;;;"}

package/dist/react/hooks/useColorScheme.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Resolves the effective color scheme based on the active theme.
+ *
+ * Priority:
+ *   1. colorSchemeLight — when theme is 'light' and value is provided
+ *   2. colorSchemeDark  — when theme is 'dark' and value is provided
+ *   3. colorScheme      — fallback, theme-independent
+ */
+export declare function useColorScheme<T>(colorScheme?: T, colorSchemeLight?: T, colorSchemeDark?: T): T | undefined;

package/dist/react/hooks/useColorScheme.esm.js

@@ -0,0 +1,23 @@
+"use client";
+
+import { useTheme } from '../contexts/ThemeContext.esm.js';
+
+/**
+ * Resolves the effective color scheme based on the active theme.
+ *
+ * Priority:
+ *   1. colorSchemeLight — when theme is 'light' and value is provided
+ *   2. colorSchemeDark  — when theme is 'dark' and value is provided
+ *   3. colorScheme      — fallback, theme-independent
+ */
+function useColorScheme(colorScheme, colorSchemeLight, colorSchemeDark) {
+  const {
+    theme
+  } = useTheme();
+  if (theme === 'light' && colorSchemeLight !== undefined) return colorSchemeLight;
+  if (theme === 'dark' && colorSchemeDark !== undefined) return colorSchemeDark;
+  return colorScheme;
+}
+
+export { useColorScheme };
+//# sourceMappingURL=useColorScheme.esm.js.map

package/dist/react/hooks/useColorScheme.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorScheme.esm.js","sources":["../../../src/react/hooks/useColorScheme.ts"],"sourcesContent":["import { useTheme } from '../contexts/ThemeContext'\n\n/**\n * Resolves the effective color scheme based on the active theme.\n *\n * Priority:\n *   1. colorSchemeLight — when theme is 'light' and value is provided\n *   2. colorSchemeDark  — when theme is 'dark' and value is provided\n *   3. colorScheme      — fallback, theme-independent\n */\nexport function useColorScheme<T>(\n  colorScheme?: T,\n  colorSchemeLight?: T,\n  colorSchemeDark?: T\n): T | undefined {\n  const { theme } = useTheme()\n\n  if (theme === 'light' && colorSchemeLight !== undefined) return colorSchemeLight\n  if (theme === 'dark' && colorSchemeDark !== undefined) return colorSchemeDark\n\n  return colorScheme\n}\n"],"names":["useColorScheme","colorScheme","colorSchemeLight","colorSchemeDark","theme","useTheme","undefined"],"mappings":";;;;AAEA;;;;;;;AAOG;SACaA,cAAcA,CAC5BC,WAAe,EACfC,gBAAoB,EACpBC,eAAmB,EAAA;EAEnB,MAAM;AAAEC,IAAAA;GAAO,GAAGC,QAAQ,EAAE;EAE5B,IAAID,KAAK,KAAK,OAAO,IAAIF,gBAAgB,KAAKI,SAAS,EAAE,OAAOJ,gBAAgB;EAChF,IAAIE,KAAK,KAAK,MAAM,IAAID,eAAe,KAAKG,SAAS,EAAE,OAAOH,eAAe;AAE7E,EAAA,OAAOF,WAAW;AACpB;;;;"}

package/dist/react/hooks/useDebounce.cjs.js

@@ -0,0 +1,83 @@
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * Hook for debouncing values with extended functionality
+ *
+ * @param value - Value to debounce
+ * @param options - Configuration options
+ * @returns Object with debounced value and control methods
+ */
+const useDebounce = (value, options) => {
+  // Backward compatibility support - if number is passed, it's delay
+  const config = typeof options === 'number' ? {
+    delay: options
+  } : options;
+  const {
+    delay,
+    callback,
+    immediate = false
+  } = config;
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+  const [isPending, setIsPending] = React.useState(false);
+  const timeoutRef = React.useRef(null);
+  const isFirstRun = React.useRef(true);
+  const cancel = React.useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+      setIsPending(false);
+    }
+  }, []);
+  const flush = React.useCallback(() => {
+    cancel();
+    setDebouncedValue(value);
+    callback === null || callback === void 0 ? void 0 : callback(value);
+    setIsPending(false);
+  }, [value, callback, cancel]);
+  React.useEffect(() => {
+    // If immediate === true and this is first run, set value immediately
+    if (immediate && isFirstRun.current) {
+      setDebouncedValue(value);
+      callback === null || callback === void 0 ? void 0 : callback(value);
+      isFirstRun.current = false;
+      return;
+    }
+    isFirstRun.current = false;
+    setIsPending(true);
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+      callback === null || callback === void 0 ? void 0 : callback(value);
+      setIsPending(false);
+      timeoutRef.current = null;
+    }, delay);
+    timeoutRef.current = handler;
+    return () => {
+      clearTimeout(handler);
+      setIsPending(false);
+    };
+  }, [value, delay, callback, immediate]);
+  // Cleanup on unmount
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return {
+    debouncedValue,
+    flush,
+    cancel,
+    isPending
+  };
+};
+
+exports.default = useDebounce;
+exports.useDebounce = useDebounce;
+//# sourceMappingURL=useDebounce.cjs.js.map

package/dist/react/hooks/useDebounce.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebounce.cjs.js","sources":["../../../src/react/hooks/useDebounce.ts"],"sourcesContent":["import { useState, useEffect, useRef, useCallback } from 'react'\n\ninterface UseDebounceOptions<T> {\n  /**\n   * Delay in milliseconds\n   */\n  delay: number\n  /**\n   * Callback called when debounced value changes\n   */\n  callback?: (value: T) => void\n  /**\n   * If true, the value will be set immediately on first call\n   */\n  immediate?: boolean\n}\n\ninterface UseDebounceReturn<T> {\n  /**\n   * Current debounced value\n   */\n  debouncedValue: T\n  /**\n   * Function to force flush debounce and immediately update value\n   */\n  flush: () => void\n  /**\n   * Function to cancel current pending debounce\n   */\n  cancel: () => void\n  /**\n   * Whether there's a pending change\n   */\n  isPending: boolean\n}\n\n/**\n * Hook for debouncing values with extended functionality\n * \n * @param value - Value to debounce\n * @param options - Configuration options\n * @returns Object with debounced value and control methods\n */\nconst useDebounce = <T>(\n  value: T, \n  options: UseDebounceOptions<T> | number\n): UseDebounceReturn<T> => {\n  // Backward compatibility support - if number is passed, it's delay\n  const config: UseDebounceOptions<T> = typeof options === 'number' \n    ? { delay: options }\n    : options\n\n  const { delay, callback, immediate = false } = config\n  \n  const [debouncedValue, setDebouncedValue] = useState<T>(value)\n  const [isPending, setIsPending] = useState(false)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n  const isFirstRun = useRef(true)\n\n  const cancel = useCallback(() => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current)\n      timeoutRef.current = null\n      setIsPending(false)\n    }\n  }, [])\n\n  const flush = useCallback(() => {\n    cancel()\n    setDebouncedValue(value)\n    callback?.(value)\n    setIsPending(false)\n  }, [value, callback, cancel])\n\n  useEffect(() => {\n    // If immediate === true and this is first run, set value immediately\n    if (immediate && isFirstRun.current) {\n      setDebouncedValue(value)\n      callback?.(value)\n      isFirstRun.current = false\n      return\n    }\n\n    isFirstRun.current = false\n    setIsPending(true)\n\n    const handler = setTimeout(() => {\n      setDebouncedValue(value)\n      callback?.(value)\n      setIsPending(false)\n      timeoutRef.current = null\n    }, delay)\n\n    timeoutRef.current = handler\n\n    return () => {\n      clearTimeout(handler)\n      setIsPending(false)\n    }\n  }, [value, delay, callback, immediate])\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n    }\n  }, [])\n\n  return {\n    debouncedValue,\n    flush,\n    cancel,\n    isPending\n  }\n}\n\n// Export for backward compatibility\nexport default useDebounce\n\n// Named export for new API\nexport { useDebounce } "],"names":["useDebounce","value","options","config","delay","callback","immediate","debouncedValue","setDebouncedValue","useState","isPending","setIsPending","timeoutRef","useRef","isFirstRun","cancel","useCallback","current","clearTimeout","flush","useEffect","handler","setTimeout"],"mappings":";;;;;;;;AAoCA;;;;;;AAMG;AACH,MAAMA,WAAW,GAAGA,CAClBC,KAAQ,EACRC,OAAuC,KACf;AACxB;AACA,EAAA,MAAMC,MAAM,GAA0B,OAAOD,OAAO,KAAK,QAAQ,GAC7D;AAAEE,IAAAA,KAAK,EAAEF;AAAS,GAAA,GAClBA,OAAO;EAEX,MAAM;IAAEE,KAAK;IAAEC,QAAQ;AAAEC,IAAAA,SAAS,GAAG;AAAK,GAAE,GAAGH,MAAM;EAErD,MAAM,CAACI,cAAc,EAAEC,iBAAiB,CAAC,GAAGC,cAAQ,CAAIR,KAAK,CAAC;EAC9D,MAAM,CAACS,SAAS,EAAEC,YAAY,CAAC,GAAGF,cAAQ,CAAC,KAAK,CAAC;AACjD,EAAA,MAAMG,UAAU,GAAGC,YAAM,CAAwB,IAAI,CAAC;AACtD,EAAA,MAAMC,UAAU,GAAGD,YAAM,CAAC,IAAI,CAAC;AAE/B,EAAA,MAAME,MAAM,GAAGC,iBAAW,CAAC,MAAK;IAC9B,IAAIJ,UAAU,CAACK,OAAO,EAAE;AACtBC,MAAAA,YAAY,CAACN,UAAU,CAACK,OAAO,CAAC;MAChCL,UAAU,CAACK,OAAO,GAAG,IAAI;MACzBN,YAAY,CAAC,KAAK,CAAC;AACrB;GACD,EAAE,EAAE,CAAC;AAEN,EAAA,MAAMQ,KAAK,GAAGH,iBAAW,CAAC,MAAK;AAC7BD,IAAAA,MAAM,EAAE;IACRP,iBAAiB,CAACP,KAAK,CAAC;AACxBI,IAAAA,QAAQ,aAARA,QAAQ,KAAA,MAAA,GAAA,MAAA,GAARA,QAAQ,CAAGJ,KAAK,CAAC;IACjBU,YAAY,CAAC,KAAK,CAAC;GACpB,EAAE,CAACV,KAAK,EAAEI,QAAQ,EAAEU,MAAM,CAAC,CAAC;AAE7BK,EAAAA,eAAS,CAAC,MAAK;AACb;AACA,IAAA,IAAId,SAAS,IAAIQ,UAAU,CAACG,OAAO,EAAE;MACnCT,iBAAiB,CAACP,KAAK,CAAC;AACxBI,MAAAA,QAAQ,aAARA,QAAQ,KAAA,MAAA,GAAA,MAAA,GAARA,QAAQ,CAAGJ,KAAK,CAAC;MACjBa,UAAU,CAACG,OAAO,GAAG,KAAK;AAC1B,MAAA;AACF;IAEAH,UAAU,CAACG,OAAO,GAAG,KAAK;IAC1BN,YAAY,CAAC,IAAI,CAAC;AAElB,IAAA,MAAMU,OAAO,GAAGC,UAAU,CAAC,MAAK;MAC9Bd,iBAAiB,CAACP,KAAK,CAAC;AACxBI,MAAAA,QAAQ,aAARA,QAAQ,KAAA,MAAA,GAAA,MAAA,GAARA,QAAQ,CAAGJ,KAAK,CAAC;MACjBU,YAAY,CAAC,KAAK,CAAC;MACnBC,UAAU,CAACK,OAAO,GAAG,IAAI;KAC1B,EAAEb,KAAK,CAAC;IAETQ,UAAU,CAACK,OAAO,GAAGI,OAAO;AAE5B,IAAA,OAAO,MAAK;MACVH,YAAY,CAACG,OAAO,CAAC;MACrBV,YAAY,CAAC,KAAK,CAAC;KACpB;GACF,EAAE,CAACV,KAAK,EAAEG,KAAK,EAAEC,QAAQ,EAAEC,SAAS,CAAC,CAAC;AAEvC;AACAc,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,OAAO,MAAK;MACV,IAAIR,UAAU,CAACK,OAAO,EAAE;AACtBC,QAAAA,YAAY,CAACN,UAAU,CAACK,OAAO,CAAC;AAClC;KACD;GACF,EAAE,EAAE,CAAC;EAEN,OAAO;IACLV,cAAc;IACdY,KAAK;IACLJ,MAAM;AACNL,IAAAA;GACD;AACH;;;;;"}

package/dist/react/hooks/useDebounce.esm.js

@@ -0,0 +1,78 @@
+"use client";
+
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+/**
+ * Hook for debouncing values with extended functionality
+ *
+ * @param value - Value to debounce
+ * @param options - Configuration options
+ * @returns Object with debounced value and control methods
+ */
+const useDebounce = (value, options) => {
+  // Backward compatibility support - if number is passed, it's delay
+  const config = typeof options === 'number' ? {
+    delay: options
+  } : options;
+  const {
+    delay,
+    callback,
+    immediate = false
+  } = config;
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  const [isPending, setIsPending] = useState(false);
+  const timeoutRef = useRef(null);
+  const isFirstRun = useRef(true);
+  const cancel = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+      setIsPending(false);
+    }
+  }, []);
+  const flush = useCallback(() => {
+    cancel();
+    setDebouncedValue(value);
+    callback === null || callback === void 0 ? void 0 : callback(value);
+    setIsPending(false);
+  }, [value, callback, cancel]);
+  useEffect(() => {
+    // If immediate === true and this is first run, set value immediately
+    if (immediate && isFirstRun.current) {
+      setDebouncedValue(value);
+      callback === null || callback === void 0 ? void 0 : callback(value);
+      isFirstRun.current = false;
+      return;
+    }
+    isFirstRun.current = false;
+    setIsPending(true);
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+      callback === null || callback === void 0 ? void 0 : callback(value);
+      setIsPending(false);
+      timeoutRef.current = null;
+    }, delay);
+    timeoutRef.current = handler;
+    return () => {
+      clearTimeout(handler);
+      setIsPending(false);
+    };
+  }, [value, delay, callback, immediate]);
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return {
+    debouncedValue,
+    flush,
+    cancel,
+    isPending
+  };
+};
+
+export { useDebounce as default, useDebounce };
+//# sourceMappingURL=useDebounce.esm.js.map