@yamada-ui/react 2.2.6 → 2.2.7-dev-20260804111744

package/dist/esm/core/system/theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.js","names":["ThemeProvider","EmotionThemeProvider"],"sources":["../../../../src/core/system/theme-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProviderProps as EmotionThemeProviderProps } from \"@emotion/react\"\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { Environment } from \"./environment-provider\"\nimport type {\n  ChangeThemeScheme,\n  StyledTheme,\n  Theme,\n  ThemeConfig,\n  ThemeScheme,\n  UsageTheme,\n} from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport {\n  ThemeProvider as EmotionThemeProvider,\n  Global,\n  ThemeContext,\n} from \"@emotion/react\"\nimport { use, useCallback, useEffect, useMemo, useState } from \"react\"\nimport {\n  isEmptyObject,\n  isObject,\n  isShadowRoot,\n  isUndefined,\n  merge,\n} from \"../../utils\"\nimport { THEME_SCHEME_STORAGE_KEY } from \"../constant\"\nimport { css } from \"../css\"\nimport { useEnvironment } from \"./environment-provider\"\nimport { createStorageManager } from \"./storage-manager\"\nimport { useSystem } from \"./system-provider\"\nimport { createVarRules } from \"./var\"\n\nexport const getPreventTransition = (environment: Environment) => {\n  const win = environment.getWindow()\n  const doc = environment.getDocument()\n  const root = environment.getRootElement()\n  const rootNode = environment.getRootNode()\n\n  if (!win || !doc || !root) return\n\n  const css = doc.createElement(\"style\")\n  const shadowRoot = isShadowRoot(rootNode)\n  const selector = shadowRoot ? \":host, *\" : \"*\"\n  const container = shadowRoot ? rootNode : doc.head\n\n  const node = doc.createTextNode(\n    `${selector}{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,\n  )\n\n  css.appendChild(node)\n\n  container.appendChild(css)\n\n  return () => {\n    const forceReflow = () => win.getComputedStyle(root)\n\n    forceReflow()\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        container.removeChild(css)\n      })\n    })\n  }\n}\n\nexport interface ThemeProviderProps\n  extends\n    PropsWithChildren,\n    Omit<EmotionThemeProviderProps, \"children\" | \"theme\"> {\n  /**\n   * The config of the yamada ui.\n   */\n  config?: ThemeConfig\n  /**\n   * If `storage` is `cookie`, the cookie to use.\n   * If not provided, the cookie will be set to `document.cookie`.\n   */\n  cookie?: string\n  /**\n   * The storage to use.\n   * If you are using a server-side rendering library, you should use `cookie`.\n   *\n   * @default 'localStorage'\n   */\n  storage?: Storage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * The theme of the yamada ui.\n   */\n  theme?: UsageTheme\n}\n\nexport const ThemeProvider: FC<ThemeProviderProps> = ({\n  children,\n  config,\n  cookie,\n  storage = cookie ? \"cookie\" : \"localStorage\",\n  storageKey = THEME_SCHEME_STORAGE_KEY,\n  theme = {},\n}) => {\n  const { defaultThemeScheme = \"base\", disableTransitionOnChange } =\n    config ?? {}\n  const storageManager = useMemo(\n    () => createStorageManager(storage, storageKey, defaultThemeScheme, cookie),\n    [cookie, defaultThemeScheme, storage, storageKey],\n  )\n  const environment = useEnvironment()\n  const [themeScheme, setThemeScheme] = useState<ThemeScheme>(\n    storageManager.get(),\n  )\n\n  const changeThemeScheme: ChangeThemeScheme = useCallback(\n    (themeScheme) => {\n      const root = environment.getRootElement()\n\n      const cleanup = disableTransitionOnChange\n        ? getPreventTransition(environment)\n        : undefined\n\n      if (root) root.dataset.theme = themeScheme\n\n      cleanup?.()\n\n      setThemeScheme(themeScheme)\n\n      storageManager.set(themeScheme)\n    },\n    [disableTransitionOnChange, environment, storageManager],\n  )\n\n  useEffect(() => {\n    const themeScheme = storageManager.get()\n\n    changeThemeScheme(themeScheme)\n  }, [changeThemeScheme, storageManager])\n\n  return (\n    <EmotionThemeProvider theme={{ changeThemeScheme, themeScheme, ...theme }}>\n      <GlobalStyles />\n\n      {children}\n    </EmotionThemeProvider>\n  )\n}\n\nexport const GlobalStyles: FC = () => {\n  const system = useSystem()\n  const { theme } = useTheme<UsageTheme>()\n  const { atRule, wrap } = system.layers\n\n  const resetStyle = useMemo(() => {\n    const style = theme.styles?.resetStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const globalStyle = useMemo(() => {\n    const style = theme.styles?.globalStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const varRules = useMemo(() => {\n    return createVarRules(\n      system.config.css?.varRoot ?? \":host, :root\",\n      system.cssVars,\n    )\n  }, [system])\n\n  return (\n    <Global\n      styles={[\n        atRule,\n        wrap(\"tokens\", varRules),\n        wrap(\"reset\", resetStyle),\n        wrap(\"global\", globalStyle),\n      ]}\n    />\n  )\n}\n\n/**\n * `useTheme` is a custom hook that returns a function for retrieving and switching themes.\n *\n * @see https://yamada-ui.com/docs/hooks/use-theme\n */\nexport const useTheme = <Y extends UsageTheme = Theme>() => {\n  const internalTheme = use(ThemeContext) as StyledTheme<Y>\n\n  const theme = useMemo(() => {\n    const { themeScheme } = internalTheme\n\n    if (isUndefined(themeScheme) || themeScheme === \"base\") return internalTheme\n\n    const nestedTheme =\n      \"themeSchemes\" in internalTheme && isObject(internalTheme.themeSchemes)\n        ? internalTheme.themeSchemes[themeScheme as string]\n        : undefined\n\n    if (!nestedTheme) return internalTheme\n\n    return merge<StyledTheme<Y>>(internalTheme, nestedTheme)\n  }, [internalTheme])\n\n  const value = useMemo(() => {\n    const { changeThemeScheme, themeScheme } = internalTheme\n\n    return {\n      changeThemeScheme,\n      internalTheme,\n      theme,\n      themeScheme,\n    }\n  }, [theme, internalTheme])\n\n  return value\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme-provider.js","names":["isShadowRoot","ThemeProvider","EmotionThemeProvider","isEmptyObject","isUndefined","isObject","merge"],"sources":["../../../../src/core/system/theme-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProviderProps as EmotionThemeProviderProps } from \"@emotion/react\"\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { Environment } from \"./environment-provider\"\nimport type {\n  ChangeThemeScheme,\n  StyledTheme,\n  Theme,\n  ThemeConfig,\n  ThemeScheme,\n  UsageTheme,\n} from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport {\n  ThemeProvider as EmotionThemeProvider,\n  Global,\n  ThemeContext,\n} from \"@emotion/react\"\nimport { use, useCallback, useEffect, useMemo, useState } from \"react\"\nimport {\n  isEmptyObject,\n  isObject,\n  isShadowRoot,\n  isUndefined,\n  merge,\n} from \"../../utils\"\nimport { THEME_SCHEME_STORAGE_KEY } from \"../constant\"\nimport { css } from \"../css\"\nimport { useEnvironment } from \"./environment-provider\"\nimport { createStorageManager } from \"./storage-manager\"\nimport { useSystem } from \"./system-provider\"\nimport { createVarRules } from \"./var\"\n\nexport const getPreventTransition = (environment: Environment) => {\n  const win = environment.getWindow()\n  const doc = environment.getDocument()\n  const root = environment.getRootElement()\n  const rootNode = environment.getRootNode()\n\n  if (!win || !doc || !root) return\n\n  const css = doc.createElement(\"style\")\n  const shadowRoot = isShadowRoot(rootNode)\n  const selector = shadowRoot ? \":host, *\" : \"*\"\n  const container = shadowRoot ? rootNode : doc.head\n\n  const node = doc.createTextNode(\n    `${selector}{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,\n  )\n\n  css.appendChild(node)\n\n  container.appendChild(css)\n\n  return () => {\n    const forceReflow = () => win.getComputedStyle(root)\n\n    forceReflow()\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        container.removeChild(css)\n      })\n    })\n  }\n}\n\nexport interface ThemeProviderProps\n  extends\n    PropsWithChildren,\n    Omit<EmotionThemeProviderProps, \"children\" | \"theme\"> {\n  /**\n   * The config of the yamada ui.\n   */\n  config?: ThemeConfig\n  /**\n   * If `storage` is `cookie`, the cookie to use.\n   * If not provided, the cookie will be set to `document.cookie`.\n   */\n  cookie?: string\n  /**\n   * The storage to use.\n   * If you are using a server-side rendering library, you should use `cookie`.\n   *\n   * @default 'localStorage'\n   */\n  storage?: Storage\n  /**\n   * Key of value saved in storage.\n   * By default, it is saved to `local storage`.\n   */\n  storageKey?: string\n  /**\n   * The theme of the yamada ui.\n   */\n  theme?: UsageTheme\n}\n\nexport const ThemeProvider: FC<ThemeProviderProps> = ({\n  children,\n  config,\n  cookie,\n  storage = cookie ? \"cookie\" : \"localStorage\",\n  storageKey = THEME_SCHEME_STORAGE_KEY,\n  theme = {},\n}) => {\n  const { defaultThemeScheme = \"base\", disableTransitionOnChange } =\n    config ?? {}\n  const storageManager = useMemo(\n    () => createStorageManager(storage, storageKey, defaultThemeScheme, cookie),\n    [cookie, defaultThemeScheme, storage, storageKey],\n  )\n  const environment = useEnvironment()\n  const [themeScheme, setThemeScheme] = useState<ThemeScheme>(\n    storageManager.get(),\n  )\n\n  const changeThemeScheme: ChangeThemeScheme = useCallback(\n    (themeScheme) => {\n      const root = environment.getRootElement()\n\n      const cleanup = disableTransitionOnChange\n        ? getPreventTransition(environment)\n        : undefined\n\n      if (root) root.dataset.theme = themeScheme\n\n      cleanup?.()\n\n      setThemeScheme(themeScheme)\n\n      storageManager.set(themeScheme)\n    },\n    [disableTransitionOnChange, environment, storageManager],\n  )\n\n  useEffect(() => {\n    const themeScheme = storageManager.get()\n\n    changeThemeScheme(themeScheme)\n  }, [changeThemeScheme, storageManager])\n\n  return (\n    <EmotionThemeProvider theme={{ changeThemeScheme, themeScheme, ...theme }}>\n      <GlobalStyles />\n\n      {children}\n    </EmotionThemeProvider>\n  )\n}\n\nexport const GlobalStyles: FC = () => {\n  const system = useSystem()\n  const { theme } = useTheme<UsageTheme>()\n  const { atRule, wrap } = system.layers\n\n  const resetStyle = useMemo(() => {\n    const style = theme.styles?.resetStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const globalStyle = useMemo(() => {\n    const style = theme.styles?.globalStyle\n\n    if (!style || isEmptyObject(style)) return undefined\n\n    return css(system, theme)(style)\n  }, [system, theme])\n\n  const varRules = useMemo(() => {\n    return createVarRules(\n      system.config.css?.varRoot ?? \":host, :root\",\n      system.cssVars,\n    )\n  }, [system])\n\n  return (\n    <Global\n      styles={[\n        atRule,\n        wrap(\"tokens\", varRules),\n        wrap(\"reset\", resetStyle),\n        wrap(\"global\", globalStyle),\n      ]}\n    />\n  )\n}\n\n/**\n * `useTheme` is a custom hook that returns a function for retrieving and switching themes.\n *\n * @see https://yamada-ui.com/docs/hooks/use-theme\n */\nexport const useTheme = <Y extends UsageTheme = Theme>() => {\n  const internalTheme = use(ThemeContext) as StyledTheme<Y>\n\n  const theme = useMemo(() => {\n    const { themeScheme } = internalTheme\n\n    if (isUndefined(themeScheme) || themeScheme === \"base\") return internalTheme\n\n    const nestedTheme =\n      \"themeSchemes\" in internalTheme && isObject(internalTheme.themeSchemes)\n        ? internalTheme.themeSchemes[themeScheme as string]\n        : undefined\n\n    if (!nestedTheme) return internalTheme\n\n    return merge<StyledTheme<Y>>(internalTheme, nestedTheme)\n  }, [internalTheme])\n\n  const value = useMemo(() => {\n    const { changeThemeScheme, themeScheme } = internalTheme\n\n    return {\n      changeThemeScheme,\n      internalTheme,\n      theme,\n      themeScheme,\n    }\n  }, [theme, internalTheme])\n\n  return value\n}\n"],"mappings":"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"}

package/dist/esm/core/system/use-system-color-mode.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-system-color-mode.js","names":[],"sources":["../../../../src/core/system/use-system-color-mode.ts"],"sourcesContent":["\"use client\"\n\nimport type { ColorMode } from \"./index.types\"\nimport { useCallback, useEffect, useState } from \"react\"\nimport { fnAll, useCallbackRef, useSafeLayoutEffect } from \"../../utils\"\nimport { useEnvironment } from \"./environment-provider\"\n\nexport interface UseSystemColorModeProps {\n  defaultColorMode: ColorMode\n  callback?: (colorMode: ColorMode) => void\n}\n\n/**\n * `useSystemColorMode` is a custom hook that returns the current system color mode.\n */\nexport const useSystemColorMode = ({\n  callback,\n  defaultColorMode,\n}: UseSystemColorModeProps) => {\n  const { getWindow } = useEnvironment()\n  const callbackRef = useCallbackRef(callback)\n  const [systemColorMode, setSystemColorMode] =\n    useState<ColorMode>(defaultColorMode)\n\n  const getSystemColorMode = useCallback(\n    (fallback?: ColorMode) => {\n      const mql = getWindow()?.matchMedia(\"(prefers-color-scheme: dark)\")\n      const dark = mql?.matches ?? fallback === \"dark\"\n\n      return dark ? \"dark\" : \"light\"\n    },\n    [getWindow],\n  )\n\n  const systemColorModeObserver = useCallback(\n    (func: (cm: ColorMode) => void) => {\n      const mql = getWindow()?.matchMedia(\"(prefers-color-scheme: dark)\")\n\n      const listener = (e: MediaQueryListEvent) => {\n        func(e.matches ? \"dark\" : \"light\")\n      }\n\n      if (typeof mql?.addListener === \"function\") mql.addListener(listener)\n      else mql?.addEventListener(\"change\", listener)\n\n      return () => {\n        if (typeof mql?.removeListener === \"function\")\n          mql.removeListener(listener)\n        else mql?.removeEventListener(\"change\", listener)\n      }\n    },\n    [getWindow],\n  )\n\n  useSafeLayoutEffect(() => {\n    setSystemColorMode(getSystemColorMode())\n  }, [getSystemColorMode])\n\n  useEffect(() => {\n    return systemColorModeObserver(fnAll(setSystemColorMode, callbackRef))\n  }, [systemColorModeObserver, getSystemColorMode, callbackRef])\n\n  return { getSystemColorMode, systemColorMode }\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAa,sBAAsB,EACjC,UACA,uBAC6B;CAC7B,MAAM,EAAE,cAAc,eAAe;CACrC,MAAM,cAAc,eAAe,QAAQ;CAC3C,MAAM,CAAC,iBAAiB,sBACtB,SAAoB,gBAAgB;CAEtC,MAAM,qBAAqB,aACxB,aAAyB;EAIxB,QAHY,UAAU,CAAC,EAAE,WAAW,8BAA8B,EAAA,EAChD,WAAW,aAAa,SAE5B,SAAS;CACzB,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,0BAA0B,aAC7B,SAAkC;EACjC,MAAM,MAAM,UAAU,CAAC,EAAE,WAAW,8BAA8B;EAElE,MAAM,YAAY,MAA2B;GAC3C,KAAK,EAAE,UAAU,SAAS,OAAO;EACnC;EAEA,IAAI,OAAO,KAAK,gBAAgB,YAAY,IAAI,YAAY,QAAQ;OAC/D,KAAK,iBAAiB,UAAU,QAAQ;EAE7C,aAAa;GACX,IAAI,OAAO,KAAK,mBAAmB,YACjC,IAAI,eAAe,QAAQ;QACxB,KAAK,oBAAoB,UAAU,QAAQ;EAClD;CACF,GACA,CAAC,SAAS,CACZ;CAEA,0BAA0B;EACxB,mBAAmB,mBAAmB,CAAC;CACzC,GAAG,CAAC,kBAAkB,CAAC;CAEvB,gBAAgB;EACd,OAAO,yBAAA,GAAA,cAAA,MAAA,CAA8B,oBAAoB,WAAW,CAAC;CACvE,GAAG;EAAC;EAAyB;EAAoB;CAAW,CAAC;CAE7D,OAAO;EAAE;EAAoB;CAAgB;AAC/C"}
+{"version":3,"file":"use-system-color-mode.js","names":["fnAll"],"sources":["../../../../src/core/system/use-system-color-mode.ts"],"sourcesContent":["\"use client\"\n\nimport type { ColorMode } from \"./index.types\"\nimport { useCallback, useEffect, useState } from \"react\"\nimport { fnAll, useCallbackRef, useSafeLayoutEffect } from \"../../utils\"\nimport { useEnvironment } from \"./environment-provider\"\n\nexport interface UseSystemColorModeProps {\n  defaultColorMode: ColorMode\n  callback?: (colorMode: ColorMode) => void\n}\n\n/**\n * `useSystemColorMode` is a custom hook that returns the current system color mode.\n */\nexport const useSystemColorMode = ({\n  callback,\n  defaultColorMode,\n}: UseSystemColorModeProps) => {\n  const { getWindow } = useEnvironment()\n  const callbackRef = useCallbackRef(callback)\n  const [systemColorMode, setSystemColorMode] =\n    useState<ColorMode>(defaultColorMode)\n\n  const getSystemColorMode = useCallback(\n    (fallback?: ColorMode) => {\n      const mql = getWindow()?.matchMedia(\"(prefers-color-scheme: dark)\")\n      const dark = mql?.matches ?? fallback === \"dark\"\n\n      return dark ? \"dark\" : \"light\"\n    },\n    [getWindow],\n  )\n\n  const systemColorModeObserver = useCallback(\n    (func: (cm: ColorMode) => void) => {\n      const mql = getWindow()?.matchMedia(\"(prefers-color-scheme: dark)\")\n\n      const listener = (e: MediaQueryListEvent) => {\n        func(e.matches ? \"dark\" : \"light\")\n      }\n\n      if (typeof mql?.addListener === \"function\") mql.addListener(listener)\n      else mql?.addEventListener(\"change\", listener)\n\n      return () => {\n        if (typeof mql?.removeListener === \"function\")\n          mql.removeListener(listener)\n        else mql?.removeEventListener(\"change\", listener)\n      }\n    },\n    [getWindow],\n  )\n\n  useSafeLayoutEffect(() => {\n    setSystemColorMode(getSystemColorMode())\n  }, [getSystemColorMode])\n\n  useEffect(() => {\n    return systemColorModeObserver(fnAll(setSystemColorMode, callbackRef))\n  }, [systemColorModeObserver, getSystemColorMode, callbackRef])\n\n  return { getSystemColorMode, systemColorMode }\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAa,sBAAsB,EACjC,UACA,uBAC6B;CAC7B,MAAM,EAAE,cAAc,eAAe;CACrC,MAAM,cAAc,eAAe,QAAQ;CAC3C,MAAM,CAAC,iBAAiB,sBACtB,SAAoB,gBAAgB;CAEtC,MAAM,qBAAqB,aACxB,aAAyB;EAIxB,QAHY,UAAU,CAAC,EAAE,WAAW,8BAA8B,EAAA,EAChD,WAAW,aAAa,SAE5B,SAAS;CACzB,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,0BAA0B,aAC7B,SAAkC;EACjC,MAAM,MAAM,UAAU,CAAC,EAAE,WAAW,8BAA8B;EAElE,MAAM,YAAY,MAA2B;GAC3C,KAAK,EAAE,UAAU,SAAS,OAAO;EACnC;EAEA,IAAI,OAAO,KAAK,gBAAgB,YAAY,IAAI,YAAY,QAAQ;OAC/D,KAAK,iBAAiB,UAAU,QAAQ;EAE7C,aAAa;GACX,IAAI,OAAO,KAAK,mBAAmB,YACjC,IAAI,eAAe,QAAQ;QACxB,KAAK,oBAAoB,UAAU,QAAQ;EAClD;CACF,GACA,CAAC,SAAS,CACZ;CAEA,0BAA0B;EACxB,mBAAmB,mBAAmB,CAAC;CACzC,GAAG,CAAC,kBAAkB,CAAC;CAEvB,gBAAgB;EACd,OAAO,yBAAA,GAAwBA,cAAAA,MAAAA,CAAM,oBAAoB,WAAW,CAAC;CACvE,GAAG;EAAC;EAAyB;EAAoB;CAAW,CAAC;CAE7D,OAAO;EAAE;EAAoB;CAAgB;AAC/C"}

package/dist/esm/core/system/var.js

@@ -223,8 +223,9 @@ function createVarRules(varRoot, cssVars) {
 				themeScheme: `[data-theme=${themeScheme}]`
 			};
 			const attr = !dark ? attrs.themeScheme : `${attrs.themeScheme}${attrs.colorMode}`;
+			const selector = createSelector(varRoot, attr);
 			return [[(0, utils_exports.filterEmpty)([
-				createSelector(varRoot, attr),
+				selector,
 				attr,
 				`${attrs.themeScheme} ${attrs.colorMode}`,
 				dark ? `${attrs.colorMode} ${attrs.themeScheme}` : void 0,

package/dist/esm/core/system/var.js.map

@@ -1 +1 @@
-{"version":3,"file":"var.js","names":["calc"],"sources":["../../../../src/core/system/var.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { CSSProperties, StyleValueWithCondition } from \"../css\"\nimport type {\n  ColorMode,\n  CSSMap,\n  CSSVars,\n  DefineThemeValue,\n  System,\n  ThemeToken,\n  UsageTheme,\n  VariableTokens,\n  VariableValue,\n} from \"../system\"\nimport type { Breakpoints } from \"./breakpoint\"\nimport {\n  calc,\n  escape,\n  filterEmpty,\n  isArray,\n  isEmptyObject,\n  isNull,\n  isObject,\n  isString,\n  isUndefined,\n  merge,\n  replaceObject,\n} from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport {\n  animation,\n  colorMix,\n  css,\n  getStyle,\n  gradient,\n  injectKeyframes,\n  isCSSFunction,\n  isCSSVar,\n} from \"../css\"\nimport { isInterpolation } from \"../css/utils\"\nimport { defaultSystem } from \"../system\"\n\ntype ParsedValue = number | string | undefined\n\ninterface Variable {\n  reference: string\n  variable: string\n}\n\nexport function transformInterpolation(\n  value: any,\n  callback: (value: string, fallbackValue?: string) => string,\n) {\n  if (isString(value))\n    return value.replace(/\\{(.*?)\\}/g, (_, value) => {\n      const [token, fallbackValue] = value.split(/,(.+)/)\n\n      return callback(token.trim(), fallbackValue?.trim())\n    })\n  else return value\n}\n\nexport function getVar(token: string, fallback?: string) {\n  if (!token.startsWith(\"--\")) token = `--${token}`\n\n  token = token.replace(/[^-_a-zA-Z0-9]/g, \"\")\n\n  return fallback ? `var(${token}, ${fallback})` : `var(${token})`\n}\n\nexport function getVarName(system: System) {\n  return function (token: string) {\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    return `--${prefix}-${token}`\n  }\n}\n\nexport function getColorSchemeVar(system: System) {\n  return function (value: any, fallback?: string) {\n    if (!isString(value)) return value\n\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    const [, token] = value.split(\".\")\n\n    return getVar(`${prefix}-colorScheme-${token}`, fallback)\n  }\n}\n\nconst isGradient = (token: string) => token.startsWith(\"gradients.\")\nconst isKeyframes = (token: string) => token.startsWith(\"keyframes.\")\nconst isAnimation = (token: string) => token.startsWith(\"animations.\")\nconst isSpace = (token: string) => token.startsWith(\"spaces.\")\nconst isColor = (token: string) => token.startsWith(\"colors.\")\nexport const isColorScheme = (token: any) =>\n  isString(token) && token.startsWith(\"colorScheme.\") && !token.includes(\"/\")\n\nexport function createVars(\n  prefix: string = DEFAULT_VAR_PREFIX,\n  theme: UsageTheme,\n  breakpoints: Breakpoints,\n  rootNode?: System[\"rootNode\"],\n) {\n  return function (tokens: VariableTokens) {\n    function tokenToVar(token: string): Variable {\n      token = token.replace(/\\./g, \"-\")\n      token = token.replace(/\\//g, \"\\\\/\")\n\n      const variable = `--${[prefix, escape(token, \"-\")].filter(Boolean).join(\"-\")}`\n      const reference = `var(${variable})`\n\n      return { reference, variable }\n    }\n\n    return function (\n      cssMap: CSSMap = {},\n      cssVars: CSSVars = { light: {}, dark: {} },\n      prevTokens?: VariableTokens,\n    ): { cssMap: CSSMap; cssVars: CSSVars } {\n      const system: System = { ...defaultSystem, cssMap, rootNode }\n      const options = { css, system, theme }\n\n      function getRelatedReference(\n        token: string,\n        value: ParsedValue = \"\",\n      ): [ParsedValue, Exclude<ParsedValue, undefined>] {\n        const relatedToken = [token.split(\".\")[0], value].join(\".\")\n\n        if (token === relatedToken) return [undefined, value]\n\n        const targetToken = tokens[relatedToken] ?? prevTokens?.[relatedToken]\n\n        if (!targetToken) return [undefined, value]\n\n        const { reference, variable } = tokenToVar(relatedToken)\n\n        return [variable, reference]\n      }\n\n      function valueToVar(value: any) {\n        return transformInterpolation(value, (value, fallbackValue) => {\n          if (value.includes(\"colors.\") || value.includes(\"colorScheme.\")) {\n            if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n            return colorMix(value, { fallback: fallbackValue, system })\n          } else {\n            const token = tokens[value] ?? prevTokens?.[value]\n\n            if (token) {\n              return tokenToVar(value).reference\n            } else if (value in cssMap && cssMap[value]?.ref) {\n              return cssMap[value].ref\n            } else if (fallbackValue) {\n              fallbackValue =\n                fallbackValue in cssMap && cssMap[fallbackValue]?.ref\n                  ? cssMap[fallbackValue]?.ref\n                  : fallbackValue\n\n              return `var(--${prefix}-${value}, ${fallbackValue})`\n            } else {\n              return `var(--${prefix}-${value})`\n            }\n          }\n        })\n      }\n\n      function createNegativeVar(token: string, reference: string) {\n        const paths = token.split(\".\")\n        const [start, ...rest] = paths\n\n        const negativeToken = `${start}.-${rest.join(\".\")}`\n\n        const negativeReference = calc.negate(reference)\n\n        return { negativeReference, negativeToken }\n      }\n\n      function createAnimationVar(value: VariableValue) {\n        if (isArray(value))\n          return value.map((value) => animation(value, options)).join(\",\")\n        else return animation(value, options)\n      }\n\n      function createGradientVar(token: string, value: DefineThemeValue) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return gradient(value, options)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable ? reference : gradient(value, options)\n          }\n        }\n      }\n\n      function createKeyframesVar(token: string, value: any) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return injectKeyframes(css(system, theme)(value), rootNode)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : injectKeyframes(css(system, theme)(value), rootNode)\n          }\n        }\n      }\n\n      function createColorVar(\n        token: string,\n        properties: string[],\n        value: DefineThemeValue,\n      ) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return colorMix(value, { ...options, properties })\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : colorMix(value, { ...options, properties })\n          }\n        }\n      }\n\n      function createVar(\n        token: string,\n        value: VariableValue,\n        variable: string,\n      ) {\n        return function (\n          semantic: boolean,\n          colorMode: ColorMode = \"light\",\n          breakpoint: string = \"base\",\n        ) {\n          if (isAnimation(token)) value = createAnimationVar(value)\n\n          if (isArray(value)) {\n            value.forEach((value, index) =>\n              createVar(token, value, variable)(\n                semantic,\n                !index ? \"light\" : \"dark\",\n                breakpoint,\n              ),\n            )\n          } else if (breakpoints.isResponsive(value, true)) {\n            Object.entries(value).forEach(([breakpoint, value]) =>\n              createVar(token, value, variable)(\n                semantic,\n                colorMode,\n                breakpoint,\n              ),\n            )\n          } else {\n            const computedValue: DefineThemeValue = valueToVar(value)\n\n            let resolvedValue: DefineThemeValue | Dict = computedValue\n\n            if (isKeyframes(token)) {\n              resolvedValue = createKeyframesVar(token, computedValue)(semantic)\n            } else if (isGradient(token)) {\n              resolvedValue = createGradientVar(token, computedValue)(semantic)\n            } else if (isColor(token)) {\n              resolvedValue = createColorVar(\n                token,\n                [variable],\n                computedValue,\n              )(semantic)\n            } else if (semantic) {\n              const [, reference] = getRelatedReference(token, computedValue)\n\n              resolvedValue = reference\n            }\n\n            if (!isObject(resolvedValue))\n              resolvedValue = { [variable]: resolvedValue }\n\n            const query = breakpoints.getQuery(breakpoint)\n\n            if (query)\n              resolvedValue = { [colorMode]: { [query]: resolvedValue } }\n            else resolvedValue = { [colorMode]: resolvedValue }\n\n            cssVars = merge(cssVars, resolvedValue)\n          }\n        }\n      }\n\n      for (const [token, { semantic, value }] of Object.entries(tokens)) {\n        const { reference, variable } = tokenToVar(token)\n\n        createVar(token, value, variable)(semantic)\n\n        if (isSpace(token)) {\n          const { negativeReference, negativeToken } = createNegativeVar(\n            token,\n            reference,\n          )\n\n          cssMap[negativeToken] = { ref: negativeReference, var: variable }\n        }\n\n        cssMap[token] = { ref: reference, var: variable }\n      }\n\n      return { cssMap, cssVars }\n    }\n  }\n}\n\nexport type CreateVars = ReturnType<ReturnType<typeof createVars>>\n\nexport function mergeVars(...fns: CreateVars[]) {\n  return function (prevTokens?: VariableTokens) {\n    let cssMap: CSSMap = {}\n    let cssVars: CSSVars = { light: {}, dark: {} }\n\n    for (const fn of fns) {\n      const result = fn(cssMap, cssVars, prevTokens)\n\n      cssMap = { ...cssMap, ...result.cssMap }\n      cssVars = { ...cssVars, ...result.cssVars }\n    }\n\n    return { cssMap, cssVars }\n  }\n}\n\nfunction createSelector(selectors: string, attr?: string): string {\n  return selectors\n    .split(\",\")\n    .map((selector) => {\n      selector = selector.trim()\n\n      if (!attr) return selector\n      else if (selector === \":host\") return `${selector}(${attr})`\n      else return `${selector}${attr}`\n    })\n    .join(\", \")\n}\n\nexport function createVarRules(varRoot: string, cssVars: CSSVars): Dict {\n  return Object.fromEntries(\n    Object.entries(cssVars).flatMap(([colorMode, cssVars]) => {\n      if (isEmptyObject(cssVars)) return []\n\n      if (colorMode === \"light\" || colorMode === \"dark\") {\n        const dark = colorMode === \"dark\"\n        const attr = `[data-mode=${colorMode}]`\n        const selector = createSelector(varRoot, dark ? attr : undefined)\n\n        return [[[selector, attr].join(\", \"), cssVars]]\n      } else {\n        return Object.entries<Dict>(cssVars).flatMap(([themeScheme, cssVars]) =>\n          Object.entries(cssVars).flatMap(([colorMode, cssVars]) => {\n            if (isEmptyObject(cssVars)) return []\n\n            const dark = colorMode === \"dark\"\n            const attrs = {\n              colorMode: `[data-mode=${colorMode}]`,\n              themeScheme: `[data-theme=${themeScheme}]`,\n            }\n            const attr = !dark\n              ? attrs.themeScheme\n              : `${attrs.themeScheme}${attrs.colorMode}`\n            const selector = createSelector(varRoot, attr)\n\n            return [\n              [\n                filterEmpty([\n                  selector,\n                  attr,\n                  `${attrs.themeScheme} ${attrs.colorMode}`,\n                  dark ? `${attrs.colorMode} ${attrs.themeScheme}` : undefined,\n                  `:host(${attrs.themeScheme}) ${attrs.colorMode}`,\n                  dark\n                    ? `:host(${attrs.colorMode}) ${attrs.themeScheme}`\n                    : undefined,\n                ]).join(\", \"),\n                cssVars,\n              ],\n            ]\n          }),\n        )\n      }\n    }),\n  )\n}\n\nexport function varAttr<Y = StyleValueWithCondition<number | string>>(\n  value: undefined | Y,\n  token?: ThemeToken,\n  fallbackValue?: string,\n): undefined | Y {\n  if (isUndefined(value) || isNull(value) || isCSSFunction(value)) return value\n\n  if (isObject(value) || isArray(value))\n    return replaceObject(value, (value) => varAttr(value, token, fallbackValue))\n  else\n    return token\n      ? (`{${token}.${value as number | string}, ${fallbackValue ?? (value as number | string)}}` as Y)\n      : value\n}\n\nexport function injectVars<Y extends Dict | Dict[] | undefined>(\n  objOrArray: Y,\n  targets: { [key in CSSProperties]?: string },\n  isInvalidProp?: (prop: string) => boolean,\n): Y {\n  if (!objOrArray) return objOrArray\n\n  function callback(objOrArray: Dict) {\n    return Object.fromEntries(\n      Object.entries(objOrArray).flatMap(function ([prop, value]) {\n        if (isInvalidProp?.(prop)) return [[prop, value]]\n\n        const target = targets[prop]\n        const result: [string, any][] = []\n\n        if (target) {\n          const { token } = getStyle(prop) ?? {}\n\n          if (isCSSVar(value) || isInterpolation(value))\n            result.push([`--${target}`, value])\n          else\n            result.push([\n              `--${target}`,\n              replaceObject(value, (value) =>\n                token ? `{${token}.${value}, ${value}}` : value,\n              ),\n            ])\n        } else if (isObject(value)) {\n          result.push([prop, injectVars(value, targets)])\n        } else {\n          result.push([prop, value])\n        }\n\n        return result\n      }),\n    )\n  }\n\n  if (isArray(objOrArray)) return objOrArray.map(callback) as Y\n  else return callback(objOrArray) as Y\n}\n"],"mappings":"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"}
+{"version":3,"file":"var.js","names":["isString","escape","calc","isArray","isObject","merge","isEmptyObject","filterEmpty","isUndefined","isNull","replaceObject"],"sources":["../../../../src/core/system/var.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { CSSProperties, StyleValueWithCondition } from \"../css\"\nimport type {\n  ColorMode,\n  CSSMap,\n  CSSVars,\n  DefineThemeValue,\n  System,\n  ThemeToken,\n  UsageTheme,\n  VariableTokens,\n  VariableValue,\n} from \"../system\"\nimport type { Breakpoints } from \"./breakpoint\"\nimport {\n  calc,\n  escape,\n  filterEmpty,\n  isArray,\n  isEmptyObject,\n  isNull,\n  isObject,\n  isString,\n  isUndefined,\n  merge,\n  replaceObject,\n} from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport {\n  animation,\n  colorMix,\n  css,\n  getStyle,\n  gradient,\n  injectKeyframes,\n  isCSSFunction,\n  isCSSVar,\n} from \"../css\"\nimport { isInterpolation } from \"../css/utils\"\nimport { defaultSystem } from \"../system\"\n\ntype ParsedValue = number | string | undefined\n\ninterface Variable {\n  reference: string\n  variable: string\n}\n\nexport function transformInterpolation(\n  value: any,\n  callback: (value: string, fallbackValue?: string) => string,\n) {\n  if (isString(value))\n    return value.replace(/\\{(.*?)\\}/g, (_, value) => {\n      const [token, fallbackValue] = value.split(/,(.+)/)\n\n      return callback(token.trim(), fallbackValue?.trim())\n    })\n  else return value\n}\n\nexport function getVar(token: string, fallback?: string) {\n  if (!token.startsWith(\"--\")) token = `--${token}`\n\n  token = token.replace(/[^-_a-zA-Z0-9]/g, \"\")\n\n  return fallback ? `var(${token}, ${fallback})` : `var(${token})`\n}\n\nexport function getVarName(system: System) {\n  return function (token: string) {\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    return `--${prefix}-${token}`\n  }\n}\n\nexport function getColorSchemeVar(system: System) {\n  return function (value: any, fallback?: string) {\n    if (!isString(value)) return value\n\n    const prefix = system.config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n\n    const [, token] = value.split(\".\")\n\n    return getVar(`${prefix}-colorScheme-${token}`, fallback)\n  }\n}\n\nconst isGradient = (token: string) => token.startsWith(\"gradients.\")\nconst isKeyframes = (token: string) => token.startsWith(\"keyframes.\")\nconst isAnimation = (token: string) => token.startsWith(\"animations.\")\nconst isSpace = (token: string) => token.startsWith(\"spaces.\")\nconst isColor = (token: string) => token.startsWith(\"colors.\")\nexport const isColorScheme = (token: any) =>\n  isString(token) && token.startsWith(\"colorScheme.\") && !token.includes(\"/\")\n\nexport function createVars(\n  prefix: string = DEFAULT_VAR_PREFIX,\n  theme: UsageTheme,\n  breakpoints: Breakpoints,\n  rootNode?: System[\"rootNode\"],\n) {\n  return function (tokens: VariableTokens) {\n    function tokenToVar(token: string): Variable {\n      token = token.replace(/\\./g, \"-\")\n      token = token.replace(/\\//g, \"\\\\/\")\n\n      const variable = `--${[prefix, escape(token, \"-\")].filter(Boolean).join(\"-\")}`\n      const reference = `var(${variable})`\n\n      return { reference, variable }\n    }\n\n    return function (\n      cssMap: CSSMap = {},\n      cssVars: CSSVars = { light: {}, dark: {} },\n      prevTokens?: VariableTokens,\n    ): { cssMap: CSSMap; cssVars: CSSVars } {\n      const system: System = { ...defaultSystem, cssMap, rootNode }\n      const options = { css, system, theme }\n\n      function getRelatedReference(\n        token: string,\n        value: ParsedValue = \"\",\n      ): [ParsedValue, Exclude<ParsedValue, undefined>] {\n        const relatedToken = [token.split(\".\")[0], value].join(\".\")\n\n        if (token === relatedToken) return [undefined, value]\n\n        const targetToken = tokens[relatedToken] ?? prevTokens?.[relatedToken]\n\n        if (!targetToken) return [undefined, value]\n\n        const { reference, variable } = tokenToVar(relatedToken)\n\n        return [variable, reference]\n      }\n\n      function valueToVar(value: any) {\n        return transformInterpolation(value, (value, fallbackValue) => {\n          if (value.includes(\"colors.\") || value.includes(\"colorScheme.\")) {\n            if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n            return colorMix(value, { fallback: fallbackValue, system })\n          } else {\n            const token = tokens[value] ?? prevTokens?.[value]\n\n            if (token) {\n              return tokenToVar(value).reference\n            } else if (value in cssMap && cssMap[value]?.ref) {\n              return cssMap[value].ref\n            } else if (fallbackValue) {\n              fallbackValue =\n                fallbackValue in cssMap && cssMap[fallbackValue]?.ref\n                  ? cssMap[fallbackValue]?.ref\n                  : fallbackValue\n\n              return `var(--${prefix}-${value}, ${fallbackValue})`\n            } else {\n              return `var(--${prefix}-${value})`\n            }\n          }\n        })\n      }\n\n      function createNegativeVar(token: string, reference: string) {\n        const paths = token.split(\".\")\n        const [start, ...rest] = paths\n\n        const negativeToken = `${start}.-${rest.join(\".\")}`\n\n        const negativeReference = calc.negate(reference)\n\n        return { negativeReference, negativeToken }\n      }\n\n      function createAnimationVar(value: VariableValue) {\n        if (isArray(value))\n          return value.map((value) => animation(value, options)).join(\",\")\n        else return animation(value, options)\n      }\n\n      function createGradientVar(token: string, value: DefineThemeValue) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return gradient(value, options)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable ? reference : gradient(value, options)\n          }\n        }\n      }\n\n      function createKeyframesVar(token: string, value: any) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return injectKeyframes(css(system, theme)(value), rootNode)\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : injectKeyframes(css(system, theme)(value), rootNode)\n          }\n        }\n      }\n\n      function createColorVar(\n        token: string,\n        properties: string[],\n        value: DefineThemeValue,\n      ) {\n        return function (semantic: boolean) {\n          if (!semantic) {\n            return colorMix(value, { ...options, properties })\n          } else {\n            const [variable, reference] = getRelatedReference(token, value)\n\n            return variable\n              ? reference\n              : colorMix(value, { ...options, properties })\n          }\n        }\n      }\n\n      function createVar(\n        token: string,\n        value: VariableValue,\n        variable: string,\n      ) {\n        return function (\n          semantic: boolean,\n          colorMode: ColorMode = \"light\",\n          breakpoint: string = \"base\",\n        ) {\n          if (isAnimation(token)) value = createAnimationVar(value)\n\n          if (isArray(value)) {\n            value.forEach((value, index) =>\n              createVar(token, value, variable)(\n                semantic,\n                !index ? \"light\" : \"dark\",\n                breakpoint,\n              ),\n            )\n          } else if (breakpoints.isResponsive(value, true)) {\n            Object.entries(value).forEach(([breakpoint, value]) =>\n              createVar(token, value, variable)(\n                semantic,\n                colorMode,\n                breakpoint,\n              ),\n            )\n          } else {\n            const computedValue: DefineThemeValue = valueToVar(value)\n\n            let resolvedValue: DefineThemeValue | Dict = computedValue\n\n            if (isKeyframes(token)) {\n              resolvedValue = createKeyframesVar(token, computedValue)(semantic)\n            } else if (isGradient(token)) {\n              resolvedValue = createGradientVar(token, computedValue)(semantic)\n            } else if (isColor(token)) {\n              resolvedValue = createColorVar(\n                token,\n                [variable],\n                computedValue,\n              )(semantic)\n            } else if (semantic) {\n              const [, reference] = getRelatedReference(token, computedValue)\n\n              resolvedValue = reference\n            }\n\n            if (!isObject(resolvedValue))\n              resolvedValue = { [variable]: resolvedValue }\n\n            const query = breakpoints.getQuery(breakpoint)\n\n            if (query)\n              resolvedValue = { [colorMode]: { [query]: resolvedValue } }\n            else resolvedValue = { [colorMode]: resolvedValue }\n\n            cssVars = merge(cssVars, resolvedValue)\n          }\n        }\n      }\n\n      for (const [token, { semantic, value }] of Object.entries(tokens)) {\n        const { reference, variable } = tokenToVar(token)\n\n        createVar(token, value, variable)(semantic)\n\n        if (isSpace(token)) {\n          const { negativeReference, negativeToken } = createNegativeVar(\n            token,\n            reference,\n          )\n\n          cssMap[negativeToken] = { ref: negativeReference, var: variable }\n        }\n\n        cssMap[token] = { ref: reference, var: variable }\n      }\n\n      return { cssMap, cssVars }\n    }\n  }\n}\n\nexport type CreateVars = ReturnType<ReturnType<typeof createVars>>\n\nexport function mergeVars(...fns: CreateVars[]) {\n  return function (prevTokens?: VariableTokens) {\n    let cssMap: CSSMap = {}\n    let cssVars: CSSVars = { light: {}, dark: {} }\n\n    for (const fn of fns) {\n      const result = fn(cssMap, cssVars, prevTokens)\n\n      cssMap = { ...cssMap, ...result.cssMap }\n      cssVars = { ...cssVars, ...result.cssVars }\n    }\n\n    return { cssMap, cssVars }\n  }\n}\n\nfunction createSelector(selectors: string, attr?: string): string {\n  return selectors\n    .split(\",\")\n    .map((selector) => {\n      selector = selector.trim()\n\n      if (!attr) return selector\n      else if (selector === \":host\") return `${selector}(${attr})`\n      else return `${selector}${attr}`\n    })\n    .join(\", \")\n}\n\nexport function createVarRules(varRoot: string, cssVars: CSSVars): Dict {\n  return Object.fromEntries(\n    Object.entries(cssVars).flatMap(([colorMode, cssVars]) => {\n      if (isEmptyObject(cssVars)) return []\n\n      if (colorMode === \"light\" || colorMode === \"dark\") {\n        const dark = colorMode === \"dark\"\n        const attr = `[data-mode=${colorMode}]`\n        const selector = createSelector(varRoot, dark ? attr : undefined)\n\n        return [[[selector, attr].join(\", \"), cssVars]]\n      } else {\n        return Object.entries<Dict>(cssVars).flatMap(([themeScheme, cssVars]) =>\n          Object.entries(cssVars).flatMap(([colorMode, cssVars]) => {\n            if (isEmptyObject(cssVars)) return []\n\n            const dark = colorMode === \"dark\"\n            const attrs = {\n              colorMode: `[data-mode=${colorMode}]`,\n              themeScheme: `[data-theme=${themeScheme}]`,\n            }\n            const attr = !dark\n              ? attrs.themeScheme\n              : `${attrs.themeScheme}${attrs.colorMode}`\n            const selector = createSelector(varRoot, attr)\n\n            return [\n              [\n                filterEmpty([\n                  selector,\n                  attr,\n                  `${attrs.themeScheme} ${attrs.colorMode}`,\n                  dark ? `${attrs.colorMode} ${attrs.themeScheme}` : undefined,\n                  `:host(${attrs.themeScheme}) ${attrs.colorMode}`,\n                  dark\n                    ? `:host(${attrs.colorMode}) ${attrs.themeScheme}`\n                    : undefined,\n                ]).join(\", \"),\n                cssVars,\n              ],\n            ]\n          }),\n        )\n      }\n    }),\n  )\n}\n\nexport function varAttr<Y = StyleValueWithCondition<number | string>>(\n  value: undefined | Y,\n  token?: ThemeToken,\n  fallbackValue?: string,\n): undefined | Y {\n  if (isUndefined(value) || isNull(value) || isCSSFunction(value)) return value\n\n  if (isObject(value) || isArray(value))\n    return replaceObject(value, (value) => varAttr(value, token, fallbackValue))\n  else\n    return token\n      ? (`{${token}.${value as number | string}, ${fallbackValue ?? (value as number | string)}}` as Y)\n      : value\n}\n\nexport function injectVars<Y extends Dict | Dict[] | undefined>(\n  objOrArray: Y,\n  targets: { [key in CSSProperties]?: string },\n  isInvalidProp?: (prop: string) => boolean,\n): Y {\n  if (!objOrArray) return objOrArray\n\n  function callback(objOrArray: Dict) {\n    return Object.fromEntries(\n      Object.entries(objOrArray).flatMap(function ([prop, value]) {\n        if (isInvalidProp?.(prop)) return [[prop, value]]\n\n        const target = targets[prop]\n        const result: [string, any][] = []\n\n        if (target) {\n          const { token } = getStyle(prop) ?? {}\n\n          if (isCSSVar(value) || isInterpolation(value))\n            result.push([`--${target}`, value])\n          else\n            result.push([\n              `--${target}`,\n              replaceObject(value, (value) =>\n                token ? `{${token}.${value}, ${value}}` : value,\n              ),\n            ])\n        } else if (isObject(value)) {\n          result.push([prop, injectVars(value, targets)])\n        } else {\n          result.push([prop, value])\n        }\n\n        return result\n      }),\n    )\n  }\n\n  if (isArray(objOrArray)) return objOrArray.map(callback) as Y\n  else return callback(objOrArray) as Y\n}\n"],"mappings":";;;;;;;;;AAgDA,SAAgB,uBACd,OACA,UACA;CACA,KAAA,GAAIA,cAAAA,SAAAA,CAAS,KAAK,GAChB,OAAO,MAAM,QAAQ,eAAe,GAAG,UAAU;EAC/C,MAAM,CAAC,OAAO,iBAAiB,MAAM,MAAM,OAAO;EAElD,OAAO,SAAS,MAAM,KAAK,GAAG,eAAe,KAAK,CAAC;CACrD,CAAC;MACE,OAAO;AACd;AAEA,SAAgB,OAAO,OAAe,UAAmB;CACvD,IAAI,CAAC,MAAM,WAAW,IAAI,GAAG,QAAQ,KAAK;CAE1C,QAAQ,MAAM,QAAQ,mBAAmB,EAAE;CAE3C,OAAO,WAAW,OAAO,MAAM,IAAI,SAAS,KAAK,OAAO,MAAM;AAChE;AAEA,SAAgB,WAAW,QAAgB;CACzC,OAAO,SAAU,OAAe;EAG9B,OAAO,KAFQ,OAAO,OAAO,KAAK,aAAA,KAEf,GAAG;CACxB;AACF;AAEA,SAAgB,kBAAkB,QAAgB;CAChD,OAAO,SAAU,OAAY,UAAmB;EAC9C,IAAI,EAAA,GAACA,cAAAA,SAAAA,CAAS,KAAK,GAAG,OAAO;EAE7B,MAAM,SAAS,OAAO,OAAO,KAAK,aAAA;EAElC,MAAM,GAAG,SAAS,MAAM,MAAM,GAAG;EAEjC,OAAO,OAAO,GAAG,OAAO,eAAe,SAAS,QAAQ;CAC1D;AACF;AAEA,MAAM,cAAc,UAAkB,MAAM,WAAW,YAAY;AACnE,MAAM,eAAe,UAAkB,MAAM,WAAW,YAAY;AACpE,MAAM,eAAe,UAAkB,MAAM,WAAW,aAAa;AACrE,MAAM,WAAW,UAAkB,MAAM,WAAW,SAAS;AAC7D,MAAM,WAAW,UAAkB,MAAM,WAAW,SAAS;AAC7D,MAAa,iBAAiB,WAAA,GAC5BA,cAAAA,SAAAA,CAAS,KAAK,KAAK,MAAM,WAAW,cAAc,KAAK,CAAC,MAAM,SAAS,GAAG;AAE5E,SAAgB,WACd,SAAA,MACA,OACA,aACA,UACA;CACA,OAAO,SAAU,QAAwB;EACvC,SAAS,WAAW,OAAyB;GAC3C,QAAQ,MAAM,QAAQ,OAAO,GAAG;GAChC,QAAQ,MAAM,QAAQ,OAAO,KAAK;GAElC,MAAM,WAAW,KAAK,CAAC,SAAA,GAAQC,cAAAA,OAAAA,CAAO,OAAO,GAAG,CAAC,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAG3E,OAAO;IAAE,WAAA,OAFgB,SAAS;IAEd;GAAS;EAC/B;EAEA,OAAO,SACL,SAAiB,CAAC,GAClB,UAAmB;GAAE,OAAO,CAAC;GAAG,MAAM,CAAC;EAAE,GACzC,YACsC;GACtC,MAAM,SAAiB;IAAE,GAAG;IAAe;IAAQ;GAAS;GAC5D,MAAM,UAAU;IAAE;IAAK;IAAQ;GAAM;GAErC,SAAS,oBACP,OACA,QAAqB,IAC2B;IAChD,MAAM,eAAe,CAAC,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,GAAG;IAE1D,IAAI,UAAU,cAAc,OAAO,CAAC,KAAA,GAAW,KAAK;IAIpD,IAAI,EAFgB,OAAO,iBAAiB,aAAa,gBAEvC,OAAO,CAAC,KAAA,GAAW,KAAK;IAE1C,MAAM,EAAE,WAAW,aAAa,WAAW,YAAY;IAEvD,OAAO,CAAC,UAAU,SAAS;GAC7B;GAEA,SAAS,WAAW,OAAY;IAC9B,OAAO,uBAAuB,QAAQ,OAAO,kBAAkB;KAC7D,IAAI,MAAM,SAAS,SAAS,KAAK,MAAM,SAAS,cAAc,GAAG;MAC/D,IAAI,cAAc,KAAK,GAAG,OAAO,kBAAkB,MAAM,CAAC,CAAC,KAAK;MAEhE,OAAO,SAAS,OAAO;OAAE,UAAU;OAAe;MAAO,CAAC;KAC5D,OAGE,IAFc,OAAO,UAAU,aAAa,QAG1C,OAAO,WAAW,KAAK,CAAC,CAAC;UACpB,IAAI,SAAS,UAAU,OAAO,MAAM,EAAE,KAC3C,OAAO,OAAO,MAAM,CAAC;UAChB,IAAI,eAAe;MACxB,gBACE,iBAAiB,UAAU,OAAO,cAAc,EAAE,MAC9C,OAAO,cAAc,EAAE,MACvB;MAEN,OAAO,SAAS,OAAO,GAAG,MAAM,IAAI,cAAc;KACpD,OACE,OAAO,SAAS,OAAO,GAAG,MAAM;IAGtC,CAAC;GACH;GAEA,SAAS,kBAAkB,OAAe,WAAmB;IAE3D,MAAM,CAAC,OAAO,GAAG,QADH,MAAM,MAAM,GACG;IAE7B,MAAM,gBAAgB,GAAG,MAAM,IAAI,KAAK,KAAK,GAAG;IAIhD,OAAO;KAAE,mBAFiBC,cAAAA,KAAK,OAAO,SAEb;KAAG;IAAc;GAC5C;GAEA,SAAS,mBAAmB,OAAsB;IAChD,KAAA,GAAIC,cAAAA,QAAAA,CAAQ,KAAK,GACf,OAAO,MAAM,KAAK,UAAU,UAAU,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,GAAG;SAC5D,OAAO,UAAU,OAAO,OAAO;GACtC;GAEA,SAAS,kBAAkB,OAAe,OAAyB;IACjE,OAAO,SAAU,UAAmB;KAClC,IAAI,CAAC,UACH,OAAO,SAAS,OAAO,OAAO;UACzB;MACL,MAAM,CAAC,UAAU,aAAa,oBAAoB,OAAO,KAAK;MAE9D,OAAO,WAAW,YAAY,SAAS,OAAO,OAAO;KACvD;IACF;GACF;GAEA,SAAS,mBAAmB,OAAe,OAAY;IACrD,OAAO,SAAU,UAAmB;KAClC,IAAI,CAAC,UACH,OAAO,gBAAgB,IAAI,QAAQ,KAAK,CAAC,CAAC,KAAK,GAAG,QAAQ;UACrD;MACL,MAAM,CAAC,UAAU,aAAa,oBAAoB,OAAO,KAAK;MAE9D,OAAO,WACH,YACA,gBAAgB,IAAI,QAAQ,KAAK,CAAC,CAAC,KAAK,GAAG,QAAQ;KACzD;IACF;GACF;GAEA,SAAS,eACP,OACA,YACA,OACA;IACA,OAAO,SAAU,UAAmB;KAClC,IAAI,CAAC,UACH,OAAO,SAAS,OAAO;MAAE,GAAG;MAAS;KAAW,CAAC;UAC5C;MACL,MAAM,CAAC,UAAU,aAAa,oBAAoB,OAAO,KAAK;MAE9D,OAAO,WACH,YACA,SAAS,OAAO;OAAE,GAAG;OAAS;MAAW,CAAC;KAChD;IACF;GACF;GAEA,SAAS,UACP,OACA,OACA,UACA;IACA,OAAO,SACL,UACA,YAAuB,SACvB,aAAqB,QACrB;KACA,IAAI,YAAY,KAAK,GAAG,QAAQ,mBAAmB,KAAK;KAExD,KAAA,GAAIA,cAAAA,QAAAA,CAAQ,KAAK,GACf,MAAM,SAAS,OAAO,UACpB,UAAU,OAAO,OAAO,QAAQ,CAAC,CAC/B,UACA,CAAC,QAAQ,UAAU,QACnB,UACF,CACF;UACK,IAAI,YAAY,aAAa,OAAO,IAAI,GAC7C,OAAO,QAAQ,KAAK,CAAC,CAAC,SAAS,CAAC,YAAY,WAC1C,UAAU,OAAO,OAAO,QAAQ,CAAC,CAC/B,UACA,WACA,UACF,CACF;UACK;MACL,MAAM,gBAAkC,WAAW,KAAK;MAExD,IAAI,gBAAyC;MAE7C,IAAI,YAAY,KAAK,GACnB,gBAAgB,mBAAmB,OAAO,aAAa,CAAC,CAAC,QAAQ;WAC5D,IAAI,WAAW,KAAK,GACzB,gBAAgB,kBAAkB,OAAO,aAAa,CAAC,CAAC,QAAQ;WAC3D,IAAI,QAAQ,KAAK,GACtB,gBAAgB,eACd,OACA,CAAC,QAAQ,GACT,aACF,CAAC,CAAC,QAAQ;WACL,IAAI,UAAU;OACnB,MAAM,GAAG,aAAa,oBAAoB,OAAO,aAAa;OAE9D,gBAAgB;MAClB;MAEA,IAAI,EAAA,GAACC,cAAAA,SAAAA,CAAS,aAAa,GACzB,gBAAgB,GAAG,WAAW,cAAc;MAE9C,MAAM,QAAQ,YAAY,SAAS,UAAU;MAE7C,IAAI,OACF,gBAAgB,GAAG,YAAY,GAAG,QAAQ,cAAc,EAAE;WACvD,gBAAgB,GAAG,YAAY,cAAc;MAElD,WAAA,GAAUC,cAAAA,MAAAA,CAAM,SAAS,aAAa;KACxC;IACF;GACF;GAEA,KAAK,MAAM,CAAC,OAAO,EAAE,UAAU,YAAY,OAAO,QAAQ,MAAM,GAAG;IACjE,MAAM,EAAE,WAAW,aAAa,WAAW,KAAK;IAEhD,UAAU,OAAO,OAAO,QAAQ,CAAC,CAAC,QAAQ;IAE1C,IAAI,QAAQ,KAAK,GAAG;KAClB,MAAM,EAAE,mBAAmB,kBAAkB,kBAC3C,OACA,SACF;KAEA,OAAO,iBAAiB;MAAE,KAAK;MAAmB,KAAK;KAAS;IAClE;IAEA,OAAO,SAAS;KAAE,KAAK;KAAW,KAAK;IAAS;GAClD;GAEA,OAAO;IAAE;IAAQ;GAAQ;EAC3B;CACF;AACF;AAIA,SAAgB,UAAU,GAAG,KAAmB;CAC9C,OAAO,SAAU,YAA6B;EAC5C,IAAI,SAAiB,CAAC;EACtB,IAAI,UAAmB;GAAE,OAAO,CAAC;GAAG,MAAM,CAAC;EAAE;EAE7C,KAAK,MAAM,MAAM,KAAK;GACpB,MAAM,SAAS,GAAG,QAAQ,SAAS,UAAU;GAE7C,SAAS;IAAE,GAAG;IAAQ,GAAG,OAAO;GAAO;GACvC,UAAU;IAAE,GAAG;IAAS,GAAG,OAAO;GAAQ;EAC5C;EAEA,OAAO;GAAE;GAAQ;EAAQ;CAC3B;AACF;AAEA,SAAS,eAAe,WAAmB,MAAuB;CAChE,OAAO,UACJ,MAAM,GAAG,CAAC,CACV,KAAK,aAAa;EACjB,WAAW,SAAS,KAAK;EAEzB,IAAI,CAAC,MAAM,OAAO;OACb,IAAI,aAAa,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK;OACrD,OAAO,GAAG,WAAW;CAC5B,CAAC,CAAC,CACD,KAAK,IAAI;AACd;AAEA,SAAgB,eAAe,SAAiB,SAAwB;CACtE,OAAO,OAAO,YACZ,OAAO,QAAQ,OAAO,CAAC,CAAC,SAAS,CAAC,WAAW,aAAa;EACxD,KAAA,GAAIC,cAAAA,cAAAA,CAAc,OAAO,GAAG,OAAO,CAAC;EAEpC,IAAI,cAAc,WAAW,cAAc,QAAQ;GACjD,MAAM,OAAO,cAAc;GAC3B,MAAM,OAAO,cAAc,UAAU;GAGrC,OAAO,CAAC,CAAC,CAFQ,eAAe,SAAS,OAAO,OAAO,KAAA,CAEtC,GAAG,IAAI,CAAC,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC;EAChD,OACE,OAAO,OAAO,QAAc,OAAO,CAAC,CAAC,SAAS,CAAC,aAAa,aAC1D,OAAO,QAAQ,OAAO,CAAC,CAAC,SAAS,CAAC,WAAW,aAAa;GACxD,KAAA,GAAIA,cAAAA,cAAAA,CAAc,OAAO,GAAG,OAAO,CAAC;GAEpC,MAAM,OAAO,cAAc;GAC3B,MAAM,QAAQ;IACZ,WAAW,cAAc,UAAU;IACnC,aAAa,eAAe,YAAY;GAC1C;GACA,MAAM,OAAO,CAAC,OACV,MAAM,cACN,GAAG,MAAM,cAAc,MAAM;GACjC,MAAM,WAAW,eAAe,SAAS,IAAI;GAE7C,OAAO,CACL,EAAA,GACEC,cAAAA,YAAAA,CAAY;IACV;IACA;IACA,GAAG,MAAM,YAAY,GAAG,MAAM;IAC9B,OAAO,GAAG,MAAM,UAAU,GAAG,MAAM,gBAAgB,KAAA;IACnD,SAAS,MAAM,YAAY,IAAI,MAAM;IACrC,OACI,SAAS,MAAM,UAAU,IAAI,MAAM,gBACnC,KAAA;GACN,CAAC,CAAC,CAAC,KAAK,IAAI,GACZ,OACF,CACF;EACF,CAAC,CACH;CAEJ,CAAC,CACH;AACF;AAEA,SAAgB,QACd,OACA,OACA,eACe;CACf,KAAA,GAAIC,cAAAA,YAAAA,CAAY,KAAK,MAAA,GAAKC,cAAAA,OAAAA,CAAO,KAAK,KAAK,cAAc,KAAK,GAAG,OAAO;CAExE,KAAA,GAAIL,cAAAA,SAAAA,CAAS,KAAK,MAAA,GAAKD,cAAAA,QAAAA,CAAQ,KAAK,GAClC,QAAA,GAAOO,cAAAA,cAAAA,CAAc,QAAQ,UAAU,QAAQ,OAAO,OAAO,aAAa,CAAC;MAE3E,OAAO,QACF,IAAI,MAAM,GAAG,MAAyB,IAAI,iBAAkB,MAA0B,KACvF;AACR;AAEA,SAAgB,WACd,YACA,SACA,eACG;CACH,IAAI,CAAC,YAAY,OAAO;CAExB,SAAS,SAAS,YAAkB;EAClC,OAAO,OAAO,YACZ,OAAO,QAAQ,UAAU,CAAC,CAAC,QAAQ,SAAU,CAAC,MAAM,QAAQ;GAC1D,IAAI,gBAAgB,IAAI,GAAG,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC;GAEhD,MAAM,SAAS,QAAQ;GACvB,MAAM,SAA0B,CAAC;GAEjC,IAAI,QAAQ;IACV,MAAM,EAAE,UAAU,SAAS,IAAI,KAAK,CAAC;IAErC,IAAI,SAAS,KAAK,KAAK,gBAAgB,KAAK,GAC1C,OAAO,KAAK,CAAC,KAAK,UAAU,KAAK,CAAC;SAElC,OAAO,KAAK,CACV,KAAK,WAAA,GACLA,cAAAA,cAAAA,CAAc,QAAQ,UACpB,QAAQ,IAAI,MAAM,GAAG,MAAM,IAAI,MAAM,KAAK,KAC5C,CACF,CAAC;GACL,OAAO,KAAA,GAAIN,cAAAA,SAAAA,CAAS,KAAK,GACvB,OAAO,KAAK,CAAC,MAAM,WAAW,OAAO,OAAO,CAAC,CAAC;QAE9C,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC;GAG3B,OAAO;EACT,CAAC,CACH;CACF;CAEA,KAAA,GAAID,cAAAA,QAAAA,CAAQ,UAAU,GAAG,OAAO,WAAW,IAAI,QAAQ;MAClD,OAAO,SAAS,UAAU;AACjC"}

package/dist/esm/hooks/use-animation/index.js

@@ -43,10 +43,11 @@ const useDynamicAnimation = (arrayOrObj, init) => {
 		else return cache.current.get(keys.current ?? "");
 	});
 	return [animations, useCallback((keysOrFunc) => {
-		const keyOrArray = (0, utils_exports.runIfFn)(keysOrFunc, (() => {
+		const args = (() => {
 			if (!(0, utils_exports.isUndefined)(keys.current) && (0, utils_exports.isArray)(arrayOrObj)) return (0, utils_exports.isArray)(keys.current) ? keys.current.map(Number) : Number(keys.current);
 			else return keys.current;
-		})());
+		})();
+		const keyOrArray = (0, utils_exports.runIfFn)(keysOrFunc, args);
 		keys.current = (0, utils_exports.isArray)(keyOrArray) ? keyOrArray.map(String) : String(keyOrArray);
 		if ((0, utils_exports.isArray)(keys.current)) setAnimations(keys.current.map((key) => cache.current.get(key)).join(", "));
 		else setAnimations(cache.current.get(keys.current));

package/dist/esm/hooks/use-animation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/hooks/use-animation/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { CSSAnimationObject, Token } from \"../../core\"\nimport { useCallback, useRef, useState } from \"react\"\nimport { animation, css, useSystem } from \"../../core\"\nimport { isArray, isUndefined, runIfFn } from \"../../utils\"\n\ntype CSSObject =\n  | Token<CSSAnimationObject, \"animations\">\n  | Token<CSSAnimationObject, \"animations\">[]\n\n/**\n * `useAnimation` is a custom hook that implements animations similar to CSS `keyframes`.\n *\n * @see https://yamada-ui.com/docs/hooks/use-animation\n */\nexport const useAnimation = (cssObj: CSSObject): string => {\n  const system = useSystem()\n\n  if (isArray(cssObj))\n    return cssObj.map((cssObj) => animation(cssObj, { css, system })).join(\", \")\n  else return animation(cssObj, { css, system })\n}\n\n/**\n * `useDynamicAnimation` is a custom hook used to switch animations.\n *\n * @see https://yamada-ui.com/docs/hooks/use-dynamic-animation\n */\nexport const useDynamicAnimation = <\n  Y extends\n    | Token<CSSAnimationObject, \"animations\">[]\n    | { [key: string]: CSSObject },\n>(\n  arrayOrObj: Y,\n  init?: (keyof Y)[] | keyof Y,\n): [\n  string | undefined,\n  (\n    key:\n      | ((key: (keyof Y)[] | keyof Y | undefined) => (keyof Y)[] | keyof Y)\n      | (keyof Y)[]\n      | keyof Y,\n  ) => void,\n] => {\n  const system = useSystem()\n\n  const keys = useRef<string | string[] | undefined>(\n    !isUndefined(init)\n      ? isArray(init)\n        ? init.map(String)\n        : String(init)\n      : undefined,\n  )\n  const cache = useRef<Map<string, string>>(new Map<string, string>())\n\n  const [animations, setAnimations] = useState<string | undefined>(() => {\n    for (const [key, styles] of Object.entries(arrayOrObj))\n      if (isArray(styles))\n        cache.current.set(\n          key,\n          styles.map((style) => animation(style, { css, system })).join(\", \"),\n        )\n      else cache.current.set(key, animation(styles, { css, system }))\n\n    if (isArray(keys.current))\n      return keys.current.map((key) => cache.current.get(key)).join(\", \")\n    else return cache.current.get(keys.current ?? \"\")\n  })\n\n  const setAnimation = useCallback(\n    (\n      keysOrFunc:\n        | ((key: (keyof Y)[] | keyof Y | undefined) => (keyof Y)[] | keyof Y)\n        | (keyof Y)[]\n        | keyof Y,\n    ) => {\n      const args = (() => {\n        if (!isUndefined(keys.current) && isArray(arrayOrObj))\n          return isArray(keys.current)\n            ? keys.current.map(Number)\n            : Number(keys.current)\n        else return keys.current\n      })() as (keyof Y)[] | keyof Y | undefined\n\n      const keyOrArray = runIfFn(keysOrFunc, args)\n\n      keys.current = isArray(keyOrArray)\n        ? keyOrArray.map(String)\n        : String(keyOrArray)\n\n      if (isArray(keys.current))\n        setAnimations(\n          keys.current.map((key) => cache.current.get(key)).join(\", \"),\n        )\n      else setAnimations(cache.current.get(keys.current))\n    },\n    [arrayOrObj],\n  )\n\n  return [animations, setAnimation]\n}\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAa,gBAAgB,WAA8B;CACzD,MAAM,SAAS,UAAU;CAEzB,KAAA,GAAA,cAAA,QAAA,CAAY,MAAM,GAChB,OAAO,OAAO,KAAK,WAAW,UAAU,QAAQ;EAAE;EAAK;CAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI;MACxE,OAAO,UAAU,QAAQ;EAAE;EAAK;CAAO,CAAC;AAC/C;;;;;;AAOA,MAAa,uBAKX,YACA,SASG;CACH,MAAM,SAAS,UAAU;CAEzB,MAAM,OAAO,OACX,EAAA,GAAA,cAAA,YAAA,CAAa,IAAI,KAAA,GAAA,cAAA,QAAA,CACL,IAAI,IACV,KAAK,IAAI,MAAM,IACf,OAAO,IAAI,IACb,KAAA,CACN;CACA,MAAM,QAAQ,uBAA4B,IAAI,IAAoB,CAAC;CAEnE,MAAM,CAAC,YAAY,iBAAiB,eAAmC;EACrE,KAAK,MAAM,CAAC,KAAK,WAAW,OAAO,QAAQ,UAAU,GACnD,KAAA,GAAA,cAAA,QAAA,CAAY,MAAM,GAChB,MAAM,QAAQ,IACZ,KACA,OAAO,KAAK,UAAU,UAAU,OAAO;GAAE;GAAK;EAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CACpE;OACG,MAAM,QAAQ,IAAI,KAAK,UAAU,QAAQ;GAAE;GAAK;EAAO,CAAC,CAAC;EAEhE,KAAA,GAAA,cAAA,QAAA,CAAY,KAAK,OAAO,GACtB,OAAO,KAAK,QAAQ,KAAK,QAAQ,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI;OAC/D,OAAO,MAAM,QAAQ,IAAI,KAAK,WAAW,EAAE;CAClD,CAAC;CAgCD,OAAO,CAAC,YA9Ba,aAEjB,eAIG;EASH,MAAM,cAAA,GAAA,cAAA,QAAA,CAAqB,mBARP;GAClB,IAAI,EAAA,GAAA,cAAA,YAAA,CAAa,KAAK,OAAO,MAAA,GAAA,cAAA,QAAA,CAAa,UAAU,GAClD,QAAA,GAAA,cAAA,QAAA,CAAe,KAAK,OAAO,IACvB,KAAK,QAAQ,IAAI,MAAM,IACvB,OAAO,KAAK,OAAO;QACpB,OAAO,KAAK;EACnB,EAAA,CAE0C,CAAC;EAE3C,KAAK,WAAA,GAAA,cAAA,QAAA,CAAkB,UAAU,IAC7B,WAAW,IAAI,MAAM,IACrB,OAAO,UAAU;EAErB,KAAA,GAAA,cAAA,QAAA,CAAY,KAAK,OAAO,GACtB,cACE,KAAK,QAAQ,KAAK,QAAQ,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,CAC7D;OACG,cAAc,MAAM,QAAQ,IAAI,KAAK,OAAO,CAAC;CACpD,GACA,CAAC,UAAU,CAGkB,CAAC;AAClC"}
+{"version":3,"file":"index.js","names":["isArray","isUndefined","runIfFn"],"sources":["../../../../src/hooks/use-animation/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { CSSAnimationObject, Token } from \"../../core\"\nimport { useCallback, useRef, useState } from \"react\"\nimport { animation, css, useSystem } from \"../../core\"\nimport { isArray, isUndefined, runIfFn } from \"../../utils\"\n\ntype CSSObject =\n  | Token<CSSAnimationObject, \"animations\">\n  | Token<CSSAnimationObject, \"animations\">[]\n\n/**\n * `useAnimation` is a custom hook that implements animations similar to CSS `keyframes`.\n *\n * @see https://yamada-ui.com/docs/hooks/use-animation\n */\nexport const useAnimation = (cssObj: CSSObject): string => {\n  const system = useSystem()\n\n  if (isArray(cssObj))\n    return cssObj.map((cssObj) => animation(cssObj, { css, system })).join(\", \")\n  else return animation(cssObj, { css, system })\n}\n\n/**\n * `useDynamicAnimation` is a custom hook used to switch animations.\n *\n * @see https://yamada-ui.com/docs/hooks/use-dynamic-animation\n */\nexport const useDynamicAnimation = <\n  Y extends\n    | Token<CSSAnimationObject, \"animations\">[]\n    | { [key: string]: CSSObject },\n>(\n  arrayOrObj: Y,\n  init?: (keyof Y)[] | keyof Y,\n): [\n  string | undefined,\n  (\n    key:\n      | ((key: (keyof Y)[] | keyof Y | undefined) => (keyof Y)[] | keyof Y)\n      | (keyof Y)[]\n      | keyof Y,\n  ) => void,\n] => {\n  const system = useSystem()\n\n  const keys = useRef<string | string[] | undefined>(\n    !isUndefined(init)\n      ? isArray(init)\n        ? init.map(String)\n        : String(init)\n      : undefined,\n  )\n  const cache = useRef<Map<string, string>>(new Map<string, string>())\n\n  const [animations, setAnimations] = useState<string | undefined>(() => {\n    for (const [key, styles] of Object.entries(arrayOrObj))\n      if (isArray(styles))\n        cache.current.set(\n          key,\n          styles.map((style) => animation(style, { css, system })).join(\", \"),\n        )\n      else cache.current.set(key, animation(styles, { css, system }))\n\n    if (isArray(keys.current))\n      return keys.current.map((key) => cache.current.get(key)).join(\", \")\n    else return cache.current.get(keys.current ?? \"\")\n  })\n\n  const setAnimation = useCallback(\n    (\n      keysOrFunc:\n        | ((key: (keyof Y)[] | keyof Y | undefined) => (keyof Y)[] | keyof Y)\n        | (keyof Y)[]\n        | keyof Y,\n    ) => {\n      const args = (() => {\n        if (!isUndefined(keys.current) && isArray(arrayOrObj))\n          return isArray(keys.current)\n            ? keys.current.map(Number)\n            : Number(keys.current)\n        else return keys.current\n      })() as (keyof Y)[] | keyof Y | undefined\n\n      const keyOrArray = runIfFn(keysOrFunc, args)\n\n      keys.current = isArray(keyOrArray)\n        ? keyOrArray.map(String)\n        : String(keyOrArray)\n\n      if (isArray(keys.current))\n        setAnimations(\n          keys.current.map((key) => cache.current.get(key)).join(\", \"),\n        )\n      else setAnimations(cache.current.get(keys.current))\n    },\n    [arrayOrObj],\n  )\n\n  return [animations, setAnimation]\n}\n"],"mappings":";;;;;;;;;;;;AAgBA,MAAa,gBAAgB,WAA8B;CACzD,MAAM,SAAS,UAAU;CAEzB,KAAA,GAAIA,cAAAA,QAAAA,CAAQ,MAAM,GAChB,OAAO,OAAO,KAAK,WAAW,UAAU,QAAQ;EAAE;EAAK;CAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI;MACxE,OAAO,UAAU,QAAQ;EAAE;EAAK;CAAO,CAAC;AAC/C;;;;;;AAOA,MAAa,uBAKX,YACA,SASG;CACH,MAAM,SAAS,UAAU;CAEzB,MAAM,OAAO,OACX,EAAA,GAACC,cAAAA,YAAAA,CAAY,IAAI,KAAA,GACbD,cAAAA,QAAAA,CAAQ,IAAI,IACV,KAAK,IAAI,MAAM,IACf,OAAO,IAAI,IACb,KAAA,CACN;CACA,MAAM,QAAQ,uBAA4B,IAAI,IAAoB,CAAC;CAEnE,MAAM,CAAC,YAAY,iBAAiB,eAAmC;EACrE,KAAK,MAAM,CAAC,KAAK,WAAW,OAAO,QAAQ,UAAU,GACnD,KAAA,GAAIA,cAAAA,QAAAA,CAAQ,MAAM,GAChB,MAAM,QAAQ,IACZ,KACA,OAAO,KAAK,UAAU,UAAU,OAAO;GAAE;GAAK;EAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CACpE;OACG,MAAM,QAAQ,IAAI,KAAK,UAAU,QAAQ;GAAE;GAAK;EAAO,CAAC,CAAC;EAEhE,KAAA,GAAIA,cAAAA,QAAAA,CAAQ,KAAK,OAAO,GACtB,OAAO,KAAK,QAAQ,KAAK,QAAQ,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI;OAC/D,OAAO,MAAM,QAAQ,IAAI,KAAK,WAAW,EAAE;CAClD,CAAC;CAgCD,OAAO,CAAC,YA9Ba,aAEjB,eAIG;EACH,MAAM,cAAc;GAClB,IAAI,EAAA,GAACC,cAAAA,YAAAA,CAAY,KAAK,OAAO,MAAA,GAAKD,cAAAA,QAAAA,CAAQ,UAAU,GAClD,QAAA,GAAOA,cAAAA,QAAAA,CAAQ,KAAK,OAAO,IACvB,KAAK,QAAQ,IAAI,MAAM,IACvB,OAAO,KAAK,OAAO;QACpB,OAAO,KAAK;EACnB,EAAA,CAAG;EAEH,MAAM,cAAA,GAAaE,cAAAA,QAAAA,CAAQ,YAAY,IAAI;EAE3C,KAAK,WAAA,GAAUF,cAAAA,QAAAA,CAAQ,UAAU,IAC7B,WAAW,IAAI,MAAM,IACrB,OAAO,UAAU;EAErB,KAAA,GAAIA,cAAAA,QAAAA,CAAQ,KAAK,OAAO,GACtB,cACE,KAAK,QAAQ,KAAK,QAAQ,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,CAC7D;OACG,cAAc,MAAM,QAAQ,IAAI,KAAK,OAAO,CAAC;CACpD,GACA,CAAC,UAAU,CAGkB,CAAC;AAClC"}

package/dist/esm/hooks/use-breakpoint/use-breakpoint-state.js

@@ -8,7 +8,8 @@ import { useState } from "react";
 * @see https://yamada-ui.com/docs/hooks/use-breakpoint-state
 */
 const useBreakpointState = (initialState) => {
-	return useState(useBreakpointValue(initialState));
+	const state = useBreakpointValue(initialState);
+	return useState(state);
 };
 //#endregion
 export { useBreakpointState };

package/dist/esm/hooks/use-breakpoint/use-breakpoint-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-breakpoint-state.js","names":[],"sources":["../../../../src/hooks/use-breakpoint/use-breakpoint-state.ts"],"sourcesContent":["\"use client\"\n\nimport type { ResponsiveObject } from \"../../core\"\nimport { useState } from \"react\"\nimport { useBreakpointValue } from \"./use-breakpoint-value\"\n\n/**\n * `useBreakpointState` is a custom hook that takes a responsive object as an initial state and returns a state corresponding to the current breakpoint.\n *\n * @see https://yamada-ui.com/docs/hooks/use-breakpoint-state\n */\nexport const useBreakpointState = <Y>(\n  initialState: ResponsiveObject<Y, false>,\n) => {\n  const state = useBreakpointValue(initialState)\n\n  return useState(state)\n}\n"],"mappings":";;;;;;;;;AAWA,MAAa,sBACX,iBACG;CAGH,OAAO,SAFO,mBAAmB,YAEb,CAAC;AACvB"}
+{"version":3,"file":"use-breakpoint-state.js","names":[],"sources":["../../../../src/hooks/use-breakpoint/use-breakpoint-state.ts"],"sourcesContent":["\"use client\"\n\nimport type { ResponsiveObject } from \"../../core\"\nimport { useState } from \"react\"\nimport { useBreakpointValue } from \"./use-breakpoint-value\"\n\n/**\n * `useBreakpointState` is a custom hook that takes a responsive object as an initial state and returns a state corresponding to the current breakpoint.\n *\n * @see https://yamada-ui.com/docs/hooks/use-breakpoint-state\n */\nexport const useBreakpointState = <Y>(\n  initialState: ResponsiveObject<Y, false>,\n) => {\n  const state = useBreakpointValue(initialState)\n\n  return useState(state)\n}\n"],"mappings":";;;;;;;;;AAWA,MAAa,sBACX,iBACG;CACH,MAAM,QAAQ,mBAAmB,YAAY;CAE7C,OAAO,SAAS,KAAK;AACvB"}

package/dist/esm/hooks/use-breakpoint/use-breakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-breakpoint.js","names":["noop"],"sources":["../../../../src/hooks/use-breakpoint/use-breakpoint.ts"],"sourcesContent":["\"use client\"\n\nimport type { Breakpoint } from \"../../core\"\nimport { useCallback, useMemo, useRef, useSyncExternalStore } from \"react\"\nimport { useEnvironment, useSystem } from \"../../core\"\nimport { createdDom, isUndefined, noop } from \"../../utils\"\n\n/**\n * `useBreakpoint` is a custom hook that returns the current breakpoint.\n * This hook monitors changes in the window size and returns the appropriate value.\n *\n * @see https://yamada-ui.com/docs/hooks/use-breakpoint\n */\nexport const useBreakpoint = () => {\n  const animationFrameId = useRef(0)\n  const { breakpoints, config } = useSystem()\n  const { getWindow } = useEnvironment()\n  const {\n    containerRef,\n    direction = \"down\",\n    identifier = \"@media screen\",\n  } = config.breakpoint ?? {}\n  const hasContainer = !!containerRef\n\n  const queries = useMemo(() => {\n    return breakpoints.queries.map(\n      ({ breakpoint, maxW, minMaxQuery, minW }) => {\n        const searchValue =\n          identifier === \"@media screen\"\n            ? \"@media screen and \"\n            : `${identifier} `\n        const query = minMaxQuery?.replace(searchValue, \"\") ?? \"\"\n\n        return {\n          breakpoint,\n          maxW,\n          minW,\n          query,\n        }\n      },\n    )\n  }, [breakpoints, identifier])\n\n  const hasQueries = !!queries.length\n\n  const getBreakpoint = useCallback(\n    (width?: number) => {\n      if (isUndefined(width)) {\n        const win = getWindow()\n\n        if (hasContainer || !hasQueries) return \"base\"\n\n        for (const { breakpoint, query } of queries) {\n          const mql = win?.matchMedia(query)\n\n          if (mql?.matches) return breakpoint\n        }\n      } else {\n        for (const { breakpoint, maxW, minW } of queries)\n          if (direction !== \"up\") {\n            if ((minW ?? 0) <= width) return breakpoint\n          } else {\n            if (width <= (maxW ?? Infinity)) return breakpoint\n          }\n      }\n\n      return \"base\"\n    },\n    [direction, getWindow, hasContainer, hasQueries, queries],\n  )\n\n  const breakpointRef = useRef<Breakpoint>(getBreakpoint())\n\n  const subscribe = useCallback(\n    (listener: () => void) => {\n      if (!hasContainer || !hasQueries) {\n        const observer = queries.map(({ breakpoint, query }): (() => void) => {\n          const mql = getWindow()?.matchMedia(query)\n\n          const onChange = (e: MediaQueryListEvent) => {\n            if (e.matches) breakpointRef.current = breakpoint\n\n            listener()\n          }\n\n          mql?.addEventListener(\"change\", onChange)\n\n          return () => {\n            mql?.removeEventListener(\"change\", onChange)\n          }\n        })\n\n        return () => {\n          observer.forEach((unobserve) => unobserve())\n        }\n      } else if (createdDom()) {\n        const observer = new ResizeObserver(([entry]) => {\n          if (!entry) return\n\n          cancelAnimationFrame(animationFrameId.current)\n\n          const { width } = entry.contentRect\n\n          breakpointRef.current = getBreakpoint(width)\n\n          animationFrameId.current = requestAnimationFrame(listener)\n        })\n\n        if (containerRef.current) observer.observe(containerRef.current)\n\n        return () => {\n          observer.disconnect()\n\n          if (process.env.NODE_ENV !== \"test\")\n            cancelAnimationFrame(animationFrameId.current)\n        }\n      } else {\n        return noop\n      }\n    },\n    [containerRef, getBreakpoint, getWindow, hasContainer, hasQueries, queries],\n  )\n\n  const getSnapshot = useCallback(() => {\n    return breakpointRef.current\n  }, [])\n\n  const breakpoint = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)\n\n  return breakpoint\n}\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,sBAAsB;CACjC,MAAM,mBAAmB,OAAO,CAAC;CACjC,MAAM,EAAE,aAAa,WAAW,UAAU;CAC1C,MAAM,EAAE,cAAc,eAAe;CACrC,MAAM,EACJ,cACA,YAAY,QACZ,aAAa,oBACX,OAAO,cAAc,CAAC;CAC1B,MAAM,eAAe,CAAC,CAAC;CAEvB,MAAM,UAAU,cAAc;EAC5B,OAAO,YAAY,QAAQ,KACxB,EAAE,YAAY,MAAM,aAAa,WAAW;GAC3C,MAAM,cACJ,eAAe,kBACX,uBACA,GAAG,WAAW;GAGpB,OAAO;IACL;IACA;IACA;IACA,OANY,aAAa,QAAQ,aAAa,EAAE,KAAK;GAOvD;EACF,CACF;CACF,GAAG,CAAC,aAAa,UAAU,CAAC;CAE5B,MAAM,aAAa,CAAC,CAAC,QAAQ;CAE7B,MAAM,gBAAgB,aACnB,UAAmB;EAClB,KAAA,GAAA,cAAA,YAAA,CAAgB,KAAK,GAAG;GACtB,MAAM,MAAM,UAAU;GAEtB,IAAI,gBAAgB,CAAC,YAAY,OAAO;GAExC,KAAK,MAAM,EAAE,YAAY,WAAW,SAGlC,KAFY,KAAK,WAAW,KAAK,EAAA,EAExB,SAAS,OAAO;EAE7B,OACE,KAAK,MAAM,EAAE,YAAY,MAAM,UAAU,SACvC,IAAI,cAAc,MACX;QAAA,QAAQ,MAAM,OAAO,OAAO;EAAA,OAEjC,IAAI,UAAU,QAAQ,WAAW,OAAO;EAI9C,OAAO;CACT,GACA;EAAC;EAAW;EAAW;EAAc;EAAY;CAAO,CAC1D;CAEA,MAAM,gBAAgB,OAAmB,cAAc,CAAC;CAExD,MAAM,YAAY,aACf,aAAyB;EACxB,IAAI,CAAC,gBAAgB,CAAC,YAAY;GAChC,MAAM,WAAW,QAAQ,KAAK,EAAE,YAAY,YAA0B;IACpE,MAAM,MAAM,UAAU,CAAC,EAAE,WAAW,KAAK;IAEzC,MAAM,YAAY,MAA2B;KAC3C,IAAI,EAAE,SAAS,cAAc,UAAU;KAEvC,SAAS;IACX;IAEA,KAAK,iBAAiB,UAAU,QAAQ;IAExC,aAAa;KACX,KAAK,oBAAoB,UAAU,QAAQ;IAC7C;GACF,CAAC;GAED,aAAa;IACX,SAAS,SAAS,cAAc,UAAU,CAAC;GAC7C;EACF,OAAO,KAAA,GAAA,cAAA,WAAA,CAAe,GAAG;GACvB,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;IAC/C,IAAI,CAAC,OAAO;IAEZ,qBAAqB,iBAAiB,OAAO;IAE7C,MAAM,EAAE,UAAU,MAAM;IAExB,cAAc,UAAU,cAAc,KAAK;IAE3C,iBAAiB,UAAU,sBAAsB,QAAQ;GAC3D,CAAC;GAED,IAAI,aAAa,SAAS,SAAS,QAAQ,aAAa,OAAO;GAE/D,aAAa;IACX,SAAS,WAAW;IAGlB,qBAAqB,iBAAiB,OAAO;GACjD;EACF,OACE,OAAOA,cAAAA;CAEX,GACA;EAAC;EAAc;EAAe;EAAW;EAAc;EAAY;CAAO,CAC5E;CAEA,MAAM,cAAc,kBAAkB;EACpC,OAAO,cAAc;CACvB,GAAG,CAAC,CAAC;CAIL,OAFmB,qBAAqB,WAAW,aAAa,WAEhD;AAClB"}
+{"version":3,"file":"use-breakpoint.js","names":["isUndefined","createdDom","noop"],"sources":["../../../../src/hooks/use-breakpoint/use-breakpoint.ts"],"sourcesContent":["\"use client\"\n\nimport type { Breakpoint } from \"../../core\"\nimport { useCallback, useMemo, useRef, useSyncExternalStore } from \"react\"\nimport { useEnvironment, useSystem } from \"../../core\"\nimport { createdDom, isUndefined, noop } from \"../../utils\"\n\n/**\n * `useBreakpoint` is a custom hook that returns the current breakpoint.\n * This hook monitors changes in the window size and returns the appropriate value.\n *\n * @see https://yamada-ui.com/docs/hooks/use-breakpoint\n */\nexport const useBreakpoint = () => {\n  const animationFrameId = useRef(0)\n  const { breakpoints, config } = useSystem()\n  const { getWindow } = useEnvironment()\n  const {\n    containerRef,\n    direction = \"down\",\n    identifier = \"@media screen\",\n  } = config.breakpoint ?? {}\n  const hasContainer = !!containerRef\n\n  const queries = useMemo(() => {\n    return breakpoints.queries.map(\n      ({ breakpoint, maxW, minMaxQuery, minW }) => {\n        const searchValue =\n          identifier === \"@media screen\"\n            ? \"@media screen and \"\n            : `${identifier} `\n        const query = minMaxQuery?.replace(searchValue, \"\") ?? \"\"\n\n        return {\n          breakpoint,\n          maxW,\n          minW,\n          query,\n        }\n      },\n    )\n  }, [breakpoints, identifier])\n\n  const hasQueries = !!queries.length\n\n  const getBreakpoint = useCallback(\n    (width?: number) => {\n      if (isUndefined(width)) {\n        const win = getWindow()\n\n        if (hasContainer || !hasQueries) return \"base\"\n\n        for (const { breakpoint, query } of queries) {\n          const mql = win?.matchMedia(query)\n\n          if (mql?.matches) return breakpoint\n        }\n      } else {\n        for (const { breakpoint, maxW, minW } of queries)\n          if (direction !== \"up\") {\n            if ((minW ?? 0) <= width) return breakpoint\n          } else {\n            if (width <= (maxW ?? Infinity)) return breakpoint\n          }\n      }\n\n      return \"base\"\n    },\n    [direction, getWindow, hasContainer, hasQueries, queries],\n  )\n\n  const breakpointRef = useRef<Breakpoint>(getBreakpoint())\n\n  const subscribe = useCallback(\n    (listener: () => void) => {\n      if (!hasContainer || !hasQueries) {\n        const observer = queries.map(({ breakpoint, query }): (() => void) => {\n          const mql = getWindow()?.matchMedia(query)\n\n          const onChange = (e: MediaQueryListEvent) => {\n            if (e.matches) breakpointRef.current = breakpoint\n\n            listener()\n          }\n\n          mql?.addEventListener(\"change\", onChange)\n\n          return () => {\n            mql?.removeEventListener(\"change\", onChange)\n          }\n        })\n\n        return () => {\n          observer.forEach((unobserve) => unobserve())\n        }\n      } else if (createdDom()) {\n        const observer = new ResizeObserver(([entry]) => {\n          if (!entry) return\n\n          cancelAnimationFrame(animationFrameId.current)\n\n          const { width } = entry.contentRect\n\n          breakpointRef.current = getBreakpoint(width)\n\n          animationFrameId.current = requestAnimationFrame(listener)\n        })\n\n        if (containerRef.current) observer.observe(containerRef.current)\n\n        return () => {\n          observer.disconnect()\n\n          if (process.env.NODE_ENV !== \"test\")\n            cancelAnimationFrame(animationFrameId.current)\n        }\n      } else {\n        return noop\n      }\n    },\n    [containerRef, getBreakpoint, getWindow, hasContainer, hasQueries, queries],\n  )\n\n  const getSnapshot = useCallback(() => {\n    return breakpointRef.current\n  }, [])\n\n  const breakpoint = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)\n\n  return breakpoint\n}\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,sBAAsB;CACjC,MAAM,mBAAmB,OAAO,CAAC;CACjC,MAAM,EAAE,aAAa,WAAW,UAAU;CAC1C,MAAM,EAAE,cAAc,eAAe;CACrC,MAAM,EACJ,cACA,YAAY,QACZ,aAAa,oBACX,OAAO,cAAc,CAAC;CAC1B,MAAM,eAAe,CAAC,CAAC;CAEvB,MAAM,UAAU,cAAc;EAC5B,OAAO,YAAY,QAAQ,KACxB,EAAE,YAAY,MAAM,aAAa,WAAW;GAC3C,MAAM,cACJ,eAAe,kBACX,uBACA,GAAG,WAAW;GAGpB,OAAO;IACL;IACA;IACA;IACA,OANY,aAAa,QAAQ,aAAa,EAAE,KAAK;GAOvD;EACF,CACF;CACF,GAAG,CAAC,aAAa,UAAU,CAAC;CAE5B,MAAM,aAAa,CAAC,CAAC,QAAQ;CAE7B,MAAM,gBAAgB,aACnB,UAAmB;EAClB,KAAA,GAAIA,cAAAA,YAAAA,CAAY,KAAK,GAAG;GACtB,MAAM,MAAM,UAAU;GAEtB,IAAI,gBAAgB,CAAC,YAAY,OAAO;GAExC,KAAK,MAAM,EAAE,YAAY,WAAW,SAGlC,KAFY,KAAK,WAAW,KAAK,EAAA,EAExB,SAAS,OAAO;EAE7B,OACE,KAAK,MAAM,EAAE,YAAY,MAAM,UAAU,SACvC,IAAI,cAAc,MACX;QAAA,QAAQ,MAAM,OAAO,OAAO;EAAA,OAEjC,IAAI,UAAU,QAAQ,WAAW,OAAO;EAI9C,OAAO;CACT,GACA;EAAC;EAAW;EAAW;EAAc;EAAY;CAAO,CAC1D;CAEA,MAAM,gBAAgB,OAAmB,cAAc,CAAC;CAExD,MAAM,YAAY,aACf,aAAyB;EACxB,IAAI,CAAC,gBAAgB,CAAC,YAAY;GAChC,MAAM,WAAW,QAAQ,KAAK,EAAE,YAAY,YAA0B;IACpE,MAAM,MAAM,UAAU,CAAC,EAAE,WAAW,KAAK;IAEzC,MAAM,YAAY,MAA2B;KAC3C,IAAI,EAAE,SAAS,cAAc,UAAU;KAEvC,SAAS;IACX;IAEA,KAAK,iBAAiB,UAAU,QAAQ;IAExC,aAAa;KACX,KAAK,oBAAoB,UAAU,QAAQ;IAC7C;GACF,CAAC;GAED,aAAa;IACX,SAAS,SAAS,cAAc,UAAU,CAAC;GAC7C;EACF,OAAO,KAAA,GAAIC,cAAAA,WAAAA,CAAW,GAAG;GACvB,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;IAC/C,IAAI,CAAC,OAAO;IAEZ,qBAAqB,iBAAiB,OAAO;IAE7C,MAAM,EAAE,UAAU,MAAM;IAExB,cAAc,UAAU,cAAc,KAAK;IAE3C,iBAAiB,UAAU,sBAAsB,QAAQ;GAC3D,CAAC;GAED,IAAI,aAAa,SAAS,SAAS,QAAQ,aAAa,OAAO;GAE/D,aAAa;IACX,SAAS,WAAW;IAGlB,qBAAqB,iBAAiB,OAAO;GACjD;EACF,OACE,OAAOC,cAAAA;CAEX,GACA;EAAC;EAAc;EAAe;EAAW;EAAc;EAAY;CAAO,CAC5E;CAEA,MAAM,cAAc,kBAAkB;EACpC,OAAO,cAAc;CACvB,GAAG,CAAC,CAAC;CAIL,OAFmB,qBAAqB,WAAW,aAAa,WAEhD;AAClB"}

package/dist/esm/hooks/use-clickable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["isValidElement"],"sources":["../../../../src/hooks/use-clickable/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLAttributes, KeyboardEvent, MouseEvent, Ref } from \"react\"\nimport type { StyledProps } from \"../../core\"\nimport { useCallback, useState } from \"react\"\nimport { dataAttr, isTouchDevice, mergeRefs } from \"../../utils\"\nimport { useEventListeners } from \"../use-event-listener\"\n\ntype Props<Y extends HTMLElement = HTMLElement> = Omit<\n  HTMLAttributes<Y>,\n  \"ref\" | \"size\" | keyof StyledProps\n>\n\nexport type UseClickableProps<\n  Y extends HTMLElement = HTMLElement,\n  M extends Props<Y> = Props<Y>,\n> = M & {\n  /**\n   * Whether or not trigger click on pressing `Enter`.\n   *\n   * @default true\n   */\n  clickOnEnter?: boolean\n  /**\n   * Whether or not trigger click on pressing `Space`.\n   *\n   * @default true\n   */\n  clickOnSpace?: boolean\n  /**\n   * If `true`, the element will be disabled. It will set the `disabled` HTML attribute.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Disable the touch device behavior.\n   *\n   * @default true\n   */\n  disableTouchBehavior?: boolean\n  /**\n   * If `true` and isDisabled, the element will have only `aria-disabled` set to `true`.\n   *\n   * @default false\n   */\n  focusable?: boolean\n  /**\n   * Whether or not to focus the element when it is clicked.\n   * If `true`, the element will receive focus upon click.\n   *\n   * @default true\n   */\n  focusOnClick?: boolean\n  /**\n   * The ref for the element.\n   */\n  ref?: Ref<Y>\n}\n\nconst isValidElement = (\n  ev: KeyboardEvent | KeyboardEvent[\"nativeEvent\"],\n): boolean => {\n  const { isContentEditable, tagName } = ev.target as HTMLElement\n\n  return tagName !== \"INPUT\" && tagName !== \"TEXTAREA\" && !isContentEditable\n}\n\nexport const useClickable = <\n  Y extends HTMLElement = HTMLElement,\n  M extends Props<Y> = Props<Y>,\n>(\n  {\n    ref,\n    clickOnEnter = true,\n    clickOnSpace = true,\n    disabled,\n    disableTouchBehavior = true,\n    focusable,\n    focusOnClick = true,\n    tabIndex: tabIndexProp,\n    onClick: onClickProp,\n    onKeyDown: onKeyDownProp,\n    onKeyUp: onKeyUpProp,\n    onMouseDown: onMouseDownProp,\n    onMouseLeave: onMouseLeaveProp,\n    onMouseOver: onMouseOverProp,\n    onMouseUp: onMouseUpProp,\n    ...props\n  }: UseClickableProps<Y, M> = {} as UseClickableProps<Y, M>,\n) => {\n  const [button, setButton] = useState<boolean>(true)\n  const [pressed, setPressed] = useState<boolean>(false)\n\n  const listeners = useEventListeners()\n\n  const tabIndex = button ? tabIndexProp : tabIndexProp || 0\n  const trulyDisabled = disabled && !focusable\n\n  const refCb = (node: any) => {\n    if (!node) return\n\n    if (node.tagName !== \"BUTTON\") setButton(false)\n  }\n\n  const onClick = useCallback(\n    (ev: MouseEvent<Y>) => {\n      if (disabled) {\n        ev.stopPropagation()\n        ev.preventDefault()\n\n        return\n      }\n\n      if (focusOnClick) ev.currentTarget.focus()\n      onClickProp?.(ev)\n    },\n    [disabled, focusOnClick, onClickProp],\n  )\n\n  const onDocumentKeyUp = useCallback(\n    (ev: globalThis.KeyboardEvent) => {\n      if (pressed && isValidElement(ev)) {\n        ev.preventDefault()\n        ev.stopPropagation()\n\n        setPressed(false)\n\n        listeners.remove(document, \"keyup\", onDocumentKeyUp, false)\n      }\n    },\n    [pressed, listeners],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<Y>) => {\n      onKeyDownProp?.(ev)\n\n      if (disabled || ev.defaultPrevented || ev.metaKey) return\n\n      if (!isValidElement(ev.nativeEvent) || button) return\n\n      if (clickOnSpace && ev.key === \" \") {\n        ev.preventDefault()\n        setPressed(true)\n      }\n\n      if (clickOnEnter && ev.key === \"Enter\") {\n        ev.preventDefault()\n        ev.currentTarget.click()\n      }\n\n      listeners.add(document, \"keyup\", onDocumentKeyUp, false)\n    },\n    [\n      disabled,\n      button,\n      onKeyDownProp,\n      clickOnEnter,\n      clickOnSpace,\n      listeners,\n      onDocumentKeyUp,\n    ],\n  )\n\n  const onKeyUp = useCallback(\n    (ev: KeyboardEvent<Y>) => {\n      onKeyUpProp?.(ev)\n\n      if (disabled || ev.defaultPrevented || ev.metaKey) return\n\n      if (!isValidElement(ev.nativeEvent) || button) return\n\n      if (clickOnSpace && ev.key === \" \") {\n        ev.preventDefault()\n        setPressed(false)\n\n        ev.currentTarget.click()\n      }\n    },\n    [clickOnSpace, button, disabled, onKeyUpProp],\n  )\n\n  const onDocumentMouseUp = useCallback(\n    (ev: globalThis.MouseEvent) => {\n      if (ev.button !== 0) return\n\n      setPressed(false)\n\n      listeners.remove(document, \"mouseup\", onDocumentMouseUp, false)\n    },\n    [listeners],\n  )\n\n  const onMouseDown = useCallback(\n    (ev: MouseEvent<Y>) => {\n      if (ev.button !== 0) return\n\n      if (disabled) {\n        ev.stopPropagation()\n        ev.preventDefault()\n\n        return\n      }\n\n      if (!button) setPressed(true)\n\n      if (focusOnClick) ev.currentTarget.focus({ preventScroll: true })\n\n      listeners.add(document, \"mouseup\", onDocumentMouseUp, false)\n\n      onMouseDownProp?.(ev)\n    },\n    [\n      disabled,\n      button,\n      onMouseDownProp,\n      listeners,\n      onDocumentMouseUp,\n      focusOnClick,\n    ],\n  )\n\n  const onMouseUp = useCallback(\n    (ev: MouseEvent<Y>) => {\n      if (ev.button !== 0) return\n\n      if (!button) setPressed(false)\n\n      onMouseUpProp?.(ev)\n    },\n    [onMouseUpProp, button],\n  )\n\n  const onMouseOver = useCallback(\n    (ev: MouseEvent<Y>) => {\n      if (disabled) {\n        ev.preventDefault()\n\n        return\n      }\n\n      if (disableTouchBehavior && isTouchDevice()) return\n\n      onMouseOverProp?.(ev)\n    },\n    [disabled, onMouseOverProp, disableTouchBehavior],\n  )\n\n  const onMouseLeave = useCallback(\n    (ev: MouseEvent<Y>) => {\n      if (pressed) {\n        ev.preventDefault()\n\n        setPressed(false)\n      }\n\n      if (disableTouchBehavior && isTouchDevice()) return\n\n      onMouseLeaveProp?.(ev)\n    },\n    [pressed, onMouseLeaveProp, disableTouchBehavior],\n  )\n\n  if (button)\n    return {\n      ...props,\n      ref: mergeRefs(ref, refCb),\n      type: \"button\" as const,\n      \"aria-disabled\": trulyDisabled ? undefined : disabled,\n      disabled: trulyDisabled,\n      onClick: onClick,\n      onKeyDown: onKeyDownProp,\n      onKeyUp: onKeyUpProp,\n      onMouseDown: onMouseDownProp,\n      onMouseLeave: onMouseLeaveProp,\n      onMouseOver: onMouseOverProp,\n      onMouseUp: onMouseUpProp,\n    }\n  else\n    return {\n      ...props,\n      ref: mergeRefs(ref, refCb),\n      \"aria-disabled\": disabled ? (\"true\" as const) : undefined,\n      \"data-active\": dataAttr(pressed),\n      role: \"button\",\n      tabIndex: trulyDisabled ? undefined : tabIndex,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onMouseOver,\n      onMouseUp,\n    }\n}\n\nexport type UseClickableReturn = ReturnType<typeof useClickable>\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["isValidElement","isTouchDevice","dataAttr"],"sources":["../../../../src/hooks/use-clickable/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLAttributes, KeyboardEvent, MouseEvent, Ref } from \"react\"\nimport type { StyledProps } from \"../../core\"\nimport { useCallback, useState } from \"react\"\nimport { dataAttr, isTouchDevice, mergeRefs } from \"../../utils\"\nimport { useEventListeners } from \"../use-event-listener\"\n\ntype Props<Y extends HTMLElement = HTMLElement> = Omit<\n  HTMLAttributes<Y>,\n  \"ref\" | \"size\" | keyof StyledProps\n>\n\nexport type UseClickableProps<\n  Y extends HTMLElement = HTMLElement,\n  M extends Props<Y> = Props<Y>,\n> = M & {\n  /**\n   * Whether or not trigger click on pressing `Enter`.\n   *\n   * @default true\n   */\n  clickOnEnter?: boolean\n  /**\n   * Whether or not trigger click on pressing `Space`.\n   *\n   * @default true\n   */\n  clickOnSpace?: boolean\n  /**\n   * If `true`, the element will be disabled. It will set the `disabled` HTML attribute.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Disable the touch device behavior.\n   *\n   * @default true\n   */\n  disableTouchBehavior?: boolean\n  /**\n   * If `true` and isDisabled, the element will have only `aria-disabled` set to `true`.\n   *\n   * @default false\n   */\n  focusable?: boolean\n  /**\n   * Whether or not to focus the element when it is clicked.\n   * If `true`, the element will receive focus upon click.\n   *\n   * @default true\n   */\n  focusOnClick?: boolean\n  /**\n   * The ref for the element.\n   */\n  ref?: Ref<Y>\n}\n\nconst isValidElement = (\n  ev: KeyboardEvent | KeyboardEvent[\"nativeEvent\"],\n): boolean => {\n  const { isContentEditable, tagName } = ev.target as HTMLElement\n\n  return tagName !== \"INPUT\" && tagName !== \"TEXTAREA\" && !isContentEditable\n}\n\nexport const useClickable = <\n  Y extends HTMLElement = HTMLElement,\n  M extends Props<Y> = Props<Y>,\n>(\n  {\n    ref,\n    clickOnEnter = true,\n    clickOnSpace = true,\n    disabled,\n    disableTouchBehavior = true,\n    focusable,\n    focusOnClick = true,\n    tabIndex: tabIndexProp,\n    onClick: onClickProp,\n    onKeyDown: onKeyDownProp,\n    onKeyUp: onKeyUpProp,\n    onMouseDown: onMouseDownProp,\n    onMouseLeave: onMouseLeaveProp,\n    onMouseOver: onMouseOverProp,\n    onMouseUp: onMouseUpProp,\n    ...props\n  }: UseClickableProps<Y, M> = {} as UseClickableProps<Y, M>,\n) => {\n  const [button, setButton] = useState<boolean>(true)\n  const [pressed, setPressed] = useState<boolean>(false)\n\n  const listeners = useEventListeners()\n\n  const tabIndex = button ? tabIndexProp : tabIndexProp || 0\n  const trulyDisabled = disabled && !focusable\n\n  const refCb = (node: any) => {\n    if (!node) return\n\n    if (node.tagName !== \"BUTTON\") setButton(false)\n  }\n\n  const onClick = useCallback(\n    (ev: MouseEvent<Y>) => {\n      if (disabled) {\n        ev.stopPropagation()\n        ev.preventDefault()\n\n        return\n      }\n\n      if (focusOnClick) ev.currentTarget.focus()\n      onClickProp?.(ev)\n    },\n    [disabled, focusOnClick, onClickProp],\n  )\n\n  const onDocumentKeyUp = useCallback(\n    (ev: globalThis.KeyboardEvent) => {\n      if (pressed && isValidElement(ev)) {\n        ev.preventDefault()\n        ev.stopPropagation()\n\n        setPressed(false)\n\n        listeners.remove(document, \"keyup\", onDocumentKeyUp, false)\n      }\n    },\n    [pressed, listeners],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<Y>) => {\n      onKeyDownProp?.(ev)\n\n      if (disabled || ev.defaultPrevented || ev.metaKey) return\n\n      if (!isValidElement(ev.nativeEvent) || button) return\n\n      if (clickOnSpace && ev.key === \" \") {\n        ev.preventDefault()\n        setPressed(true)\n      }\n\n      if (clickOnEnter && ev.key === \"Enter\") {\n        ev.preventDefault()\n        ev.currentTarget.click()\n      }\n\n      listeners.add(document, \"keyup\", onDocumentKeyUp, false)\n    },\n    [\n      disabled,\n      button,\n      onKeyDownProp,\n      clickOnEnter,\n      clickOnSpace,\n      listeners,\n      onDocumentKeyUp,\n    ],\n  )\n\n  const onKeyUp = useCallback(\n    (ev: KeyboardEvent<Y>) => {\n      onKeyUpProp?.(ev)\n\n      if (disabled || ev.defaultPrevented || ev.metaKey) return\n\n      if (!isValidElement(ev.nativeEvent) || button) return\n\n      if (clickOnSpace && ev.key === \" \") {\n        ev.preventDefault()\n        setPressed(false)\n\n        ev.currentTarget.click()\n      }\n    },\n    [clickOnSpace, button, disabled, onKeyUpProp],\n  )\n\n  const onDocumentMouseUp = useCallback(\n    (ev: globalThis.MouseEvent) => {\n      if (ev.button !== 0) return\n\n      setPressed(false)\n\n      listeners.remove(document, \"mouseup\", onDocumentMouseUp, false)\n    },\n    [listeners],\n  )\n\n  const onMouseDown = useCallback(\n    (ev: MouseEvent<Y>) => {\n      if (ev.button !== 0) return\n\n      if (disabled) {\n        ev.stopPropagation()\n        ev.preventDefault()\n\n        return\n      }\n\n      if (!button) setPressed(true)\n\n      if (focusOnClick) ev.currentTarget.focus({ preventScroll: true })\n\n      listeners.add(document, \"mouseup\", onDocumentMouseUp, false)\n\n      onMouseDownProp?.(ev)\n    },\n    [\n      disabled,\n      button,\n      onMouseDownProp,\n      listeners,\n      onDocumentMouseUp,\n      focusOnClick,\n    ],\n  )\n\n  const onMouseUp = useCallback(\n    (ev: MouseEvent<Y>) => {\n      if (ev.button !== 0) return\n\n      if (!button) setPressed(false)\n\n      onMouseUpProp?.(ev)\n    },\n    [onMouseUpProp, button],\n  )\n\n  const onMouseOver = useCallback(\n    (ev: MouseEvent<Y>) => {\n      if (disabled) {\n        ev.preventDefault()\n\n        return\n      }\n\n      if (disableTouchBehavior && isTouchDevice()) return\n\n      onMouseOverProp?.(ev)\n    },\n    [disabled, onMouseOverProp, disableTouchBehavior],\n  )\n\n  const onMouseLeave = useCallback(\n    (ev: MouseEvent<Y>) => {\n      if (pressed) {\n        ev.preventDefault()\n\n        setPressed(false)\n      }\n\n      if (disableTouchBehavior && isTouchDevice()) return\n\n      onMouseLeaveProp?.(ev)\n    },\n    [pressed, onMouseLeaveProp, disableTouchBehavior],\n  )\n\n  if (button)\n    return {\n      ...props,\n      ref: mergeRefs(ref, refCb),\n      type: \"button\" as const,\n      \"aria-disabled\": trulyDisabled ? undefined : disabled,\n      disabled: trulyDisabled,\n      onClick: onClick,\n      onKeyDown: onKeyDownProp,\n      onKeyUp: onKeyUpProp,\n      onMouseDown: onMouseDownProp,\n      onMouseLeave: onMouseLeaveProp,\n      onMouseOver: onMouseOverProp,\n      onMouseUp: onMouseUpProp,\n    }\n  else\n    return {\n      ...props,\n      ref: mergeRefs(ref, refCb),\n      \"aria-disabled\": disabled ? (\"true\" as const) : undefined,\n      \"data-active\": dataAttr(pressed),\n      role: \"button\",\n      tabIndex: trulyDisabled ? undefined : tabIndex,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      onMouseDown,\n      onMouseLeave,\n      onMouseOver,\n      onMouseUp,\n    }\n}\n\nexport type UseClickableReturn = ReturnType<typeof useClickable>\n"],"mappings":"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"}

package/dist/esm/hooks/use-clipboard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/hooks/use-clipboard/index.ts"],"sourcesContent":["\"use client\"\n\nimport copy from \"copy-to-clipboard\"\nimport { useCallback, useEffect, useState } from \"react\"\nimport { isNumber, isString } from \"../../utils\"\n\nexport interface UseClipboardOptions {\n  format?: string\n  timeout?: number\n}\n\n/**\n * `useClipboard` is a custom hook that performs the operation of copying a value to the clipboard.\n *\n * @see https://yamada-ui.com/docs/hooks/use-clipboard\n */\nexport const useClipboard = (\n  defaultValue = \"\",\n  timeoutOrOptions: number | UseClipboardOptions = {},\n) => {\n  const [copied, setCopied] = useState(false)\n\n  const [value, setValue] = useState(defaultValue)\n\n  useEffect(() => setValue(defaultValue), [defaultValue])\n\n  const { timeout = 1500, ...copyOptions } = isNumber(timeoutOrOptions)\n    ? { timeout: timeoutOrOptions }\n    : timeoutOrOptions\n\n  const onCopy = useCallback(\n    (newValue?: any) => {\n      if (!isString(newValue)) newValue = value\n      else setValue(newValue)\n\n      const copied = copy(newValue, copyOptions)\n\n      setCopied(copied)\n    },\n    [value, copyOptions],\n  )\n\n  useEffect(() => {\n    let timeoutId: NodeJS.Timeout | null = null\n\n    if (copied)\n      timeoutId = setTimeout(() => {\n        setCopied(false)\n      }, timeout)\n\n    return () => {\n      if (timeoutId) clearTimeout(timeoutId)\n    }\n  }, [timeout, copied])\n\n  return {\n    copied,\n    setValue,\n    value,\n    onCopy,\n  }\n}\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,gBACX,eAAe,IACf,mBAAiD,CAAC,MAC/C;CACH,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAE/C,gBAAgB,SAAS,YAAY,GAAG,CAAC,YAAY,CAAC;CAEtD,MAAM,EAAE,UAAU,MAAM,GAAG,iBAAA,GAAA,cAAA,SAAA,CAAyB,gBAAgB,IAChE,EAAE,SAAS,iBAAiB,IAC5B;CAEJ,MAAM,SAAS,aACZ,aAAmB;EAClB,IAAI,EAAA,GAAA,cAAA,SAAA,CAAU,QAAQ,GAAG,WAAW;OAC/B,SAAS,QAAQ;EAEtB,MAAM,SAAS,KAAK,UAAU,WAAW;EAEzC,UAAU,MAAM;CAClB,GACA,CAAC,OAAO,WAAW,CACrB;CAEA,gBAAgB;EACd,IAAI,YAAmC;EAEvC,IAAI,QACF,YAAY,iBAAiB;GAC3B,UAAU,KAAK;EACjB,GAAG,OAAO;EAEZ,aAAa;GACX,IAAI,WAAW,aAAa,SAAS;EACvC;CACF,GAAG,CAAC,SAAS,MAAM,CAAC;CAEpB,OAAO;EACL;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"index.js","names":["isNumber","isString"],"sources":["../../../../src/hooks/use-clipboard/index.ts"],"sourcesContent":["\"use client\"\n\nimport copy from \"copy-to-clipboard\"\nimport { useCallback, useEffect, useState } from \"react\"\nimport { isNumber, isString } from \"../../utils\"\n\nexport interface UseClipboardOptions {\n  format?: string\n  timeout?: number\n}\n\n/**\n * `useClipboard` is a custom hook that performs the operation of copying a value to the clipboard.\n *\n * @see https://yamada-ui.com/docs/hooks/use-clipboard\n */\nexport const useClipboard = (\n  defaultValue = \"\",\n  timeoutOrOptions: number | UseClipboardOptions = {},\n) => {\n  const [copied, setCopied] = useState(false)\n\n  const [value, setValue] = useState(defaultValue)\n\n  useEffect(() => setValue(defaultValue), [defaultValue])\n\n  const { timeout = 1500, ...copyOptions } = isNumber(timeoutOrOptions)\n    ? { timeout: timeoutOrOptions }\n    : timeoutOrOptions\n\n  const onCopy = useCallback(\n    (newValue?: any) => {\n      if (!isString(newValue)) newValue = value\n      else setValue(newValue)\n\n      const copied = copy(newValue, copyOptions)\n\n      setCopied(copied)\n    },\n    [value, copyOptions],\n  )\n\n  useEffect(() => {\n    let timeoutId: NodeJS.Timeout | null = null\n\n    if (copied)\n      timeoutId = setTimeout(() => {\n        setCopied(false)\n      }, timeout)\n\n    return () => {\n      if (timeoutId) clearTimeout(timeoutId)\n    }\n  }, [timeout, copied])\n\n  return {\n    copied,\n    setValue,\n    value,\n    onCopy,\n  }\n}\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,gBACX,eAAe,IACf,mBAAiD,CAAC,MAC/C;CACH,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAE/C,gBAAgB,SAAS,YAAY,GAAG,CAAC,YAAY,CAAC;CAEtD,MAAM,EAAE,UAAU,MAAM,GAAG,iBAAA,GAAgBA,cAAAA,SAAAA,CAAS,gBAAgB,IAChE,EAAE,SAAS,iBAAiB,IAC5B;CAEJ,MAAM,SAAS,aACZ,aAAmB;EAClB,IAAI,EAAA,GAACC,cAAAA,SAAAA,CAAS,QAAQ,GAAG,WAAW;OAC/B,SAAS,QAAQ;EAEtB,MAAM,SAAS,KAAK,UAAU,WAAW;EAEzC,UAAU,MAAM;CAClB,GACA,CAAC,OAAO,WAAW,CACrB;CAEA,gBAAgB;EACd,IAAI,YAAmC;EAEvC,IAAI,QACF,YAAY,iBAAiB;GAC3B,UAAU,KAAK;EACjB,GAAG,OAAO;EAEZ,aAAa;GACX,IAAI,WAAW,aAAa,SAAS;EACvC;CACF,GAAG,CAAC,SAAS,MAAM,CAAC;CAEpB,OAAO;EACL;EACA;EACA;EACA;CACF;AACF"}

package/dist/esm/hooks/use-combobox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["createContext"],"sources":["../../../../src/hooks/use-combobox/index.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  JSXElementConstructor,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  RefObject,\n} from \"react\"\nimport type { UsePopoverProps } from \"../../components/popover\"\nimport type { HTMLProps, PropGetter, SimpleDirection } from \"../../core\"\nimport type { Descendant } from \"../use-descendants\"\nimport type { UseDisclosureProps } from \"../use-disclosure\"\nimport { useCallback, useId, useMemo, useRef } from \"react\"\nimport scrollIntoView from \"scroll-into-view-if-needed\"\nimport { usePopoverProps } from \"../../components/popover\"\nimport { mergeProps, useEnvironment } from \"../../core\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  findChild,\n  getValidChildren,\n  handlerAll,\n  isComposing,\n  isSomeElement,\n  isUndefined,\n  mergeRefs,\n  runKeyAction,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { createDescendants } from \"../use-descendants\"\nimport { useDisclosure } from \"../use-disclosure\"\n\ninterface ComboboxSharedItem extends Omit<HTMLProps, \"children\" | \"value\"> {\n  label: ReactNode\n}\n\nexport interface ComboboxItemWithValue extends ComboboxSharedItem {\n  query?: string\n  value?: string\n}\n\nexport interface ComboboxItemWithItems extends ComboboxSharedItem {\n  items: ComboboxItemWithValue[]\n}\n\nexport type ComboboxItem = ComboboxItemWithItems | ComboboxItemWithValue\n\nexport interface CreateComboboxItemOptions {\n  Group: JSXElementConstructor<any>\n  Label: JSXElementConstructor<any>\n  Option: JSXElementConstructor<any>\n}\n\nexport const createComboboxItem = (\n  children: ReactNode,\n  { Group, Label, Option }: CreateComboboxItemOptions,\n) => {\n  const validChildren = getValidChildren(children)\n\n  return validChildren\n    .filter(\n      ({ type }) => isSomeElement(type, Option) || isSomeElement(type, Group),\n    )\n    .map(({ type, props }) => {\n      if (isSomeElement(type, Option)) {\n        return { ...props, label: props.children }\n      } else {\n        const validChildren = getValidChildren(props.children)\n        const label = findChild(validChildren, Label)\n\n        return {\n          ...props,\n          items: validChildren\n            .filter(({ type }) => isSomeElement(type, Option))\n            .map(({ props }) => ({ ...props, label: props.children })),\n          label: label?.props.children ?? props.label,\n        }\n      }\n    })\n}\n\nexport interface CreateComboboxChildrenOptions {\n  Group: JSXElementConstructor<any>\n  Option: JSXElementConstructor<any>\n  Empty?: JSXElementConstructor<any>\n}\n\nexport const createComboboxChildren = (\n  items: ComboboxItem[],\n  { Empty, Group, Option }: CreateComboboxChildrenOptions,\n) => {\n  return items.map((item, index) => {\n    if (\"data-empty\" in item && Empty) {\n      const { label, ...rest } = item\n\n      return (\n        <Empty key={index} {...rest}>\n          {label}\n        </Empty>\n      )\n    } else if (\"items\" in item) {\n      const { items, label, ...rest } = item\n\n      return (\n        <Group key={index} label={label} {...rest}>\n          {items.map(({ label, ...rest }, index) => (\n            <Option key={index} {...rest}>\n              {label}\n            </Option>\n          ))}\n        </Group>\n      )\n    } else {\n      const { label, ...rest } = item\n\n      return (\n        <Option key={index} {...rest}>\n          {label}\n        </Option>\n      )\n    }\n  })\n}\n\nexport interface ComboboxDescendantProps {\n  id: string\n  closeOnSelect?: boolean\n  value?: string\n}\nexport type ComboboxDescendant = Descendant<\n  HTMLDivElement,\n  ComboboxDescendantProps\n>\n\nconst {\n  DescendantsContext: ComboboxDescendantsContext,\n  useDescendant: useComboboxDescendant,\n  useDescendantRegister: useComboboxDescendantRegister,\n  useDescendants: useComboboxDescendants,\n} = createDescendants<HTMLDivElement, ComboboxDescendantProps>()\n\nexport {\n  ComboboxDescendantsContext,\n  useComboboxDescendant,\n  useComboboxDescendantRegister,\n  useComboboxDescendants,\n}\n\ninterface ComboboxContext extends Pick<\n  UseComboboxReturn,\n  \"onActiveDescendant\" | \"onClose\" | \"onSelect\"\n> {}\n\nconst [ComboboxContext, useComboboxContext] = createContext<ComboboxContext>({\n  name: \"ComboboxContext\",\n})\n\ninterface ComboboxGroupContext extends Pick<\n  UseComboboxGroupReturn,\n  \"getLabelProps\"\n> {}\n\nconst [ComboboxGroupContext, useComboboxGroupContext] =\n  createContext<ComboboxGroupContext>({\n    name: \"ComboboxGroupContext\",\n  })\n\nexport {\n  ComboboxContext,\n  ComboboxGroupContext,\n  useComboboxContext,\n  useComboboxGroupContext,\n}\n\nexport interface UseComboboxProps\n  extends\n    Omit<HTMLProps, \"onChange\">,\n    Omit<UseDisclosureProps, \"timing\">,\n    Omit<\n      UsePopoverProps,\n      \"autoFocus\" | \"initialFocusRef\" | \"modal\" | \"transform\" | \"updateRef\"\n    > {\n  /**\n   * If `true`, the list element will be closed when value is selected.\n   *\n   * @default true\n   */\n  closeOnSelect?: boolean\n  /**\n   * If `true`, the combobox will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The value to focus on when the combobox is opened.\n   */\n  initialFocusValue?: string\n  /**\n   * If `true`, the combobox will be opened when click on the field.\n   *\n   * @default true\n   */\n  openOnClick?: boolean\n  /**\n   * If `true`, the combobox will be opened when enter is pressed.\n   *\n   * @default true\n   */\n  openOnEnter?: boolean\n  /**\n   * If `true`, the combobox will be opened when space is pressed.\n   *\n   * @default true\n   */\n  openOnSpace?: boolean\n  /**\n   * If `true`, the combobox will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The `ref` of the element that should receive focus when selected.\n   */\n  selectFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, the item will be selected when space is pressed.\n   *\n   * @default true\n   */\n  selectOnSpace?: boolean\n  /**\n   * The callback invoked when value is selected.\n   */\n  onChange?: (value: string) => void\n}\n\nexport const useCombobox = (props: UseComboboxProps = {}) => {\n  const [\n    { matchWidth = true, ...popoverProps },\n    {\n      \"aria-label\": ariaLabelProp,\n      \"aria-labelledby\": ariaLabelledbyProp,\n      closeOnSelect: closeOnSelectProp = true,\n      defaultOpen,\n      disabled,\n      initialFocusValue,\n      open: openProp,\n      openOnClick = true,\n      openOnEnter = true,\n      openOnSpace = true,\n      readOnly,\n      selectFocusRef,\n      selectOnSpace = true,\n      onChange: onChangeProp,\n      onClose: onCloseProp,\n      onOpen: onOpenProp,\n      ...rest\n    },\n  ] = usePopoverProps(props, [\n    \"disabled\",\n    \"open\",\n    \"defaultOpen\",\n    \"onOpen\",\n    \"onClose\",\n    \"openOnClick\",\n  ])\n  const { getWindow } = useEnvironment()\n  const interactive = !(readOnly || disabled)\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const contentId = useId()\n  const descendants = useComboboxDescendants()\n  const { open, onClose, onOpen } = useDisclosure({\n    defaultOpen,\n    open: openProp,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n  })\n  const activeDescendant = useRef<ComboboxDescendant | null>(null)\n  const mergedPopoverProps = useMemo<UsePopoverProps>(\n    () => ({\n      autoFocus: false,\n      matchWidth,\n      openOnClick: false,\n      ...popoverProps,\n      disabled: !interactive,\n      open,\n      onClose,\n      onOpen,\n    }),\n    [interactive, matchWidth, onClose, onOpen, open, popoverProps],\n  )\n\n  const onSelect = useCallback(\n    (value?: string, closeOnSelect = closeOnSelectProp) => {\n      const ref = selectFocusRef ?? triggerRef\n\n      ref.current?.focus()\n\n      if (!interactive || isUndefined(value)) return\n\n      onChangeProp?.(value)\n\n      if (!closeOnSelect) return\n\n      onClose()\n    },\n    [closeOnSelectProp, interactive, onChangeProp, onClose, selectFocusRef],\n  )\n\n  const onScrollIntoView = useCallback(\n    (descendant?: ComboboxDescendant, block: SimpleDirection = \"start\") => {\n      if (!contentRef.current || !descendant) return\n\n      const style = getWindow()?.getComputedStyle(contentRef.current)\n      const padding =\n        block === \"start\" ? style?.paddingBlockStart : style?.paddingBlockEnd\n      const value = parseInt(padding ?? \"0px\")\n\n      scrollIntoView(descendant.node, {\n        behavior: (actions) =>\n          actions.forEach(({ el, top }) => {\n            el.scrollTop = block === \"start\" ? top - value : top + value\n          }),\n        block,\n        boundary: contentRef.current,\n        inline: \"nearest\",\n        scrollMode: \"if-needed\",\n      })\n    },\n    [getWindow],\n  )\n\n  const onActiveDescendant = useCallback(\n    (descendant?: ComboboxDescendant) => {\n      if (!triggerRef.current || !descendant || disabled) return\n\n      triggerRef.current.setAttribute(\"aria-activedescendant\", descendant.id)\n\n      activeDescendant.current = descendant\n\n      descendants.active(descendant)\n    },\n    [descendants, disabled],\n  )\n\n  const onOpenWithActiveDescendant = useCallback(\n    (\n      getFallbackDescendant: () => ComboboxDescendant | undefined,\n      block: SimpleDirection = \"start\",\n    ) => {\n      onOpen()\n\n      setTimeout(() => {\n        if (!initialFocusValue) {\n          const descendant = getFallbackDescendant()\n\n          onActiveDescendant(descendant)\n          onScrollIntoView(descendant, block)\n        } else {\n          const values = descendants.values()\n          const descendant =\n            values.find(({ value }) => initialFocusValue === value) ??\n            getFallbackDescendant()\n\n          onActiveDescendant(descendant)\n          onScrollIntoView(descendant, block)\n        }\n      })\n    },\n    [\n      descendants,\n      initialFocusValue,\n      onActiveDescendant,\n      onOpen,\n      onScrollIntoView,\n    ],\n  )\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n\n      ev.preventDefault()\n\n      if (!open) {\n        if (openOnClick)\n          onOpenWithActiveDescendant(descendants.enabledFirstValue)\n      } else {\n        onClose()\n      }\n    },\n    [\n      descendants,\n      disabled,\n      onClose,\n      onOpenWithActiveDescendant,\n      open,\n      openOnClick,\n    ],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLDivElement>) => {\n      if (disabled || isComposing(ev)) return\n\n      runKeyAction(\n        ev,\n        {\n          ArrowDown: (ev) => {\n            ev.preventDefault()\n\n            if (!open) {\n              onOpenWithActiveDescendant(descendants.enabledFirstValue)\n            } else if (activeDescendant.current) {\n              const descendant = descendants.enabledNextValue(\n                activeDescendant.current,\n              )\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(\n                descendant,\n                descendant?.recurred ? \"start\" : \"end\",\n              )\n            } else {\n              const descendant = descendants.enabledFirstValue()\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(descendant)\n            }\n          },\n          ArrowUp: (ev) => {\n            ev.preventDefault()\n\n            if (!open) {\n              onOpenWithActiveDescendant(descendants.enabledLastValue, \"end\")\n            } else if (activeDescendant.current) {\n              const descendant = descendants.enabledPrevValue(\n                activeDescendant.current,\n              )\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(\n                descendant,\n                descendant?.recurred ? \"end\" : \"start\",\n              )\n            } else {\n              const descendant = descendants.enabledLastValue()\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(descendant, \"end\")\n            }\n          },\n          End: (ev) => {\n            ev.preventDefault()\n\n            if (!open) return\n\n            const descendant = descendants.enabledLastValue()\n\n            onActiveDescendant(descendant)\n\n            onScrollIntoView(descendant, \"end\")\n          },\n          Enter: (ev) => {\n            if (!open) {\n              if (!openOnEnter) return\n\n              ev.preventDefault()\n\n              onOpenWithActiveDescendant(descendants.enabledFirstValue)\n            } else {\n              if (!activeDescendant.current) return\n\n              ev.preventDefault()\n\n              const { closeOnSelect, value } = activeDescendant.current\n\n              onSelect(value, closeOnSelect)\n            }\n          },\n          Home: (ev) => {\n            if (!open) return\n\n            ev.preventDefault()\n\n            const descendant = descendants.enabledFirstValue()\n\n            onActiveDescendant(descendant)\n\n            onScrollIntoView(descendant)\n          },\n          Space: (ev) => {\n            if (!open) {\n              if (!openOnSpace) return\n\n              ev.preventDefault()\n\n              onOpenWithActiveDescendant(descendants.enabledFirstValue)\n            } else {\n              if (!activeDescendant.current || !selectOnSpace) return\n\n              ev.preventDefault()\n\n              const { closeOnSelect, value } = activeDescendant.current\n\n              onSelect(value, closeOnSelect)\n            }\n          },\n        },\n        { preventDefault: false },\n      )\n    },\n    [\n      disabled,\n      open,\n      onOpenWithActiveDescendant,\n      descendants,\n      onActiveDescendant,\n      onScrollIntoView,\n      openOnEnter,\n      onSelect,\n      openOnSpace,\n      selectOnSpace,\n    ],\n  )\n\n  useUpdateEffect(() => {\n    if (open) return\n\n    activeDescendant.current = null\n  }, [open])\n\n  const getTriggerProps: PropGetter = useCallback(\n    ({\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) => ({\n      ...mergeProps(\n        {\n          ref: triggerRef,\n          \"aria-controls\": open ? contentId : undefined,\n          \"aria-disabled\": ariaAttr(!interactive),\n          \"aria-expanded\": open,\n          \"aria-haspopup\": \"listbox\",\n          \"aria-label\": ariaLabel || ariaLabelProp,\n          \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n          \"data-disabled\": dataAttr(disabled),\n          \"data-readonly\": dataAttr(readOnly),\n          role: \"combobox\",\n          tabIndex: interactive ? 0 : -1,\n        },\n        rest,\n        props,\n      )({ mergeEvent: false }),\n      onClick: handlerAll(props.onClick, rest.onClick, onClick),\n      onKeyDown: handlerAll(props.onKeyDown, rest.onKeyDown, onKeyDown),\n    }),\n    [\n      open,\n      contentId,\n      interactive,\n      ariaLabelledbyProp,\n      disabled,\n      readOnly,\n      ariaLabelProp,\n      rest,\n      onClick,\n      onKeyDown,\n    ],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id: contentId,\n      role: \"listbox\",\n      ...props,\n      ref: mergeRefs(ref, contentRef),\n      onKeyDown: handlerAll(props.onKeyDown),\n    }),\n    [contentId],\n  )\n\n  const getSeparatorProps: PropGetter = useCallback(\n    (props) => ({ role: \"separator\", ...props }),\n    [],\n  )\n\n  return {\n    activeDescendant,\n    descendants,\n    interactive,\n    open,\n    getContentProps,\n    getSeparatorProps,\n    getTriggerProps,\n    popoverProps: mergedPopoverProps,\n    onActiveDescendant,\n    onClose,\n    onOpen,\n    onOpenWithActiveDescendant,\n    onScrollIntoView,\n    onSelect,\n  }\n}\n\nexport type UseComboboxReturn = ReturnType<typeof useCombobox>\n\nexport interface UseComboboxGroupProps extends HTMLProps {}\n\nexport const useComboboxGroup = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  ...rest\n}: UseComboboxGroupProps = {}) => {\n  const labelId = useId()\n\n  const getGroupProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n      mergeProps(\n        {\n          \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby, labelId),\n          role: \"group\",\n        },\n        rest,\n        props,\n      )(),\n    [ariaLabelledbyProp, labelId, rest],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props) => ({ id: labelId, role: \"presentation\", ...props }),\n    [labelId],\n  )\n\n  return { getGroupProps, getLabelProps }\n}\n\nexport type UseComboboxGroupReturn = ReturnType<typeof useComboboxGroup>\n\nexport interface UseComboboxItemProps extends HTMLProps {\n  /**\n   * If `true`, the item will be closed when selected.\n   */\n  closeOnSelect?: boolean\n  /**\n   * If `true`, the item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, the item will be selected.\n   */\n  selected?: boolean\n  /**\n   * The value of the item.\n   */\n  value?: string\n}\n\nexport const useComboboxItem = ({\n  id,\n  \"aria-disabled\": ariaDisabled,\n  \"data-disabled\": dataDisabled,\n  closeOnSelect,\n  disabled = false,\n  selected = false,\n  value,\n  ...rest\n}: UseComboboxItemProps = {}) => {\n  const uuid = useId()\n  const itemRef = useRef<HTMLDivElement>(null)\n  const { onActiveDescendant, onClose, onSelect } = useComboboxContext()\n\n  id ??= uuid\n\n  const { descendants, register } = useComboboxDescendant({\n    id,\n    closeOnSelect,\n    disabled,\n    value,\n  })\n\n  const onActive = useCallback(() => {\n    if (disabled) return\n\n    const current = descendants.value(itemRef.current)\n\n    onActiveDescendant(current)\n  }, [descendants, disabled, onActiveDescendant])\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      if (disabled) return\n\n      onSelect(value, closeOnSelect)\n    },\n    [closeOnSelect, disabled, onSelect, value],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...mergeProps(\n        {\n          id,\n          ref: itemRef,\n          \"aria-disabled\": ariaDisabled ?? ariaAttr(disabled),\n          \"aria-selected\": selected,\n          \"data-disabled\": dataDisabled ?? dataAttr(disabled),\n          \"data-selected\": dataAttr(selected),\n          \"data-value\": value,\n          role: \"option\",\n          tabIndex: -1,\n        },\n        rest,\n        props,\n        { ref: register },\n      )({ mergeEvent: false }),\n      onClick: handlerAll(props.onClick, rest.onClick, onClick),\n      onMouseMove: handlerAll(props.onMouseMove, rest.onMouseMove, onActive),\n    }),\n    [\n      id,\n      ariaDisabled,\n      disabled,\n      selected,\n      dataDisabled,\n      value,\n      rest,\n      register,\n      onClick,\n      onActive,\n    ],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps({ style: { opacity: selected ? 1 : 0 } }, props)(),\n    [selected],\n  )\n\n  return {\n    descendants,\n    disabled,\n    selected,\n    getIndicatorProps,\n    getItemProps,\n    onActiveDescendant,\n    onClose,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["createContext","isUndefined","ariaAttr","cx","dataAttr","handlerAll"],"sources":["../../../../src/hooks/use-combobox/index.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  JSXElementConstructor,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  RefObject,\n} from \"react\"\nimport type { UsePopoverProps } from \"../../components/popover\"\nimport type { HTMLProps, PropGetter, SimpleDirection } from \"../../core\"\nimport type { Descendant } from \"../use-descendants\"\nimport type { UseDisclosureProps } from \"../use-disclosure\"\nimport { useCallback, useId, useMemo, useRef } from \"react\"\nimport scrollIntoView from \"scroll-into-view-if-needed\"\nimport { usePopoverProps } from \"../../components/popover\"\nimport { mergeProps, useEnvironment } from \"../../core\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  findChild,\n  getValidChildren,\n  handlerAll,\n  isComposing,\n  isSomeElement,\n  isUndefined,\n  mergeRefs,\n  runKeyAction,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { createDescendants } from \"../use-descendants\"\nimport { useDisclosure } from \"../use-disclosure\"\n\ninterface ComboboxSharedItem extends Omit<HTMLProps, \"children\" | \"value\"> {\n  label: ReactNode\n}\n\nexport interface ComboboxItemWithValue extends ComboboxSharedItem {\n  query?: string\n  value?: string\n}\n\nexport interface ComboboxItemWithItems extends ComboboxSharedItem {\n  items: ComboboxItemWithValue[]\n}\n\nexport type ComboboxItem = ComboboxItemWithItems | ComboboxItemWithValue\n\nexport interface CreateComboboxItemOptions {\n  Group: JSXElementConstructor<any>\n  Label: JSXElementConstructor<any>\n  Option: JSXElementConstructor<any>\n}\n\nexport const createComboboxItem = (\n  children: ReactNode,\n  { Group, Label, Option }: CreateComboboxItemOptions,\n) => {\n  const validChildren = getValidChildren(children)\n\n  return validChildren\n    .filter(\n      ({ type }) => isSomeElement(type, Option) || isSomeElement(type, Group),\n    )\n    .map(({ type, props }) => {\n      if (isSomeElement(type, Option)) {\n        return { ...props, label: props.children }\n      } else {\n        const validChildren = getValidChildren(props.children)\n        const label = findChild(validChildren, Label)\n\n        return {\n          ...props,\n          items: validChildren\n            .filter(({ type }) => isSomeElement(type, Option))\n            .map(({ props }) => ({ ...props, label: props.children })),\n          label: label?.props.children ?? props.label,\n        }\n      }\n    })\n}\n\nexport interface CreateComboboxChildrenOptions {\n  Group: JSXElementConstructor<any>\n  Option: JSXElementConstructor<any>\n  Empty?: JSXElementConstructor<any>\n}\n\nexport const createComboboxChildren = (\n  items: ComboboxItem[],\n  { Empty, Group, Option }: CreateComboboxChildrenOptions,\n) => {\n  return items.map((item, index) => {\n    if (\"data-empty\" in item && Empty) {\n      const { label, ...rest } = item\n\n      return (\n        <Empty key={index} {...rest}>\n          {label}\n        </Empty>\n      )\n    } else if (\"items\" in item) {\n      const { items, label, ...rest } = item\n\n      return (\n        <Group key={index} label={label} {...rest}>\n          {items.map(({ label, ...rest }, index) => (\n            <Option key={index} {...rest}>\n              {label}\n            </Option>\n          ))}\n        </Group>\n      )\n    } else {\n      const { label, ...rest } = item\n\n      return (\n        <Option key={index} {...rest}>\n          {label}\n        </Option>\n      )\n    }\n  })\n}\n\nexport interface ComboboxDescendantProps {\n  id: string\n  closeOnSelect?: boolean\n  value?: string\n}\nexport type ComboboxDescendant = Descendant<\n  HTMLDivElement,\n  ComboboxDescendantProps\n>\n\nconst {\n  DescendantsContext: ComboboxDescendantsContext,\n  useDescendant: useComboboxDescendant,\n  useDescendantRegister: useComboboxDescendantRegister,\n  useDescendants: useComboboxDescendants,\n} = createDescendants<HTMLDivElement, ComboboxDescendantProps>()\n\nexport {\n  ComboboxDescendantsContext,\n  useComboboxDescendant,\n  useComboboxDescendantRegister,\n  useComboboxDescendants,\n}\n\ninterface ComboboxContext extends Pick<\n  UseComboboxReturn,\n  \"onActiveDescendant\" | \"onClose\" | \"onSelect\"\n> {}\n\nconst [ComboboxContext, useComboboxContext] = createContext<ComboboxContext>({\n  name: \"ComboboxContext\",\n})\n\ninterface ComboboxGroupContext extends Pick<\n  UseComboboxGroupReturn,\n  \"getLabelProps\"\n> {}\n\nconst [ComboboxGroupContext, useComboboxGroupContext] =\n  createContext<ComboboxGroupContext>({\n    name: \"ComboboxGroupContext\",\n  })\n\nexport {\n  ComboboxContext,\n  ComboboxGroupContext,\n  useComboboxContext,\n  useComboboxGroupContext,\n}\n\nexport interface UseComboboxProps\n  extends\n    Omit<HTMLProps, \"onChange\">,\n    Omit<UseDisclosureProps, \"timing\">,\n    Omit<\n      UsePopoverProps,\n      \"autoFocus\" | \"initialFocusRef\" | \"modal\" | \"transform\" | \"updateRef\"\n    > {\n  /**\n   * If `true`, the list element will be closed when value is selected.\n   *\n   * @default true\n   */\n  closeOnSelect?: boolean\n  /**\n   * If `true`, the combobox will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The value to focus on when the combobox is opened.\n   */\n  initialFocusValue?: string\n  /**\n   * If `true`, the combobox will be opened when click on the field.\n   *\n   * @default true\n   */\n  openOnClick?: boolean\n  /**\n   * If `true`, the combobox will be opened when enter is pressed.\n   *\n   * @default true\n   */\n  openOnEnter?: boolean\n  /**\n   * If `true`, the combobox will be opened when space is pressed.\n   *\n   * @default true\n   */\n  openOnSpace?: boolean\n  /**\n   * If `true`, the combobox will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The `ref` of the element that should receive focus when selected.\n   */\n  selectFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, the item will be selected when space is pressed.\n   *\n   * @default true\n   */\n  selectOnSpace?: boolean\n  /**\n   * The callback invoked when value is selected.\n   */\n  onChange?: (value: string) => void\n}\n\nexport const useCombobox = (props: UseComboboxProps = {}) => {\n  const [\n    { matchWidth = true, ...popoverProps },\n    {\n      \"aria-label\": ariaLabelProp,\n      \"aria-labelledby\": ariaLabelledbyProp,\n      closeOnSelect: closeOnSelectProp = true,\n      defaultOpen,\n      disabled,\n      initialFocusValue,\n      open: openProp,\n      openOnClick = true,\n      openOnEnter = true,\n      openOnSpace = true,\n      readOnly,\n      selectFocusRef,\n      selectOnSpace = true,\n      onChange: onChangeProp,\n      onClose: onCloseProp,\n      onOpen: onOpenProp,\n      ...rest\n    },\n  ] = usePopoverProps(props, [\n    \"disabled\",\n    \"open\",\n    \"defaultOpen\",\n    \"onOpen\",\n    \"onClose\",\n    \"openOnClick\",\n  ])\n  const { getWindow } = useEnvironment()\n  const interactive = !(readOnly || disabled)\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const contentId = useId()\n  const descendants = useComboboxDescendants()\n  const { open, onClose, onOpen } = useDisclosure({\n    defaultOpen,\n    open: openProp,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n  })\n  const activeDescendant = useRef<ComboboxDescendant | null>(null)\n  const mergedPopoverProps = useMemo<UsePopoverProps>(\n    () => ({\n      autoFocus: false,\n      matchWidth,\n      openOnClick: false,\n      ...popoverProps,\n      disabled: !interactive,\n      open,\n      onClose,\n      onOpen,\n    }),\n    [interactive, matchWidth, onClose, onOpen, open, popoverProps],\n  )\n\n  const onSelect = useCallback(\n    (value?: string, closeOnSelect = closeOnSelectProp) => {\n      const ref = selectFocusRef ?? triggerRef\n\n      ref.current?.focus()\n\n      if (!interactive || isUndefined(value)) return\n\n      onChangeProp?.(value)\n\n      if (!closeOnSelect) return\n\n      onClose()\n    },\n    [closeOnSelectProp, interactive, onChangeProp, onClose, selectFocusRef],\n  )\n\n  const onScrollIntoView = useCallback(\n    (descendant?: ComboboxDescendant, block: SimpleDirection = \"start\") => {\n      if (!contentRef.current || !descendant) return\n\n      const style = getWindow()?.getComputedStyle(contentRef.current)\n      const padding =\n        block === \"start\" ? style?.paddingBlockStart : style?.paddingBlockEnd\n      const value = parseInt(padding ?? \"0px\")\n\n      scrollIntoView(descendant.node, {\n        behavior: (actions) =>\n          actions.forEach(({ el, top }) => {\n            el.scrollTop = block === \"start\" ? top - value : top + value\n          }),\n        block,\n        boundary: contentRef.current,\n        inline: \"nearest\",\n        scrollMode: \"if-needed\",\n      })\n    },\n    [getWindow],\n  )\n\n  const onActiveDescendant = useCallback(\n    (descendant?: ComboboxDescendant) => {\n      if (!triggerRef.current || !descendant || disabled) return\n\n      triggerRef.current.setAttribute(\"aria-activedescendant\", descendant.id)\n\n      activeDescendant.current = descendant\n\n      descendants.active(descendant)\n    },\n    [descendants, disabled],\n  )\n\n  const onOpenWithActiveDescendant = useCallback(\n    (\n      getFallbackDescendant: () => ComboboxDescendant | undefined,\n      block: SimpleDirection = \"start\",\n    ) => {\n      onOpen()\n\n      setTimeout(() => {\n        if (!initialFocusValue) {\n          const descendant = getFallbackDescendant()\n\n          onActiveDescendant(descendant)\n          onScrollIntoView(descendant, block)\n        } else {\n          const values = descendants.values()\n          const descendant =\n            values.find(({ value }) => initialFocusValue === value) ??\n            getFallbackDescendant()\n\n          onActiveDescendant(descendant)\n          onScrollIntoView(descendant, block)\n        }\n      })\n    },\n    [\n      descendants,\n      initialFocusValue,\n      onActiveDescendant,\n      onOpen,\n      onScrollIntoView,\n    ],\n  )\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n\n      ev.preventDefault()\n\n      if (!open) {\n        if (openOnClick)\n          onOpenWithActiveDescendant(descendants.enabledFirstValue)\n      } else {\n        onClose()\n      }\n    },\n    [\n      descendants,\n      disabled,\n      onClose,\n      onOpenWithActiveDescendant,\n      open,\n      openOnClick,\n    ],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLDivElement>) => {\n      if (disabled || isComposing(ev)) return\n\n      runKeyAction(\n        ev,\n        {\n          ArrowDown: (ev) => {\n            ev.preventDefault()\n\n            if (!open) {\n              onOpenWithActiveDescendant(descendants.enabledFirstValue)\n            } else if (activeDescendant.current) {\n              const descendant = descendants.enabledNextValue(\n                activeDescendant.current,\n              )\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(\n                descendant,\n                descendant?.recurred ? \"start\" : \"end\",\n              )\n            } else {\n              const descendant = descendants.enabledFirstValue()\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(descendant)\n            }\n          },\n          ArrowUp: (ev) => {\n            ev.preventDefault()\n\n            if (!open) {\n              onOpenWithActiveDescendant(descendants.enabledLastValue, \"end\")\n            } else if (activeDescendant.current) {\n              const descendant = descendants.enabledPrevValue(\n                activeDescendant.current,\n              )\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(\n                descendant,\n                descendant?.recurred ? \"end\" : \"start\",\n              )\n            } else {\n              const descendant = descendants.enabledLastValue()\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(descendant, \"end\")\n            }\n          },\n          End: (ev) => {\n            ev.preventDefault()\n\n            if (!open) return\n\n            const descendant = descendants.enabledLastValue()\n\n            onActiveDescendant(descendant)\n\n            onScrollIntoView(descendant, \"end\")\n          },\n          Enter: (ev) => {\n            if (!open) {\n              if (!openOnEnter) return\n\n              ev.preventDefault()\n\n              onOpenWithActiveDescendant(descendants.enabledFirstValue)\n            } else {\n              if (!activeDescendant.current) return\n\n              ev.preventDefault()\n\n              const { closeOnSelect, value } = activeDescendant.current\n\n              onSelect(value, closeOnSelect)\n            }\n          },\n          Home: (ev) => {\n            if (!open) return\n\n            ev.preventDefault()\n\n            const descendant = descendants.enabledFirstValue()\n\n            onActiveDescendant(descendant)\n\n            onScrollIntoView(descendant)\n          },\n          Space: (ev) => {\n            if (!open) {\n              if (!openOnSpace) return\n\n              ev.preventDefault()\n\n              onOpenWithActiveDescendant(descendants.enabledFirstValue)\n            } else {\n              if (!activeDescendant.current || !selectOnSpace) return\n\n              ev.preventDefault()\n\n              const { closeOnSelect, value } = activeDescendant.current\n\n              onSelect(value, closeOnSelect)\n            }\n          },\n        },\n        { preventDefault: false },\n      )\n    },\n    [\n      disabled,\n      open,\n      onOpenWithActiveDescendant,\n      descendants,\n      onActiveDescendant,\n      onScrollIntoView,\n      openOnEnter,\n      onSelect,\n      openOnSpace,\n      selectOnSpace,\n    ],\n  )\n\n  useUpdateEffect(() => {\n    if (open) return\n\n    activeDescendant.current = null\n  }, [open])\n\n  const getTriggerProps: PropGetter = useCallback(\n    ({\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) => ({\n      ...mergeProps(\n        {\n          ref: triggerRef,\n          \"aria-controls\": open ? contentId : undefined,\n          \"aria-disabled\": ariaAttr(!interactive),\n          \"aria-expanded\": open,\n          \"aria-haspopup\": \"listbox\",\n          \"aria-label\": ariaLabel || ariaLabelProp,\n          \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n          \"data-disabled\": dataAttr(disabled),\n          \"data-readonly\": dataAttr(readOnly),\n          role: \"combobox\",\n          tabIndex: interactive ? 0 : -1,\n        },\n        rest,\n        props,\n      )({ mergeEvent: false }),\n      onClick: handlerAll(props.onClick, rest.onClick, onClick),\n      onKeyDown: handlerAll(props.onKeyDown, rest.onKeyDown, onKeyDown),\n    }),\n    [\n      open,\n      contentId,\n      interactive,\n      ariaLabelledbyProp,\n      disabled,\n      readOnly,\n      ariaLabelProp,\n      rest,\n      onClick,\n      onKeyDown,\n    ],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id: contentId,\n      role: \"listbox\",\n      ...props,\n      ref: mergeRefs(ref, contentRef),\n      onKeyDown: handlerAll(props.onKeyDown),\n    }),\n    [contentId],\n  )\n\n  const getSeparatorProps: PropGetter = useCallback(\n    (props) => ({ role: \"separator\", ...props }),\n    [],\n  )\n\n  return {\n    activeDescendant,\n    descendants,\n    interactive,\n    open,\n    getContentProps,\n    getSeparatorProps,\n    getTriggerProps,\n    popoverProps: mergedPopoverProps,\n    onActiveDescendant,\n    onClose,\n    onOpen,\n    onOpenWithActiveDescendant,\n    onScrollIntoView,\n    onSelect,\n  }\n}\n\nexport type UseComboboxReturn = ReturnType<typeof useCombobox>\n\nexport interface UseComboboxGroupProps extends HTMLProps {}\n\nexport const useComboboxGroup = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  ...rest\n}: UseComboboxGroupProps = {}) => {\n  const labelId = useId()\n\n  const getGroupProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n      mergeProps(\n        {\n          \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby, labelId),\n          role: \"group\",\n        },\n        rest,\n        props,\n      )(),\n    [ariaLabelledbyProp, labelId, rest],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props) => ({ id: labelId, role: \"presentation\", ...props }),\n    [labelId],\n  )\n\n  return { getGroupProps, getLabelProps }\n}\n\nexport type UseComboboxGroupReturn = ReturnType<typeof useComboboxGroup>\n\nexport interface UseComboboxItemProps extends HTMLProps {\n  /**\n   * If `true`, the item will be closed when selected.\n   */\n  closeOnSelect?: boolean\n  /**\n   * If `true`, the item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, the item will be selected.\n   */\n  selected?: boolean\n  /**\n   * The value of the item.\n   */\n  value?: string\n}\n\nexport const useComboboxItem = ({\n  id,\n  \"aria-disabled\": ariaDisabled,\n  \"data-disabled\": dataDisabled,\n  closeOnSelect,\n  disabled = false,\n  selected = false,\n  value,\n  ...rest\n}: UseComboboxItemProps = {}) => {\n  const uuid = useId()\n  const itemRef = useRef<HTMLDivElement>(null)\n  const { onActiveDescendant, onClose, onSelect } = useComboboxContext()\n\n  id ??= uuid\n\n  const { descendants, register } = useComboboxDescendant({\n    id,\n    closeOnSelect,\n    disabled,\n    value,\n  })\n\n  const onActive = useCallback(() => {\n    if (disabled) return\n\n    const current = descendants.value(itemRef.current)\n\n    onActiveDescendant(current)\n  }, [descendants, disabled, onActiveDescendant])\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      if (disabled) return\n\n      onSelect(value, closeOnSelect)\n    },\n    [closeOnSelect, disabled, onSelect, value],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...mergeProps(\n        {\n          id,\n          ref: itemRef,\n          \"aria-disabled\": ariaDisabled ?? ariaAttr(disabled),\n          \"aria-selected\": selected,\n          \"data-disabled\": dataDisabled ?? dataAttr(disabled),\n          \"data-selected\": dataAttr(selected),\n          \"data-value\": value,\n          role: \"option\",\n          tabIndex: -1,\n        },\n        rest,\n        props,\n        { ref: register },\n      )({ mergeEvent: false }),\n      onClick: handlerAll(props.onClick, rest.onClick, onClick),\n      onMouseMove: handlerAll(props.onMouseMove, rest.onMouseMove, onActive),\n    }),\n    [\n      id,\n      ariaDisabled,\n      disabled,\n      selected,\n      dataDisabled,\n      value,\n      rest,\n      register,\n      onClick,\n      onActive,\n    ],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps({ style: { opacity: selected ? 1 : 0 } }, props)(),\n    [selected],\n  )\n\n  return {\n    descendants,\n    disabled,\n    selected,\n    getIndicatorProps,\n    getItemProps,\n    onActiveDescendant,\n    onClose,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAwDA,MAAa,sBACX,UACA,EAAE,OAAO,OAAO,aACb;CAGH,OAFsB,iBAAiB,QAEpB,CAAC,CACjB,QACE,EAAE,WAAW,cAAc,MAAM,MAAM,KAAK,cAAc,MAAM,KAAK,CACxE,CAAC,CACA,KAAK,EAAE,MAAM,YAAY;EACxB,IAAI,cAAc,MAAM,MAAM,GAC5B,OAAO;GAAE,GAAG;GAAO,OAAO,MAAM;EAAS;OACpC;GACL,MAAM,gBAAgB,iBAAiB,MAAM,QAAQ;GACrD,MAAM,QAAQ,UAAU,eAAe,KAAK;GAE5C,OAAO;IACL,GAAG;IACH,OAAO,cACJ,QAAQ,EAAE,WAAW,cAAc,MAAM,MAAM,CAAC,CAAC,CACjD,KAAK,EAAE,aAAa;KAAE,GAAG;KAAO,OAAO,MAAM;IAAS,EAAE;IAC3D,OAAO,OAAO,MAAM,YAAY,MAAM;GACxC;EACF;CACF,CAAC;AACL;AAQA,MAAa,0BACX,OACA,EAAE,OAAO,OAAO,aACb;CACH,OAAO,MAAM,KAAK,MAAM,UAAU;EAChC,IAAI,gBAAgB,QAAQ,OAAO;GACjC,MAAM,EAAE,OAAO,GAAG,SAAS;GAE3B,OACE,oBAAC,OAAD;IAAmB,GAAI;IACpB,UAAA;GACI,GAFK,KAEL;EAEX,OAAO,IAAI,WAAW,MAAM;GAC1B,MAAM,EAAE,OAAO,OAAO,GAAG,SAAS;GAElC,OACE,oBAAC,OAAD;IAA0B;IAAO,GAAI;IAClC,UAAA,MAAM,KAAK,EAAE,OAAO,GAAG,QAAQ,UAC9B,oBAAC,QAAD;KAAoB,GAAI;KACrB,UAAA;IACK,GAFK,KAEL,CACT;GACI,GANK,KAML;EAEX,OAAO;GACL,MAAM,EAAE,OAAO,GAAG,SAAS;GAE3B,OACE,oBAAC,QAAD;IAAoB,GAAI;IACrB,UAAA;GACK,GAFK,KAEL;EAEZ;CACF,CAAC;AACH;AAYA,MAAM,EACJ,oBAAoB,4BACpB,eAAe,uBACf,uBAAuB,+BACvB,gBAAgB,2BACd,kBAA2D;AAc/D,MAAM,CAAC,iBAAiB,sBAAsBA,gBAA+B,EAC3E,MAAM,kBACR,CAAC;AAOD,MAAM,CAAC,sBAAsB,2BAC3BA,gBAAoC,EAClC,MAAM,uBACR,CAAC;AAyEH,MAAa,eAAe,QAA0B,CAAC,MAAM;CAC3D,MAAM,CACJ,EAAE,aAAa,MAAM,GAAG,gBACxB,EACE,cAAc,eACd,mBAAmB,oBACnB,eAAe,oBAAoB,MACnC,aACA,UACA,mBACA,MAAM,UACN,cAAc,MACd,cAAc,MACd,cAAc,MACd,UACA,gBACA,gBAAgB,MAChB,UAAU,cACV,SAAS,aACT,QAAQ,YACR,GAAG,UAEH,gBAAgB,OAAO;EACzB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,EAAE,cAAc,eAAe;CACrC,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,YAAY,MAAM;CACxB,MAAM,cAAc,uBAAuB;CAC3C,MAAM,EAAE,MAAM,SAAS,WAAW,cAAc;EAC9C;EACA,MAAM;EACN,SAAS;EACT,QAAQ;CACV,CAAC;CACD,MAAM,mBAAmB,OAAkC,IAAI;CAC/D,MAAM,qBAAqB,eAClB;EACL,WAAW;EACX;EACA,aAAa;EACb,GAAG;EACH,UAAU,CAAC;EACX;EACA;EACA;CACF,IACA;EAAC;EAAa;EAAY;EAAS;EAAQ;EAAM;CAAY,CAC/D;CAEA,MAAM,WAAW,aACd,OAAgB,gBAAgB,sBAAsB;EAGrD,CAFY,kBAAkB,WAAA,CAE1B,SAAS,MAAM;EAEnB,IAAI,CAAC,gBAAA,GAAeC,cAAAA,YAAAA,CAAY,KAAK,GAAG;EAExC,eAAe,KAAK;EAEpB,IAAI,CAAC,eAAe;EAEpB,QAAQ;CACV,GACA;EAAC;EAAmB;EAAa;EAAc;EAAS;CAAc,CACxE;CAEA,MAAM,mBAAmB,aACtB,YAAiC,QAAyB,YAAY;EACrE,IAAI,CAAC,WAAW,WAAW,CAAC,YAAY;EAExC,MAAM,QAAQ,UAAU,CAAC,EAAE,iBAAiB,WAAW,OAAO;EAC9D,MAAM,UACJ,UAAU,UAAU,OAAO,oBAAoB,OAAO;EACxD,MAAM,QAAQ,SAAS,WAAW,KAAK;EAEvC,eAAe,WAAW,MAAM;GAC9B,WAAW,YACT,QAAQ,SAAS,EAAE,IAAI,UAAU;IAC/B,GAAG,YAAY,UAAU,UAAU,MAAM,QAAQ,MAAM;GACzD,CAAC;GACH;GACA,UAAU,WAAW;GACrB,QAAQ;GACR,YAAY;EACd,CAAC;CACH,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,qBAAqB,aACxB,eAAoC;EACnC,IAAI,CAAC,WAAW,WAAW,CAAC,cAAc,UAAU;EAEpD,WAAW,QAAQ,aAAa,yBAAyB,WAAW,EAAE;EAEtE,iBAAiB,UAAU;EAE3B,YAAY,OAAO,UAAU;CAC/B,GACA,CAAC,aAAa,QAAQ,CACxB;CAEA,MAAM,6BAA6B,aAE/B,uBACA,QAAyB,YACtB;EACH,OAAO;EAEP,iBAAiB;GACf,IAAI,CAAC,mBAAmB;IACtB,MAAM,aAAa,sBAAsB;IAEzC,mBAAmB,UAAU;IAC7B,iBAAiB,YAAY,KAAK;GACpC,OAAO;IAEL,MAAM,aADS,YAAY,OAEpB,CAAC,CAAC,MAAM,EAAE,YAAY,sBAAsB,KAAK,KACtD,sBAAsB;IAExB,mBAAmB,UAAU;IAC7B,iBAAiB,YAAY,KAAK;GACpC;EACF,CAAC;CACH,GACA;EACE;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,UAAU,aACb,OAAmC;EAClC,IAAI,UAAU;EAEd,GAAG,eAAe;EAElB,IAAI,CAAC,MACC;OAAA,aACF,2BAA2B,YAAY,iBAAiB;EAAA,OAE1D,QAAQ;CAEZ,GACA;EACE;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,YAAY,aACf,OAAsC;EACrC,IAAI,YAAY,YAAY,EAAE,GAAG;EAEjC,aACE,IACA;GACE,YAAY,OAAO;IACjB,GAAG,eAAe;IAElB,IAAI,CAAC,MACH,2BAA2B,YAAY,iBAAiB;SACnD,IAAI,iBAAiB,SAAS;KACnC,MAAM,aAAa,YAAY,iBAC7B,iBAAiB,OACnB;KAEA,mBAAmB,UAAU;KAE7B,iBACE,YACA,YAAY,WAAW,UAAU,KACnC;IACF,OAAO;KACL,MAAM,aAAa,YAAY,kBAAkB;KAEjD,mBAAmB,UAAU;KAE7B,iBAAiB,UAAU;IAC7B;GACF;GACA,UAAU,OAAO;IACf,GAAG,eAAe;IAElB,IAAI,CAAC,MACH,2BAA2B,YAAY,kBAAkB,KAAK;SACzD,IAAI,iBAAiB,SAAS;KACnC,MAAM,aAAa,YAAY,iBAC7B,iBAAiB,OACnB;KAEA,mBAAmB,UAAU;KAE7B,iBACE,YACA,YAAY,WAAW,QAAQ,OACjC;IACF,OAAO;KACL,MAAM,aAAa,YAAY,iBAAiB;KAEhD,mBAAmB,UAAU;KAE7B,iBAAiB,YAAY,KAAK;IACpC;GACF;GACA,MAAM,OAAO;IACX,GAAG,eAAe;IAElB,IAAI,CAAC,MAAM;IAEX,MAAM,aAAa,YAAY,iBAAiB;IAEhD,mBAAmB,UAAU;IAE7B,iBAAiB,YAAY,KAAK;GACpC;GACA,QAAQ,OAAO;IACb,IAAI,CAAC,MAAM;KACT,IAAI,CAAC,aAAa;KAElB,GAAG,eAAe;KAElB,2BAA2B,YAAY,iBAAiB;IAC1D,OAAO;KACL,IAAI,CAAC,iBAAiB,SAAS;KAE/B,GAAG,eAAe;KAElB,MAAM,EAAE,eAAe,UAAU,iBAAiB;KAElD,SAAS,OAAO,aAAa;IAC/B;GACF;GACA,OAAO,OAAO;IACZ,IAAI,CAAC,MAAM;IAEX,GAAG,eAAe;IAElB,MAAM,aAAa,YAAY,kBAAkB;IAEjD,mBAAmB,UAAU;IAE7B,iBAAiB,UAAU;GAC7B;GACA,QAAQ,OAAO;IACb,IAAI,CAAC,MAAM;KACT,IAAI,CAAC,aAAa;KAElB,GAAG,eAAe;KAElB,2BAA2B,YAAY,iBAAiB;IAC1D,OAAO;KACL,IAAI,CAAC,iBAAiB,WAAW,CAAC,eAAe;KAEjD,GAAG,eAAe;KAElB,MAAM,EAAE,eAAe,UAAU,iBAAiB;KAElD,SAAS,OAAO,aAAa;IAC/B;GACF;EACF,GACA,EAAE,gBAAgB,MAAM,CAC1B;CACF,GACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,sBAAsB;EACpB,IAAI,MAAM;EAEV,iBAAiB,UAAU;CAC7B,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,kBAA8B,aACjC,EACC,cAAc,WACd,mBAAmB,gBACnB,GAAG,UACD,CAAC,OAAO;EACV,GAAG,WACD;GACE,KAAK;GACL,iBAAiB,OAAO,YAAY,KAAA;GACpC,kBAAA,GAAiBC,cAAAA,SAAAA,CAAS,CAAC,WAAW;GACtC,iBAAiB;GACjB,iBAAiB;GACjB,cAAc,aAAa;GAC3B,oBAAA,GAAmBC,cAAAA,GAAAA,CAAG,gBAAgB,kBAAkB;GACxD,kBAAA,GAAiBC,cAAAA,SAAAA,CAAS,QAAQ;GAClC,kBAAA,GAAiBA,cAAAA,SAAAA,CAAS,QAAQ;GAClC,MAAM;GACN,UAAU,cAAc,IAAI;EAC9B,GACA,MACA,KACF,CAAC,CAAC,EAAE,YAAY,MAAM,CAAC;EACvB,UAAA,GAASC,cAAAA,WAAAA,CAAW,MAAM,SAAS,KAAK,SAAS,OAAO;EACxD,YAAA,GAAWA,cAAAA,WAAAA,CAAW,MAAM,WAAW,KAAK,WAAW,SAAS;CAClE,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAkBA,OAAO;EACL;EACA;EACA;EACA;EACA,iBArBkC,aACjC,EAAE,KAAK,GAAG,UAAU,CAAC,OAAO;GAC3B,IAAI;GACJ,MAAM;GACN,GAAG;GACH,KAAK,UAAU,KAAK,UAAU;GAC9B,YAAA,GAAWA,cAAAA,WAAAA,CAAW,MAAM,SAAS;EACvC,IACA,CAAC,SAAS,CAaI;EACd,mBAXoC,aACnC,WAAW;GAAE,MAAM;GAAa,GAAG;EAAM,IAC1C,CAAC,CASe;EAChB;EACA,cAAc;EACd;EACA;EACA;EACA;EACA;EACA;CACF;AACF;AAMA,MAAa,oBAAoB,EAC/B,mBAAmB,oBACnB,GAAG,SACsB,CAAC,MAAM;CAChC,MAAM,UAAU,MAAM;CAoBtB,OAAO;EAAE,eAlByB,aAC/B,EAAE,mBAAmB,gBAAgB,GAAG,UAAU,CAAC,MAClD,WACE;GACE,oBAAA,GAAmBF,cAAAA,GAAAA,CAAG,oBAAoB,gBAAgB,OAAO;GACjE,MAAM;EACR,GACA,MACA,KACF,CAAC,CAAC,GACJ;GAAC;GAAoB;GAAS;EAAI,CAQf;EAAG,eALkB,aACvC,WAAW;GAAE,IAAI;GAAS,MAAM;GAAgB,GAAG;EAAM,IAC1D,CAAC,OAAO,CAG0B;CAAE;AACxC;AAyBA,MAAa,mBAAmB,EAC9B,IACA,iBAAiB,cACjB,iBAAiB,cACjB,eACA,WAAW,OACX,WAAW,OACX,OACA,GAAG,SACqB,CAAC,MAAM;CAC/B,MAAM,OAAO,MAAM;CACnB,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,EAAE,oBAAoB,SAAS,aAAa,mBAAmB;CAErE,OAAO;CAEP,MAAM,EAAE,aAAa,aAAa,sBAAsB;EACtD;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,WAAW,kBAAkB;EACjC,IAAI,UAAU;EAEd,MAAM,UAAU,YAAY,MAAM,QAAQ,OAAO;EAEjD,mBAAmB,OAAO;CAC5B,GAAG;EAAC;EAAa;EAAU;CAAkB,CAAC;CAE9C,MAAM,UAAU,aACb,OAAmC;EAClC,GAAG,eAAe;EAElB,IAAI,UAAU;EAEd,SAAS,OAAO,aAAa;CAC/B,GACA;EAAC;EAAe;EAAU;EAAU;CAAK,CAC3C;CAEA,MAAM,eAA2B,aAC9B,QAAQ,CAAC,OAAO;EACf,GAAG,WACD;GACE;GACA,KAAK;GACL,iBAAiB,iBAAA,GAAgBD,cAAAA,SAAAA,CAAS,QAAQ;GAClD,iBAAiB;GACjB,iBAAiB,iBAAA,GAAgBE,cAAAA,SAAAA,CAAS,QAAQ;GAClD,kBAAA,GAAiBA,cAAAA,SAAAA,CAAS,QAAQ;GAClC,cAAc;GACd,MAAM;GACN,UAAU;EACZ,GACA,MACA,OACA,EAAE,KAAK,SAAS,CAClB,CAAC,CAAC,EAAE,YAAY,MAAM,CAAC;EACvB,UAAA,GAASC,cAAAA,WAAAA,CAAW,MAAM,SAAS,KAAK,SAAS,OAAO;EACxD,cAAA,GAAaA,cAAAA,WAAAA,CAAW,MAAM,aAAa,KAAK,aAAa,QAAQ;CACvE,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAQA,OAAO;EACL;EACA;EACA;EACA,mBAVoC,aACnC,QAAQ,CAAC,MACR,WAAW,EAAE,OAAO,EAAE,SAAS,WAAW,IAAI,EAAE,EAAE,GAAG,KAAK,CAAC,CAAC,GAC9D,CAAC,QAAQ,CAOO;EAChB;EACA;EACA;CACF;AACF"}

package/dist/esm/hooks/use-controllable-state/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/hooks/use-controllable-state/index.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  Dispatch,\n  SetStateAction,\n} from \"react\"\nimport { useState } from \"react\"\nimport {\n  isBoolean,\n  isNull,\n  isUndefined,\n  runIfFn,\n  useCallbackRef,\n} from \"../../utils\"\n\ninterface UseControllableStateMethods<Y> {\n  onChange?: (value: Y) => void\n  onUpdate?: (prev: Y, next: Y) => boolean\n}\n\nexport interface UseControllableStateProps<\n  Y,\n> extends UseControllableStateMethods<Y> {\n  defaultValue?: (() => Y) | Y\n  value?: Y\n}\n\nexport function useControllableState<Y>(\n  props: UseControllableStateMethods<Y> & {\n    value: Y\n    defaultValue?: (() => Y) | Y\n  },\n): [Y, Dispatch<SetStateAction<Y>>]\n\nexport function useControllableState<Y>(\n  props: UseControllableStateMethods<Y> & {\n    defaultValue: (() => Y) | Y\n    value?: Y\n  },\n): [Y, Dispatch<SetStateAction<Y>>]\n\nexport function useControllableState<Y>(\n  props: UseControllableStateProps<Y>,\n): [Y, Dispatch<SetStateAction<Y>>]\n\nexport function useControllableState<Y>({\n  defaultValue: defaultValueProp,\n  value,\n  onChange: onChangeProp,\n  onUpdate: onUpdateProp = (prev, next) => prev !== next,\n}: UseControllableStateProps<Y>) {\n  const onChange = useCallbackRef(onChangeProp)\n  const onUpdate = useCallbackRef(onUpdateProp)\n  const [defaultValue, setDefaultValue] = useState(defaultValueProp)\n  const controlled = !isUndefined(value)\n  const currentValue = (controlled ? value : defaultValue) as Y\n\n  const setValue = useCallbackRef(\n    (next: SetStateAction<Y>) => {\n      const nextValue = runIfFn(next, currentValue)\n\n      if (!onUpdate(currentValue, nextValue)) return\n\n      if (!controlled || isUndefined(nextValue) || isNull(nextValue))\n        setDefaultValue(nextValue)\n\n      onChange(nextValue)\n    },\n    [controlled, currentValue, onChange, onUpdate],\n  )\n\n  return [currentValue, setValue]\n}\n\nfunction isHTMLInputElement(el: HTMLElement): el is HTMLInputElement {\n  return el instanceof HTMLInputElement\n}\n\ninterface UseControllableEventStateMethods<\n  Y extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n> {\n  onChange?: ChangeEventHandler<Y>\n}\n\nexport interface UseControllableEventStateProps<\n  Y extends boolean | number | string,\n  M extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n> extends UseControllableEventStateMethods<M> {\n  defaultValue?: (() => Y) | Y\n  value?: Y\n}\n\nexport function useControllableEventState<\n  Y extends boolean | number | string,\n  M extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n>(\n  props: UseControllableEventStateMethods<M> & {\n    value: Y\n    defaultValue?: (() => Y) | Y\n  },\n): [Y, ChangeEventHandler<M>]\n\nexport function useControllableEventState<\n  Y extends boolean | number | string,\n  M extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n>(\n  props: UseControllableEventStateMethods<M> & {\n    defaultValue: (() => Y) | Y\n    value?: Y\n  },\n): [Y, ChangeEventHandler<M>]\n\nexport function useControllableEventState<\n  Y extends boolean | number | string,\n  M extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n>(props: UseControllableEventStateProps<Y, M>): [Y, ChangeEventHandler<M>]\n\nexport function useControllableEventState<\n  Y extends boolean | number | string,\n  M extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n>({\n  defaultValue: defaultValueProp,\n  value,\n  onChange: onChangeProp,\n}: UseControllableEventStateProps<Y, M>) {\n  const onChange = useCallbackRef(onChangeProp)\n  const [defaultValue, setDefaultValue] = useState(defaultValueProp)\n  const controlled = !isUndefined(value)\n  const currentValue = (controlled ? value : defaultValue) as Y\n  const boolean = isBoolean(currentValue)\n\n  const setValue = useCallbackRef(\n    (ev: ChangeEvent<M>) => {\n      const value =\n        boolean && isHTMLInputElement(ev.target)\n          ? (ev.target.checked as Y)\n          : (ev.target.value as Y)\n\n      if (!controlled || isUndefined(value) || isNull(value))\n        setDefaultValue(value)\n\n      onChange(ev)\n    },\n    [controlled, currentValue, onChange],\n  )\n\n  return [currentValue, setValue]\n}\n"],"mappings":";;;;;AA+CA,SAAgB,qBAAwB,EACtC,cAAc,kBACd,OACA,UAAU,cACV,UAAU,gBAAgB,MAAM,SAAS,SAAS,QACnB;CAC/B,MAAM,WAAW,eAAe,YAAY;CAC5C,MAAM,WAAW,eAAe,YAAY;CAC5C,MAAM,CAAC,cAAc,mBAAmB,SAAS,gBAAgB;CACjE,MAAM,aAAa,EAAA,GAAA,cAAA,YAAA,CAAa,KAAK;CACrC,MAAM,eAAgB,aAAa,QAAQ;CAgB3C,OAAO,CAAC,cAdS,gBACd,SAA4B;EAC3B,MAAM,aAAA,GAAA,cAAA,QAAA,CAAoB,MAAM,YAAY;EAE5C,IAAI,CAAC,SAAS,cAAc,SAAS,GAAG;EAExC,IAAI,CAAC,eAAA,GAAA,cAAA,YAAA,CAA0B,SAAS,MAAA,GAAA,cAAA,OAAA,CAAY,SAAS,GAC3D,gBAAgB,SAAS;EAE3B,SAAS,SAAS;CACpB,GACA;EAAC;EAAY;EAAc;EAAU;CAAQ,CAGlB,CAAC;AAChC;AAEA,SAAS,mBAAmB,IAAyC;CACnE,OAAO,cAAc;AACvB;AAyCA,SAAgB,0BAGd,EACA,cAAc,kBACd,OACA,UAAU,gBAC6B;CACvC,MAAM,WAAW,eAAe,YAAY;CAC5C,MAAM,CAAC,cAAc,mBAAmB,SAAS,gBAAgB;CACjE,MAAM,aAAa,EAAA,GAAA,cAAA,YAAA,CAAa,KAAK;CACrC,MAAM,eAAgB,aAAa,QAAQ;CAC3C,MAAM,WAAA,GAAA,cAAA,UAAA,CAAoB,YAAY;CAiBtC,OAAO,CAAC,cAfS,gBACd,OAAuB;EACtB,MAAM,QACJ,WAAW,mBAAmB,GAAG,MAAM,IAClC,GAAG,OAAO,UACV,GAAG,OAAO;EAEjB,IAAI,CAAC,eAAA,GAAA,cAAA,YAAA,CAA0B,KAAK,MAAA,GAAA,cAAA,OAAA,CAAY,KAAK,GACnD,gBAAgB,KAAK;EAEvB,SAAS,EAAE;CACb,GACA;EAAC;EAAY;EAAc;CAAQ,CAGR,CAAC;AAChC"}
+{"version":3,"file":"index.js","names":["isUndefined","runIfFn","isNull","isBoolean"],"sources":["../../../../src/hooks/use-controllable-state/index.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  Dispatch,\n  SetStateAction,\n} from \"react\"\nimport { useState } from \"react\"\nimport {\n  isBoolean,\n  isNull,\n  isUndefined,\n  runIfFn,\n  useCallbackRef,\n} from \"../../utils\"\n\ninterface UseControllableStateMethods<Y> {\n  onChange?: (value: Y) => void\n  onUpdate?: (prev: Y, next: Y) => boolean\n}\n\nexport interface UseControllableStateProps<\n  Y,\n> extends UseControllableStateMethods<Y> {\n  defaultValue?: (() => Y) | Y\n  value?: Y\n}\n\nexport function useControllableState<Y>(\n  props: UseControllableStateMethods<Y> & {\n    value: Y\n    defaultValue?: (() => Y) | Y\n  },\n): [Y, Dispatch<SetStateAction<Y>>]\n\nexport function useControllableState<Y>(\n  props: UseControllableStateMethods<Y> & {\n    defaultValue: (() => Y) | Y\n    value?: Y\n  },\n): [Y, Dispatch<SetStateAction<Y>>]\n\nexport function useControllableState<Y>(\n  props: UseControllableStateProps<Y>,\n): [Y, Dispatch<SetStateAction<Y>>]\n\nexport function useControllableState<Y>({\n  defaultValue: defaultValueProp,\n  value,\n  onChange: onChangeProp,\n  onUpdate: onUpdateProp = (prev, next) => prev !== next,\n}: UseControllableStateProps<Y>) {\n  const onChange = useCallbackRef(onChangeProp)\n  const onUpdate = useCallbackRef(onUpdateProp)\n  const [defaultValue, setDefaultValue] = useState(defaultValueProp)\n  const controlled = !isUndefined(value)\n  const currentValue = (controlled ? value : defaultValue) as Y\n\n  const setValue = useCallbackRef(\n    (next: SetStateAction<Y>) => {\n      const nextValue = runIfFn(next, currentValue)\n\n      if (!onUpdate(currentValue, nextValue)) return\n\n      if (!controlled || isUndefined(nextValue) || isNull(nextValue))\n        setDefaultValue(nextValue)\n\n      onChange(nextValue)\n    },\n    [controlled, currentValue, onChange, onUpdate],\n  )\n\n  return [currentValue, setValue]\n}\n\nfunction isHTMLInputElement(el: HTMLElement): el is HTMLInputElement {\n  return el instanceof HTMLInputElement\n}\n\ninterface UseControllableEventStateMethods<\n  Y extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n> {\n  onChange?: ChangeEventHandler<Y>\n}\n\nexport interface UseControllableEventStateProps<\n  Y extends boolean | number | string,\n  M extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n> extends UseControllableEventStateMethods<M> {\n  defaultValue?: (() => Y) | Y\n  value?: Y\n}\n\nexport function useControllableEventState<\n  Y extends boolean | number | string,\n  M extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n>(\n  props: UseControllableEventStateMethods<M> & {\n    value: Y\n    defaultValue?: (() => Y) | Y\n  },\n): [Y, ChangeEventHandler<M>]\n\nexport function useControllableEventState<\n  Y extends boolean | number | string,\n  M extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n>(\n  props: UseControllableEventStateMethods<M> & {\n    defaultValue: (() => Y) | Y\n    value?: Y\n  },\n): [Y, ChangeEventHandler<M>]\n\nexport function useControllableEventState<\n  Y extends boolean | number | string,\n  M extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n>(props: UseControllableEventStateProps<Y, M>): [Y, ChangeEventHandler<M>]\n\nexport function useControllableEventState<\n  Y extends boolean | number | string,\n  M extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n>({\n  defaultValue: defaultValueProp,\n  value,\n  onChange: onChangeProp,\n}: UseControllableEventStateProps<Y, M>) {\n  const onChange = useCallbackRef(onChangeProp)\n  const [defaultValue, setDefaultValue] = useState(defaultValueProp)\n  const controlled = !isUndefined(value)\n  const currentValue = (controlled ? value : defaultValue) as Y\n  const boolean = isBoolean(currentValue)\n\n  const setValue = useCallbackRef(\n    (ev: ChangeEvent<M>) => {\n      const value =\n        boolean && isHTMLInputElement(ev.target)\n          ? (ev.target.checked as Y)\n          : (ev.target.value as Y)\n\n      if (!controlled || isUndefined(value) || isNull(value))\n        setDefaultValue(value)\n\n      onChange(ev)\n    },\n    [controlled, currentValue, onChange],\n  )\n\n  return [currentValue, setValue]\n}\n"],"mappings":";;;;;AA+CA,SAAgB,qBAAwB,EACtC,cAAc,kBACd,OACA,UAAU,cACV,UAAU,gBAAgB,MAAM,SAAS,SAAS,QACnB;CAC/B,MAAM,WAAW,eAAe,YAAY;CAC5C,MAAM,WAAW,eAAe,YAAY;CAC5C,MAAM,CAAC,cAAc,mBAAmB,SAAS,gBAAgB;CACjE,MAAM,aAAa,EAAA,GAACA,cAAAA,YAAAA,CAAY,KAAK;CACrC,MAAM,eAAgB,aAAa,QAAQ;CAgB3C,OAAO,CAAC,cAdS,gBACd,SAA4B;EAC3B,MAAM,aAAA,GAAYC,cAAAA,QAAAA,CAAQ,MAAM,YAAY;EAE5C,IAAI,CAAC,SAAS,cAAc,SAAS,GAAG;EAExC,IAAI,CAAC,eAAA,GAAcD,cAAAA,YAAAA,CAAY,SAAS,MAAA,GAAKE,cAAAA,OAAAA,CAAO,SAAS,GAC3D,gBAAgB,SAAS;EAE3B,SAAS,SAAS;CACpB,GACA;EAAC;EAAY;EAAc;EAAU;CAAQ,CAGlB,CAAC;AAChC;AAEA,SAAS,mBAAmB,IAAyC;CACnE,OAAO,cAAc;AACvB;AAyCA,SAAgB,0BAGd,EACA,cAAc,kBACd,OACA,UAAU,gBAC6B;CACvC,MAAM,WAAW,eAAe,YAAY;CAC5C,MAAM,CAAC,cAAc,mBAAmB,SAAS,gBAAgB;CACjE,MAAM,aAAa,EAAA,GAACF,cAAAA,YAAAA,CAAY,KAAK;CACrC,MAAM,eAAgB,aAAa,QAAQ;CAC3C,MAAM,WAAA,GAAUG,cAAAA,UAAAA,CAAU,YAAY;CAiBtC,OAAO,CAAC,cAfS,gBACd,OAAuB;EACtB,MAAM,QACJ,WAAW,mBAAmB,GAAG,MAAM,IAClC,GAAG,OAAO,UACV,GAAG,OAAO;EAEjB,IAAI,CAAC,eAAA,GAAcH,cAAAA,YAAAA,CAAY,KAAK,MAAA,GAAKE,cAAAA,OAAAA,CAAO,KAAK,GACnD,gBAAgB,KAAK;EAEvB,SAAS,EAAE;CACb,GACA;EAAC;EAAY;EAAc;CAAQ,CAGR,CAAC;AAChC"}

package/dist/esm/hooks/use-counter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/hooks/use-counter/index.ts"],"sourcesContent":["\"use client\"\n\nimport { useCallback, useState } from \"react\"\nimport {\n  clampNumber,\n  countDecimal,\n  toPrecision,\n  useCallbackRef,\n} from \"../../utils\"\n\nconst parse = (value: number | string): number =>\n  parseFloat(value.toString().replace(/[^\\w.-]+/g, \"\"))\n\nconst getCountDecimal = (value: number, step: number): number =>\n  Math.max(countDecimal(step), countDecimal(value))\n\nconst casting = (\n  value: number | string,\n  step: number,\n  precision?: number,\n): string | undefined => {\n  value = parse(value)\n\n  return !Number.isNaN(value)\n    ? toPrecision(value, precision ?? getCountDecimal(value, step))\n    : undefined\n}\n\nexport interface UseCounterProps {\n  /**\n   * The initial value of the counter.\n   * Should be less than `max` and greater than `min`.\n   */\n  defaultValue?: number | string\n  /**\n   * This controls the value update behavior in general.\n   *\n   * - If `true` and you use the stepper or up/down arrow keys,\n   * the value will not exceed the `max` or go lower than `min`.\n   *\n   * - If `false`, the value will be allowed to go out of range.\n   *\n   * @default true\n   */\n  keepWithinRange?: boolean\n  /**\n   * The maximum value of the counter\n   *\n   * @default Number.MAX_SAFE_INTEGER\n   */\n  max?: number\n  /**\n   * The minimum value of the counter\n   *\n   * @default Number.MIN_SAFE_INTEGER\n   */\n  min?: number\n  /**\n   * The number of decimal points used to round the value.\n   */\n  precision?: number\n  /**\n   * The step used to increment or decrement the value.\n   *\n   * @default 1\n   */\n  step?: number\n  /**\n   * The value of the counter.\n   * Should be less than `max` and greater than `min`.\n   */\n  value?: number | string\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (valueAsString: string, valueAsNumber: number) => void\n}\n\n/**\n * `useCounter` is a custom hook that returns the current counter value.\n *\n * @see https://yamada-ui.com/docs/hooks/use-counter\n */\nexport const useCounter = ({\n  keepWithinRange = true,\n  max: maxValue = Number.MAX_SAFE_INTEGER,\n  min: minValue = Number.MIN_SAFE_INTEGER,\n  step: stepProp = 1,\n  ...props\n}: UseCounterProps = {}) => {\n  const onChange = useCallbackRef(props.onChange)\n\n  const [defaultValue, setValue] = useState<number | string>(() => {\n    if (props.defaultValue == null) return \"\"\n\n    return casting(props.defaultValue, stepProp, props.precision) ?? \"\"\n  })\n\n  const isControlled = typeof props.value !== \"undefined\"\n  const value = isControlled ? (props.value as number | string) : defaultValue\n\n  const countDecimal = getCountDecimal(parse(value), stepProp)\n\n  const precision = props.precision ?? countDecimal\n\n  const update = useCallback(\n    (next: number | string) => {\n      if (next === value) return\n\n      if (!isControlled) setValue(next.toString())\n\n      onChange(next.toString(), parse(next))\n    },\n    [onChange, isControlled, value],\n  )\n\n  const clamp = useCallback(\n    (value: number) => {\n      let nextValue = value\n\n      if (keepWithinRange)\n        nextValue = clampNumber(nextValue, minValue, maxValue)\n\n      return toPrecision(nextValue, precision)\n    },\n    [precision, keepWithinRange, maxValue, minValue],\n  )\n\n  const increment = useCallback(\n    (step = stepProp) => {\n      let next: number | string\n\n      if (value === \"\") next = parse(step)\n      else next = parse(value) + step\n\n      next = clamp(next)\n\n      update(next)\n    },\n    [clamp, stepProp, update, value],\n  )\n\n  const decrement = useCallback(\n    (step = stepProp) => {\n      let next: number | string\n\n      if (value === \"\") next = parse(-step)\n      else next = parse(value) - step\n\n      next = clamp(next)\n\n      update(next)\n    },\n    [clamp, stepProp, update, value],\n  )\n\n  const reset = useCallback(() => {\n    let next: number | string\n\n    if (props.defaultValue == null) next = \"\"\n    else\n      next = casting(props.defaultValue, stepProp, props.precision) ?? minValue\n\n    update(next)\n  }, [props.defaultValue, props.precision, stepProp, update, minValue])\n\n  const cast = useCallback(\n    (value: number | string) => {\n      const nextValue = casting(value, stepProp, precision) ?? minValue\n\n      update(nextValue)\n    },\n    [precision, stepProp, update, minValue],\n  )\n\n  const valueAsNumber = parse(value)\n\n  const out = valueAsNumber < minValue || maxValue < valueAsNumber\n  const max = valueAsNumber === maxValue\n  const min = valueAsNumber === minValue\n\n  return {\n    cast,\n    clamp,\n    decrement,\n    increment,\n    max,\n    min,\n    out,\n    precision,\n    reset,\n    setValue,\n    step: stepProp,\n    update,\n    value,\n    valueAsNumber,\n  }\n}\n\nexport type UseCounterReturn = ReturnType<typeof useCounter>\n"],"mappings":";;;;;AAUA,MAAM,SAAS,UACb,WAAW,MAAM,SAAS,CAAC,CAAC,QAAQ,aAAa,EAAE,CAAC;AAEtD,MAAM,mBAAmB,OAAe,SACtC,KAAK,KAAA,GAAA,cAAA,aAAA,CAAiB,IAAI,IAAA,GAAA,cAAA,aAAA,CAAgB,KAAK,CAAC;AAElD,MAAM,WACJ,OACA,MACA,cACuB;CACvB,QAAQ,MAAM,KAAK;CAEnB,OAAO,CAAC,OAAO,MAAM,KAAK,KAAA,GAAA,cAAA,YAAA,CACV,OAAO,aAAa,gBAAgB,OAAO,IAAI,CAAC,IAC5D,KAAA;AACN;;;;;;AAyDA,MAAa,cAAc,EACzB,kBAAkB,MAClB,KAAK,WAAW,OAAO,kBACvB,KAAK,WAAW,OAAO,kBACvB,MAAM,WAAW,GACjB,GAAG,UACgB,CAAC,MAAM;CAC1B,MAAM,WAAW,eAAe,MAAM,QAAQ;CAE9C,MAAM,CAAC,cAAc,YAAY,eAAgC;EAC/D,IAAI,MAAM,gBAAgB,MAAM,OAAO;EAEvC,OAAO,QAAQ,MAAM,cAAc,UAAU,MAAM,SAAS,KAAK;CACnE,CAAC;CAED,MAAM,eAAe,OAAO,MAAM,UAAU;CAC5C,MAAM,QAAQ,eAAgB,MAAM,QAA4B;CAEhE,MAAM,eAAe,gBAAgB,MAAM,KAAK,GAAG,QAAQ;CAE3D,MAAM,YAAY,MAAM,aAAa;CAErC,MAAM,SAAS,aACZ,SAA0B;EACzB,IAAI,SAAS,OAAO;EAEpB,IAAI,CAAC,cAAc,SAAS,KAAK,SAAS,CAAC;EAE3C,SAAS,KAAK,SAAS,GAAG,MAAM,IAAI,CAAC;CACvC,GACA;EAAC;EAAU;EAAc;CAAK,CAChC;CAEA,MAAM,QAAQ,aACX,UAAkB;EACjB,IAAI,YAAY;EAEhB,IAAI,iBACF,aAAA,GAAA,cAAA,YAAA,CAAwB,WAAW,UAAU,QAAQ;EAEvD,QAAA,GAAA,cAAA,YAAA,CAAmB,WAAW,SAAS;CACzC,GACA;EAAC;EAAW;EAAiB;EAAU;CAAQ,CACjD;CAEA,MAAM,YAAY,aACf,OAAO,aAAa;EACnB,IAAI;EAEJ,IAAI,UAAU,IAAI,OAAO,MAAM,IAAI;OAC9B,OAAO,MAAM,KAAK,IAAI;EAE3B,OAAO,MAAM,IAAI;EAEjB,OAAO,IAAI;CACb,GACA;EAAC;EAAO;EAAU;EAAQ;CAAK,CACjC;CAEA,MAAM,YAAY,aACf,OAAO,aAAa;EACnB,IAAI;EAEJ,IAAI,UAAU,IAAI,OAAO,MAAM,CAAC,IAAI;OAC/B,OAAO,MAAM,KAAK,IAAI;EAE3B,OAAO,MAAM,IAAI;EAEjB,OAAO,IAAI;CACb,GACA;EAAC;EAAO;EAAU;EAAQ;CAAK,CACjC;CAEA,MAAM,QAAQ,kBAAkB;EAC9B,IAAI;EAEJ,IAAI,MAAM,gBAAgB,MAAM,OAAO;OAErC,OAAO,QAAQ,MAAM,cAAc,UAAU,MAAM,SAAS,KAAK;EAEnE,OAAO,IAAI;CACb,GAAG;EAAC,MAAM;EAAc,MAAM;EAAW;EAAU;EAAQ;CAAQ,CAAC;CAEpE,MAAM,OAAO,aACV,UAA2B;EAC1B,MAAM,YAAY,QAAQ,OAAO,UAAU,SAAS,KAAK;EAEzD,OAAO,SAAS;CAClB,GACA;EAAC;EAAW;EAAU;EAAQ;CAAQ,CACxC;CAEA,MAAM,gBAAgB,MAAM,KAAK;CAMjC,OAAO;EACL;EACA;EACA;EACA;EACA,KARU,kBAAkB;EAS5B,KARU,kBAAkB;EAS5B,KAXU,gBAAgB,YAAY,WAAW;EAYjD;EACA;EACA;EACA,MAAM;EACN;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"index.js","names":["countDecimal","toPrecision","clampNumber"],"sources":["../../../../src/hooks/use-counter/index.ts"],"sourcesContent":["\"use client\"\n\nimport { useCallback, useState } from \"react\"\nimport {\n  clampNumber,\n  countDecimal,\n  toPrecision,\n  useCallbackRef,\n} from \"../../utils\"\n\nconst parse = (value: number | string): number =>\n  parseFloat(value.toString().replace(/[^\\w.-]+/g, \"\"))\n\nconst getCountDecimal = (value: number, step: number): number =>\n  Math.max(countDecimal(step), countDecimal(value))\n\nconst casting = (\n  value: number | string,\n  step: number,\n  precision?: number,\n): string | undefined => {\n  value = parse(value)\n\n  return !Number.isNaN(value)\n    ? toPrecision(value, precision ?? getCountDecimal(value, step))\n    : undefined\n}\n\nexport interface UseCounterProps {\n  /**\n   * The initial value of the counter.\n   * Should be less than `max` and greater than `min`.\n   */\n  defaultValue?: number | string\n  /**\n   * This controls the value update behavior in general.\n   *\n   * - If `true` and you use the stepper or up/down arrow keys,\n   * the value will not exceed the `max` or go lower than `min`.\n   *\n   * - If `false`, the value will be allowed to go out of range.\n   *\n   * @default true\n   */\n  keepWithinRange?: boolean\n  /**\n   * The maximum value of the counter\n   *\n   * @default Number.MAX_SAFE_INTEGER\n   */\n  max?: number\n  /**\n   * The minimum value of the counter\n   *\n   * @default Number.MIN_SAFE_INTEGER\n   */\n  min?: number\n  /**\n   * The number of decimal points used to round the value.\n   */\n  precision?: number\n  /**\n   * The step used to increment or decrement the value.\n   *\n   * @default 1\n   */\n  step?: number\n  /**\n   * The value of the counter.\n   * Should be less than `max` and greater than `min`.\n   */\n  value?: number | string\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (valueAsString: string, valueAsNumber: number) => void\n}\n\n/**\n * `useCounter` is a custom hook that returns the current counter value.\n *\n * @see https://yamada-ui.com/docs/hooks/use-counter\n */\nexport const useCounter = ({\n  keepWithinRange = true,\n  max: maxValue = Number.MAX_SAFE_INTEGER,\n  min: minValue = Number.MIN_SAFE_INTEGER,\n  step: stepProp = 1,\n  ...props\n}: UseCounterProps = {}) => {\n  const onChange = useCallbackRef(props.onChange)\n\n  const [defaultValue, setValue] = useState<number | string>(() => {\n    if (props.defaultValue == null) return \"\"\n\n    return casting(props.defaultValue, stepProp, props.precision) ?? \"\"\n  })\n\n  const isControlled = typeof props.value !== \"undefined\"\n  const value = isControlled ? (props.value as number | string) : defaultValue\n\n  const countDecimal = getCountDecimal(parse(value), stepProp)\n\n  const precision = props.precision ?? countDecimal\n\n  const update = useCallback(\n    (next: number | string) => {\n      if (next === value) return\n\n      if (!isControlled) setValue(next.toString())\n\n      onChange(next.toString(), parse(next))\n    },\n    [onChange, isControlled, value],\n  )\n\n  const clamp = useCallback(\n    (value: number) => {\n      let nextValue = value\n\n      if (keepWithinRange)\n        nextValue = clampNumber(nextValue, minValue, maxValue)\n\n      return toPrecision(nextValue, precision)\n    },\n    [precision, keepWithinRange, maxValue, minValue],\n  )\n\n  const increment = useCallback(\n    (step = stepProp) => {\n      let next: number | string\n\n      if (value === \"\") next = parse(step)\n      else next = parse(value) + step\n\n      next = clamp(next)\n\n      update(next)\n    },\n    [clamp, stepProp, update, value],\n  )\n\n  const decrement = useCallback(\n    (step = stepProp) => {\n      let next: number | string\n\n      if (value === \"\") next = parse(-step)\n      else next = parse(value) - step\n\n      next = clamp(next)\n\n      update(next)\n    },\n    [clamp, stepProp, update, value],\n  )\n\n  const reset = useCallback(() => {\n    let next: number | string\n\n    if (props.defaultValue == null) next = \"\"\n    else\n      next = casting(props.defaultValue, stepProp, props.precision) ?? minValue\n\n    update(next)\n  }, [props.defaultValue, props.precision, stepProp, update, minValue])\n\n  const cast = useCallback(\n    (value: number | string) => {\n      const nextValue = casting(value, stepProp, precision) ?? minValue\n\n      update(nextValue)\n    },\n    [precision, stepProp, update, minValue],\n  )\n\n  const valueAsNumber = parse(value)\n\n  const out = valueAsNumber < minValue || maxValue < valueAsNumber\n  const max = valueAsNumber === maxValue\n  const min = valueAsNumber === minValue\n\n  return {\n    cast,\n    clamp,\n    decrement,\n    increment,\n    max,\n    min,\n    out,\n    precision,\n    reset,\n    setValue,\n    step: stepProp,\n    update,\n    value,\n    valueAsNumber,\n  }\n}\n\nexport type UseCounterReturn = ReturnType<typeof useCounter>\n"],"mappings":";;;;;AAUA,MAAM,SAAS,UACb,WAAW,MAAM,SAAS,CAAC,CAAC,QAAQ,aAAa,EAAE,CAAC;AAEtD,MAAM,mBAAmB,OAAe,SACtC,KAAK,KAAA,GAAIA,cAAAA,aAAAA,CAAa,IAAI,IAAA,GAAGA,cAAAA,aAAAA,CAAa,KAAK,CAAC;AAElD,MAAM,WACJ,OACA,MACA,cACuB;CACvB,QAAQ,MAAM,KAAK;CAEnB,OAAO,CAAC,OAAO,MAAM,KAAK,KAAA,GACtBC,cAAAA,YAAAA,CAAY,OAAO,aAAa,gBAAgB,OAAO,IAAI,CAAC,IAC5D,KAAA;AACN;;;;;;AAyDA,MAAa,cAAc,EACzB,kBAAkB,MAClB,KAAK,WAAW,OAAO,kBACvB,KAAK,WAAW,OAAO,kBACvB,MAAM,WAAW,GACjB,GAAG,UACgB,CAAC,MAAM;CAC1B,MAAM,WAAW,eAAe,MAAM,QAAQ;CAE9C,MAAM,CAAC,cAAc,YAAY,eAAgC;EAC/D,IAAI,MAAM,gBAAgB,MAAM,OAAO;EAEvC,OAAO,QAAQ,MAAM,cAAc,UAAU,MAAM,SAAS,KAAK;CACnE,CAAC;CAED,MAAM,eAAe,OAAO,MAAM,UAAU;CAC5C,MAAM,QAAQ,eAAgB,MAAM,QAA4B;CAEhE,MAAM,eAAe,gBAAgB,MAAM,KAAK,GAAG,QAAQ;CAE3D,MAAM,YAAY,MAAM,aAAa;CAErC,MAAM,SAAS,aACZ,SAA0B;EACzB,IAAI,SAAS,OAAO;EAEpB,IAAI,CAAC,cAAc,SAAS,KAAK,SAAS,CAAC;EAE3C,SAAS,KAAK,SAAS,GAAG,MAAM,IAAI,CAAC;CACvC,GACA;EAAC;EAAU;EAAc;CAAK,CAChC;CAEA,MAAM,QAAQ,aACX,UAAkB;EACjB,IAAI,YAAY;EAEhB,IAAI,iBACF,aAAA,GAAYC,cAAAA,YAAAA,CAAY,WAAW,UAAU,QAAQ;EAEvD,QAAA,GAAOD,cAAAA,YAAAA,CAAY,WAAW,SAAS;CACzC,GACA;EAAC;EAAW;EAAiB;EAAU;CAAQ,CACjD;CAEA,MAAM,YAAY,aACf,OAAO,aAAa;EACnB,IAAI;EAEJ,IAAI,UAAU,IAAI,OAAO,MAAM,IAAI;OAC9B,OAAO,MAAM,KAAK,IAAI;EAE3B,OAAO,MAAM,IAAI;EAEjB,OAAO,IAAI;CACb,GACA;EAAC;EAAO;EAAU;EAAQ;CAAK,CACjC;CAEA,MAAM,YAAY,aACf,OAAO,aAAa;EACnB,IAAI;EAEJ,IAAI,UAAU,IAAI,OAAO,MAAM,CAAC,IAAI;OAC/B,OAAO,MAAM,KAAK,IAAI;EAE3B,OAAO,MAAM,IAAI;EAEjB,OAAO,IAAI;CACb,GACA;EAAC;EAAO;EAAU;EAAQ;CAAK,CACjC;CAEA,MAAM,QAAQ,kBAAkB;EAC9B,IAAI;EAEJ,IAAI,MAAM,gBAAgB,MAAM,OAAO;OAErC,OAAO,QAAQ,MAAM,cAAc,UAAU,MAAM,SAAS,KAAK;EAEnE,OAAO,IAAI;CACb,GAAG;EAAC,MAAM;EAAc,MAAM;EAAW;EAAU;EAAQ;CAAQ,CAAC;CAEpE,MAAM,OAAO,aACV,UAA2B;EAC1B,MAAM,YAAY,QAAQ,OAAO,UAAU,SAAS,KAAK;EAEzD,OAAO,SAAS;CAClB,GACA;EAAC;EAAW;EAAU;EAAQ;CAAQ,CACxC;CAEA,MAAM,gBAAgB,MAAM,KAAK;CAMjC,OAAO;EACL;EACA;EACA;EACA;EACA,KARU,kBAAkB;EAS5B,KARU,kBAAkB;EAS5B,KAXU,gBAAgB,YAAY,WAAW;EAYjD;EACA;EACA;EACA,MAAM;EACN;EACA;EACA;CACF;AACF"}