@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/Select/parts.mjs

@@ -0,0 +1,162 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import Icon from "../Icon/Icon.mjs";
+import { VirtualScrollArea } from "../internal/virtual/VirtualScrollArea.mjs";
+import { useMenuVirtualList } from "../internal/virtual/useMenuVirtualList.mjs";
+import { menuStyles } from "../DropdownMenu/style.mjs";
+import { styles } from "./style.mjs";
+import { isValueEmpty } from "./helpers.mjs";
+import { createElement, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { ChevronDown, Loader2, X } from "lucide-react";
+import { Select } from "@base-ui/react/select";
+//#region src/Select/parts.tsx
+function resolveIconNode(node) {
+	if (node === void 0 || node === null) return null;
+	if (isValidElement(node) || typeof node === "string" || typeof node === "number") return node;
+	return /* @__PURE__ */ jsx(Icon, {
+		icon: node,
+		size: "small"
+	});
+}
+function resolveSuffixIcon(suffixIcon, suffixIconProps, loading) {
+	if (loading) return /* @__PURE__ */ jsx(Icon, {
+		spin: true,
+		icon: Loader2,
+		size: "small"
+	});
+	if (suffixIcon === null) return null;
+	if (isValidElement(suffixIcon) || typeof suffixIcon === "string" || typeof suffixIcon === "number") return suffixIcon;
+	return /* @__PURE__ */ jsx(Icon, {
+		icon: suffixIcon || ChevronDown,
+		size: "small",
+		...suffixIconProps,
+		style: {
+			pointerEvents: "none",
+			...suffixIconProps?.style
+		}
+	});
+}
+function createTriggerValueRenderer({ getOption, isMultiple, isTags, labelRender, normalizeValue, onRemoveValue, placeholder }) {
+	return function renderValue(currentValue) {
+		const resolved = normalizeValue(currentValue);
+		const placeholderNode = placeholder === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			...stylex.props(styles.valueText),
+			children: placeholder
+		});
+		if (isMultiple) {
+			const values = Array.isArray(resolved) ? resolved : [];
+			if (values.length === 0) return placeholderNode;
+			return /* @__PURE__ */ jsx("span", {
+				...stylex.props(styles.tags),
+				children: values.map((val, index) => {
+					const option = getOption(val);
+					const content = labelRender ? labelRender(option) : option.label ?? String(val);
+					return /* @__PURE__ */ createElement("span", {
+						...stylex.props(styles.tag),
+						"data-role": "lobe-select-tag",
+						key: `${String(val)}-${index}`
+					}, content, isTags && /* @__PURE__ */ jsx("span", {
+						"aria-label": `Remove ${String(val)}`,
+						...stylex.props(styles.tagClose),
+						"data-role": "lobe-select-tag-remove",
+						role: "button",
+						tabIndex: 0,
+						onClick: (event) => {
+							event.preventDefault();
+							event.stopPropagation();
+							onRemoveValue(index);
+						},
+						onPointerDown: (event) => {
+							event.preventDefault();
+							event.stopPropagation();
+						},
+						children: /* @__PURE__ */ jsx(X, { size: 12 })
+					}));
+				})
+			});
+		}
+		if (isValueEmpty(resolved)) return placeholderNode;
+		const option = getOption(resolved);
+		const content = labelRender ? labelRender(option) : option.label ?? String(resolved);
+		return /* @__PURE__ */ jsx("span", {
+			...stylex.props(styles.valueText),
+			children: content
+		});
+	};
+}
+function SelectListSection({ classNames, hasSearch, isEmpty, listContent, listItemHeight, virtual, virtualState }) {
+	const listClassName = styleProps([styles.list, hasSearch && styles.listWithSearch], classNames?.list).className;
+	const enabled = Boolean(virtual) && !isEmpty;
+	const { keepMountedIndices, viewportProps, viewportRef, virtualChildren, virtualizerRef } = useMenuVirtualList({
+		children: listContent,
+		enabled,
+		keepMounted: virtualState.selectedIndices
+	});
+	if (!enabled) return /* @__PURE__ */ jsx(Select.List, {
+		className: listClassName,
+		"data-virtual": virtual || void 0,
+		children: listContent
+	});
+	return /* @__PURE__ */ jsx(VirtualScrollArea, {
+		itemSize: listItemHeight,
+		keepMounted: keepMountedIndices,
+		style: virtualState.virtualListStyle,
+		viewport: /* @__PURE__ */ jsx(Select.List, { className: listClassName }),
+		viewportProps: {
+			ref: viewportRef,
+			...viewportProps
+		},
+		virtualizerRef,
+		children: virtualChildren
+	});
+}
+function EmptyContent({ classNames }) {
+	return /* @__PURE__ */ jsx("div", {
+		...styleProps([
+			menuStyles.item,
+			menuStyles.empty,
+			styles.empty
+		], classNames?.empty),
+		children: "No data"
+	});
+}
+function SelectSearchInput({ autoFocus, classNames, disabled, inline, onChange, onKeyDown, placeholder, readOnly, stopPropagation, value }) {
+	return /* @__PURE__ */ jsx("div", {
+		...styleProps(inline ? styles.tagsSearch : styles.search, classNames?.search),
+		children: /* @__PURE__ */ jsx("input", {
+			autoFocus,
+			...stylex.props(styles.searchInput),
+			disabled,
+			placeholder: typeof placeholder === "string" ? placeholder : void 0,
+			readOnly,
+			value,
+			onChange,
+			onKeyDownCapture: onKeyDown,
+			onKeyUp: stopPropagation,
+			onKeyUpCapture: stopPropagation
+		})
+	});
+}
+function SelectTriggerSuffix({ classNames, onClear, showClear, suffixIconNode }) {
+	return /* @__PURE__ */ jsxs("span", {
+		...styleProps(styles.suffix, classNames?.suffix),
+		children: [showClear && /* @__PURE__ */ jsx("span", {
+			...styleProps(styles.clear, classNames?.clear),
+			"data-role": "lobe-select-clear",
+			onClick: onClear,
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: X,
+				size: "small"
+			})
+		}), suffixIconNode !== null && suffixIconNode !== void 0 && /* @__PURE__ */ jsx(Select.Icon, {
+			...styleProps(styles.icon, classNames?.icon),
+			children: suffixIconNode
+		})]
+	});
+}
+//#endregion
+export { EmptyContent, SelectListSection, SelectSearchInput, SelectTriggerSuffix, createTriggerValueRenderer, resolveIconNode, resolveSuffixIcon };
+
+//# sourceMappingURL=parts.mjs.map

package/es/Select/parts.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"parts.mjs","names":["BaseSelect"],"sources":["../../src/Select/parts.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronDown, Loader2, X } from 'lucide-react';\nimport {\n  type ChangeEvent,\n  isValidElement,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n} from 'react';\n\nimport { menuStyles } from '@/DropdownMenu/sharedStyle';\nimport Icon, { type IconProps } from '@/Icon';\nimport { useMenuVirtualList, VirtualScrollArea } from '@/internal/virtual';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { isValueEmpty } from './helpers';\nimport { type useSelectVirtual } from './hooks';\nimport { styles } from './style';\nimport { type SelectClassNames, type SelectOption, type SelectProps } from './type';\n\nexport function resolveIconNode(node: ReactNode | IconProps['icon'] | undefined | null) {\n  if (node === undefined || node === null) return null;\n  if (isValidElement(node) || typeof node === 'string' || typeof node === 'number') {\n    return node;\n  }\n  return <Icon icon={node as any} size={'small'} />;\n}\n\nexport function resolveSuffixIcon(\n  suffixIcon: SelectProps['suffixIcon'],\n  suffixIconProps: SelectProps['suffixIconProps'],\n  loading: boolean | undefined,\n) {\n  if (loading) return <Icon spin icon={Loader2} size={'small'} />;\n  if (suffixIcon === null) return null;\n  if (\n    isValidElement(suffixIcon) ||\n    typeof suffixIcon === 'string' ||\n    typeof suffixIcon === 'number'\n  ) {\n    return suffixIcon;\n  }\n  return (\n    <Icon\n      icon={(suffixIcon as any) || ChevronDown}\n      size={'small'}\n      {...suffixIconProps}\n      style={{\n        pointerEvents: 'none',\n        ...suffixIconProps?.style,\n      }}\n    />\n  );\n}\n\ninterface TriggerValueRendererParams {\n  getOption: (value: any) => SelectOption<any>;\n  isMultiple: boolean;\n  isTags: boolean;\n  labelRender: SelectProps['labelRender'];\n  normalizeValue: (value: any) => any;\n  onRemoveValue: (index: number) => void;\n  placeholder: ReactNode;\n}\n\nexport function createTriggerValueRenderer({\n  getOption,\n  isMultiple,\n  isTags,\n  labelRender,\n  normalizeValue,\n  onRemoveValue,\n  placeholder,\n}: TriggerValueRendererParams) {\n  return function renderValue(currentValue: any): ReactNode {\n    const resolved = normalizeValue(currentValue);\n    const placeholderNode =\n      placeholder === undefined ? null : (\n        <span {...stylex.props(styles.valueText)}>{placeholder}</span>\n      );\n\n    if (isMultiple) {\n      const values = Array.isArray(resolved) ? resolved : [];\n      if (values.length === 0) return placeholderNode;\n      return (\n        <span {...stylex.props(styles.tags)}>\n          {values.map((val, index) => {\n            const option = getOption(val);\n            const content = labelRender ? labelRender(option) : (option.label ?? String(val));\n            return (\n              <span\n                {...stylex.props(styles.tag)}\n                data-role=\"lobe-select-tag\"\n                key={`${String(val)}-${index}`}\n              >\n                {content}\n                {isTags && (\n                  <span\n                    aria-label={`Remove ${String(val)}`}\n                    {...stylex.props(styles.tagClose)}\n                    data-role=\"lobe-select-tag-remove\"\n                    role=\"button\"\n                    tabIndex={0}\n                    onClick={(event) => {\n                      event.preventDefault();\n                      event.stopPropagation();\n                      onRemoveValue(index);\n                    }}\n                    onPointerDown={(event) => {\n                      event.preventDefault();\n                      event.stopPropagation();\n                    }}\n                  >\n                    <X size={12} />\n                  </span>\n                )}\n              </span>\n            );\n          })}\n        </span>\n      );\n    }\n\n    if (isValueEmpty(resolved)) return placeholderNode;\n    const option = getOption(resolved);\n    const content = labelRender ? labelRender(option) : (option.label ?? String(resolved));\n    return <span {...stylex.props(styles.valueText)}>{content}</span>;\n  };\n}\n\ntype SelectVirtualReturn = ReturnType<typeof useSelectVirtual>;\n\ninterface SelectListSectionProps {\n  classNames: SelectClassNames | undefined;\n  hasSearch: boolean;\n  isEmpty: boolean;\n  listContent: ReactNode;\n  listItemHeight: number | undefined;\n  virtual: boolean | undefined;\n  virtualState: SelectVirtualReturn;\n}\n\nexport function SelectListSection({\n  classNames,\n  hasSearch,\n  isEmpty,\n  listContent,\n  listItemHeight,\n  virtual,\n  virtualState,\n}: SelectListSectionProps) {\n  const listClassName = styleProps(\n    [styles.list, hasSearch && styles.listWithSearch],\n    classNames?.list,\n  ).className;\n  const enabled = Boolean(virtual) && !isEmpty;\n  const { keepMountedIndices, viewportProps, viewportRef, virtualChildren, virtualizerRef } =\n    useMenuVirtualList({\n      children: listContent,\n      enabled,\n      keepMounted: virtualState.selectedIndices,\n    });\n\n  if (!enabled) {\n    return (\n      <BaseSelect.List className={listClassName} data-virtual={virtual || undefined}>\n        {listContent}\n      </BaseSelect.List>\n    );\n  }\n\n  return (\n    <VirtualScrollArea\n      itemSize={listItemHeight}\n      keepMounted={keepMountedIndices}\n      style={virtualState.virtualListStyle}\n      viewport={<BaseSelect.List className={listClassName} />}\n      viewportProps={{ ref: viewportRef, ...viewportProps }}\n      virtualizerRef={virtualizerRef}\n    >\n      {virtualChildren}\n    </VirtualScrollArea>\n  );\n}\n\ninterface EmptyContentProps {\n  classNames: SelectClassNames | undefined;\n}\n\nexport function EmptyContent({ classNames }: EmptyContentProps) {\n  return (\n    <div {...styleProps([menuStyles.item, menuStyles.empty, styles.empty], classNames?.empty)}>\n      No data\n    </div>\n  );\n}\n\ninterface SelectSearchInputProps {\n  autoFocus?: boolean;\n  classNames: SelectClassNames | undefined;\n  disabled?: boolean;\n  inline?: boolean;\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;\n  placeholder: ReactNode;\n  readOnly?: boolean;\n  stopPropagation: (event: KeyboardEvent<HTMLInputElement>) => void;\n  value: string;\n}\n\nexport function SelectSearchInput({\n  autoFocus,\n  classNames,\n  disabled,\n  inline,\n  onChange,\n  onKeyDown,\n  placeholder,\n  readOnly,\n  stopPropagation,\n  value,\n}: SelectSearchInputProps) {\n  return (\n    <div {...styleProps(inline ? styles.tagsSearch : styles.search, classNames?.search)}>\n      <input\n        autoFocus={autoFocus}\n        {...stylex.props(styles.searchInput)}\n        disabled={disabled}\n        placeholder={typeof placeholder === 'string' ? placeholder : undefined}\n        readOnly={readOnly}\n        value={value}\n        onChange={onChange}\n        onKeyDownCapture={onKeyDown}\n        onKeyUp={stopPropagation}\n        onKeyUpCapture={stopPropagation}\n      />\n    </div>\n  );\n}\n\ninterface SelectTriggerSuffixProps {\n  classNames: SelectClassNames | undefined;\n  onClear: (event: MouseEvent) => void;\n  showClear: boolean;\n  suffixIconNode: ReactNode;\n}\n\nexport function SelectTriggerSuffix({\n  classNames,\n  onClear,\n  showClear,\n  suffixIconNode,\n}: SelectTriggerSuffixProps) {\n  return (\n    <span {...styleProps(styles.suffix, classNames?.suffix)}>\n      {showClear && (\n        <span\n          {...styleProps(styles.clear, classNames?.clear)}\n          data-role=\"lobe-select-clear\"\n          onClick={onClear}\n        >\n          <Icon icon={X} size={'small'} />\n        </span>\n      )}\n      {suffixIconNode !== null && suffixIconNode !== undefined && (\n        <BaseSelect.Icon {...styleProps(styles.icon, classNames?.icon)}>\n          {suffixIconNode}\n        </BaseSelect.Icon>\n      )}\n    </span>\n  );\n}\n"],"mappings":"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"}

package/es/Select/renderOptions.mjs

@@ -0,0 +1,51 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import Icon from "../Icon/Icon.mjs";
+import { menuStyles } from "../DropdownMenu/style.mjs";
+import { styles } from "./style.mjs";
+import { getOptionSearchText, isGroupOption } from "./helpers.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import { Check } from "lucide-react";
+import { Select } from "@base-ui/react/select";
+//#region src/Select/renderOptions.tsx
+function renderItem(option, index, params) {
+	const { classNames, isBoldIndicator, itemTextClassName, listItemHeight, optionRender } = params;
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		disabled: option.disabled,
+		label: getOptionSearchText(option),
+		value: option.value,
+		...styleProps([menuStyles.item, isBoldIndicator && styles.itemBoldSelected], clsx$1(classNames?.item, classNames?.option, option.className), {
+			minHeight: listItemHeight,
+			...option.style
+		}),
+		children: [/* @__PURE__ */ jsx(Select.ItemText, {
+			className: itemTextClassName,
+			children: optionRender ? optionRender(option, { index }) : option.label
+		}), !isBoldIndicator && /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			...styleProps(styles.itemIndicator, classNames?.itemIndicator),
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: Check,
+				size: "small"
+			})
+		})]
+	}, `${String(option.value)}-${index}`);
+}
+function renderOptions(params) {
+	const { classNames, items } = params;
+	let optionIndex = 0;
+	return items.map((item, index) => {
+		if (isGroupOption(item)) return /* @__PURE__ */ jsxs(Select.Group, {
+			className: classNames?.group,
+			children: [/* @__PURE__ */ jsx(Select.GroupLabel, {
+				...styleProps(menuStyles.groupLabel, classNames?.groupLabel),
+				children: item.label
+			}), item.options.map((option) => renderItem(option, optionIndex++, params))]
+		}, `group-${index}`);
+		return renderItem(item, optionIndex++, params);
+	});
+}
+//#endregion
+export { renderOptions };
+
+//# sourceMappingURL=renderOptions.mjs.map

package/es/Select/renderOptions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderOptions.mjs","names":["BaseSelect","clsx"],"sources":["../../src/Select/renderOptions.tsx"],"sourcesContent":["'use client';\n\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport clsx from 'clsx';\nimport { Check } from 'lucide-react';\n\nimport { menuStyles } from '@/DropdownMenu/sharedStyle';\nimport Icon from '@/Icon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { getOptionSearchText, isGroupOption } from './helpers';\nimport { styles } from './style';\nimport {\n  type SelectClassNames,\n  type SelectOption,\n  type SelectOptions,\n  type SelectProps,\n} from './type';\n\ninterface RenderOptionsParams {\n  classNames: SelectClassNames | undefined;\n  isBoldIndicator: boolean;\n  items: SelectOptions<any>;\n  itemTextClassName: string;\n  listItemHeight: number | undefined;\n  optionRender: SelectProps['optionRender'];\n}\n\nfunction renderItem(\n  option: SelectOption<any>,\n  index: number,\n  params: Omit<RenderOptionsParams, 'items'>,\n) {\n  const { classNames, isBoldIndicator, itemTextClassName, listItemHeight, optionRender } = params;\n\n  return (\n    <BaseSelect.Item\n      disabled={option.disabled}\n      key={`${String(option.value)}-${index}`}\n      label={getOptionSearchText(option)}\n      value={option.value}\n      {...styleProps(\n        [menuStyles.item, isBoldIndicator && styles.itemBoldSelected],\n        clsx(classNames?.item, classNames?.option, option.className),\n        { minHeight: listItemHeight, ...option.style },\n      )}\n    >\n      <BaseSelect.ItemText className={itemTextClassName}>\n        {optionRender ? optionRender(option, { index }) : option.label}\n      </BaseSelect.ItemText>\n      {!isBoldIndicator && (\n        <BaseSelect.ItemIndicator {...styleProps(styles.itemIndicator, classNames?.itemIndicator)}>\n          <Icon icon={Check} size={'small'} />\n        </BaseSelect.ItemIndicator>\n      )}\n    </BaseSelect.Item>\n  );\n}\n\nexport function renderOptions(params: RenderOptionsParams) {\n  const { classNames, items } = params;\n  let optionIndex = 0;\n\n  return items.map((item, index) => {\n    if (isGroupOption(item)) {\n      return (\n        <BaseSelect.Group className={classNames?.group} key={`group-${index}`}>\n          <BaseSelect.GroupLabel {...styleProps(menuStyles.groupLabel, classNames?.groupLabel)}>\n            {item.label}\n          </BaseSelect.GroupLabel>\n          {item.options.map((option) => renderItem(option, optionIndex++, params))}\n        </BaseSelect.Group>\n      );\n    }\n\n    return renderItem(item, optionIndex++, params);\n  });\n}\n"],"mappings":";;;;;;;;;;;AA4BA,SAAS,WACP,QACA,OACA,QACA;CACA,MAAM,EAAE,YAAY,iBAAiB,mBAAmB,gBAAgB,iBAAiB;CAEzF,OACE,qBAACA,OAAW,MAAZ;EACE,UAAU,OAAO;EAEjB,OAAO,oBAAoB,MAAM;EACjC,OAAO,OAAO;EACd,GAAI,WACF,CAAC,WAAW,MAAM,mBAAmB,OAAO,gBAAgB,GAC5DC,OAAK,YAAY,MAAM,YAAY,QAAQ,OAAO,SAAS,GAC3D;GAAE,WAAW;GAAgB,GAAG,OAAO;EAAM,CAC/C;EATF,UAAA,CAWE,oBAACD,OAAW,UAAZ;GAAqB,WAAW;GAC7B,UAAA,eAAe,aAAa,QAAQ,EAAE,MAAM,CAAC,IAAI,OAAO;EACtC,CAAA,GACpB,CAAC,mBACA,oBAACA,OAAW,eAAZ;GAA0B,GAAI,WAAW,OAAO,eAAe,YAAY,aAAa;GACtF,UAAA,oBAAC,MAAD;IAAM,MAAM;IAAO,MAAM;GAAU,CAAA;EACX,CAAA,CAEb;CAjBV,GAAA,GAAG,OAAO,OAAO,KAAK,EAAE,GAAG,OAiBjB;AAErB;AAEA,SAAgB,cAAc,QAA6B;CACzD,MAAM,EAAE,YAAY,UAAU;CAC9B,IAAI,cAAc;CAElB,OAAO,MAAM,KAAK,MAAM,UAAU;EAChC,IAAI,cAAc,IAAI,GACpB,OACE,qBAACA,OAAW,OAAZ;GAAkB,WAAW,YAAY;GAAzC,UAAA,CACE,oBAACA,OAAW,YAAZ;IAAuB,GAAI,WAAW,WAAW,YAAY,YAAY,UAAU;IAChF,UAAA,KAAK;GACe,CAAA,GACtB,KAAK,QAAQ,KAAK,WAAW,WAAW,QAAQ,eAAe,MAAM,CAAC,CACvD;EALmC,GAAA,SAAS,OAK5C;EAItB,OAAO,WAAW,MAAM,eAAe,MAAM;CAC/C,CAAC;AACH"}

package/es/Select/style.mjs

@@ -1,64 +1,276 @@
-import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
-import { createStaticStyles } from "antd-style";
-import { cva } from "class-variance-authority";
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
+import { focusRing } from "../styles/stylex/focusRing.mjs";
+import { selectMarker } from "./marker.stylex.mjs";
 //#region src/Select/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => {
-	return {
-		borderless: css`
-      &[class*='ant-select'] {
-        > [class*='ant-select-selector'] {
-          ${staticStylish.variantBorderless}
-        }
-      }
-    `,
-		filled: css`
-      &[class*='ant-select'] {
-        > [class*='ant-select-selector'] {
-          ${staticStylish.variantFilled}
-        }
-      }
-    `,
-		outlined: css`
-      &[class*='ant-select'] {
-        > [class*='ant-select-selector'] {
-          ${staticStylish.variantOutlined}
-        }
-      }
-    `,
-		root: css`
-      &[class*='ant-select'] {
-        &[class*='ant-select-focused'] {
-          > [class*='ant-select-selector'] {
-            background: ${cssVar.colorFillTertiary} !important;
-          }
-        }
-      }
-    `,
-		shadow: css`
-      &[class*='ant-select'] {
-        > [class*='ant-select-selector'] {
-          ${staticStylish.shadow}
-        }
-      }
-    `
-	};
-});
-const variants = cva(styles.root, {
-	defaultVariants: { shadow: false },
-	variants: {
-		variant: {
-			filled: styles.filled,
-			outlined: styles.outlined,
-			borderless: styles.borderless,
-			underlined: null
-		},
-		shadow: {
-			false: null,
-			true: styles.shadow
-		}
+`${cssVar.colorFillTertiary}`;
+const styles = {
+	arrow: {
+		k1xSpc: "lb78zum5",
+		kZKoxP: "lbols6we",
+		kzqmXN: "lbsmyaan",
+		$$css: true
+	},
+	borderless: {
+		"--lobe-select-disabled-bg": "lb1fcm1w1",
+		"--lobe-select-open-bg": "lb1m91qns",
+		"--lobe-select-readonly-bg": "lb16si2i5",
+		kVAM5u: "lb181nr7w",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbfn42iu",
+		kWkggS: "lbjbqb8w lbbxqymp lb129k4ed lb1o44d5j lbckdqiz",
+		kGVxlE: "lb1gnnqk1",
+		$$css: true
+	},
+	clear: {
+		kmkexE: "lbholrd4",
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lb53gy9q lblbjun7",
+		k1xSpc: "lb3nfvp2",
+		kSiTet: "lbg01cxk lb1asl7ui",
+		kfzvcC: "lb11l7nm",
+		$$css: true
+	},
+	empty: {
+		kMwMTN: "lb53gy9q",
+		$$css: true
+	},
+	filled: {
+		"--lobe-select-disabled-bg": "lb1fcm1w1",
+		"--lobe-select-open-bg": "lb1hprk1n",
+		"--lobe-select-readonly-bg": "lb16si2i5",
+		kWkggS: "lbaljia1 lbbxqymp lb6jdevu lb1o44d5j lbckdqiz",
+		$$css: true
+	},
+	icon: {
+		kmkexE: "lbyuzwzm",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb3nfvp2",
+		k3aq6I: "lb1je0516",
+		$$css: true
+	},
+	itemBoldSelected: {
+		k63SB2: "lbkj54ki",
+		$$css: true
+	},
+	itemIndicator: {
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lb16owwnm",
+		k1xSpc: "lb3nfvp2",
+		kjj79g: "lbl56j7k",
+		keTefX: "lbvc5jky",
+		kZCmMZ: "lbmzvs34",
+		$$css: true
+	},
+	list: {
+		kUk6DE: "lb98rzlu",
+		kGO01o: "lb18d9i69",
+		kLKAdn: "lbexx8yu",
+		kAzted: "lb2lwn1j",
+		kORKVm: "lb1odjw0f",
+		$$css: true
+	},
+	listWithSearch: {
+		kLKAdn: "lb1iorvi4",
+		$$css: true
+	},
+	outlined: {
+		"--lobe-select-disabled-bg": "lb1lqng0l",
+		"--lobe-select-open-bg": "lb1m91qns",
+		"--lobe-select-readonly-bg": "lbcbhfra",
+		kVAM5u: "lb10cypdb lb3mg3nv",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kWkggS: "lb6yijhg lbbxqymp lb1o44d5j lbckdqiz",
+		$$css: true
+	},
+	popup: {
+		"--lobe-select-available-height": "lb1rupxqf",
+		kmkexE: "lb1xhw48d",
+		kB7OPa: "lb9f619",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		kSiTet: "lb1i2unn7",
+		k3aq6I: "lb11d3i7i",
+		k3nNDw: "lbctpfpq",
+		kskxy: "lbf2pfjc",
+		$$css: true
+	},
+	positioner: {
+		kI3sdo: "lb1a2a7pz",
+		kY2c9j: "lbp6lfbs",
+		$$css: true
+	},
+	prefix: {
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lbc77et8",
+		k1xSpc: "lb3nfvp2",
+		$$css: true
+	},
+	scrollArrow: {
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lb1w937bt",
+		kMwMTN: "lbc77et8",
+		kkrTdU: "lbt0e3qv",
+		k1xSpc: "lb78zum5",
+		kjj79g: "lbl56j7k",
+		kZKoxP: "lblup9mm",
+		$$css: true
+	},
+	search: {
+		kUOVxO: "lb15usb71",
+		k8WAf4: "lb1vvogim",
+		kg3NbH: "lbaope02",
+		kGNEyG: "lb6s0dn4",
+		kL6WhQ: "lb1ak05nl",
+		kfdmCh: "lb1q0q8m5",
+		kt9PQ7: "lbso031l",
+		kkrTdU: "lb1ed109x",
+		k1xSpc: "lb78zum5",
+		kAzted: "lbu0aao5",
+		$$css: true
+	},
+	searchInput: {
+		kVAM5u: "lb181nr7w",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbc342km",
+		kUk6DE: "lb98rzlu",
+		kI3sdo: "lb1a2a7pz",
+		k8WAf4: "lbt970qd",
+		kg3NbH: "lbfn1xvj",
+		kWkggS: "lbjbqb8w",
+		kMwMTN: "lb66ogz0",
+		kGuDYH: "lbif65rj",
+		kLWn49: "lb1fc57z9",
+		k7Eaqz: "lbeuugli",
+		k8Qsv1: "lb14injf2",
+		$$css: true
+	},
+	shadow: {
+		kGVxlE: "lbpjwdtl",
+		$$css: true
+	},
+	suffix: {
+		kOIVth: "lb17d4w8g",
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lbc77et8",
+		k1xSpc: "lb3nfvp2",
+		$$css: true
+	},
+	tag: {
+		kaIpWk: "lb1vihcfj",
+		k8WAf4: "lbt970qd",
+		kg3NbH: "lb1xijbu4",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbaljia1",
+		kMwMTN: "lb66ogz0",
+		k1xSpc: "lb3nfvp2",
+		kGuDYH: "lbfifm61",
+		kLWn49: "lb1fc57z9",
+		ks0D6T: "lb193iq5w",
+		$$css: true
+	},
+	tagClose: {
+		kmkexE: "lbholrd4",
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lbc77et8",
+		kkrTdU: "lb1ypdohk",
+		k1xSpc: "lb3nfvp2",
+		kjj79g: "lbl56j7k",
+		keTefX: "lbdwrcjd",
+		$$css: true
+	},
+	tags: {
+		kOIVth: "lb1jnr06f",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kwnvtZ: "lb1a02dak",
+		$$css: true
+	},
+	tagsSearch: {
+		kUk6DE: "lb98rzlu",
+		k1xSpc: "lb78zum5",
+		k7Eaqz: "lb900493",
+		$$css: true
+	},
+	tagsValue: {
+		kCS8Yb: "lbdl72j9",
+		kzQI83: "lb1c4vz4f",
+		kmuXW: "lbs83m0k",
+		$$css: true
+	},
+	trigger: {
+		kVAM5u: "lb9r1u3d",
+		kaIpWk: "lb1sbi92r",
+		ksu8eU: "lb1y0btm7",
+		kMzoRj: "lbmkeg23",
+		kOIVth: "lb167g77z",
+		kI3sdo: "lb1a2a7pz",
+		kmkexE: "lb18nfrvi",
+		kGNEyG: "lb6s0dn4",
+		kB7OPa: "lb9f619",
+		kMwMTN: "lb66ogz0 lb1s5k17a lbsycbhq",
+		kkrTdU: "lb1ypdohk lb10bady8 lbs5y3ja",
+		k1xSpc: "lb3nfvp2",
+		kMv6JI: "lbjb2p0i",
+		kfSwDN: "lb87ps6o",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	triggerLarge: {
+		k8WAf4: "lb1t0vds8",
+		kg3NbH: "lbaope02",
+		kGuDYH: "lb1j61zf2",
+		kLWn49: "lb1o2sk6j",
+		kAzted: "lb1ba4aug",
+		$$css: true
+	},
+	triggerMiddle: {
+		k8WAf4: "lb12ulsxz",
+		kg3NbH: "lbfoe8qy",
+		kGuDYH: "lbif65rj",
+		kLWn49: "lb1fc57z9",
+		kAzted: "lb21xpn4",
+		$$css: true
+	},
+	triggerSmall: {
+		k8WAf4: "lbt970qd",
+		kg3NbH: "lbdqyycr",
+		kGuDYH: "lbfifm61",
+		kLWn49: "lbd4r4e8",
+		kAzted: "lbjwf9q1",
+		$$css: true
+	},
+	value: {
+		kUk6DE: "lb98rzlu",
+		kOIVth: "lb1jnr06f",
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lb1heor9g lb1xpzrx5",
+		k1xSpc: "lb78zum5",
+		kwnvtZ: "lb1a02dak",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	valueText: {
+		kVQacm: "lbb3r6kr",
+		kg5iWk: "lblyipyv",
+		khDVqt: "lbuxw1ft",
+		$$css: true
 	}
-});
+};
+const triggerSizeStyles = {
+	large: styles.triggerLarge,
+	middle: styles.triggerMiddle,
+	small: styles.triggerSmall
+};
+const triggerStyles = ({ shadow, size, variant }) => [
+	styles.trigger,
+	focusRing.info,
+	selectMarker,
+	shadow && styles.shadow,
+	triggerSizeStyles[size ?? "middle"],
+	styles[variant]
+];
 //#endregion
-export { styles, variants };
+export { styles, triggerStyles };
 
 //# sourceMappingURL=style.mjs.map

package/es/Select/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Select/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: css`\n      &[class*='ant-select'] {\n        > [class*='ant-select-selector'] {\n          ${lobeStaticStylish.variantBorderless}\n        }\n      }\n    `,\n    filled: css`\n      &[class*='ant-select'] {\n        > [class*='ant-select-selector'] {\n          ${lobeStaticStylish.variantFilled}\n        }\n      }\n    `,\n    outlined: css`\n      &[class*='ant-select'] {\n        > [class*='ant-select-selector'] {\n          ${lobeStaticStylish.variantOutlined}\n        }\n      }\n    `,\n    root: css`\n      &[class*='ant-select'] {\n        &[class*='ant-select-focused'] {\n          > [class*='ant-select-selector'] {\n            background: ${cssVar.colorFillTertiary} !important;\n          }\n        }\n      }\n    `,\n    shadow: css`\n      &[class*='ant-select'] {\n        > [class*='ant-select-selector'] {\n          ${lobeStaticStylish.shadow}\n        }\n      }\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    shadow: false,\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n      underlined: null,\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,YAAY,GAAG;;;YAGPA,cAAkB,kBAAkB;;;;EAI5C,QAAQ,GAAG;;;YAGHA,cAAkB,cAAc;;;;EAIxC,UAAU,GAAG;;;YAGLA,cAAkB,gBAAgB;;;;EAI1C,MAAM,GAAG;;;;0BAIa,OAAO,kBAAkB;;;;;EAK/C,QAAQ,GAAG;;;YAGHA,cAAkB,OAAO;;;;CAInC;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,QAAQ,MACV;CAEA,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACnB,YAAY;EACd;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Select/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nimport { selectMarker } from './marker.stylex';\n\nconst open =\n  \":not([data-disabled], [data-readonly]):is([data-popup-open], [data-open], [data-state='open'], [aria-expanded='true'])\";\nconst hover =\n  \":hover:not([data-disabled], [data-readonly], [data-popup-open], [data-open], [data-state='open'], [aria-expanded='true'])\";\nconst disabled = ':is([data-disabled]):not([data-readonly])';\nconst readonly = ':is([data-readonly])';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst openBg = `var(--lobe-select-open-bg, ${cssVar.colorFillTertiary})`;\nconst disabledBg = 'var(--lobe-select-disabled-bg, transparent)';\nconst readonlyBg = 'var(--lobe-select-readonly-bg, transparent)';\n\nexport const styles = stylex.create({\n  arrow: {\n    display: 'flex',\n    height: 6,\n    width: 12,\n  },\n  borderless: {\n    '--lobe-select-disabled-bg': `color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent)`,\n    '--lobe-select-open-bg': cssVar.colorFillTertiary,\n    '--lobe-select-readonly-bg': `color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent)`,\n    'borderColor': 'currentcolor',\n    'borderStyle': 'none',\n    'borderWidth': 'medium',\n    'backgroundColor': {\n      default: 'transparent',\n      [disabled]: disabledBg,\n      [hover]: cssVar.colorFillTertiary,\n      [open]: openBg,\n      [readonly]: readonlyBg,\n    },\n    'boxShadow': 'none',\n  },\n  clear: {\n    transition: `opacity 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    color: { 'default': cssVar.colorTextTertiary, ':hover': cssVar.colorTextSecondary },\n    display: 'inline-flex',\n    opacity: {\n      default: 0,\n      [stylex.when.ancestor(':hover:not([data-placeholder], [data-disabled])', selectMarker)]: 1,\n    },\n    pointerEvents: {\n      default: null,\n      [stylex.when.ancestor(':is([data-placeholder], [data-disabled])', selectMarker)]: 'none',\n    },\n  },\n  empty: {\n    color: cssVar.colorTextTertiary,\n  },\n  filled: {\n    '--lobe-select-disabled-bg': `color-mix(in srgb, ${cssVar.colorFillTertiary} 55%, transparent)`,\n    '--lobe-select-open-bg': cssVar.colorFillSecondary,\n    '--lobe-select-readonly-bg': `color-mix(in srgb, ${cssVar.colorFillTertiary} 70%, transparent)`,\n    'backgroundColor': {\n      default: cssVar.colorFillTertiary,\n      [disabled]: disabledBg,\n      [hover]: cssVar.colorFillSecondary,\n      [open]: openBg,\n      [readonly]: readonlyBg,\n    },\n  },\n  icon: {\n    transition: `transform 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    display: 'inline-flex',\n    transform: { 'default': null, ':is([data-popup-open])': 'rotate(180deg)' },\n  },\n  itemBoldSelected: {\n    fontWeight: { 'default': null, ':is([data-selected])': 600 },\n  },\n  itemIndicator: {\n    alignItems: 'center',\n    color: cssVar.colorPrimary,\n    display: 'inline-flex',\n    justifyContent: 'center',\n    marginInlineStart: 'auto',\n    paddingInlineStart: 8,\n  },\n  list: {\n    flex: '1',\n    paddingBlockEnd: 0,\n    paddingBlockStart: 0,\n    minHeight: 0,\n    overflowY: 'auto',\n  },\n  listWithSearch: {\n    paddingBlockStart: 4,\n  },\n  outlined: {\n    '--lobe-select-disabled-bg': `color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent)`,\n    '--lobe-select-open-bg': cssVar.colorFillTertiary,\n    '--lobe-select-readonly-bg': `color-mix(in srgb, ${cssVar.colorBgContainer} 75%, transparent)`,\n    'borderColor': { 'default': cssVar.colorBorderSecondary, ':hover': cssVar.colorBorder },\n    'borderStyle': 'solid',\n    'borderWidth': 1,\n    'backgroundColor': {\n      default: cssVar.colorBgContainer,\n      [disabled]: disabledBg,\n      [open]: openBg,\n      [readonly]: readonlyBg,\n    },\n  },\n  popup: {\n    '--lobe-select-available-height':\n      'min(var(--available-height), var(--lobe-select-popup-max-height, var(--available-height)))',\n    'transition': `opacity 150ms ${cssVar.motionEaseOut}, transform 150ms ${cssVar.motionEaseOut}`,\n    'boxSizing': 'border-box',\n    'display': 'flex',\n    'flexDirection': 'column',\n    'opacity': { default: null, [startingOrEnding]: 0 },\n    'transform': { default: null, [startingOrEnding]: 'scaleY(0.92)' },\n    'transformOrigin': 'var(--transform-origin)',\n    'maxHeight': 'var(--lobe-select-available-height)',\n  },\n  positioner: {\n    outline: 'none',\n    zIndex: 1100,\n  },\n  prefix: {\n    alignItems: 'center',\n    color: cssVar.colorTextSecondary,\n    display: 'inline-flex',\n  },\n  scrollArrow: {\n    alignItems: 'center',\n    backgroundColor: cssVar.colorBgElevated,\n    color: cssVar.colorTextSecondary,\n    cursor: 'default',\n    display: 'flex',\n    justifyContent: 'center',\n    height: 16,\n  },\n  search: {\n    marginInline: 'calc(-1 * var(--lobe-menu-popup-padding))',\n    paddingBlock: 8,\n    paddingInline: 12,\n    alignItems: 'center',\n    borderBlockEndColor: cssVar.colorFillSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    cursor: 'text',\n    display: 'flex',\n    minHeight: 36,\n  },\n  searchInput: {\n    'borderColor': 'currentcolor',\n    'borderStyle': 'none',\n    'borderWidth': 0,\n    'flex': '1',\n    'outline': 'none',\n    'paddingBlock': 0,\n    'paddingInline': 4,\n    'backgroundColor': 'transparent',\n    'color': cssVar.colorText,\n    'fontSize': 14,\n    'lineHeight': '20px',\n    'minWidth': 0,\n    '::placeholder': { color: cssVar.colorTextPlaceholder },\n  },\n  shadow: {\n    boxShadow: `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`,\n  },\n  suffix: {\n    gap: 6,\n    alignItems: 'center',\n    color: cssVar.colorTextSecondary,\n    display: 'inline-flex',\n  },\n  tag: {\n    borderRadius: cssVar.borderRadiusSM,\n    paddingBlock: 0,\n    paddingInline: 6,\n    alignItems: 'center',\n    backgroundColor: cssVar.colorFillTertiary,\n    color: cssVar.colorText,\n    display: 'inline-flex',\n    fontSize: 12,\n    lineHeight: '20px',\n    maxWidth: '100%',\n  },\n  tagClose: {\n    transition: `opacity 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    color: cssVar.colorTextSecondary,\n    cursor: 'pointer',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    marginInlineStart: 4,\n  },\n  tags: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  tagsSearch: {\n    flex: '1',\n    display: 'flex',\n    minWidth: 48,\n  },\n  tagsValue: {\n    flexBasis: 'auto',\n    flexGrow: '0',\n    flexShrink: '1',\n  },\n  trigger: {\n    borderColor: 'transparent',\n    borderRadius: cssVar.borderRadius,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    gap: 8,\n    outline: 'none',\n    transition: `all 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    color: {\n      default: cssVar.colorText,\n      [disabled]: cssVar.colorTextDisabled,\n      [readonly]: cssVar.colorTextSecondary,\n    },\n    cursor: { default: 'pointer', [disabled]: 'not-allowed', [readonly]: 'default' },\n    display: 'inline-flex',\n    fontFamily: 'inherit',\n    userSelect: 'none',\n    width: '100%',\n  },\n  triggerLarge: {\n    paddingBlock: 6,\n    paddingInline: 12,\n    fontSize: 16,\n    lineHeight: '24px',\n    minHeight: 40,\n  },\n  triggerMiddle: {\n    paddingBlock: 4,\n    paddingInline: 11,\n    fontSize: 14,\n    lineHeight: '20px',\n    minHeight: 32,\n  },\n  triggerSmall: {\n    paddingBlock: 0,\n    paddingInline: 8,\n    fontSize: 12,\n    lineHeight: '18px',\n    minHeight: 24,\n  },\n  value: {\n    flex: '1',\n    gap: 4,\n    alignItems: 'center',\n    color: { 'default': 'inherit', ':is([data-placeholder])': cssVar.colorTextPlaceholder },\n    display: 'flex',\n    flexWrap: 'wrap',\n    minWidth: 0,\n  },\n  valueText: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n});\n\nconst triggerSizeStyles = {\n  large: styles.triggerLarge,\n  middle: styles.triggerMiddle,\n  small: styles.triggerSmall,\n};\n\nexport const triggerStyles = ({\n  shadow,\n  size,\n  variant,\n}: {\n  shadow?: boolean;\n  size?: keyof typeof triggerSizeStyles;\n  variant: 'borderless' | 'filled' | 'outlined';\n}) => [\n  styles.trigger,\n  focusRing.info,\n  selectMarker,\n  shadow && styles.shadow,\n  triggerSizeStyles[size ?? 'middle'],\n  styles[variant],\n];\n"],"mappings":"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"}