@jinmi/ui 0.0.0-stage → 6.0.1

package/es/ScrollShadow/style.mjs

@@ -0,0 +1,105 @@
+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"
+	},
+	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
+		}
+	}
+});
+//#endregion
+export { styles, variants };
+
+//# sourceMappingURL=style.mjs.map

package/es/ScrollShadow/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ScrollShadow/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\nimport { cva } from 'class-variance-authority';\r\n\r\nexport const styles = createStaticStyles(({ css }) => {\r\n  return {\r\n    bottomShadow: css`\r\n      mask-image: linear-gradient(\r\n        180deg,\r\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\r\n        transparent\r\n      );\r\n    `,\r\n    hideScrollBar: css`\r\n      scrollbar-width: none;\r\n\r\n      -ms-overflow-style: none;\r\n\r\n      &::-webkit-scrollbar {\r\n        display: none;\r\n      }\r\n    `,\r\n    horizontal: css`\r\n      overflow-x: auto;\r\n    `,\r\n\r\n    leftRightShadow: css`\r\n      mask-image: linear-gradient(\r\n        to right,\r\n        #000,\r\n        #000,\r\n        transparent 0,\r\n        #000 var(--scroll-shadow-size, 40%),\r\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\r\n        transparent\r\n      );\r\n    `,\r\n\r\n    // 水平滚动阴影\r\n    leftShadow: css`\r\n      mask-image: linear-gradient(\r\n        270deg,\r\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\r\n        transparent\r\n      );\r\n    `,\r\n\r\n    rightShadow: css`\r\n      mask-image: linear-gradient(\r\n        90deg,\r\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\r\n        transparent\r\n      );\r\n    `,\r\n\r\n    root: css`\r\n      position: relative;\r\n      overflow: hidden;\r\n    `,\r\n\r\n    topBottomShadow: css`\r\n      mask-image: linear-gradient(\r\n        #000,\r\n        #000,\r\n        transparent 0,\r\n        #000 var(--scroll-shadow-size, 40%),\r\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\r\n        transparent\r\n      );\r\n    `,\r\n\r\n    // 垂直滚动阴影\r\n    topShadow: css`\r\n      mask-image: linear-gradient(\r\n        0deg,\r\n        #000 calc(100% - var(--scroll-shadow-size, 40%)),\r\n        transparent\r\n      );\r\n    `,\r\n\r\n    vertical: css`\r\n      overflow-y: auto;\r\n    `,\r\n  };\r\n});\r\n\r\nexport const variants = cva(styles.root, {\r\n  defaultVariants: {\r\n    hideScrollBar: false,\r\n    orientation: 'vertical',\r\n    scrollPosition: 'none',\r\n  },\r\n\r\n  variants: {\r\n    orientation: {\r\n      horizontal: styles.horizontal,\r\n      vertical: styles.vertical,\r\n    },\r\n    hideScrollBar: {\r\n      true: styles.hideScrollBar,\r\n      false: null,\r\n    },\r\n    scrollPosition: {\r\n      'none': null,\r\n      'top': styles.topShadow,\r\n      'bottom': styles.bottomShadow,\r\n      'top-bottom': styles.topBottomShadow,\r\n      'left': styles.leftShadow,\r\n      'right': styles.rightShadow,\r\n      'left-right': styles.leftRightShadow,\r\n    },\r\n  },\r\n});\r\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"}

package/es/ScrollShadow/type.d.mts

@@ -0,0 +1,22 @@
+import { FlexboxProps } from "../Flex/type.mjs";
+import "../Flex/index.mjs";
+import { Ref } from "react";
+//#region src/ScrollShadow/type.d.ts
+interface ScrollShadowProps extends FlexboxProps {
+  hideScrollBar?: boolean;
+  isEnabled?: boolean;
+  offset?: number;
+  onVisibilityChange?: (visibility: {
+    bottom?: boolean;
+    left?: boolean;
+    right?: boolean;
+    top?: boolean;
+  }) => void;
+  orientation?: 'vertical' | 'horizontal';
+  ref?: Ref<HTMLDivElement>;
+  size?: number;
+  visibility?: 'auto' | 'always' | 'never';
+}
+//#endregion
+export { ScrollShadowProps };
+//# sourceMappingURL=type.d.mts.map

package/es/ScrollShadow/useScrollOverflow.mjs

@@ -0,0 +1,60 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/ScrollShadow/useScrollOverflow.ts
+const initialScrollState = {
+	bottom: false,
+	left: false,
+	right: false,
+	top: false
+};
+const isSameScrollState = (a, b) => a.bottom === b.bottom && a.left === b.left && a.right === b.right && a.top === b.top;
+const useScrollOverflow = ({ domRef, offset = 0, orientation = "vertical", isEnabled = true, onVisibilityChange, updateDeps = [] }) => {
+	const [scrollState, setScrollState] = useState(initialScrollState);
+	const scrollStateRef = useRef(initialScrollState);
+	useEffect(() => {
+		const element = domRef.current;
+		if (!element || !isEnabled) return;
+		const checkScroll = () => {
+			const newState = { ...initialScrollState };
+			if (orientation === "vertical") {
+				if (element.scrollHeight > element.clientHeight) {
+					newState.top = element.scrollTop > offset;
+					newState.bottom = element.scrollTop + element.clientHeight < element.scrollHeight - offset;
+				} else {
+					newState.top = false;
+					newState.bottom = false;
+				}
+			} else if (element.scrollWidth > element.clientWidth) {
+				newState.left = element.scrollLeft > offset;
+				newState.right = element.scrollLeft + element.clientWidth < element.scrollWidth - offset;
+			} else {
+				newState.left = false;
+				newState.right = false;
+			}
+			if (isSameScrollState(scrollStateRef.current, newState)) return;
+			scrollStateRef.current = newState;
+			setScrollState(newState);
+			onVisibilityChange?.(newState);
+		};
+		checkScroll();
+		element.addEventListener("scroll", checkScroll);
+		window.addEventListener("resize", checkScroll);
+		const resizeObserver = new ResizeObserver(checkScroll);
+		resizeObserver.observe(element);
+		return () => {
+			element.removeEventListener("scroll", checkScroll);
+			window.removeEventListener("resize", checkScroll);
+			resizeObserver.disconnect();
+		};
+	}, [
+		domRef,
+		offset,
+		orientation,
+		isEnabled,
+		...updateDeps
+	]);
+	return scrollState;
+};
+//#endregion
+export { useScrollOverflow };
+
+//# sourceMappingURL=useScrollOverflow.mjs.map

package/es/ScrollShadow/useScrollOverflow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollOverflow.mjs","names":[],"sources":["../../src/ScrollShadow/useScrollOverflow.ts"],"sourcesContent":["import { type RefObject, useEffect, useRef, useState } from 'react';\r\n\r\ninterface ScrollState {\r\n  bottom: boolean;\r\n  left: boolean;\r\n  right: boolean;\r\n  top: boolean;\r\n}\r\n\r\nconst initialScrollState: ScrollState = {\r\n  bottom: false,\r\n  left: false,\r\n  right: false,\r\n  top: false,\r\n};\r\n\r\nconst isSameScrollState = (a: ScrollState, b: ScrollState) =>\r\n  a.bottom === b.bottom && a.left === b.left && a.right === b.right && a.top === b.top;\r\n\r\ninterface UseScrollOverflowProps {\r\n  domRef: RefObject<HTMLElement | null>;\r\n  isEnabled?: boolean;\r\n  offset?: number;\r\n  onVisibilityChange?: (visibility: {\r\n    bottom?: boolean;\r\n    left?: boolean;\r\n    right?: boolean;\r\n    top?: boolean;\r\n  }) => void;\r\n  orientation?: 'vertical' | 'horizontal';\r\n  updateDeps?: any[];\r\n}\r\n\r\nexport const useScrollOverflow = ({\r\n  domRef,\r\n  offset = 0,\r\n  orientation = 'vertical',\r\n  isEnabled = true,\r\n  onVisibilityChange,\r\n  updateDeps = [],\r\n}: UseScrollOverflowProps) => {\r\n  const [scrollState, setScrollState] = useState(initialScrollState);\r\n  const scrollStateRef = useRef(initialScrollState);\r\n\r\n  useEffect(() => {\r\n    const element = domRef.current;\r\n    if (!element || !isEnabled) return;\r\n\r\n    const checkScroll = () => {\r\n      const newState = { ...initialScrollState };\r\n\r\n      if (orientation === 'vertical') {\r\n        const hasVerticalScroll = element.scrollHeight > element.clientHeight;\r\n\r\n        if (hasVerticalScroll) {\r\n          newState.top = element.scrollTop > offset;\r\n          newState.bottom =\r\n            element.scrollTop + element.clientHeight < element.scrollHeight - offset;\r\n        } else {\r\n          newState.top = false;\r\n          newState.bottom = false;\r\n        }\r\n      } else {\r\n        const hasHorizontalScroll = element.scrollWidth > element.clientWidth;\r\n\r\n        if (hasHorizontalScroll) {\r\n          newState.left = element.scrollLeft > offset;\r\n          newState.right = element.scrollLeft + element.clientWidth < element.scrollWidth - offset;\r\n        } else {\r\n          newState.left = false;\r\n          newState.right = false;\r\n        }\r\n      }\r\n\r\n      if (isSameScrollState(scrollStateRef.current, newState)) return;\r\n\r\n      scrollStateRef.current = newState;\r\n      setScrollState(newState);\r\n      onVisibilityChange?.(newState);\r\n    };\r\n\r\n    // 初始检查\r\n    checkScroll();\r\n\r\n    // 监听滚动事件\r\n    element.addEventListener('scroll', checkScroll);\r\n    window.addEventListener('resize', checkScroll);\r\n\r\n    // 观察内容变化\r\n    const resizeObserver = new ResizeObserver(checkScroll);\r\n    resizeObserver.observe(element);\r\n\r\n    return () => {\r\n      element.removeEventListener('scroll', checkScroll);\r\n      window.removeEventListener('resize', checkScroll);\r\n      resizeObserver.disconnect();\r\n    };\r\n  }, [domRef, offset, orientation, isEnabled, ...updateDeps]);\r\n\r\n  return scrollState;\r\n};\r\n"],"mappings":";;AASA,MAAM,qBAAkC;CACtC,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAEA,MAAM,qBAAqB,GAAgB,MACzC,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE;AAgBnF,MAAa,qBAAqB,EAChC,QACA,SAAS,GACT,cAAc,YACd,YAAY,MACZ,oBACA,aAAa,CAAC,QACc;CAC5B,MAAM,CAAC,aAAa,kBAAkB,SAAS,kBAAkB;CACjE,MAAM,iBAAiB,OAAO,kBAAkB;CAEhD,gBAAgB;EACd,MAAM,UAAU,OAAO;EACvB,IAAI,CAAC,WAAW,CAAC,WAAW;EAE5B,MAAM,oBAAoB;GACxB,MAAM,WAAW,EAAE,GAAG,mBAAmB;GAEzC,IAAI,gBAAgB,YAAY;IAG9B,IAF0B,QAAQ,eAAe,QAAQ,cAElC;KACrB,SAAS,MAAM,QAAQ,YAAY;KACnC,SAAS,SACP,QAAQ,YAAY,QAAQ,eAAe,QAAQ,eAAe;IACtE,OAAO;KACL,SAAS,MAAM;KACf,SAAS,SAAS;IACpB;GACF,OAGE,IAF4B,QAAQ,cAAc,QAAQ,aAEjC;IACvB,SAAS,OAAO,QAAQ,aAAa;IACrC,SAAS,QAAQ,QAAQ,aAAa,QAAQ,cAAc,QAAQ,cAAc;GACpF,OAAO;IACL,SAAS,OAAO;IAChB,SAAS,QAAQ;GACnB;GAGF,IAAI,kBAAkB,eAAe,SAAS,QAAQ,GAAG;GAEzD,eAAe,UAAU;GACzB,eAAe,QAAQ;GACvB,qBAAqB,QAAQ;EAC/B;EAGA,YAAY;EAGZ,QAAQ,iBAAiB,UAAU,WAAW;EAC9C,OAAO,iBAAiB,UAAU,WAAW;EAG7C,MAAM,iBAAiB,IAAI,eAAe,WAAW;EACrD,eAAe,QAAQ,OAAO;EAE9B,aAAa;GACX,QAAQ,oBAAoB,UAAU,WAAW;GACjD,OAAO,oBAAoB,UAAU,WAAW;GAChD,eAAe,WAAW;EAC5B;CACF,GAAG;EAAC;EAAQ;EAAQ;EAAa;EAAW,GAAG;CAAU,CAAC;CAE1D,OAAO;AACT"}

package/es/SearchBar/SearchBar.d.mts

@@ -0,0 +1,6 @@
+import { SearchBarProps } from "./type.mjs";
+//#region src/SearchBar/SearchBar.d.ts
+declare const SearchBar: import("react").NamedExoticComponent<SearchBarProps>;
+//#endregion
+export { SearchBar as default };
+//# sourceMappingURL=SearchBar.d.mts.map

package/es/SearchBar/SearchBar.mjs

@@ -0,0 +1,82 @@
+"use client";
+import Icon from "../Icon/Icon.mjs";
+import Hotkey from "../Hotkey/Hotkey.mjs";
+import Input_default from "../base-ui/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 { LucideLoader2, Search } from "lucide-react";
+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, {
+		defaultValue,
+		onChange: onInputChange,
+		value
+	});
+	const [showTag, setShowTag] = useState(true);
+	const inputReference = useRef(null);
+	const hotkey = useMemo(() => shortKey.includes("+") ? shortKey : `mod+${shortKey}`, [shortKey]);
+	useHotkeys(hotkey, () => {
+		if (!enableShortKey) return;
+		inputReference.current?.focus();
+	}, {
+		enableOnFormTags: true,
+		enabled: !!enableShortKey && !!shortKey,
+		preventDefault: true
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.search, className),
+		style,
+		children: [
+			spotlight && /* @__PURE__ */ jsx(Spotlight, {}),
+			/* @__PURE__ */ jsx(Input_default, {
+				allowClear: true,
+				className: inputClassName,
+				placeholder: placeholder ?? "Type keywords...",
+				ref: inputReference,
+				style: inputStyle,
+				value: inputValue,
+				prefix: /* @__PURE__ */ jsx(Icon, {
+					className: styles.icon,
+					icon: loading ? LucideLoader2 : Search,
+					size: "small",
+					spin: loading,
+					style: { marginRight: 4 }
+				}),
+				onBlur: (e) => {
+					onBlur?.(e);
+					setInputValue(e.target.value);
+					setShowTag(true);
+				},
+				onChange: (e) => {
+					setInputValue(e.target.value);
+					onChange?.(e);
+				},
+				onFocus: (e) => {
+					onFocus?.(e);
+					setShowTag(false);
+				},
+				onPressEnter: (e) => {
+					onPressEnter?.(e);
+					onSearch?.(inputValue);
+				},
+				...rest
+			}),
+			enableShortKey && showTag && !inputValue && /* @__PURE__ */ jsx(Hotkey, {
+				compact: true,
+				className: cx(styles.tag, shortKeyClassName),
+				keys: hotkey,
+				style: shortKeyStyle
+			})
+		]
+	});
+});
+SearchBar.displayName = "SearchBar";
+//#endregion
+export { SearchBar as default };
+
+//# sourceMappingURL=SearchBar.mjs.map

package/es/SearchBar/SearchBar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.mjs","names":["useControlledState","Input"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { LucideLoader2, Search } from 'lucide-react';\r\nimport { memo, useMemo, useRef, useState } from 'react';\r\nimport { useHotkeys } from 'react-hotkeys-hook';\r\nimport useControlledState from 'use-merge-value';\r\n\r\nimport Spotlight from '@/awesome/Spotlight';\r\nimport { Input } from '@/base-ui/Input';\r\nimport Hotkey from '@/Hotkey';\r\nimport Icon from '@/Icon';\r\n\r\nimport { styles } from './style';\r\nimport { type SearchBarProps } from './type';\r\n\r\nconst SearchBar = memo<SearchBarProps>(\r\n  ({\r\n    defaultValue = '',\r\n    spotlight,\r\n    className,\r\n    value,\r\n    onInputChange,\r\n    placeholder,\r\n    enableShortKey,\r\n    shortKey = 'mod+k',\r\n    onSearch,\r\n    loading,\r\n    style,\r\n    onChange,\r\n    onBlur,\r\n    onPressEnter,\r\n    onFocus,\r\n    styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\r\n    classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\r\n    ...rest\r\n  }) => {\r\n    const [inputValue, setInputValue] = useControlledState(defaultValue, {\r\n      defaultValue,\r\n      onChange: onInputChange,\r\n      value,\r\n    });\r\n\r\n    const [showTag, setShowTag] = useState<boolean>(true);\r\n    const inputReference: any = useRef<HTMLInputElement>(null);\r\n    const hotkey = useMemo(\r\n      () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\r\n      [shortKey],\r\n    );\r\n\r\n    useHotkeys(\r\n      hotkey,\r\n      () => {\r\n        if (!enableShortKey) return;\r\n        inputReference.current?.focus();\r\n      },\r\n      {\r\n        enableOnFormTags: true,\r\n        enabled: !!enableShortKey && !!shortKey,\r\n        preventDefault: true,\r\n      },\r\n    );\r\n\r\n    return (\r\n      <div className={cx(styles.search, className)} style={style}>\r\n        {spotlight && <Spotlight />}\r\n        <Input\r\n          allowClear\r\n          className={inputClassName}\r\n          placeholder={placeholder ?? 'Type keywords...'}\r\n          ref={inputReference}\r\n          style={inputStyle}\r\n          value={inputValue}\r\n          prefix={\r\n            <Icon\r\n              className={styles.icon}\r\n              icon={loading ? LucideLoader2 : Search}\r\n              size=\"small\"\r\n              spin={loading}\r\n              style={{ marginRight: 4 }}\r\n            />\r\n          }\r\n          onBlur={(e) => {\r\n            onBlur?.(e);\r\n            setInputValue(e.target.value);\r\n            setShowTag(true);\r\n          }}\r\n          onChange={(e) => {\r\n            setInputValue(e.target.value);\r\n            onChange?.(e);\r\n          }}\r\n          onFocus={(e) => {\r\n            onFocus?.(e);\r\n            setShowTag(false);\r\n          }}\r\n          onPressEnter={(e) => {\r\n            onPressEnter?.(e);\r\n            onSearch?.(inputValue);\r\n          }}\r\n          {...rest}\r\n        />\r\n        {enableShortKey && showTag && !inputValue && (\r\n          <Hotkey\r\n            compact\r\n            className={cx(styles.tag, shortKeyClassName)}\r\n            keys={hotkey}\r\n            style={shortKeyStyle}\r\n          />\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nSearchBar.displayName = 'SearchBar';\r\n\r\nexport default SearchBar;\r\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"}

package/es/SearchBar/index.d.mts

@@ -0,0 +1,3 @@
+import { SearchBarProps } from "./type.mjs";
+import SearchBar from "./SearchBar.mjs";
+export { type SearchBarProps, SearchBar as default };

package/es/SearchBar/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/SearchBar/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/SearchBar/index.mjs

@@ -0,0 +1,2 @@
+import SearchBar from "./SearchBar.mjs";
+export { SearchBar as default };

package/es/SearchBar/style.mjs

@@ -0,0 +1,28 @@
+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;
+      }
+    `)
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/SearchBar/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/SearchBar/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\r\n\r\nimport { lobeStaticStylish } from '@/styles';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  icon: css`\r\n    color: ${cssVar.colorTextPlaceholder};\r\n  `,\r\n  search: css`\r\n    position: relative;\r\n    max-width: 100%;\r\n  `,\r\n  tag: cx(\r\n    lobeStaticStylish.blur,\r\n    css`\r\n      position: absolute;\r\n      inset-block-start: 50%;\r\n      inset-inline-end: 6px;\r\n      transform: translateY(-50%);\r\n\r\n      color: ${cssVar.colorTextDescription};\r\n\r\n      kbd {\r\n        color: inherit;\r\n      }\r\n    `,\r\n  ),\r\n}));\r\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"}

package/es/SearchBar/type.d.mts

@@ -0,0 +1,25 @@
+import { InputProps } from "../base-ui/Input/type.mjs";
+import "../base-ui/Input/index.mjs";
+import { CSSProperties } from "react";
+//#region src/SearchBar/type.d.ts
+interface SearchBarProps extends Omit<InputProps, 'styles' | 'classNames'> {
+  classNames?: {
+    input?: string;
+    shortKey?: string;
+  };
+  defaultValue?: string;
+  enableShortKey?: boolean;
+  loading?: boolean;
+  onInputChange?: (value: string) => void;
+  onSearch?: (value: string) => void;
+  shortKey?: string;
+  spotlight?: boolean;
+  styles?: {
+    input?: CSSProperties;
+    shortKey?: CSSProperties;
+  };
+  value?: string;
+}
+//#endregion
+export { SearchBarProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Segmented/Segmented.d.mts

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

package/es/Segmented/Segmented.mjs

@@ -0,0 +1,30 @@
+"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";
+//#region src/Segmented/Segmented.tsx
+/**
+* @deprecated Use `Segmented` from `@jinmi/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
+		},
+		...rest
+	});
+});
+Segmented$1.displayName = "Segmented";
+//#endregion
+export { Segmented$1 as default };
+
+//# sourceMappingURL=Segmented.mjs.map

package/es/Segmented/Segmented.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Segmented.mjs","names":["Segmented","AntdSegmented"],"sources":["../../src/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Segmented as AntdSegmented } from 'antd';\r\nimport { cx } from 'antd-style';\r\nimport { memo } from 'react';\r\n\r\nimport { variants } from './style';\r\nimport type { SegmentedProps } from './type';\r\n\r\n/**\r\n * @deprecated Use `Segmented` from `@jinmi/ui/base-ui` instead.\r\n */\r\nconst Segmented = memo<SegmentedProps>(\r\n  ({ ref, padding, style, className, variant = 'filled', shadow, glass, ...rest }) => {\r\n    return (\r\n      <AntdSegmented\r\n        className={cx(variants({ glass, shadow, variant }), className)}\r\n        ref={ref}\r\n        style={{\r\n          padding,\r\n          ...style,\r\n        }}\r\n        {...rest}\r\n      />\r\n    );\r\n  },\r\n);\r\n\r\nSegmented.displayName = 'Segmented';\r\n\r\nexport default Segmented;\r\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"}

package/es/Segmented/index.d.mts

@@ -0,0 +1,3 @@
+import { SegmentedProps } from "./type.mjs";
+import Segmented from "./Segmented.mjs";
+export { type SegmentedProps, Segmented as default };

package/es/Segmented/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/Segmented/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/Segmented/index.mjs

@@ -0,0 +1,2 @@
+import Segmented from "./Segmented.mjs";
+export { Segmented as default };

package/es/Segmented/style.mjs

@@ -0,0 +1,46 @@
+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
+		}
+	}
+});
+//#endregion
+export { styles, variants };
+
+//# sourceMappingURL=style.mjs.map

package/es/Segmented/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Segmented/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\nimport { cva } from 'class-variance-authority';\r\n\r\nimport { lobeStaticStylish } from '@/styles';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => {\r\n  return {\r\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\r\n    filled: css`\r\n      border: 1px solid ${cssVar.colorFillQuaternary};\r\n      background: ${cssVar.colorBgLayout};\r\n    `,\r\n    glass: lobeStaticStylish.blur,\r\n    outlined: css`\r\n      border: 1px solid ${cssVar.colorBorderSecondary};\r\n      background: transparent;\r\n    `,\r\n    root: css``,\r\n    shadow: lobeStaticStylish.shadow,\r\n  };\r\n});\r\n\r\nexport const variants = cva(styles.root, {\r\n  defaultVariants: {\r\n    glass: false,\r\n    shadow: false,\r\n    variant: 'filled',\r\n  },\r\n\r\n  variants: {\r\n    variant: {\r\n      filled: styles.filled,\r\n      outlined: styles.outlined,\r\n      borderless: styles.borderless,\r\n    },\r\n    glass: {\r\n      false: null,\r\n      true: styles.glass,\r\n    },\r\n    shadow: {\r\n      false: null,\r\n      true: styles.shadow,\r\n    },\r\n  },\r\n});\r\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"}

package/es/Segmented/type.d.mts

@@ -0,0 +1,16 @@
+import { IconProps } from "../Icon/type.mjs";
+import "../Icon/index.mjs";
+import { Ref } from "react";
+import { SegmentedProps } from "antd";
+//#region src/Segmented/type.d.ts
+interface SegmentedProps$1 extends SegmentedProps {
+  glass?: boolean;
+  iconProps?: Omit<IconProps, 'icon'>;
+  padding?: string | number;
+  ref?: Ref<HTMLDivElement>;
+  shadow?: boolean;
+  variant?: 'filled' | 'outlined' | 'borderless';
+}
+//#endregion
+export { SegmentedProps$1 as SegmentedProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Select/Select.d.mts

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

package/es/Select/Select.mjs

@@ -0,0 +1,38 @@
+"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";
+//#region src/Select/Select.tsx
+/**
+* @deprecated Use `Select` from `@jinmi/ui/base-ui` instead.
+*/
+const Select$1 = memo(({ ref, variant, suffixIconProps, suffixIcon, shadow, className, ...rest }) => {
+	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
+	});
+});
+Select$1.displayName = "Select";
+//#endregion
+export { Select$1 as default };
+
+//# sourceMappingURL=Select.mjs.map

package/es/Select/Select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.mjs","names":["Select","AntSelect"],"sources":["../../src/Select/Select.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Select as AntSelect } from 'antd';\r\nimport { cx, useThemeMode } from 'antd-style';\r\nimport { ChevronDownIcon } from 'lucide-react';\r\nimport { memo } from 'react';\r\n\r\nimport Icon from '@/Icon';\r\n\r\nimport { variants } from './style';\r\nimport type { SelectProps } from './type';\r\n\r\n/**\r\n * @deprecated Use `Select` from `@jinmi/ui/base-ui` instead.\r\n */\r\nconst Select = memo<SelectProps>(\r\n  ({ ref, variant, suffixIconProps, suffixIcon, shadow, className, ...rest }) => {\r\n    const { isDarkMode } = useThemeMode();\r\n\r\n    return (\r\n      <AntSelect\r\n        ref={ref}\r\n        variant={variant || (isDarkMode ? 'filled' : 'outlined')}\r\n        className={cx(\r\n          variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\r\n          className,\r\n        )}\r\n        suffixIcon={\r\n          <Icon\r\n            icon={suffixIcon || ChevronDownIcon}\r\n            size={'small'}\r\n            {...suffixIconProps}\r\n            style={{\r\n              pointerEvents: 'none',\r\n              ...suffixIconProps?.style,\r\n            }}\r\n          />\r\n        }\r\n        {...rest}\r\n      />\r\n    );\r\n  },\r\n);\r\n\r\nSelect.displayName = 'Select';\r\n\r\nexport default Select;\r\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"}

package/es/Select/index.d.mts

@@ -0,0 +1,3 @@
+import { SelectProps } from "./type.mjs";
+import Select from "./Select.mjs";
+export { type SelectProps, Select as default };

package/es/Select/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/Select/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/Select/index.mjs

@@ -0,0 +1,2 @@
+import Select from "./Select.mjs";
+export { Select as default };

package/es/Select/style.mjs

@@ -0,0 +1,64 @@
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#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
+		}
+	}
+});
+//#endregion
+export { styles, variants };
+
+//# sourceMappingURL=style.mjs.map