@lobehub/ui 6.0.0-beta.3 → 6.0.0-beta.5

package/es/Accordion/style.d.mts

@@ -2,10 +2,10 @@ import "@stylexjs/stylex";
 //#region src/Accordion/style.d.ts
 export declare const accordionStyles: {
   panel: string;
+  header: string;
   action: string;
   content: string;
   trigger: string;
-  header: string;
   root: string;
   indicator: string;
   item: string;

package/es/Anchor/Anchor.mjs

@@ -1,12 +1,12 @@
 "use client";
 import { styleProps } from "../styles/stylex/props.mjs";
+import { useMergeRefs } from "../utils/mergeRefs.mjs";
 import { useEventCallback } from "../hooks/useEventCallback.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { styles } from "./style.mjs";
 import { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
-import { useMergeRefs } from "react-merge-refs";
-import useControlledState from "use-merge-value";
 //#region src/Anchor/Anchor.tsx
 const SCROLL_LOCK_FALLBACK_MS = 1e3;
 const flatten = (items) => items.flatMap((item) => [item, ...flatten(item.children ?? [])]);

package/es/Anchor/Anchor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Anchor.mjs","names":[],"sources":["../../src/Anchor/Anchor.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n  type CSSProperties,\n  memo,\n  type MouseEvent,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\nimport useControlledState from 'use-merge-value';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { AnchorItem, AnchorProps } from './type';\n\ntype ScrollContainer = HTMLElement | Window;\n\nconst SCROLL_LOCK_FALLBACK_MS = 1000;\n\nconst flatten = (items: AnchorItem[]): AnchorItem[] =>\n  items.flatMap((item) => [item, ...flatten(item.children ?? [])]);\n\nconst getTarget = (href: string) => {\n  const hash = href.split('#')[1];\n  if (!hash) return null;\n  try {\n    return document.getElementById(decodeURIComponent(hash));\n  } catch {\n    return document.getElementById(hash);\n  }\n};\n\nconst isWindow = (container: ScrollContainer): container is Window => container === window;\n\nconst getRelativeTop = (element: HTMLElement, container: ScrollContainer) =>\n  element.getBoundingClientRect().top -\n  (isWindow(container) ? 0 : container.getBoundingClientRect().top);\n\nconst getScrollTop = (container: ScrollContainer) =>\n  isWindow(container) ? window.scrollY : container.scrollTop;\n\nconst getActiveKey = (\n  items: AnchorItem[],\n  container: ScrollContainer,\n  offset: number,\n): string | null => {\n  let activeKey: string | null = null;\n  let activeTop = -Infinity;\n  for (const item of flatten(items)) {\n    const target = getTarget(item.href);\n    if (!target) continue;\n    const top = getRelativeTop(target, container);\n    if (top <= offset + 1 && top >= activeTop) {\n      activeKey = item.key;\n      activeTop = top;\n    }\n  }\n  return activeKey;\n};\n\nconst Anchor = memo<AnchorProps>(\n  ({\n    activeKey,\n    className,\n    getContainer,\n    items,\n    offset = 0,\n    onChange,\n    onClick,\n    ref,\n    style,\n    ...rest\n  }) => {\n    const [mergedActiveKey, setMergedActiveKey] = useControlledState<string | null>(null, {\n      onChange,\n      value: activeKey,\n    });\n    const scrollLockRef = useRef(false);\n    const navRef = useRef<HTMLElement>(null);\n    const mergedRef = useMergeRefs([ref, navRef]);\n    const [marker, setMarker] = useState<CSSProperties>();\n    const lockTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n    const resolveContainer = useEventCallback((): ScrollContainer => getContainer?.() ?? window);\n    const setActive = useEventCallback(setMergedActiveKey);\n    const spy = useEventCallback(() => {\n      if (scrollLockRef.current) return;\n      setActive(getActiveKey(items, resolveContainer(), offset));\n    });\n\n    useEffect(() => {\n      const container = resolveContainer();\n      let frame = 0;\n      const handleScroll = () => {\n        cancelAnimationFrame(frame);\n        frame = requestAnimationFrame(spy);\n      };\n      spy();\n      container.addEventListener('scroll', handleScroll, { passive: true });\n      return () => {\n        cancelAnimationFrame(frame);\n        container.removeEventListener('scroll', handleScroll);\n      };\n    }, [items, offset, resolveContainer, spy]);\n\n    useEffect(() => () => clearTimeout(lockTimerRef.current), []);\n\n    useLayoutEffect(() => {\n      const nav = navRef.current;\n      if (!nav) return;\n      const place = () => {\n        const link = [...nav.querySelectorAll<HTMLElement>('a[data-key]')].find(\n          (element) => element.dataset.key === mergedActiveKey,\n        );\n        setMarker(\n          link ? { height: link.offsetHeight, insetBlockStart: link.offsetTop } : undefined,\n        );\n      };\n      place();\n      if (typeof ResizeObserver === 'undefined') return;\n      const observer = new ResizeObserver(place);\n      observer.observe(nav);\n      return () => observer.disconnect();\n    }, [items, mergedActiveKey]);\n\n    const handleClick = (event: MouseEvent<HTMLAnchorElement>, item: AnchorItem) => {\n      onClick?.(event, item);\n      if (event.defaultPrevented || event.button !== 0) return;\n      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;\n\n      const target = getTarget(item.href);\n      if (!target) return;\n      event.preventDefault();\n\n      const container = resolveContainer();\n      const top = getRelativeTop(target, container) + getScrollTop(container) - offset;\n      const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n\n      // Smooth scrolling may never bring a heading near the page end up to the offset line, so the\n      // clicked item is pinned as active until the scroll settles.\n      const release = () => {\n        scrollLockRef.current = false;\n      };\n      scrollLockRef.current = true;\n      setActive(item.key);\n      clearTimeout(lockTimerRef.current);\n      lockTimerRef.current = setTimeout(release, SCROLL_LOCK_FALLBACK_MS);\n      container.addEventListener('scrollend', release, { once: true });\n      container.scrollTo({ behavior: reduceMotion ? 'auto' : 'smooth', top });\n    };\n\n    const renderList = (list: AnchorItem[], nested: boolean) => (\n      <ul {...stylex.props(styles.list, nested && styles.listNested)}>\n        {list.map((item) => (\n          <li key={item.key}>\n            <a\n              aria-current={item.key === mergedActiveKey ? 'location' : undefined}\n              {...stylex.props(styles.link, nested && styles.linkNested)}\n              data-key={item.key}\n              href={item.href}\n              title={typeof item.title === 'string' ? item.title : undefined}\n              onClick={(event) => handleClick(event, item)}\n            >\n              {item.title}\n            </a>\n            {item.children && item.children.length > 0 && renderList(item.children, true)}\n          </li>\n        ))}\n      </ul>\n    );\n\n    return (\n      <nav ref={mergedRef} {...rest} {...styleProps(styles.root, className, style)}>\n        <span aria-hidden {...stylex.props(styles.marker)} hidden={!marker} style={marker} />\n        {renderList(items, false)}\n      </nav>\n    );\n  },\n);\n\nAnchor.displayName = 'Anchor';\n\nexport default Anchor;\n"],"mappings":"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"}
+{"version":3,"file":"Anchor.mjs","names":[],"sources":["../../src/Anchor/Anchor.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n  type CSSProperties,\n  memo,\n  type MouseEvent,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useMergeRefs } from '@/utils/mergeRefs';\n\nimport { styles } from './style';\nimport type { AnchorItem, AnchorProps } from './type';\n\ntype ScrollContainer = HTMLElement | Window;\n\nconst SCROLL_LOCK_FALLBACK_MS = 1000;\n\nconst flatten = (items: AnchorItem[]): AnchorItem[] =>\n  items.flatMap((item) => [item, ...flatten(item.children ?? [])]);\n\nconst getTarget = (href: string) => {\n  const hash = href.split('#')[1];\n  if (!hash) return null;\n  try {\n    return document.getElementById(decodeURIComponent(hash));\n  } catch {\n    return document.getElementById(hash);\n  }\n};\n\nconst isWindow = (container: ScrollContainer): container is Window => container === window;\n\nconst getRelativeTop = (element: HTMLElement, container: ScrollContainer) =>\n  element.getBoundingClientRect().top -\n  (isWindow(container) ? 0 : container.getBoundingClientRect().top);\n\nconst getScrollTop = (container: ScrollContainer) =>\n  isWindow(container) ? window.scrollY : container.scrollTop;\n\nconst getActiveKey = (\n  items: AnchorItem[],\n  container: ScrollContainer,\n  offset: number,\n): string | null => {\n  let activeKey: string | null = null;\n  let activeTop = -Infinity;\n  for (const item of flatten(items)) {\n    const target = getTarget(item.href);\n    if (!target) continue;\n    const top = getRelativeTop(target, container);\n    if (top <= offset + 1 && top >= activeTop) {\n      activeKey = item.key;\n      activeTop = top;\n    }\n  }\n  return activeKey;\n};\n\nconst Anchor = memo<AnchorProps>(\n  ({\n    activeKey,\n    className,\n    getContainer,\n    items,\n    offset = 0,\n    onChange,\n    onClick,\n    ref,\n    style,\n    ...rest\n  }) => {\n    const [mergedActiveKey, setMergedActiveKey] = useControlledState<string | null>(null, {\n      onChange,\n      value: activeKey,\n    });\n    const scrollLockRef = useRef(false);\n    const navRef = useRef<HTMLElement>(null);\n    const mergedRef = useMergeRefs([ref, navRef]);\n    const [marker, setMarker] = useState<CSSProperties>();\n    const lockTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n    const resolveContainer = useEventCallback((): ScrollContainer => getContainer?.() ?? window);\n    const setActive = useEventCallback(setMergedActiveKey);\n    const spy = useEventCallback(() => {\n      if (scrollLockRef.current) return;\n      setActive(getActiveKey(items, resolveContainer(), offset));\n    });\n\n    useEffect(() => {\n      const container = resolveContainer();\n      let frame = 0;\n      const handleScroll = () => {\n        cancelAnimationFrame(frame);\n        frame = requestAnimationFrame(spy);\n      };\n      spy();\n      container.addEventListener('scroll', handleScroll, { passive: true });\n      return () => {\n        cancelAnimationFrame(frame);\n        container.removeEventListener('scroll', handleScroll);\n      };\n    }, [items, offset, resolveContainer, spy]);\n\n    useEffect(() => () => clearTimeout(lockTimerRef.current), []);\n\n    useLayoutEffect(() => {\n      const nav = navRef.current;\n      if (!nav) return;\n      const place = () => {\n        const link = [...nav.querySelectorAll<HTMLElement>('a[data-key]')].find(\n          (element) => element.dataset.key === mergedActiveKey,\n        );\n        setMarker(\n          link ? { height: link.offsetHeight, insetBlockStart: link.offsetTop } : undefined,\n        );\n      };\n      place();\n      if (typeof ResizeObserver === 'undefined') return;\n      const observer = new ResizeObserver(place);\n      observer.observe(nav);\n      return () => observer.disconnect();\n    }, [items, mergedActiveKey]);\n\n    const handleClick = (event: MouseEvent<HTMLAnchorElement>, item: AnchorItem) => {\n      onClick?.(event, item);\n      if (event.defaultPrevented || event.button !== 0) return;\n      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;\n\n      const target = getTarget(item.href);\n      if (!target) return;\n      event.preventDefault();\n\n      const container = resolveContainer();\n      const top = getRelativeTop(target, container) + getScrollTop(container) - offset;\n      const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n\n      // Smooth scrolling may never bring a heading near the page end up to the offset line, so the\n      // clicked item is pinned as active until the scroll settles.\n      const release = () => {\n        scrollLockRef.current = false;\n      };\n      scrollLockRef.current = true;\n      setActive(item.key);\n      clearTimeout(lockTimerRef.current);\n      lockTimerRef.current = setTimeout(release, SCROLL_LOCK_FALLBACK_MS);\n      container.addEventListener('scrollend', release, { once: true });\n      container.scrollTo({ behavior: reduceMotion ? 'auto' : 'smooth', top });\n    };\n\n    const renderList = (list: AnchorItem[], nested: boolean) => (\n      <ul {...stylex.props(styles.list, nested && styles.listNested)}>\n        {list.map((item) => (\n          <li key={item.key}>\n            <a\n              aria-current={item.key === mergedActiveKey ? 'location' : undefined}\n              {...stylex.props(styles.link, nested && styles.linkNested)}\n              data-key={item.key}\n              href={item.href}\n              title={typeof item.title === 'string' ? item.title : undefined}\n              onClick={(event) => handleClick(event, item)}\n            >\n              {item.title}\n            </a>\n            {item.children && item.children.length > 0 && renderList(item.children, true)}\n          </li>\n        ))}\n      </ul>\n    );\n\n    return (\n      <nav ref={mergedRef} {...rest} {...styleProps(styles.root, className, style)}>\n        <span aria-hidden {...stylex.props(styles.marker)} hidden={!marker} style={marker} />\n        {renderList(items, false)}\n      </nav>\n    );\n  },\n);\n\nAnchor.displayName = 'Anchor';\n\nexport default Anchor;\n"],"mappings":"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"}

package/es/AutoComplete/style.d.mts

@@ -42,7 +42,7 @@ declare const styleArrays: {
   }> | Readonly<{
     readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
     readonly cursor: stylex.StyleXClassNameFor<"cursor", "default">;
-    readonly display: stylex.StyleXClassNameFor<"display", "flex" | "none">;
+    readonly display: stylex.StyleXClassNameFor<"display", "none" | "flex">;
   }>)[];
   item: Readonly<{
     readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;

package/es/Carousel/Carousel.mjs

@@ -2,12 +2,12 @@
 import { styleProps } from "../styles/stylex/props.mjs";
 import { ActionIconImpl } from "../ActionIcon/ActionIcon.mjs";
 import { useEventCallback } from "../hooks/useEventCallback.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { styles } from "./style.mjs";
 import { Children, createElement, isValidElement, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import useControlledState from "use-merge-value";
 //#region src/Carousel/Carousel.tsx
 const DEFAULT_INTERVAL = 5e3;
 const SWIPE_THRESHOLD = 40;

package/es/Carousel/Carousel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.mjs","names":["ActionIcon"],"sources":["../../src/Carousel/Carousel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  Children,\n  isValidElement,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { ActionIconImpl as ActionIcon } from '@/ActionIcon/ActionIcon';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { CarouselProps } from './type';\n\nconst DEFAULT_INTERVAL = 5000;\nconst SWIPE_THRESHOLD = 40;\nconst ARROW_SIZE = { blockSize: 28, borderRadius: '50%', size: 16 };\n\nconst Carousel = memo<CarouselProps>(\n  ({\n    adaptiveHeight = false,\n    arrows = false,\n    autoplay = false,\n    children,\n    className,\n    defaultIndex = 0,\n    dots = true,\n    index,\n    loop = true,\n    onIndexChange,\n    onPointerEnter,\n    onPointerLeave,\n    pauseOnHover = true,\n    ref,\n    ...rest\n  }) => {\n    const slides = Children.toArray(children);\n    const count = slides.length;\n    const keys = slides.map((slide, slideIndex) =>\n      isValidElement(slide) && slide.key !== null ? slide.key : slideIndex,\n    );\n    const [mergedIndex, setMergedIndex] = useControlledState(defaultIndex, {\n      onChange: onIndexChange,\n      value: index,\n    });\n    const current = Math.min(Math.max(mergedIndex, 0), Math.max(count - 1, 0));\n\n    const [hovered, setHovered] = useState(false);\n    const [height, setHeight] = useState<number>();\n    const slidesRef = useRef<(HTMLDivElement | null)[]>([]);\n    const swipeStartXRef = useRef<number | null>(null);\n\n    const goTo = useEventCallback((target: number) => {\n      if (count === 0) return;\n      const next = loop\n        ? ((target % count) + count) % count\n        : Math.min(Math.max(target, 0), count - 1);\n      if (next !== current) setMergedIndex(next);\n    });\n    const next = useEventCallback(() => goTo(current + 1));\n    const prev = useEventCallback(() => goTo(current - 1));\n\n    useImperativeHandle(ref, () => ({ goTo, next, prev }), [goTo, next, prev]);\n\n    const interval = autoplay === true ? DEFAULT_INTERVAL : autoplay || 0;\n    const paused = pauseOnHover && hovered;\n    const atEnd = !loop && current >= count - 1;\n\n    useEffect(() => {\n      if (!interval || paused || count < 2 || atEnd) return;\n      const timer = setTimeout(next, interval);\n      return () => clearTimeout(timer);\n    }, [interval, paused, count, atEnd, current, next]);\n\n    useLayoutEffect(() => {\n      const slide = slidesRef.current[current];\n      if (!adaptiveHeight || !slide) return;\n      setHeight(slide.offsetHeight);\n      if (typeof ResizeObserver === 'undefined') return;\n      const observer = new ResizeObserver(() => setHeight(slide.offsetHeight));\n      observer.observe(slide);\n      return () => observer.disconnect();\n    }, [adaptiveHeight, current, count]);\n\n    return (\n      <div\n        aria-roledescription=\"carousel\"\n        className={styleProps(styles.root, className).className}\n        role=\"region\"\n        onPointerEnter={(event) => {\n          onPointerEnter?.(event);\n          setHovered(true);\n        }}\n        onPointerLeave={(event) => {\n          onPointerLeave?.(event);\n          setHovered(false);\n        }}\n        {...rest}\n      >\n        <div\n          {...stylex.props(styles.viewport)}\n          style={adaptiveHeight && height !== undefined ? { height } : undefined}\n          onPointerCancel={() => {\n            swipeStartXRef.current = null;\n          }}\n          onPointerDown={(event) => {\n            if (event.pointerType !== 'mouse') swipeStartXRef.current = event.clientX;\n          }}\n          onPointerUp={(event) => {\n            if (swipeStartXRef.current === null) return;\n            const delta = event.clientX - swipeStartXRef.current;\n            swipeStartXRef.current = null;\n            if (Math.abs(delta) < SWIPE_THRESHOLD) return;\n            if (delta < 0) next();\n            else prev();\n          }}\n        >\n          <div\n            aria-live={interval && !paused ? 'off' : 'polite'}\n            {...stylex.props(styles.track, adaptiveHeight && styles.trackAdaptive)}\n            style={{ transform: `translateX(-${current * 100}%)` }}\n          >\n            {slides.map((slide, slideIndex) => {\n              const active = slideIndex === current;\n              return (\n                <div\n                  aria-hidden={!active || undefined}\n                  aria-label={`${slideIndex + 1} of ${count}`}\n                  aria-roledescription=\"slide\"\n                  {...stylex.props(styles.slide)}\n                  inert={!active}\n                  key={keys[slideIndex]}\n                  role=\"group\"\n                  ref={(node) => {\n                    slidesRef.current[slideIndex] = node;\n                  }}\n                >\n                  {slide}\n                </div>\n              );\n            })}\n          </div>\n          {arrows && count > 1 && (\n            <>\n              <ActionIcon\n                aria-label=\"Previous slide\"\n                disabled={!loop && current === 0}\n                icon={ChevronLeft}\n                size={ARROW_SIZE}\n                style={{ insetInlineStart: 8 }}\n                xstyle={styles.arrow}\n                onClick={prev}\n              />\n              <ActionIcon\n                aria-label=\"Next slide\"\n                disabled={atEnd}\n                icon={ChevronRight}\n                size={ARROW_SIZE}\n                style={{ insetInlineEnd: 8 }}\n                xstyle={styles.arrow}\n                onClick={next}\n              />\n            </>\n          )}\n        </div>\n        {dots && count > 1 && (\n          <div {...stylex.props(styles.dots)}>\n            {slides.map((_, dotIndex) => (\n              <button\n                aria-current={dotIndex === current || undefined}\n                aria-label={`Go to slide ${dotIndex + 1}`}\n                {...stylex.props(styles.dot)}\n                key={keys[dotIndex]}\n                type=\"button\"\n                onClick={() => goTo(dotIndex)}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nCarousel.displayName = 'Carousel';\n\nexport default Carousel;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,mBAAmB;AACzB,MAAM,kBAAkB;AACxB,MAAM,aAAa;CACjB,WAAW;CACX,cAAc;CACd,MAAM;AACR;AACA,MAAM,WAAW,MAAqB,EACpC,iBAAiB,OACjB,SAAS,OACT,WAAW,OACX,UACA,WACA,eAAe,GACf,OAAO,MACP,OACA,OAAO,MACP,eACA,gBACA,gBACA,eAAe,MACf,KACA,GAAG,WACC;CACJ,MAAM,SAAS,SAAS,QAAQ,QAAQ;CACxC,MAAM,QAAQ,OAAO;CACrB,MAAM,OAAO,OAAO,KAAK,OAAO,eAAe,eAAe,KAAK,KAAK,MAAM,QAAQ,OAAO,MAAM,MAAM,UAAU;CACnH,MAAM,CAAC,aAAa,kBAAkB,mBAAmB,cAAc;EACrE,UAAU;EACV,OAAO;CACT,CAAC;CACD,MAAM,UAAU,KAAK,IAAI,KAAK,IAAI,aAAa,CAAC,GAAG,KAAK,IAAI,QAAQ,GAAG,CAAC,CAAC;CACzE,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,QAAQ,aAAa,SAAiB;CAC7C,MAAM,YAAY,OAAkC,CAAC,CAAC;CACtD,MAAM,iBAAiB,OAAsB,IAAI;CACjD,MAAM,OAAO,kBAAkB,WAAmB;EAChD,IAAI,UAAU,GAAG;EACjB,MAAM,OAAO,QAAQ,SAAS,QAAQ,SAAS,QAAQ,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,GAAG,QAAQ,CAAC;EAC9F,IAAI,SAAS,SAAS,eAAe,IAAI;CAC3C,CAAC;CACD,MAAM,OAAO,uBAAuB,KAAK,UAAU,CAAC,CAAC;CACrD,MAAM,OAAO,uBAAuB,KAAK,UAAU,CAAC,CAAC;CACrD,oBAAoB,YAAY;EAC9B;EACA;EACA;CACF,IAAI;EAAC;EAAM;EAAM;CAAI,CAAC;CACtB,MAAM,WAAW,aAAa,OAAO,mBAAmB,YAAY;CACpE,MAAM,SAAS,gBAAgB;CAC/B,MAAM,QAAQ,CAAC,QAAQ,WAAW,QAAQ;CAC1C,gBAAgB;EACd,IAAI,CAAC,YAAY,UAAU,QAAQ,KAAK,OAAO;EAC/C,MAAM,QAAQ,WAAW,MAAM,QAAQ;EACvC,aAAa,aAAa,KAAK;CACjC,GAAG;EAAC;EAAU;EAAQ;EAAO;EAAO;EAAS;CAAI,CAAC;CAClD,sBAAsB;EACpB,MAAM,QAAQ,UAAU,QAAQ;EAChC,IAAI,CAAC,kBAAkB,CAAC,OAAO;EAC/B,UAAU,MAAM,YAAY;EAC5B,IAAI,OAAO,mBAAmB,aAAa;EAC3C,MAAM,WAAW,IAAI,qBAAqB,UAAU,MAAM,YAAY,CAAC;EACvE,SAAS,QAAQ,KAAK;EACtB,aAAa,SAAS,WAAW;CACnC,GAAG;EAAC;EAAgB;EAAS;CAAK,CAAC;CACnC,OAAO,qBAAC,OAAD;EAAK,wBAAqB;EAAW,WAAW,WAAW,OAAO,MAAM,SAAS,CAAC,CAAC;EAAW,MAAK;EAAS,iBAAgB,UAAS;GAC1I,iBAAiB,KAAK;GACtB,WAAW,IAAI;EACjB;EAAG,iBAAgB,UAAS;GAC1B,iBAAiB,KAAK;GACtB,WAAW,KAAK;EAClB;EAAG,GAAI;EANA,UAAA,CAOD,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,QAAQ;GAAG,OAAO,kBAAkB,WAAW,KAAA,IAAY,EAC1F,OACF,IAAI,KAAA;GAAW,uBAAuB;IACpC,eAAe,UAAU;GAC3B;GAAG,gBAAe,UAAS;IACzB,IAAI,MAAM,gBAAgB,SAAS,eAAe,UAAU,MAAM;GACpE;GAAG,cAAa,UAAS;IACvB,IAAI,eAAe,YAAY,MAAM;IACrC,MAAM,QAAQ,MAAM,UAAU,eAAe;IAC7C,eAAe,UAAU;IACzB,IAAI,KAAK,IAAI,KAAK,IAAI,iBAAiB;IACvC,IAAI,QAAQ,GAAG,KAAK;SAAO,KAAK;GAClC;GAZI,UAAA,CAaE,oBAAC,OAAD;IAAK,aAAW,YAAY,CAAC,SAAS,QAAQ;IAAU,GAAI,OAAO,MAAM,OAAO,OAAO,kBAAkB,OAAO,aAAa;IAAG,OAAO,EACzI,WAAW,eAAe,UAAU,IAAI,IAC1C;IACO,UAAA,OAAO,KAAK,OAAO,eAAe;KACrC,MAAM,SAAS,eAAe;KAC9B,OAAO,8BAAC,OAAD;MAAK,eAAa,CAAC,UAAU,KAAA;MAAW,cAAY,GAAG,aAAa,EAAE,MAAM;MAAS,wBAAqB;MAAQ,GAAI,OAAO,MAAM,OAAO,KAAK;MAAG,OAAO,CAAC;MAAQ,KAAK,KAAK;MAAa,MAAK;MAAQ,MAAK,SAAQ;OACxN,UAAU,QAAQ,cAAc;MAClC;KAEW,GADF,KACE;IACb,CAAC;GACM,CAAA,GACJ,UAAU,QAAQ,KAAK,qBAAA,YAAA,EAAA,UAAA,CACpB,oBAACA,gBAAD;IAAY,cAAW;IAAiB,UAAU,CAAC,QAAQ,YAAY;IAAG,MAAM;IAAa,MAAM;IAAY,OAAO,EAC1H,kBAAkB,EACpB;IAAG,QAAQ,OAAO;IAAO,SAAS;GAAO,CAAA,GACnC,oBAACA,gBAAD;IAAY,cAAW;IAAa,UAAU;IAAO,MAAM;IAAc,MAAM;IAAY,OAAO,EACtG,gBAAgB,EAClB;IAAG,QAAQ,OAAO;IAAO,SAAS;GAAO,CAAA,CACnC,EAAA,CAAA,CACD;EACJ,CAAA,GAAA,QAAQ,QAAQ,KAAK,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,IAAI;GAClD,UAAA,OAAO,KAAK,GAAG,aAAa,8BAAC,UAAD;IAAQ,gBAAc,aAAa,WAAW,KAAA;IAAW,cAAY,eAAe,WAAW;IAAK,GAAI,OAAO,MAAM,OAAO,GAAG;IAAG,KAAK,KAAK;IAAW,MAAK;IAAS,eAAe,KAAK,QAAQ;GAAI,CAAA,CAAC;EAChO,CAAA,CACJ;;AACX,CAAC;AACD,SAAS,cAAc"}
+{"version":3,"file":"Carousel.mjs","names":["ActionIcon"],"sources":["../../src/Carousel/Carousel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  Children,\n  isValidElement,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { ActionIconImpl as ActionIcon } from '@/ActionIcon/ActionIcon';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { CarouselProps } from './type';\n\nconst DEFAULT_INTERVAL = 5000;\nconst SWIPE_THRESHOLD = 40;\nconst ARROW_SIZE = { blockSize: 28, borderRadius: '50%', size: 16 };\n\nconst Carousel = memo<CarouselProps>(\n  ({\n    adaptiveHeight = false,\n    arrows = false,\n    autoplay = false,\n    children,\n    className,\n    defaultIndex = 0,\n    dots = true,\n    index,\n    loop = true,\n    onIndexChange,\n    onPointerEnter,\n    onPointerLeave,\n    pauseOnHover = true,\n    ref,\n    ...rest\n  }) => {\n    const slides = Children.toArray(children);\n    const count = slides.length;\n    const keys = slides.map((slide, slideIndex) =>\n      isValidElement(slide) && slide.key !== null ? slide.key : slideIndex,\n    );\n    const [mergedIndex, setMergedIndex] = useControlledState(defaultIndex, {\n      onChange: onIndexChange,\n      value: index,\n    });\n    const current = Math.min(Math.max(mergedIndex, 0), Math.max(count - 1, 0));\n\n    const [hovered, setHovered] = useState(false);\n    const [height, setHeight] = useState<number>();\n    const slidesRef = useRef<(HTMLDivElement | null)[]>([]);\n    const swipeStartXRef = useRef<number | null>(null);\n\n    const goTo = useEventCallback((target: number) => {\n      if (count === 0) return;\n      const next = loop\n        ? ((target % count) + count) % count\n        : Math.min(Math.max(target, 0), count - 1);\n      if (next !== current) setMergedIndex(next);\n    });\n    const next = useEventCallback(() => goTo(current + 1));\n    const prev = useEventCallback(() => goTo(current - 1));\n\n    useImperativeHandle(ref, () => ({ goTo, next, prev }), [goTo, next, prev]);\n\n    const interval = autoplay === true ? DEFAULT_INTERVAL : autoplay || 0;\n    const paused = pauseOnHover && hovered;\n    const atEnd = !loop && current >= count - 1;\n\n    useEffect(() => {\n      if (!interval || paused || count < 2 || atEnd) return;\n      const timer = setTimeout(next, interval);\n      return () => clearTimeout(timer);\n    }, [interval, paused, count, atEnd, current, next]);\n\n    useLayoutEffect(() => {\n      const slide = slidesRef.current[current];\n      if (!adaptiveHeight || !slide) return;\n      setHeight(slide.offsetHeight);\n      if (typeof ResizeObserver === 'undefined') return;\n      const observer = new ResizeObserver(() => setHeight(slide.offsetHeight));\n      observer.observe(slide);\n      return () => observer.disconnect();\n    }, [adaptiveHeight, current, count]);\n\n    return (\n      <div\n        aria-roledescription=\"carousel\"\n        className={styleProps(styles.root, className).className}\n        role=\"region\"\n        onPointerEnter={(event) => {\n          onPointerEnter?.(event);\n          setHovered(true);\n        }}\n        onPointerLeave={(event) => {\n          onPointerLeave?.(event);\n          setHovered(false);\n        }}\n        {...rest}\n      >\n        <div\n          {...stylex.props(styles.viewport)}\n          style={adaptiveHeight && height !== undefined ? { height } : undefined}\n          onPointerCancel={() => {\n            swipeStartXRef.current = null;\n          }}\n          onPointerDown={(event) => {\n            if (event.pointerType !== 'mouse') swipeStartXRef.current = event.clientX;\n          }}\n          onPointerUp={(event) => {\n            if (swipeStartXRef.current === null) return;\n            const delta = event.clientX - swipeStartXRef.current;\n            swipeStartXRef.current = null;\n            if (Math.abs(delta) < SWIPE_THRESHOLD) return;\n            if (delta < 0) next();\n            else prev();\n          }}\n        >\n          <div\n            aria-live={interval && !paused ? 'off' : 'polite'}\n            {...stylex.props(styles.track, adaptiveHeight && styles.trackAdaptive)}\n            style={{ transform: `translateX(-${current * 100}%)` }}\n          >\n            {slides.map((slide, slideIndex) => {\n              const active = slideIndex === current;\n              return (\n                <div\n                  aria-hidden={!active || undefined}\n                  aria-label={`${slideIndex + 1} of ${count}`}\n                  aria-roledescription=\"slide\"\n                  {...stylex.props(styles.slide)}\n                  inert={!active}\n                  key={keys[slideIndex]}\n                  role=\"group\"\n                  ref={(node) => {\n                    slidesRef.current[slideIndex] = node;\n                  }}\n                >\n                  {slide}\n                </div>\n              );\n            })}\n          </div>\n          {arrows && count > 1 && (\n            <>\n              <ActionIcon\n                aria-label=\"Previous slide\"\n                disabled={!loop && current === 0}\n                icon={ChevronLeft}\n                size={ARROW_SIZE}\n                style={{ insetInlineStart: 8 }}\n                xstyle={styles.arrow}\n                onClick={prev}\n              />\n              <ActionIcon\n                aria-label=\"Next slide\"\n                disabled={atEnd}\n                icon={ChevronRight}\n                size={ARROW_SIZE}\n                style={{ insetInlineEnd: 8 }}\n                xstyle={styles.arrow}\n                onClick={next}\n              />\n            </>\n          )}\n        </div>\n        {dots && count > 1 && (\n          <div {...stylex.props(styles.dots)}>\n            {slides.map((_, dotIndex) => (\n              <button\n                aria-current={dotIndex === current || undefined}\n                aria-label={`Go to slide ${dotIndex + 1}`}\n                {...stylex.props(styles.dot)}\n                key={keys[dotIndex]}\n                type=\"button\"\n                onClick={() => goTo(dotIndex)}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nCarousel.displayName = 'Carousel';\n\nexport default Carousel;\n"],"mappings":"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"}

package/es/CodeDiff/CodeDiff.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeDiff.mjs","names":[],"sources":["../../src/CodeDiff/CodeDiff.tsx"],"sourcesContent":["'use client';\n\nimport type { FileDiffOptions } from '@pierre/diffs';\nimport { MultiFileDiff } from '@pierre/diffs/react';\nimport { memo, useMemo } from 'react';\n\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { DiffPanel } from './DiffPanel';\nimport { getLobeDiffOptions, registerLobeDiffThemes } from './theme';\nimport type { CodeDiffProps } from './type';\n\nregisterLobeDiffThemes();\n\nconst countContentChanges = (\n  oldContent: string,\n  newContent: string,\n): { additions: number; deletions: number } => {\n  const oldLines = oldContent.split('\\n');\n  const newLines = newContent.split('\\n');\n\n  const oldSet = new Set(oldLines);\n  const newSet = new Set(newLines);\n\n  let deletions = 0;\n  let additions = 0;\n\n  for (const line of oldLines) {\n    if (!newSet.has(line)) {\n      deletions++;\n    }\n  }\n\n  for (const line of newLines) {\n    if (!oldSet.has(line)) {\n      additions++;\n    }\n  }\n\n  return { additions, deletions };\n};\n\nexport const CodeDiff = memo<CodeDiffProps>(\n  ({\n    oldContent,\n    newContent,\n    language,\n    fileName,\n    viewMode = 'split',\n    showHeader = true,\n    defaultExpand = true,\n    fullFeatured = true,\n    variant = 'filled',\n    className,\n    classNames,\n    styles: customStyles,\n    actionsRender,\n    diffOptions,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      if (language) return language;\n      return 'diff';\n    }, [fileName, language]);\n\n    const { additions, deletions } = useMemo(\n      () => countContentChanges(oldContent, newContent),\n      [oldContent, newContent],\n    );\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return null;\n      return actionsRender({\n        newContent,\n        oldContent,\n        originalNode: null,\n      });\n    }, [actionsRender, oldContent, newContent]);\n\n    const oldFile = useMemo(\n      () => ({\n        contents: oldContent,\n        lang: language as any,\n        name: fileName || 'file',\n      }),\n      [oldContent, language, fileName],\n    );\n\n    const newFile = useMemo(\n      () => ({\n        contents: newContent,\n        lang: language as any,\n        name: fileName || 'file',\n      }),\n      [newContent, language, fileName],\n    );\n\n    const options = useMemo<FileDiffOptions<string>>(\n      () => getLobeDiffOptions({ diffOptions, isDarkMode, viewMode }),\n      [isDarkMode, viewMode, diffOptions],\n    );\n\n    return (\n      <DiffPanel\n        actions={actions}\n        additions={additions}\n        body={<MultiFileDiff newFile={newFile} oldFile={oldFile} options={options} />}\n        className={className}\n        classNames={classNames}\n        dataCodeType=\"code-diff\"\n        defaultExpand={defaultExpand}\n        deletions={deletions}\n        displayName={displayName}\n        fileName={fileName}\n        fullFeatured={fullFeatured}\n        showHeader={showHeader}\n        styles={customStyles}\n        variant={variant}\n        {...rest}\n      />\n    );\n  },\n);\n\nCodeDiff.displayName = 'CodeDiff';\n\nexport default CodeDiff;\n"],"mappings":";;;;;;;;AAYA,uBAAuB;AAEvB,MAAM,uBACJ,YACA,eAC6C;CAC7C,MAAM,WAAW,WAAW,MAAM,IAAI;CACtC,MAAM,WAAW,WAAW,MAAM,IAAI;CAEtC,MAAM,SAAS,IAAI,IAAI,QAAQ;CAC/B,MAAM,SAAS,IAAI,IAAI,QAAQ;CAE/B,IAAI,YAAY;CAChB,IAAI,YAAY;CAEhB,KAAK,MAAM,QAAQ,UACjB,IAAI,CAAC,OAAO,IAAI,IAAI,GAClB;CAIJ,KAAK,MAAM,QAAQ,UACjB,IAAI,CAAC,OAAO,IAAI,IAAI,GAClB;CAIJ,OAAO;EAAE;EAAW;CAAU;AAChC;AAEA,MAAa,WAAW,MACrB,EACC,YACA,YACA,UACA,UACA,WAAW,SACX,aAAa,MACb,gBAAgB,MAChB,eAAe,MACf,UAAU,UACV,WACA,YACA,QAAQ,cACR,eACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,cAAc,cAAc;EAChC,IAAI,UAAU,OAAO;EACrB,IAAI,UAAU,OAAO;EACrB,OAAO;CACT,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,EAAE,WAAW,cAAc,cACzB,oBAAoB,YAAY,UAAU,GAChD,CAAC,YAAY,UAAU,CACzB;CAEA,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB;GACA;GACA,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAe;EAAY;CAAU,CAAC;CAE1C,MAAM,UAAU,eACP;EACL,UAAU;EACV,MAAM;EACN,MAAM,YAAY;CACpB,IACA;EAAC;EAAY;EAAU;CAAQ,CACjC;CAEA,MAAM,UAAU,eACP;EACL,UAAU;EACV,MAAM;EACN,MAAM,YAAY;CACpB,IACA;EAAC;EAAY;EAAU;CAAQ,CACjC;CAEA,MAAM,UAAU,cACR,mBAAmB;EAAE;EAAa;EAAY;CAAS,CAAC,GAC9D;EAAC;EAAY;EAAU;CAAW,CACpC;CAEA,OACE,oBAAC,WAAD;EACW;EACE;EACX,MAAM,oBAAC,eAAD;GAAwB;GAAkB;GAAkB;EAAU,CAAA;EACjE;EACC;EACZ,cAAa;EACE;EACJ;EACE;EACH;EACI;EACF;EACZ,QAAQ;EACC;EACT,GAAI;CACL,CAAA;AAEL,CACF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"CodeDiff.mjs","names":[],"sources":["../../src/CodeDiff/CodeDiff.tsx"],"sourcesContent":["'use client';\n\nimport type { FileDiffOptions } from '@pierre/diffs';\nimport { MultiFileDiff } from '@pierre/diffs/react';\nimport { memo, useMemo } from 'react';\n\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { DiffPanel } from './DiffPanel';\nimport { getLobeDiffOptions, registerLobeDiffThemes } from './theme';\nimport type { CodeDiffProps } from './type';\n\nregisterLobeDiffThemes();\n\nconst countContentChanges = (\n  oldContent: string,\n  newContent: string,\n): { additions: number; deletions: number } => {\n  const oldLines = oldContent.split('\\n');\n  const newLines = newContent.split('\\n');\n\n  const oldSet = new Set(oldLines);\n  const newSet = new Set(newLines);\n\n  let deletions = 0;\n  let additions = 0;\n\n  for (const line of oldLines) {\n    if (!newSet.has(line)) {\n      deletions++;\n    }\n  }\n\n  for (const line of newLines) {\n    if (!oldSet.has(line)) {\n      additions++;\n    }\n  }\n\n  return { additions, deletions };\n};\n\nexport const CodeDiff = memo<CodeDiffProps>(\n  ({\n    oldContent,\n    newContent,\n    language,\n    fileName,\n    viewMode = 'split',\n    showHeader = true,\n    defaultExpand = true,\n    fullFeatured = true,\n    variant = 'filled',\n    className,\n    classNames,\n    styles: customStyles,\n    actionsRender,\n    diffOptions,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      if (language) return language;\n      return 'diff';\n    }, [fileName, language]);\n\n    const { additions, deletions } = useMemo(\n      () => countContentChanges(oldContent, newContent),\n      [oldContent, newContent],\n    );\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return null;\n      return actionsRender({\n        newContent,\n        oldContent,\n        originalNode: null,\n      });\n    }, [actionsRender, oldContent, newContent]);\n\n    const oldFile = useMemo(\n      () => ({\n        contents: oldContent,\n        lang: language as any,\n        name: fileName || 'file',\n      }),\n      [oldContent, language, fileName],\n    );\n\n    const newFile = useMemo(\n      () => ({\n        contents: newContent,\n        lang: language as any,\n        name: fileName || 'file',\n      }),\n      [newContent, language, fileName],\n    );\n\n    const options = useMemo<FileDiffOptions<string, undefined>>(\n      () => getLobeDiffOptions({ diffOptions, isDarkMode, viewMode }),\n      [isDarkMode, viewMode, diffOptions],\n    );\n\n    return (\n      <DiffPanel\n        actions={actions}\n        additions={additions}\n        body={<MultiFileDiff newFile={newFile} oldFile={oldFile} options={options} />}\n        className={className}\n        classNames={classNames}\n        dataCodeType=\"code-diff\"\n        defaultExpand={defaultExpand}\n        deletions={deletions}\n        displayName={displayName}\n        fileName={fileName}\n        fullFeatured={fullFeatured}\n        showHeader={showHeader}\n        styles={customStyles}\n        variant={variant}\n        {...rest}\n      />\n    );\n  },\n);\n\nCodeDiff.displayName = 'CodeDiff';\n\nexport default CodeDiff;\n"],"mappings":";;;;;;;;AAYA,uBAAuB;AAEvB,MAAM,uBACJ,YACA,eAC6C;CAC7C,MAAM,WAAW,WAAW,MAAM,IAAI;CACtC,MAAM,WAAW,WAAW,MAAM,IAAI;CAEtC,MAAM,SAAS,IAAI,IAAI,QAAQ;CAC/B,MAAM,SAAS,IAAI,IAAI,QAAQ;CAE/B,IAAI,YAAY;CAChB,IAAI,YAAY;CAEhB,KAAK,MAAM,QAAQ,UACjB,IAAI,CAAC,OAAO,IAAI,IAAI,GAClB;CAIJ,KAAK,MAAM,QAAQ,UACjB,IAAI,CAAC,OAAO,IAAI,IAAI,GAClB;CAIJ,OAAO;EAAE;EAAW;CAAU;AAChC;AAEA,MAAa,WAAW,MACrB,EACC,YACA,YACA,UACA,UACA,WAAW,SACX,aAAa,MACb,gBAAgB,MAChB,eAAe,MACf,UAAU,UACV,WACA,YACA,QAAQ,cACR,eACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,cAAc,cAAc;EAChC,IAAI,UAAU,OAAO;EACrB,IAAI,UAAU,OAAO;EACrB,OAAO;CACT,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,EAAE,WAAW,cAAc,cACzB,oBAAoB,YAAY,UAAU,GAChD,CAAC,YAAY,UAAU,CACzB;CAEA,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB;GACA;GACA,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAe;EAAY;CAAU,CAAC;CAE1C,MAAM,UAAU,eACP;EACL,UAAU;EACV,MAAM;EACN,MAAM,YAAY;CACpB,IACA;EAAC;EAAY;EAAU;CAAQ,CACjC;CAEA,MAAM,UAAU,eACP;EACL,UAAU;EACV,MAAM;EACN,MAAM,YAAY;CACpB,IACA;EAAC;EAAY;EAAU;CAAQ,CACjC;CAEA,MAAM,UAAU,cACR,mBAAmB;EAAE;EAAa;EAAY;CAAS,CAAC,GAC9D;EAAC;EAAY;EAAU;CAAW,CACpC;CAEA,OACE,oBAAC,WAAD;EACW;EACE;EACX,MAAM,oBAAC,eAAD;GAAwB;GAAkB;GAAkB;EAAU,CAAA;EACjE;EACC;EACZ,cAAa;EACE;EACJ;EACE;EACH;EACI;EACF;EACZ,QAAQ;EACC;EACT,GAAI;CACL,CAAA;AAEL,CACF;AAEA,SAAS,cAAc"}

package/es/CodeDiff/PatchDiff.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PatchDiff.mjs","names":["PatchDiff","PierrePatchDiff"],"sources":["../../src/CodeDiff/PatchDiff.tsx"],"sourcesContent":["'use client';\n\nimport type { FileDiffOptions } from '@pierre/diffs';\nimport { PatchDiff as PierrePatchDiff } from '@pierre/diffs/react';\nimport { memo, useMemo } from 'react';\n\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { DiffPanel } from './DiffPanel';\nimport { getLobeDiffOptions, registerLobeDiffThemes } from './theme';\nimport type { PatchDiffProps } from './type';\n\nregisterLobeDiffThemes();\n\nconst countPatchChanges = (patch: string): { additions: number; deletions: number } => {\n  const lines = patch.split('\\n');\n  let additions = 0;\n  let deletions = 0;\n\n  for (const line of lines) {\n    if (line.startsWith('+') && !line.startsWith('+++')) {\n      additions++;\n    } else if (line.startsWith('-') && !line.startsWith('---')) {\n      deletions++;\n    }\n  }\n\n  return { additions, deletions };\n};\n\nexport const PatchDiff = memo<PatchDiffProps>(\n  ({\n    patch,\n    language,\n    fileName,\n    viewMode = 'split',\n    showHeader = true,\n    defaultExpand = true,\n    fullFeatured = true,\n    variant = 'filled',\n    className,\n    classNames,\n    styles: customStyles,\n    actionsRender,\n    diffOptions,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      // Try to extract filename from patch header\n      const match = patch.match(/^(?:-{3}|\\+{3})\\s+(?:a\\/|b\\/)?(.+?)(?:\\t|$)/m);\n      if (match?.[1]) return match[1];\n      if (language) return language;\n      return 'patch';\n    }, [fileName, patch, language]);\n\n    const { additions, deletions } = useMemo(() => countPatchChanges(patch), [patch]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return null;\n      return actionsRender({\n        originalNode: null,\n        patch,\n      });\n    }, [actionsRender, patch]);\n\n    const options = useMemo<FileDiffOptions<string>>(\n      () => getLobeDiffOptions({ diffOptions, isDarkMode, viewMode }),\n      [isDarkMode, viewMode, diffOptions],\n    );\n\n    return (\n      <DiffPanel\n        actions={actions}\n        additions={additions}\n        body={<PierrePatchDiff options={options} patch={patch} />}\n        className={className}\n        classNames={classNames}\n        dataCodeType=\"patch-diff\"\n        defaultExpand={defaultExpand}\n        deletions={deletions}\n        displayName={displayName}\n        fileName={fileName}\n        fullFeatured={fullFeatured}\n        showHeader={showHeader}\n        styles={customStyles}\n        variant={variant}\n        {...rest}\n      />\n    );\n  },\n);\n\nPatchDiff.displayName = 'PatchDiff';\n\nexport default PatchDiff;\n"],"mappings":";;;;;;;;AAYA,uBAAuB;AAEvB,MAAM,qBAAqB,UAA4D;CACrF,MAAM,QAAQ,MAAM,MAAM,IAAI;CAC9B,IAAI,YAAY;CAChB,IAAI,YAAY;CAEhB,KAAK,MAAM,QAAQ,OACjB,IAAI,KAAK,WAAW,GAAG,KAAK,CAAC,KAAK,WAAW,KAAK,GAChD;MACK,IAAI,KAAK,WAAW,GAAG,KAAK,CAAC,KAAK,WAAW,KAAK,GACvD;CAIJ,OAAO;EAAE;EAAW;CAAU;AAChC;AAEA,MAAaA,cAAY,MACtB,EACC,OACA,UACA,UACA,WAAW,SACX,aAAa,MACb,gBAAgB,MAChB,eAAe,MACf,UAAU,UACV,WACA,YACA,QAAQ,cACR,eACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,cAAc,cAAc;EAChC,IAAI,UAAU,OAAO;EAErB,MAAM,QAAQ,MAAM,MAAM,8CAA8C;EACxE,IAAI,QAAQ,IAAI,OAAO,MAAM;EAC7B,IAAI,UAAU,OAAO;EACrB,OAAO;CACT,GAAG;EAAC;EAAU;EAAO;CAAQ,CAAC;CAE9B,MAAM,EAAE,WAAW,cAAc,cAAc,kBAAkB,KAAK,GAAG,CAAC,KAAK,CAAC;CAEhF,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB,cAAc;GACd;EACF,CAAC;CACH,GAAG,CAAC,eAAe,KAAK,CAAC;CAEzB,MAAM,UAAU,cACR,mBAAmB;EAAE;EAAa;EAAY;CAAS,CAAC,GAC9D;EAAC;EAAY;EAAU;CAAW,CACpC;CAEA,OACE,oBAAC,WAAD;EACW;EACE;EACX,MAAM,oBAACC,WAAD;GAA0B;GAAgB;EAAQ,CAAA;EAC7C;EACC;EACZ,cAAa;EACE;EACJ;EACE;EACH;EACI;EACF;EACZ,QAAQ;EACC;EACT,GAAI;CACL,CAAA;AAEL,CACF;AAEA,YAAU,cAAc"}
+{"version":3,"file":"PatchDiff.mjs","names":["PatchDiff","PierrePatchDiff"],"sources":["../../src/CodeDiff/PatchDiff.tsx"],"sourcesContent":["'use client';\n\nimport type { FileDiffOptions } from '@pierre/diffs';\nimport { PatchDiff as PierrePatchDiff } from '@pierre/diffs/react';\nimport { memo, useMemo } from 'react';\n\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { DiffPanel } from './DiffPanel';\nimport { getLobeDiffOptions, registerLobeDiffThemes } from './theme';\nimport type { PatchDiffProps } from './type';\n\nregisterLobeDiffThemes();\n\nconst countPatchChanges = (patch: string): { additions: number; deletions: number } => {\n  const lines = patch.split('\\n');\n  let additions = 0;\n  let deletions = 0;\n\n  for (const line of lines) {\n    if (line.startsWith('+') && !line.startsWith('+++')) {\n      additions++;\n    } else if (line.startsWith('-') && !line.startsWith('---')) {\n      deletions++;\n    }\n  }\n\n  return { additions, deletions };\n};\n\nexport const PatchDiff = memo<PatchDiffProps>(\n  ({\n    patch,\n    language,\n    fileName,\n    viewMode = 'split',\n    showHeader = true,\n    defaultExpand = true,\n    fullFeatured = true,\n    variant = 'filled',\n    className,\n    classNames,\n    styles: customStyles,\n    actionsRender,\n    diffOptions,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      // Try to extract filename from patch header\n      const match = patch.match(/^(?:-{3}|\\+{3})\\s+(?:a\\/|b\\/)?(.+?)(?:\\t|$)/m);\n      if (match?.[1]) return match[1];\n      if (language) return language;\n      return 'patch';\n    }, [fileName, patch, language]);\n\n    const { additions, deletions } = useMemo(() => countPatchChanges(patch), [patch]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return null;\n      return actionsRender({\n        originalNode: null,\n        patch,\n      });\n    }, [actionsRender, patch]);\n\n    const options = useMemo<FileDiffOptions<string, undefined>>(\n      () => getLobeDiffOptions({ diffOptions, isDarkMode, viewMode }),\n      [isDarkMode, viewMode, diffOptions],\n    );\n\n    return (\n      <DiffPanel\n        actions={actions}\n        additions={additions}\n        body={<PierrePatchDiff options={options} patch={patch} />}\n        className={className}\n        classNames={classNames}\n        dataCodeType=\"patch-diff\"\n        defaultExpand={defaultExpand}\n        deletions={deletions}\n        displayName={displayName}\n        fileName={fileName}\n        fullFeatured={fullFeatured}\n        showHeader={showHeader}\n        styles={customStyles}\n        variant={variant}\n        {...rest}\n      />\n    );\n  },\n);\n\nPatchDiff.displayName = 'PatchDiff';\n\nexport default PatchDiff;\n"],"mappings":";;;;;;;;AAYA,uBAAuB;AAEvB,MAAM,qBAAqB,UAA4D;CACrF,MAAM,QAAQ,MAAM,MAAM,IAAI;CAC9B,IAAI,YAAY;CAChB,IAAI,YAAY;CAEhB,KAAK,MAAM,QAAQ,OACjB,IAAI,KAAK,WAAW,GAAG,KAAK,CAAC,KAAK,WAAW,KAAK,GAChD;MACK,IAAI,KAAK,WAAW,GAAG,KAAK,CAAC,KAAK,WAAW,KAAK,GACvD;CAIJ,OAAO;EAAE;EAAW;CAAU;AAChC;AAEA,MAAaA,cAAY,MACtB,EACC,OACA,UACA,UACA,WAAW,SACX,aAAa,MACb,gBAAgB,MAChB,eAAe,MACf,UAAU,UACV,WACA,YACA,QAAQ,cACR,eACA,aACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,cAAc,cAAc;EAChC,IAAI,UAAU,OAAO;EAErB,MAAM,QAAQ,MAAM,MAAM,8CAA8C;EACxE,IAAI,QAAQ,IAAI,OAAO,MAAM;EAC7B,IAAI,UAAU,OAAO;EACrB,OAAO;CACT,GAAG;EAAC;EAAU;EAAO;CAAQ,CAAC;CAE9B,MAAM,EAAE,WAAW,cAAc,cAAc,kBAAkB,KAAK,GAAG,CAAC,KAAK,CAAC;CAEhF,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB,cAAc;GACd;EACF,CAAC;CACH,GAAG,CAAC,eAAe,KAAK,CAAC;CAEzB,MAAM,UAAU,cACR,mBAAmB;EAAE;EAAa;EAAY;CAAS,CAAC,GAC9D;EAAC;EAAY;EAAU;CAAW,CACpC;CAEA,OACE,oBAAC,WAAD;EACW;EACE;EACX,MAAM,oBAACC,WAAD;GAA0B;GAAgB;EAAQ,CAAA;EAC7C;EACC;EACZ,cAAa;EACE;EACJ;EACE;EACH;EACI;EACF;EACZ,QAAQ;EACC;EACT,GAAI;CACL,CAAA;AAEL,CACF;AAEA,YAAU,cAAc"}

package/es/CodeDiff/theme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"theme.mjs","names":["lobeTheme"],"sources":["../../src/CodeDiff/theme.ts"],"sourcesContent":["import type { FileDiffOptions } from '@pierre/diffs';\nimport { registerCustomTheme, resolveTheme } from '@pierre/diffs';\n\nimport lobeTheme from '@/Highlighter/theme/lobe-theme';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport type { DiffViewMode } from './type';\n\nlet isLobeDiffThemeRegistered = false;\n\nexport const registerLobeDiffThemes = () => {\n  if (isLobeDiffThemeRegistered) return;\n\n  registerCustomTheme('lobe-theme', () => Promise.resolve(lobeTheme as any));\n  void resolveTheme('lobe-theme');\n\n  isLobeDiffThemeRegistered = true;\n};\n\nconst customSeparatorCSS = `\n  :host {\n    --diffs-dark-bg: transparent !important;\n    --diffs-light-bg: transparent !important;\n    --diffs-gap-fallback: 8px;\n    --diffs-added-light: ${cssVar.colorSuccessHover};\n    --diffs-added-dark: ${cssVar.colorSuccessBorderHover};\n    --diffs-modified-light: ${cssVar.colorInfoHover};\n    --diffs-modified-dark: ${cssVar.colorInfoBorderHover};\n    --diffs-deleted-light: ${cssVar.colorErrorHover};\n    --diffs-deleted-dark: ${cssVar.colorErrorBorderHover};\n  }\n\n  [data-gutter-buffer] {\n    opacity: 0.2 !important;\n  }\n\n  [data-code] {\n    padding-top: 0 !important;\n    padding-bottom: 0 !important;\n  }\n\n  [data-gutter] {\n    backdrop-filter: blur(16px) !important;\n  }\n`;\n\nexport const getLobeDiffOptions = ({\n  diffOptions,\n  isDarkMode,\n  viewMode,\n}: {\n  diffOptions?: FileDiffOptions<string>;\n  isDarkMode: boolean;\n  viewMode: DiffViewMode;\n}): FileDiffOptions<string> => ({\n  theme: {\n    dark: 'lobe-theme',\n    light: 'lobe-theme',\n  },\n  themeType: isDarkMode ? 'dark' : 'light',\n  diffStyle: viewMode,\n  disableFileHeader: true,\n  unsafeCSS: customSeparatorCSS,\n  ...diffOptions,\n});\n"],"mappings":";;;;AAQA,IAAI,4BAA4B;AAEhC,MAAa,+BAA+B;CAC1C,IAAI,2BAA2B;CAE/B,oBAAoB,oBAAoB,QAAQ,QAAQA,kBAAgB,CAAC;CACzE,aAAkB,YAAY;CAE9B,4BAA4B;AAC9B;AAEA,MAAM,qBAAqB;;;;;2BAKA,OAAO,kBAAkB;0BAC1B,OAAO,wBAAwB;8BAC3B,OAAO,eAAe;6BACvB,OAAO,qBAAqB;6BAC5B,OAAO,gBAAgB;4BACxB,OAAO,sBAAsB;;;;;;;;;;;;;;;;AAiBzD,MAAa,sBAAsB,EACjC,aACA,YACA,gBAK8B;CAC9B,OAAO;EACL,MAAM;EACN,OAAO;CACT;CACA,WAAW,aAAa,SAAS;CACjC,WAAW;CACX,mBAAmB;CACnB,WAAW;CACX,GAAG;AACL"}
+{"version":3,"file":"theme.mjs","names":["lobeTheme"],"sources":["../../src/CodeDiff/theme.ts"],"sourcesContent":["import type { FileDiffOptions } from '@pierre/diffs';\nimport { registerCustomTheme, resolveTheme } from '@pierre/diffs';\n\nimport lobeTheme from '@/Highlighter/theme/lobe-theme';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport type { DiffViewMode } from './type';\n\nlet isLobeDiffThemeRegistered = false;\n\nexport const registerLobeDiffThemes = () => {\n  if (isLobeDiffThemeRegistered) return;\n\n  registerCustomTheme('lobe-theme', () => Promise.resolve(lobeTheme as any));\n  void resolveTheme('lobe-theme');\n\n  isLobeDiffThemeRegistered = true;\n};\n\nconst customSeparatorCSS = `\n  :host {\n    --diffs-dark-bg: transparent !important;\n    --diffs-light-bg: transparent !important;\n    --diffs-gap-fallback: 8px;\n    --diffs-added-light: ${cssVar.colorSuccessHover};\n    --diffs-added-dark: ${cssVar.colorSuccessBorderHover};\n    --diffs-modified-light: ${cssVar.colorInfoHover};\n    --diffs-modified-dark: ${cssVar.colorInfoBorderHover};\n    --diffs-deleted-light: ${cssVar.colorErrorHover};\n    --diffs-deleted-dark: ${cssVar.colorErrorBorderHover};\n  }\n\n  [data-gutter-buffer] {\n    opacity: 0.2 !important;\n  }\n\n  [data-code] {\n    padding-top: 0 !important;\n    padding-bottom: 0 !important;\n  }\n\n  [data-gutter] {\n    backdrop-filter: blur(16px) !important;\n  }\n`;\n\nexport const getLobeDiffOptions = ({\n  diffOptions,\n  isDarkMode,\n  viewMode,\n}: {\n  diffOptions?: FileDiffOptions<string, undefined>;\n  isDarkMode: boolean;\n  viewMode: DiffViewMode;\n}): FileDiffOptions<string, undefined> => ({\n  theme: {\n    dark: 'lobe-theme',\n    light: 'lobe-theme',\n  },\n  themeType: isDarkMode ? 'dark' : 'light',\n  diffStyle: viewMode,\n  disableFileHeader: true,\n  unsafeCSS: customSeparatorCSS,\n  ...diffOptions,\n});\n"],"mappings":";;;;AAQA,IAAI,4BAA4B;AAEhC,MAAa,+BAA+B;CAC1C,IAAI,2BAA2B;CAE/B,oBAAoB,oBAAoB,QAAQ,QAAQA,kBAAgB,CAAC;CACzE,aAAkB,YAAY;CAE9B,4BAA4B;AAC9B;AAEA,MAAM,qBAAqB;;;;;2BAKA,OAAO,kBAAkB;0BAC1B,OAAO,wBAAwB;8BAC3B,OAAO,eAAe;6BACvB,OAAO,qBAAqB;6BAC5B,OAAO,gBAAgB;4BACxB,OAAO,sBAAsB;;;;;;;;;;;;;;;;AAiBzD,MAAa,sBAAsB,EACjC,aACA,YACA,gBAKyC;CACzC,OAAO;EACL,MAAM;EACN,OAAO;CACT;CACA,WAAW,aAAa,SAAS;CACjC,WAAW;CACX,mBAAmB;CACnB,WAAW;CACX,GAAG;AACL"}

package/es/CodeDiff/type.d.mts

@@ -28,7 +28,7 @@ export interface CodeDiffProps extends Omit<FlexboxProps, 'children'> {
   /**
    * Options for the diff component
    */
-  diffOptions?: FileDiffOptions<string>;
+  diffOptions?: FileDiffOptions<string, undefined>;
   /**
    * File name to display
    */
@@ -96,7 +96,7 @@ export interface PatchDiffProps extends Omit<FlexboxProps, 'children'> {
   /**
    * Options for the diff component
    */
-  diffOptions?: FileDiffOptions<string>;
+  diffOptions?: FileDiffOptions<string, undefined>;
   /**
    * File name to display (optional, extracted from patch if not provided)
    */

package/es/CodeEditor/CodeEditor.mjs

@@ -2,12 +2,12 @@
 import { styleProps } from "../styles/stylex/props.mjs";
 import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { SyntaxHighlighterImpl } from "../Highlighter/SyntaxHighlighter/index.mjs";
 import { styles, variantStyles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import useControlledState from "use-merge-value";
 //#region src/CodeEditor/CodeEditor.tsx
 const CodeEditor = memo(({ autoFocus, classNames, styles: customStyles, defaultValue = "", onChange, placeholder = "", style, className, onValueChange, value, language = "markdown", variant = "borderless", width, height, flex, ref, ...rest }) => {
 	const [code, setCode] = useControlledState(defaultValue, {

package/es/CodeEditor/CodeEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.mjs","names":["useMergeState","Flexbox"],"sources":["../../src/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport { SyntaxHighlighterImpl } from '@/Highlighter/SyntaxHighlighter';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles, variantStyles } from './style';\nimport type { CodeEditorProps } from './type';\n\nconst CodeEditor = memo<CodeEditorProps>(\n  ({\n    autoFocus,\n    classNames,\n    styles: customStyles,\n    defaultValue = '',\n    onChange,\n    placeholder = '',\n    style,\n    className,\n    onValueChange,\n    value,\n    language = 'markdown',\n    variant = 'borderless',\n    width,\n    height,\n    flex,\n    ref,\n    ...rest\n  }) => {\n    const [code, setCode] = useMergeState(defaultValue, {\n      defaultValue,\n      onChange: onValueChange,\n      value,\n    });\n\n    return (\n      <Flexbox\n        flex={flex}\n        height={height ?? 'fit-content'}\n        width={width ?? '100%'}\n        {...styleProps(\n          [styles.root, variantStyles[variant]],\n          clsx(\n            'lobe-code-editor',\n            variant === 'borderless' && 'lobe-code-editor-borderless',\n            className,\n          ),\n          style,\n        )}\n      >\n        {value ? (\n          <SyntaxHighlighterImpl\n            className={clsx('lobe-code-editor-highlight', classNames?.highlight)}\n            language={language}\n            style={customStyles?.highlight}\n            variant={variant}\n            xstyle={styles.highlight}\n          >\n            {value}\n          </SyntaxHighlighterImpl>\n        ) : (\n          <pre\n            {...styleProps(\n              styles.highlight,\n              clsx('lobe-code-editor-highlight', classNames?.highlight),\n              {\n                color: cssVar.colorTextDescription,\n              },\n            )}\n          >\n            {placeholder || ' '}\n          </pre>\n        )}\n\n        <textarea\n          autoCapitalize=\"off\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoFocus={autoFocus}\n          data-gramm={false}\n          ref={ref}\n          value={code}\n          onChange={(e) => {\n            onChange?.(e);\n            setCode(e.target.value);\n          }}\n          {...styleProps(styles.textarea, classNames?.textarea, customStyles?.textarea)}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nCodeEditor.displayName = 'CodeEditor';\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,aAAa,MAChB,EACC,WACA,YACA,QAAQ,cACR,eAAe,IACf,UACA,cAAc,IACd,OACA,WACA,eACA,OACA,WAAW,YACX,UAAU,cACV,OACA,QACA,MACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAWA,mBAAc,cAAc;EAClD;EACA,UAAU;EACV;CACF,CAAC;CAED,OACE,qBAACC,mBAAD;EACQ;EACN,QAAQ,UAAU;EAClB,OAAO,SAAS;EAChB,GAAI,WACF,CAAC,OAAO,MAAM,cAAc,QAAQ,GACpC,KACE,oBACA,YAAY,gBAAgB,+BAC5B,SACF,GACA,KACF;EAZF,UAAA,CAcG,QACC,oBAAC,uBAAD;GACE,WAAW,KAAK,8BAA8B,YAAY,SAAS;GACzD;GACV,OAAO,cAAc;GACZ;GACT,QAAQ,OAAO;GAEd,UAAA;EACoB,CAAA,IAEvB,oBAAC,OAAD;GACE,GAAI,WACF,OAAO,WACP,KAAK,8BAA8B,YAAY,SAAS,GACxD,EACE,OAAO,OAAO,qBAChB,CACF;GAEC,UAAA,eAAe;EACb,CAAA,GAGP,oBAAC,YAAD;GACE,gBAAe;GACf,cAAa;GACb,aAAY;GACD;GACX,cAAY;GACP;GACL,OAAO;GACP,WAAW,MAAM;IACf,WAAW,CAAC;IACZ,QAAQ,EAAE,OAAO,KAAK;GACxB;GACA,GAAI,WAAW,OAAO,UAAU,YAAY,UAAU,cAAc,QAAQ;GAC5E,GAAI;EACL,CAAA,CACM;;AAEb,CACF;AAEA,WAAW,cAAc"}
+{"version":3,"file":"CodeEditor.mjs","names":["Flexbox"],"sources":["../../src/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { SyntaxHighlighterImpl } from '@/Highlighter/SyntaxHighlighter';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles, variantStyles } from './style';\nimport type { CodeEditorProps } from './type';\n\nconst CodeEditor = memo<CodeEditorProps>(\n  ({\n    autoFocus,\n    classNames,\n    styles: customStyles,\n    defaultValue = '',\n    onChange,\n    placeholder = '',\n    style,\n    className,\n    onValueChange,\n    value,\n    language = 'markdown',\n    variant = 'borderless',\n    width,\n    height,\n    flex,\n    ref,\n    ...rest\n  }) => {\n    const [code, setCode] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onValueChange,\n      value,\n    });\n\n    return (\n      <Flexbox\n        flex={flex}\n        height={height ?? 'fit-content'}\n        width={width ?? '100%'}\n        {...styleProps(\n          [styles.root, variantStyles[variant]],\n          clsx(\n            'lobe-code-editor',\n            variant === 'borderless' && 'lobe-code-editor-borderless',\n            className,\n          ),\n          style,\n        )}\n      >\n        {value ? (\n          <SyntaxHighlighterImpl\n            className={clsx('lobe-code-editor-highlight', classNames?.highlight)}\n            language={language}\n            style={customStyles?.highlight}\n            variant={variant}\n            xstyle={styles.highlight}\n          >\n            {value}\n          </SyntaxHighlighterImpl>\n        ) : (\n          <pre\n            {...styleProps(\n              styles.highlight,\n              clsx('lobe-code-editor-highlight', classNames?.highlight),\n              {\n                color: cssVar.colorTextDescription,\n              },\n            )}\n          >\n            {placeholder || ' '}\n          </pre>\n        )}\n\n        <textarea\n          autoCapitalize=\"off\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoFocus={autoFocus}\n          data-gramm={false}\n          ref={ref}\n          value={code}\n          onChange={(e) => {\n            onChange?.(e);\n            setCode(e.target.value);\n          }}\n          {...styleProps(styles.textarea, classNames?.textarea, customStyles?.textarea)}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nCodeEditor.displayName = 'CodeEditor';\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,aAAa,MAChB,EACC,WACA,YACA,QAAQ,cACR,eAAe,IACf,UACA,cAAc,IACd,OACA,WACA,eACA,OACA,WAAW,YACX,UAAU,cACV,OACA,QACA,MACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,MAAM,WAAW,mBAAmB,cAAc;EACvD;EACA,UAAU;EACV;CACF,CAAC;CAED,OACE,qBAACA,mBAAD;EACQ;EACN,QAAQ,UAAU;EAClB,OAAO,SAAS;EAChB,GAAI,WACF,CAAC,OAAO,MAAM,cAAc,QAAQ,GACpC,KACE,oBACA,YAAY,gBAAgB,+BAC5B,SACF,GACA,KACF;EAZF,UAAA,CAcG,QACC,oBAAC,uBAAD;GACE,WAAW,KAAK,8BAA8B,YAAY,SAAS;GACzD;GACV,OAAO,cAAc;GACZ;GACT,QAAQ,OAAO;GAEd,UAAA;EACoB,CAAA,IAEvB,oBAAC,OAAD;GACE,GAAI,WACF,OAAO,WACP,KAAK,8BAA8B,YAAY,SAAS,GACxD,EACE,OAAO,OAAO,qBAChB,CACF;GAEC,UAAA,eAAe;EACb,CAAA,GAGP,oBAAC,YAAD;GACE,gBAAe;GACf,cAAa;GACb,aAAY;GACD;GACX,cAAY;GACP;GACL,OAAO;GACP,WAAW,MAAM;IACf,WAAW,CAAC;IACZ,QAAQ,EAAE,OAAO,KAAK;GACxB;GACA,GAAI,WAAW,OAAO,UAAU,YAAY,UAAU,cAAc,QAAQ;GAC5E,GAAI;EACL,CAAA,CACM;;AAEb,CACF;AAEA,WAAW,cAAc"}

package/es/ColorPicker/ColorPicker.mjs

@@ -3,6 +3,7 @@ import { styleProps } from "../styles/stylex/props.mjs";
 import { focusRing } from "../styles/stylex/focusRing.mjs";
 import Icon from "../Icon/Icon.mjs";
 import { useThemeMode } from "../styles/theme/scope.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
 import { inputRootStyles } from "../Input/style.mjs";
 import Input_default from "../Input/Input.mjs";
@@ -18,7 +19,6 @@ import { createElement, memo, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { Pipette } from "lucide-react";
-import useControlledState from "use-merge-value";
 //#region src/ColorPicker/ColorPicker.tsx
 const DEFAULT_COLOR = "#000000";
 const hasEyeDropper = () => typeof window !== "undefined" && "EyeDropper" in window;

package/es/ColorPicker/ColorPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.mjs","names":["colorPickerMessages","Input","InputNumber"],"sources":["../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Pipette } from 'lucide-react';\nimport { type CSSProperties, memo, useEffect, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport colorPickerMessages from '@/i18n/resources/en/colorPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { Input, InputNumber } from '@/Input';\nimport { inputRootStyles } from '@/Input/style';\nimport { panelStyles } from '@/internal/panelStyles';\nimport {\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverRoot,\n  PopoverTriggerElement,\n} from '@/Popover';\nimport { Slider } from '@/Slider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { formatColor, type Hsva, normalizeHexInput, parseColor } from './color';\nimport SaturationArea from './SaturationArea';\nimport { styles } from './style';\nimport type { ColorPickerProps } from './type';\n\nconst DEFAULT_COLOR = '#000000';\n\nconst hasEyeDropper = () => typeof window !== 'undefined' && 'EyeDropper' in window;\n\nconst ColorPicker = memo<ColorPickerProps>(\n  ({\n    alpha = false,\n    children,\n    className,\n    defaultValue = DEFAULT_COLOR,\n    disabled,\n    onChange,\n    onChangeComplete,\n    presets,\n    showText,\n    size = 'middle',\n    style,\n    value,\n  }) => {\n    const { t } = useTranslation(colorPickerMessages);\n    const { isDarkMode } = useThemeMode();\n    const [hex, setHex] = useControlledState<string>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n    const [hsva, setHsva] = useState<Hsva>(() => parseColor(hex));\n    const [draft, setDraft] = useState(hex.slice(1).toUpperCase());\n    const popupRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      setHsva((current) =>\n        formatColor(current, alpha) === hex.toLowerCase() ? current : parseColor(hex, current.h),\n      );\n      setDraft(hex.slice(1).toUpperCase());\n    }, [hex, alpha]);\n\n    const update = (next: Hsva) => {\n      setHsva(next);\n      setHex(formatColor(next, alpha));\n    };\n    const commit = (next: Hsva) => onChangeComplete?.(formatColor(next, alpha));\n    const apply = (next: Hsva) => {\n      update(next);\n      commit(next);\n    };\n\n    const commitDraft = () => {\n      const normalized = normalizeHexInput(draft);\n      if (!normalized) return setDraft(hex.slice(1).toUpperCase());\n      apply(parseColor(normalized, hsva.h));\n    };\n\n    const swatch = (dimension: number) => (\n      <span {...stylex.props(styles.swatch)} style={{ height: dimension, width: dimension }}>\n        <span {...stylex.props(styles.swatchFill)} style={{ background: hex }} />\n      </span>\n    );\n\n    const trigger =\n      children ??\n      (showText ? (\n        <button\n          aria-label={t('colorPicker.trigger')}\n          disabled={disabled}\n          type=\"button\"\n          {...styleProps(\n            [\n              ...inputRootStyles({ size, variant: isDarkMode ? 'filled' : 'outlined' }),\n              styles.textTrigger,\n            ],\n            className,\n            { cursor: 'pointer', ...style },\n          )}\n        >\n          {swatch(18)}\n          <span style={{ fontFamily: 'var(--lobe-font-family-code, monospace)' }}>\n            {hex.toUpperCase()}\n          </span>\n        </button>\n      ) : (\n        <button\n          aria-label={t('colorPicker.trigger')}\n          disabled={disabled}\n          type=\"button\"\n          {...styleProps([focusRing.info, styles.swatchButton], className, style)}\n        >\n          {swatch(24)}\n        </button>\n      ));\n\n    return (\n      <PopoverRoot>\n        <PopoverTriggerElement>{trigger}</PopoverTriggerElement>\n        <PopoverPortal>\n          <PopoverPositioner placement=\"bottomLeft\">\n            <PopoverPopup\n              ref={popupRef}\n              xstyle={panelStyles.popup}\n              initialFocus={() =>\n                popupRef.current?.querySelector<HTMLElement>('[role=\"slider\"]') ?? true\n              }\n            >\n              <div {...stylex.props(styles.panel)}>\n                <div {...stylex.props(styles.summary)}>\n                  {swatch(40)}\n                  <div>\n                    <div {...stylex.props(styles.value)}>{hex.toUpperCase()}</div>\n                    <div {...stylex.props(panelStyles.label)}>\n                      {alpha ? `HEX · ${Math.round(hsva.a * 100)}%` : 'HEX'}\n                    </div>\n                  </div>\n                  {hasEyeDropper() && (\n                    <button\n                      aria-label={t('colorPicker.eyeDropper')}\n                      {...stylex.props(panelStyles.nav, styles.eyeDropper)}\n                      type=\"button\"\n                      onClick={async () => {\n                        const dropper = new (\n                          window as unknown as {\n                            EyeDropper: new () => { open: () => Promise<{ sRGBHex: string }> };\n                          }\n                        ).EyeDropper();\n                        const result = await dropper.open().catch(() => null);\n                        if (result) apply({ ...parseColor(result.sRGBHex, hsva.h), a: hsva.a });\n                      }}\n                    >\n                      <Icon icon={Pipette} size={14} />\n                    </button>\n                  )}\n                </div>\n                <SaturationArea\n                  hue={hsva.h}\n                  label={t('colorPicker.saturation')}\n                  saturation={hsva.s}\n                  value={hsva.v}\n                  onChange={(s, v) => update({ ...hsva, s, v })}\n                  onChangeComplete={(s, v) => commit({ ...hsva, s, v })}\n                />\n                <Slider\n                  aria-label={t('colorPicker.hue')}\n                  max={360}\n                  min={0}\n                  value={hsva.h}\n                  classNames={{\n                    indicator: stylex.props(styles.hidden).className,\n                    thumb: stylex.props(styles.sliderThumb).className,\n                    track: stylex.props(styles.hueTrack).className,\n                  }}\n                  onChange={(h) => update({ ...hsva, h })}\n                  onChangeComplete={(h) => commit({ ...hsva, h })}\n                />\n                {alpha && (\n                  <Slider\n                    aria-label={t('colorPicker.alpha')}\n                    max={100}\n                    min={0}\n                    value={Math.round(hsva.a * 100)}\n                    classNames={{\n                      indicator: stylex.props(styles.hidden).className,\n                      thumb: stylex.props(styles.sliderThumb).className,\n                      track: stylex.props(styles.alphaTrack).className,\n                    }}\n                    styles={{\n                      track: {\n                        '--lobe-color-picker-alpha': formatColor(hsva, false),\n                      } as CSSProperties,\n                    }}\n                    onChange={(a) => update({ ...hsva, a: a / 100 })}\n                    onChangeComplete={(a) => commit({ ...hsva, a: a / 100 })}\n                  />\n                )}\n                <div {...stylex.props(styles.hexRow)}>\n                  <Input\n                    aria-label=\"HEX\"\n                    className={stylex.props(styles.hexField).className}\n                    prefix={<span {...stylex.props(panelStyles.label)}>HEX</span>}\n                    value={draft}\n                    variant=\"filled\"\n                    onBlur={commitDraft}\n                    onChange={(event) => setDraft(event.target.value)}\n                    onPressEnter={commitDraft}\n                  />\n                  {alpha && (\n                    <InputNumber\n                      aria-label={t('colorPicker.alpha')}\n                      className={stylex.props(styles.hexField, styles.alphaField).className}\n                      controls={false}\n                      max={100}\n                      min={0}\n                      suffix=\"%\"\n                      value={Math.round(hsva.a * 100)}\n                      variant=\"filled\"\n                      onChange={(a) => a !== null && apply({ ...hsva, a: a / 100 })}\n                    />\n                  )}\n                </div>\n                {presets && presets.length > 0 && (\n                  <div\n                    aria-label={t('colorPicker.presets')}\n                    {...stylex.props(styles.presets)}\n                    role=\"group\"\n                  >\n                    {presets.map((color) => (\n                      <button\n                        aria-label={color}\n                        aria-pressed={color.toLowerCase() === hex.slice(0, 7).toLowerCase()}\n                        {...stylex.props(focusRing.info, styles.preset)}\n                        key={color}\n                        style={{ background: color }}\n                        type=\"button\"\n                        onClick={() =>\n                          apply({ ...parseColor(color, hsva.h), a: parseColor(color).a })\n                        }\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            </PopoverPopup>\n          </PopoverPositioner>\n        </PopoverPortal>\n      </PopoverRoot>\n    );\n  },\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.mjs","names":["colorPickerMessages","Input","InputNumber"],"sources":["../../src/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Pipette } from 'lucide-react';\nimport { type CSSProperties, memo, useEffect, useRef, useState } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport colorPickerMessages from '@/i18n/resources/en/colorPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport { Input, InputNumber } from '@/Input';\nimport { inputRootStyles } from '@/Input/style';\nimport { panelStyles } from '@/internal/panelStyles';\nimport {\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverRoot,\n  PopoverTriggerElement,\n} from '@/Popover';\nimport { Slider } from '@/Slider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { formatColor, type Hsva, normalizeHexInput, parseColor } from './color';\nimport SaturationArea from './SaturationArea';\nimport { styles } from './style';\nimport type { ColorPickerProps } from './type';\n\nconst DEFAULT_COLOR = '#000000';\n\nconst hasEyeDropper = () => typeof window !== 'undefined' && 'EyeDropper' in window;\n\nconst ColorPicker = memo<ColorPickerProps>(\n  ({\n    alpha = false,\n    children,\n    className,\n    defaultValue = DEFAULT_COLOR,\n    disabled,\n    onChange,\n    onChangeComplete,\n    presets,\n    showText,\n    size = 'middle',\n    style,\n    value,\n  }) => {\n    const { t } = useTranslation(colorPickerMessages);\n    const { isDarkMode } = useThemeMode();\n    const [hex, setHex] = useControlledState<string>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n    const [hsva, setHsva] = useState<Hsva>(() => parseColor(hex));\n    const [draft, setDraft] = useState(hex.slice(1).toUpperCase());\n    const popupRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      setHsva((current) =>\n        formatColor(current, alpha) === hex.toLowerCase() ? current : parseColor(hex, current.h),\n      );\n      setDraft(hex.slice(1).toUpperCase());\n    }, [hex, alpha]);\n\n    const update = (next: Hsva) => {\n      setHsva(next);\n      setHex(formatColor(next, alpha));\n    };\n    const commit = (next: Hsva) => onChangeComplete?.(formatColor(next, alpha));\n    const apply = (next: Hsva) => {\n      update(next);\n      commit(next);\n    };\n\n    const commitDraft = () => {\n      const normalized = normalizeHexInput(draft);\n      if (!normalized) return setDraft(hex.slice(1).toUpperCase());\n      apply(parseColor(normalized, hsva.h));\n    };\n\n    const swatch = (dimension: number) => (\n      <span {...stylex.props(styles.swatch)} style={{ height: dimension, width: dimension }}>\n        <span {...stylex.props(styles.swatchFill)} style={{ background: hex }} />\n      </span>\n    );\n\n    const trigger =\n      children ??\n      (showText ? (\n        <button\n          aria-label={t('colorPicker.trigger')}\n          disabled={disabled}\n          type=\"button\"\n          {...styleProps(\n            [\n              ...inputRootStyles({ size, variant: isDarkMode ? 'filled' : 'outlined' }),\n              styles.textTrigger,\n            ],\n            className,\n            { cursor: 'pointer', ...style },\n          )}\n        >\n          {swatch(18)}\n          <span style={{ fontFamily: 'var(--lobe-font-family-code, monospace)' }}>\n            {hex.toUpperCase()}\n          </span>\n        </button>\n      ) : (\n        <button\n          aria-label={t('colorPicker.trigger')}\n          disabled={disabled}\n          type=\"button\"\n          {...styleProps([focusRing.info, styles.swatchButton], className, style)}\n        >\n          {swatch(24)}\n        </button>\n      ));\n\n    return (\n      <PopoverRoot>\n        <PopoverTriggerElement>{trigger}</PopoverTriggerElement>\n        <PopoverPortal>\n          <PopoverPositioner placement=\"bottomLeft\">\n            <PopoverPopup\n              ref={popupRef}\n              xstyle={panelStyles.popup}\n              initialFocus={() =>\n                popupRef.current?.querySelector<HTMLElement>('[role=\"slider\"]') ?? true\n              }\n            >\n              <div {...stylex.props(styles.panel)}>\n                <div {...stylex.props(styles.summary)}>\n                  {swatch(40)}\n                  <div>\n                    <div {...stylex.props(styles.value)}>{hex.toUpperCase()}</div>\n                    <div {...stylex.props(panelStyles.label)}>\n                      {alpha ? `HEX · ${Math.round(hsva.a * 100)}%` : 'HEX'}\n                    </div>\n                  </div>\n                  {hasEyeDropper() && (\n                    <button\n                      aria-label={t('colorPicker.eyeDropper')}\n                      {...stylex.props(panelStyles.nav, styles.eyeDropper)}\n                      type=\"button\"\n                      onClick={async () => {\n                        const dropper = new (\n                          window as unknown as {\n                            EyeDropper: new () => { open: () => Promise<{ sRGBHex: string }> };\n                          }\n                        ).EyeDropper();\n                        const result = await dropper.open().catch(() => null);\n                        if (result) apply({ ...parseColor(result.sRGBHex, hsva.h), a: hsva.a });\n                      }}\n                    >\n                      <Icon icon={Pipette} size={14} />\n                    </button>\n                  )}\n                </div>\n                <SaturationArea\n                  hue={hsva.h}\n                  label={t('colorPicker.saturation')}\n                  saturation={hsva.s}\n                  value={hsva.v}\n                  onChange={(s, v) => update({ ...hsva, s, v })}\n                  onChangeComplete={(s, v) => commit({ ...hsva, s, v })}\n                />\n                <Slider\n                  aria-label={t('colorPicker.hue')}\n                  max={360}\n                  min={0}\n                  value={hsva.h}\n                  classNames={{\n                    indicator: stylex.props(styles.hidden).className,\n                    thumb: stylex.props(styles.sliderThumb).className,\n                    track: stylex.props(styles.hueTrack).className,\n                  }}\n                  onChange={(h) => update({ ...hsva, h })}\n                  onChangeComplete={(h) => commit({ ...hsva, h })}\n                />\n                {alpha && (\n                  <Slider\n                    aria-label={t('colorPicker.alpha')}\n                    max={100}\n                    min={0}\n                    value={Math.round(hsva.a * 100)}\n                    classNames={{\n                      indicator: stylex.props(styles.hidden).className,\n                      thumb: stylex.props(styles.sliderThumb).className,\n                      track: stylex.props(styles.alphaTrack).className,\n                    }}\n                    styles={{\n                      track: {\n                        '--lobe-color-picker-alpha': formatColor(hsva, false),\n                      } as CSSProperties,\n                    }}\n                    onChange={(a) => update({ ...hsva, a: a / 100 })}\n                    onChangeComplete={(a) => commit({ ...hsva, a: a / 100 })}\n                  />\n                )}\n                <div {...stylex.props(styles.hexRow)}>\n                  <Input\n                    aria-label=\"HEX\"\n                    className={stylex.props(styles.hexField).className}\n                    prefix={<span {...stylex.props(panelStyles.label)}>HEX</span>}\n                    value={draft}\n                    variant=\"filled\"\n                    onBlur={commitDraft}\n                    onChange={(event) => setDraft(event.target.value)}\n                    onPressEnter={commitDraft}\n                  />\n                  {alpha && (\n                    <InputNumber\n                      aria-label={t('colorPicker.alpha')}\n                      className={stylex.props(styles.hexField, styles.alphaField).className}\n                      controls={false}\n                      max={100}\n                      min={0}\n                      suffix=\"%\"\n                      value={Math.round(hsva.a * 100)}\n                      variant=\"filled\"\n                      onChange={(a) => a !== null && apply({ ...hsva, a: a / 100 })}\n                    />\n                  )}\n                </div>\n                {presets && presets.length > 0 && (\n                  <div\n                    aria-label={t('colorPicker.presets')}\n                    {...stylex.props(styles.presets)}\n                    role=\"group\"\n                  >\n                    {presets.map((color) => (\n                      <button\n                        aria-label={color}\n                        aria-pressed={color.toLowerCase() === hex.slice(0, 7).toLowerCase()}\n                        {...stylex.props(focusRing.info, styles.preset)}\n                        key={color}\n                        style={{ background: color }}\n                        type=\"button\"\n                        onClick={() =>\n                          apply({ ...parseColor(color, hsva.h), a: parseColor(color).a })\n                        }\n                      />\n                    ))}\n                  </div>\n                )}\n              </div>\n            </PopoverPopup>\n          </PopoverPositioner>\n        </PopoverPortal>\n      </PopoverRoot>\n    );\n  },\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":"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"}

package/es/ColorSwatches/ColorSwatches.mjs

@@ -4,6 +4,7 @@ import Icon from "../Icon/Icon.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Center from "../Flex/Center.mjs";
 import { Tooltip } from "../Tooltip/Tooltip.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { safeReadableColor } from "../utils/safeReadableColor.mjs";
 import ColorPicker from "../ColorPicker/ColorPicker.mjs";
 import { styles } from "./style.mjs";
@@ -11,7 +12,6 @@ import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { CheckIcon } from "lucide-react";
-import useControlledState from "use-merge-value";
 import chroma from "chroma-js";
 //#region src/ColorSwatches/ColorSwatches.tsx
 const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultValue, value, style, colors, onChange, size = 24, shape = "circle", texts, ref, ...rest }) => {

package/es/ColorSwatches/ColorSwatches.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatches.mjs","names":["useMergeState","Flexbox"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport { type FC, useMemo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { ColorPicker } from '@/ColorPicker';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport Tooltip from '@/Tooltip';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles } from './style';\nimport type { ColorSwatchesProps } from './type';\n\nconst ColorSwatches: FC<ColorSwatchesProps> = ({\n  enableColorPicker,\n  enableColorSwatches = true,\n  defaultValue,\n  value,\n  style,\n  colors,\n  onChange,\n  size = 24,\n  shape = 'circle',\n  texts,\n  ref,\n  ...rest\n}) => {\n  const [active, setActive] = useMergeState(defaultValue, {\n    defaultValue,\n    onChange,\n    value,\n  });\n\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--color-swatches-size': `${size}px`,\n    }),\n    [size],\n  );\n\n  const isCustomActive = useMemo(\n    () => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active),\n    [active, colors],\n  );\n\n  return (\n    <Flexbox\n      horizontal\n      gap={6}\n      ref={ref}\n      style={{\n        ...cssVariables,\n        flexWrap: 'wrap',\n        ...style,\n      }}\n      {...rest}\n    >\n      {enableColorSwatches &&\n        colors.map((c, i) => {\n          const color = c.color || cssVar.colorPrimary;\n          const isActive = (!active && !c.color) || color === active;\n          // Check if color is transparent or CSS variable (which chroma can't parse)\n          const isTransparent =\n            c.color === 'transparent' ||\n            (c.color &&\n              !c.color.startsWith('var(') &&\n              (() => {\n                try {\n                  return chroma(c.color).alpha() === 0;\n                } catch {\n                  return false;\n                }\n              })());\n          return (\n            <Tooltip key={c?.key || i} title={c.title}>\n              <Center\n                {...stylex.props(\n                  styles.container,\n                  !!isTransparent && styles.transparent,\n                  isActive && styles.activeContainer,\n                )}\n                style={{\n                  background: isTransparent ? undefined : color,\n                  borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n                }}\n                onClick={() => setActive(c.color || undefined)}\n              >\n                {isActive && (\n                  <Icon\n                    color={`color-mix(in srgb, ${safeReadableColor(color)} 33%, transparent)`}\n                    icon={CheckIcon}\n                    size={{ size: 14, strokeWidth: 4 }}\n                    style={{\n                      pointerEvents: 'none',\n                    }}\n                  />\n                )}\n              </Center>\n            </Tooltip>\n          );\n        })}\n      {enableColorPicker && (\n        <Tooltip title={texts?.custom || 'Custom'}>\n          <span style={{ display: 'inline-flex' }}>\n            <ColorPicker\n              presets={enableColorSwatches ? undefined : colors.map((c) => c.color)}\n              value={isCustomActive ? active : undefined}\n              onChangeComplete={setActive}\n            >\n              <button\n                aria-label={texts?.custom || 'Custom'}\n                type=\"button\"\n                {...stylex.props(\n                  styles.picker,\n                  enableColorSwatches && styles.conic,\n                  !!isCustomActive && styles.activePicker,\n                )}\n                style={{\n                  background: enableColorSwatches ? undefined : active,\n                  borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n                }}\n              />\n            </ColorPicker>\n          </span>\n        </Tooltip>\n      )}\n    </Flexbox>\n  );\n};\n\nColorSwatches.displayName = 'ColorSwatches';\n\nexport default ColorSwatches;\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAM,iBAAyC,EAC7C,mBACA,sBAAsB,MACtB,cACA,OACA,OACA,QACA,UACA,OAAO,IACP,QAAQ,UACR,OACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAaA,mBAAc,cAAc;EACtD;EACA;EACA;CACF,CAAC;CAGD,MAAM,eAAe,eAAuC,EAC1D,yBAAyB,GAAG,KAAK,IACnC,IAAI,CAAC,IAAI,CAAC;CACV,MAAM,iBAAiB,cAAc,UAAU,WAAW,OAAO,gBAAgB,CAAC,OAAO,MAAK,MAAK,EAAE,UAAU,MAAM,GAAG,CAAC,QAAQ,MAAM,CAAC;CACxI,OAAO,qBAACC,mBAAD;EAAS,YAAA;EAAW,KAAK;EAAQ;EAAK,OAAO;GAClD,GAAG;GACH,UAAU;GACV,GAAG;EACL;EAAG,GAAI;EAJA,UAAA,CAKF,uBAAuB,OAAO,KAAK,GAAG,MAAM;GAC7C,MAAM,QAAQ,EAAE,SAAS,OAAO;GAChC,MAAM,WAAW,CAAC,UAAU,CAAC,EAAE,SAAS,UAAU;GAElD,MAAM,gBAAgB,EAAE,UAAU,iBAAiB,EAAE,SAAS,CAAC,EAAE,MAAM,WAAW,MAAM,YAAY;IAClG,IAAI;KACF,OAAO,OAAO,EAAE,KAAK,CAAC,CAAC,MAAM,MAAM;IACrC,QAAQ;KACN,OAAO;IACT;GACF,EAAA,CAAG;GACH,OAAO,oBAAC,SAAD;IAA2B,OAAO,EAAE;IACnC,UAAA,oBAAC,QAAD;KAAQ,GAAI,OAAO,MAAM,OAAO,WAAW,CAAC,CAAC,iBAAiB,OAAO,aAAa,YAAY,OAAO,eAAe;KAAG,OAAO;MAClI,YAAY,gBAAgB,KAAA,IAAY;MACxC,cAAc,UAAU,WAAW,QAAQ,OAAO;KACpD;KAAG,eAAe,UAAU,EAAE,SAAS,KAAA,CAAS;KACvC,UAAA,YAAY,oBAAC,MAAD;MAAM,OAAO,sBAAsB,kBAAkB,KAAK,EAAE;MAAqB,MAAM;MAAW,MAAM;OACzH,MAAM;OACN,aAAa;MACf;MAAG,OAAO,EACR,eAAe,OACjB;KAAI,CAAA;IACQ,CAAA;GACD,GAZM,GAAG,OAAO,CAYhB;EACjB,CAAC,GACE,qBAAqB,oBAAC,SAAD;GAAS,OAAO,OAAO,UAAU;GACnD,UAAA,oBAAC,QAAD;IAAM,OAAO,EACf,SAAS,cACX;IACM,UAAA,oBAAC,aAAD;KAAa,SAAS,sBAAsB,KAAA,IAAY,OAAO,KAAI,MAAK,EAAE,KAAK;KAAG,OAAO,iBAAiB,SAAS,KAAA;KAAW,kBAAkB;KAC9I,UAAA,oBAAC,UAAD;MAAQ,cAAY,OAAO,UAAU;MAAU,MAAK;MAAS,GAAI,OAAO,MAAM,OAAO,QAAQ,uBAAuB,OAAO,OAAO,CAAC,CAAC,kBAAkB,OAAO,YAAY;MAAG,OAAO;OACrL,YAAY,sBAAsB,KAAA,IAAY;OAC9C,cAAc,UAAU,WAAW,QAAQ,OAAO;MACpD;KAAI,CAAA;IACW,CAAA;GACT,CAAA;EACC,CAAA,CACJ;;AACb;AACA,cAAc,cAAc"}
+{"version":3,"file":"ColorSwatches.mjs","names":["Flexbox"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport { type FC, useMemo } from 'react';\n\nimport { ColorPicker } from '@/ColorPicker';\nimport { Center, Flexbox } from '@/Flex';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport Tooltip from '@/Tooltip';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles } from './style';\nimport type { ColorSwatchesProps } from './type';\n\nconst ColorSwatches: FC<ColorSwatchesProps> = ({\n  enableColorPicker,\n  enableColorSwatches = true,\n  defaultValue,\n  value,\n  style,\n  colors,\n  onChange,\n  size = 24,\n  shape = 'circle',\n  texts,\n  ref,\n  ...rest\n}) => {\n  const [active, setActive] = useControlledState(defaultValue, {\n    defaultValue,\n    onChange,\n    value,\n  });\n\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--color-swatches-size': `${size}px`,\n    }),\n    [size],\n  );\n\n  const isCustomActive = useMemo(\n    () => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active),\n    [active, colors],\n  );\n\n  return (\n    <Flexbox\n      horizontal\n      gap={6}\n      ref={ref}\n      style={{\n        ...cssVariables,\n        flexWrap: 'wrap',\n        ...style,\n      }}\n      {...rest}\n    >\n      {enableColorSwatches &&\n        colors.map((c, i) => {\n          const color = c.color || cssVar.colorPrimary;\n          const isActive = (!active && !c.color) || color === active;\n          // Check if color is transparent or CSS variable (which chroma can't parse)\n          const isTransparent =\n            c.color === 'transparent' ||\n            (c.color &&\n              !c.color.startsWith('var(') &&\n              (() => {\n                try {\n                  return chroma(c.color).alpha() === 0;\n                } catch {\n                  return false;\n                }\n              })());\n          return (\n            <Tooltip key={c?.key || i} title={c.title}>\n              <Center\n                {...stylex.props(\n                  styles.container,\n                  !!isTransparent && styles.transparent,\n                  isActive && styles.activeContainer,\n                )}\n                style={{\n                  background: isTransparent ? undefined : color,\n                  borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n                }}\n                onClick={() => setActive(c.color || undefined)}\n              >\n                {isActive && (\n                  <Icon\n                    color={`color-mix(in srgb, ${safeReadableColor(color)} 33%, transparent)`}\n                    icon={CheckIcon}\n                    size={{ size: 14, strokeWidth: 4 }}\n                    style={{\n                      pointerEvents: 'none',\n                    }}\n                  />\n                )}\n              </Center>\n            </Tooltip>\n          );\n        })}\n      {enableColorPicker && (\n        <Tooltip title={texts?.custom || 'Custom'}>\n          <span style={{ display: 'inline-flex' }}>\n            <ColorPicker\n              presets={enableColorSwatches ? undefined : colors.map((c) => c.color)}\n              value={isCustomActive ? active : undefined}\n              onChangeComplete={setActive}\n            >\n              <button\n                aria-label={texts?.custom || 'Custom'}\n                type=\"button\"\n                {...stylex.props(\n                  styles.picker,\n                  enableColorSwatches && styles.conic,\n                  !!isCustomActive && styles.activePicker,\n                )}\n                style={{\n                  background: enableColorSwatches ? undefined : active,\n                  borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n                }}\n              />\n            </ColorPicker>\n          </span>\n        </Tooltip>\n      )}\n    </Flexbox>\n  );\n};\n\nColorSwatches.displayName = 'ColorSwatches';\n\nexport default ColorSwatches;\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAM,iBAAyC,EAC7C,mBACA,sBAAsB,MACtB,cACA,OACA,OACA,QACA,UACA,OAAO,IACP,QAAQ,UACR,OACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,cAAc;EAC3D;EACA;EACA;CACF,CAAC;CAGD,MAAM,eAAe,eAAuC,EAC1D,yBAAyB,GAAG,KAAK,IACnC,IAAI,CAAC,IAAI,CAAC;CACV,MAAM,iBAAiB,cAAc,UAAU,WAAW,OAAO,gBAAgB,CAAC,OAAO,MAAK,MAAK,EAAE,UAAU,MAAM,GAAG,CAAC,QAAQ,MAAM,CAAC;CACxI,OAAO,qBAACA,mBAAD;EAAS,YAAA;EAAW,KAAK;EAAQ;EAAK,OAAO;GAClD,GAAG;GACH,UAAU;GACV,GAAG;EACL;EAAG,GAAI;EAJA,UAAA,CAKF,uBAAuB,OAAO,KAAK,GAAG,MAAM;GAC7C,MAAM,QAAQ,EAAE,SAAS,OAAO;GAChC,MAAM,WAAW,CAAC,UAAU,CAAC,EAAE,SAAS,UAAU;GAElD,MAAM,gBAAgB,EAAE,UAAU,iBAAiB,EAAE,SAAS,CAAC,EAAE,MAAM,WAAW,MAAM,YAAY;IAClG,IAAI;KACF,OAAO,OAAO,EAAE,KAAK,CAAC,CAAC,MAAM,MAAM;IACrC,QAAQ;KACN,OAAO;IACT;GACF,EAAA,CAAG;GACH,OAAO,oBAAC,SAAD;IAA2B,OAAO,EAAE;IACnC,UAAA,oBAAC,QAAD;KAAQ,GAAI,OAAO,MAAM,OAAO,WAAW,CAAC,CAAC,iBAAiB,OAAO,aAAa,YAAY,OAAO,eAAe;KAAG,OAAO;MAClI,YAAY,gBAAgB,KAAA,IAAY;MACxC,cAAc,UAAU,WAAW,QAAQ,OAAO;KACpD;KAAG,eAAe,UAAU,EAAE,SAAS,KAAA,CAAS;KACvC,UAAA,YAAY,oBAAC,MAAD;MAAM,OAAO,sBAAsB,kBAAkB,KAAK,EAAE;MAAqB,MAAM;MAAW,MAAM;OACzH,MAAM;OACN,aAAa;MACf;MAAG,OAAO,EACR,eAAe,OACjB;KAAI,CAAA;IACQ,CAAA;GACD,GAZM,GAAG,OAAO,CAYhB;EACjB,CAAC,GACE,qBAAqB,oBAAC,SAAD;GAAS,OAAO,OAAO,UAAU;GACnD,UAAA,oBAAC,QAAD;IAAM,OAAO,EACf,SAAS,cACX;IACM,UAAA,oBAAC,aAAD;KAAa,SAAS,sBAAsB,KAAA,IAAY,OAAO,KAAI,MAAK,EAAE,KAAK;KAAG,OAAO,iBAAiB,SAAS,KAAA;KAAW,kBAAkB;KAC9I,UAAA,oBAAC,UAAD;MAAQ,cAAY,OAAO,UAAU;MAAU,MAAK;MAAS,GAAI,OAAO,MAAM,OAAO,QAAQ,uBAAuB,OAAO,OAAO,CAAC,CAAC,kBAAkB,OAAO,YAAY;MAAG,OAAO;OACrL,YAAY,sBAAsB,KAAA,IAAY;OAC9C,cAAc,UAAU,WAAW,QAAQ,OAAO;MACpD;KAAI,CAAA;IACW,CAAA;GACT,CAAA;EACC,CAAA,CACJ;;AACb;AACA,cAAc,cAAc"}

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"}