@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/Segmented/index.d.mts

@@ -1,3 +1,4 @@
-import { SegmentedProps } from "./type.mjs";
+import { SegmentedClassNames, SegmentedOption, SegmentedOptions, SegmentedOrientation, SegmentedProps, SegmentedSize, SegmentedStyles, SegmentedVariant } from "./type.mjs";
+import { SegmentedIndicator, SegmentedIndicatorProps, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedItemProps, SegmentedRoot, SegmentedRootProps } from "./atoms.mjs";
 import Segmented from "./Segmented.mjs";
-export { type SegmentedProps, Segmented as default };
+export { type SegmentedClassNames, SegmentedIndicator, type SegmentedIndicatorProps, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, type SegmentedItemProps, type SegmentedOption, type SegmentedOptions, type SegmentedOrientation, type SegmentedProps, SegmentedRoot, type SegmentedRootProps, type SegmentedSize, type SegmentedStyles, type SegmentedVariant, Segmented as default };

package/es/Segmented/index.mjs

@@ -1 +1,3 @@
-export { default } from "./Segmented.mjs";
+import { SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot } from "./atoms.mjs";
+import Segmented from "./Segmented.mjs";
+export { SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot, Segmented as default };

package/es/Segmented/marker.stylex.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"marker.stylex.mjs","names":[],"sources":["../../src/Segmented/marker.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const segmentedMarker = stylex.defineMarker();\n"],"mappings":";AACA,MAAa,kBAAkB;CAC7B,UAAU;CACV,OAAO;AACT"}

package/es/Segmented/style.mjs

@@ -1,46 +1,127 @@
-import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
-import { createStaticStyles } from "antd-style";
-import { cva } from "class-variance-authority";
 //#region src/Segmented/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => {
-	return {
-		borderless: staticStylish.variantBorderlessWithoutHover,
-		filled: css`
-      border: 1px solid ${cssVar.colorFillQuaternary};
-      background: ${cssVar.colorBgLayout};
-    `,
-		glass: staticStylish.blur,
-		outlined: css`
-      border: 1px solid ${cssVar.colorBorderSecondary};
-      background: transparent;
-    `,
-		root: css``,
-		shadow: staticStylish.shadow
-	};
-});
-const variants = cva(styles.root, {
-	defaultVariants: {
-		glass: false,
-		shadow: false,
-		variant: "filled"
-	},
-	variants: {
-		variant: {
-			filled: styles.filled,
-			outlined: styles.outlined,
-			borderless: styles.borderless
-		},
-		glass: {
-			false: null,
-			true: styles.glass
-		},
-		shadow: {
-			false: null,
-			true: styles.shadow
-		}
+const styles = {
+	indicator: {
+		kaIpWk: "lb1sbi92r",
+		kWkggS: "lb1w937bt lbnhuofb",
+		kGVxlE: "lb1gnnqk1",
+		k87sOh: "lb27tqb4",
+		kLqNvP: "lb8m9z6e",
+		kfzvcC: "lb47corl",
+		kVAEAm: "lb10l6tqk",
+		kIyJzY: "lb43t7r1 lb12w9bfk",
+		k1ekBW: "lb33zcyt",
+		kAMwcw: "lb1o41tc",
+		kY2c9j: "lb1ja2u2z",
+		kZKoxP: "lbr884pr",
+		kzqmXN: "lb13jdv1a",
+		$$css: true
+	},
+	item: {
+		kVAM5u: "lb181nr7w",
+		kaIpWk: "lb1sbi92r",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbc342km",
+		kOIVth: "lb17d4w8g",
+		kI3sdo: "lb1a2a7pz",
+		kmkexE: "lb1qjqjpi",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbjbqb8w",
+		kB7OPa: "lb9f619",
+		kMwMTN: "lbc77et8 lb3fdyxb lb2poks1 lb1y4fyfr",
+		kkrTdU: "lb1ypdohk lb5ezrf1",
+		k1xSpc: "lb3nfvp2",
+		kmuXW: "lb2lah0s",
+		k63SB2: "lbk50ysn",
+		kjj79g: "lbl56j7k",
+		kVAEAm: "lb1n2onr6",
+		k3aq6I: "lb1dtbrvd",
+		kIyJzY: "lb12w9bfk",
+		kfSwDN: "lb87ps6o",
+		khDVqt: "lbuxw1ft",
+		kY2c9j: "lb1vjfegm",
+		$$css: true
+	},
+	itemBlock: {
+		kCS8Yb: "lb1r8uery",
+		kzQI83: "lb1iyjqo2",
+		kmuXW: "lbs83m0k",
+		$$css: true
+	},
+	itemIcon: {
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb3nfvp2",
+		kjj79g: "lbl56j7k",
+		$$css: true
+	},
+	itemLabel: {
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb3nfvp2",
+		$$css: true
+	},
+	itemLarge: {
+		kaIpWk: "lb1sbi92r",
+		kg3NbH: "lb1hr3lfm",
+		kGuDYH: "lbif65rj",
+		kZKoxP: "lbc9qbxq",
+		$$css: true
+	},
+	itemMiddle: {
+		kaIpWk: "lb1sbi92r",
+		kg3NbH: "lbaope02",
+		kGuDYH: "lb4z9k3i",
+		kZKoxP: "lb10w6t97",
+		$$css: true
+	},
+	itemSmall: {
+		kaIpWk: "lb1sbi92r",
+		kg3NbH: "lb1awh872",
+		kGuDYH: "lbfifm61",
+		kZKoxP: "lbd7y6wv",
+		$$css: true
+	},
+	list: {
+		kmVPX3: "lb9ms5i6",
+		kaIpWk: "lb1ndkxwp",
+		kOIVth: "lb1jnr06f",
+		kGNEyG: "lb6s0dn4 lb1it17vb",
+		kSGwAc: "lbqcrz7y lb11paglw",
+		kB7OPa: "lb9f619",
+		k1xSpc: "lb3nfvp2",
+		kXwgrk: "lb16yzcw2",
+		kwnvtZ: "lbozqiw3",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	},
+	listBlock: {
+		kSGwAc: "lbkh2ocl",
+		k1xSpc: "lb78zum5",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	listFilled: {
+		kVAM5u: "lb1g3whta",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kWkggS: "lb41ilrr",
+		$$css: true
+	},
+	listGlass: {
+		k6WDB: "lb1k0obaa",
+		$$css: true
+	},
+	listOutlined: {
+		kVAM5u: "lb10cypdb",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kWkggS: "lbjbqb8w",
+		$$css: true
+	},
+	listShadow: {
+		kGVxlE: "lbpjwdtl",
+		$$css: true
 	}
-});
+};
 //#endregion
-export { styles, variants };
+export { styles };
 
 //# sourceMappingURL=style.mjs.map

package/es/Segmented/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Segmented/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    filled: css`\n      border: 1px solid ${cssVar.colorFillQuaternary};\n      background: ${cssVar.colorBgLayout};\n    `,\n    glass: lobeStaticStylish.blur,\n    outlined: css`\n      border: 1px solid ${cssVar.colorBorderSecondary};\n      background: transparent;\n    `,\n    root: css``,\n    shadow: lobeStaticStylish.shadow,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    glass: false,\n    shadow: false,\n    variant: 'filled',\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n    glass: {\n      false: null,\n      true: styles.glass,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,YAAYA,cAAkB;EAC9B,QAAQ,GAAG;0BACW,OAAO,oBAAoB;oBACjC,OAAO,cAAc;;EAErC,OAAOA,cAAkB;EACzB,UAAU,GAAG;0BACS,OAAO,qBAAqB;;;EAGlD,MAAM,GAAG;EACT,QAAQA,cAAkB;CAC5B;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,OAAO;EACP,QAAQ;EACR,SAAS;CACX;CAEA,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;EACrB;EACA,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Segmented/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { segmentedMarker } from './marker.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst vertical = ':is([data-orientation=\"vertical\"])';\n\nexport const styles = stylex.create({\n  indicator: {\n    borderRadius: cssVar.borderRadius,\n    backgroundColor: {\n      default: cssVar.colorBgElevated,\n      [stylex.when.ancestor('[data-variant=\"outlined\"]', segmentedMarker)]:\n        cssVar.colorFillSecondary,\n    },\n    boxShadow: 'none',\n    insetBlockStart: 'var(--active-item-top)',\n    insetInlineStart: 'var(--lobe-segmented-indicator-start, var(--active-item-left))',\n    pointerEvents: 'none',\n    position: 'absolute',\n    transitionDuration: { default: '240ms', [reducedMotion]: '0s' },\n    transitionProperty: 'inset-inline-start, inset-block-start, width, height',\n    transitionTimingFunction: cssVar.motionEaseOut,\n    zIndex: 0,\n    height: 'var(--active-item-height)',\n    width: 'var(--active-item-width)',\n  },\n  item: {\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadius,\n    borderStyle: 'none',\n    borderWidth: 0,\n    gap: 6,\n    outline: 'none',\n    transition: `color 120ms ${cssVar.motionEaseOut}, transform 120ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: {\n      'default': cssVar.colorTextSecondary,\n      ':hover:not([data-disabled]):not([data-pressed])': cssVar.colorText,\n      ':is([data-disabled])': cssVar.colorTextDisabled,\n      ':is([data-pressed]):not([data-disabled])': cssVar.colorText,\n    },\n    cursor: { 'default': 'pointer', ':is([data-disabled])': 'not-allowed' },\n    display: 'inline-flex',\n    flexShrink: 0,\n    fontWeight: 500,\n    justifyContent: 'center',\n    position: 'relative',\n    transform: { 'default': null, ':active:not([data-disabled])': 'scale(0.98)' },\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n    userSelect: 'none',\n    whiteSpace: 'nowrap',\n    zIndex: 1,\n  },\n  itemBlock: {\n    flexBasis: '0',\n    flexGrow: '1',\n    flexShrink: '1',\n  },\n  itemIcon: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  itemLabel: {\n    alignItems: 'center',\n    display: 'inline-flex',\n  },\n  itemLarge: {\n    borderRadius: cssVar.borderRadius,\n    paddingInline: 16,\n    fontSize: 14,\n    height: 36,\n  },\n  itemMiddle: {\n    borderRadius: cssVar.borderRadius,\n    paddingInline: 12,\n    fontSize: 13,\n    height: 32,\n  },\n  itemSmall: {\n    borderRadius: cssVar.borderRadius,\n    paddingInline: 10,\n    fontSize: 12,\n    height: 26,\n  },\n  list: {\n    padding: 3,\n    borderRadius: cssVar.borderRadiusLG,\n    gap: 4,\n    alignItems: { default: 'center', [vertical]: 'stretch' },\n    alignSelf: { default: 'flex-start', [vertical]: 'stretch' },\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    flexDirection: { default: null, [vertical]: 'column' },\n    flexWrap: 'nowrap',\n    position: 'relative',\n  },\n  listBlock: {\n    alignSelf: 'stretch',\n    display: 'flex',\n    width: '100%',\n  },\n  listFilled: {\n    borderColor: cssVar.colorFillQuaternary,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: cssVar.colorBgLayout,\n  },\n  listGlass: {\n    backdropFilter: 'saturate(150%) blur(10px)',\n  },\n  listOutlined: {\n    borderColor: cssVar.colorBorderSecondary,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: 'transparent',\n  },\n  listShadow: {\n    boxShadow: `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`,\n  },\n});\n"],"mappings":";AAOA,MAAa,SAAS;CACpB,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,OAAO;EACP,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/Segmented/type.d.mts

@@ -1,16 +1,53 @@
-import { IconProps } from "../Icon/type.mjs";
-import "../Icon/index.mjs";
-import { Ref } from "react";
-import { SegmentedProps } from "antd";
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
 //#region src/Segmented/type.d.ts
-interface SegmentedProps$1 extends SegmentedProps {
+export type SegmentedSize = 'large' | 'middle' | 'small';
+export type SegmentedVariant = 'filled' | 'outlined';
+export type SegmentedOrientation = 'horizontal' | 'vertical';
+export interface SegmentedOption<Value extends string = string> {
+  className?: string;
+  disabled?: boolean;
+  icon?: ReactNode;
+  label?: ReactNode;
+  title?: string;
+  value: Value;
+}
+export type SegmentedOptions<Value extends string = string> = Array<SegmentedOption<Value> | Value>;
+export interface SegmentedClassNames {
+  indicator?: string;
+  item?: string;
+  itemIcon?: string;
+  itemLabel?: string;
+  list?: string;
+  root?: string;
+}
+export interface SegmentedStyles {
+  indicator?: CSSProperties;
+  item?: CSSProperties;
+  itemIcon?: CSSProperties;
+  itemLabel?: CSSProperties;
+  list?: CSSProperties;
+  root?: CSSProperties;
+}
+export interface SegmentedProps<Value extends string = string> {
+  block?: boolean;
+  className?: string;
+  classNames?: SegmentedClassNames;
+  defaultValue?: Value;
+  disabled?: boolean;
   glass?: boolean;
-  iconProps?: Omit<IconProps, 'icon'>;
-  padding?: string | number;
+  id?: string;
+  name?: string;
+  onChange?: (value: Value) => void;
+  options?: SegmentedOptions<Value>;
   ref?: Ref<HTMLDivElement>;
   shadow?: boolean;
-  variant?: 'filled' | 'outlined' | 'borderless';
+  size?: SegmentedSize;
+  style?: CSSProperties;
+  styles?: SegmentedStyles;
+  value?: Value;
+  variant?: SegmentedVariant;
+  vertical?: boolean;
 }
 //#endregion
-export { SegmentedProps$1 as SegmentedProps };
 //# sourceMappingURL=type.d.mts.map

package/es/Select/Select.d.mts

@@ -1,9 +1,6 @@
 import { SelectProps } from "./type.mjs";
 //#region src/Select/Select.d.ts
-/**
- * @deprecated Use `Select` from `@lobehub/ui/base-ui` instead.
- */
-declare const Select: import("react").NamedExoticComponent<SelectProps>;
+declare const Select: import("react").NamedExoticComponent<SelectProps<any>>;
 //#endregion
 export { Select as default };
 //# sourceMappingURL=Select.d.mts.map

package/es/Select/Select.mjs

@@ -1,34 +1,211 @@
 "use client";
-import Icon from "../Icon/Icon.mjs";
-import { variants } from "./style.mjs";
-import { memo } from "react";
-import { jsx } from "react/jsx-runtime";
-import { cx, useThemeMode } from "antd-style";
-import { ChevronDownIcon } from "lucide-react";
-import { Select } from "antd";
+import { styleProps } from "../styles/stylex/props.mjs";
+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 { 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 { Select } from "@base-ui/react/select";
 //#region src/Select/Select.tsx
-/**
-* @deprecated Use `Select` from `@lobehub/ui/base-ui` instead.
-*/
-const Select$1 = memo(({ ref, variant, suffixIconProps, suffixIcon, shadow, className, ...rest }) => {
+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 { isDarkMode } = useThemeMode();
-	return /* @__PURE__ */ jsx(Select, {
-		ref,
-		variant: variant || (isDarkMode ? "filled" : "outlined"),
-		className: cx(variants({
-			shadow,
-			variant: variant || (isDarkMode ? "filled" : "outlined")
-		}), className),
-		suffixIcon: /* @__PURE__ */ jsx(Icon, {
-			icon: suffixIcon || ChevronDownIcon,
-			size: "small",
-			...suffixIconProps,
-			style: {
-				pointerEvents: "none",
-				...suffixIconProps?.style
-			}
-		}),
-		...rest
+	const resolvedVariant = variant ?? (isDarkMode ? "filled" : "outlined");
+	const isTags = mode === "tags";
+	const isMultiple = mode === "multiple" || mode === "tags";
+	const isItemAligned = behaviorVariant === "item-aligned";
+	const [extraOptions, setExtraOptions] = useState([]);
+	useEffect(() => {
+		if (mode !== "tags" && extraOptions.length > 0) setExtraOptions([]);
+	}, [mode, extraOptions.length]);
+	const { appendTagValues, getOption, handleValueChange, normalizedValue, normalizeValue, removeLastTagValue, resolvedOptions, valueArray } = useSelectValue({
+		defaultValue,
+		extraOptions,
+		isMultiple,
+		onChange,
+		onSelect,
+		options,
+		setExtraOptions,
+		value
+	});
+	const { handleOpenChange, mergedOpen } = useSelectOpen({
+		defaultOpen,
+		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({
+		appendTagValues,
+		handleOpenChange,
+		mergedOpen,
+		mode,
+		removeLastTagValue,
+		resolvedOptions,
+		showSearch,
+		tokenSeparators
+	});
+	const virtualState = useSelectVirtual({
+		filteredOptions,
+		listItemHeight,
+		size,
+		valueArray,
+		virtual
+	});
+	const portalContainer = usePortalContainer();
+	const renderValue = useMemo(() => createTriggerValueRenderer({
+		getOption,
+		isMultiple,
+		isTags,
+		labelRender,
+		normalizeValue,
+		onRemoveValue: handleRemoveTag,
+		placeholder: isTags ? void 0 : placeholder
+	}), [
+		getOption,
+		handleRemoveTag,
+		isMultiple,
+		isTags,
+		labelRender,
+		normalizeValue,
+		placeholder
+	]);
+	const hasValue = isMultiple ? valueArray.length > 0 : !isValueEmpty(normalizedValue);
+	const showClear = Boolean(allowClear && hasValue && !disabled && !readOnly);
+	const handleClear = useCallback((event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		handleValueChange(isMultiple ? [] : null);
+	}, [handleValueChange, isMultiple]);
+	const prefixNode = useMemo(() => resolveIconNode(prefix), [prefix]);
+	const suffixIconNode = useMemo(() => resolveSuffixIcon(suffixIcon, suffixIconProps, loading), [
+		loading,
+		suffixIcon,
+		suffixIconProps
+	]);
+	const popupStyle = useMemo(() => {
+		const maxHeight = isItemAligned ? "80vh" : `${listHeight}px`;
+		const baseStyle = {
+			maxWidth: "var(--available-width)",
+			minWidth: "var(--anchor-width)",
+			["--lobe-select-popup-max-height"]: maxHeight
+		};
+		if (popupMatchSelectWidth === void 0 || popupMatchSelectWidth === true) return baseStyle;
+		if (typeof popupMatchSelectWidth === "number") return {
+			...baseStyle,
+			minWidth: popupMatchSelectWidth,
+			width: popupMatchSelectWidth
+		};
+		return {
+			...baseStyle,
+			minWidth: "max-content"
+		};
+	}, [
+		isItemAligned,
+		listHeight,
+		popupMatchSelectWidth
+	]);
+	const triggerProps = styleProps(triggerStyles({
+		shadow,
+		size,
+		variant: resolvedVariant
+	}), clsx(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 isEmpty = filteredOptions.length === 0;
+	const listContent = isEmpty ? /* @__PURE__ */ jsx(EmptyContent, { classNames }) : renderOptions({
+		classNames,
+		isBoldIndicator,
+		items: filteredOptions,
+		itemTextClassName,
+		listItemHeight,
+		optionRender
+	});
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		disabled,
+		id,
+		modal: isItemAligned,
+		multiple: isMultiple,
+		name,
+		open: mergedOpen,
+		readOnly,
+		required,
+		value: normalizedValue,
+		onOpenChange: handleOpenChange,
+		onValueChange: handleRootValueChange,
+		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
+			autoFocus: !isTags && autoFocus,
+			...triggerProps,
+			disabled,
+			nativeButton: !isTags,
+			render: isTags ? /* @__PURE__ */ jsx("div", {}) : void 0,
+			children: [
+				prefixNode !== null && prefixNode !== void 0 && /* @__PURE__ */ jsx("span", {
+					...styleProps(styles.prefix, classNames?.prefix),
+					children: prefixNode
+				}),
+				/* @__PURE__ */ jsx(Select.Value, {
+					...styleProps([styles.value, isTags && styles.tagsValue], classNames?.value),
+					children: renderValue
+				}),
+				isTags && /* @__PURE__ */ jsx(SelectSearchInput, {
+					inline: true,
+					autoFocus,
+					classNames,
+					disabled,
+					placeholder: valueArray.length === 0 ? placeholder : void 0,
+					readOnly,
+					stopPropagation: stopSearchPropagation,
+					value: searchValue,
+					onChange: handleSearchChange,
+					onKeyDown: handleSearchKeyDown
+				}),
+				/* @__PURE__ */ jsx(SelectTriggerSuffix, {
+					classNames,
+					showClear,
+					suffixIconNode,
+					onClear: handleClear
+				})
+			]
+		}), /* @__PURE__ */ jsx(Select.Portal, {
+			container: portalContainer,
+			children: /* @__PURE__ */ jsx(SelectPositioner, {
+				align: "start",
+				alignItemWithTrigger: isItemAligned,
+				side: "bottom",
+				sideOffset: 6,
+				children: /* @__PURE__ */ jsxs(Select.Popup, {
+					...styleProps([menuStyles.popup, styles.popup], clsx(menuClassNames.popup, popupClassName, classNames?.popup, classNames?.dropdown), popupStyle),
+					children: [shouldShowSearch && !isTags && /* @__PURE__ */ jsx(SelectSearchInput, {
+						classNames,
+						placeholder,
+						stopPropagation: stopSearchPropagation,
+						value: searchValue,
+						onChange: handleSearchChange,
+						onKeyDown: handleSearchKeyDown
+					}), /* @__PURE__ */ jsx(SelectListSection, {
+						classNames,
+						hasSearch: shouldShowSearch && !isTags,
+						isEmpty,
+						listContent,
+						listItemHeight,
+						virtual,
+						virtualState
+					})]
+				})
+			})
+		})]
 	});
 });
 Select$1.displayName = "Select";

package/es/Select/Select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","names":["Select","AntSelect"],"sources":["../../src/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport { Select as AntSelect } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { ChevronDownIcon } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { variants } from './style';\nimport type { SelectProps } from './type';\n\n/**\n * @deprecated Use `Select` from `@lobehub/ui/base-ui` instead.\n */\nconst Select = memo<SelectProps>(\n  ({ ref, variant, suffixIconProps, suffixIcon, shadow, className, ...rest }) => {\n    const { isDarkMode } = useThemeMode();\n\n    return (\n      <AntSelect\n        ref={ref}\n        variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n        className={cx(\n          variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n          className,\n        )}\n        suffixIcon={\n          <Icon\n            icon={suffixIcon || ChevronDownIcon}\n            size={'small'}\n            {...suffixIconProps}\n            style={{\n              pointerEvents: 'none',\n              ...suffixIconProps?.style,\n            }}\n          />\n        }\n        {...rest}\n      />\n    );\n  },\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":";;;;;;;;;;;;AAeA,MAAMA,WAAS,MACZ,EAAE,KAAK,SAAS,iBAAiB,YAAY,QAAQ,WAAW,GAAG,WAAW;CAC7E,MAAM,EAAE,eAAe,aAAa;CAEpC,OACE,oBAACC,QAAD;EACO;EACL,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;EAAY,CAAC,GAC7E,SACF;EACA,YACE,oBAAC,MAAD;GACE,MAAM,cAAc;GACpB,MAAM;GACN,GAAI;GACJ,OAAO;IACL,eAAe;IACf,GAAG,iBAAiB;GACtB;EACD,CAAA;EAEH,GAAI;CACL,CAAA;AAEL,CACF;AAEA,SAAO,cAAc"}
+{"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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"}