@lobehub/ui 6.0.0-beta.4 → 6.0.0-beta.6

package/es/ColorSwatches/style.mjs

@@ -11,6 +11,33 @@ const styles = {
 		kGVxlE: "lb1tp5pxa lb9jile0",
 		$$css: true
 	},
+	add: {
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lbfungia",
+		k1xSpc: "lb3nfvp2",
+		kjj79g: "lbl56j7k",
+		$$css: true
+	},
+	chip: {
+		kgQiWS: "lb1ku5rj1",
+		k1xSpc: "lbrvj5dj",
+		$$css: true
+	},
+	chipCheck: {
+		kSiTet: "lb1hc1fzr lb1fz9fy1 lb1ilng6x",
+		$$css: true
+	},
+	chipEdit: {
+		kSiTet: "lbg01cxk lb1de8irz lbjygscn",
+		$$css: true
+	},
+	chipIcon: {
+		kBCFzs: "lbgkxs2y",
+		kbNqZ1: "lb1ms6mhf",
+		kmkexE: "lb13zw1ji",
+		kfzvcC: "lb47corl",
+		$$css: true
+	},
 	conic: {
 		kWkggS: "lbjbqb8w",
 		kKwaWg: "lb9i5qys",
@@ -27,6 +54,15 @@ const styles = {
 		kzqmXN: "lb4fkmq8",
 		$$css: true
 	},
+	divider: {
+		kUk6DE: "lb1okw0bk",
+		kUOVxO: "lb1dhlr3c",
+		kSGwAc: "lbamitd3",
+		kWkggS: "lbjjy28o",
+		kZKoxP: "lb8akbf1",
+		kzqmXN: "lb1i1rx1s",
+		$$css: true
+	},
 	picker: {
 		kmVPX3: "lb1717udv",
 		kVAM5u: "lb181nr7w",

package/es/ColorSwatches/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ColorSwatches/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst size = 'var(--color-swatches-size, 24px)';\nconst containerHover = `inset 0 0 0 1px rgb(0 0 0 / 5%), 0 0 0 2px ${cssVar.colorText}`;\nconst pickerHover = `inset 0 0 0 1px ${cssVar.colorFillSecondary}, 0 0 0 2px ${cssVar.colorText}`;\n\nexport const styles = stylex.create({\n  activeContainer: {\n    boxShadow: { 'default': `inset 0 0 0 1px ${cssVar.colorFill}`, ':hover': containerHover },\n  },\n  activePicker: {\n    boxShadow: { 'default': `inset 0 0 0 1px ${cssVar.colorFill}`, ':hover': pickerHover },\n  },\n  conic: {\n    backgroundColor: 'transparent',\n    backgroundImage: `conic-gradient(${cssVar.red}, ${cssVar.volcano}, ${cssVar.orange}, ${cssVar.gold}, ${cssVar.yellow}, ${cssVar.lime}, ${cssVar.green}, ${cssVar.cyan}, ${cssVar.blue}, ${cssVar.geekblue}, ${cssVar.purple}, ${cssVar.magenta}, ${cssVar.red})`,\n  },\n  container: {\n    flex: 'none',\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: {\n      'default': `inset 0 0 0 1px ${cssVar.colorFillSecondary}`,\n      ':hover': containerHover,\n    },\n    cursor: 'pointer',\n    height: size,\n    minHeight: size,\n    minWidth: size,\n    width: size,\n  },\n  picker: {\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    flex: 'none',\n    overflow: 'hidden',\n    boxShadow: { 'default': `inset 0 0 0 1px ${cssVar.colorFillSecondary}`, ':hover': pickerHover },\n    cursor: 'pointer',\n    height: size,\n    minHeight: size,\n    minWidth: size,\n    width: size,\n  },\n  transparent: {\n    backgroundImage: `conic-gradient(${cssVar.colorFillSecondary} 25%, transparent 25% 50%, ${cssVar.colorFillSecondary} 50% 75%, transparent 75% 100%)`,\n    backgroundSize: '50% 50%',\n  },\n});\n"],"mappings":";;AAIuB,GAA8C,OAAO;AACxD,GAAmB,OAAO,qBAAiC,OAAO;AACtF,MAAa,SAAS;CACpB,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ColorSwatches/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { chipMarker } from './marker.stylex';\n\nconst size = 'var(--color-swatches-size, 24px)';\nconst containerHover = `inset 0 0 0 1px rgb(0 0 0 / 5%), 0 0 0 2px ${cssVar.colorText}`;\nconst pickerHover = `inset 0 0 0 1px ${cssVar.colorFillSecondary}, 0 0 0 2px ${cssVar.colorText}`;\n\nexport const styles = stylex.create({\n  activeContainer: {\n    boxShadow: { 'default': `inset 0 0 0 1px ${cssVar.colorFill}`, ':hover': containerHover },\n  },\n  activePicker: {\n    boxShadow: { 'default': `inset 0 0 0 1px ${cssVar.colorFill}`, ':hover': pickerHover },\n  },\n  add: {\n    alignItems: 'center',\n    color: '#fff',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  chip: {\n    placeItems: 'center',\n    display: 'grid',\n  },\n  chipCheck: {\n    opacity: {\n      default: 1,\n      [stylex.when.ancestor(':focus-visible', chipMarker)]: 0,\n      [stylex.when.ancestor(':hover', chipMarker)]: 0,\n    },\n  },\n  chipEdit: {\n    opacity: {\n      default: 0,\n      [stylex.when.ancestor(':focus-visible', chipMarker)]: 1,\n      [stylex.when.ancestor(':hover', chipMarker)]: 1,\n    },\n  },\n  chipIcon: {\n    gridColumn: 1,\n    gridRow: 1,\n    transition: `opacity 0.15s ${cssVar.motionEaseInOut}`,\n    pointerEvents: 'none',\n  },\n  conic: {\n    backgroundColor: 'transparent',\n    backgroundImage: `conic-gradient(${cssVar.red}, ${cssVar.volcano}, ${cssVar.orange}, ${cssVar.gold}, ${cssVar.yellow}, ${cssVar.lime}, ${cssVar.green}, ${cssVar.cyan}, ${cssVar.blue}, ${cssVar.geekblue}, ${cssVar.purple}, ${cssVar.magenta}, ${cssVar.red})`,\n  },\n  container: {\n    flex: 'none',\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: {\n      'default': `inset 0 0 0 1px ${cssVar.colorFillSecondary}`,\n      ':hover': containerHover,\n    },\n    cursor: 'pointer',\n    height: size,\n    minHeight: size,\n    minWidth: size,\n    width: size,\n  },\n  divider: {\n    flex: 'none',\n    marginInline: 2,\n    alignSelf: 'center',\n    backgroundColor: cssVar.colorFillSecondary,\n    height: `calc(${size} * 0.75)`,\n    width: 1,\n  },\n  picker: {\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    flex: 'none',\n    overflow: 'hidden',\n    boxShadow: { 'default': `inset 0 0 0 1px ${cssVar.colorFillSecondary}`, ':hover': pickerHover },\n    cursor: 'pointer',\n    height: size,\n    minHeight: size,\n    minWidth: size,\n    width: size,\n  },\n  transparent: {\n    backgroundImage: `conic-gradient(${cssVar.colorFillSecondary} 25%, transparent 25% 50%, ${cssVar.colorFillSecondary} 50% 75%, transparent 75% 100%)`,\n    backgroundSize: '50% 50%',\n  },\n});\n"],"mappings":";;AAMuB,GAA8C,OAAO;AACxD,GAAmB,OAAO,qBAAiC,OAAO;AACtF,MAAa,SAAS;CACpB,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/ColorSwatches/type.d.mts

@@ -7,6 +7,14 @@ interface ColorSwatchesItemType {
   key?: Key;
   title?: ReactNode;
 }
+export interface ColorSwatchesPickerRenderProps {
+  active: boolean;
+  onChange: (color?: string) => void;
+  presets: string[];
+  shape: 'circle' | 'square';
+  size: number;
+  value?: string;
+}
 export interface ColorSwatchesProps extends Omit<FlexboxProps, 'onChange'> {
   colors: ColorSwatchesItemType[];
   defaultValue?: string;
@@ -14,6 +22,7 @@ export interface ColorSwatchesProps extends Omit<FlexboxProps, 'onChange'> {
   enableColorSwatches?: boolean;
   onChange?: (color?: string) => void;
   ref?: Ref<HTMLDivElement>;
+  renderPicker?: (props: ColorSwatchesPickerRenderProps, defaultPicker: ReactNode) => ReactNode;
   shape?: 'circle' | 'square';
   size?: number;
   texts?: {

package/es/ConfigProvider/cdnAssets.mjs

@@ -0,0 +1,6 @@
+//#region src/ConfigProvider/cdnAssets.ts
+const KATEX_CSS_VERSION = "0.19.0";
+//#endregion
+export { KATEX_CSS_VERSION };
+
+//# sourceMappingURL=cdnAssets.mjs.map

package/es/ConfigProvider/cdnAssets.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdnAssets.mjs","names":[],"sources":["../../src/ConfigProvider/cdnAssets.ts"],"sourcesContent":["export const KATEX_CSS_VERSION = '0.19.0';\n"],"mappings":";AAAA,MAAa,oBAAoB"}

package/es/ConfigProvider/index.mjs

@@ -4,6 +4,7 @@ import { installGlobalFocusRing } from "../GlobalFocusRing/index.mjs";
 import { MotionComponent } from "../MotionProvider/index.mjs";
 import { genCdnUrl } from "../utils/genCdnUrl.mjs";
 import AppElementContext, { useAppElement } from "./AppElementContext.mjs";
+import "./cdnAssets.mjs";
 import { createContext, memo, use, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ConfigProvider/index.tsx
@@ -112,7 +113,7 @@ const WebFonts = ({ customFonts }) => {
 		genCdnUrl({
 			path: "dist/katex.min.css",
 			pkg: "katex",
-			version: "0.18.1"
+			version: "0.19.0"
 		})
 	], [customFonts, genCdnUrl]).map((url) => /* @__PURE__ */ jsx(FontLoader, { url }, url));
 };

package/es/ConfigProvider/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/ConfigProvider/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type CSSProperties,\n  type ElementType,\n  memo,\n  type ReactNode,\n  use,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport FontLoader from '@/FontLoader';\nimport { installGlobalFocusRing } from '@/GlobalFocusRing';\nimport {\n  type I18nContextValue,\n  type TranslationKey,\n  type TranslationResourcesInput,\n  type TranslationResourcesMap,\n} from '@/i18n/types';\nimport { MotionComponent, type MotionComponentType } from '@/MotionProvider';\nimport { type CDN, type CdnApi, genCdnUrl } from '@/utils/genCdnUrl';\n\nimport AppElementContext from './AppElementContext';\n\nexport const LOBE_THEME_APP_ID = 'lobe-ui-theme-app';\n\nexport type Direction = 'ltr' | 'rtl';\n\nexport interface Config {\n  aAs?: ElementType;\n  customCdnFn?: CdnFn;\n  globalFocusRing?: boolean;\n  imgAs?: ElementType;\n  imgUnoptimized?: boolean;\n  proxy?: CDN | 'custom';\n}\n\nexport const ConfigContext = createContext<Config | null>(null);\n\nconst DirectionContext = createContext<Direction>('ltr');\n\n// Internal i18n context\nconst I18nContextInternal = createContext<I18nContextValue>({\n  locale: 'en',\n  t: (key: TranslationKey) => key,\n});\n\nexport interface ConfigProviderProps {\n  children: ReactNode;\n  config?: Config;\n  customFonts?: string[];\n  direction?: Direction;\n  enableCustomFonts?: boolean;\n  // i18n props - flattened at top level\n  locale?: string;\n  motion: MotionComponentType;\n  resources?: TranslationResourcesInput;\n}\n\nconst isThenable = (value: unknown): value is Promise<TranslationResourcesMap> =>\n  typeof (value as { then?: unknown })?.then === 'function';\n\nconst ConfigProvider = memo<ConfigProviderProps>(\n  ({\n    children,\n    config,\n    customFonts,\n    direction = 'ltr',\n    enableCustomFonts = true,\n    locale,\n    resources,\n    motion,\n  }) => {\n    const [portalHost, setPortalHost] = useState<HTMLDivElement | null>(null);\n\n    useEffect(() => {\n      if (config?.globalFocusRing === false) return;\n      return installGlobalFocusRing();\n    }, [config?.globalFocusRing]);\n\n    const fallbackLocale = locale ?? 'en';\n    const [resolvedResources, setResolvedResources] = useState<TranslationResourcesMap | undefined>(\n      () => (resources && !isThenable(resources) ? resources : undefined),\n    );\n    const [resolvedLocale, setResolvedLocale] = useState(fallbackLocale);\n    const latestRequestId = useRef(0);\n\n    useEffect(() => {\n      const requestId = ++latestRequestId.current;\n\n      if (!resources) {\n        setResolvedResources(undefined);\n        setResolvedLocale(fallbackLocale);\n        return;\n      }\n\n      if (isThenable(resources)) {\n        const targetLocale = fallbackLocale;\n        resources\n          .then((nextResources) => {\n            if (latestRequestId.current !== requestId) return;\n            setResolvedResources(nextResources);\n            setResolvedLocale(targetLocale);\n          })\n          .catch(() => {\n            if (latestRequestId.current !== requestId) return;\n          });\n        return;\n      }\n\n      setResolvedResources(resources);\n      setResolvedLocale(fallbackLocale);\n    }, [fallbackLocale, resources]);\n\n    const currentResources = isThenable(resources) ? resolvedResources : resources;\n    const currentLocale = isThenable(resources) ? resolvedLocale : fallbackLocale;\n\n    const i18nValue = useMemo((): I18nContextValue => {\n      const resourceList = Array.isArray(currentResources)\n        ? currentResources\n        : currentResources\n          ? Object.values(currentResources)\n          : [];\n      const mergedResources = Object.assign({}, ...resourceList);\n      const t = (key: TranslationKey): string => mergedResources[key] || key;\n      return { locale: currentLocale, t };\n    }, [currentLocale, currentResources]);\n\n    return (\n      <I18nContextInternal value={i18nValue}>\n        <ConfigContext value={config ?? null}>\n          <DirectionContext value={direction}>\n            <MotionComponent value={motion}>\n              <AppElementContext value={portalHost}>\n                {enableCustomFonts && <WebFonts customFonts={customFonts} />}\n                {children}\n                <div\n                  data-lobe-portal-host=\"\"\n                  id={LOBE_THEME_APP_ID}\n                  ref={setPortalHost}\n                  style={portalHostStyle}\n                />\n              </AppElementContext>\n            </MotionComponent>\n          </DirectionContext>\n        </ConfigContext>\n      </I18nContextInternal>\n    );\n  },\n);\n\n// `position: fixed` + `right: 0` gives base-ui Positioners a viewport-wide containing block and a\n// stacking context; no `pointer-events: none`, which popup descendants would inherit\nconst portalHostStyle: CSSProperties = {\n  height: 0,\n  left: 0,\n  position: 'fixed',\n  right: 0,\n  top: 0,\n  zIndex: 1100,\n};\n\nconst WebFonts = ({ customFonts }: { customFonts?: string[] }) => {\n  const genCdnUrl = useCdnFn();\n  const urls = useMemo(\n    () =>\n      customFonts || [\n        genCdnUrl({ path: 'css/index.css', pkg: '@lobehub/webfont-mono', version: '1.0.0' }),\n        genCdnUrl({\n          path: 'css/index-full.css',\n          pkg: '@lobehub/webfont-harmony-sans',\n          version: '1.0.0',\n        }),\n        genCdnUrl({\n          path: 'css/index.css',\n          pkg: '@lobehub/webfont-harmony-sans-sc',\n          version: '1.0.0',\n        }),\n        genCdnUrl({ path: 'dist/katex.min.css', pkg: 'katex', version: '0.18.1' }),\n      ],\n    [customFonts, genCdnUrl],\n  );\n\n  return urls.map((url) => <FontLoader key={url} url={url} />);\n};\n\nexport const useDirection = () => use(DirectionContext);\n\nexport { useAppElement } from './AppElementContext';\n\n// useCdnFn\nexport type CdnFn = ({ pkg, version, path }: CdnApi) => string;\n\nconst cdnFallback: CdnFn = ({ pkg, version, path }) =>\n  genCdnUrl({ path, pkg, proxy: 'aliyun', version });\n\nexport const useCdnFn = (): CdnFn => {\n  const config = use(ConfigContext);\n  if (!config) return cdnFallback;\n  if (config?.proxy !== 'custom')\n    return ({ pkg, version, path }) =>\n      genCdnUrl({ path, pkg, proxy: config.proxy as any, version });\n  return config?.customCdnFn || cdnFallback;\n};\n\n// useI18n hook\nexport const useI18n = () => use(I18nContextInternal);\n\n// Export I18nContext for external reference\nexport { I18nContextInternal as I18nContext };\n\nexport default ConfigProvider;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/ConfigProvider/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type CSSProperties,\n  type ElementType,\n  memo,\n  type ReactNode,\n  use,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport FontLoader from '@/FontLoader';\nimport { installGlobalFocusRing } from '@/GlobalFocusRing';\nimport {\n  type I18nContextValue,\n  type TranslationKey,\n  type TranslationResourcesInput,\n  type TranslationResourcesMap,\n} from '@/i18n/types';\nimport { MotionComponent, type MotionComponentType } from '@/MotionProvider';\nimport { type CDN, type CdnApi, genCdnUrl } from '@/utils/genCdnUrl';\n\nimport AppElementContext from './AppElementContext';\nimport { KATEX_CSS_VERSION } from './cdnAssets';\n\nexport const LOBE_THEME_APP_ID = 'lobe-ui-theme-app';\n\nexport type Direction = 'ltr' | 'rtl';\n\nexport interface Config {\n  aAs?: ElementType;\n  customCdnFn?: CdnFn;\n  globalFocusRing?: boolean;\n  imgAs?: ElementType;\n  imgUnoptimized?: boolean;\n  proxy?: CDN | 'custom';\n}\n\nexport const ConfigContext = createContext<Config | null>(null);\n\nconst DirectionContext = createContext<Direction>('ltr');\n\n// Internal i18n context\nconst I18nContextInternal = createContext<I18nContextValue>({\n  locale: 'en',\n  t: (key: TranslationKey) => key,\n});\n\nexport interface ConfigProviderProps {\n  children: ReactNode;\n  config?: Config;\n  customFonts?: string[];\n  direction?: Direction;\n  enableCustomFonts?: boolean;\n  // i18n props - flattened at top level\n  locale?: string;\n  motion: MotionComponentType;\n  resources?: TranslationResourcesInput;\n}\n\nconst isThenable = (value: unknown): value is Promise<TranslationResourcesMap> =>\n  typeof (value as { then?: unknown })?.then === 'function';\n\nconst ConfigProvider = memo<ConfigProviderProps>(\n  ({\n    children,\n    config,\n    customFonts,\n    direction = 'ltr',\n    enableCustomFonts = true,\n    locale,\n    resources,\n    motion,\n  }) => {\n    const [portalHost, setPortalHost] = useState<HTMLDivElement | null>(null);\n\n    useEffect(() => {\n      if (config?.globalFocusRing === false) return;\n      return installGlobalFocusRing();\n    }, [config?.globalFocusRing]);\n\n    const fallbackLocale = locale ?? 'en';\n    const [resolvedResources, setResolvedResources] = useState<TranslationResourcesMap | undefined>(\n      () => (resources && !isThenable(resources) ? resources : undefined),\n    );\n    const [resolvedLocale, setResolvedLocale] = useState(fallbackLocale);\n    const latestRequestId = useRef(0);\n\n    useEffect(() => {\n      const requestId = ++latestRequestId.current;\n\n      if (!resources) {\n        setResolvedResources(undefined);\n        setResolvedLocale(fallbackLocale);\n        return;\n      }\n\n      if (isThenable(resources)) {\n        const targetLocale = fallbackLocale;\n        resources\n          .then((nextResources) => {\n            if (latestRequestId.current !== requestId) return;\n            setResolvedResources(nextResources);\n            setResolvedLocale(targetLocale);\n          })\n          .catch(() => {\n            if (latestRequestId.current !== requestId) return;\n          });\n        return;\n      }\n\n      setResolvedResources(resources);\n      setResolvedLocale(fallbackLocale);\n    }, [fallbackLocale, resources]);\n\n    const currentResources = isThenable(resources) ? resolvedResources : resources;\n    const currentLocale = isThenable(resources) ? resolvedLocale : fallbackLocale;\n\n    const i18nValue = useMemo((): I18nContextValue => {\n      const resourceList = Array.isArray(currentResources)\n        ? currentResources\n        : currentResources\n          ? Object.values(currentResources)\n          : [];\n      const mergedResources = Object.assign({}, ...resourceList);\n      const t = (key: TranslationKey): string => mergedResources[key] || key;\n      return { locale: currentLocale, t };\n    }, [currentLocale, currentResources]);\n\n    return (\n      <I18nContextInternal value={i18nValue}>\n        <ConfigContext value={config ?? null}>\n          <DirectionContext value={direction}>\n            <MotionComponent value={motion}>\n              <AppElementContext value={portalHost}>\n                {enableCustomFonts && <WebFonts customFonts={customFonts} />}\n                {children}\n                <div\n                  data-lobe-portal-host=\"\"\n                  id={LOBE_THEME_APP_ID}\n                  ref={setPortalHost}\n                  style={portalHostStyle}\n                />\n              </AppElementContext>\n            </MotionComponent>\n          </DirectionContext>\n        </ConfigContext>\n      </I18nContextInternal>\n    );\n  },\n);\n\n// `position: fixed` + `right: 0` gives base-ui Positioners a viewport-wide containing block and a\n// stacking context; no `pointer-events: none`, which popup descendants would inherit\nconst portalHostStyle: CSSProperties = {\n  height: 0,\n  left: 0,\n  position: 'fixed',\n  right: 0,\n  top: 0,\n  zIndex: 1100,\n};\n\nconst WebFonts = ({ customFonts }: { customFonts?: string[] }) => {\n  const genCdnUrl = useCdnFn();\n  const urls = useMemo(\n    () =>\n      customFonts || [\n        genCdnUrl({ path: 'css/index.css', pkg: '@lobehub/webfont-mono', version: '1.0.0' }),\n        genCdnUrl({\n          path: 'css/index-full.css',\n          pkg: '@lobehub/webfont-harmony-sans',\n          version: '1.0.0',\n        }),\n        genCdnUrl({\n          path: 'css/index.css',\n          pkg: '@lobehub/webfont-harmony-sans-sc',\n          version: '1.0.0',\n        }),\n        genCdnUrl({ path: 'dist/katex.min.css', pkg: 'katex', version: KATEX_CSS_VERSION }),\n      ],\n    [customFonts, genCdnUrl],\n  );\n\n  return urls.map((url) => <FontLoader key={url} url={url} />);\n};\n\nexport const useDirection = () => use(DirectionContext);\n\nexport { useAppElement } from './AppElementContext';\n\n// useCdnFn\nexport type CdnFn = ({ pkg, version, path }: CdnApi) => string;\n\nconst cdnFallback: CdnFn = ({ pkg, version, path }) =>\n  genCdnUrl({ path, pkg, proxy: 'aliyun', version });\n\nexport const useCdnFn = (): CdnFn => {\n  const config = use(ConfigContext);\n  if (!config) return cdnFallback;\n  if (config?.proxy !== 'custom')\n    return ({ pkg, version, path }) =>\n      genCdnUrl({ path, pkg, proxy: config.proxy as any, version });\n  return config?.customCdnFn || cdnFallback;\n};\n\n// useI18n hook\nexport const useI18n = () => use(I18nContextInternal);\n\n// Export I18nContext for external reference\nexport { I18nContextInternal as I18nContext };\n\nexport default ConfigProvider;\n"],"mappings":"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"}

package/es/ContextMenu/store.d.mts

@@ -5,7 +5,6 @@ import "../internal/menu/index.mjs";
 import { ContextMenuItem } from "./type.mjs";
 import "./renderItems.mjs";
 import { ReactNode } from "react";
-import "@floating-ui/react";
 //#region src/ContextMenu/store.d.ts
 export interface ShowContextMenuOptions extends Pick<VirtualListProps, 'virtual' | 'listItemHeight'> {
   footer?: ReactNode;

package/es/ContextMenu/store.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"store.mjs","names":[],"sources":["../../src/ContextMenu/store.ts"],"sourcesContent":["import type { VirtualElement } from '@floating-ui/react';\nimport type { ReactNode } from 'react';\n\nimport type { IconAlign } from '@/internal/menu';\nimport type { VirtualListProps } from '@/internal/virtual';\n\nimport type { IconSpaceMode } from './renderItems';\nimport type { ContextMenuItem } from './type';\n\nexport type ContextMenuState = Pick<VirtualListProps, 'virtual' | 'listItemHeight'> & {\n  anchor: VirtualElement | null;\n  footer?: ReactNode;\n  header?: ReactNode;\n  iconAlign?: IconAlign;\n  iconSpaceMode: IconSpaceMode;\n  items: ContextMenuItem[];\n  open: boolean;\n  triggerId: string | null;\n};\n\nconst emptyState: ContextMenuState = {\n  anchor: null,\n  iconSpaceMode: 'global',\n  items: [],\n  open: false,\n  triggerId: null,\n};\n\nlet contextMenuState: ContextMenuState = emptyState;\nconst listeners = new Set<() => void>();\nconst lastPointer = { ready: false, triggerId: null as string | null, x: 0, y: 0 };\n\nconst notify = () => {\n  listeners.forEach((listener) => listener());\n};\n\nexport const subscribe = (listener: () => void) => {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n};\n\nexport const getSnapshot = () => contextMenuState;\nexport const getServerSnapshot = () => emptyState;\n\nexport const updateLastPointer = (event: MouseEvent | PointerEvent) => {\n  lastPointer.x = event.clientX;\n  lastPointer.y = event.clientY;\n  lastPointer.ready = true;\n  if (event.target instanceof Element) {\n    const trigger = event.target.closest<HTMLElement>('[data-contextmenu-trigger]');\n    lastPointer.triggerId = trigger?.dataset.contextmenuTrigger ?? null;\n  } else {\n    lastPointer.triggerId = null;\n  }\n};\n\nconst createVirtualElement = (point: { x: number; y: number }): VirtualElement => ({\n  contextElement: typeof document === 'undefined' ? undefined : document.body,\n  getBoundingClientRect: () =>\n    ({\n      bottom: point.y,\n      height: 0,\n      left: point.x,\n      right: point.x,\n      toJSON: () => undefined,\n      top: point.y,\n      width: 0,\n      x: point.x,\n      y: point.y,\n    }) as DOMRect,\n});\n\nexport const setContextMenuState = (next: Partial<ContextMenuState>) => {\n  contextMenuState = { ...contextMenuState, ...next };\n  notify();\n};\n\nexport interface ShowContextMenuOptions extends Pick<\n  VirtualListProps,\n  'virtual' | 'listItemHeight'\n> {\n  footer?: ReactNode;\n  header?: ReactNode;\n  iconAlign?: IconAlign;\n  iconSpaceMode?: IconSpaceMode;\n}\n\nexport interface ContextMenuInterceptor {\n  close?: (fallback: () => void) => void;\n  show?: (\n    items: ContextMenuItem[],\n    options: ShowContextMenuOptions | undefined,\n    fallback: () => void,\n  ) => void;\n}\n\nlet interceptor: ContextMenuInterceptor | null = null;\n\n/**\n * Register a global interceptor for every context menu — imperative\n * `showContextMenu`/`closeContextMenu` calls and `ContextMenuTrigger` alike.\n * The interceptor may render the menu through another system (e.g. a native\n * OS menu) or invoke `fallback()` to show the default web menu. Pass `null`\n * to restore the default behavior.\n */\nexport const setContextMenuInterceptor = (next: ContextMenuInterceptor | null) => {\n  interceptor = next;\n};\n\nconst showWebContextMenu = (items: ContextMenuItem[], options?: ShowContextMenuOptions) => {\n  const fallbackPoint = { x: window.innerWidth / 2, y: window.innerHeight / 2 };\n  const point = lastPointer.ready ? { x: lastPointer.x, y: lastPointer.y } : fallbackPoint;\n\n  setContextMenuState({\n    anchor: createVirtualElement(point),\n    footer: options?.footer,\n    header: options?.header,\n    iconAlign: options?.iconAlign,\n    iconSpaceMode: options?.iconSpaceMode ?? 'global',\n    items,\n    listItemHeight: options?.listItemHeight,\n    open: true,\n    triggerId: lastPointer.triggerId ?? null,\n    virtual: options?.virtual,\n  });\n};\n\nexport const showContextMenu = (items: ContextMenuItem[], options?: ShowContextMenuOptions) => {\n  if (typeof window === 'undefined') return;\n\n  if (interceptor?.show) {\n    interceptor.show(items, options, () => showWebContextMenu(items, options));\n    return;\n  }\n\n  showWebContextMenu(items, options);\n};\n\n/**\n * Update menu items while keeping current anchor/position.\n * Useful for interactive menu items (e.g. checkbox) to avoid re-positioning.\n */\nexport const updateContextMenuItems = (items: ContextMenuItem[]) => {\n  if (typeof window === 'undefined') return;\n  setContextMenuState({ items });\n};\n\nconst closeWebContextMenu = () => {\n  setContextMenuState({\n    anchor: null,\n    footer: undefined,\n    header: undefined,\n    iconSpaceMode: 'global',\n    items: [],\n    listItemHeight: undefined,\n    open: false,\n    triggerId: null,\n    virtual: undefined,\n  });\n};\n\nexport const closeContextMenu = () => {\n  if (interceptor?.close) {\n    interceptor.close(closeWebContextMenu);\n    return;\n  }\n\n  closeWebContextMenu();\n};\n"],"mappings":";AAoBA,MAAM,aAA+B;CACnC,QAAQ;CACR,eAAe;CACf,OAAO,CAAC;CACR,MAAM;CACN,WAAW;AACb;AAEA,IAAI,mBAAqC;AACzC,MAAM,4BAAY,IAAI,IAAgB;AACtC,MAAM,cAAc;CAAE,OAAO;CAAO,WAAW;CAAuB,GAAG;CAAG,GAAG;AAAE;AAEjF,MAAM,eAAe;CACnB,UAAU,SAAS,aAAa,SAAS,CAAC;AAC5C;AAEA,MAAa,aAAa,aAAyB;CACjD,UAAU,IAAI,QAAQ;CACtB,aAAa,UAAU,OAAO,QAAQ;AACxC;AAEA,MAAa,oBAAoB;AACjC,MAAa,0BAA0B;AAEvC,MAAa,qBAAqB,UAAqC;CACrE,YAAY,IAAI,MAAM;CACtB,YAAY,IAAI,MAAM;CACtB,YAAY,QAAQ;CACpB,IAAI,MAAM,kBAAkB,SAAS;EACnC,MAAM,UAAU,MAAM,OAAO,QAAqB,4BAA4B;EAC9E,YAAY,YAAY,SAAS,QAAQ,sBAAsB;CACjE,OACE,YAAY,YAAY;AAE5B;AAEA,MAAM,wBAAwB,WAAqD;CACjF,gBAAgB,OAAO,aAAa,cAAc,KAAA,IAAY,SAAS;CACvE,8BACG;EACC,QAAQ,MAAM;EACd,QAAQ;EACR,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,KAAA;EACd,KAAK,MAAM;EACX,OAAO;EACP,GAAG,MAAM;EACT,GAAG,MAAM;CACX;AACJ;AAEA,MAAa,uBAAuB,SAAoC;CACtE,mBAAmB;EAAE,GAAG;EAAkB,GAAG;CAAK;CAClD,OAAO;AACT;AAqBA,IAAI,cAA6C;;;;;;;;AASjD,MAAa,6BAA6B,SAAwC;CAChF,cAAc;AAChB;AAEA,MAAM,sBAAsB,OAA0B,YAAqC;CACzF,MAAM,gBAAgB;EAAE,GAAG,OAAO,aAAa;EAAG,GAAG,OAAO,cAAc;CAAE;CAC5E,MAAM,QAAQ,YAAY,QAAQ;EAAE,GAAG,YAAY;EAAG,GAAG,YAAY;CAAE,IAAI;CAE3E,oBAAoB;EAClB,QAAQ,qBAAqB,KAAK;EAClC,QAAQ,SAAS;EACjB,QAAQ,SAAS;EACjB,WAAW,SAAS;EACpB,eAAe,SAAS,iBAAiB;EACzC;EACA,gBAAgB,SAAS;EACzB,MAAM;EACN,WAAW,YAAY,aAAa;EACpC,SAAS,SAAS;CACpB,CAAC;AACH;AAEA,MAAa,mBAAmB,OAA0B,YAAqC;CAC7F,IAAI,OAAO,WAAW,aAAa;CAEnC,IAAI,aAAa,MAAM;EACrB,YAAY,KAAK,OAAO,eAAe,mBAAmB,OAAO,OAAO,CAAC;EACzE;CACF;CAEA,mBAAmB,OAAO,OAAO;AACnC;;;;;AAMA,MAAa,0BAA0B,UAA6B;CAClE,IAAI,OAAO,WAAW,aAAa;CACnC,oBAAoB,EAAE,MAAM,CAAC;AAC/B;AAEA,MAAM,4BAA4B;CAChC,oBAAoB;EAClB,QAAQ;EACR,QAAQ,KAAA;EACR,QAAQ,KAAA;EACR,eAAe;EACf,OAAO,CAAC;EACR,gBAAgB,KAAA;EAChB,MAAM;EACN,WAAW;EACX,SAAS,KAAA;CACX,CAAC;AACH;AAEA,MAAa,yBAAyB;CACpC,IAAI,aAAa,OAAO;EACtB,YAAY,MAAM,mBAAmB;EACrC;CACF;CAEA,oBAAoB;AACtB"}
+{"version":3,"file":"store.mjs","names":[],"sources":["../../src/ContextMenu/store.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { IconAlign } from '@/internal/menu';\nimport type { VirtualListProps } from '@/internal/virtual';\n\nimport type { IconSpaceMode } from './renderItems';\nimport type { ContextMenuItem } from './type';\n\ninterface VirtualElement {\n  contextElement?: Element;\n  getBoundingClientRect: () => DOMRect;\n}\n\nexport type ContextMenuState = Pick<VirtualListProps, 'virtual' | 'listItemHeight'> & {\n  anchor: VirtualElement | null;\n  footer?: ReactNode;\n  header?: ReactNode;\n  iconAlign?: IconAlign;\n  iconSpaceMode: IconSpaceMode;\n  items: ContextMenuItem[];\n  open: boolean;\n  triggerId: string | null;\n};\n\nconst emptyState: ContextMenuState = {\n  anchor: null,\n  iconSpaceMode: 'global',\n  items: [],\n  open: false,\n  triggerId: null,\n};\n\nlet contextMenuState: ContextMenuState = emptyState;\nconst listeners = new Set<() => void>();\nconst lastPointer = { ready: false, triggerId: null as string | null, x: 0, y: 0 };\n\nconst notify = () => {\n  listeners.forEach((listener) => listener());\n};\n\nexport const subscribe = (listener: () => void) => {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n};\n\nexport const getSnapshot = () => contextMenuState;\nexport const getServerSnapshot = () => emptyState;\n\nexport const updateLastPointer = (event: MouseEvent | PointerEvent) => {\n  lastPointer.x = event.clientX;\n  lastPointer.y = event.clientY;\n  lastPointer.ready = true;\n  if (event.target instanceof Element) {\n    const trigger = event.target.closest<HTMLElement>('[data-contextmenu-trigger]');\n    lastPointer.triggerId = trigger?.dataset.contextmenuTrigger ?? null;\n  } else {\n    lastPointer.triggerId = null;\n  }\n};\n\nconst createVirtualElement = (point: { x: number; y: number }): VirtualElement => ({\n  contextElement: typeof document === 'undefined' ? undefined : document.body,\n  getBoundingClientRect: () =>\n    ({\n      bottom: point.y,\n      height: 0,\n      left: point.x,\n      right: point.x,\n      toJSON: () => undefined,\n      top: point.y,\n      width: 0,\n      x: point.x,\n      y: point.y,\n    }) as DOMRect,\n});\n\nexport const setContextMenuState = (next: Partial<ContextMenuState>) => {\n  contextMenuState = { ...contextMenuState, ...next };\n  notify();\n};\n\nexport interface ShowContextMenuOptions extends Pick<\n  VirtualListProps,\n  'virtual' | 'listItemHeight'\n> {\n  footer?: ReactNode;\n  header?: ReactNode;\n  iconAlign?: IconAlign;\n  iconSpaceMode?: IconSpaceMode;\n}\n\nexport interface ContextMenuInterceptor {\n  close?: (fallback: () => void) => void;\n  show?: (\n    items: ContextMenuItem[],\n    options: ShowContextMenuOptions | undefined,\n    fallback: () => void,\n  ) => void;\n}\n\nlet interceptor: ContextMenuInterceptor | null = null;\n\n/**\n * Register a global interceptor for every context menu — imperative\n * `showContextMenu`/`closeContextMenu` calls and `ContextMenuTrigger` alike.\n * The interceptor may render the menu through another system (e.g. a native\n * OS menu) or invoke `fallback()` to show the default web menu. Pass `null`\n * to restore the default behavior.\n */\nexport const setContextMenuInterceptor = (next: ContextMenuInterceptor | null) => {\n  interceptor = next;\n};\n\nconst showWebContextMenu = (items: ContextMenuItem[], options?: ShowContextMenuOptions) => {\n  const fallbackPoint = { x: window.innerWidth / 2, y: window.innerHeight / 2 };\n  const point = lastPointer.ready ? { x: lastPointer.x, y: lastPointer.y } : fallbackPoint;\n\n  setContextMenuState({\n    anchor: createVirtualElement(point),\n    footer: options?.footer,\n    header: options?.header,\n    iconAlign: options?.iconAlign,\n    iconSpaceMode: options?.iconSpaceMode ?? 'global',\n    items,\n    listItemHeight: options?.listItemHeight,\n    open: true,\n    triggerId: lastPointer.triggerId ?? null,\n    virtual: options?.virtual,\n  });\n};\n\nexport const showContextMenu = (items: ContextMenuItem[], options?: ShowContextMenuOptions) => {\n  if (typeof window === 'undefined') return;\n\n  if (interceptor?.show) {\n    interceptor.show(items, options, () => showWebContextMenu(items, options));\n    return;\n  }\n\n  showWebContextMenu(items, options);\n};\n\n/**\n * Update menu items while keeping current anchor/position.\n * Useful for interactive menu items (e.g. checkbox) to avoid re-positioning.\n */\nexport const updateContextMenuItems = (items: ContextMenuItem[]) => {\n  if (typeof window === 'undefined') return;\n  setContextMenuState({ items });\n};\n\nconst closeWebContextMenu = () => {\n  setContextMenuState({\n    anchor: null,\n    footer: undefined,\n    header: undefined,\n    iconSpaceMode: 'global',\n    items: [],\n    listItemHeight: undefined,\n    open: false,\n    triggerId: null,\n    virtual: undefined,\n  });\n};\n\nexport const closeContextMenu = () => {\n  if (interceptor?.close) {\n    interceptor.close(closeWebContextMenu);\n    return;\n  }\n\n  closeWebContextMenu();\n};\n"],"mappings":";AAwBA,MAAM,aAA+B;CACnC,QAAQ;CACR,eAAe;CACf,OAAO,CAAC;CACR,MAAM;CACN,WAAW;AACb;AAEA,IAAI,mBAAqC;AACzC,MAAM,4BAAY,IAAI,IAAgB;AACtC,MAAM,cAAc;CAAE,OAAO;CAAO,WAAW;CAAuB,GAAG;CAAG,GAAG;AAAE;AAEjF,MAAM,eAAe;CACnB,UAAU,SAAS,aAAa,SAAS,CAAC;AAC5C;AAEA,MAAa,aAAa,aAAyB;CACjD,UAAU,IAAI,QAAQ;CACtB,aAAa,UAAU,OAAO,QAAQ;AACxC;AAEA,MAAa,oBAAoB;AACjC,MAAa,0BAA0B;AAEvC,MAAa,qBAAqB,UAAqC;CACrE,YAAY,IAAI,MAAM;CACtB,YAAY,IAAI,MAAM;CACtB,YAAY,QAAQ;CACpB,IAAI,MAAM,kBAAkB,SAAS;EACnC,MAAM,UAAU,MAAM,OAAO,QAAqB,4BAA4B;EAC9E,YAAY,YAAY,SAAS,QAAQ,sBAAsB;CACjE,OACE,YAAY,YAAY;AAE5B;AAEA,MAAM,wBAAwB,WAAqD;CACjF,gBAAgB,OAAO,aAAa,cAAc,KAAA,IAAY,SAAS;CACvE,8BACG;EACC,QAAQ,MAAM;EACd,QAAQ;EACR,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc,KAAA;EACd,KAAK,MAAM;EACX,OAAO;EACP,GAAG,MAAM;EACT,GAAG,MAAM;CACX;AACJ;AAEA,MAAa,uBAAuB,SAAoC;CACtE,mBAAmB;EAAE,GAAG;EAAkB,GAAG;CAAK;CAClD,OAAO;AACT;AAqBA,IAAI,cAA6C;;;;;;;;AASjD,MAAa,6BAA6B,SAAwC;CAChF,cAAc;AAChB;AAEA,MAAM,sBAAsB,OAA0B,YAAqC;CACzF,MAAM,gBAAgB;EAAE,GAAG,OAAO,aAAa;EAAG,GAAG,OAAO,cAAc;CAAE;CAC5E,MAAM,QAAQ,YAAY,QAAQ;EAAE,GAAG,YAAY;EAAG,GAAG,YAAY;CAAE,IAAI;CAE3E,oBAAoB;EAClB,QAAQ,qBAAqB,KAAK;EAClC,QAAQ,SAAS;EACjB,QAAQ,SAAS;EACjB,WAAW,SAAS;EACpB,eAAe,SAAS,iBAAiB;EACzC;EACA,gBAAgB,SAAS;EACzB,MAAM;EACN,WAAW,YAAY,aAAa;EACpC,SAAS,SAAS;CACpB,CAAC;AACH;AAEA,MAAa,mBAAmB,OAA0B,YAAqC;CAC7F,IAAI,OAAO,WAAW,aAAa;CAEnC,IAAI,aAAa,MAAM;EACrB,YAAY,KAAK,OAAO,eAAe,mBAAmB,OAAO,OAAO,CAAC;EACzE;CACF;CAEA,mBAAmB,OAAO,OAAO;AACnC;;;;;AAMA,MAAa,0BAA0B,UAA6B;CAClE,IAAI,OAAO,WAAW,aAAa;CACnC,oBAAoB,EAAE,MAAM,CAAC;AAC/B;AAEA,MAAM,4BAA4B;CAChC,oBAAoB;EAClB,QAAQ;EACR,QAAQ,KAAA;EACR,QAAQ,KAAA;EACR,eAAe;EACf,OAAO,CAAC;EACR,gBAAgB,KAAA;EAChB,MAAM;EACN,WAAW;EACX,SAAS,KAAA;CACX,CAAC;AACH;AAEA,MAAa,yBAAyB;CACpC,IAAI,aAAa,OAAO;EACtB,YAAY,MAAM,mBAAmB;EACrC;CACF;CAEA,oBAAoB;AACtB"}

package/es/DatePicker/DatePicker.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { focusRing } from "../styles/stylex/focusRing.mjs";
 import Icon from "../Icon/Icon.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
 import datePicker_default from "../i18n/resources/en/datePicker.mjs";
 import { DEFAULT_FORMAT, clampToBounds } from "./calendar.mjs";
@@ -11,7 +12,6 @@ import { memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { CalendarIcon } from "lucide-react";
-import useControlledState from "use-merge-value";
 import dayjs from "dayjs";
 //#region src/DatePicker/DatePicker.tsx
 const PLACEHOLDER_KEY = {

package/es/DatePicker/DatePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.mjs","names":["datePickerMessages"],"sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport dayjs from 'dayjs';\nimport { CalendarIcon } from 'lucide-react';\nimport { memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport { clampToBounds, DEFAULT_FORMAT } from './calendar';\nimport CalendarPanel from './CalendarPanel';\nimport PickerShell from './PickerShell';\nimport { styles } from './style';\nimport type { DatePickerProps } from './type';\n\nconst PLACEHOLDER_KEY = {\n  date: 'datePicker.placeholder',\n  month: 'datePicker.monthPlaceholder',\n  year: 'datePicker.yearPlaceholder',\n} as const;\n\nexport const formatDate = (date: Date, format: DatePickerProps['format'], fallback: string) =>\n  typeof format === 'function' ? format(date) : dayjs(date).format(format ?? fallback);\n\nconst DatePicker = memo<DatePickerProps>(\n  ({\n    allowClear = true,\n    className,\n    defaultValue = null,\n    disabled,\n    disabledDate,\n    footer,\n    format,\n    max,\n    min,\n    mode = 'date',\n    onChange,\n    placeholder,\n    shadow,\n    size,\n    style,\n    value,\n    variant,\n  }) => {\n    const { t } = useTranslation(datePickerMessages);\n    const [current, setCurrent] = useControlledState<Date | null>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n    const [open, setOpen] = useState(false);\n    const [month, setMonth] = useState<Date>(() => current ?? new Date());\n\n    const text = current ? formatDate(current, format, DEFAULT_FORMAT[mode]) : null;\n\n    return (\n      <PickerShell\n        className={className}\n        disabled={disabled}\n        open={open}\n        shadow={shadow}\n        showClear={allowClear && !!current}\n        size={size}\n        style={style}\n        variant={variant}\n        icon={\n          <span {...stylex.props(styles.icon)}>\n            <Icon icon={CalendarIcon} size={14} />\n          </span>\n        }\n        trigger={\n          <button {...stylex.props(focusRing.info, styles.trigger)} disabled={disabled} type=\"button\">\n            {text ?? (\n              <span {...stylex.props(styles.placeholder)}>{placeholder ?? t(PLACEHOLDER_KEY[mode])}</span>\n            )}\n          </button>\n        }\n        onClear={() => setCurrent(null)}\n        onOpenChange={(next) => {\n          if (next) setMonth(current ?? clampToBounds(new Date(), { max, min }));\n          setOpen(next);\n        }}\n      >\n        <CalendarPanel\n          bounds={{ disabledDate, max, min }}\n          mode={mode}\n          month={month}\n          selected={current}\n          onMonthChange={setMonth}\n          onSelect={(date) => {\n            setCurrent(date);\n            setOpen(false);\n          }}\n        />\n        {footer && <div {...stylex.props(styles.footer)}>{footer}</div>}\n      </PickerShell>\n    );\n  },\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,kBAAkB;CACtB,MAAM;CACN,OAAO;CACP,MAAM;AACR;AACA,MAAa,cAAc,MAAY,QAAmC,aAAqB,OAAO,WAAW,aAAa,OAAO,IAAI,IAAI,MAAM,IAAI,CAAC,CAAC,OAAO,UAAU,QAAQ;AAClL,MAAM,aAAa,MAAuB,EACxC,aAAa,MACb,WACA,eAAe,MACf,UACA,cACA,QACA,QACA,KACA,KACA,OAAO,QACP,UACA,aACA,QACA,MACA,OACA,OACA,cACI;CACJ,MAAM,EACJ,MACE,eAAeA,kBAAkB;CACrC,MAAM,CAAC,SAAS,cAAc,mBAAgC,cAAc;EAC1E;EACA;EACA;CACF,CAAC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,CAAC,OAAO,YAAY,eAAqB,2BAAW,IAAI,KAAK,CAAC;CACpE,MAAM,OAAO,UAAU,WAAW,SAAS,QAAQ,eAAe,KAAK,IAAI;CAC3E,OAAO,qBAAC,aAAD;EAAwB;EAAqB;EAAgB;EAAc;EAAQ,WAAW,cAAc,CAAC,CAAC;EAAe;EAAa;EAAgB;EAAS,MAAM,oBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,OAAO,IAAI;GACxM,UAAA,oBAAC,MAAD;IAAM,MAAM;IAAc,MAAM;GAAK,CAAA;EACjC,CAAA;EAAG,SAAS,oBAAC,UAAD;GAAQ,GAAI,OAAO,MAAM,UAAU,MAAM,OAAO,OAAO;GAAa;GAAU,MAAK;GAClG,UAAA,QAAQ,oBAAC,QAAD;IAAM,GAAI,OAAO,MAAM,OAAO,WAAW;IAAI,UAAA,eAAe,EAAE,gBAAgB,KAAK;GAAQ,CAAA;EAC9F,CAAA;EAAG,eAAe,WAAW,IAAI;EAAG,eAAc,SAAQ;GACxE,IAAI,MAAM,SAAS,WAAW,8BAAc,IAAI,KAAK,GAAG;IACtD;IACA;GACF,CAAC,CAAC;GACF,QAAQ,IAAI;EACd;EAVO,UAAA,CAWD,oBAAC,eAAD;GAAe,QAAQ;IACzB;IACA;IACA;GACF;GAAS;GAAa;GAAO,UAAU;GAAS,eAAe;GAAU,WAAU,SAAQ;IACzF,WAAW,IAAI;IACf,QAAQ,KAAK;GACf;EAAI,CAAA,GACC,UAAU,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,MAAM;GAAI,UAAA;EAAY,CAAA,CACnD;;AACnB,CAAC;AACD,WAAW,cAAc"}
+{"version":3,"file":"DatePicker.mjs","names":["datePickerMessages"],"sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport dayjs from 'dayjs';\nimport { CalendarIcon } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport { clampToBounds, DEFAULT_FORMAT } from './calendar';\nimport CalendarPanel from './CalendarPanel';\nimport PickerShell from './PickerShell';\nimport { styles } from './style';\nimport type { DatePickerProps } from './type';\n\nconst PLACEHOLDER_KEY = {\n  date: 'datePicker.placeholder',\n  month: 'datePicker.monthPlaceholder',\n  year: 'datePicker.yearPlaceholder',\n} as const;\n\nexport const formatDate = (date: Date, format: DatePickerProps['format'], fallback: string) =>\n  typeof format === 'function' ? format(date) : dayjs(date).format(format ?? fallback);\n\nconst DatePicker = memo<DatePickerProps>(\n  ({\n    allowClear = true,\n    className,\n    defaultValue = null,\n    disabled,\n    disabledDate,\n    footer,\n    format,\n    max,\n    min,\n    mode = 'date',\n    onChange,\n    placeholder,\n    shadow,\n    size,\n    style,\n    value,\n    variant,\n  }) => {\n    const { t } = useTranslation(datePickerMessages);\n    const [current, setCurrent] = useControlledState<Date | null>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n    const [open, setOpen] = useState(false);\n    const [month, setMonth] = useState<Date>(() => current ?? new Date());\n\n    const text = current ? formatDate(current, format, DEFAULT_FORMAT[mode]) : null;\n\n    return (\n      <PickerShell\n        className={className}\n        disabled={disabled}\n        open={open}\n        shadow={shadow}\n        showClear={allowClear && !!current}\n        size={size}\n        style={style}\n        variant={variant}\n        icon={\n          <span {...stylex.props(styles.icon)}>\n            <Icon icon={CalendarIcon} size={14} />\n          </span>\n        }\n        trigger={\n          <button\n            {...stylex.props(focusRing.info, styles.trigger)}\n            disabled={disabled}\n            type=\"button\"\n          >\n            {text ?? (\n              <span {...stylex.props(styles.placeholder)}>\n                {placeholder ?? t(PLACEHOLDER_KEY[mode])}\n              </span>\n            )}\n          </button>\n        }\n        onClear={() => setCurrent(null)}\n        onOpenChange={(next) => {\n          if (next) setMonth(current ?? clampToBounds(new Date(), { max, min }));\n          setOpen(next);\n        }}\n      >\n        <CalendarPanel\n          bounds={{ disabledDate, max, min }}\n          mode={mode}\n          month={month}\n          selected={current}\n          onMonthChange={setMonth}\n          onSelect={(date) => {\n            setCurrent(date);\n            setOpen(false);\n          }}\n        />\n        {footer && <div {...stylex.props(styles.footer)}>{footer}</div>}\n      </PickerShell>\n    );\n  },\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,kBAAkB;CACtB,MAAM;CACN,OAAO;CACP,MAAM;AACR;AACA,MAAa,cAAc,MAAY,QAAmC,aAAqB,OAAO,WAAW,aAAa,OAAO,IAAI,IAAI,MAAM,IAAI,CAAC,CAAC,OAAO,UAAU,QAAQ;AAClL,MAAM,aAAa,MAAuB,EACxC,aAAa,MACb,WACA,eAAe,MACf,UACA,cACA,QACA,QACA,KACA,KACA,OAAO,QACP,UACA,aACA,QACA,MACA,OACA,OACA,cACI;CACJ,MAAM,EACJ,MACE,eAAeA,kBAAkB;CACrC,MAAM,CAAC,SAAS,cAAc,mBAAgC,cAAc;EAC1E;EACA;EACA;CACF,CAAC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,CAAC,OAAO,YAAY,eAAqB,2BAAW,IAAI,KAAK,CAAC;CACpE,MAAM,OAAO,UAAU,WAAW,SAAS,QAAQ,eAAe,KAAK,IAAI;CAC3E,OAAO,qBAAC,aAAD;EAAwB;EAAqB;EAAgB;EAAc;EAAQ,WAAW,cAAc,CAAC,CAAC;EAAe;EAAa;EAAgB;EAAS,MAAM,oBAAC,QAAD;GAAM,GAAI,OAAO,MAAM,OAAO,IAAI;GACxM,UAAA,oBAAC,MAAD;IAAM,MAAM;IAAc,MAAM;GAAK,CAAA;EACjC,CAAA;EAAG,SAAS,oBAAC,UAAD;GAAQ,GAAI,OAAO,MAAM,UAAU,MAAM,OAAO,OAAO;GAAa;GAAU,MAAK;GAClG,UAAA,QAAQ,oBAAC,QAAD;IAAM,GAAI,OAAO,MAAM,OAAO,WAAW;IAC7C,UAAA,eAAe,EAAE,gBAAgB,KAAK;GACnC,CAAA;EACF,CAAA;EAAG,eAAe,WAAW,IAAI;EAAG,eAAc,SAAQ;GACxE,IAAI,MAAM,SAAS,WAAW,8BAAc,IAAI,KAAK,GAAG;IACtD;IACA;GACF,CAAC,CAAC;GACF,QAAQ,IAAI;EACd;EAZO,UAAA,CAaD,oBAAC,eAAD;GAAe,QAAQ;IACzB;IACA;IACA;GACF;GAAS;GAAa;GAAO,UAAU;GAAS,eAAe;GAAU,WAAU,SAAQ;IACzF,WAAW,IAAI;IACf,QAAQ,KAAK;GACf;EAAI,CAAA,GACC,UAAU,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,MAAM;GAAI,UAAA;EAAY,CAAA,CACnD;;AACnB,CAAC;AACD,WAAW,cAAc"}

package/es/DatePicker/DateRangePicker.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { focusRing } from "../styles/stylex/focusRing.mjs";
 import Icon from "../Icon/Icon.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
 import datePicker_default from "../i18n/resources/en/datePicker.mjs";
 import { DEFAULT_FORMAT, clampToBounds, orderRange } from "./calendar.mjs";
@@ -12,7 +13,6 @@ import { memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { ArrowRight, CalendarIcon } from "lucide-react";
-import useControlledState from "use-merge-value";
 import dayjs from "dayjs";
 //#region src/DatePicker/DateRangePicker.tsx
 const EMPTY = [null, null];

package/es/DatePicker/DateRangePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.mjs","names":["datePickerMessages"],"sources":["../../src/DatePicker/DateRangePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport dayjs from 'dayjs';\nimport { ArrowRight, CalendarIcon } from 'lucide-react';\nimport { memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport { clampToBounds, DEFAULT_FORMAT, orderRange } from './calendar';\nimport CalendarPanel from './CalendarPanel';\nimport { formatDate } from './DatePicker';\nimport PickerShell from './PickerShell';\nimport { styles } from './style';\nimport type { DateRangePickerProps, DateRangeValue } from './type';\n\nconst EMPTY: DateRangeValue = [null, null];\n\nconst DateRangePicker = memo<DateRangePickerProps>(\n  ({\n    allowClear = true,\n    className,\n    defaultValue = EMPTY,\n    disabled,\n    disabledDate,\n    format,\n    max,\n    min,\n    onChange,\n    placeholder,\n    shadow,\n    size,\n    style,\n    value,\n    variant,\n  }) => {\n    const { t } = useTranslation(datePickerMessages);\n    const [current, setCurrent] = useControlledState<DateRangeValue>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n    const [open, setOpen] = useState(false);\n    const [draft, setDraft] = useState<DateRangeValue>(EMPTY);\n    const [hovered, setHovered] = useState<Date | null>(null);\n    const [month, setMonth] = useState<Date>(() => current[0] ?? new Date());\n\n    const shown = open && draft[0] ? draft : current;\n    const nextMonth = dayjs(month).add(1, 'month').toDate();\n    const bounds = { disabledDate, max, min };\n\n    const half = (date: Date | null, fallback: string, active: boolean) => (\n      <span {...stylex.props(styles.rangeHalf)} data-active={active ? '' : undefined}>\n        {date ? (\n          formatDate(date, format, DEFAULT_FORMAT.date)\n        ) : (\n          <span {...stylex.props(styles.placeholder)}>{fallback}</span>\n        )}\n      </span>\n    );\n\n    const select = (date: Date) => {\n      if (!draft[0] || draft[1]) {\n        setDraft([date, null]);\n        return;\n      }\n      const ordered = orderRange(draft[0], date);\n      setDraft(EMPTY);\n      setCurrent(ordered);\n      setOpen(false);\n    };\n\n    return (\n      <PickerShell\n        className={className}\n        disabled={disabled}\n        open={open}\n        shadow={shadow}\n        showClear={allowClear && !!(current[0] || current[1])}\n        size={size}\n        style={style}\n        variant={variant}\n        icon={\n          <span {...stylex.props(styles.icon)}>\n            <Icon icon={CalendarIcon} size={14} />\n          </span>\n        }\n        trigger={\n          <button {...stylex.props(focusRing.info, styles.trigger)} disabled={disabled} type=\"button\">\n            <span {...stylex.props(styles.rangeTrigger)}>\n              {half(\n                shown[0],\n                placeholder?.[0] ?? t('datePicker.startPlaceholder'),\n                open && !draft[0],\n              )}\n              <span {...stylex.props(styles.icon)}>\n                <Icon icon={ArrowRight} size={14} />\n              </span>\n              {half(\n                shown[1],\n                placeholder?.[1] ?? t('datePicker.endPlaceholder'),\n                open && !!draft[0],\n              )}\n            </span>\n          </button>\n        }\n        onClear={() => setCurrent(EMPTY)}\n        onOpenChange={(next) => {\n          if (next) {\n            setMonth(current[0] ?? clampToBounds(new Date(), { max, min }));\n            setDraft(EMPTY);\n          }\n          setOpen(next);\n        }}\n      >\n        <div {...stylex.props(styles.range)}>\n          <CalendarPanel\n            bounds={bounds}\n            hovered={hovered}\n            mode=\"date\"\n            month={month}\n            range={draft[0] ? draft : current}\n            showNav={false}\n            onHover={setHovered}\n            onMonthChange={setMonth}\n            onSelect={select}\n          />\n          <CalendarPanel\n            bounds={bounds}\n            hovered={hovered}\n            mode=\"date\"\n            month={nextMonth}\n            range={draft[0] ? draft : current}\n            onHover={setHovered}\n            onMonthChange={(next) => setMonth(dayjs(next).subtract(1, 'month').toDate())}\n            onSelect={select}\n          />\n        </div>\n      </PickerShell>\n    );\n  },\n);\n\nDateRangePicker.displayName = 'DateRangePicker';\n\nexport default DateRangePicker;\n"],"mappings":"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"}
+{"version":3,"file":"DateRangePicker.mjs","names":["datePickerMessages"],"sources":["../../src/DatePicker/DateRangePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport dayjs from 'dayjs';\nimport { ArrowRight, CalendarIcon } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport datePickerMessages from '@/i18n/resources/en/datePicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport { clampToBounds, DEFAULT_FORMAT, orderRange } from './calendar';\nimport CalendarPanel from './CalendarPanel';\nimport { formatDate } from './DatePicker';\nimport PickerShell from './PickerShell';\nimport { styles } from './style';\nimport type { DateRangePickerProps, DateRangeValue } from './type';\n\nconst EMPTY: DateRangeValue = [null, null];\n\nconst DateRangePicker = memo<DateRangePickerProps>(\n  ({\n    allowClear = true,\n    className,\n    defaultValue = EMPTY,\n    disabled,\n    disabledDate,\n    format,\n    max,\n    min,\n    onChange,\n    placeholder,\n    shadow,\n    size,\n    style,\n    value,\n    variant,\n  }) => {\n    const { t } = useTranslation(datePickerMessages);\n    const [current, setCurrent] = useControlledState<DateRangeValue>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n    const [open, setOpen] = useState(false);\n    const [draft, setDraft] = useState<DateRangeValue>(EMPTY);\n    const [hovered, setHovered] = useState<Date | null>(null);\n    const [month, setMonth] = useState<Date>(() => current[0] ?? new Date());\n\n    const shown = open && draft[0] ? draft : current;\n    const nextMonth = dayjs(month).add(1, 'month').toDate();\n    const bounds = { disabledDate, max, min };\n\n    const half = (date: Date | null, fallback: string, active: boolean) => (\n      <span {...stylex.props(styles.rangeHalf)} data-active={active ? '' : undefined}>\n        {date ? (\n          formatDate(date, format, DEFAULT_FORMAT.date)\n        ) : (\n          <span {...stylex.props(styles.placeholder)}>{fallback}</span>\n        )}\n      </span>\n    );\n\n    const select = (date: Date) => {\n      if (!draft[0] || draft[1]) {\n        setDraft([date, null]);\n        return;\n      }\n      const ordered = orderRange(draft[0], date);\n      setDraft(EMPTY);\n      setCurrent(ordered);\n      setOpen(false);\n    };\n\n    return (\n      <PickerShell\n        className={className}\n        disabled={disabled}\n        open={open}\n        shadow={shadow}\n        showClear={allowClear && !!(current[0] || current[1])}\n        size={size}\n        style={style}\n        variant={variant}\n        icon={\n          <span {...stylex.props(styles.icon)}>\n            <Icon icon={CalendarIcon} size={14} />\n          </span>\n        }\n        trigger={\n          <button\n            {...stylex.props(focusRing.info, styles.trigger)}\n            disabled={disabled}\n            type=\"button\"\n          >\n            <span {...stylex.props(styles.rangeTrigger)}>\n              {half(\n                shown[0],\n                placeholder?.[0] ?? t('datePicker.startPlaceholder'),\n                open && !draft[0],\n              )}\n              <span {...stylex.props(styles.icon)}>\n                <Icon icon={ArrowRight} size={14} />\n              </span>\n              {half(\n                shown[1],\n                placeholder?.[1] ?? t('datePicker.endPlaceholder'),\n                open && !!draft[0],\n              )}\n            </span>\n          </button>\n        }\n        onClear={() => setCurrent(EMPTY)}\n        onOpenChange={(next) => {\n          if (next) {\n            setMonth(current[0] ?? clampToBounds(new Date(), { max, min }));\n            setDraft(EMPTY);\n          }\n          setOpen(next);\n        }}\n      >\n        <div {...stylex.props(styles.range)}>\n          <CalendarPanel\n            bounds={bounds}\n            hovered={hovered}\n            mode=\"date\"\n            month={month}\n            range={draft[0] ? draft : current}\n            showNav={false}\n            onHover={setHovered}\n            onMonthChange={setMonth}\n            onSelect={select}\n          />\n          <CalendarPanel\n            bounds={bounds}\n            hovered={hovered}\n            mode=\"date\"\n            month={nextMonth}\n            range={draft[0] ? draft : current}\n            onHover={setHovered}\n            onMonthChange={(next) => setMonth(dayjs(next).subtract(1, 'month').toDate())}\n            onSelect={select}\n          />\n        </div>\n      </PickerShell>\n    );\n  },\n);\n\nDateRangePicker.displayName = 'DateRangePicker';\n\nexport default DateRangePicker;\n"],"mappings":"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"}

package/es/DraggablePanel/atoms.mjs

@@ -2,6 +2,7 @@
 import { useMotionComponent } from "../MotionProvider/index.mjs";
 import { styleProps } from "../styles/stylex/props.mjs";
 import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { DraggablePanelContext, useDraggablePanelContext } from "./context.mjs";
 import { AXES } from "./core/axes.mjs";
 import { coarsePointer, handleSize } from "./core/env.mjs";
@@ -15,7 +16,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { ChevronLeft } from "lucide-react";
-import useControlledState from "use-merge-value";
 import { useTransform } from "motion/react";
 //#region src/DraggablePanel/atoms.tsx
 const prefix = "base-draggable-panel";

package/es/DraggablePanel/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["getHandleSize"],"sources":["../../src/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronLeft } from 'lucide-react';\nimport type { HTMLMotionProps, MotionStyle } from 'motion/react';\nimport { useTransform } from 'motion/react';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { styleProps } from '@/styles/stylex/props';\nimport type { DivProps } from '@/types';\n\nimport { DraggablePanelContext, useDraggablePanelContext } from './context';\nimport type { Placement } from './core/axes';\nimport { AXES } from './core/axes';\nimport type { PanelControllerOptions } from './core/controller';\nimport { createPanelController } from './core/controller';\nimport { coarsePointer, handleSize as getHandleSize } from './core/env';\nimport { useIsomorphicLayoutEffect, useStore } from './core/internal';\nimport { timing } from './core/transition';\nimport { draggablePanelMarker, draggablePanelToggleMarker } from './marker.stylex';\nimport { SEAM_ARROW, styles } from './style';\n\nconst prefix = 'base-draggable-panel';\n\nconst floatStyles = {\n  bottom: styles.bottomFloat,\n  left: styles.leftFloat,\n  right: styles.rightFloat,\n  top: styles.topFloat,\n};\n\nconst toggleStyles = {\n  bottom: styles.toggleTop,\n  left: styles.toggleRight,\n  right: styles.toggleLeft,\n  top: styles.toggleBottom,\n};\n\nconst togglePlacementClass = {\n  bottom: `${prefix}-toggle-top`,\n  left: `${prefix}-toggle-right`,\n  right: `${prefix}-toggle-left`,\n  top: `${prefix}-toggle-bottom`,\n};\n\nconst PAN_THRESHOLD = 3;\n\nconst ARROW_BOX = (SEAM_ARROW.half + SEAM_ARROW.lead) * 2;\nconst ARROW_C = ARROW_BOX / 2;\n\nconst ARROW_PATH = (() => {\n  const { depth: d, half: h, lead } = SEAM_ARROW;\n  const c = ARROW_C;\n  const r = 0.12;\n  return [\n    `M${c} ${c - h - lead}`,\n    `Q${c} ${c - h} ${c - d * r} ${c - h + h * r}`,\n    `L${c - d * (1 - r)} ${c - h * r}`,\n    `Q${c - d} ${c} ${c - d * (1 - r)} ${c + h * r}`,\n    `L${c - d * r} ${c + h - h * r}`,\n    `Q${c} ${c + h} ${c} ${c + h + lead}`,\n  ].join(' ');\n})();\n\n// The path bends toward -x; the sign flips it so the seam points the way a click moves the panel.\nconst bendSign = (placement: Placement, expand: boolean) =>\n  (placement === 'left' || placement === 'top' ? 1 : -1) * (expand ? 1 : -1);\n\nconst ORIGIN_MAP = {\n  bottom: 'center bottom',\n  left: 'left center',\n  right: 'right center',\n  top: 'center top',\n} as const;\n\nconst COLLAPSED_SCALE = 0.97;\n\nconst EDGE_INSET = {\n  bottom: 'insetBlockEnd',\n  left: 'insetInlineStart',\n  right: 'insetInlineEnd',\n  top: 'insetBlockStart',\n} as const;\n\nexport interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {\n  backgroundColor?: string;\n  collapseThreshold?: number;\n  defaultExpand?: boolean;\n  defaultSize?: number;\n  expand?: boolean;\n  expandable?: boolean;\n  max?: number;\n  min?: number;\n  mode?: 'fixed' | 'float';\n  onExpandChange?: (expand: boolean) => void;\n  onSizeChange?: (size: number, delta: number) => void;\n  onSizeDragging?: (size: number, delta: number) => void;\n  placement?: Placement;\n  showBorder?: boolean;\n  size?: number;\n}\n\nexport const DraggablePanelRoot = memo<DraggablePanelRootProps>(\n  ({\n    backgroundColor,\n    children,\n    className,\n    collapseThreshold,\n    defaultExpand = true,\n    defaultSize,\n    expand,\n    expandable = true,\n    max,\n    min = 0,\n    mode = 'fixed',\n    onExpandChange,\n    onSizeChange,\n    onSizeDragging,\n    placement = 'right',\n    showBorder = true,\n    size,\n    style,\n    ...rest\n  }) => {\n    const axis = AXES[placement];\n    const fallbackSize = axis.vertical ? 180 : 280;\n    const resolvedDefaultSize = defaultSize ?? fallbackSize;\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n    const [innerSize, setInnerSize] = useState(resolvedDefaultSize);\n    const currentSize = size ?? innerSize;\n\n    const commitSize = useCallback(\n      (next: number, delta: number) => {\n        if (size === undefined) setInnerSize(next);\n        onSizeChange?.(next, delta);\n      },\n      [onSizeChange, size],\n    );\n\n    const options: PanelControllerOptions = {\n      collapseThreshold,\n      defaultSize: resolvedDefaultSize,\n      expand: isExpand,\n      max,\n      min,\n      onExpandChange: setIsExpand,\n      onSizeChange: commitSize,\n      onSizeDragging,\n      placement,\n      size: currentSize,\n    };\n\n    const [controller] = useState(() => createPanelController(options));\n    const state = useStore(controller.subscribe, () => controller.state);\n    const elementRef = useRef<HTMLElement>(null);\n\n    useIsomorphicLayoutEffect(() => {\n      controller.sync(options);\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const node = elementRef.current;\n      return node ? controller.attach(node) : undefined;\n    }, [controller]);\n\n    const toggleExpand = useCallback(() => {\n      if (expandable) setIsExpand(!isExpand);\n    }, [expandable, isExpand, setIsExpand]);\n\n    const context = useMemo(\n      () => ({\n        axis,\n        controller,\n        expand: isExpand,\n        expandable,\n        placement,\n        showBorder,\n        state,\n        toggleExpand,\n      }),\n      [axis, controller, isExpand, expandable, placement, showBorder, state, toggleExpand],\n    );\n\n    return (\n      <DraggablePanelContext value={context}>\n        <aside\n          data-expand={isExpand}\n          data-expandable={expandable}\n          data-resizing={state.dragging}\n          ref={elementRef}\n          className={\n            styleProps(\n              [\n                styles.root,\n                mode === 'float' ? floatStyles[placement] : styles.fixed,\n                draggablePanelMarker,\n              ],\n              clsx(prefix, className),\n            ).className\n          }\n          style={\n            {\n              '--draggable-panel-bg': backgroundColor || '',\n              'flexDirection': axis.vertical ? 'column' : 'row',\n              ...style,\n            } as CSSProperties\n          }\n          {...rest}\n        >\n          {children}\n        </aside>\n      </DraggablePanelContext>\n    );\n  },\n);\n\nDraggablePanelRoot.displayName = 'DraggablePanelRoot';\n\nexport interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}\n\nexport const DraggablePanelContent = memo<DraggablePanelContentProps>(\n  ({ children, className, style, ...rest }) => {\n    const Motion = useMotionComponent();\n    const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n    const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n    // Subscribed, not read: a collapse that changes only the target would otherwise\n    // leave the content unclipped and painted outside the zero-width box.\n    const target = useStore(controller.subscribe, () => controller.target);\n    const clipping = state.dragging || state.folding || target === 0;\n    const shrunk = state.collapsing || !expand;\n\n    return (\n      <Motion.div\n        inert={!expand}\n        style={\n          {\n            display: 'flex',\n            flexDirection: axis.vertical ? 'column' : 'row',\n            flexShrink: 0,\n            justifyContent: axis.anchorEnd ? 'flex-end' : 'flex-start',\n            overflow: clipping ? 'clip' : 'visible',\n            [axis.cross]: '100%',\n            [axis.extent]: extent,\n          } as MotionStyle\n        }\n      >\n        <Motion.div\n          animate={{ scale: shrunk ? COLLAPSED_SCALE : 1 }}\n          className={styleProps(styles.content, clsx(`${prefix}-content`, className)).className}\n          transition={timing()}\n          style={\n            {\n              transformOrigin: ORIGIN_MAP[placement],\n              [axis.cross]: '100%',\n              [axis.extent]: controller.motion.content,\n              ...style,\n            } as MotionStyle\n          }\n          {...(rest as HTMLMotionProps<'div'>)}\n        >\n          {children}\n        </Motion.div>\n      </Motion.div>\n    );\n  },\n);\n\nDraggablePanelContent.displayName = 'DraggablePanelContent';\n\nexport interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {\n  wideArea?: boolean;\n}\n\nexport const DraggablePanelHandle = memo<DraggablePanelHandleProps>(\n  ({ className, style, wideArea = true, ...rest }) => {\n    const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();\n    const size = useStore(coarsePointer.subscribe, () => getHandleSize(wideArea));\n    const target = useStore(controller.subscribe, () => controller.target);\n    useEffect(() => () => controller.drag.cancel(), [controller]);\n\n    const pressedRef = useRef<{ x: number; y: number } | null>(null);\n    const draggingRef = useRef(false);\n    const draggedRef = useRef(false);\n    const { max, min } = controller.bounds();\n\n    if (!expand) return null;\n\n    return (\n      <div\n        aria-orientation={axis.ariaOrientation}\n        aria-valuemax={Number.isFinite(max) ? max : undefined}\n        aria-valuemin={min}\n        aria-valuenow={target}\n        aria-valuetext={`${target} pixels`}\n        data-border={showBorder}\n        data-resizing={state.dragging || undefined}\n        role=\"separator\"\n        tabIndex={0}\n        className={\n          styleProps(\n            [styles.handle, axis.vertical ? styles.handleHorizontal : styles.handleVertical],\n            clsx(`${prefix}-handle`, className),\n          ).className\n        }\n        style={\n          {\n            '--draggable-panel-handle-size': `${size}px`,\n            [EDGE_INSET[axis.edge]]: -size / 2,\n            ...style,\n          } as CSSProperties\n        }\n        onKeyDown={(event) => controller.resizeByKey(event)}\n        onDoubleClick={() => {\n          if (!draggedRef.current) controller.reset();\n        }}\n        // Capture can be stolen mid-drag (another setPointerCapture, an OOPIF under the\n        // cursor) and the pointerup then never reaches us; the pointer is wherever the\n        // user last dragged it, so commit rather than snap back.\n        onLostPointerCapture={() => {\n          if (draggingRef.current) controller.drag.end();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerCancel={() => {\n          controller.drag.cancel();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerDown={(event) => {\n          draggedRef.current = false;\n          pressedRef.current = { x: event.clientX, y: event.clientY };\n          // A synthetic pointerdown carries no active pointer, and capturing throws.\n          try {\n            event.currentTarget.setPointerCapture(event.pointerId);\n          } catch {\n            /* empty */\n          }\n        }}\n        onPointerMove={(event) => {\n          if (!pressedRef.current) return;\n          const offset = {\n            x: event.clientX - pressedRef.current.x,\n            y: event.clientY - pressedRef.current.y,\n          };\n          if (!draggingRef.current) {\n            if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;\n            draggingRef.current = true;\n            draggedRef.current = true;\n            controller.drag.start();\n          }\n          controller.drag.move(offset);\n        }}\n        onPointerUp={() => {\n          if (draggingRef.current) controller.drag.end();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nDraggablePanelHandle.displayName = 'DraggablePanelHandle';\n\nexport interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {\n  showHandleWhenCollapsed?: boolean;\n}\n\nexport const DraggablePanelToggle = memo<DraggablePanelToggleProps>(\n  ({ className, showHandleWhenCollapsed, style, ...rest }) => {\n    const { axis, expand, expandable, placement, showBorder, toggleExpand } =\n      useDraggablePanelContext();\n    const gradientId = `seam-arrow-${useId().replaceAll(/[^\\w-]/g, '')}`;\n\n    if (!expandable) return null;\n\n    const bend = bendSign(placement, expand);\n    const edgeOpacity = expand && showBorder ? 1 : 0;\n\n    return (\n      <div\n        style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n        className={\n          styleProps(\n            [styles.toggleRoot, toggleStyles[placement]],\n            clsx(`${prefix}-toggle`, togglePlacementClass[placement], className),\n          ).className\n        }\n        {...rest}\n      >\n        <button\n          aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n          type=\"button\"\n          onClick={toggleExpand}\n          {...stylex.props(\n            styles.toggleButton,\n            axis.vertical && styles.toggleButtonHorizontal,\n            draggablePanelToggleMarker,\n          )}\n        >\n          <svg\n            {...stylex.props(styles.toggleSvg)}\n            fill=\"none\"\n            height={ARROW_BOX}\n            style={{ '--seam-bend': bend } as CSSProperties}\n            viewBox={`0 0 ${ARROW_BOX} ${ARROW_BOX}`}\n            width={ARROW_BOX}\n          >\n            <defs>\n              <linearGradient\n                gradientUnits=\"userSpaceOnUse\"\n                id={gradientId}\n                x1={ARROW_C}\n                x2={ARROW_C}\n                y1={0}\n                y2={ARROW_BOX}\n              >\n                <stop\n                  data-end=\"\"\n                  offset={0}\n                  stopOpacity={edgeOpacity}\n                  {...stylex.props(styles.toggleStopEnd)}\n                />\n                <stop data-tip=\"\" offset={0.3} {...stylex.props(styles.toggleStopTip)} />\n                <stop data-tip=\"\" offset={0.7} {...stylex.props(styles.toggleStopTip)} />\n                <stop\n                  data-end=\"\"\n                  offset={1}\n                  stopOpacity={edgeOpacity}\n                  {...stylex.props(styles.toggleStopEnd)}\n                />\n              </linearGradient>\n            </defs>\n            <g transform={axis.vertical ? `rotate(90 ${ARROW_C} ${ARROW_C})` : undefined}>\n              <path\n                {...stylex.props(styles.togglePath)}\n                d={ARROW_PATH}\n                stroke={`url(#${gradientId})`}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={SEAM_ARROW.stroke}\n              />\n            </g>\n          </svg>\n        </button>\n      </div>\n    );\n  },\n);\n\nDraggablePanelToggle.displayName = 'DraggablePanelToggle';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nexport const DraggablePanelContainer = memo<DraggablePanelContainerProps>(\n  ({ className, ...rest }) => (\n    <div className={styleProps(styles.container, className).className} {...rest} />\n  ),\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n  <div {...styleProps(styles.body, className, { flex: 1, ...style })} {...rest} />\n));\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport type DraggablePanelFooterProps = DivProps;\n\nexport const DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => (\n  <div className={styleProps(styles.footer, className).className} {...rest} />\n));\n\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {\n  extra?: ReactNode;\n  onCollapse?: () => void;\n  title?: ReactNode;\n}\n\nexport const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(\n  ({ className, extra, onCollapse, title, ...rest }) => {\n    const { toggleExpand } = useDraggablePanelContext();\n\n    return (\n      <div className={styleProps(styles.header, className).className} {...rest}>\n        <ActionIcon icon={ChevronLeft} size={'small'} onClick={onCollapse ?? toggleExpand} />\n        {title}\n        {extra}\n      </div>\n    );\n  },\n);\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["getHandleSize"],"sources":["../../src/DraggablePanel/atoms.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronLeft } from 'lucide-react';\nimport type { HTMLMotionProps, MotionStyle } from 'motion/react';\nimport { useTransform } from 'motion/react';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { styleProps } from '@/styles/stylex/props';\nimport type { DivProps } from '@/types';\n\nimport { DraggablePanelContext, useDraggablePanelContext } from './context';\nimport type { Placement } from './core/axes';\nimport { AXES } from './core/axes';\nimport type { PanelControllerOptions } from './core/controller';\nimport { createPanelController } from './core/controller';\nimport { coarsePointer, handleSize as getHandleSize } from './core/env';\nimport { useIsomorphicLayoutEffect, useStore } from './core/internal';\nimport { timing } from './core/transition';\nimport { draggablePanelMarker, draggablePanelToggleMarker } from './marker.stylex';\nimport { SEAM_ARROW, styles } from './style';\n\nconst prefix = 'base-draggable-panel';\n\nconst floatStyles = {\n  bottom: styles.bottomFloat,\n  left: styles.leftFloat,\n  right: styles.rightFloat,\n  top: styles.topFloat,\n};\n\nconst toggleStyles = {\n  bottom: styles.toggleTop,\n  left: styles.toggleRight,\n  right: styles.toggleLeft,\n  top: styles.toggleBottom,\n};\n\nconst togglePlacementClass = {\n  bottom: `${prefix}-toggle-top`,\n  left: `${prefix}-toggle-right`,\n  right: `${prefix}-toggle-left`,\n  top: `${prefix}-toggle-bottom`,\n};\n\nconst PAN_THRESHOLD = 3;\n\nconst ARROW_BOX = (SEAM_ARROW.half + SEAM_ARROW.lead) * 2;\nconst ARROW_C = ARROW_BOX / 2;\n\nconst ARROW_PATH = (() => {\n  const { depth: d, half: h, lead } = SEAM_ARROW;\n  const c = ARROW_C;\n  const r = 0.12;\n  return [\n    `M${c} ${c - h - lead}`,\n    `Q${c} ${c - h} ${c - d * r} ${c - h + h * r}`,\n    `L${c - d * (1 - r)} ${c - h * r}`,\n    `Q${c - d} ${c} ${c - d * (1 - r)} ${c + h * r}`,\n    `L${c - d * r} ${c + h - h * r}`,\n    `Q${c} ${c + h} ${c} ${c + h + lead}`,\n  ].join(' ');\n})();\n\n// The path bends toward -x; the sign flips it so the seam points the way a click moves the panel.\nconst bendSign = (placement: Placement, expand: boolean) =>\n  (placement === 'left' || placement === 'top' ? 1 : -1) * (expand ? 1 : -1);\n\nconst ORIGIN_MAP = {\n  bottom: 'center bottom',\n  left: 'left center',\n  right: 'right center',\n  top: 'center top',\n} as const;\n\nconst COLLAPSED_SCALE = 0.97;\n\nconst EDGE_INSET = {\n  bottom: 'insetBlockEnd',\n  left: 'insetInlineStart',\n  right: 'insetInlineEnd',\n  top: 'insetBlockStart',\n} as const;\n\nexport interface DraggablePanelRootProps extends Omit<DivProps, 'onDrag'> {\n  backgroundColor?: string;\n  collapseThreshold?: number;\n  defaultExpand?: boolean;\n  defaultSize?: number;\n  expand?: boolean;\n  expandable?: boolean;\n  max?: number;\n  min?: number;\n  mode?: 'fixed' | 'float';\n  onExpandChange?: (expand: boolean) => void;\n  onSizeChange?: (size: number, delta: number) => void;\n  onSizeDragging?: (size: number, delta: number) => void;\n  placement?: Placement;\n  showBorder?: boolean;\n  size?: number;\n}\n\nexport const DraggablePanelRoot = memo<DraggablePanelRootProps>(\n  ({\n    backgroundColor,\n    children,\n    className,\n    collapseThreshold,\n    defaultExpand = true,\n    defaultSize,\n    expand,\n    expandable = true,\n    max,\n    min = 0,\n    mode = 'fixed',\n    onExpandChange,\n    onSizeChange,\n    onSizeDragging,\n    placement = 'right',\n    showBorder = true,\n    size,\n    style,\n    ...rest\n  }) => {\n    const axis = AXES[placement];\n    const fallbackSize = axis.vertical ? 180 : 280;\n    const resolvedDefaultSize = defaultSize ?? fallbackSize;\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n    const [innerSize, setInnerSize] = useState(resolvedDefaultSize);\n    const currentSize = size ?? innerSize;\n\n    const commitSize = useCallback(\n      (next: number, delta: number) => {\n        if (size === undefined) setInnerSize(next);\n        onSizeChange?.(next, delta);\n      },\n      [onSizeChange, size],\n    );\n\n    const options: PanelControllerOptions = {\n      collapseThreshold,\n      defaultSize: resolvedDefaultSize,\n      expand: isExpand,\n      max,\n      min,\n      onExpandChange: setIsExpand,\n      onSizeChange: commitSize,\n      onSizeDragging,\n      placement,\n      size: currentSize,\n    };\n\n    const [controller] = useState(() => createPanelController(options));\n    const state = useStore(controller.subscribe, () => controller.state);\n    const elementRef = useRef<HTMLElement>(null);\n\n    useIsomorphicLayoutEffect(() => {\n      controller.sync(options);\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const node = elementRef.current;\n      return node ? controller.attach(node) : undefined;\n    }, [controller]);\n\n    const toggleExpand = useCallback(() => {\n      if (expandable) setIsExpand(!isExpand);\n    }, [expandable, isExpand, setIsExpand]);\n\n    const context = useMemo(\n      () => ({\n        axis,\n        controller,\n        expand: isExpand,\n        expandable,\n        placement,\n        showBorder,\n        state,\n        toggleExpand,\n      }),\n      [axis, controller, isExpand, expandable, placement, showBorder, state, toggleExpand],\n    );\n\n    return (\n      <DraggablePanelContext value={context}>\n        <aside\n          data-expand={isExpand}\n          data-expandable={expandable}\n          data-resizing={state.dragging}\n          ref={elementRef}\n          className={\n            styleProps(\n              [\n                styles.root,\n                mode === 'float' ? floatStyles[placement] : styles.fixed,\n                draggablePanelMarker,\n              ],\n              clsx(prefix, className),\n            ).className\n          }\n          style={\n            {\n              '--draggable-panel-bg': backgroundColor || '',\n              'flexDirection': axis.vertical ? 'column' : 'row',\n              ...style,\n            } as CSSProperties\n          }\n          {...rest}\n        >\n          {children}\n        </aside>\n      </DraggablePanelContext>\n    );\n  },\n);\n\nDraggablePanelRoot.displayName = 'DraggablePanelRoot';\n\nexport interface DraggablePanelContentProps extends Omit<DivProps, 'onDrag'> {}\n\nexport const DraggablePanelContent = memo<DraggablePanelContentProps>(\n  ({ children, className, style, ...rest }) => {\n    const Motion = useMotionComponent();\n    const { axis, controller, expand, placement, state } = useDraggablePanelContext();\n    const extent = useTransform(controller.motion.size, (value) => Math.max(0, value));\n    // Subscribed, not read: a collapse that changes only the target would otherwise\n    // leave the content unclipped and painted outside the zero-width box.\n    const target = useStore(controller.subscribe, () => controller.target);\n    const clipping = state.dragging || state.folding || target === 0;\n    const shrunk = state.collapsing || !expand;\n\n    return (\n      <Motion.div\n        inert={!expand}\n        style={\n          {\n            display: 'flex',\n            flexDirection: axis.vertical ? 'column' : 'row',\n            flexShrink: 0,\n            justifyContent: axis.anchorEnd ? 'flex-end' : 'flex-start',\n            overflow: clipping ? 'clip' : 'visible',\n            [axis.cross]: '100%',\n            [axis.extent]: extent,\n          } as MotionStyle\n        }\n      >\n        <Motion.div\n          animate={{ scale: shrunk ? COLLAPSED_SCALE : 1 }}\n          className={styleProps(styles.content, clsx(`${prefix}-content`, className)).className}\n          transition={timing()}\n          style={\n            {\n              transformOrigin: ORIGIN_MAP[placement],\n              [axis.cross]: '100%',\n              [axis.extent]: controller.motion.content,\n              ...style,\n            } as MotionStyle\n          }\n          {...(rest as HTMLMotionProps<'div'>)}\n        >\n          {children}\n        </Motion.div>\n      </Motion.div>\n    );\n  },\n);\n\nDraggablePanelContent.displayName = 'DraggablePanelContent';\n\nexport interface DraggablePanelHandleProps extends Omit<DivProps, 'onDrag'> {\n  wideArea?: boolean;\n}\n\nexport const DraggablePanelHandle = memo<DraggablePanelHandleProps>(\n  ({ className, style, wideArea = true, ...rest }) => {\n    const { axis, controller, expand, showBorder, state } = useDraggablePanelContext();\n    const size = useStore(coarsePointer.subscribe, () => getHandleSize(wideArea));\n    const target = useStore(controller.subscribe, () => controller.target);\n    useEffect(() => () => controller.drag.cancel(), [controller]);\n\n    const pressedRef = useRef<{ x: number; y: number } | null>(null);\n    const draggingRef = useRef(false);\n    const draggedRef = useRef(false);\n    const { max, min } = controller.bounds();\n\n    if (!expand) return null;\n\n    return (\n      <div\n        aria-orientation={axis.ariaOrientation}\n        aria-valuemax={Number.isFinite(max) ? max : undefined}\n        aria-valuemin={min}\n        aria-valuenow={target}\n        aria-valuetext={`${target} pixels`}\n        data-border={showBorder}\n        data-resizing={state.dragging || undefined}\n        role=\"separator\"\n        tabIndex={0}\n        className={\n          styleProps(\n            [styles.handle, axis.vertical ? styles.handleHorizontal : styles.handleVertical],\n            clsx(`${prefix}-handle`, className),\n          ).className\n        }\n        style={\n          {\n            '--draggable-panel-handle-size': `${size}px`,\n            [EDGE_INSET[axis.edge]]: -size / 2,\n            ...style,\n          } as CSSProperties\n        }\n        onKeyDown={(event) => controller.resizeByKey(event)}\n        onDoubleClick={() => {\n          if (!draggedRef.current) controller.reset();\n        }}\n        // Capture can be stolen mid-drag (another setPointerCapture, an OOPIF under the\n        // cursor) and the pointerup then never reaches us; the pointer is wherever the\n        // user last dragged it, so commit rather than snap back.\n        onLostPointerCapture={() => {\n          if (draggingRef.current) controller.drag.end();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerCancel={() => {\n          controller.drag.cancel();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        onPointerDown={(event) => {\n          draggedRef.current = false;\n          pressedRef.current = { x: event.clientX, y: event.clientY };\n          // A synthetic pointerdown carries no active pointer, and capturing throws.\n          try {\n            event.currentTarget.setPointerCapture(event.pointerId);\n          } catch {\n            /* empty */\n          }\n        }}\n        onPointerMove={(event) => {\n          if (!pressedRef.current) return;\n          const offset = {\n            x: event.clientX - pressedRef.current.x,\n            y: event.clientY - pressedRef.current.y,\n          };\n          if (!draggingRef.current) {\n            if (Math.hypot(offset.x, offset.y) < PAN_THRESHOLD) return;\n            draggingRef.current = true;\n            draggedRef.current = true;\n            controller.drag.start();\n          }\n          controller.drag.move(offset);\n        }}\n        onPointerUp={() => {\n          if (draggingRef.current) controller.drag.end();\n          pressedRef.current = null;\n          draggingRef.current = false;\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nDraggablePanelHandle.displayName = 'DraggablePanelHandle';\n\nexport interface DraggablePanelToggleProps extends Omit<DivProps, 'onDrag'> {\n  showHandleWhenCollapsed?: boolean;\n}\n\nexport const DraggablePanelToggle = memo<DraggablePanelToggleProps>(\n  ({ className, showHandleWhenCollapsed, style, ...rest }) => {\n    const { axis, expand, expandable, placement, showBorder, toggleExpand } =\n      useDraggablePanelContext();\n    const gradientId = `seam-arrow-${useId().replaceAll(/[^\\w-]/g, '')}`;\n\n    if (!expandable) return null;\n\n    const bend = bendSign(placement, expand);\n    const edgeOpacity = expand && showBorder ? 1 : 0;\n\n    return (\n      <div\n        style={{ opacity: expand ? undefined : showHandleWhenCollapsed ? 1 : 0, ...style }}\n        className={\n          styleProps(\n            [styles.toggleRoot, toggleStyles[placement]],\n            clsx(`${prefix}-toggle`, togglePlacementClass[placement], className),\n          ).className\n        }\n        {...rest}\n      >\n        <button\n          aria-label={expand ? 'Collapse panel' : 'Expand panel'}\n          type=\"button\"\n          onClick={toggleExpand}\n          {...stylex.props(\n            styles.toggleButton,\n            axis.vertical && styles.toggleButtonHorizontal,\n            draggablePanelToggleMarker,\n          )}\n        >\n          <svg\n            {...stylex.props(styles.toggleSvg)}\n            fill=\"none\"\n            height={ARROW_BOX}\n            style={{ '--seam-bend': bend } as CSSProperties}\n            viewBox={`0 0 ${ARROW_BOX} ${ARROW_BOX}`}\n            width={ARROW_BOX}\n          >\n            <defs>\n              <linearGradient\n                gradientUnits=\"userSpaceOnUse\"\n                id={gradientId}\n                x1={ARROW_C}\n                x2={ARROW_C}\n                y1={0}\n                y2={ARROW_BOX}\n              >\n                <stop\n                  data-end=\"\"\n                  offset={0}\n                  stopOpacity={edgeOpacity}\n                  {...stylex.props(styles.toggleStopEnd)}\n                />\n                <stop data-tip=\"\" offset={0.3} {...stylex.props(styles.toggleStopTip)} />\n                <stop data-tip=\"\" offset={0.7} {...stylex.props(styles.toggleStopTip)} />\n                <stop\n                  data-end=\"\"\n                  offset={1}\n                  stopOpacity={edgeOpacity}\n                  {...stylex.props(styles.toggleStopEnd)}\n                />\n              </linearGradient>\n            </defs>\n            <g transform={axis.vertical ? `rotate(90 ${ARROW_C} ${ARROW_C})` : undefined}>\n              <path\n                {...stylex.props(styles.togglePath)}\n                d={ARROW_PATH}\n                stroke={`url(#${gradientId})`}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={SEAM_ARROW.stroke}\n              />\n            </g>\n          </svg>\n        </button>\n      </div>\n    );\n  },\n);\n\nDraggablePanelToggle.displayName = 'DraggablePanelToggle';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nexport const DraggablePanelContainer = memo<DraggablePanelContainerProps>(\n  ({ className, ...rest }) => (\n    <div className={styleProps(styles.container, className).className} {...rest} />\n  ),\n);\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nexport const DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, style, ...rest }) => (\n  <div {...styleProps(styles.body, className, { flex: 1, ...style })} {...rest} />\n));\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport type DraggablePanelFooterProps = DivProps;\n\nexport const DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => (\n  <div className={styleProps(styles.footer, className).className} {...rest} />\n));\n\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children' | 'title'> {\n  extra?: ReactNode;\n  onCollapse?: () => void;\n  title?: ReactNode;\n}\n\nexport const DraggablePanelHeader = memo<DraggablePanelHeaderProps>(\n  ({ className, extra, onCollapse, title, ...rest }) => {\n    const { toggleExpand } = useDraggablePanelContext();\n\n    return (\n      <div className={styleProps(styles.header, className).className} {...rest}>\n        <ActionIcon icon={ChevronLeft} size={'small'} onClick={onCollapse ?? toggleExpand} />\n        {title}\n        {extra}\n      </div>\n    );\n  },\n);\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n"],"mappings":"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"}

package/es/DraggableSideNav/DraggableSideNav.mjs

@@ -3,14 +3,14 @@ import { styleProps } from "../styles/stylex/props.mjs";
 import Icon from "../Icon/Icon.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Center from "../Flex/Center.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
+import { useHover } from "../hooks/useHover.mjs";
 import { styles } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import useControlledState from "use-merge-value";
-import { useHover } from "ahooks";
 import { Resizable } from "re-resizable";
 //#region src/DraggableSideNav/DraggableSideNav.tsx
 const DEFAULT_MIN_WIDTH = 64;

package/es/DraggableSideNav/DraggableSideNav.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableSideNav.mjs","names":["Flexbox"],"sources":["../../src/DraggableSideNav/DraggableSideNav.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useHover } from 'ahooks';\nimport clsx from 'clsx';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { Resizable, type ResizeCallback } from 're-resizable';\nimport {\n  type CSSProperties,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { DraggableSideNavProps } from './type';\n\nconst DEFAULT_MIN_WIDTH = 64; // 最小宽度即折叠宽度\nconst DEFAULT_EXPAND = true;\nconst DEFAULT_EXPANDED_WIDTH = 280;\nconst ANIMATION_DURATION = 300;\nconst COLLAPSE_ANIMATION_DELAY = 200;\n\n// Pre-define static objects to avoid recreating\nconst RESIZE_DISABLED = {\n  bottom: false,\n  bottomLeft: false,\n  bottomRight: false,\n  left: false,\n  right: false,\n  top: false,\n  topLeft: false,\n  topRight: false,\n};\n\n// State reducer for better state management\ninterface SideNavState {\n  expandedWidth: number;\n  internalWidth: number;\n  isAnimating: boolean;\n  isResizing: boolean;\n  renderExpand: boolean;\n}\n\ntype SideNavAction =\n  | { type: 'START_RESIZE' }\n  | { type: 'STOP_RESIZE' }\n  | { type: 'START_ANIMATION' }\n  | { type: 'STOP_ANIMATION' }\n  | { payload: number; type: 'SET_WIDTH' }\n  | { payload: number; type: 'SET_EXPANDED_WIDTH' }\n  | { payload: boolean; type: 'SET_RENDER_EXPAND' }\n  | { payload: number; type: 'ANIMATE_EXPAND' }\n  | { payload: number; type: 'ANIMATE_COLLAPSE' };\n\nfunction sideNavReducer(state: SideNavState, action: SideNavAction): SideNavState {\n  switch (action.type) {\n    case 'START_RESIZE': {\n      return { ...state, isResizing: true };\n    }\n    case 'STOP_RESIZE': {\n      return { ...state, isResizing: false };\n    }\n    case 'START_ANIMATION': {\n      return { ...state, isAnimating: true };\n    }\n    case 'STOP_ANIMATION': {\n      return { ...state, isAnimating: false };\n    }\n    case 'SET_WIDTH': {\n      return { ...state, internalWidth: action.payload };\n    }\n    case 'SET_EXPANDED_WIDTH': {\n      return { ...state, expandedWidth: action.payload };\n    }\n    case 'SET_RENDER_EXPAND': {\n      return { ...state, renderExpand: action.payload };\n    }\n    case 'ANIMATE_EXPAND': {\n      return { ...state, internalWidth: action.payload, renderExpand: true };\n    }\n    case 'ANIMATE_COLLAPSE': {\n      return { ...state, internalWidth: action.payload };\n    }\n    default: {\n      return state;\n    }\n  }\n}\n\nconst DraggableSideNav = memo<DraggableSideNavProps>(\n  ({\n    body,\n    className,\n    classNames,\n    defaultExpand = DEFAULT_EXPAND,\n    defaultWidth,\n    expand,\n    expandable = true,\n    footer,\n    header,\n    maxWidth,\n    minWidth = DEFAULT_MIN_WIDTH,\n    onExpandChange,\n    onWidthChange,\n    onWidthDragging,\n    placement = 'left',\n    resizable = true,\n    showBorder = true,\n    showHandle = true,\n    showHandleWhenCollapsed = false,\n    showHandleHighlight = false,\n    backgroundColor,\n    styles: customStyles,\n    width,\n    ...rest\n  }) => {\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--draggable-side-nav-bg': backgroundColor || '',\n      }),\n      [backgroundColor],\n    );\n    const ref = useRef<HTMLDivElement>(null);\n    const isHovering = useHover(ref);\n\n    // Expand state management\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n\n    // Use refs for animation timeouts to avoid memory leaks\n    const animationTimeoutRef = useRef<any>(undefined);\n    const collapseTimeoutRef = useRef<any>(undefined);\n\n    // Compute default expanded width - memoize to avoid recalculation\n    const computedDefaultExpandedWidth = useMemo(\n      () => defaultWidth || DEFAULT_EXPANDED_WIDTH,\n      [defaultWidth],\n    );\n\n    // Initialize state with useReducer for better performance\n    const initialState: SideNavState = {\n      expandedWidth: width ?? computedDefaultExpandedWidth,\n      internalWidth: isExpand ? (width ?? computedDefaultExpandedWidth) : minWidth,\n      isAnimating: false,\n      isResizing: false,\n      renderExpand: isExpand,\n    };\n\n    const [state, dispatch] = useReducer(sideNavReducer, initialState);\n\n    // 计算折叠阈值：展开最小宽度和折叠宽度的中间值\n    const collapseThreshold = useMemo(() => {\n      return minWidth + (state.expandedWidth - minWidth) / 3;\n    }, [minWidth, state.expandedWidth]);\n\n    // Toggle expand state with smooth animation\n    const toggleExpand = useCallback(() => {\n      if (!expandable) return;\n\n      // 在动画或拖拽期间阻止新的切换操作，避免状态混乱\n      if (state.isAnimating || state.isResizing) return;\n\n      // 清除之前的动画\n      if (animationTimeoutRef.current) {\n        clearTimeout(animationTimeoutRef.current);\n      }\n\n      // 立即设置动画状态，避免其他 useEffect 干扰\n      dispatch({ type: 'START_ANIMATION' });\n      setIsExpand(!isExpand);\n\n      // 动画完成后重置状态 - 与宽度动画时长一致\n      animationTimeoutRef.current = setTimeout(() => {\n        dispatch({ type: 'STOP_ANIMATION' });\n      }, ANIMATION_DURATION);\n    }, [expandable, isExpand, setIsExpand, state.isAnimating, state.isResizing]);\n\n    // 用于跟踪上一次的 expand 状态，以检测外部变化\n    const prevExpandRef = useRef(isExpand);\n\n    // 监听外部 expand prop 变化，触发动画\n    useEffect(() => {\n      // 检测到 expand 状态变化，且不在拖拽和动画中\n      if (prevExpandRef.current !== isExpand && !state.isResizing && !state.isAnimating) {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 立即设置动画状态，避免其他 useEffect 干扰\n        dispatch({ type: 'START_ANIMATION' });\n\n        animationTimeoutRef.current = setTimeout(() => {\n          dispatch({ type: 'STOP_ANIMATION' });\n        }, ANIMATION_DURATION);\n\n        prevExpandRef.current = isExpand;\n      }\n    }, [isExpand, state.isResizing, state.isAnimating]);\n\n    // 处理展开/折叠状态变化时的宽度动画和内容切换时机\n    useEffect(() => {\n      if (state.isAnimating) {\n        // 使用 requestAnimationFrame 确保动画平滑\n        const rafId = requestAnimationFrame(() => {\n          if (isExpand) {\n            // 展开动画：立即切换内容（先切换内容，再开始宽度动画）\n            dispatch({ payload: state.expandedWidth, type: 'ANIMATE_EXPAND' });\n          } else {\n            // 折叠动画：延迟切换内容，在动画接近结束时才切换（300ms，略早于动画结束）\n            dispatch({ payload: minWidth, type: 'ANIMATE_COLLAPSE' });\n\n            if (collapseTimeoutRef.current) {\n              clearTimeout(collapseTimeoutRef.current);\n            }\n            collapseTimeoutRef.current = setTimeout(() => {\n              dispatch({ payload: false, type: 'SET_RENDER_EXPAND' });\n            }, COLLAPSE_ANIMATION_DELAY);\n          }\n        });\n\n        return () => {\n          cancelAnimationFrame(rafId);\n        };\n      }\n    }, [isExpand, state.isAnimating, minWidth, state.expandedWidth]);\n\n    // 同步非动画期间的 renderExpand 状态（如拖拽）\n    // 使用 ref 追踪上一次的 isResizing 状态，只在拖拽结束时同步\n    const prevIsResizingRef = useRef(state.isResizing);\n    useEffect(() => {\n      const wasResizing = prevIsResizingRef.current;\n      prevIsResizingRef.current = state.isResizing;\n\n      // 只在拖拽刚结束时同步 renderExpand，避免干扰正常的展开/折叠动画\n      if (wasResizing && !state.isResizing && !state.isAnimating) {\n        dispatch({ payload: isExpand, type: 'SET_RENDER_EXPAND' });\n      }\n    }, [isExpand, state.isAnimating, state.isResizing]);\n\n    // 处理外部 width prop 变化\n    // width 表示展开时的宽度，实际显示宽度根据 isExpand 状态决定\n    useEffect(() => {\n      if (width !== undefined && !state.isResizing && !state.isAnimating) {\n        // 更新展开宽度记录\n        dispatch({ payload: width, type: 'SET_EXPANDED_WIDTH' });\n        // 根据当前状态设置实际宽度\n        if (isExpand) {\n          dispatch({ payload: width, type: 'SET_WIDTH' });\n        }\n        // 如果是折叠状态，保持 minWidth，不改变 internalWidth\n      }\n    }, [width, state.isResizing, state.isAnimating, isExpand]);\n\n    // 计算当前的 body 内容 - 使用 renderExpand\n    const currentBody = useMemo(() => {\n      return body(state.renderExpand);\n    }, [body, state.renderExpand]);\n\n    // 计算当前的 header（支持函数和静态值）- 使用 renderExpand\n    const currentHeader = useMemo(() => {\n      return typeof header === 'function' ? header(state.renderExpand) : header;\n    }, [header, state.renderExpand]);\n\n    // 计算当前的 footer（支持函数和静态值）- 使用 renderExpand\n    const currentFooter = useMemo(() => {\n      return typeof footer === 'function' ? footer(state.renderExpand) : footer;\n    }, [footer, state.renderExpand]);\n\n    // Handle resize - memoize to prevent recreating on every render\n    const handleResize: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        const currentWidth = ref.offsetWidth;\n        dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n\n        onWidthDragging?.(delta, currentWidth);\n      },\n      [onWidthDragging],\n    );\n\n    const handleResizeStart = useCallback(() => {\n      dispatch({ type: 'START_RESIZE' });\n    }, []);\n\n    const handleResizeStop: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        dispatch({ type: 'STOP_RESIZE' });\n\n        const currentWidth = ref.offsetWidth;\n\n        // 清除之前的动画\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 根据拖拽后的宽度决定是折叠还是展开\n        if (expandable) {\n          const shouldCollapse = currentWidth <= minWidth || currentWidth < collapseThreshold;\n          const shouldExpand =\n            !isExpand && currentWidth > minWidth && currentWidth >= collapseThreshold;\n\n          if (shouldCollapse || shouldExpand) {\n            // 立即设置动画状态\n            dispatch({ type: 'START_ANIMATION' });\n\n            if (shouldCollapse) {\n              setIsExpand(false);\n              dispatch({ payload: minWidth, type: 'SET_WIDTH' });\n            } else {\n              setIsExpand(true);\n              dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n              dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n            }\n\n            animationTimeoutRef.current = setTimeout(() => {\n              dispatch({ type: 'STOP_ANIMATION' });\n            }, ANIMATION_DURATION);\n          } else if (isExpand) {\n            // 展开状态下正常拖拽，记住宽度\n            dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n            dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n          }\n        } else {\n          // 如果不可折叠，仅更新宽度\n          dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n          dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n        }\n\n        onWidthChange?.(delta, currentWidth);\n      },\n      [expandable, minWidth, collapseThreshold, isExpand, onWidthChange, setIsExpand],\n    );\n\n    // Arrow icon based on placement and expand state\n    const ArrowIcon = useMemo(() => {\n      if (placement === 'left') {\n        // 左侧：展开时箭头向左（折叠方向），折叠时箭头向右（展开方向）\n        return ChevronLeft;\n      }\n      // 右侧：展开时箭头向右（折叠方向），折叠时箭头向左（展开方向）\n      return ChevronRight;\n    }, [placement]);\n\n    // Memoize handle styles to prevent recreation\n    const handleRootStyle = useMemo<CSSProperties>(\n      () => ({\n        display: 'flex',\n        opacity: !isExpand && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,\n        transition: 'opacity 0.25s ease',\n      }),\n      [isExpand, showHandleWhenCollapsed, isHovering],\n    );\n\n    const handleCenterStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.handle,\n        cursor: 'pointer',\n      }),\n      [customStyles?.handle],\n    );\n\n    const handleIconWrapperStyle = useMemo<CSSProperties>(\n      () => ({\n        marginLeft: placement === 'right' ? 4 : 0,\n        marginRight: placement === 'left' ? 4 : 0,\n        transform: isExpand ? 'rotate(0deg)' : 'rotate(180deg)',\n        transition: `transform ${COLLAPSE_ANIMATION_DELAY} ease`,\n      }),\n      [placement, isExpand],\n    );\n\n    // Toggle handle with smooth transitions\n    const handle = useMemo(\n      () =>\n        showHandle &&\n        expandable && (\n          <div\n            {...stylex.props(\n              styles.toggleRoot,\n              placement === 'left' ? styles.toggleLeft : styles.toggleRight,\n            )}\n            style={handleRootStyle}\n          >\n            <Center\n              {...styleProps(\n                [styles.handle, placement === 'left' ? styles.handleLeft : styles.handleRight],\n                classNames?.handle,\n                handleCenterStyle,\n              )}\n              onClick={toggleExpand}\n            >\n              <div style={handleIconWrapperStyle}>\n                <Icon\n                  className={stylex.props(styles.handlerIcon).className}\n                  icon={ArrowIcon}\n                  size={16}\n                />\n              </div>\n            </Center>\n          </div>\n        ),\n      [\n        showHandle,\n        expandable,\n        placement,\n        handleRootStyle,\n        classNames?.handle,\n        toggleExpand,\n        handleCenterStyle,\n        handleIconWrapperStyle,\n        ArrowIcon,\n      ],\n    );\n\n    // Size configuration - 使用内部宽度状态\n    const sizeConfig = useMemo(() => {\n      return {\n        maxWidth,\n        minWidth,\n        size: { height: '100%', width: state.internalWidth },\n      };\n    }, [state.internalWidth, minWidth, maxWidth]);\n\n    // Resize enable configuration - 始终允许拖拽\n    const resizeEnable = useMemo(() => {\n      if (!resizable) {\n        return RESIZE_DISABLED;\n      }\n      return {\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: placement === 'right',\n        right: placement === 'left',\n        top: false,\n        topLeft: false,\n        topRight: false,\n      };\n    }, [resizable, placement]);\n\n    // Memoize handle classes to prevent recreation\n    const handleClasses = useMemo(\n      () => ({\n        [placement === 'left' ? 'right' : 'left']: stylex.props(\n          styles.resizeHandle,\n          showHandleHighlight && styles.resizeHandleHighlight,\n          placement === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight,\n        ).className,\n      }),\n      [placement, showHandleHighlight],\n    );\n\n    // Memoize container style to prevent recreation\n    const containerStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.container,\n        ...rest.style,\n        // 拖拽时不要动画，点击 handle 时有流畅的弹性动画\n        transition: state.isResizing\n          ? 'none'\n          : state.isAnimating\n            ? `width ${ANIMATION_DURATION}ms cubic-bezier(0.22, 1, 0.36, 1)`\n            : 'none',\n      }),\n      [customStyles?.container, rest.style, state.isResizing, state.isAnimating],\n    );\n\n    // Memoize class names\n    const containerClassName = styleProps(\n      styles.container,\n      clsx(classNames?.container, className),\n    ).className;\n\n    const contentClassName = styleProps(\n      [styles.contentContainer, !showBorder && styles.contentContainerNoBorder],\n      classNames?.content,\n    ).className;\n\n    const headerClassName = styleProps(styles.header, classNames?.header).className;\n\n    const bodyClassName = styleProps(\n      styles.body,\n      clsx('lobe-draggable-side-nav-body', classNames?.body),\n    ).className;\n\n    const footerClassName = styleProps(styles.footer, classNames?.footer).className;\n\n    // Cleanup timeouts on unmount\n    useEffect(() => {\n      return () => {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n        if (collapseTimeoutRef.current) {\n          clearTimeout(collapseTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    return (\n      <aside ref={ref}>\n        <Resizable\n          {...sizeConfig}\n          className={containerClassName}\n          enable={resizeEnable}\n          handleClasses={handleClasses}\n          style={containerStyle}\n          onResize={handleResize}\n          onResizeStart={handleResizeStart}\n          onResizeStop={handleResizeStop}\n        >\n          {handle}\n          <Flexbox\n            className={contentClassName}\n            style={{\n              ...cssVariables,\n              ...customStyles?.content,\n            }}\n          >\n            {currentHeader && (\n              <div className={headerClassName} style={customStyles?.header}>\n                {currentHeader}\n              </div>\n            )}\n            <div className={bodyClassName} style={customStyles?.body}>\n              {currentBody}\n            </div>\n            {currentFooter && (\n              <div className={footerClassName} style={customStyles?.footer}>\n                {currentFooter}\n              </div>\n            )}\n          </Flexbox>\n        </Resizable>\n      </aside>\n    );\n  },\n);\n\nDraggableSideNav.displayName = 'DraggableSideNav';\n\nexport default DraggableSideNav;\n"],"mappings":"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"}
+{"version":3,"file":"DraggableSideNav.mjs","names":["Flexbox"],"sources":["../../src/DraggableSideNav/DraggableSideNav.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { Resizable, type ResizeCallback } from 're-resizable';\nimport {\n  type CSSProperties,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from 'react';\n\nimport { Center, Flexbox } from '@/Flex';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useHover } from '@/hooks/useHover';\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { DraggableSideNavProps } from './type';\n\nconst DEFAULT_MIN_WIDTH = 64; // 最小宽度即折叠宽度\nconst DEFAULT_EXPAND = true;\nconst DEFAULT_EXPANDED_WIDTH = 280;\nconst ANIMATION_DURATION = 300;\nconst COLLAPSE_ANIMATION_DELAY = 200;\n\n// Pre-define static objects to avoid recreating\nconst RESIZE_DISABLED = {\n  bottom: false,\n  bottomLeft: false,\n  bottomRight: false,\n  left: false,\n  right: false,\n  top: false,\n  topLeft: false,\n  topRight: false,\n};\n\n// State reducer for better state management\ninterface SideNavState {\n  expandedWidth: number;\n  internalWidth: number;\n  isAnimating: boolean;\n  isResizing: boolean;\n  renderExpand: boolean;\n}\n\ntype SideNavAction =\n  | { type: 'START_RESIZE' }\n  | { type: 'STOP_RESIZE' }\n  | { type: 'START_ANIMATION' }\n  | { type: 'STOP_ANIMATION' }\n  | { payload: number; type: 'SET_WIDTH' }\n  | { payload: number; type: 'SET_EXPANDED_WIDTH' }\n  | { payload: boolean; type: 'SET_RENDER_EXPAND' }\n  | { payload: number; type: 'ANIMATE_EXPAND' }\n  | { payload: number; type: 'ANIMATE_COLLAPSE' };\n\nfunction sideNavReducer(state: SideNavState, action: SideNavAction): SideNavState {\n  switch (action.type) {\n    case 'START_RESIZE': {\n      return { ...state, isResizing: true };\n    }\n    case 'STOP_RESIZE': {\n      return { ...state, isResizing: false };\n    }\n    case 'START_ANIMATION': {\n      return { ...state, isAnimating: true };\n    }\n    case 'STOP_ANIMATION': {\n      return { ...state, isAnimating: false };\n    }\n    case 'SET_WIDTH': {\n      return { ...state, internalWidth: action.payload };\n    }\n    case 'SET_EXPANDED_WIDTH': {\n      return { ...state, expandedWidth: action.payload };\n    }\n    case 'SET_RENDER_EXPAND': {\n      return { ...state, renderExpand: action.payload };\n    }\n    case 'ANIMATE_EXPAND': {\n      return { ...state, internalWidth: action.payload, renderExpand: true };\n    }\n    case 'ANIMATE_COLLAPSE': {\n      return { ...state, internalWidth: action.payload };\n    }\n    default: {\n      return state;\n    }\n  }\n}\n\nconst DraggableSideNav = memo<DraggableSideNavProps>(\n  ({\n    body,\n    className,\n    classNames,\n    defaultExpand = DEFAULT_EXPAND,\n    defaultWidth,\n    expand,\n    expandable = true,\n    footer,\n    header,\n    maxWidth,\n    minWidth = DEFAULT_MIN_WIDTH,\n    onExpandChange,\n    onWidthChange,\n    onWidthDragging,\n    placement = 'left',\n    resizable = true,\n    showBorder = true,\n    showHandle = true,\n    showHandleWhenCollapsed = false,\n    showHandleHighlight = false,\n    backgroundColor,\n    styles: customStyles,\n    width,\n    ...rest\n  }) => {\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--draggable-side-nav-bg': backgroundColor || '',\n      }),\n      [backgroundColor],\n    );\n    const ref = useRef<HTMLDivElement>(null);\n    const isHovering = useHover(ref);\n\n    // Expand state management\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n\n    // Use refs for animation timeouts to avoid memory leaks\n    const animationTimeoutRef = useRef<any>(undefined);\n    const collapseTimeoutRef = useRef<any>(undefined);\n\n    // Compute default expanded width - memoize to avoid recalculation\n    const computedDefaultExpandedWidth = useMemo(\n      () => defaultWidth || DEFAULT_EXPANDED_WIDTH,\n      [defaultWidth],\n    );\n\n    // Initialize state with useReducer for better performance\n    const initialState: SideNavState = {\n      expandedWidth: width ?? computedDefaultExpandedWidth,\n      internalWidth: isExpand ? (width ?? computedDefaultExpandedWidth) : minWidth,\n      isAnimating: false,\n      isResizing: false,\n      renderExpand: isExpand,\n    };\n\n    const [state, dispatch] = useReducer(sideNavReducer, initialState);\n\n    // 计算折叠阈值：展开最小宽度和折叠宽度的中间值\n    const collapseThreshold = useMemo(() => {\n      return minWidth + (state.expandedWidth - minWidth) / 3;\n    }, [minWidth, state.expandedWidth]);\n\n    // Toggle expand state with smooth animation\n    const toggleExpand = useCallback(() => {\n      if (!expandable) return;\n\n      // 在动画或拖拽期间阻止新的切换操作，避免状态混乱\n      if (state.isAnimating || state.isResizing) return;\n\n      // 清除之前的动画\n      if (animationTimeoutRef.current) {\n        clearTimeout(animationTimeoutRef.current);\n      }\n\n      // 立即设置动画状态，避免其他 useEffect 干扰\n      dispatch({ type: 'START_ANIMATION' });\n      setIsExpand(!isExpand);\n\n      // 动画完成后重置状态 - 与宽度动画时长一致\n      animationTimeoutRef.current = setTimeout(() => {\n        dispatch({ type: 'STOP_ANIMATION' });\n      }, ANIMATION_DURATION);\n    }, [expandable, isExpand, setIsExpand, state.isAnimating, state.isResizing]);\n\n    // 用于跟踪上一次的 expand 状态，以检测外部变化\n    const prevExpandRef = useRef(isExpand);\n\n    // 监听外部 expand prop 变化，触发动画\n    useEffect(() => {\n      // 检测到 expand 状态变化，且不在拖拽和动画中\n      if (prevExpandRef.current !== isExpand && !state.isResizing && !state.isAnimating) {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 立即设置动画状态，避免其他 useEffect 干扰\n        dispatch({ type: 'START_ANIMATION' });\n\n        animationTimeoutRef.current = setTimeout(() => {\n          dispatch({ type: 'STOP_ANIMATION' });\n        }, ANIMATION_DURATION);\n\n        prevExpandRef.current = isExpand;\n      }\n    }, [isExpand, state.isResizing, state.isAnimating]);\n\n    // 处理展开/折叠状态变化时的宽度动画和内容切换时机\n    useEffect(() => {\n      if (state.isAnimating) {\n        // 使用 requestAnimationFrame 确保动画平滑\n        const rafId = requestAnimationFrame(() => {\n          if (isExpand) {\n            // 展开动画：立即切换内容（先切换内容，再开始宽度动画）\n            dispatch({ payload: state.expandedWidth, type: 'ANIMATE_EXPAND' });\n          } else {\n            // 折叠动画：延迟切换内容，在动画接近结束时才切换（300ms，略早于动画结束）\n            dispatch({ payload: minWidth, type: 'ANIMATE_COLLAPSE' });\n\n            if (collapseTimeoutRef.current) {\n              clearTimeout(collapseTimeoutRef.current);\n            }\n            collapseTimeoutRef.current = setTimeout(() => {\n              dispatch({ payload: false, type: 'SET_RENDER_EXPAND' });\n            }, COLLAPSE_ANIMATION_DELAY);\n          }\n        });\n\n        return () => {\n          cancelAnimationFrame(rafId);\n        };\n      }\n    }, [isExpand, state.isAnimating, minWidth, state.expandedWidth]);\n\n    // 同步非动画期间的 renderExpand 状态（如拖拽）\n    // 使用 ref 追踪上一次的 isResizing 状态，只在拖拽结束时同步\n    const prevIsResizingRef = useRef(state.isResizing);\n    useEffect(() => {\n      const wasResizing = prevIsResizingRef.current;\n      prevIsResizingRef.current = state.isResizing;\n\n      // 只在拖拽刚结束时同步 renderExpand，避免干扰正常的展开/折叠动画\n      if (wasResizing && !state.isResizing && !state.isAnimating) {\n        dispatch({ payload: isExpand, type: 'SET_RENDER_EXPAND' });\n      }\n    }, [isExpand, state.isAnimating, state.isResizing]);\n\n    // 处理外部 width prop 变化\n    // width 表示展开时的宽度，实际显示宽度根据 isExpand 状态决定\n    useEffect(() => {\n      if (width !== undefined && !state.isResizing && !state.isAnimating) {\n        // 更新展开宽度记录\n        dispatch({ payload: width, type: 'SET_EXPANDED_WIDTH' });\n        // 根据当前状态设置实际宽度\n        if (isExpand) {\n          dispatch({ payload: width, type: 'SET_WIDTH' });\n        }\n        // 如果是折叠状态，保持 minWidth，不改变 internalWidth\n      }\n    }, [width, state.isResizing, state.isAnimating, isExpand]);\n\n    // 计算当前的 body 内容 - 使用 renderExpand\n    const currentBody = useMemo(() => {\n      return body(state.renderExpand);\n    }, [body, state.renderExpand]);\n\n    // 计算当前的 header（支持函数和静态值）- 使用 renderExpand\n    const currentHeader = useMemo(() => {\n      return typeof header === 'function' ? header(state.renderExpand) : header;\n    }, [header, state.renderExpand]);\n\n    // 计算当前的 footer（支持函数和静态值）- 使用 renderExpand\n    const currentFooter = useMemo(() => {\n      return typeof footer === 'function' ? footer(state.renderExpand) : footer;\n    }, [footer, state.renderExpand]);\n\n    // Handle resize - memoize to prevent recreating on every render\n    const handleResize: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        const currentWidth = ref.offsetWidth;\n        dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n\n        onWidthDragging?.(delta, currentWidth);\n      },\n      [onWidthDragging],\n    );\n\n    const handleResizeStart = useCallback(() => {\n      dispatch({ type: 'START_RESIZE' });\n    }, []);\n\n    const handleResizeStop: ResizeCallback = useCallback(\n      (_, __, ref, delta) => {\n        dispatch({ type: 'STOP_RESIZE' });\n\n        const currentWidth = ref.offsetWidth;\n\n        // 清除之前的动画\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n\n        // 根据拖拽后的宽度决定是折叠还是展开\n        if (expandable) {\n          const shouldCollapse = currentWidth <= minWidth || currentWidth < collapseThreshold;\n          const shouldExpand =\n            !isExpand && currentWidth > minWidth && currentWidth >= collapseThreshold;\n\n          if (shouldCollapse || shouldExpand) {\n            // 立即设置动画状态\n            dispatch({ type: 'START_ANIMATION' });\n\n            if (shouldCollapse) {\n              setIsExpand(false);\n              dispatch({ payload: minWidth, type: 'SET_WIDTH' });\n            } else {\n              setIsExpand(true);\n              dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n              dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n            }\n\n            animationTimeoutRef.current = setTimeout(() => {\n              dispatch({ type: 'STOP_ANIMATION' });\n            }, ANIMATION_DURATION);\n          } else if (isExpand) {\n            // 展开状态下正常拖拽，记住宽度\n            dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n            dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n          }\n        } else {\n          // 如果不可折叠，仅更新宽度\n          dispatch({ payload: currentWidth, type: 'SET_EXPANDED_WIDTH' });\n          dispatch({ payload: currentWidth, type: 'SET_WIDTH' });\n        }\n\n        onWidthChange?.(delta, currentWidth);\n      },\n      [expandable, minWidth, collapseThreshold, isExpand, onWidthChange, setIsExpand],\n    );\n\n    // Arrow icon based on placement and expand state\n    const ArrowIcon = useMemo(() => {\n      if (placement === 'left') {\n        // 左侧：展开时箭头向左（折叠方向），折叠时箭头向右（展开方向）\n        return ChevronLeft;\n      }\n      // 右侧：展开时箭头向右（折叠方向），折叠时箭头向左（展开方向）\n      return ChevronRight;\n    }, [placement]);\n\n    // Memoize handle styles to prevent recreation\n    const handleRootStyle = useMemo<CSSProperties>(\n      () => ({\n        display: 'flex',\n        opacity: !isExpand && showHandleWhenCollapsed ? 1 : isHovering ? 1 : 0,\n        transition: 'opacity 0.25s ease',\n      }),\n      [isExpand, showHandleWhenCollapsed, isHovering],\n    );\n\n    const handleCenterStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.handle,\n        cursor: 'pointer',\n      }),\n      [customStyles?.handle],\n    );\n\n    const handleIconWrapperStyle = useMemo<CSSProperties>(\n      () => ({\n        marginLeft: placement === 'right' ? 4 : 0,\n        marginRight: placement === 'left' ? 4 : 0,\n        transform: isExpand ? 'rotate(0deg)' : 'rotate(180deg)',\n        transition: `transform ${COLLAPSE_ANIMATION_DELAY} ease`,\n      }),\n      [placement, isExpand],\n    );\n\n    // Toggle handle with smooth transitions\n    const handle = useMemo(\n      () =>\n        showHandle &&\n        expandable && (\n          <div\n            {...stylex.props(\n              styles.toggleRoot,\n              placement === 'left' ? styles.toggleLeft : styles.toggleRight,\n            )}\n            style={handleRootStyle}\n          >\n            <Center\n              {...styleProps(\n                [styles.handle, placement === 'left' ? styles.handleLeft : styles.handleRight],\n                classNames?.handle,\n                handleCenterStyle,\n              )}\n              onClick={toggleExpand}\n            >\n              <div style={handleIconWrapperStyle}>\n                <Icon\n                  className={stylex.props(styles.handlerIcon).className}\n                  icon={ArrowIcon}\n                  size={16}\n                />\n              </div>\n            </Center>\n          </div>\n        ),\n      [\n        showHandle,\n        expandable,\n        placement,\n        handleRootStyle,\n        classNames?.handle,\n        toggleExpand,\n        handleCenterStyle,\n        handleIconWrapperStyle,\n        ArrowIcon,\n      ],\n    );\n\n    // Size configuration - 使用内部宽度状态\n    const sizeConfig = useMemo(() => {\n      return {\n        maxWidth,\n        minWidth,\n        size: { height: '100%', width: state.internalWidth },\n      };\n    }, [state.internalWidth, minWidth, maxWidth]);\n\n    // Resize enable configuration - 始终允许拖拽\n    const resizeEnable = useMemo(() => {\n      if (!resizable) {\n        return RESIZE_DISABLED;\n      }\n      return {\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: placement === 'right',\n        right: placement === 'left',\n        top: false,\n        topLeft: false,\n        topRight: false,\n      };\n    }, [resizable, placement]);\n\n    // Memoize handle classes to prevent recreation\n    const handleClasses = useMemo(\n      () => ({\n        [placement === 'left' ? 'right' : 'left']: stylex.props(\n          styles.resizeHandle,\n          showHandleHighlight && styles.resizeHandleHighlight,\n          placement === 'left' ? styles.resizeHandleLeft : styles.resizeHandleRight,\n        ).className,\n      }),\n      [placement, showHandleHighlight],\n    );\n\n    // Memoize container style to prevent recreation\n    const containerStyle = useMemo<CSSProperties>(\n      () => ({\n        ...customStyles?.container,\n        ...rest.style,\n        // 拖拽时不要动画，点击 handle 时有流畅的弹性动画\n        transition: state.isResizing\n          ? 'none'\n          : state.isAnimating\n            ? `width ${ANIMATION_DURATION}ms cubic-bezier(0.22, 1, 0.36, 1)`\n            : 'none',\n      }),\n      [customStyles?.container, rest.style, state.isResizing, state.isAnimating],\n    );\n\n    // Memoize class names\n    const containerClassName = styleProps(\n      styles.container,\n      clsx(classNames?.container, className),\n    ).className;\n\n    const contentClassName = styleProps(\n      [styles.contentContainer, !showBorder && styles.contentContainerNoBorder],\n      classNames?.content,\n    ).className;\n\n    const headerClassName = styleProps(styles.header, classNames?.header).className;\n\n    const bodyClassName = styleProps(\n      styles.body,\n      clsx('lobe-draggable-side-nav-body', classNames?.body),\n    ).className;\n\n    const footerClassName = styleProps(styles.footer, classNames?.footer).className;\n\n    // Cleanup timeouts on unmount\n    useEffect(() => {\n      return () => {\n        if (animationTimeoutRef.current) {\n          clearTimeout(animationTimeoutRef.current);\n        }\n        if (collapseTimeoutRef.current) {\n          clearTimeout(collapseTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    return (\n      <aside ref={ref}>\n        <Resizable\n          {...sizeConfig}\n          className={containerClassName}\n          enable={resizeEnable}\n          handleClasses={handleClasses}\n          style={containerStyle}\n          onResize={handleResize}\n          onResizeStart={handleResizeStart}\n          onResizeStop={handleResizeStop}\n        >\n          {handle}\n          <Flexbox\n            className={contentClassName}\n            style={{\n              ...cssVariables,\n              ...customStyles?.content,\n            }}\n          >\n            {currentHeader && (\n              <div className={headerClassName} style={customStyles?.header}>\n                {currentHeader}\n              </div>\n            )}\n            <div className={bodyClassName} style={customStyles?.body}>\n              {currentBody}\n            </div>\n            {currentFooter && (\n              <div className={footerClassName} style={customStyles?.footer}>\n                {currentFooter}\n              </div>\n            )}\n          </Flexbox>\n        </Resizable>\n      </aside>\n    );\n  },\n);\n\nDraggableSideNav.displayName = 'DraggableSideNav';\n\nexport default DraggableSideNav;\n"],"mappings":"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"}