@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.11

package/es/Rate/Rate.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rate.mjs","names":[],"sources":["../../src/Rate/Rate.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Star } from 'lucide-react';\nimport { type KeyboardEvent, memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { RateProps } from './type';\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst formatValue = (value: number) => String(Math.round(value * 100) / 100);\n\nconst Rate = memo<RateProps>(\n  ({\n    allowHalf = false,\n    character,\n    className,\n    color = cssVar.colorWarning,\n    count = 5,\n    defaultValue = 0,\n    disabled = false,\n    gap,\n    onChange,\n    onKeyDown,\n    onPointerLeave,\n    readOnly = false,\n    size = 20,\n    style,\n    value,\n    ...rest\n  }) => {\n    const [mergedValue, setMergedValue] = useControlledState(defaultValue, { onChange, value });\n    const [hoverValue, setHoverValue] = useState<number | null>(null);\n\n    const interactive = !readOnly && !disabled;\n    const step = allowHalf ? 0.5 : 1;\n    const displayValue = clamp(hoverValue ?? mergedValue, 0, count);\n    const label = `${formatValue(clamp(mergedValue, 0, count))} out of ${count}`;\n    const icon = character ?? <Star fill=\"currentColor\" size={size} />;\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n      if (!interactive || event.defaultPrevented) return;\n\n      const next = {\n        ArrowDown: mergedValue - step,\n        ArrowLeft: mergedValue - step,\n        ArrowRight: mergedValue + step,\n        ArrowUp: mergedValue + step,\n        End: count,\n        Home: 0,\n      }[event.key];\n      if (next === undefined) return;\n\n      event.preventDefault();\n      setMergedValue(clamp(Math.round(next / step) * step, 0, count));\n    };\n\n    const a11yProps = readOnly\n      ? { 'aria-label': label, 'role': 'img' }\n      : {\n          'aria-disabled': disabled || undefined,\n          'aria-valuemax': count,\n          'aria-valuemin': 0,\n          'aria-valuenow': mergedValue,\n          'aria-valuetext': label,\n          'role': 'slider',\n          'tabIndex': disabled ? -1 : 0,\n        };\n\n    return (\n      <div\n        onKeyDown={handleKeyDown}\n        onPointerLeave={(event) => {\n          onPointerLeave?.(event);\n          setHoverValue(null);\n        }}\n        {...a11yProps}\n        {...rest}\n        {...styleProps(styles.root, className, { gap: gap ?? size / 2, ...style })}\n      >\n        {Array.from({ length: count }, (_, index) => {\n          const fill = clamp(displayValue - index, 0, 1);\n          const targets = allowHalf ? [index + 0.5, index + 1] : [index + 1];\n\n          return (\n            <span\n              aria-hidden=\"true\"\n              data-index={index}\n              key={index}\n              {...styleProps([styles.star, interactive && styles.starInteractive], undefined, {\n                fontSize: size,\n                height: size,\n              })}\n            >\n              <span {...styleProps([styles.icon, styles.empty], undefined, { minWidth: size })}>\n                {icon}\n              </span>\n              <span {...styleProps(styles.fill, undefined, { color, width: `${fill * 100}%` })}>\n                <span {...styleProps(styles.icon, undefined, { minWidth: size })}>{icon}</span>\n              </span>\n              {interactive &&\n                targets.map((target) => (\n                  <span\n                    {...stylex.props(styles.half)}\n                    data-half={target % 1 === 0 && allowHalf ? 'end' : 'start'}\n                    data-value={target}\n                    key={target}\n                    style={allowHalf ? undefined : { width: '100%' }}\n                    onClick={() => setMergedValue(target)}\n                    onPointerEnter={() => setHoverValue(target)}\n                  />\n                ))}\n            </span>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nRate.displayName = 'Rate';\n\nexport default Rate;\n"],"mappings":"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"}
+{"version":3,"file":"Rate.mjs","names":[],"sources":["../../src/Rate/Rate.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Star } from 'lucide-react';\nimport { type KeyboardEvent, memo, useState } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { RateProps } from './type';\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst formatValue = (value: number) => String(Math.round(value * 100) / 100);\n\nconst Rate = memo<RateProps>(\n  ({\n    allowHalf = false,\n    character,\n    className,\n    color = cssVar.colorWarning,\n    count = 5,\n    defaultValue = 0,\n    disabled = false,\n    gap,\n    onChange,\n    onKeyDown,\n    onPointerLeave,\n    readOnly = false,\n    size = 20,\n    style,\n    value,\n    ...rest\n  }) => {\n    const [mergedValue, setMergedValue] = useControlledState(defaultValue, { onChange, value });\n    const [hoverValue, setHoverValue] = useState<number | null>(null);\n\n    const interactive = !readOnly && !disabled;\n    const step = allowHalf ? 0.5 : 1;\n    const displayValue = clamp(hoverValue ?? mergedValue, 0, count);\n    const label = `${formatValue(clamp(mergedValue, 0, count))} out of ${count}`;\n    const icon = character ?? <Star fill=\"currentColor\" size={size} />;\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n      if (!interactive || event.defaultPrevented) return;\n\n      const next = {\n        ArrowDown: mergedValue - step,\n        ArrowLeft: mergedValue - step,\n        ArrowRight: mergedValue + step,\n        ArrowUp: mergedValue + step,\n        End: count,\n        Home: 0,\n      }[event.key];\n      if (next === undefined) return;\n\n      event.preventDefault();\n      setMergedValue(clamp(Math.round(next / step) * step, 0, count));\n    };\n\n    const a11yProps = readOnly\n      ? { 'aria-label': label, 'role': 'img' }\n      : {\n          'aria-disabled': disabled || undefined,\n          'aria-valuemax': count,\n          'aria-valuemin': 0,\n          'aria-valuenow': mergedValue,\n          'aria-valuetext': label,\n          'role': 'slider',\n          'tabIndex': disabled ? -1 : 0,\n        };\n\n    return (\n      <div\n        onKeyDown={handleKeyDown}\n        onPointerLeave={(event) => {\n          onPointerLeave?.(event);\n          setHoverValue(null);\n        }}\n        {...a11yProps}\n        {...rest}\n        {...styleProps(styles.root, className, { gap: gap ?? size / 2, ...style })}\n      >\n        {Array.from({ length: count }, (_, index) => {\n          const fill = clamp(displayValue - index, 0, 1);\n          const targets = allowHalf ? [index + 0.5, index + 1] : [index + 1];\n\n          return (\n            <span\n              aria-hidden=\"true\"\n              data-index={index}\n              key={index}\n              {...styleProps([styles.star, interactive && styles.starInteractive], undefined, {\n                fontSize: size,\n                height: size,\n              })}\n            >\n              <span {...styleProps([styles.icon, styles.empty], undefined, { minWidth: size })}>\n                {icon}\n              </span>\n              <span {...styleProps(styles.fill, undefined, { color, width: `${fill * 100}%` })}>\n                <span {...styleProps(styles.icon, undefined, { minWidth: size })}>{icon}</span>\n              </span>\n              {interactive &&\n                targets.map((target) => (\n                  <span\n                    {...stylex.props(styles.half)}\n                    data-half={target % 1 === 0 && allowHalf ? 'end' : 'start'}\n                    data-value={target}\n                    key={target}\n                    style={allowHalf ? undefined : { width: '100%' }}\n                    onClick={() => setMergedValue(target)}\n                    onPointerEnter={() => setHoverValue(target)}\n                  />\n                ))}\n            </span>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nRate.displayName = 'Rate';\n\nexport default Rate;\n"],"mappings":"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"}

package/es/ScrollArea/atoms.mjs

@@ -3,13 +3,13 @@ import { styleProps } from "../styles/stylex/props.mjs";
 import { focusRing } from "../styles/stylex/focusRing.mjs";
 import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { ScrollArea } from "@base-ui/react/scroll-area";
 //#region src/ScrollArea/atoms.tsx
 const classNameOf = (styles) => styleProps(styles).className;
 const mergeStateClassName = (base, className) => {
-	if (typeof className === "function") return (state) => clsx(base, className(state));
-	return clsx(base, className);
+	if (typeof className === "function") return (state) => clsx$1(base, className(state));
+	return clsx$1(base, className);
 };
 const ScrollAreaRoot = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx(ScrollArea.Root, {
@@ -28,7 +28,7 @@ const resolveFadeClass = (scrollFade) => {
 const ScrollAreaViewportImpl = ({ className, scrollFade = false, xstyle, ...rest }) => {
 	return /* @__PURE__ */ jsx(ScrollArea.Viewport, {
 		...rest,
-		className: mergeStateClassName(clsx(classNameOf([
+		className: mergeStateClassName(clsx$1(classNameOf([
 			styles.viewport,
 			focusRing.info,
 			xstyle

package/es/ScrollArea/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["BaseScrollArea"],"sources":["../../src/ScrollArea/atoms.tsx"],"sourcesContent":["'use client';\n\nimport './global.css';\n\nimport { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport clsx from 'clsx';\nimport type React from 'react';\nimport type { ReactElement } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\n\nconst classNameOf = (styles: Parameters<typeof styleProps>[0]) => styleProps(styles).className;\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\nexport type ScrollAreaRootProps = React.ComponentProps<typeof BaseScrollArea.Root>;\n\nexport type ScrollAreaFadeOrientation = 'vertical' | 'horizontal' | 'both';\n\nexport type ScrollAreaViewportProps = React.ComponentProps<typeof BaseScrollArea.Viewport> & {\n  /**\n   * Enable gradient scroll fade on the viewport edges.\n   *\n   * - `true` / `'vertical'`: fade top and bottom edges.\n   * - `'horizontal'`: fade start and end edges.\n   * - `'both'`: fade all four edges (combined via `mask-composite: intersect`).\n   * - `false`: no fade.\n   *\n   * @default false\n   */\n  scrollFade?: boolean | ScrollAreaFadeOrientation;\n};\nexport type ScrollAreaContentProps = React.ComponentProps<typeof BaseScrollArea.Content>;\nexport type ScrollAreaScrollbarProps = React.ComponentProps<typeof BaseScrollArea.Scrollbar>;\nexport type ScrollAreaThumbProps = React.ComponentProps<typeof BaseScrollArea.Thumb>;\nexport type ScrollAreaCornerProps = React.ComponentProps<typeof BaseScrollArea.Corner>;\n\nexport const ScrollAreaRoot = ({ className, ...rest }: ScrollAreaRootProps) => {\n  return (\n    <BaseScrollArea.Root\n      {...rest}\n      className={mergeStateClassName(classNameOf(styles.root), className) as any}\n    />\n  );\n};\n\nScrollAreaRoot.displayName = 'ScrollAreaRoot';\n\nconst resolveFadeClass = (\n  scrollFade: ScrollAreaViewportProps['scrollFade'],\n): string | undefined => {\n  if (!scrollFade) return undefined;\n  const orientation: ScrollAreaFadeOrientation = scrollFade === true ? 'vertical' : scrollFade;\n  if (orientation === 'horizontal') return 'lobe-scroll-area-fade-horizontal';\n  if (orientation === 'both') return 'lobe-scroll-area-fade-both';\n  return 'lobe-scroll-area-fade';\n};\n\nexport const ScrollAreaViewportImpl = ({\n  className,\n  scrollFade = false,\n  xstyle,\n  ...rest\n}: ScrollAreaViewportProps & { xstyle?: Parameters<typeof styleProps>[0] }) => {\n  return (\n    <BaseScrollArea.Viewport\n      {...rest}\n      className={\n        mergeStateClassName(\n          clsx(\n            classNameOf([styles.viewport, focusRing.info, xstyle]),\n            resolveFadeClass(scrollFade),\n          ),\n          className,\n        ) as any\n      }\n    />\n  );\n};\n\nScrollAreaViewportImpl.displayName = 'ScrollAreaViewport';\n\nexport const ScrollAreaViewport = ScrollAreaViewportImpl as (\n  props: ScrollAreaViewportProps,\n) => ReactElement;\n\nexport const ScrollAreaContent = BaseScrollArea.Content;\n\nexport const ScrollAreaScrollbar = ({ className, ...rest }: ScrollAreaScrollbarProps) => {\n  return (\n    <BaseScrollArea.Scrollbar\n      {...rest}\n      className={mergeStateClassName(classNameOf(styles.scrollbar), className) as any}\n    />\n  );\n};\n\nScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';\n\nexport const ScrollAreaThumb = ({ className, ...rest }: ScrollAreaThumbProps) => {\n  return (\n    <BaseScrollArea.Thumb\n      {...rest}\n      className={mergeStateClassName(classNameOf(styles.thumb), className) as any}\n    />\n  );\n};\n\nScrollAreaThumb.displayName = 'ScrollAreaThumb';\n\nexport const ScrollAreaCorner = ({ className, ...rest }: ScrollAreaCornerProps) => {\n  return (\n    <BaseScrollArea.Corner\n      {...rest}\n      className={mergeStateClassName(classNameOf(styles.corner), className) as any}\n    />\n  );\n};\n\nScrollAreaCorner.displayName = 'ScrollAreaCorner';\n"],"mappings":";;;;;;;;AAcA,MAAM,eAAe,WAA6C,WAAW,MAAM,CAAC,CAAC;AAErF,MAAM,uBACJ,MACA,cACG;CACH,IAAI,OAAO,cAAc,YAAY,QAAQ,UAAkB,KAAK,MAAM,UAAU,KAAK,CAAC;CAC1F,OAAO,KAAK,MAAM,SAAS;AAC7B;AAwBA,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAAgC;CAC7E,OACE,oBAACA,WAAe,MAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,YAAY,OAAO,IAAI,GAAG,SAAS;CACnE,CAAA;AAEL;AAEA,eAAe,cAAc;AAE7B,MAAM,oBACJ,eACuB;CACvB,IAAI,CAAC,YAAY,OAAO,KAAA;CACxB,MAAM,cAAyC,eAAe,OAAO,aAAa;CAClF,IAAI,gBAAgB,cAAc,OAAO;CACzC,IAAI,gBAAgB,QAAQ,OAAO;CACnC,OAAO;AACT;AAEA,MAAa,0BAA0B,EACrC,WACA,aAAa,OACb,QACA,GAAG,WAC0E;CAC7E,OACE,oBAACA,WAAe,UAAhB;EACE,GAAI;EACJ,WACE,oBACE,KACE,YAAY;GAAC,OAAO;GAAU,UAAU;GAAM;EAAM,CAAC,GACrD,iBAAiB,UAAU,CAC7B,GACA,SACF;CAEH,CAAA;AAEL;AAEA,uBAAuB,cAAc;AAErC,MAAa,qBAAqB;AAIlC,MAAa,oBAAoBA,WAAe;AAEhD,MAAa,uBAAuB,EAAE,WAAW,GAAG,WAAqC;CACvF,OACE,oBAACA,WAAe,WAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,YAAY,OAAO,SAAS,GAAG,SAAS;CACxE,CAAA;AAEL;AAEA,oBAAoB,cAAc;AAElC,MAAa,mBAAmB,EAAE,WAAW,GAAG,WAAiC;CAC/E,OACE,oBAACA,WAAe,OAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,YAAY,OAAO,KAAK,GAAG,SAAS;CACpE,CAAA;AAEL;AAEA,gBAAgB,cAAc;AAE9B,MAAa,oBAAoB,EAAE,WAAW,GAAG,WAAkC;CACjF,OACE,oBAACA,WAAe,QAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,YAAY,OAAO,MAAM,GAAG,SAAS;CACrE,CAAA;AAEL;AAEA,iBAAiB,cAAc"}
+{"version":3,"file":"atoms.mjs","names":["clsx","BaseScrollArea"],"sources":["../../src/ScrollArea/atoms.tsx"],"sourcesContent":["'use client';\n\nimport './global.css';\n\nimport { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport clsx from 'clsx';\nimport type React from 'react';\nimport type { ReactElement } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\n\nconst classNameOf = (styles: Parameters<typeof styleProps>[0]) => styleProps(styles).className;\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\nexport type ScrollAreaRootProps = React.ComponentProps<typeof BaseScrollArea.Root>;\n\nexport type ScrollAreaFadeOrientation = 'vertical' | 'horizontal' | 'both';\n\nexport type ScrollAreaViewportProps = React.ComponentProps<typeof BaseScrollArea.Viewport> & {\n  /**\n   * Enable gradient scroll fade on the viewport edges.\n   *\n   * - `true` / `'vertical'`: fade top and bottom edges.\n   * - `'horizontal'`: fade start and end edges.\n   * - `'both'`: fade all four edges (combined via `mask-composite: intersect`).\n   * - `false`: no fade.\n   *\n   * @default false\n   */\n  scrollFade?: boolean | ScrollAreaFadeOrientation;\n};\nexport type ScrollAreaContentProps = React.ComponentProps<typeof BaseScrollArea.Content>;\nexport type ScrollAreaScrollbarProps = React.ComponentProps<typeof BaseScrollArea.Scrollbar>;\nexport type ScrollAreaThumbProps = React.ComponentProps<typeof BaseScrollArea.Thumb>;\nexport type ScrollAreaCornerProps = React.ComponentProps<typeof BaseScrollArea.Corner>;\n\nexport const ScrollAreaRoot = ({ className, ...rest }: ScrollAreaRootProps) => {\n  return (\n    <BaseScrollArea.Root\n      {...rest}\n      className={mergeStateClassName(classNameOf(styles.root), className) as any}\n    />\n  );\n};\n\nScrollAreaRoot.displayName = 'ScrollAreaRoot';\n\nconst resolveFadeClass = (\n  scrollFade: ScrollAreaViewportProps['scrollFade'],\n): string | undefined => {\n  if (!scrollFade) return undefined;\n  const orientation: ScrollAreaFadeOrientation = scrollFade === true ? 'vertical' : scrollFade;\n  if (orientation === 'horizontal') return 'lobe-scroll-area-fade-horizontal';\n  if (orientation === 'both') return 'lobe-scroll-area-fade-both';\n  return 'lobe-scroll-area-fade';\n};\n\nexport const ScrollAreaViewportImpl = ({\n  className,\n  scrollFade = false,\n  xstyle,\n  ...rest\n}: ScrollAreaViewportProps & { xstyle?: Parameters<typeof styleProps>[0] }) => {\n  return (\n    <BaseScrollArea.Viewport\n      {...rest}\n      className={\n        mergeStateClassName(\n          clsx(\n            classNameOf([styles.viewport, focusRing.info, xstyle]),\n            resolveFadeClass(scrollFade),\n          ),\n          className,\n        ) as any\n      }\n    />\n  );\n};\n\nScrollAreaViewportImpl.displayName = 'ScrollAreaViewport';\n\nexport const ScrollAreaViewport = ScrollAreaViewportImpl as (\n  props: ScrollAreaViewportProps,\n) => ReactElement;\n\nexport const ScrollAreaContent = BaseScrollArea.Content;\n\nexport const ScrollAreaScrollbar = ({ className, ...rest }: ScrollAreaScrollbarProps) => {\n  return (\n    <BaseScrollArea.Scrollbar\n      {...rest}\n      className={mergeStateClassName(classNameOf(styles.scrollbar), className) as any}\n    />\n  );\n};\n\nScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';\n\nexport const ScrollAreaThumb = ({ className, ...rest }: ScrollAreaThumbProps) => {\n  return (\n    <BaseScrollArea.Thumb\n      {...rest}\n      className={mergeStateClassName(classNameOf(styles.thumb), className) as any}\n    />\n  );\n};\n\nScrollAreaThumb.displayName = 'ScrollAreaThumb';\n\nexport const ScrollAreaCorner = ({ className, ...rest }: ScrollAreaCornerProps) => {\n  return (\n    <BaseScrollArea.Corner\n      {...rest}\n      className={mergeStateClassName(classNameOf(styles.corner), className) as any}\n    />\n  );\n};\n\nScrollAreaCorner.displayName = 'ScrollAreaCorner';\n"],"mappings":";;;;;;;;AAcA,MAAM,eAAe,WAA6C,WAAW,MAAM,CAAC,CAAC;AAErF,MAAM,uBACJ,MACA,cACG;CACH,IAAI,OAAO,cAAc,YAAY,QAAQ,UAAkBA,OAAK,MAAM,UAAU,KAAK,CAAC;CAC1F,OAAOA,OAAK,MAAM,SAAS;AAC7B;AAwBA,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAAgC;CAC7E,OACE,oBAACC,WAAe,MAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,YAAY,OAAO,IAAI,GAAG,SAAS;CACnE,CAAA;AAEL;AAEA,eAAe,cAAc;AAE7B,MAAM,oBACJ,eACuB;CACvB,IAAI,CAAC,YAAY,OAAO,KAAA;CACxB,MAAM,cAAyC,eAAe,OAAO,aAAa;CAClF,IAAI,gBAAgB,cAAc,OAAO;CACzC,IAAI,gBAAgB,QAAQ,OAAO;CACnC,OAAO;AACT;AAEA,MAAa,0BAA0B,EACrC,WACA,aAAa,OACb,QACA,GAAG,WAC0E;CAC7E,OACE,oBAACA,WAAe,UAAhB;EACE,GAAI;EACJ,WACE,oBACED,OACE,YAAY;GAAC,OAAO;GAAU,UAAU;GAAM;EAAM,CAAC,GACrD,iBAAiB,UAAU,CAC7B,GACA,SACF;CAEH,CAAA;AAEL;AAEA,uBAAuB,cAAc;AAErC,MAAa,qBAAqB;AAIlC,MAAa,oBAAoBC,WAAe;AAEhD,MAAa,uBAAuB,EAAE,WAAW,GAAG,WAAqC;CACvF,OACE,oBAACA,WAAe,WAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,YAAY,OAAO,SAAS,GAAG,SAAS;CACxE,CAAA;AAEL;AAEA,oBAAoB,cAAc;AAElC,MAAa,mBAAmB,EAAE,WAAW,GAAG,WAAiC;CAC/E,OACE,oBAACA,WAAe,OAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,YAAY,OAAO,KAAK,GAAG,SAAS;CACpE,CAAA;AAEL;AAEA,gBAAgB,cAAc;AAE9B,MAAa,oBAAoB,EAAE,WAAW,GAAG,WAAkC;CACjF,OACE,oBAACA,WAAe,QAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,YAAY,OAAO,MAAM,GAAG,SAAS;CACrE,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

package/es/ScrollShadow/ScrollShadow.mjs

@@ -1,12 +1,12 @@
 "use client";
 import { styleProps } from "../styles/stylex/props.mjs";
+import { mergeRefs } from "../utils/mergeRefs.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import { useEventCallback } from "../hooks/useEventCallback.mjs";
 import { styles } from "./style.mjs";
 import { useScrollOverflow } from "./useScrollOverflow.mjs";
 import { useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { mergeRefs } from "react-merge-refs";
 //#region src/ScrollShadow/ScrollShadow.tsx
 const scrollPositionStyles = {
 	"bottom": styles.bottom,

package/es/ScrollShadow/ScrollShadow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollShadow.mjs","names":["Flexbox"],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useMemo, useRef } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { Flexbox } from '@/Flex';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { ScrollShadowProps } from './type';\nimport { useScrollOverflow } from './useScrollOverflow';\n\nconst scrollPositionStyles = {\n  'bottom': styles.bottom,\n  'left': styles.left,\n  'left-right': styles.leftRight,\n  'none': null,\n  'right': styles.right,\n  'top': styles.top,\n  'top-bottom': styles.topBottom,\n};\n\nconst ScrollShadow: FC<ScrollShadowProps> = ({\n  className,\n  children,\n  orientation = 'vertical',\n  hideScrollBar = false,\n  size = 16,\n  offset = 8,\n  visibility = 'auto',\n  isEnabled = true,\n  onVisibilityChange,\n  style,\n  ref,\n  ...rest\n}) => {\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--scroll-shadow-size': `${size}%`,\n    }),\n    [size],\n  );\n  const domRef = useRef<HTMLDivElement>(null);\n\n  const onVisibilityChangeEvent = useEventCallback<\n    NonNullable<ScrollShadowProps['onVisibilityChange']>\n  >((visibility) => {\n    onVisibilityChange?.(visibility);\n  });\n  // 使用滚动检测钩子\n  const scrollState = useScrollOverflow({\n    domRef,\n    isEnabled: isEnabled && visibility === 'auto',\n    offset,\n    onVisibilityChange: onVisibilityChangeEvent,\n    orientation,\n    updateDeps: [children],\n  });\n\n  // 决定最终的滚动状态\n  const finalScrollState = useMemo(() => {\n    if (visibility === 'always') {\n      return {\n        bottom: true,\n        left: true,\n        right: true,\n        top: true,\n      };\n    }\n\n    if (visibility === 'never') {\n      return {\n        bottom: false,\n        left: false,\n        right: false,\n        top: false,\n      };\n    }\n\n    return scrollState;\n  }, [visibility, scrollState]);\n\n  // 计算数据属性\n  const dataAttributes = useMemo(() => {\n    const attributes: Record<string, boolean | string> = {\n      'data-orientation': orientation,\n    };\n\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) {\n        attributes['data-top-bottom-scroll'] = true;\n      } else if (finalScrollState.top) {\n        attributes['data-top-scroll'] = true;\n      } else if (finalScrollState.bottom) {\n        attributes['data-bottom-scroll'] = true;\n      }\n    } else {\n      if (finalScrollState.left && finalScrollState.right) {\n        attributes['data-left-right-scroll'] = true;\n      } else if (finalScrollState.left) {\n        attributes['data-left-scroll'] = true;\n      } else if (finalScrollState.right) {\n        attributes['data-right-scroll'] = true;\n      }\n    }\n\n    return attributes;\n  }, [orientation, finalScrollState]);\n\n  // 计算滚动位置变体\n  const scrollPosition = useMemo(() => {\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) return 'top-bottom';\n      if (finalScrollState.top) return 'top';\n      if (finalScrollState.bottom) return 'bottom';\n    } else {\n      if (finalScrollState.left && finalScrollState.right) return 'left-right';\n      if (finalScrollState.left) return 'left';\n      if (finalScrollState.right) return 'right';\n    }\n    return 'none';\n  }, [orientation, finalScrollState]);\n\n  return (\n    <Flexbox\n      ref={mergeRefs<HTMLDivElement>([domRef, ref])}\n      className={\n        styleProps(\n          [\n            styles.root,\n            styles[orientation],\n            hideScrollBar && styles.hideScrollBar,\n            scrollPositionStyles[scrollPosition],\n          ],\n          className,\n        ).className\n      }\n      style={{\n        ...cssVariables,\n        ...style,\n      }}\n      {...dataAttributes}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nScrollShadow.displayName = 'ScrollShadow';\n\nexport default ScrollShadow;\n"],"mappings":";;;;;;;;;;AAcA,MAAM,uBAAuB;CAC3B,UAAU,OAAO;CACjB,QAAQ,OAAO;CACf,cAAc,OAAO;CACrB,QAAQ;CACR,SAAS,OAAO;CAChB,OAAO,OAAO;CACd,cAAc,OAAO;AACvB;AAEA,MAAM,gBAAuC,EAC3C,WACA,UACA,cAAc,YACd,gBAAgB,OAChB,OAAO,IACP,SAAS,GACT,aAAa,QACb,YAAY,MACZ,oBACA,OACA,KACA,GAAG,WACC;CAEJ,MAAM,eAAe,eACZ,EACL,wBAAwB,GAAG,KAAK,GAClC,IACA,CAAC,IAAI,CACP;CACA,MAAM,SAAS,OAAuB,IAAI;CAE1C,MAAM,0BAA0B,kBAE7B,eAAe;EAChB,qBAAqB,UAAU;CACjC,CAAC;CAED,MAAM,cAAc,kBAAkB;EACpC;EACA,WAAW,aAAa,eAAe;EACvC;EACA,oBAAoB;EACpB;EACA,YAAY,CAAC,QAAQ;CACvB,CAAC;CAGD,MAAM,mBAAmB,cAAc;EACrC,IAAI,eAAe,UACjB,OAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;EACP;EAGF,IAAI,eAAe,SACjB,OAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;EACP;EAGF,OAAO;CACT,GAAG,CAAC,YAAY,WAAW,CAAC;CAG5B,MAAM,iBAAiB,cAAc;EACnC,MAAM,aAA+C,EACnD,oBAAoB,YACtB;EAEA,IAAI,gBAAgB,YAAY;GAC9B,IAAI,iBAAiB,OAAO,iBAAiB,QAC3C,WAAW,4BAA4B;QAClC,IAAI,iBAAiB,KAC1B,WAAW,qBAAqB;QAC3B,IAAI,iBAAiB,QAC1B,WAAW,wBAAwB;EAEvC,OACE,IAAI,iBAAiB,QAAQ,iBAAiB,OAC5C,WAAW,4BAA4B;OAClC,IAAI,iBAAiB,MAC1B,WAAW,sBAAsB;OAC5B,IAAI,iBAAiB,OAC1B,WAAW,uBAAuB;EAItC,OAAO;CACT,GAAG,CAAC,aAAa,gBAAgB,CAAC;CAGlC,MAAM,iBAAiB,cAAc;EACnC,IAAI,gBAAgB,YAAY;GAC9B,IAAI,iBAAiB,OAAO,iBAAiB,QAAQ,OAAO;GAC5D,IAAI,iBAAiB,KAAK,OAAO;GACjC,IAAI,iBAAiB,QAAQ,OAAO;EACtC,OAAO;GACL,IAAI,iBAAiB,QAAQ,iBAAiB,OAAO,OAAO;GAC5D,IAAI,iBAAiB,MAAM,OAAO;GAClC,IAAI,iBAAiB,OAAO,OAAO;EACrC;EACA,OAAO;CACT,GAAG,CAAC,aAAa,gBAAgB,CAAC;CAElC,OACE,oBAACA,mBAAD;EACE,KAAK,UAA0B,CAAC,QAAQ,GAAG,CAAC;EAC5C,WACE,WACE;GACE,OAAO;GACP,OAAO;GACP,iBAAiB,OAAO;GACxB,qBAAqB;EACvB,GACA,SACF,CAAC,CAAC;EAEJ,OAAO;GACL,GAAG;GACH,GAAG;EACL;EACA,GAAI;EACJ,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,aAAa,cAAc"}
+{"version":3,"file":"ScrollShadow.mjs","names":["Flexbox"],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useMemo, useRef } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { styleProps } from '@/styles/stylex/props';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport { styles } from './style';\nimport type { ScrollShadowProps } from './type';\nimport { useScrollOverflow } from './useScrollOverflow';\n\nconst scrollPositionStyles = {\n  'bottom': styles.bottom,\n  'left': styles.left,\n  'left-right': styles.leftRight,\n  'none': null,\n  'right': styles.right,\n  'top': styles.top,\n  'top-bottom': styles.topBottom,\n};\n\nconst ScrollShadow: FC<ScrollShadowProps> = ({\n  className,\n  children,\n  orientation = 'vertical',\n  hideScrollBar = false,\n  size = 16,\n  offset = 8,\n  visibility = 'auto',\n  isEnabled = true,\n  onVisibilityChange,\n  style,\n  ref,\n  ...rest\n}) => {\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--scroll-shadow-size': `${size}%`,\n    }),\n    [size],\n  );\n  const domRef = useRef<HTMLDivElement>(null);\n\n  const onVisibilityChangeEvent = useEventCallback<\n    NonNullable<ScrollShadowProps['onVisibilityChange']>\n  >((visibility) => {\n    onVisibilityChange?.(visibility);\n  });\n  // 使用滚动检测钩子\n  const scrollState = useScrollOverflow({\n    domRef,\n    isEnabled: isEnabled && visibility === 'auto',\n    offset,\n    onVisibilityChange: onVisibilityChangeEvent,\n    orientation,\n    updateDeps: [children],\n  });\n\n  // 决定最终的滚动状态\n  const finalScrollState = useMemo(() => {\n    if (visibility === 'always') {\n      return {\n        bottom: true,\n        left: true,\n        right: true,\n        top: true,\n      };\n    }\n\n    if (visibility === 'never') {\n      return {\n        bottom: false,\n        left: false,\n        right: false,\n        top: false,\n      };\n    }\n\n    return scrollState;\n  }, [visibility, scrollState]);\n\n  // 计算数据属性\n  const dataAttributes = useMemo(() => {\n    const attributes: Record<string, boolean | string> = {\n      'data-orientation': orientation,\n    };\n\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) {\n        attributes['data-top-bottom-scroll'] = true;\n      } else if (finalScrollState.top) {\n        attributes['data-top-scroll'] = true;\n      } else if (finalScrollState.bottom) {\n        attributes['data-bottom-scroll'] = true;\n      }\n    } else {\n      if (finalScrollState.left && finalScrollState.right) {\n        attributes['data-left-right-scroll'] = true;\n      } else if (finalScrollState.left) {\n        attributes['data-left-scroll'] = true;\n      } else if (finalScrollState.right) {\n        attributes['data-right-scroll'] = true;\n      }\n    }\n\n    return attributes;\n  }, [orientation, finalScrollState]);\n\n  // 计算滚动位置变体\n  const scrollPosition = useMemo(() => {\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) return 'top-bottom';\n      if (finalScrollState.top) return 'top';\n      if (finalScrollState.bottom) return 'bottom';\n    } else {\n      if (finalScrollState.left && finalScrollState.right) return 'left-right';\n      if (finalScrollState.left) return 'left';\n      if (finalScrollState.right) return 'right';\n    }\n    return 'none';\n  }, [orientation, finalScrollState]);\n\n  return (\n    <Flexbox\n      ref={mergeRefs<HTMLDivElement>([domRef, ref])}\n      className={\n        styleProps(\n          [\n            styles.root,\n            styles[orientation],\n            hideScrollBar && styles.hideScrollBar,\n            scrollPositionStyles[scrollPosition],\n          ],\n          className,\n        ).className\n      }\n      style={{\n        ...cssVariables,\n        ...style,\n      }}\n      {...dataAttributes}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nScrollShadow.displayName = 'ScrollShadow';\n\nexport default ScrollShadow;\n"],"mappings":";;;;;;;;;;AAcA,MAAM,uBAAuB;CAC3B,UAAU,OAAO;CACjB,QAAQ,OAAO;CACf,cAAc,OAAO;CACrB,QAAQ;CACR,SAAS,OAAO;CAChB,OAAO,OAAO;CACd,cAAc,OAAO;AACvB;AAEA,MAAM,gBAAuC,EAC3C,WACA,UACA,cAAc,YACd,gBAAgB,OAChB,OAAO,IACP,SAAS,GACT,aAAa,QACb,YAAY,MACZ,oBACA,OACA,KACA,GAAG,WACC;CAEJ,MAAM,eAAe,eACZ,EACL,wBAAwB,GAAG,KAAK,GAClC,IACA,CAAC,IAAI,CACP;CACA,MAAM,SAAS,OAAuB,IAAI;CAE1C,MAAM,0BAA0B,kBAE7B,eAAe;EAChB,qBAAqB,UAAU;CACjC,CAAC;CAED,MAAM,cAAc,kBAAkB;EACpC;EACA,WAAW,aAAa,eAAe;EACvC;EACA,oBAAoB;EACpB;EACA,YAAY,CAAC,QAAQ;CACvB,CAAC;CAGD,MAAM,mBAAmB,cAAc;EACrC,IAAI,eAAe,UACjB,OAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;EACP;EAGF,IAAI,eAAe,SACjB,OAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;EACP;EAGF,OAAO;CACT,GAAG,CAAC,YAAY,WAAW,CAAC;CAG5B,MAAM,iBAAiB,cAAc;EACnC,MAAM,aAA+C,EACnD,oBAAoB,YACtB;EAEA,IAAI,gBAAgB,YAAY;GAC9B,IAAI,iBAAiB,OAAO,iBAAiB,QAC3C,WAAW,4BAA4B;QAClC,IAAI,iBAAiB,KAC1B,WAAW,qBAAqB;QAC3B,IAAI,iBAAiB,QAC1B,WAAW,wBAAwB;EAEvC,OACE,IAAI,iBAAiB,QAAQ,iBAAiB,OAC5C,WAAW,4BAA4B;OAClC,IAAI,iBAAiB,MAC1B,WAAW,sBAAsB;OAC5B,IAAI,iBAAiB,OAC1B,WAAW,uBAAuB;EAItC,OAAO;CACT,GAAG,CAAC,aAAa,gBAAgB,CAAC;CAGlC,MAAM,iBAAiB,cAAc;EACnC,IAAI,gBAAgB,YAAY;GAC9B,IAAI,iBAAiB,OAAO,iBAAiB,QAAQ,OAAO;GAC5D,IAAI,iBAAiB,KAAK,OAAO;GACjC,IAAI,iBAAiB,QAAQ,OAAO;EACtC,OAAO;GACL,IAAI,iBAAiB,QAAQ,iBAAiB,OAAO,OAAO;GAC5D,IAAI,iBAAiB,MAAM,OAAO;GAClC,IAAI,iBAAiB,OAAO,OAAO;EACrC;EACA,OAAO;CACT,GAAG,CAAC,aAAa,gBAAgB,CAAC;CAElC,OACE,oBAACA,mBAAD;EACE,KAAK,UAA0B,CAAC,QAAQ,GAAG,CAAC;EAC5C,WACE,WACE;GACE,OAAO;GACP,OAAO;GACP,iBAAiB,OAAO;GACxB,qBAAqB;EACvB,GACA,SACF,CAAC,CAAC;EAEJ,OAAO;GACL,GAAG;GACH,GAAG;EACL;EACA,GAAI;EACJ,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,aAAa,cAAc"}

package/es/SearchBar/SearchBar.mjs

@@ -2,6 +2,8 @@
 import { styleProps } from "../styles/stylex/props.mjs";
 import Icon from "../Icon/Icon.mjs";
 import Hotkey from "../Hotkey/Hotkey.mjs";
+import { useEventCallback } from "../hooks/useEventCallback.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import Input_default from "../Input/Input.mjs";
 import Spotlight from "../awesome/Spotlight/Spotlight.mjs";
 import { styles } from "./style.mjs";
@@ -9,7 +11,6 @@ import { memo, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { LucideLoader2, Search } from "lucide-react";
-import useControlledState from "use-merge-value";
 import { useHotkeys } from "react-hotkeys-hook";
 //#region src/SearchBar/SearchBar.tsx
 const SearchBar = memo(({ defaultValue = "", spotlight, className, value, onInputChange, placeholder, enableShortKey, shortKey = "mod+k", onSearch, loading, style, onChange, onBlur, onPressEnter, onFocus, styles: { input: inputStyle, shortKey: shortKeyStyle } = {}, classNames: { input: inputClassName, shortKey: shortKeyClassName } = {}, ...rest }) => {
@@ -21,6 +22,30 @@ const SearchBar = memo(({ defaultValue = "", spotlight, className, value, onInpu
 	const [showTag, setShowTag] = useState(true);
 	const inputReference = useRef(null);
 	const hotkey = useMemo(() => shortKey.includes("+") ? shortKey : `mod+${shortKey}`, [shortKey]);
+	const prefix = useMemo(() => /* @__PURE__ */ jsx(Icon, {
+		...stylex.props(styles.icon),
+		icon: loading ? LucideLoader2 : Search,
+		size: "small",
+		spin: loading,
+		style: { marginRight: 4 }
+	}), [loading]);
+	const handleBlur = useEventCallback((e) => {
+		onBlur?.(e);
+		setInputValue(e.target.value);
+		setShowTag(true);
+	});
+	const handleChange = useEventCallback((e) => {
+		setInputValue(e.target.value);
+		onChange?.(e);
+	});
+	const handleFocus = useEventCallback((e) => {
+		onFocus?.(e);
+		setShowTag(false);
+	});
+	const handlePressEnter = useEventCallback((e) => {
+		onPressEnter?.(e);
+		onSearch?.(inputValue);
+	});
 	useHotkeys(hotkey, () => {
 		if (!enableShortKey) return;
 		inputReference.current?.focus();
@@ -37,33 +62,14 @@ const SearchBar = memo(({ defaultValue = "", spotlight, className, value, onInpu
 				allowClear: true,
 				className: inputClassName,
 				placeholder: placeholder ?? "Type keywords...",
+				prefix,
 				ref: inputReference,
 				style: inputStyle,
 				value: inputValue,
-				prefix: /* @__PURE__ */ jsx(Icon, {
-					...stylex.props(styles.icon),
-					icon: loading ? LucideLoader2 : Search,
-					size: "small",
-					spin: loading,
-					style: { marginRight: 4 }
-				}),
-				onBlur: (e) => {
-					onBlur?.(e);
-					setInputValue(e.target.value);
-					setShowTag(true);
-				},
-				onChange: (e) => {
-					setInputValue(e.target.value);
-					onChange?.(e);
-				},
-				onFocus: (e) => {
-					onFocus?.(e);
-					setShowTag(false);
-				},
-				onPressEnter: (e) => {
-					onPressEnter?.(e);
-					onSearch?.(inputValue);
-				},
+				onBlur: handleBlur,
+				onChange: handleChange,
+				onFocus: handleFocus,
+				onPressEnter: handlePressEnter,
 				...rest
 			}),
 			enableShortKey && showTag && !inputValue && /* @__PURE__ */ jsx(Hotkey, {

package/es/SearchBar/SearchBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.mjs","names":["Input"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport Spotlight from '@/awesome/Spotlight';\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\nimport { Input } from '@/Input';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport { type SearchBarProps } from './type';\n\nconst SearchBar = memo<SearchBarProps>(\n  ({\n    defaultValue = '',\n    spotlight,\n    className,\n    value,\n    onInputChange,\n    placeholder,\n    enableShortKey,\n    shortKey = 'mod+k',\n    onSearch,\n    loading,\n    style,\n    onChange,\n    onBlur,\n    onPressEnter,\n    onFocus,\n    styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n    classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n    ...rest\n  }) => {\n    const [inputValue, setInputValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onInputChange,\n      value,\n    });\n\n    const [showTag, setShowTag] = useState<boolean>(true);\n    const inputReference: any = useRef<HTMLInputElement>(null);\n    const hotkey = useMemo(\n      () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n      [shortKey],\n    );\n\n    useHotkeys(\n      hotkey,\n      () => {\n        if (!enableShortKey) return;\n        inputReference.current?.focus();\n      },\n      {\n        enableOnFormTags: true,\n        enabled: !!enableShortKey && !!shortKey,\n        preventDefault: true,\n      },\n    );\n\n    return (\n      <div {...styleProps(styles.search, className, style)}>\n        {spotlight && <Spotlight />}\n        <Input\n          allowClear\n          className={inputClassName}\n          placeholder={placeholder ?? 'Type keywords...'}\n          ref={inputReference}\n          style={inputStyle}\n          value={inputValue}\n          prefix={\n            <Icon\n              {...stylex.props(styles.icon)}\n              icon={loading ? LucideLoader2 : Search}\n              size=\"small\"\n              spin={loading}\n              style={{ marginRight: 4 }}\n            />\n          }\n          onBlur={(e) => {\n            onBlur?.(e);\n            setInputValue(e.target.value);\n            setShowTag(true);\n          }}\n          onChange={(e) => {\n            setInputValue(e.target.value);\n            onChange?.(e);\n          }}\n          onFocus={(e) => {\n            onFocus?.(e);\n            setShowTag(false);\n          }}\n          onPressEnter={(e) => {\n            onPressEnter?.(e);\n            onSearch?.(inputValue);\n          }}\n          {...rest}\n        />\n        {enableShortKey && showTag && !inputValue && (\n          <Hotkey\n            compact\n            keys={hotkey}\n            styles={{ kbdStyle: { color: 'inherit' } }}\n            {...styleProps(styles.tag, shortKeyClassName, shortKeyStyle)}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,YAAY,MAAsB,EACtC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EACN,OAAO,YACP,UAAU,kBACR,CAAC,GACL,YAAY,EACV,OAAO,gBACP,UAAU,sBACR,CAAC,GACL,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,mBAAmB,cAAc;EACnE;EACA,UAAU;EACV;CACF,CAAC;CACD,MAAM,CAAC,SAAS,cAAc,SAAkB,IAAI;CACpD,MAAM,iBAAsB,OAAyB,IAAI;CACzD,MAAM,SAAS,cAAc,SAAS,SAAS,GAAG,IAAI,WAAW,OAAO,YAAY,CAAC,QAAQ,CAAC;CAC9F,WAAW,cAAc;EACvB,IAAI,CAAC,gBAAgB;EACrB,eAAe,SAAS,MAAM;CAChC,GAAG;EACD,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;CAClB,CAAC;CACD,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,QAAQ,WAAW,KAAK;EAAnD,UAAA;GACA,aAAa,oBAAC,WAAD,CAAY,CAAA;GAC1B,oBAACA,eAAD;IAAO,YAAA;IAAW,WAAW;IAAgB,aAAa,eAAe;IAAoB,KAAK;IAAgB,OAAO;IAAY,OAAO;IAAY,QAAQ,oBAAC,MAAD;KAAM,GAAI,OAAO,MAAM,OAAO,IAAI;KAAG,MAAM,UAAU,gBAAgB;KAAQ,MAAK;KAAQ,MAAM;KAAS,OAAO,EAClR,aAAa,EACf;IAAI,CAAA;IAAG,SAAQ,MAAK;KAClB,SAAS,CAAC;KACV,cAAc,EAAE,OAAO,KAAK;KAC5B,WAAW,IAAI;IACjB;IAAG,WAAU,MAAK;KAChB,cAAc,EAAE,OAAO,KAAK;KAC5B,WAAW,CAAC;IACd;IAAG,UAAS,MAAK;KACf,UAAU,CAAC;KACX,WAAW,KAAK;IAClB;IAAG,eAAc,MAAK;KACpB,eAAe,CAAC;KAChB,WAAW,UAAU;IACvB;IAAG,GAAI;GAAO,CAAA;GACT,kBAAkB,WAAW,CAAC,cAAc,oBAAC,QAAD;IAAQ,SAAA;IAAQ,MAAM;IAAQ,QAAQ,EACrF,UAAU,EACR,OAAO,UACT,EACF;IAAG,GAAI,WAAW,OAAO,KAAK,mBAAmB,aAAa;GAAI,CAAA;EAC3D;;AACX,CAAC;AACD,UAAU,cAAc"}
+{"version":3,"file":"SearchBar.mjs","names":["Input"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\n\nimport Spotlight from '@/awesome/Spotlight';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\nimport { Input } from '@/Input';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport { type SearchBarProps } from './type';\n\ntype HandlerEvent<K extends 'onBlur' | 'onChange' | 'onFocus' | 'onPressEnter'> = Parameters<\n  NonNullable<SearchBarProps[K]>\n>[0];\n\nconst SearchBar = memo<SearchBarProps>(\n  ({\n    defaultValue = '',\n    spotlight,\n    className,\n    value,\n    onInputChange,\n    placeholder,\n    enableShortKey,\n    shortKey = 'mod+k',\n    onSearch,\n    loading,\n    style,\n    onChange,\n    onBlur,\n    onPressEnter,\n    onFocus,\n    styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n    classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n    ...rest\n  }) => {\n    const [inputValue, setInputValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onInputChange,\n      value,\n    });\n\n    const [showTag, setShowTag] = useState<boolean>(true);\n    const inputReference: any = useRef<HTMLInputElement>(null);\n    const hotkey = useMemo(\n      () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n      [shortKey],\n    );\n\n    const prefix = useMemo(\n      () => (\n        <Icon\n          {...stylex.props(styles.icon)}\n          icon={loading ? LucideLoader2 : Search}\n          size=\"small\"\n          spin={loading}\n          style={{ marginRight: 4 }}\n        />\n      ),\n      [loading],\n    );\n\n    const handleBlur = useEventCallback((e: HandlerEvent<'onBlur'>) => {\n      onBlur?.(e);\n      setInputValue(e.target.value);\n      setShowTag(true);\n    });\n\n    const handleChange = useEventCallback((e: HandlerEvent<'onChange'>) => {\n      setInputValue(e.target.value);\n      onChange?.(e);\n    });\n\n    const handleFocus = useEventCallback((e: HandlerEvent<'onFocus'>) => {\n      onFocus?.(e);\n      setShowTag(false);\n    });\n\n    const handlePressEnter = useEventCallback((e: HandlerEvent<'onPressEnter'>) => {\n      onPressEnter?.(e);\n      onSearch?.(inputValue);\n    });\n\n    useHotkeys(\n      hotkey,\n      () => {\n        if (!enableShortKey) return;\n        inputReference.current?.focus();\n      },\n      {\n        enableOnFormTags: true,\n        enabled: !!enableShortKey && !!shortKey,\n        preventDefault: true,\n      },\n    );\n\n    return (\n      <div {...styleProps(styles.search, className, style)}>\n        {spotlight && <Spotlight />}\n        <Input\n          allowClear\n          className={inputClassName}\n          placeholder={placeholder ?? 'Type keywords...'}\n          prefix={prefix}\n          ref={inputReference}\n          style={inputStyle}\n          value={inputValue}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onPressEnter={handlePressEnter}\n          {...rest}\n        />\n        {enableShortKey && showTag && !inputValue && (\n          <Hotkey\n            compact\n            keys={hotkey}\n            styles={{ kbdStyle: { color: 'inherit' } }}\n            {...styleProps(styles.tag, shortKeyClassName, shortKeyStyle)}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,YAAY,MAAsB,EACtC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EACN,OAAO,YACP,UAAU,kBACR,CAAC,GACL,YAAY,EACV,OAAO,gBACP,UAAU,sBACR,CAAC,GACL,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,mBAAmB,cAAc;EACnE;EACA,UAAU;EACV;CACF,CAAC;CACD,MAAM,CAAC,SAAS,cAAc,SAAkB,IAAI;CACpD,MAAM,iBAAsB,OAAyB,IAAI;CACzD,MAAM,SAAS,cAAc,SAAS,SAAS,GAAG,IAAI,WAAW,OAAO,YAAY,CAAC,QAAQ,CAAC;CAC9F,MAAM,SAAS,cAAc,oBAAC,MAAD;EAAM,GAAI,OAAO,MAAM,OAAO,IAAI;EAAG,MAAM,UAAU,gBAAgB;EAAQ,MAAK;EAAQ,MAAM;EAAS,OAAO,EAC3I,aAAa,EACf;CAAI,CAAA,GAAG,CAAC,OAAO,CAAC;CAChB,MAAM,aAAa,kBAAkB,MAA8B;EACjE,SAAS,CAAC;EACV,cAAc,EAAE,OAAO,KAAK;EAC5B,WAAW,IAAI;CACjB,CAAC;CACD,MAAM,eAAe,kBAAkB,MAAgC;EACrE,cAAc,EAAE,OAAO,KAAK;EAC5B,WAAW,CAAC;CACd,CAAC;CACD,MAAM,cAAc,kBAAkB,MAA+B;EACnE,UAAU,CAAC;EACX,WAAW,KAAK;CAClB,CAAC;CACD,MAAM,mBAAmB,kBAAkB,MAAoC;EAC7E,eAAe,CAAC;EAChB,WAAW,UAAU;CACvB,CAAC;CACD,WAAW,cAAc;EACvB,IAAI,CAAC,gBAAgB;EACrB,eAAe,SAAS,MAAM;CAChC,GAAG;EACD,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;CAClB,CAAC;CACD,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,QAAQ,WAAW,KAAK;EAAnD,UAAA;GACA,aAAa,oBAAC,WAAD,CAAY,CAAA;GAC1B,oBAACA,eAAD;IAAO,YAAA;IAAW,WAAW;IAAgB,aAAa,eAAe;IAA4B;IAAQ,KAAK;IAAgB,OAAO;IAAY,OAAO;IAAY,QAAQ;IAAY,UAAU;IAAc,SAAS;IAAa,cAAc;IAAkB,GAAI;GAAO,CAAA;GACpR,kBAAkB,WAAW,CAAC,cAAc,oBAAC,QAAD;IAAQ,SAAA;IAAQ,MAAM;IAAQ,QAAQ,EACrF,UAAU,EACR,OAAO,UACT,EACF;IAAG,GAAI,WAAW,OAAO,KAAK,mBAAmB,aAAa;GAAI,CAAA;EAC3D;;AACX,CAAC;AACD,UAAU,cAAc"}

package/es/Segmented/Segmented.mjs

@@ -1,9 +1,9 @@
 "use client";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot } from "./atoms.mjs";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import useControlledState from "use-merge-value";
+import clsx$1 from "clsx";
 //#region src/Segmented/Segmented.tsx
 const normalizeOption = (option) => typeof option === "string" ? {
 	label: option,
@@ -66,7 +66,7 @@ const Segmented = ({ block = false, className, classNames, defaultValue, disable
 	};
 	return /* @__PURE__ */ jsxs(SegmentedRoot, {
 		block,
-		className: clsx(classNames?.root, className),
+		className: clsx$1(classNames?.root, className),
 		disabled,
 		glass,
 		id,
@@ -86,7 +86,7 @@ const Segmented = ({ block = false, className, classNames, defaultValue, disable
 		}), normalizedOptions.map((opt) => /* @__PURE__ */ jsxs(SegmentedItem, {
 			"aria-label": typeof opt.label === "string" ? opt.label : void 0,
 			block,
-			className: clsx(classNames?.item, opt.className),
+			className: clsx$1(classNames?.item, opt.className),
 			"data-segmented-item": "",
 			disabled: disabled || opt.disabled,
 			name,

package/es/Segmented/Segmented.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Segmented.mjs","names":[],"sources":["../../src/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type CSSProperties,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport {\n  SegmentedIndicator,\n  SegmentedItem,\n  SegmentedItemIcon,\n  SegmentedItemLabel,\n  SegmentedRoot,\n} from './atoms';\nimport type { SegmentedOption, SegmentedProps } from './type';\n\nconst normalizeOption = <Value extends string>(\n  option: SegmentedOption<Value> | Value,\n): SegmentedOption<Value> =>\n  typeof option === 'string' ? { label: option, value: option } : option;\n\nconst Segmented = <Value extends string = string>({\n  block = false,\n  className,\n  classNames,\n  defaultValue,\n  disabled = false,\n  glass = false,\n  id,\n  name,\n  onChange,\n  options,\n  ref,\n  shadow = false,\n  size = 'middle',\n  style,\n  styles: customStyles,\n  value,\n  variant = 'filled',\n  vertical = false,\n}: SegmentedProps<Value>) => {\n  const [innerValue, setInnerValue] = useControlledState<Value | undefined>(defaultValue, {\n    defaultValue,\n    onChange: (next) => {\n      if (next != null) onChange?.(next);\n    },\n    value,\n  });\n\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  const mergedRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      listRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) (ref as React.RefObject<HTMLDivElement | null>).current = node;\n    },\n    [ref],\n  );\n\n  const normalizedOptions = useMemo(\n    () => (options ?? []).map((o) => normalizeOption<Value>(o)),\n    [options],\n  );\n\n  const updateIndicator = useCallback(() => {\n    const list = listRef.current;\n    if (!list) return;\n    const active = list.querySelector<HTMLElement>('[data-segmented-item][data-pressed]');\n    if (!active) {\n      list.style.setProperty('--active-item-left', '0px');\n      list.style.setProperty('--active-item-top', '0px');\n      list.style.setProperty('--active-item-right', '0px');\n      list.style.setProperty('--active-item-width', '0px');\n      list.style.setProperty('--active-item-height', '0px');\n      return;\n    }\n    list.style.setProperty('--active-item-left', `${active.offsetLeft}px`);\n    list.style.setProperty('--active-item-top', `${active.offsetTop}px`);\n    list.style.setProperty(\n      '--active-item-right',\n      `${list.clientWidth - active.offsetLeft - active.offsetWidth}px`,\n    );\n    list.style.setProperty('--active-item-width', `${active.offsetWidth}px`);\n    list.style.setProperty('--active-item-height', `${active.offsetHeight}px`);\n  }, []);\n\n  useLayoutEffect(() => {\n    updateIndicator();\n  }, [innerValue, normalizedOptions, vertical, size, block, updateIndicator]);\n\n  useEffect(() => {\n    const list = listRef.current;\n    if (!list || typeof ResizeObserver === 'undefined') return;\n    const ro = new ResizeObserver(() => updateIndicator());\n    ro.observe(list);\n    return () => ro.disconnect();\n  }, [updateIndicator]);\n\n  const groupValue = useMemo<Value[]>(() => (innerValue != null ? [innerValue] : []), [innerValue]);\n\n  const rootStyle: CSSProperties = { ...style, ...customStyles?.root };\n\n  return (\n    <SegmentedRoot<Value>\n      block={block}\n      className={clsx(classNames?.root, className)}\n      disabled={disabled}\n      glass={glass}\n      id={id}\n      orientation={vertical ? 'vertical' : 'horizontal'}\n      ref={mergedRef}\n      shadow={shadow}\n      style={rootStyle}\n      value={groupValue}\n      variant={variant}\n      onValueChange={(next) => {\n        const picked = next[0];\n        if (picked != null) setInnerValue(picked);\n      }}\n    >\n      <SegmentedIndicator className={classNames?.indicator} style={customStyles?.indicator} />\n      {normalizedOptions.map((opt) => (\n        <SegmentedItem<Value>\n          aria-label={typeof opt.label === 'string' ? opt.label : undefined}\n          block={block}\n          className={clsx(classNames?.item, opt.className)}\n          data-segmented-item=\"\"\n          disabled={disabled || opt.disabled}\n          key={opt.value}\n          name={name}\n          size={size}\n          style={customStyles?.item}\n          title={opt.title}\n          value={opt.value}\n        >\n          {opt.icon != null && (\n            <SegmentedItemIcon className={classNames?.itemIcon} style={customStyles?.itemIcon}>\n              {opt.icon}\n            </SegmentedItemIcon>\n          )}\n          {opt.label != null && (\n            <SegmentedItemLabel className={classNames?.itemLabel} style={customStyles?.itemLabel}>\n              {opt.label}\n            </SegmentedItemLabel>\n          )}\n        </SegmentedItem>\n      ))}\n    </SegmentedRoot>\n  );\n};\n\nSegmented.displayName = 'Segmented';\n\nexport default Segmented;\n"],"mappings":"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"}
+{"version":3,"file":"Segmented.mjs","names":["clsx"],"sources":["../../src/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport {\n  type CSSProperties,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\n\nimport {\n  SegmentedIndicator,\n  SegmentedItem,\n  SegmentedItemIcon,\n  SegmentedItemLabel,\n  SegmentedRoot,\n} from './atoms';\nimport type { SegmentedOption, SegmentedProps } from './type';\n\nconst normalizeOption = <Value extends string>(\n  option: SegmentedOption<Value> | Value,\n): SegmentedOption<Value> =>\n  typeof option === 'string' ? { label: option, value: option } : option;\n\nconst Segmented = <Value extends string = string>({\n  block = false,\n  className,\n  classNames,\n  defaultValue,\n  disabled = false,\n  glass = false,\n  id,\n  name,\n  onChange,\n  options,\n  ref,\n  shadow = false,\n  size = 'middle',\n  style,\n  styles: customStyles,\n  value,\n  variant = 'filled',\n  vertical = false,\n}: SegmentedProps<Value>) => {\n  const [innerValue, setInnerValue] = useControlledState<Value | undefined>(defaultValue, {\n    defaultValue,\n    onChange: (next) => {\n      if (next != null) onChange?.(next);\n    },\n    value,\n  });\n\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  const mergedRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      listRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) (ref as React.RefObject<HTMLDivElement | null>).current = node;\n    },\n    [ref],\n  );\n\n  const normalizedOptions = useMemo(\n    () => (options ?? []).map((o) => normalizeOption<Value>(o)),\n    [options],\n  );\n\n  const updateIndicator = useCallback(() => {\n    const list = listRef.current;\n    if (!list) return;\n    const active = list.querySelector<HTMLElement>('[data-segmented-item][data-pressed]');\n    if (!active) {\n      list.style.setProperty('--active-item-left', '0px');\n      list.style.setProperty('--active-item-top', '0px');\n      list.style.setProperty('--active-item-right', '0px');\n      list.style.setProperty('--active-item-width', '0px');\n      list.style.setProperty('--active-item-height', '0px');\n      return;\n    }\n    list.style.setProperty('--active-item-left', `${active.offsetLeft}px`);\n    list.style.setProperty('--active-item-top', `${active.offsetTop}px`);\n    list.style.setProperty(\n      '--active-item-right',\n      `${list.clientWidth - active.offsetLeft - active.offsetWidth}px`,\n    );\n    list.style.setProperty('--active-item-width', `${active.offsetWidth}px`);\n    list.style.setProperty('--active-item-height', `${active.offsetHeight}px`);\n  }, []);\n\n  useLayoutEffect(() => {\n    updateIndicator();\n  }, [innerValue, normalizedOptions, vertical, size, block, updateIndicator]);\n\n  useEffect(() => {\n    const list = listRef.current;\n    if (!list || typeof ResizeObserver === 'undefined') return;\n    const ro = new ResizeObserver(() => updateIndicator());\n    ro.observe(list);\n    return () => ro.disconnect();\n  }, [updateIndicator]);\n\n  const groupValue = useMemo<Value[]>(() => (innerValue != null ? [innerValue] : []), [innerValue]);\n\n  const rootStyle: CSSProperties = { ...style, ...customStyles?.root };\n\n  return (\n    <SegmentedRoot<Value>\n      block={block}\n      className={clsx(classNames?.root, className)}\n      disabled={disabled}\n      glass={glass}\n      id={id}\n      orientation={vertical ? 'vertical' : 'horizontal'}\n      ref={mergedRef}\n      shadow={shadow}\n      style={rootStyle}\n      value={groupValue}\n      variant={variant}\n      onValueChange={(next) => {\n        const picked = next[0];\n        if (picked != null) setInnerValue(picked);\n      }}\n    >\n      <SegmentedIndicator className={classNames?.indicator} style={customStyles?.indicator} />\n      {normalizedOptions.map((opt) => (\n        <SegmentedItem<Value>\n          aria-label={typeof opt.label === 'string' ? opt.label : undefined}\n          block={block}\n          className={clsx(classNames?.item, opt.className)}\n          data-segmented-item=\"\"\n          disabled={disabled || opt.disabled}\n          key={opt.value}\n          name={name}\n          size={size}\n          style={customStyles?.item}\n          title={opt.title}\n          value={opt.value}\n        >\n          {opt.icon != null && (\n            <SegmentedItemIcon className={classNames?.itemIcon} style={customStyles?.itemIcon}>\n              {opt.icon}\n            </SegmentedItemIcon>\n          )}\n          {opt.label != null && (\n            <SegmentedItemLabel className={classNames?.itemLabel} style={customStyles?.itemLabel}>\n              {opt.label}\n            </SegmentedItemLabel>\n          )}\n        </SegmentedItem>\n      ))}\n    </SegmentedRoot>\n  );\n};\n\nSegmented.displayName = 'Segmented';\n\nexport default Segmented;\n"],"mappings":";;;;;;;AAuBA,MAAM,mBACJ,WAEA,OAAO,WAAW,WAAW;CAAE,OAAO;CAAQ,OAAO;AAAO,IAAI;AAElE,MAAM,aAA4C,EAChD,QAAQ,OACR,WACA,YACA,cACA,WAAW,OACX,QAAQ,OACR,IACA,MACA,UACA,SACA,KACA,SAAS,OACT,OAAO,UACP,OACA,QAAQ,cACR,OACA,UAAU,UACV,WAAW,YACgB;CAC3B,MAAM,CAAC,YAAY,iBAAiB,mBAAsC,cAAc;EACtF;EACA,WAAW,SAAS;GAClB,IAAI,QAAQ,MAAM,WAAW,IAAI;EACnC;EACA;CACF,CAAC;CAED,MAAM,UAAU,OAA8B,IAAI;CAElD,MAAM,YAAY,aACf,SAAgC;EAC/B,QAAQ,UAAU;EAClB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;OAClC,IAAI,KAAK,IAAgD,UAAU;CAC1E,GACA,CAAC,GAAG,CACN;CAEA,MAAM,oBAAoB,eACjB,WAAW,CAAC,EAAA,CAAG,KAAK,MAAM,gBAAuB,CAAC,CAAC,GAC1D,CAAC,OAAO,CACV;CAEA,MAAM,kBAAkB,kBAAkB;EACxC,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,MAAM;EACX,MAAM,SAAS,KAAK,cAA2B,qCAAqC;EACpF,IAAI,CAAC,QAAQ;GACX,KAAK,MAAM,YAAY,sBAAsB,KAAK;GAClD,KAAK,MAAM,YAAY,qBAAqB,KAAK;GACjD,KAAK,MAAM,YAAY,uBAAuB,KAAK;GACnD,KAAK,MAAM,YAAY,uBAAuB,KAAK;GACnD,KAAK,MAAM,YAAY,wBAAwB,KAAK;GACpD;EACF;EACA,KAAK,MAAM,YAAY,sBAAsB,GAAG,OAAO,WAAW,GAAG;EACrE,KAAK,MAAM,YAAY,qBAAqB,GAAG,OAAO,UAAU,GAAG;EACnE,KAAK,MAAM,YACT,uBACA,GAAG,KAAK,cAAc,OAAO,aAAa,OAAO,YAAY,GAC/D;EACA,KAAK,MAAM,YAAY,uBAAuB,GAAG,OAAO,YAAY,GAAG;EACvE,KAAK,MAAM,YAAY,wBAAwB,GAAG,OAAO,aAAa,GAAG;CAC3E,GAAG,CAAC,CAAC;CAEL,sBAAsB;EACpB,gBAAgB;CAClB,GAAG;EAAC;EAAY;EAAmB;EAAU;EAAM;EAAO;CAAe,CAAC;CAE1E,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,QAAQ,OAAO,mBAAmB,aAAa;EACpD,MAAM,KAAK,IAAI,qBAAqB,gBAAgB,CAAC;EACrD,GAAG,QAAQ,IAAI;EACf,aAAa,GAAG,WAAW;CAC7B,GAAG,CAAC,eAAe,CAAC;CAEpB,MAAM,aAAa,cAAwB,cAAc,OAAO,CAAC,UAAU,IAAI,CAAC,GAAI,CAAC,UAAU,CAAC;CAEhG,MAAM,YAA2B;EAAE,GAAG;EAAO,GAAG,cAAc;CAAK;CAEnE,OACE,qBAAC,eAAD;EACS;EACP,WAAWA,OAAK,YAAY,MAAM,SAAS;EACjC;EACH;EACH;EACJ,aAAa,WAAW,aAAa;EACrC,KAAK;EACG;EACR,OAAO;EACP,OAAO;EACE;EACT,gBAAgB,SAAS;GACvB,MAAM,SAAS,KAAK;GACpB,IAAI,UAAU,MAAM,cAAc,MAAM;EAC1C;EAfF,UAAA,CAiBE,oBAAC,oBAAD;GAAoB,WAAW,YAAY;GAAW,OAAO,cAAc;EAAY,CAAA,GACtF,kBAAkB,KAAK,QACtB,qBAAC,eAAD;GACE,cAAY,OAAO,IAAI,UAAU,WAAW,IAAI,QAAQ,KAAA;GACjD;GACP,WAAWA,OAAK,YAAY,MAAM,IAAI,SAAS;GAC/C,uBAAoB;GACpB,UAAU,YAAY,IAAI;GAEpB;GACA;GACN,OAAO,cAAc;GACrB,OAAO,IAAI;GACX,OAAO,IAAI;GAXb,UAAA,CAaG,IAAI,QAAQ,QACX,oBAAC,mBAAD;IAAmB,WAAW,YAAY;IAAU,OAAO,cAAc;IACtE,UAAA,IAAI;GACY,CAAA,GAEpB,IAAI,SAAS,QACZ,oBAAC,oBAAD;IAAoB,WAAW,YAAY;IAAW,OAAO,cAAc;IACxE,UAAA,IAAI;GACa,CAAA,CAET;EAjBR,GAAA,IAAI,KAiBI,CAChB,CACY;;AAEnB;AAEA,UAAU,cAAc"}

package/es/Segmented/atoms.d.mts

@@ -36,4 +36,5 @@ export interface SegmentedIndicatorProps {
 }
 export declare const SegmentedIndicator: FC<SegmentedIndicatorProps>;
 //#endregion
+export {};
 //# sourceMappingURL=atoms.d.mts.map

package/es/Segmented/atoms.mjs

@@ -4,7 +4,7 @@ import { focusRing } from "../styles/stylex/focusRing.mjs";
 import { segmentedMarker } from "./marker.stylex.mjs";
 import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
 //#region src/Segmented/atoms.tsx
@@ -56,7 +56,7 @@ const SegmentedItemLabel = ({ children, className, style }) => /* @__PURE__ */ j
 SegmentedItemLabel.displayName = "SegmentedItemLabel";
 const SegmentedIndicator = ({ className, style }) => /* @__PURE__ */ jsx("span", {
 	"aria-hidden": true,
-	...styleProps(styles.indicator, clsx("lobe-segmented-indicator", className), style)
+	...styleProps(styles.indicator, clsx$1("lobe-segmented-indicator", className), style)
 });
 SegmentedIndicator.displayName = "SegmentedIndicator";
 //#endregion

package/es/Segmented/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["BaseUIToggleGroup","BaseUIToggle"],"sources":["../../src/Segmented/atoms.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { Toggle as BaseUIToggle } from '@base-ui/react/toggle';\nimport { ToggleGroup as BaseUIToggleGroup } from '@base-ui/react/toggle-group';\nimport clsx from 'clsx';\nimport { type ComponentProps, type CSSProperties, type FC, type ReactNode } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { segmentedMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { SegmentedSize, SegmentedVariant } from './type';\n\nconst listVariantStyles = { filled: styles.listFilled, outlined: styles.listOutlined };\n\nconst itemSizeStyles = {\n  large: styles.itemLarge,\n  middle: styles.itemMiddle,\n  small: styles.itemSmall,\n};\n\nexport type SegmentedRootProps<Value extends string = string> = Omit<\n  ComponentProps<typeof BaseUIToggleGroup<Value>>,\n  'className' | 'render'\n> & {\n  block?: boolean;\n  className?: string;\n  glass?: boolean;\n  shadow?: boolean;\n  variant?: SegmentedVariant;\n};\n\nexport const SegmentedRoot = <Value extends string = string>({\n  block = false,\n  className,\n  glass = false,\n  shadow = false,\n  variant = 'filled',\n  ...rest\n}: SegmentedRootProps<Value>) => {\n  return (\n    <BaseUIToggleGroup<Value>\n      data-variant={variant}\n      className={\n        styleProps(\n          [\n            segmentedMarker,\n            styles.list,\n            block && styles.listBlock,\n            glass && styles.listGlass,\n            shadow && styles.listShadow,\n            listVariantStyles[variant],\n          ],\n          className,\n        ).className\n      }\n      {...rest}\n    />\n  );\n};\n\nSegmentedRoot.displayName = 'SegmentedRoot';\n\nexport type SegmentedItemProps<Value extends string = string> = Omit<\n  ComponentProps<typeof BaseUIToggle<Value>>,\n  'className' | 'render'\n> & {\n  block?: boolean;\n  className?: string;\n  size?: SegmentedSize;\n};\n\nexport const SegmentedItem = <Value extends string = string>({\n  block = false,\n  className,\n  size = 'middle',\n  ...rest\n}: SegmentedItemProps<Value>) => {\n  return (\n    <BaseUIToggle<Value>\n      className={\n        styleProps(\n          [styles.item, focusRing.info, block && styles.itemBlock, itemSizeStyles[size]],\n          className,\n        ).className\n      }\n      {...rest}\n    />\n  );\n};\n\nSegmentedItem.displayName = 'SegmentedItem';\n\ninterface SimpleSpanProps {\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const SegmentedItemIcon: FC<SimpleSpanProps> = ({ children, className, style }) => (\n  <span {...styleProps(styles.itemIcon, className, style)}>{children}</span>\n);\nSegmentedItemIcon.displayName = 'SegmentedItemIcon';\n\nexport const SegmentedItemLabel: FC<SimpleSpanProps> = ({ children, className, style }) => (\n  <span {...styleProps(styles.itemLabel, className, style)}>{children}</span>\n);\nSegmentedItemLabel.displayName = 'SegmentedItemLabel';\n\nexport interface SegmentedIndicatorProps {\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const SegmentedIndicator: FC<SegmentedIndicatorProps> = ({ className, style }) => (\n  <span\n    aria-hidden\n    {...styleProps(styles.indicator, clsx('lobe-segmented-indicator', className), style)}\n  />\n);\nSegmentedIndicator.displayName = 'SegmentedIndicator';\n"],"mappings":";;;;;;;;;;AAgBA,MAAM,oBAAoB;CAAE,QAAQ,OAAO;CAAY,UAAU,OAAO;AAAa;AAErF,MAAM,iBAAiB;CACrB,OAAO,OAAO;CACd,QAAQ,OAAO;CACf,OAAO,OAAO;AAChB;AAaA,MAAa,iBAAgD,EAC3D,QAAQ,OACR,WACA,QAAQ,OACR,SAAS,OACT,UAAU,UACV,GAAG,WAC4B;CAC/B,OACE,oBAACA,aAAD;EACE,gBAAc;EACd,WACE,WACE;GACE;GACA,OAAO;GACP,SAAS,OAAO;GAChB,SAAS,OAAO;GAChB,UAAU,OAAO;GACjB,kBAAkB;EACpB,GACA,SACF,CAAC,CAAC;EAEJ,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc;AAW5B,MAAa,iBAAgD,EAC3D,QAAQ,OACR,WACA,OAAO,UACP,GAAG,WAC4B;CAC/B,OACE,oBAACC,QAAD;EACE,WACE,WACE;GAAC,OAAO;GAAM,UAAU;GAAM,SAAS,OAAO;GAAW,eAAe;EAAK,GAC7E,SACF,CAAC,CAAC;EAEJ,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc;AAQ5B,MAAa,qBAA0C,EAAE,UAAU,WAAW,YAC5E,oBAAC,QAAD;CAAM,GAAI,WAAW,OAAO,UAAU,WAAW,KAAK;CAAI;AAAe,CAAA;AAE3E,kBAAkB,cAAc;AAEhC,MAAa,sBAA2C,EAAE,UAAU,WAAW,YAC7E,oBAAC,QAAD;CAAM,GAAI,WAAW,OAAO,WAAW,WAAW,KAAK;CAAI;AAAe,CAAA;AAE5E,mBAAmB,cAAc;AAOjC,MAAa,sBAAmD,EAAE,WAAW,YAC3E,oBAAC,QAAD;CACE,eAAA;CACA,GAAI,WAAW,OAAO,WAAW,KAAK,4BAA4B,SAAS,GAAG,KAAK;AACpF,CAAA;AAEH,mBAAmB,cAAc"}
+{"version":3,"file":"atoms.mjs","names":["BaseUIToggleGroup","BaseUIToggle","clsx"],"sources":["../../src/Segmented/atoms.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport { Toggle as BaseUIToggle } from '@base-ui/react/toggle';\nimport { ToggleGroup as BaseUIToggleGroup } from '@base-ui/react/toggle-group';\nimport clsx from 'clsx';\nimport { type ComponentProps, type CSSProperties, type FC, type ReactNode } from 'react';\n\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { segmentedMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { SegmentedSize, SegmentedVariant } from './type';\n\nconst listVariantStyles = { filled: styles.listFilled, outlined: styles.listOutlined };\n\nconst itemSizeStyles = {\n  large: styles.itemLarge,\n  middle: styles.itemMiddle,\n  small: styles.itemSmall,\n};\n\nexport type SegmentedRootProps<Value extends string = string> = Omit<\n  ComponentProps<typeof BaseUIToggleGroup<Value>>,\n  'className' | 'render'\n> & {\n  block?: boolean;\n  className?: string;\n  glass?: boolean;\n  shadow?: boolean;\n  variant?: SegmentedVariant;\n};\n\nexport const SegmentedRoot = <Value extends string = string>({\n  block = false,\n  className,\n  glass = false,\n  shadow = false,\n  variant = 'filled',\n  ...rest\n}: SegmentedRootProps<Value>) => {\n  return (\n    <BaseUIToggleGroup<Value>\n      data-variant={variant}\n      className={\n        styleProps(\n          [\n            segmentedMarker,\n            styles.list,\n            block && styles.listBlock,\n            glass && styles.listGlass,\n            shadow && styles.listShadow,\n            listVariantStyles[variant],\n          ],\n          className,\n        ).className\n      }\n      {...rest}\n    />\n  );\n};\n\nSegmentedRoot.displayName = 'SegmentedRoot';\n\nexport type SegmentedItemProps<Value extends string = string> = Omit<\n  ComponentProps<typeof BaseUIToggle<Value>>,\n  'className' | 'render'\n> & {\n  block?: boolean;\n  className?: string;\n  size?: SegmentedSize;\n};\n\nexport const SegmentedItem = <Value extends string = string>({\n  block = false,\n  className,\n  size = 'middle',\n  ...rest\n}: SegmentedItemProps<Value>) => {\n  return (\n    <BaseUIToggle<Value>\n      className={\n        styleProps(\n          [styles.item, focusRing.info, block && styles.itemBlock, itemSizeStyles[size]],\n          className,\n        ).className\n      }\n      {...rest}\n    />\n  );\n};\n\nSegmentedItem.displayName = 'SegmentedItem';\n\ninterface SimpleSpanProps {\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const SegmentedItemIcon: FC<SimpleSpanProps> = ({ children, className, style }) => (\n  <span {...styleProps(styles.itemIcon, className, style)}>{children}</span>\n);\nSegmentedItemIcon.displayName = 'SegmentedItemIcon';\n\nexport const SegmentedItemLabel: FC<SimpleSpanProps> = ({ children, className, style }) => (\n  <span {...styleProps(styles.itemLabel, className, style)}>{children}</span>\n);\nSegmentedItemLabel.displayName = 'SegmentedItemLabel';\n\nexport interface SegmentedIndicatorProps {\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const SegmentedIndicator: FC<SegmentedIndicatorProps> = ({ className, style }) => (\n  <span\n    aria-hidden\n    {...styleProps(styles.indicator, clsx('lobe-segmented-indicator', className), style)}\n  />\n);\nSegmentedIndicator.displayName = 'SegmentedIndicator';\n"],"mappings":";;;;;;;;;;AAgBA,MAAM,oBAAoB;CAAE,QAAQ,OAAO;CAAY,UAAU,OAAO;AAAa;AAErF,MAAM,iBAAiB;CACrB,OAAO,OAAO;CACd,QAAQ,OAAO;CACf,OAAO,OAAO;AAChB;AAaA,MAAa,iBAAgD,EAC3D,QAAQ,OACR,WACA,QAAQ,OACR,SAAS,OACT,UAAU,UACV,GAAG,WAC4B;CAC/B,OACE,oBAACA,aAAD;EACE,gBAAc;EACd,WACE,WACE;GACE;GACA,OAAO;GACP,SAAS,OAAO;GAChB,SAAS,OAAO;GAChB,UAAU,OAAO;GACjB,kBAAkB;EACpB,GACA,SACF,CAAC,CAAC;EAEJ,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc;AAW5B,MAAa,iBAAgD,EAC3D,QAAQ,OACR,WACA,OAAO,UACP,GAAG,WAC4B;CAC/B,OACE,oBAACC,QAAD;EACE,WACE,WACE;GAAC,OAAO;GAAM,UAAU;GAAM,SAAS,OAAO;GAAW,eAAe;EAAK,GAC7E,SACF,CAAC,CAAC;EAEJ,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc;AAQ5B,MAAa,qBAA0C,EAAE,UAAU,WAAW,YAC5E,oBAAC,QAAD;CAAM,GAAI,WAAW,OAAO,UAAU,WAAW,KAAK;CAAI;AAAe,CAAA;AAE3E,kBAAkB,cAAc;AAEhC,MAAa,sBAA2C,EAAE,UAAU,WAAW,YAC7E,oBAAC,QAAD;CAAM,GAAI,WAAW,OAAO,WAAW,WAAW,KAAK;CAAI;AAAe,CAAA;AAE5E,mBAAmB,cAAc;AAOjC,MAAa,sBAAmD,EAAE,WAAW,YAC3E,oBAAC,QAAD;CACE,eAAA;CACA,GAAI,WAAW,OAAO,WAAWC,OAAK,4BAA4B,SAAS,GAAG,KAAK;AACpF,CAAA;AAEH,mBAAmB,cAAc"}

package/es/Select/Select.mjs

@@ -4,16 +4,16 @@ import { useThemeMode } from "../styles/theme/scope.mjs";
 import { menuClassNames, menuStyles } from "../DropdownMenu/style.mjs";
 import { styles, triggerStyles } from "./style.mjs";
 import { SelectPositioner } from "./atoms.mjs";
-import { isValueEmpty } from "./helpers.mjs";
+import { isValueEmpty, shouldIgnoreRootValueChange } from "./helpers.mjs";
 import { usePortalContainer, useSelectOpen, useSelectSearch, useSelectValue, useSelectVirtual } from "./hooks.mjs";
 import { EmptyContent, SelectListSection, SelectSearchInput, SelectTriggerSuffix, createTriggerValueRenderer, resolveIconNode, resolveSuffixIcon } from "./parts.mjs";
 import { renderOptions } from "./renderOptions.mjs";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { Select } from "@base-ui/react/select";
 //#region src/Select/Select.tsx
-const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOpen, defaultValue, disabled, id, labelRender, listHeight = 512, listItemHeight, loading, mode, name, onChange, onOpenChange, onSelect, open, optionRender, options, placeholder, popupClassName, popupMatchSelectWidth, prefix, readOnly, required, behaviorVariant = "default", selectedIndicatorVariant = "check", shadow, showSearch, size = "middle", style, suffixIcon, suffixIconProps, tokenSeparators, value, variant, virtual }) => {
+const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOpen, defaultValue, disabled, id, labelRender, listHeight = 512, listItemHeight, loading, mode, name, onChange, onOpenChange, onSelect, open, optionRender, options, placeholder, popupClassName, popupMatchSelectWidth, prefix, readOnly, required, behaviorVariant = "default", selectedIndicatorVariant = "check", shadow, showSearch, filterOption, onSearch, size = "middle", style, suffixIcon, suffixIconProps, tokenSeparators, value, variant, virtual }) => {
 	const { isDarkMode } = useThemeMode();
 	const resolvedVariant = variant ?? (isDarkMode ? "filled" : "outlined");
 	const isTags = mode === "tags";
@@ -38,15 +38,10 @@ const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOp
 		onOpenChange,
 		open
 	});
-	const handleRootValueChange = useCallback((nextValue) => {
-		if (!(isTags && !mergedOpen)) handleValueChange(nextValue);
-	}, [
-		handleValueChange,
-		isTags,
-		mergedOpen
-	]);
 	const handleRemoveTag = useCallback((index) => handleValueChange(valueArray.filter((_, itemIndex) => itemIndex !== index)), [handleValueChange, valueArray]);
 	const { filteredOptions, handleSearchChange, handleSearchKeyDown, searchValue, shouldShowSearch, stopSearchPropagation } = useSelectSearch({
+		filterOption,
+		onSearch,
 		appendTagValues,
 		handleOpenChange,
 		mergedOpen,
@@ -56,6 +51,20 @@ const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOp
 		showSearch,
 		tokenSeparators
 	});
+	const handleRootValueChange = useCallback((nextValue, eventDetails) => {
+		if (isTags && !mergedOpen) return;
+		if (shouldIgnoreRootValueChange({
+			mergedOpen,
+			reason: eventDetails?.reason,
+			searchValue
+		})) return;
+		handleValueChange(nextValue);
+	}, [
+		handleValueChange,
+		isTags,
+		mergedOpen,
+		searchValue
+	]);
 	const virtualState = useSelectVirtual({
 		filteredOptions,
 		listItemHeight,
@@ -120,9 +129,9 @@ const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOp
 		shadow,
 		size,
 		variant: resolvedVariant
-	}), clsx(className, classNames?.root, classNames?.trigger), style);
+	}), clsx$1(className, classNames?.root, classNames?.trigger), style);
 	const isBoldIndicator = selectedIndicatorVariant === "bold";
-	const itemTextClassName = styleProps(optionRender ? menuStyles.itemContent : menuStyles.label, clsx(!optionRender && menuClassNames.label, classNames?.itemText)).className;
+	const itemTextClassName = styleProps(optionRender ? menuStyles.itemContent : menuStyles.label, clsx$1(!optionRender && menuClassNames.label, classNames?.itemText)).className;
 	const isEmpty = filteredOptions.length === 0;
 	const listContent = isEmpty ? /* @__PURE__ */ jsx(EmptyContent, { classNames }) : renderOptions({
 		classNames,
@@ -186,7 +195,7 @@ const Select$1 = memo(({ allowClear, autoFocus, className, classNames, defaultOp
 				side: "bottom",
 				sideOffset: 6,
 				children: /* @__PURE__ */ jsxs(Select.Popup, {
-					...styleProps([menuStyles.popup, styles.popup], clsx(menuClassNames.popup, popupClassName, classNames?.popup, classNames?.dropdown), popupStyle),
+					...styleProps([menuStyles.popup, styles.popup], clsx$1(menuClassNames.popup, popupClassName, classNames?.popup, classNames?.dropdown), popupStyle),
 					children: [shouldShowSearch && !isTags && /* @__PURE__ */ jsx(SelectSearchInput, {
 						classNames,
 						placeholder,

package/es/Select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","names":["Select","BaseSelect"],"sources":["../../src/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport clsx from 'clsx';\nimport { type MouseEvent } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { menuClassNames, menuStyles } from '@/DropdownMenu/sharedStyle';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { SelectPositioner } from './atoms';\nimport { isValueEmpty } from './helpers';\nimport {\n  usePortalContainer,\n  useSelectOpen,\n  useSelectSearch,\n  useSelectValue,\n  useSelectVirtual,\n} from './hooks';\nimport {\n  createTriggerValueRenderer,\n  EmptyContent,\n  resolveIconNode,\n  resolveSuffixIcon,\n  SelectListSection,\n  SelectSearchInput,\n  SelectTriggerSuffix,\n} from './parts';\nimport { renderOptions } from './renderOptions';\nimport { styles, triggerStyles } from './style';\nimport { type SelectOption, type SelectProps } from './type';\n\nconst Select = memo<SelectProps<any>>(\n  ({\n    allowClear,\n    autoFocus,\n    className,\n    classNames,\n    defaultOpen,\n    defaultValue,\n    disabled,\n    id,\n    labelRender,\n    listHeight = 512,\n    listItemHeight,\n    loading,\n    mode,\n    name,\n    onChange,\n    onOpenChange,\n    onSelect,\n    open,\n    optionRender,\n    options,\n    placeholder,\n    popupClassName,\n    popupMatchSelectWidth,\n    prefix,\n    readOnly,\n    required,\n    behaviorVariant = 'default',\n    selectedIndicatorVariant = 'check',\n    shadow,\n    showSearch,\n    size = 'middle',\n    style,\n    suffixIcon,\n    suffixIconProps,\n    tokenSeparators,\n    value,\n    variant,\n    virtual,\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const resolvedVariant = variant ?? (isDarkMode ? 'filled' : 'outlined');\n    const isTags = mode === 'tags';\n    const isMultiple = mode === 'multiple' || mode === 'tags';\n    const isItemAligned = behaviorVariant === 'item-aligned';\n\n    const [extraOptions, setExtraOptions] = useState<SelectOption<any>[]>([]);\n\n    useEffect(() => {\n      if (mode !== 'tags' && extraOptions.length > 0) {\n        setExtraOptions([]);\n      }\n    }, [mode, extraOptions.length]);\n\n    const {\n      appendTagValues,\n      getOption,\n      handleValueChange,\n      normalizedValue,\n      normalizeValue,\n      removeLastTagValue,\n      resolvedOptions,\n      valueArray,\n    } = useSelectValue({\n      defaultValue,\n      extraOptions,\n      isMultiple,\n      onChange,\n      onSelect,\n      options,\n      setExtraOptions,\n      value,\n    });\n\n    const { handleOpenChange, mergedOpen } = useSelectOpen({ defaultOpen, onOpenChange, open });\n\n    const handleRootValueChange = useCallback(\n      (nextValue: any) => {\n        if (!(isTags && !mergedOpen)) handleValueChange(nextValue);\n      },\n      [handleValueChange, isTags, mergedOpen],\n    );\n\n    const handleRemoveTag = useCallback(\n      (index: number) =>\n        handleValueChange(valueArray.filter((_, itemIndex) => itemIndex !== index)),\n      [handleValueChange, valueArray],\n    );\n\n    const {\n      filteredOptions,\n      handleSearchChange,\n      handleSearchKeyDown,\n      searchValue,\n      shouldShowSearch,\n      stopSearchPropagation,\n    } = useSelectSearch({\n      appendTagValues,\n      handleOpenChange,\n      mergedOpen,\n      mode,\n      removeLastTagValue,\n      resolvedOptions,\n      showSearch,\n      tokenSeparators,\n    });\n\n    const virtualState = useSelectVirtual({\n      filteredOptions,\n      listItemHeight,\n      size,\n      valueArray,\n      virtual,\n    });\n\n    const portalContainer = usePortalContainer();\n\n    const renderValue = useMemo(\n      () =>\n        createTriggerValueRenderer({\n          getOption,\n          isMultiple,\n          isTags,\n          labelRender,\n          normalizeValue,\n          onRemoveValue: handleRemoveTag,\n          placeholder: isTags ? undefined : placeholder,\n        }),\n      [getOption, handleRemoveTag, isMultiple, isTags, labelRender, normalizeValue, placeholder],\n    );\n\n    const hasValue = isMultiple ? valueArray.length > 0 : !isValueEmpty(normalizedValue);\n    const showClear = Boolean(allowClear && hasValue && !disabled && !readOnly);\n\n    const handleClear = useCallback(\n      (event: MouseEvent) => {\n        event.preventDefault();\n        event.stopPropagation();\n        handleValueChange(isMultiple ? [] : null);\n      },\n      [handleValueChange, isMultiple],\n    );\n\n    const prefixNode = useMemo(() => resolveIconNode(prefix), [prefix]);\n    const suffixIconNode = useMemo(\n      () => resolveSuffixIcon(suffixIcon, suffixIconProps, loading),\n      [loading, suffixIcon, suffixIconProps],\n    );\n\n    const popupStyle = useMemo(() => {\n      const maxHeight = isItemAligned ? '80vh' : `${listHeight}px`;\n      const baseStyle: React.CSSProperties = {\n        maxWidth: 'var(--available-width)',\n        minWidth: 'var(--anchor-width)',\n        ['--lobe-select-popup-max-height' as any]: maxHeight,\n      };\n\n      if (popupMatchSelectWidth === undefined || popupMatchSelectWidth === true) {\n        return baseStyle;\n      }\n      if (typeof popupMatchSelectWidth === 'number') {\n        return {\n          ...baseStyle,\n          minWidth: popupMatchSelectWidth,\n          width: popupMatchSelectWidth,\n        };\n      }\n      return { ...baseStyle, minWidth: 'max-content' };\n    }, [isItemAligned, listHeight, popupMatchSelectWidth]);\n\n    const triggerProps = styleProps(\n      triggerStyles({ shadow, size, variant: resolvedVariant }),\n      clsx(className, classNames?.root, classNames?.trigger),\n      style,\n    );\n\n    const isBoldIndicator = selectedIndicatorVariant === 'bold';\n    const itemTextClassName = styleProps(\n      optionRender ? menuStyles.itemContent : menuStyles.label,\n      clsx(!optionRender && menuClassNames.label, classNames?.itemText),\n    ).className;\n\n    const isEmpty = filteredOptions.length === 0;\n    const listContent = isEmpty ? (\n      <EmptyContent classNames={classNames} />\n    ) : (\n      renderOptions({\n        classNames,\n        isBoldIndicator,\n        items: filteredOptions,\n        itemTextClassName,\n        listItemHeight,\n        optionRender,\n      })\n    );\n\n    return (\n      <BaseSelect.Root\n        disabled={disabled}\n        id={id}\n        modal={isItemAligned}\n        multiple={isMultiple}\n        name={name}\n        open={mergedOpen}\n        readOnly={readOnly}\n        required={required}\n        value={normalizedValue}\n        onOpenChange={handleOpenChange}\n        onValueChange={handleRootValueChange}\n      >\n        <BaseSelect.Trigger\n          autoFocus={!isTags && autoFocus}\n          {...triggerProps}\n          disabled={disabled}\n          nativeButton={!isTags}\n          render={isTags ? <div /> : undefined}\n        >\n          {prefixNode !== null && prefixNode !== undefined && (\n            <span {...styleProps(styles.prefix, classNames?.prefix)}>{prefixNode}</span>\n          )}\n          <BaseSelect.Value\n            {...styleProps([styles.value, isTags && styles.tagsValue], classNames?.value)}\n          >\n            {renderValue}\n          </BaseSelect.Value>\n          {isTags && (\n            <SelectSearchInput\n              inline\n              autoFocus={autoFocus}\n              classNames={classNames}\n              disabled={disabled}\n              placeholder={valueArray.length === 0 ? placeholder : undefined}\n              readOnly={readOnly}\n              stopPropagation={stopSearchPropagation}\n              value={searchValue}\n              onChange={handleSearchChange}\n              onKeyDown={handleSearchKeyDown}\n            />\n          )}\n          <SelectTriggerSuffix\n            classNames={classNames}\n            showClear={showClear}\n            suffixIconNode={suffixIconNode}\n            onClear={handleClear}\n          />\n        </BaseSelect.Trigger>\n\n        <BaseSelect.Portal container={portalContainer}>\n          <SelectPositioner\n            align=\"start\"\n            alignItemWithTrigger={isItemAligned}\n            side=\"bottom\"\n            sideOffset={6}\n          >\n            <BaseSelect.Popup\n              {...styleProps(\n                [menuStyles.popup, styles.popup],\n                clsx(menuClassNames.popup, popupClassName, classNames?.popup, classNames?.dropdown),\n                popupStyle,\n              )}\n            >\n              {shouldShowSearch && !isTags && (\n                <SelectSearchInput\n                  classNames={classNames}\n                  placeholder={placeholder}\n                  stopPropagation={stopSearchPropagation}\n                  value={searchValue}\n                  onChange={handleSearchChange}\n                  onKeyDown={handleSearchKeyDown}\n                />\n              )}\n              <SelectListSection\n                classNames={classNames}\n                hasSearch={shouldShowSearch && !isTags}\n                isEmpty={isEmpty}\n                listContent={listContent}\n                listItemHeight={listItemHeight}\n                virtual={virtual}\n                virtualState={virtualState}\n              />\n            </BaseSelect.Popup>\n          </SelectPositioner>\n        </BaseSelect.Portal>\n      </BaseSelect.Root>\n    );\n  },\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":"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"}
+{"version":3,"file":"Select.mjs","names":["Select","clsx","BaseSelect"],"sources":["../../src/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport clsx from 'clsx';\nimport { type MouseEvent } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { menuClassNames, menuStyles } from '@/DropdownMenu/sharedStyle';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { SelectPositioner } from './atoms';\nimport { isValueEmpty, shouldIgnoreRootValueChange } from './helpers';\nimport {\n  usePortalContainer,\n  useSelectOpen,\n  useSelectSearch,\n  useSelectValue,\n  useSelectVirtual,\n} from './hooks';\nimport {\n  createTriggerValueRenderer,\n  EmptyContent,\n  resolveIconNode,\n  resolveSuffixIcon,\n  SelectListSection,\n  SelectSearchInput,\n  SelectTriggerSuffix,\n} from './parts';\nimport { renderOptions } from './renderOptions';\nimport { styles, triggerStyles } from './style';\nimport { type SelectOption, type SelectProps } from './type';\n\nconst Select = memo<SelectProps<any>>(\n  ({\n    allowClear,\n    autoFocus,\n    className,\n    classNames,\n    defaultOpen,\n    defaultValue,\n    disabled,\n    id,\n    labelRender,\n    listHeight = 512,\n    listItemHeight,\n    loading,\n    mode,\n    name,\n    onChange,\n    onOpenChange,\n    onSelect,\n    open,\n    optionRender,\n    options,\n    placeholder,\n    popupClassName,\n    popupMatchSelectWidth,\n    prefix,\n    readOnly,\n    required,\n    behaviorVariant = 'default',\n    selectedIndicatorVariant = 'check',\n    shadow,\n    showSearch,\n    filterOption,\n    onSearch,\n    size = 'middle',\n    style,\n    suffixIcon,\n    suffixIconProps,\n    tokenSeparators,\n    value,\n    variant,\n    virtual,\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const resolvedVariant = variant ?? (isDarkMode ? 'filled' : 'outlined');\n    const isTags = mode === 'tags';\n    const isMultiple = mode === 'multiple' || mode === 'tags';\n    const isItemAligned = behaviorVariant === 'item-aligned';\n\n    const [extraOptions, setExtraOptions] = useState<SelectOption<any>[]>([]);\n\n    useEffect(() => {\n      if (mode !== 'tags' && extraOptions.length > 0) {\n        setExtraOptions([]);\n      }\n    }, [mode, extraOptions.length]);\n\n    const {\n      appendTagValues,\n      getOption,\n      handleValueChange,\n      normalizedValue,\n      normalizeValue,\n      removeLastTagValue,\n      resolvedOptions,\n      valueArray,\n    } = useSelectValue({\n      defaultValue,\n      extraOptions,\n      isMultiple,\n      onChange,\n      onSelect,\n      options,\n      setExtraOptions,\n      value,\n    });\n\n    const { handleOpenChange, mergedOpen } = useSelectOpen({ defaultOpen, onOpenChange, open });\n\n    const handleRemoveTag = useCallback(\n      (index: number) =>\n        handleValueChange(valueArray.filter((_, itemIndex) => itemIndex !== index)),\n      [handleValueChange, valueArray],\n    );\n\n    const {\n      filteredOptions,\n      handleSearchChange,\n      handleSearchKeyDown,\n      searchValue,\n      shouldShowSearch,\n      stopSearchPropagation,\n    } = useSelectSearch({\n      filterOption,\n      onSearch,\n      appendTagValues,\n      handleOpenChange,\n      mergedOpen,\n      mode,\n      removeLastTagValue,\n      resolvedOptions,\n      showSearch,\n      tokenSeparators,\n    });\n\n    // Base UI prunes selected values that are missing from the registered (filtered) options\n    // and reports it with reason 'none'. Ignore it while open or while closing with a stale\n    // search term, so searching never mutates the value. Closed typeahead stays valid.\n    const handleRootValueChange = useCallback(\n      (nextValue: any, eventDetails?: { reason?: string }) => {\n        if (isTags && !mergedOpen) return;\n        if (shouldIgnoreRootValueChange({ mergedOpen, reason: eventDetails?.reason, searchValue }))\n          return;\n        handleValueChange(nextValue);\n      },\n      [handleValueChange, isTags, mergedOpen, searchValue],\n    );\n\n    const virtualState = useSelectVirtual({\n      filteredOptions,\n      listItemHeight,\n      size,\n      valueArray,\n      virtual,\n    });\n\n    const portalContainer = usePortalContainer();\n\n    const renderValue = useMemo(\n      () =>\n        createTriggerValueRenderer({\n          getOption,\n          isMultiple,\n          isTags,\n          labelRender,\n          normalizeValue,\n          onRemoveValue: handleRemoveTag,\n          placeholder: isTags ? undefined : placeholder,\n        }),\n      [getOption, handleRemoveTag, isMultiple, isTags, labelRender, normalizeValue, placeholder],\n    );\n\n    const hasValue = isMultiple ? valueArray.length > 0 : !isValueEmpty(normalizedValue);\n    const showClear = Boolean(allowClear && hasValue && !disabled && !readOnly);\n\n    const handleClear = useCallback(\n      (event: MouseEvent) => {\n        event.preventDefault();\n        event.stopPropagation();\n        handleValueChange(isMultiple ? [] : null);\n      },\n      [handleValueChange, isMultiple],\n    );\n\n    const prefixNode = useMemo(() => resolveIconNode(prefix), [prefix]);\n    const suffixIconNode = useMemo(\n      () => resolveSuffixIcon(suffixIcon, suffixIconProps, loading),\n      [loading, suffixIcon, suffixIconProps],\n    );\n\n    const popupStyle = useMemo(() => {\n      const maxHeight = isItemAligned ? '80vh' : `${listHeight}px`;\n      const baseStyle: React.CSSProperties = {\n        maxWidth: 'var(--available-width)',\n        minWidth: 'var(--anchor-width)',\n        ['--lobe-select-popup-max-height' as any]: maxHeight,\n      };\n\n      if (popupMatchSelectWidth === undefined || popupMatchSelectWidth === true) {\n        return baseStyle;\n      }\n      if (typeof popupMatchSelectWidth === 'number') {\n        return {\n          ...baseStyle,\n          minWidth: popupMatchSelectWidth,\n          width: popupMatchSelectWidth,\n        };\n      }\n      return { ...baseStyle, minWidth: 'max-content' };\n    }, [isItemAligned, listHeight, popupMatchSelectWidth]);\n\n    const triggerProps = styleProps(\n      triggerStyles({ shadow, size, variant: resolvedVariant }),\n      clsx(className, classNames?.root, classNames?.trigger),\n      style,\n    );\n\n    const isBoldIndicator = selectedIndicatorVariant === 'bold';\n    const itemTextClassName = styleProps(\n      optionRender ? menuStyles.itemContent : menuStyles.label,\n      clsx(!optionRender && menuClassNames.label, classNames?.itemText),\n    ).className;\n\n    const isEmpty = filteredOptions.length === 0;\n    const listContent = isEmpty ? (\n      <EmptyContent classNames={classNames} />\n    ) : (\n      renderOptions({\n        classNames,\n        isBoldIndicator,\n        items: filteredOptions,\n        itemTextClassName,\n        listItemHeight,\n        optionRender,\n      })\n    );\n\n    return (\n      <BaseSelect.Root\n        disabled={disabled}\n        id={id}\n        modal={isItemAligned}\n        multiple={isMultiple}\n        name={name}\n        open={mergedOpen}\n        readOnly={readOnly}\n        required={required}\n        value={normalizedValue}\n        onOpenChange={handleOpenChange}\n        onValueChange={handleRootValueChange}\n      >\n        <BaseSelect.Trigger\n          autoFocus={!isTags && autoFocus}\n          {...triggerProps}\n          disabled={disabled}\n          nativeButton={!isTags}\n          render={isTags ? <div /> : undefined}\n        >\n          {prefixNode !== null && prefixNode !== undefined && (\n            <span {...styleProps(styles.prefix, classNames?.prefix)}>{prefixNode}</span>\n          )}\n          <BaseSelect.Value\n            {...styleProps([styles.value, isTags && styles.tagsValue], classNames?.value)}\n          >\n            {renderValue}\n          </BaseSelect.Value>\n          {isTags && (\n            <SelectSearchInput\n              inline\n              autoFocus={autoFocus}\n              classNames={classNames}\n              disabled={disabled}\n              placeholder={valueArray.length === 0 ? placeholder : undefined}\n              readOnly={readOnly}\n              stopPropagation={stopSearchPropagation}\n              value={searchValue}\n              onChange={handleSearchChange}\n              onKeyDown={handleSearchKeyDown}\n            />\n          )}\n          <SelectTriggerSuffix\n            classNames={classNames}\n            showClear={showClear}\n            suffixIconNode={suffixIconNode}\n            onClear={handleClear}\n          />\n        </BaseSelect.Trigger>\n\n        <BaseSelect.Portal container={portalContainer}>\n          <SelectPositioner\n            align=\"start\"\n            alignItemWithTrigger={isItemAligned}\n            side=\"bottom\"\n            sideOffset={6}\n          >\n            <BaseSelect.Popup\n              {...styleProps(\n                [menuStyles.popup, styles.popup],\n                clsx(menuClassNames.popup, popupClassName, classNames?.popup, classNames?.dropdown),\n                popupStyle,\n              )}\n            >\n              {shouldShowSearch && !isTags && (\n                <SelectSearchInput\n                  classNames={classNames}\n                  placeholder={placeholder}\n                  stopPropagation={stopSearchPropagation}\n                  value={searchValue}\n                  onChange={handleSearchChange}\n                  onKeyDown={handleSearchKeyDown}\n                />\n              )}\n              <SelectListSection\n                classNames={classNames}\n                hasSearch={shouldShowSearch && !isTags}\n                isEmpty={isEmpty}\n                listContent={listContent}\n                listItemHeight={listItemHeight}\n                virtual={virtual}\n                virtualState={virtualState}\n              />\n            </BaseSelect.Popup>\n          </SelectPositioner>\n        </BaseSelect.Portal>\n      </BaseSelect.Root>\n    );\n  },\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":"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"}

package/es/Select/atoms.mjs

@@ -2,6 +2,7 @@
 import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
 import { styleProps } from "../styles/stylex/props.mjs";
 import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { mergeRefs, useMergeRefs } from "../utils/mergeRefs.mjs";
 import { getFloatingCollisionPadding } from "../internal/floating/collisionPadding.mjs";
 import { useThemeMode } from "../styles/theme/scope.mjs";
 import { useLayerZIndex } from "../internal/zIndex/useLayerZIndex.mjs";
@@ -9,16 +10,15 @@ import { menuClassNames, menuStyles } from "../DropdownMenu/style.mjs";
 import { styles, triggerStyles } from "./style.mjs";
 import { cloneElement, isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { mergeProps } from "@base-ui/react/merge-props";
-import { mergeRefs, useMergeRefs } from "react-merge-refs";
 import { Select } from "@base-ui/react/select";
 //#region src/Select/atoms.tsx
 const mergeStateClassName = (base, className, extra) => {
 	const baseClassName = styleProps(base, extra).className;
-	if (typeof className === "function") return (state) => clsx(baseClassName, className(state));
-	return clsx(baseClassName, className);
+	if (typeof className === "function") return (state) => clsx$1(baseClassName, className(state));
+	return clsx$1(baseClassName, className);
 };
 const SelectRoot = Select.Root;
 const SelectBackdrop = Select.Backdrop;
@@ -49,7 +49,7 @@ const SelectTrigger = ({ children, className, nativeButton, shadow, size = "midd
 			const extraClassName = typeof className === "function" ? className(state) : className;
 			return cloneElement(children, {
 				...mergedProps,
-				className: clsx(baseClassName, childClassName, extraClassName),
+				className: clsx$1(baseClassName, childClassName, extraClassName),
 				ref: mergeRefs([
 					children.ref,
 					props.ref,