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

package/es/ActionIcon/style.mjs

@@ -14,7 +14,7 @@ const styles = {
 		$$css: true
 	},
 	dangerRoot: {
-		kMwMTN: "lb53gy9q lby09ll3 lbuvp0lo",
+		kMwMTN: "lbnn15ax lby09ll3 lbuvp0lo",
 		$$css: true
 	},
 	glass: {

package/es/ActionIcon/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ActionIcon/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst hover = ':hover:not(:active)';\nconst pressed = ':active:not(:disabled, [aria-disabled=\"true\"])';\n\nexport const styles = stylex.create({\n  active: {\n    backgroundColor: cssVar.colorFillSecondary,\n  },\n  activeFill: {\n    backgroundColor: { default: cssVar.colorFillSecondary, [pressed]: cssVar.colorFill },\n  },\n  activeOutlined: {\n    backgroundColor: { 'default': cssVar.colorFillSecondary, ':hover': cssVar.colorFill },\n  },\n  dangerRoot: {\n    color: {\n      'default': cssVar.colorTextTertiary,\n      [hover]: cssVar.colorError,\n      ':active': cssVar.colorErrorActive,\n    },\n  },\n  glass: {\n    backdropFilter: 'saturate(150%) blur(10px)',\n  },\n  root: {\n    color: {\n      'default': cssVar.colorTextTertiary,\n      [hover]: cssVar.colorTextSecondary,\n      ':active': cssVar.colorText,\n    },\n  },\n  shadow: {\n    boxShadow: `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`,\n  },\n});\n\nexport const actionIconStyles = Object.fromEntries(\n  Object.entries(styles).map(([key, value]) => [key, stylex.props(value).className ?? '']),\n) as Record<keyof typeof styles, string>;\n"],"mappings":";;AAKA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,OAAO;EACP,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAa,mBAAmB,OAAO,YAAY,OAAO,QAAQ,MAAM,CAAC,CAAC,KAAK,CAAC,KAAK,WAAW,CAAC,KAAK,OAAO,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ActionIcon/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst hover = ':hover:not(:active)';\nconst pressed = ':active:not(:disabled, [aria-disabled=\"true\"])';\n\nexport const styles = stylex.create({\n  active: {\n    backgroundColor: cssVar.colorFillSecondary,\n  },\n  activeFill: {\n    backgroundColor: { default: cssVar.colorFillSecondary, [pressed]: cssVar.colorFill },\n  },\n  activeOutlined: {\n    backgroundColor: { 'default': cssVar.colorFillSecondary, ':hover': cssVar.colorFill },\n  },\n  dangerRoot: {\n    color: {\n      'default': `color-mix(in srgb, ${cssVar.colorError} 66%, transparent)`,\n      [hover]: cssVar.colorError,\n      ':active': cssVar.colorErrorActive,\n    },\n  },\n  glass: {\n    backdropFilter: 'saturate(150%) blur(10px)',\n  },\n  root: {\n    color: {\n      'default': cssVar.colorTextTertiary,\n      [hover]: cssVar.colorTextSecondary,\n      ':active': cssVar.colorText,\n    },\n  },\n  shadow: {\n    boxShadow: `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`,\n  },\n});\n\nexport const actionIconStyles = Object.fromEntries(\n  Object.entries(styles).map(([key, value]) => [key, stylex.props(value).className ?? '']),\n) as Record<keyof typeof styles, string>;\n"],"mappings":";;AAKA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,OAAO;EACP,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAa,mBAAmB,OAAO,YAAY,OAAO,QAAQ,MAAM,CAAC,CAAC,KAAK,CAAC,KAAK,WAAW,CAAC,KAAK,OAAO,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC"}

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/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":"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"}
+{"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,17 +4,17 @@ 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";
+import CustomPicker from "./CustomPicker.mjs";
 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 }) => {
+const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultValue, value, style, colors, onChange, size = 24, shape = "circle", texts, renderPicker, ref, ...rest }) => {
 	const [active, setActive] = useControlledState(defaultValue, {
 		defaultValue,
 		onChange,
@@ -22,6 +22,20 @@ const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultV
 	});
 	const cssVariables = useMemo(() => ({ "--color-swatches-size": `${size}px` }), [size]);
 	const isCustomActive = useMemo(() => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active), [active, colors]);
+	const pickerProps = {
+		active: !!isCustomActive,
+		onChange: setActive,
+		presets: colors.map((c) => c.color),
+		shape,
+		size,
+		value: isCustomActive ? active : void 0
+	};
+	const defaultPicker = enableColorPicker && /* @__PURE__ */ jsx(CustomPicker, {
+		...pickerProps,
+		current: active,
+		label: texts?.custom || "Custom",
+		standalone: !enableColorSwatches
+	});
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		horizontal: true,
 		gap: 6,
@@ -62,26 +76,7 @@ const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultV
 					})
 				})
 			}, c?.key || i);
-		}), enableColorPicker && /* @__PURE__ */ jsx(Tooltip, {
-			title: texts?.custom || "Custom",
-			children: /* @__PURE__ */ jsx("span", {
-				style: { display: "inline-flex" },
-				children: /* @__PURE__ */ jsx(ColorPicker, {
-					presets: enableColorSwatches ? void 0 : colors.map((c) => c.color),
-					value: isCustomActive ? active : void 0,
-					onChangeComplete: setActive,
-					children: /* @__PURE__ */ jsx("button", {
-						"aria-label": texts?.custom || "Custom",
-						type: "button",
-						...stylex.props(styles.picker, enableColorSwatches && styles.conic, !!isCustomActive && styles.activePicker),
-						style: {
-							background: enableColorSwatches ? void 0 : active,
-							borderRadius: shape === "circle" ? "50%" : cssVar.borderRadius
-						}
-					})
-				})
-			})
-		})]
+		}), enableColorPicker && (renderPicker ? renderPicker(pickerProps, defaultPicker) : defaultPicker)]
 	});
 };
 ColorSwatches.displayName = "ColorSwatches";

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 { 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 CustomPicker from './CustomPicker';\nimport { styles } from './style';\nimport type { ColorSwatchesPickerRenderProps, 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  renderPicker,\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  const pickerProps: ColorSwatchesPickerRenderProps = {\n    active: !!isCustomActive,\n    onChange: setActive,\n    presets: colors.map((c) => c.color),\n    shape,\n    size,\n    value: isCustomActive ? active : undefined,\n  };\n\n  const defaultPicker = enableColorPicker && (\n    <CustomPicker\n      {...pickerProps}\n      current={active}\n      label={texts?.custom || 'Custom'}\n      standalone={!enableColorSwatches}\n    />\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        (renderPicker ? renderPicker(pickerProps, defaultPicker) : defaultPicker)}\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,cACA,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,MAAM,cAA8C;EAClD,QAAQ,CAAC,CAAC;EACV,UAAU;EACV,SAAS,OAAO,KAAI,MAAK,EAAE,KAAK;EAChC;EACA;EACA,OAAO,iBAAiB,SAAS,KAAA;CACnC;CACA,MAAM,gBAAgB,qBAAqB,oBAAC,cAAD;EAAc,GAAI;EAAa,SAAS;EAAQ,OAAO,OAAO,UAAU;EAAU,YAAY,CAAC;CAAsB,CAAA;CAChK,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,sBAAsB,eAAe,aAAa,aAAa,aAAa,IAAI,cAC1E;;AACb;AACA,cAAc,cAAc"}

package/es/ColorSwatches/CustomPicker.mjs

@@ -0,0 +1,101 @@
+"use client";
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
+import Icon from "../Icon/Icon.mjs";
+import { Tooltip } from "../Tooltip/Tooltip.mjs";
+import { safeReadableColor } from "../utils/safeReadableColor.mjs";
+import ColorPicker from "../ColorPicker/ColorPicker.mjs";
+import { chipMarker } from "./marker.stylex.mjs";
+import { styles } from "./style.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { CheckIcon, PencilIcon, PlusIcon } from "lucide-react";
+//#region src/ColorSwatches/CustomPicker.tsx
+const CustomPicker = ({ active, current, label, onChange, presets, shape, standalone, value }) => {
+	const borderRadius = shape === "circle" ? "50%" : cssVar.borderRadius;
+	if (standalone) return /* @__PURE__ */ jsx(Tooltip, {
+		title: label,
+		children: /* @__PURE__ */ jsx("span", {
+			style: { display: "inline-flex" },
+			children: /* @__PURE__ */ jsx(ColorPicker, {
+				presets,
+				value,
+				onChangeComplete: onChange,
+				children: /* @__PURE__ */ jsx("button", {
+					"aria-label": label,
+					type: "button",
+					...stylex.props(styles.picker, active && styles.activePicker),
+					style: {
+						background: current,
+						borderRadius
+					}
+				})
+			})
+		})
+	});
+	const iconColor = value ? `color-mix(in srgb, ${safeReadableColor(value)} 33%, transparent)` : void 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			...stylex.props(styles.divider)
+		}),
+		active && value && /* @__PURE__ */ jsx(ColorPicker, {
+			value,
+			onChangeComplete: onChange,
+			children: /* @__PURE__ */ jsxs("button", {
+				"aria-label": value,
+				"aria-pressed": "true",
+				type: "button",
+				...stylex.props(styles.picker, styles.chip, styles.activePicker, chipMarker),
+				style: {
+					background: value,
+					borderRadius
+				},
+				children: [/* @__PURE__ */ jsx(Icon, {
+					className: stylex.props(styles.chipIcon, styles.chipCheck).className,
+					color: iconColor,
+					icon: CheckIcon,
+					size: {
+						size: 14,
+						strokeWidth: 4
+					}
+				}), /* @__PURE__ */ jsx(Icon, {
+					className: stylex.props(styles.chipIcon, styles.chipEdit).className,
+					color: iconColor,
+					icon: PencilIcon,
+					size: {
+						size: 12,
+						strokeWidth: 3
+					}
+				})]
+			})
+		}),
+		/* @__PURE__ */ jsx(Tooltip, {
+			title: label,
+			children: /* @__PURE__ */ jsx("span", {
+				style: { display: "inline-flex" },
+				children: /* @__PURE__ */ jsx(ColorPicker, {
+					value,
+					onChangeComplete: onChange,
+					children: /* @__PURE__ */ jsx("button", {
+						"aria-label": label,
+						type: "button",
+						...stylex.props(styles.picker, styles.conic, styles.add),
+						style: { borderRadius },
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: PlusIcon,
+							size: {
+								size: 12,
+								strokeWidth: 3
+							}
+						})
+					})
+				})
+			})
+		})
+	] });
+};
+CustomPicker.displayName = "ColorSwatchesCustomPicker";
+//#endregion
+export { CustomPicker as default };
+
+//# sourceMappingURL=CustomPicker.mjs.map

package/es/ColorSwatches/CustomPicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomPicker.mjs","names":[],"sources":["../../src/ColorSwatches/CustomPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckIcon, PencilIcon, PlusIcon } from 'lucide-react';\nimport { type FC } from 'react';\n\nimport { ColorPicker } from '@/ColorPicker';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport Tooltip from '@/Tooltip';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { chipMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { ColorSwatchesPickerRenderProps } from './type';\n\ninterface CustomPickerProps extends ColorSwatchesPickerRenderProps {\n  current?: string;\n  label: string;\n  standalone: boolean;\n}\n\nconst CustomPicker: FC<CustomPickerProps> = ({\n  active,\n  current,\n  label,\n  onChange,\n  presets,\n  shape,\n  standalone,\n  value,\n}) => {\n  const borderRadius = shape === 'circle' ? '50%' : cssVar.borderRadius;\n\n  if (standalone)\n    return (\n      <Tooltip title={label}>\n        <span style={{ display: 'inline-flex' }}>\n          <ColorPicker presets={presets} value={value} onChangeComplete={onChange}>\n            <button\n              aria-label={label}\n              type=\"button\"\n              {...stylex.props(styles.picker, active && styles.activePicker)}\n              style={{ background: current, borderRadius }}\n            />\n          </ColorPicker>\n        </span>\n      </Tooltip>\n    );\n\n  const iconColor = value\n    ? `color-mix(in srgb, ${safeReadableColor(value)} 33%, transparent)`\n    : undefined;\n\n  return (\n    <>\n      <span aria-hidden {...stylex.props(styles.divider)} />\n      {active && value && (\n        <ColorPicker value={value} onChangeComplete={onChange}>\n          <button\n            aria-label={value}\n            aria-pressed=\"true\"\n            type=\"button\"\n            {...stylex.props(styles.picker, styles.chip, styles.activePicker, chipMarker)}\n            style={{ background: value, borderRadius }}\n          >\n            <Icon\n              className={stylex.props(styles.chipIcon, styles.chipCheck).className}\n              color={iconColor}\n              icon={CheckIcon}\n              size={{ size: 14, strokeWidth: 4 }}\n            />\n            <Icon\n              className={stylex.props(styles.chipIcon, styles.chipEdit).className}\n              color={iconColor}\n              icon={PencilIcon}\n              size={{ size: 12, strokeWidth: 3 }}\n            />\n          </button>\n        </ColorPicker>\n      )}\n      <Tooltip title={label}>\n        <span style={{ display: 'inline-flex' }}>\n          <ColorPicker value={value} onChangeComplete={onChange}>\n            <button\n              aria-label={label}\n              type=\"button\"\n              {...stylex.props(styles.picker, styles.conic, styles.add)}\n              style={{ borderRadius }}\n            >\n              <Icon icon={PlusIcon} size={{ size: 12, strokeWidth: 3 }} />\n            </button>\n          </ColorPicker>\n        </span>\n      </Tooltip>\n    </>\n  );\n};\n\nCustomPicker.displayName = 'ColorSwatchesCustomPicker';\n\nexport default CustomPicker;\n"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,gBAAuC,EAC3C,QACA,SACA,OACA,UACA,SACA,OACA,YACA,YACI;CACJ,MAAM,eAAe,UAAU,WAAW,QAAQ,OAAO;CACzD,IAAI,YAAY,OAAO,oBAAC,SAAD;EAAS,OAAO;EACjC,UAAA,oBAAC,QAAD;GAAM,OAAO,EACf,SAAS,cACX;GACM,UAAA,oBAAC,aAAD;IAAsB;IAAgB;IAAO,kBAAkB;IAC7D,UAAA,oBAAC,UAAD;KAAQ,cAAY;KAAO,MAAK;KAAS,GAAI,OAAO,MAAM,OAAO,QAAQ,UAAU,OAAO,YAAY;KAAG,OAAO;MAClH,YAAY;MACZ;KACF;IAAI,CAAA;GACW,CAAA;EACT,CAAA;CACC,CAAA;CACb,MAAM,YAAY,QAAQ,sBAAsB,kBAAkB,KAAK,EAAE,sBAAsB,KAAA;CAC/F,OAAO,qBAAA,UAAA,EAAA,UAAA;EACH,oBAAC,QAAD;GAAM,eAAA;GAAY,GAAI,OAAO,MAAM,OAAO,OAAO;EAAI,CAAA;EACpD,UAAU,SAAS,oBAAC,aAAD;GAAoB;GAAO,kBAAkB;GAC7D,UAAA,qBAAC,UAAD;IAAQ,cAAY;IAAO,gBAAa;IAAO,MAAK;IAAS,GAAI,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,cAAc,UAAU;IAAG,OAAO;KACrJ,YAAY;KACZ;IACF;IAHI,UAAA,CAIE,oBAAC,MAAD;KAAM,WAAW,OAAO,MAAM,OAAO,UAAU,OAAO,SAAS,CAAC,CAAC;KAAW,OAAO;KAAW,MAAM;KAAW,MAAM;MACvH,MAAM;MACN,aAAa;KACf;IAAI,CAAA,GACA,oBAAC,MAAD;KAAM,WAAW,OAAO,MAAM,OAAO,UAAU,OAAO,QAAQ,CAAC,CAAC;KAAW,OAAO;KAAW,MAAM;KAAY,MAAM;MACvH,MAAM;MACN,aAAa;KACf;IAAI,CAAA,CACM;;EACG,CAAA;EACf,oBAAC,SAAD;GAAS,OAAO;GACd,UAAA,oBAAC,QAAD;IAAM,OAAO,EACb,SAAS,cACX;IACI,UAAA,oBAAC,aAAD;KAAoB;KAAO,kBAAkB;KAC3C,UAAA,oBAAC,UAAD;MAAQ,cAAY;MAAO,MAAK;MAAS,GAAI,OAAO,MAAM,OAAO,QAAQ,OAAO,OAAO,OAAO,GAAG;MAAG,OAAO,EAC3G,aACF;MACI,UAAA,oBAAC,MAAD;OAAM,MAAM;OAAU,MAAM;QAC5B,MAAM;QACN,aAAa;OACf;MAAI,CAAA;KACI,CAAA;IACG,CAAA;GACT,CAAA;EACC,CAAA;CACT,EAAA,CAAA;AACN;AACA,aAAa,cAAc"}

package/es/ColorSwatches/index.d.mts

@@ -1,3 +1,3 @@
-import { ColorSwatchesProps } from "./type.mjs";
+import { ColorSwatchesPickerRenderProps, ColorSwatchesProps } from "./type.mjs";
 import ColorSwatches from "./ColorSwatches.mjs";
-export { ColorSwatchesProps, ColorSwatches as default };
+export { ColorSwatchesPickerRenderProps, ColorSwatchesProps, ColorSwatches as default };

package/es/ColorSwatches/marker.stylex.mjs

@@ -0,0 +1,9 @@
+//#region src/ColorSwatches/marker.stylex.ts
+const chipMarker = {
+	lb1pgf9nm: "lb1pgf9nm",
+	$$css: true
+};
+//#endregion
+export { chipMarker };
+
+//# sourceMappingURL=marker.stylex.mjs.map

package/es/ColorSwatches/marker.stylex.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.stylex.mjs","names":[],"sources":["../../src/ColorSwatches/marker.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const chipMarker = stylex.defineMarker();\n"],"mappings":";AACA,MAAa,aAAa;CACxB,WAAW;CACX,OAAO;AACT"}