@jinmi/ui 0.0.0-stage → 6.0.1

package/es/base-ui/Segmented/Segmented.d.mts

@@ -0,0 +1,9 @@
+import { SegmentedProps } from "./type.mjs";
+//#region src/base-ui/Segmented/Segmented.d.ts
+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/base-ui/Segmented/Segmented.mjs

@@ -0,0 +1,113 @@
+"use client";
+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 { cx } from "antd-style";
+import useMergeState from "use-merge-value";
+//#region src/base-ui/Segmented/Segmented.tsx
+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] = useMergeState(defaultValue, {
+		defaultValue,
+		onChange: (next) => {
+			if (next != null) onChange?.(next);
+		},
+		value
+	});
+	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: cx(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: cx(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 as default };
+
+//# sourceMappingURL=Segmented.mjs.map

package/es/base-ui/Segmented/Segmented.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Segmented.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Segmented/Segmented.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport {\r\n  type CSSProperties,\r\n  useCallback,\r\n  useEffect,\r\n  useLayoutEffect,\r\n  useMemo,\r\n  useRef,\r\n} from 'react';\r\nimport useControlledState from 'use-merge-value';\r\n\r\nimport {\r\n  SegmentedIndicator,\r\n  SegmentedItem,\r\n  SegmentedItemIcon,\r\n  SegmentedItemLabel,\r\n  SegmentedRoot,\r\n} from './atoms';\r\nimport type { SegmentedOption, SegmentedProps } from './type';\r\n\r\nconst normalizeOption = <Value extends string>(\r\n  option: SegmentedOption<Value> | Value,\r\n): SegmentedOption<Value> =>\r\n  typeof option === 'string' ? { label: option, value: option } : option;\r\n\r\nconst Segmented = <Value extends string = string>({\r\n  block = false,\r\n  className,\r\n  classNames,\r\n  defaultValue,\r\n  disabled = false,\r\n  glass = false,\r\n  id,\r\n  name,\r\n  onChange,\r\n  options,\r\n  ref,\r\n  shadow = false,\r\n  size = 'middle',\r\n  style,\r\n  styles: customStyles,\r\n  value,\r\n  variant = 'filled',\r\n  vertical = false,\r\n}: SegmentedProps<Value>) => {\r\n  const [innerValue, setInnerValue] = useControlledState<Value | undefined>(defaultValue, {\r\n    defaultValue,\r\n    onChange: (next) => {\r\n      if (next != null) onChange?.(next);\r\n    },\r\n    value,\r\n  });\r\n\r\n  const listRef = useRef<HTMLDivElement | null>(null);\r\n\r\n  const mergedRef = useCallback(\r\n    (node: HTMLDivElement | null) => {\r\n      listRef.current = node;\r\n      if (typeof ref === 'function') ref(node);\r\n      else if (ref) (ref as React.RefObject<HTMLDivElement | null>).current = node;\r\n    },\r\n    [ref],\r\n  );\r\n\r\n  const normalizedOptions = useMemo(\r\n    () => (options ?? []).map((o) => normalizeOption<Value>(o)),\r\n    [options],\r\n  );\r\n\r\n  const updateIndicator = useCallback(() => {\r\n    const list = listRef.current;\r\n    if (!list) return;\r\n    const active = list.querySelector<HTMLElement>('[data-segmented-item][data-pressed]');\r\n    if (!active) {\r\n      list.style.setProperty('--active-item-left', '0px');\r\n      list.style.setProperty('--active-item-top', '0px');\r\n      list.style.setProperty('--active-item-right', '0px');\r\n      list.style.setProperty('--active-item-width', '0px');\r\n      list.style.setProperty('--active-item-height', '0px');\r\n      return;\r\n    }\r\n    list.style.setProperty('--active-item-left', `${active.offsetLeft}px`);\r\n    list.style.setProperty('--active-item-top', `${active.offsetTop}px`);\r\n    list.style.setProperty(\r\n      '--active-item-right',\r\n      `${list.clientWidth - active.offsetLeft - active.offsetWidth}px`,\r\n    );\r\n    list.style.setProperty('--active-item-width', `${active.offsetWidth}px`);\r\n    list.style.setProperty('--active-item-height', `${active.offsetHeight}px`);\r\n  }, []);\r\n\r\n  useLayoutEffect(() => {\r\n    updateIndicator();\r\n  }, [innerValue, normalizedOptions, vertical, size, block, updateIndicator]);\r\n\r\n  useEffect(() => {\r\n    const list = listRef.current;\r\n    if (!list || typeof ResizeObserver === 'undefined') return;\r\n    const ro = new ResizeObserver(() => updateIndicator());\r\n    ro.observe(list);\r\n    return () => ro.disconnect();\r\n  }, [updateIndicator]);\r\n\r\n  const groupValue = useMemo<Value[]>(() => (innerValue != null ? [innerValue] : []), [innerValue]);\r\n\r\n  const rootStyle: CSSProperties = { ...style, ...customStyles?.root };\r\n\r\n  return (\r\n    <SegmentedRoot<Value>\r\n      block={block}\r\n      className={cx(classNames?.root, className)}\r\n      disabled={disabled}\r\n      glass={glass}\r\n      id={id}\r\n      orientation={vertical ? 'vertical' : 'horizontal'}\r\n      ref={mergedRef}\r\n      shadow={shadow}\r\n      style={rootStyle}\r\n      value={groupValue}\r\n      variant={variant}\r\n      onValueChange={(next) => {\r\n        const picked = next[0];\r\n        if (picked != null) setInnerValue(picked);\r\n      }}\r\n    >\r\n      <SegmentedIndicator className={classNames?.indicator} style={customStyles?.indicator} />\r\n      {normalizedOptions.map((opt) => (\r\n        <SegmentedItem<Value>\r\n          aria-label={typeof opt.label === 'string' ? opt.label : undefined}\r\n          block={block}\r\n          className={cx(classNames?.item, opt.className)}\r\n          data-segmented-item=\"\"\r\n          disabled={disabled || opt.disabled}\r\n          key={opt.value}\r\n          name={name}\r\n          size={size}\r\n          style={customStyles?.item}\r\n          title={opt.title}\r\n          value={opt.value}\r\n        >\r\n          {opt.icon != null && (\r\n            <SegmentedItemIcon className={classNames?.itemIcon} style={customStyles?.itemIcon}>\r\n              {opt.icon}\r\n            </SegmentedItemIcon>\r\n          )}\r\n          {opt.label != null && (\r\n            <SegmentedItemLabel className={classNames?.itemLabel} style={customStyles?.itemLabel}>\r\n              {opt.label}\r\n            </SegmentedItemLabel>\r\n          )}\r\n        </SegmentedItem>\r\n      ))}\r\n    </SegmentedRoot>\r\n  );\r\n};\r\n\r\nSegmented.displayName = 'Segmented';\r\n\r\nexport default Segmented;\r\n"],"mappings":"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"}

package/es/base-ui/Segmented/atoms.d.mts

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

package/es/base-ui/Segmented/atoms.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { itemVariants, listVariants, styles } from "./style.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/base-ui/Segmented/atoms.tsx
+const SegmentedRoot = ({ block = false, className, glass = false, shadow = false, variant = "filled", ...rest }) => {
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		className: cx(listVariants({
+			block,
+			glass,
+			shadow,
+			variant
+		}), className),
+		"data-variant": variant,
+		...rest
+	});
+};
+SegmentedRoot.displayName = "SegmentedRoot";
+const SegmentedItem = ({ block = false, className, size = "middle", ...rest }) => {
+	return /* @__PURE__ */ jsx(Toggle, {
+		className: cx(itemVariants({
+			block,
+			size
+		}), className),
+		...rest
+	});
+};
+SegmentedItem.displayName = "SegmentedItem";
+const SegmentedItemIcon = ({ children, className, style }) => /* @__PURE__ */ jsx("span", {
+	className: cx(styles.itemIcon, className),
+	style,
+	children
+});
+SegmentedItemIcon.displayName = "SegmentedItemIcon";
+const SegmentedItemLabel = ({ children, className, style }) => /* @__PURE__ */ jsx("span", {
+	className: cx(styles.itemLabel, className),
+	style,
+	children
+});
+SegmentedItemLabel.displayName = "SegmentedItemLabel";
+const SegmentedIndicator = ({ className, style }) => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	className: cx(styles.indicator, className),
+	style
+});
+SegmentedIndicator.displayName = "SegmentedIndicator";
+//#endregion
+export { SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot };
+
+//# sourceMappingURL=atoms.mjs.map

package/es/base-ui/Segmented/atoms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"atoms.mjs","names":["BaseUIToggleGroup","BaseUIToggle"],"sources":["../../../src/base-ui/Segmented/atoms.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Toggle as BaseUIToggle } from '@base-ui/react/toggle';\r\nimport { ToggleGroup as BaseUIToggleGroup } from '@base-ui/react/toggle-group';\r\nimport { cx } from 'antd-style';\r\nimport { type ComponentProps, type CSSProperties, type FC, type ReactNode } from 'react';\r\n\r\nimport { itemVariants, listVariants, styles } from './style';\r\nimport type { SegmentedSize, SegmentedVariant } from './type';\r\n\r\nexport type SegmentedRootProps<Value extends string = string> = Omit<\r\n  ComponentProps<typeof BaseUIToggleGroup<Value>>,\r\n  'className' | 'render'\r\n> & {\r\n  block?: boolean;\r\n  className?: string;\r\n  glass?: boolean;\r\n  shadow?: boolean;\r\n  variant?: SegmentedVariant;\r\n};\r\n\r\nexport const SegmentedRoot = <Value extends string = string>({\r\n  block = false,\r\n  className,\r\n  glass = false,\r\n  shadow = false,\r\n  variant = 'filled',\r\n  ...rest\r\n}: SegmentedRootProps<Value>) => {\r\n  return (\r\n    <BaseUIToggleGroup<Value>\r\n      className={cx(listVariants({ block, glass, shadow, variant }), className)}\r\n      data-variant={variant}\r\n      {...rest}\r\n    />\r\n  );\r\n};\r\n\r\nSegmentedRoot.displayName = 'SegmentedRoot';\r\n\r\nexport type SegmentedItemProps<Value extends string = string> = Omit<\r\n  ComponentProps<typeof BaseUIToggle<Value>>,\r\n  'className' | 'render'\r\n> & {\r\n  block?: boolean;\r\n  className?: string;\r\n  size?: SegmentedSize;\r\n};\r\n\r\nexport const SegmentedItem = <Value extends string = string>({\r\n  block = false,\r\n  className,\r\n  size = 'middle',\r\n  ...rest\r\n}: SegmentedItemProps<Value>) => {\r\n  return <BaseUIToggle<Value> className={cx(itemVariants({ block, size }), className)} {...rest} />;\r\n};\r\n\r\nSegmentedItem.displayName = 'SegmentedItem';\r\n\r\ninterface SimpleSpanProps {\r\n  children?: ReactNode;\r\n  className?: string;\r\n  style?: CSSProperties;\r\n}\r\n\r\nexport const SegmentedItemIcon: FC<SimpleSpanProps> = ({ children, className, style }) => (\r\n  <span className={cx(styles.itemIcon, className)} style={style}>\r\n    {children}\r\n  </span>\r\n);\r\nSegmentedItemIcon.displayName = 'SegmentedItemIcon';\r\n\r\nexport const SegmentedItemLabel: FC<SimpleSpanProps> = ({ children, className, style }) => (\r\n  <span className={cx(styles.itemLabel, className)} style={style}>\r\n    {children}\r\n  </span>\r\n);\r\nSegmentedItemLabel.displayName = 'SegmentedItemLabel';\r\n\r\nexport interface SegmentedIndicatorProps {\r\n  className?: string;\r\n  style?: CSSProperties;\r\n}\r\n\r\nexport const SegmentedIndicator: FC<SegmentedIndicatorProps> = ({ className, style }) => (\r\n  <span aria-hidden className={cx(styles.indicator, className)} style={style} />\r\n);\r\nSegmentedIndicator.displayName = 'SegmentedIndicator';\r\n"],"mappings":";;;;;;;AAqBA,MAAa,iBAAgD,EAC3D,QAAQ,OACR,WACA,QAAQ,OACR,SAAS,OACT,UAAU,UACV,GAAG,WAC4B;CAC/B,OACE,oBAACA,aAAD;EACE,WAAW,GAAG,aAAa;GAAE;GAAO;GAAO;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACxE,gBAAc;EACd,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc;AAW5B,MAAa,iBAAgD,EAC3D,QAAQ,OACR,WACA,OAAO,UACP,GAAG,WAC4B;CAC/B,OAAO,oBAACC,QAAD;EAAqB,WAAW,GAAG,aAAa;GAAE;GAAO;EAAK,CAAC,GAAG,SAAS;EAAG,GAAI;CAAO,CAAA;AAClG;AAEA,cAAc,cAAc;AAQ5B,MAAa,qBAA0C,EAAE,UAAU,WAAW,YAC5E,oBAAC,QAAD;CAAM,WAAW,GAAG,OAAO,UAAU,SAAS;CAAU;CACrD;AACG,CAAA;AAER,kBAAkB,cAAc;AAEhC,MAAa,sBAA2C,EAAE,UAAU,WAAW,YAC7E,oBAAC,QAAD;CAAM,WAAW,GAAG,OAAO,WAAW,SAAS;CAAU;CACtD;AACG,CAAA;AAER,mBAAmB,cAAc;AAOjC,MAAa,sBAAmD,EAAE,WAAW,YAC3E,oBAAC,QAAD;CAAM,eAAA;CAAY,WAAW,GAAG,OAAO,WAAW,SAAS;CAAU;AAAQ,CAAA;AAE/E,mBAAmB,cAAc"}

package/es/base-ui/Segmented/index.d.mts

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

package/es/base-ui/Segmented/style.mjs

@@ -0,0 +1,210 @@
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { focusRing } from "../focusRing.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/base-ui/Segmented/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	return {
+		indicator: css`
+    pointer-events: none;
+
+    position: absolute;
+    z-index: 0;
+    inset-block-start: var(--active-item-top);
+    inset-inline-start: var(--active-item-left);
+
+    width: var(--active-item-width);
+    height: var(--active-item-height);
+    border-radius: ${cssVar.borderRadius};
+
+    background: ${cssVar.colorBgElevated};
+    box-shadow: none;
+
+    transition-timing-function: ${cssVar.motionEaseOut};
+    transition-duration: 240ms;
+    transition-property: inset-inline-start, inset-block-start, width, height;
+
+    [data-variant='outlined'] > & {
+      background: ${cssVar.colorFillSecondary};
+    }
+
+    [data-orientation='horizontal'] &:dir(rtl) {
+      inset-inline-start: var(--active-item-right);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0s;
+    }
+  `,
+		item: css`
+      cursor: pointer;
+      user-select: none;
+
+      position: relative;
+      z-index: 1;
+
+      display: inline-flex;
+      flex-shrink: 0;
+      gap: 6px;
+      align-items: center;
+      justify-content: center;
+
+      box-sizing: border-box;
+      border: 0;
+      border-radius: ${cssVar.borderRadius};
+
+      font-weight: 500;
+      color: ${cssVar.colorTextSecondary};
+      white-space: nowrap;
+
+      background: transparent;
+      outline: none;
+
+      transition:
+        color 120ms ${cssVar.motionEaseOut},
+        transform 120ms ${cssVar.motionEaseOut};
+
+      &:hover:not([data-disabled], [data-pressed]) {
+        color: ${cssVar.colorText};
+      }
+
+      &:active:not([data-disabled]) {
+        transform: scale(0.98);
+      }
+
+      ${focusRing};
+
+      &[data-pressed] {
+        color: ${cssVar.colorText};
+      }
+
+      &[data-disabled] {
+        cursor: not-allowed;
+        color: ${cssVar.colorTextDisabled};
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition-duration: 0s;
+      }
+    `,
+		itemBlock: css`
+      flex: 1 1 0;
+    `,
+		itemIcon: css`
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    `,
+		itemLabel: css`
+      display: inline-flex;
+      align-items: center;
+    `,
+		itemLarge: css`
+      height: 36px;
+      padding-inline: 16px;
+      border-radius: ${cssVar.borderRadius};
+      font-size: 14px;
+    `,
+		itemMiddle: css`
+      height: 32px;
+      padding-inline: 12px;
+      border-radius: ${cssVar.borderRadius};
+      font-size: 13px;
+    `,
+		itemSmall: css`
+      height: 26px;
+      padding-inline: 10px;
+      border-radius: ${cssVar.borderRadius};
+      font-size: 12px;
+    `,
+		list: css`
+      position: relative;
+
+      display: inline-flex;
+      flex-wrap: nowrap;
+      gap: 4px;
+      align-items: center;
+      align-self: flex-start;
+
+      box-sizing: border-box;
+      padding: 3px;
+      border-radius: ${cssVar.borderRadiusLG};
+
+      &[data-orientation='vertical'] {
+        flex-direction: column;
+        align-items: stretch;
+        align-self: stretch;
+      }
+    `,
+		listBlock: css`
+      display: flex;
+      align-self: stretch;
+      width: 100%;
+    `,
+		listFilled: css`
+      border: 1px solid ${cssVar.colorFillQuaternary};
+      background: ${cssVar.colorBgLayout};
+    `,
+		listGlass: staticStylish.blur,
+		listOutlined: css`
+      border: 1px solid ${cssVar.colorBorderSecondary};
+      background: transparent;
+    `,
+		listShadow: staticStylish.shadow,
+		root: css`
+      display: inline-flex;
+
+      &[data-block='true'] {
+        display: flex;
+        width: 100%;
+      }
+    `
+	};
+});
+const listVariants = cva(styles.list, {
+	defaultVariants: {
+		block: false,
+		glass: false,
+		shadow: false,
+		variant: "filled"
+	},
+	variants: {
+		block: {
+			false: null,
+			true: styles.listBlock
+		},
+		glass: {
+			false: null,
+			true: styles.listGlass
+		},
+		shadow: {
+			false: null,
+			true: styles.listShadow
+		},
+		variant: {
+			filled: styles.listFilled,
+			outlined: styles.listOutlined
+		}
+	}
+});
+const itemVariants = cva(styles.item, {
+	defaultVariants: {
+		block: false,
+		size: "middle"
+	},
+	variants: {
+		block: {
+			false: null,
+			true: styles.itemBlock
+		},
+		size: {
+			large: styles.itemLarge,
+			middle: styles.itemMiddle,
+			small: styles.itemSmall
+		}
+	}
+});
+//#endregion
+export { itemVariants, listVariants, styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Segmented/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Segmented/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\nimport { cva } from 'class-variance-authority';\r\n\r\nimport { focusRing } from '@/base-ui/focusRing';\r\nimport { lobeStaticStylish } from '@/styles';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => {\r\n  const indicator = css`\r\n    pointer-events: none;\r\n\r\n    position: absolute;\r\n    z-index: 0;\r\n    inset-block-start: var(--active-item-top);\r\n    inset-inline-start: var(--active-item-left);\r\n\r\n    width: var(--active-item-width);\r\n    height: var(--active-item-height);\r\n    border-radius: ${cssVar.borderRadius};\r\n\r\n    background: ${cssVar.colorBgElevated};\r\n    box-shadow: none;\r\n\r\n    transition-timing-function: ${cssVar.motionEaseOut};\r\n    transition-duration: 240ms;\r\n    transition-property: inset-inline-start, inset-block-start, width, height;\r\n\r\n    [data-variant='outlined'] > & {\r\n      background: ${cssVar.colorFillSecondary};\r\n    }\r\n\r\n    [data-orientation='horizontal'] &:dir(rtl) {\r\n      inset-inline-start: var(--active-item-right);\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      transition-duration: 0s;\r\n    }\r\n  `;\r\n\r\n  return {\r\n    indicator,\r\n    item: css`\r\n      cursor: pointer;\r\n      user-select: none;\r\n\r\n      position: relative;\r\n      z-index: 1;\r\n\r\n      display: inline-flex;\r\n      flex-shrink: 0;\r\n      gap: 6px;\r\n      align-items: center;\r\n      justify-content: center;\r\n\r\n      box-sizing: border-box;\r\n      border: 0;\r\n      border-radius: ${cssVar.borderRadius};\r\n\r\n      font-weight: 500;\r\n      color: ${cssVar.colorTextSecondary};\r\n      white-space: nowrap;\r\n\r\n      background: transparent;\r\n      outline: none;\r\n\r\n      transition:\r\n        color 120ms ${cssVar.motionEaseOut},\r\n        transform 120ms ${cssVar.motionEaseOut};\r\n\r\n      &:hover:not([data-disabled], [data-pressed]) {\r\n        color: ${cssVar.colorText};\r\n      }\r\n\r\n      &:active:not([data-disabled]) {\r\n        transform: scale(0.98);\r\n      }\r\n\r\n      ${focusRing};\r\n\r\n      &[data-pressed] {\r\n        color: ${cssVar.colorText};\r\n      }\r\n\r\n      &[data-disabled] {\r\n        cursor: not-allowed;\r\n        color: ${cssVar.colorTextDisabled};\r\n      }\r\n\r\n      @media (prefers-reduced-motion: reduce) {\r\n        transition-duration: 0s;\r\n      }\r\n    `,\r\n    itemBlock: css`\r\n      flex: 1 1 0;\r\n    `,\r\n    itemIcon: css`\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    `,\r\n    itemLabel: css`\r\n      display: inline-flex;\r\n      align-items: center;\r\n    `,\r\n    itemLarge: css`\r\n      height: 36px;\r\n      padding-inline: 16px;\r\n      border-radius: ${cssVar.borderRadius};\r\n      font-size: 14px;\r\n    `,\r\n    itemMiddle: css`\r\n      height: 32px;\r\n      padding-inline: 12px;\r\n      border-radius: ${cssVar.borderRadius};\r\n      font-size: 13px;\r\n    `,\r\n    itemSmall: css`\r\n      height: 26px;\r\n      padding-inline: 10px;\r\n      border-radius: ${cssVar.borderRadius};\r\n      font-size: 12px;\r\n    `,\r\n    list: css`\r\n      position: relative;\r\n\r\n      display: inline-flex;\r\n      flex-wrap: nowrap;\r\n      gap: 4px;\r\n      align-items: center;\r\n      align-self: flex-start;\r\n\r\n      box-sizing: border-box;\r\n      padding: 3px;\r\n      border-radius: ${cssVar.borderRadiusLG};\r\n\r\n      &[data-orientation='vertical'] {\r\n        flex-direction: column;\r\n        align-items: stretch;\r\n        align-self: stretch;\r\n      }\r\n    `,\r\n    listBlock: css`\r\n      display: flex;\r\n      align-self: stretch;\r\n      width: 100%;\r\n    `,\r\n    listFilled: css`\r\n      border: 1px solid ${cssVar.colorFillQuaternary};\r\n      background: ${cssVar.colorBgLayout};\r\n    `,\r\n    listGlass: lobeStaticStylish.blur,\r\n    listOutlined: css`\r\n      border: 1px solid ${cssVar.colorBorderSecondary};\r\n      background: transparent;\r\n    `,\r\n    listShadow: lobeStaticStylish.shadow,\r\n    root: css`\r\n      display: inline-flex;\r\n\r\n      &[data-block='true'] {\r\n        display: flex;\r\n        width: 100%;\r\n      }\r\n    `,\r\n  };\r\n});\r\n\r\nexport const listVariants = cva(styles.list, {\r\n  defaultVariants: {\r\n    block: false,\r\n    glass: false,\r\n    shadow: false,\r\n    variant: 'filled',\r\n  },\r\n  variants: {\r\n    block: {\r\n      false: null,\r\n      true: styles.listBlock,\r\n    },\r\n    glass: {\r\n      false: null,\r\n      true: styles.listGlass,\r\n    },\r\n    shadow: {\r\n      false: null,\r\n      true: styles.listShadow,\r\n    },\r\n    variant: {\r\n      filled: styles.listFilled,\r\n      outlined: styles.listOutlined,\r\n    },\r\n  },\r\n});\r\n\r\nexport const itemVariants = cva(styles.item, {\r\n  defaultVariants: {\r\n    block: false,\r\n    size: 'middle',\r\n  },\r\n  variants: {\r\n    block: {\r\n      false: null,\r\n      true: styles.itemBlock,\r\n    },\r\n    size: {\r\n      large: styles.itemLarge,\r\n      middle: styles.itemMiddle,\r\n      small: styles.itemSmall,\r\n    },\r\n  },\r\n});\r\n"],"mappings":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAiC5D,OAAO;EACL,WAjCgB,GAAG;;;;;;;;;;qBAUF,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;;;kCAGP,OAAO,cAAc;;;;;oBAKnC,OAAO,mBAAmB;;;;;;;;;;;EAc1C,MAAM,GAAG;;;;;;;;;;;;;;;uBAeU,OAAO,aAAa;;;eAG5B,OAAO,mBAAmB;;;;;;;sBAOnB,OAAO,cAAc;0BACjB,OAAO,cAAc;;;iBAG9B,OAAO,UAAU;;;;;;;QAO1B,UAAU;;;iBAGD,OAAO,UAAU;;;;;iBAKjB,OAAO,kBAAkB;;;;;;;EAOtC,WAAW,GAAG;;;EAGd,UAAU,GAAG;;;;;EAKb,WAAW,GAAG;;;;EAId,WAAW,GAAG;;;uBAGK,OAAO,aAAa;;;EAGvC,YAAY,GAAG;;;uBAGI,OAAO,aAAa;;;EAGvC,WAAW,GAAG;;;uBAGK,OAAO,aAAa;;;EAGvC,MAAM,GAAG;;;;;;;;;;;uBAWU,OAAO,eAAe;;;;;;;;EAQzC,WAAW,GAAG;;;;;EAKd,YAAY,GAAG;0BACO,OAAO,oBAAoB;oBACjC,OAAO,cAAc;;EAErC,WAAWA,cAAkB;EAC7B,cAAc,GAAG;0BACK,OAAO,qBAAqB;;;EAGlD,YAAYA,cAAkB;EAC9B,MAAM,GAAG;;;;;;;;CAQX;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,OAAO;EACP,QAAQ;EACR,SAAS;CACX;CACA,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EACf,OAAO;EACP,MAAM;CACR;CACA,UAAU;EACR,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;CACF;AACF,CAAC"}

package/es/base-ui/Segmented/type.d.mts

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

package/es/base-ui/Select/Select.d.mts

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