@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/ScrollShadow/style.mjs

@@ -1,105 +1,49 @@
-import { createStaticStyles } from "antd-style";
-import { cva } from "class-variance-authority";
 //#region src/ScrollShadow/style.ts
-const styles = createStaticStyles(({ css }) => {
-	return {
-		bottomShadow: css`
-      mask-image: linear-gradient(
-        180deg,
-        #000 calc(100% - var(--scroll-shadow-size, 40%)),
-        transparent
-      );
-    `,
-		hideScrollBar: css`
-      scrollbar-width: none;
-
-      -ms-overflow-style: none;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    `,
-		horizontal: css`
-      overflow-x: auto;
-    `,
-		leftRightShadow: css`
-      mask-image: linear-gradient(
-        to right,
-        #000,
-        #000,
-        transparent 0,
-        #000 var(--scroll-shadow-size, 40%),
-        #000 calc(100% - var(--scroll-shadow-size, 40%)),
-        transparent
-      );
-    `,
-		leftShadow: css`
-      mask-image: linear-gradient(
-        270deg,
-        #000 calc(100% - var(--scroll-shadow-size, 40%)),
-        transparent
-      );
-    `,
-		rightShadow: css`
-      mask-image: linear-gradient(
-        90deg,
-        #000 calc(100% - var(--scroll-shadow-size, 40%)),
-        transparent
-      );
-    `,
-		root: css`
-      position: relative;
-      overflow: hidden;
-    `,
-		topBottomShadow: css`
-      mask-image: linear-gradient(
-        #000,
-        #000,
-        transparent 0,
-        #000 var(--scroll-shadow-size, 40%),
-        #000 calc(100% - var(--scroll-shadow-size, 40%)),
-        transparent
-      );
-    `,
-		topShadow: css`
-      mask-image: linear-gradient(
-        0deg,
-        #000 calc(100% - var(--scroll-shadow-size, 40%)),
-        transparent
-      );
-    `,
-		vertical: css`
-      overflow-y: auto;
-    `
-	};
-});
-const variants = cva(styles.root, {
-	defaultVariants: {
-		hideScrollBar: false,
-		orientation: "vertical",
-		scrollPosition: "none"
+const styles = {
+	bottom: {
+		kX1K2I: "lb1pszpxi",
+		$$css: true
+	},
+	hideScrollBar: {
+		k5wCbM: "lb1rohswg",
+		kOuLrU: "lbfk6m8",
+		$$css: true
+	},
+	horizontal: {
+		kXHlph: "lbw2csxc",
+		$$css: true
+	},
+	left: {
+		kX1K2I: "lb17rhav1",
+		$$css: true
+	},
+	leftRight: {
+		kX1K2I: "lb5mfkkx",
+		$$css: true
+	},
+	right: {
+		kX1K2I: "lb90oq3i",
+		$$css: true
+	},
+	root: {
+		kVQacm: "lbb3r6kr",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	},
+	top: {
+		kX1K2I: "lb1yr7xp4",
+		$$css: true
+	},
+	topBottom: {
+		kX1K2I: "lb11dnh68",
+		$$css: true
 	},
-	variants: {
-		orientation: {
-			horizontal: styles.horizontal,
-			vertical: styles.vertical
-		},
-		hideScrollBar: {
-			true: styles.hideScrollBar,
-			false: null
-		},
-		scrollPosition: {
-			"none": null,
-			"top": styles.topShadow,
-			"bottom": styles.bottomShadow,
-			"top-bottom": styles.topBottomShadow,
-			"left": styles.leftShadow,
-			"right": styles.rightShadow,
-			"left-right": styles.leftRightShadow
-		}
+	vertical: {
+		kORKVm: "lb1odjw0f",
+		$$css: true
 	}
-});
+};
 //#endregion
-export { styles, variants };
+export { styles };
 
 //# sourceMappingURL=style.mjs.map

package/es/ScrollShadow/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ScrollShadow/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    bottomShadow: css`\n      mask-image: linear-gradient(\n        180deg,\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\n        transparent\n      );\n    `,\n    hideScrollBar: css`\n      scrollbar-width: none;\n\n      -ms-overflow-style: none;\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    `,\n    horizontal: css`\n      overflow-x: auto;\n    `,\n\n    leftRightShadow: css`\n      mask-image: linear-gradient(\n        to right,\n        #000,\n        #000,\n        transparent 0,\n        #000 var(--scroll-shadow-size, 40%),\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\n        transparent\n      );\n    `,\n\n    // 水平滚动阴影\n    leftShadow: css`\n      mask-image: linear-gradient(\n        270deg,\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\n        transparent\n      );\n    `,\n\n    rightShadow: css`\n      mask-image: linear-gradient(\n        90deg,\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\n        transparent\n      );\n    `,\n\n    root: css`\n      position: relative;\n      overflow: hidden;\n    `,\n\n    topBottomShadow: css`\n      mask-image: linear-gradient(\n        #000,\n        #000,\n        transparent 0,\n        #000 var(--scroll-shadow-size, 40%),\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\n        transparent\n      );\n    `,\n\n    // 垂直滚动阴影\n    topShadow: css`\n      mask-image: linear-gradient(\n        0deg,\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\n        transparent\n      );\n    `,\n\n    vertical: css`\n      overflow-y: auto;\n    `,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    hideScrollBar: false,\n    orientation: 'vertical',\n    scrollPosition: 'none',\n  },\n\n  variants: {\n    orientation: {\n      horizontal: styles.horizontal,\n      vertical: styles.vertical,\n    },\n    hideScrollBar: {\n      true: styles.hideScrollBar,\n      false: null,\n    },\n    scrollPosition: {\n      'none': null,\n      'top': styles.topShadow,\n      'bottom': styles.bottomShadow,\n      'top-bottom': styles.topBottomShadow,\n      'left': styles.leftShadow,\n      'right': styles.rightShadow,\n      'left-right': styles.leftRightShadow,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,UAAU;CACpD,OAAO;EACL,cAAc,GAAG;;;;;;;EAOjB,eAAe,GAAG;;;;;;;;;EASlB,YAAY,GAAG;;;EAIf,iBAAiB,GAAG;;;;;;;;;;;EAapB,YAAY,GAAG;;;;;;;EAQf,aAAa,GAAG;;;;;;;EAQhB,MAAM,GAAG;;;;EAKT,iBAAiB,GAAG;;;;;;;;;;EAYpB,WAAW,GAAG;;;;;;;EAQd,UAAU,GAAG;;;CAGf;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,eAAe;EACf,aAAa;EACb,gBAAgB;CAClB;CAEA,UAAU;EACR,aAAa;GACX,YAAY,OAAO;GACnB,UAAU,OAAO;EACnB;EACA,eAAe;GACb,MAAM,OAAO;GACb,OAAO;EACT;EACA,gBAAgB;GACd,QAAQ;GACR,OAAO,OAAO;GACd,UAAU,OAAO;GACjB,cAAc,OAAO;GACrB,QAAQ,OAAO;GACf,SAAS,OAAO;GAChB,cAAc,OAAO;EACvB;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ScrollShadow/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  bottom: {\n    maskImage:\n      'linear-gradient(180deg, #000 calc(100% - var(--scroll-shadow-size, 40%)), transparent)',\n  },\n  hideScrollBar: {\n    'scrollbarWidth': 'none',\n    '::-webkit-scrollbar': {\n      display: 'none',\n    },\n  },\n  horizontal: {\n    overflowX: 'auto',\n  },\n  left: {\n    maskImage:\n      'linear-gradient(270deg, #000 calc(100% - var(--scroll-shadow-size, 40%)), transparent)',\n  },\n  leftRight: {\n    maskImage:\n      'linear-gradient(to right, #000, #000, transparent 0, #000 var(--scroll-shadow-size, 40%), #000 calc(100% - var(--scroll-shadow-size, 40%)), transparent)',\n  },\n  right: {\n    maskImage:\n      'linear-gradient(90deg, #000 calc(100% - var(--scroll-shadow-size, 40%)), transparent)',\n  },\n  root: {\n    overflow: 'hidden',\n    position: 'relative',\n  },\n  top: {\n    maskImage:\n      'linear-gradient(0deg, #000 calc(100% - var(--scroll-shadow-size, 40%)), transparent)',\n  },\n  topBottom: {\n    maskImage:\n      'linear-gradient(#000, #000, transparent 0, #000 var(--scroll-shadow-size, 40%), #000 calc(100% - var(--scroll-shadow-size, 40%)), transparent)',\n  },\n  vertical: {\n    overflowY: 'auto',\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/ScrollShadow/type.d.mts

@@ -2,7 +2,7 @@ import { FlexboxProps } from "../Flex/type.mjs";
 import "../Flex/index.mjs";
 import { Ref } from "react";
 //#region src/ScrollShadow/type.d.ts
-interface ScrollShadowProps extends FlexboxProps {
+export interface ScrollShadowProps extends FlexboxProps {
   hideScrollBar?: boolean;
   isEnabled?: boolean;
   offset?: number;
@@ -18,5 +18,4 @@ interface ScrollShadowProps extends FlexboxProps {
   visibility?: 'auto' | 'always' | 'never';
 }
 //#endregion
-export { ScrollShadowProps };
 //# sourceMappingURL=type.d.mts.map

package/es/SearchBar/SearchBar.mjs

@@ -1,18 +1,19 @@
 "use client";
+import { styleProps } from "../styles/stylex/props.mjs";
 import Icon from "../Icon/Icon.mjs";
 import Hotkey from "../Hotkey/Hotkey.mjs";
-import Input_default from "../base-ui/Input/Input.mjs";
+import Input_default from "../Input/Input.mjs";
 import Spotlight from "../awesome/Spotlight/Spotlight.mjs";
 import { styles } from "./style.mjs";
 import { memo, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
-import useMergeState from "use-merge-value";
+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 }) => {
-	const [inputValue, setInputValue] = useMergeState(defaultValue, {
+	const [inputValue, setInputValue] = useControlledState(defaultValue, {
 		defaultValue,
 		onChange: onInputChange,
 		value
@@ -29,8 +30,7 @@ const SearchBar = memo(({ defaultValue = "", spotlight, className, value, onInpu
 		preventDefault: true
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx(styles.search, className),
-		style,
+		...styleProps(styles.search, className, style),
 		children: [
 			spotlight && /* @__PURE__ */ jsx(Spotlight, {}),
 			/* @__PURE__ */ jsx(Input_default, {
@@ -41,7 +41,7 @@ const SearchBar = memo(({ defaultValue = "", spotlight, className, value, onInpu
 				style: inputStyle,
 				value: inputValue,
 				prefix: /* @__PURE__ */ jsx(Icon, {
-					className: styles.icon,
+					...stylex.props(styles.icon),
 					icon: loading ? LucideLoader2 : Search,
 					size: "small",
 					spin: loading,
@@ -68,9 +68,9 @@ const SearchBar = memo(({ defaultValue = "", spotlight, className, value, onInpu
 			}),
 			enableShortKey && showTag && !inputValue && /* @__PURE__ */ jsx(Hotkey, {
 				compact: true,
-				className: cx(styles.tag, shortKeyClassName),
 				keys: hotkey,
-				style: shortKeyStyle
+				styles: { kbdStyle: { color: "inherit" } },
+				...styleProps(styles.tag, shortKeyClassName, shortKeyStyle)
 			})
 		]
 	});

package/es/SearchBar/SearchBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.mjs","names":["useControlledState","Input"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\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 { Input } from '@/base-ui/Input';\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\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 className={cx(styles.search, className)} style={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              className={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            className={cx(styles.tag, shortKeyClassName)}\n            keys={hotkey}\n            style={shortKeyStyle}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,YAAY,MACf,EACC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EAAE,OAAO,YAAY,UAAU,kBAAkB,CAAC,GAC1D,YAAY,EAAE,OAAO,gBAAgB,UAAU,sBAAsB,CAAC,GACtE,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiBA,cAAmB,cAAc;EACnE;EACA,UAAU;EACV;CACF,CAAC;CAED,MAAM,CAAC,SAAS,cAAc,SAAkB,IAAI;CACpD,MAAM,iBAAsB,OAAyB,IAAI;CACzD,MAAM,SAAS,cACN,SAAS,SAAS,GAAG,IAAI,WAAW,OAAO,YAClD,CAAC,QAAQ,CACX;CAEA,WACE,cACM;EACJ,IAAI,CAAC,gBAAgB;EACrB,eAAe,SAAS,MAAM;CAChC,GACA;EACE,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;CAClB,CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;EAAU;EAArD,UAAA;GACG,aAAa,oBAAC,WAAD,CAAY,CAAA;GAC1B,oBAACC,eAAD;IACE,YAAA;IACA,WAAW;IACX,aAAa,eAAe;IAC5B,KAAK;IACL,OAAO;IACP,OAAO;IACP,QACE,oBAAC,MAAD;KACE,WAAW,OAAO;KAClB,MAAM,UAAU,gBAAgB;KAChC,MAAK;KACL,MAAM;KACN,OAAO,EAAE,aAAa,EAAE;IACzB,CAAA;IAEH,SAAS,MAAM;KACb,SAAS,CAAC;KACV,cAAc,EAAE,OAAO,KAAK;KAC5B,WAAW,IAAI;IACjB;IACA,WAAW,MAAM;KACf,cAAc,EAAE,OAAO,KAAK;KAC5B,WAAW,CAAC;IACd;IACA,UAAU,MAAM;KACd,UAAU,CAAC;KACX,WAAW,KAAK;IAClB;IACA,eAAe,MAAM;KACnB,eAAe,CAAC;KAChB,WAAW,UAAU;IACvB;IACA,GAAI;GACL,CAAA;GACA,kBAAkB,WAAW,CAAC,cAC7B,oBAAC,QAAD;IACE,SAAA;IACA,WAAW,GAAG,OAAO,KAAK,iBAAiB;IAC3C,MAAM;IACN,OAAO;GACR,CAAA;EAEA;;AAET,CACF;AAEA,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';\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"}

package/es/SearchBar/style.mjs

@@ -1,27 +1,24 @@
-import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
-import { createStaticStyles, cx } from "antd-style";
 //#region src/SearchBar/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	icon: css`
-    color: ${cssVar.colorTextPlaceholder};
-  `,
-	search: css`
-    position: relative;
-    max-width: 100%;
-  `,
-	tag: cx(staticStylish.blur, css`
-      position: absolute;
-      inset-block-start: 50%;
-      inset-inline-end: 6px;
-      transform: translateY(-50%);
-
-      color: ${cssVar.colorTextDescription};
-
-      kbd {
-        color: inherit;
-      }
-    `)
-}));
+const styles = {
+	icon: {
+		kMwMTN: "lb1ydjerp",
+		$$css: true
+	},
+	search: {
+		kVAEAm: "lb1n2onr6",
+		ks0D6T: "lb193iq5w",
+		$$css: true
+	},
+	tag: {
+		k6WDB: "lb1k0obaa",
+		kMwMTN: "lb19ppog9",
+		k87sOh: "lbwa60dl",
+		kt4wiu: "lb1f889gz",
+		kVAEAm: "lb10l6tqk",
+		k3aq6I: "lb1cb1t30",
+		$$css: true
+	}
+};
 //#endregion
 export { styles };
 

package/es/SearchBar/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/SearchBar/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  icon: css`\n    color: ${cssVar.colorTextPlaceholder};\n  `,\n  search: css`\n    position: relative;\n    max-width: 100%;\n  `,\n  tag: cx(\n    lobeStaticStylish.blur,\n    css`\n      position: absolute;\n      inset-block-start: 50%;\n      inset-inline-end: 6px;\n      transform: translateY(-50%);\n\n      color: ${cssVar.colorTextDescription};\n\n      kbd {\n        color: inherit;\n      }\n    `,\n  ),\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;aACE,OAAO,qBAAqB;;CAEvC,QAAQ,GAAG;;;;CAIX,KAAK,GACHA,cAAkB,MAClB,GAAG;;;;;;eAMQ,OAAO,qBAAqB;;;;;KAMzC;AACF,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/SearchBar/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  icon: {\n    color: cssVar.colorTextPlaceholder,\n  },\n  search: {\n    position: 'relative',\n    maxWidth: '100%',\n  },\n  tag: {\n    backdropFilter: 'saturate(150%) blur(10px)',\n    color: cssVar.colorTextDescription,\n    insetBlockStart: '50%',\n    insetInlineEnd: 6,\n    position: 'absolute',\n    transform: 'translateY(-50%)',\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/SearchBar/type.d.mts

@@ -1,8 +1,8 @@
-import { InputProps } from "../base-ui/Input/type.mjs";
-import "../base-ui/Input/index.mjs";
+import { InputProps } from "../Input/type.mjs";
+import "../Input/index.mjs";
 import { CSSProperties } from "react";
 //#region src/SearchBar/type.d.ts
-interface SearchBarProps extends Omit<InputProps, 'styles' | 'classNames'> {
+export interface SearchBarProps extends Omit<InputProps, 'styles' | 'classNames'> {
   classNames?: {
     input?: string;
     shortKey?: string;
@@ -21,5 +21,4 @@ interface SearchBarProps extends Omit<InputProps, 'styles' | 'classNames'> {
   value?: string;
 }
 //#endregion
-export { SearchBarProps };
 //# sourceMappingURL=type.d.mts.map

package/es/Segmented/Segmented.d.mts

@@ -1,9 +1,9 @@
 import { SegmentedProps } from "./type.mjs";
 //#region src/Segmented/Segmented.d.ts
-/**
- * @deprecated Use `Segmented` from `@lobehub/ui/base-ui` instead.
- */
-declare const Segmented: import("react").NamedExoticComponent<SegmentedProps>;
+declare const Segmented: {
+  <Value extends string = string>({ block, className, classNames, defaultValue, disabled, glass, id, name, onChange, options, ref, shadow, size, style, styles: customStyles, value, variant, vertical }: SegmentedProps<Value>): import("react").JSX.Element;
+  displayName: string;
+};
 //#endregion
 export { Segmented as default };
 //# sourceMappingURL=Segmented.d.mts.map

package/es/Segmented/Segmented.mjs

@@ -1,30 +1,113 @@
 "use client";
-import { variants } from "./style.mjs";
-import { memo } from "react";
-import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
-import { Segmented } from "antd";
+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";
 //#region src/Segmented/Segmented.tsx
-/**
-* @deprecated Use `Segmented` from `@lobehub/ui/base-ui` instead.
-*/
-const Segmented$1 = memo(({ ref, padding, style, className, variant = "filled", shadow, glass, ...rest }) => {
-	return /* @__PURE__ */ jsx(Segmented, {
-		className: cx(variants({
-			glass,
-			shadow,
-			variant
-		}), className),
-		ref,
-		style: {
-			padding,
-			...style
+const normalizeOption = (option) => typeof option === "string" ? {
+	label: option,
+	value: option
+} : option;
+const Segmented = ({ block = false, className, classNames, defaultValue, disabled = false, glass = false, id, name, onChange, options, ref, shadow = false, size = "middle", style, styles: customStyles, value, variant = "filled", vertical = false }) => {
+	const [innerValue, setInnerValue] = useControlledState(defaultValue, {
+		defaultValue,
+		onChange: (next) => {
+			if (next != null) onChange?.(next);
 		},
-		...rest
+		value
 	});
-});
-Segmented$1.displayName = "Segmented";
+	const listRef = useRef(null);
+	const mergedRef = useCallback((node) => {
+		listRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const normalizedOptions = useMemo(() => (options ?? []).map((o) => normalizeOption(o)), [options]);
+	const updateIndicator = useCallback(() => {
+		const list = listRef.current;
+		if (!list) return;
+		const active = list.querySelector("[data-segmented-item][data-pressed]");
+		if (!active) {
+			list.style.setProperty("--active-item-left", "0px");
+			list.style.setProperty("--active-item-top", "0px");
+			list.style.setProperty("--active-item-right", "0px");
+			list.style.setProperty("--active-item-width", "0px");
+			list.style.setProperty("--active-item-height", "0px");
+			return;
+		}
+		list.style.setProperty("--active-item-left", `${active.offsetLeft}px`);
+		list.style.setProperty("--active-item-top", `${active.offsetTop}px`);
+		list.style.setProperty("--active-item-right", `${list.clientWidth - active.offsetLeft - active.offsetWidth}px`);
+		list.style.setProperty("--active-item-width", `${active.offsetWidth}px`);
+		list.style.setProperty("--active-item-height", `${active.offsetHeight}px`);
+	}, []);
+	useLayoutEffect(() => {
+		updateIndicator();
+	}, [
+		innerValue,
+		normalizedOptions,
+		vertical,
+		size,
+		block,
+		updateIndicator
+	]);
+	useEffect(() => {
+		const list = listRef.current;
+		if (!list || typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver(() => updateIndicator());
+		ro.observe(list);
+		return () => ro.disconnect();
+	}, [updateIndicator]);
+	const groupValue = useMemo(() => innerValue != null ? [innerValue] : [], [innerValue]);
+	const rootStyle = {
+		...style,
+		...customStyles?.root
+	};
+	return /* @__PURE__ */ jsxs(SegmentedRoot, {
+		block,
+		className: clsx(classNames?.root, className),
+		disabled,
+		glass,
+		id,
+		orientation: vertical ? "vertical" : "horizontal",
+		ref: mergedRef,
+		shadow,
+		style: rootStyle,
+		value: groupValue,
+		variant,
+		onValueChange: (next) => {
+			const picked = next[0];
+			if (picked != null) setInnerValue(picked);
+		},
+		children: [/* @__PURE__ */ jsx(SegmentedIndicator, {
+			className: classNames?.indicator,
+			style: customStyles?.indicator
+		}), normalizedOptions.map((opt) => /* @__PURE__ */ jsxs(SegmentedItem, {
+			"aria-label": typeof opt.label === "string" ? opt.label : void 0,
+			block,
+			className: clsx(classNames?.item, opt.className),
+			"data-segmented-item": "",
+			disabled: disabled || opt.disabled,
+			name,
+			size,
+			style: customStyles?.item,
+			title: opt.title,
+			value: opt.value,
+			children: [opt.icon != null && /* @__PURE__ */ jsx(SegmentedItemIcon, {
+				className: classNames?.itemIcon,
+				style: customStyles?.itemIcon,
+				children: opt.icon
+			}), opt.label != null && /* @__PURE__ */ jsx(SegmentedItemLabel, {
+				className: classNames?.itemLabel,
+				style: customStyles?.itemLabel,
+				children: opt.label
+			})]
+		}, opt.value))]
+	});
+};
+Segmented.displayName = "Segmented";
 //#endregion
-export { Segmented$1 as default };
+export { Segmented as default };
 
 //# sourceMappingURL=Segmented.mjs.map

package/es/Segmented/Segmented.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Segmented.mjs","names":["Segmented","AntdSegmented"],"sources":["../../src/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\n\nimport { Segmented as AntdSegmented } from 'antd';\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { SegmentedProps } from './type';\n\n/**\n * @deprecated Use `Segmented` from `@lobehub/ui/base-ui` instead.\n */\nconst Segmented = memo<SegmentedProps>(\n  ({ ref, padding, style, className, variant = 'filled', shadow, glass, ...rest }) => {\n    return (\n      <AntdSegmented\n        className={cx(variants({ glass, shadow, variant }), className)}\n        ref={ref}\n        style={{\n          padding,\n          ...style,\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nSegmented.displayName = 'Segmented';\n\nexport default Segmented;\n"],"mappings":";;;;;;;;;;AAYA,MAAMA,cAAY,MACf,EAAE,KAAK,SAAS,OAAO,WAAW,UAAU,UAAU,QAAQ,OAAO,GAAG,WAAW;CAClF,OACE,oBAACC,WAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAO;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACxD;EACL,OAAO;GACL;GACA,GAAG;EACL;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,YAAU,cAAc"}
+{"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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"}

package/es/Segmented/atoms.d.mts

@@ -0,0 +1,39 @@
+import { SegmentedSize, SegmentedVariant } from "./type.mjs";
+import { CSSProperties, ComponentProps, FC, ReactNode } from "react";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/Segmented/atoms.d.ts
+export type SegmentedRootProps<Value extends string = string> = Omit<ComponentProps<typeof ToggleGroup<Value>>, 'className' | 'render'> & {
+  block?: boolean;
+  className?: string;
+  glass?: boolean;
+  shadow?: boolean;
+  variant?: SegmentedVariant;
+};
+export declare const SegmentedRoot: {
+  <Value extends string = string>({ block, className, glass, shadow, variant, ...rest }: SegmentedRootProps<Value>): import("react").JSX.Element;
+  displayName: string;
+};
+export type SegmentedItemProps<Value extends string = string> = Omit<ComponentProps<typeof Toggle<Value>>, 'className' | 'render'> & {
+  block?: boolean;
+  className?: string;
+  size?: SegmentedSize;
+};
+export declare const SegmentedItem: {
+  <Value extends string = string>({ block, className, size, ...rest }: SegmentedItemProps<Value>): import("react").JSX.Element;
+  displayName: string;
+};
+interface SimpleSpanProps {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+export declare const SegmentedItemIcon: FC<SimpleSpanProps>;
+export declare const SegmentedItemLabel: FC<SimpleSpanProps>;
+export interface SegmentedIndicatorProps {
+  className?: string;
+  style?: CSSProperties;
+}
+export declare const SegmentedIndicator: FC<SegmentedIndicatorProps>;
+//#endregion
+//# sourceMappingURL=atoms.d.mts.map

package/es/Segmented/atoms.mjs

@@ -0,0 +1,65 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+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 { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/Segmented/atoms.tsx
+const listVariantStyles = {
+	filled: styles.listFilled,
+	outlined: styles.listOutlined
+};
+const itemSizeStyles = {
+	large: styles.itemLarge,
+	middle: styles.itemMiddle,
+	small: styles.itemSmall
+};
+const SegmentedRoot = ({ block = false, className, glass = false, shadow = false, variant = "filled", ...rest }) => {
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		"data-variant": variant,
+		className: styleProps([
+			segmentedMarker,
+			styles.list,
+			block && styles.listBlock,
+			glass && styles.listGlass,
+			shadow && styles.listShadow,
+			listVariantStyles[variant]
+		], className).className,
+		...rest
+	});
+};
+SegmentedRoot.displayName = "SegmentedRoot";
+const SegmentedItem = ({ block = false, className, size = "middle", ...rest }) => {
+	return /* @__PURE__ */ jsx(Toggle, {
+		className: styleProps([
+			styles.item,
+			focusRing.info,
+			block && styles.itemBlock,
+			itemSizeStyles[size]
+		], className).className,
+		...rest
+	});
+};
+SegmentedItem.displayName = "SegmentedItem";
+const SegmentedItemIcon = ({ children, className, style }) => /* @__PURE__ */ jsx("span", {
+	...styleProps(styles.itemIcon, className, style),
+	children
+});
+SegmentedItemIcon.displayName = "SegmentedItemIcon";
+const SegmentedItemLabel = ({ children, className, style }) => /* @__PURE__ */ jsx("span", {
+	...styleProps(styles.itemLabel, className, style),
+	children
+});
+SegmentedItemLabel.displayName = "SegmentedItemLabel";
+const SegmentedIndicator = ({ className, style }) => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	...styleProps(styles.indicator, clsx("lobe-segmented-indicator", className), style)
+});
+SegmentedIndicator.displayName = "SegmentedIndicator";
+//#endregion
+export { SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot };
+
+//# sourceMappingURL=atoms.mjs.map

package/es/Segmented/atoms.mjs.map

@@ -0,0 +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"}