@tiny-design/react 1.0.4

package/lib/result/style/index.css

@@ -0,0 +1,65 @@
+@keyframes ty-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes ty-rotate-reverse {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(-360deg);
+  }
+}
+@keyframes ty-processing {
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(2.8);
+    opacity: 0;
+  }
+}
+.ty-result {
+  padding: 48px 32px;
+  box-sizing: border-box;
+}
+.ty-result__icon-container {
+  margin-bottom: 24px;
+  text-align: center;
+  box-sizing: border-box;
+}
+.ty-result__icon {
+  animation: ty-rotate 1s linear infinite;
+}
+.ty-result__title {
+  color: var(--ty-color-text);
+  font-size: 24px;
+  line-height: 1.8;
+  text-align: center;
+  box-sizing: border-box;
+}
+.ty-result__subtitle {
+  color: var(--ty-color-text-tertiary);
+  font-size: 14px;
+  line-height: 1.6;
+  text-align: center;
+  box-sizing: border-box;
+}
+.ty-result__extra {
+  margin-top: 32px;
+  text-align: center;
+  box-sizing: border-box;
+}
+.ty-result__content {
+  margin-top: 24px;
+  margin-left: 30px;
+  margin-right: 30px;
+  padding: 24px 40px;
+  background-color: var(--ty-result-content-bg);
+  box-sizing: border-box;
+}

package/lib/result/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/lib/result/style/index.js

@@ -0,0 +1 @@
+require("./index.css");

package/lib/result/types.d.ts

@@ -0,0 +1,16 @@
+import { BaseProps } from "../_utils/props.js";
+import React, { ReactNode } from "react";
+
+//#region src/result/types.d.ts
+type ResultStatus = 'success' | 'error' | 'info' | 'warning' | 'loading';
+interface ResultProps extends BaseProps, Omit<React.PropsWithRef<JSX.IntrinsicElements['div']>, 'title'> {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  status?: ResultStatus;
+  icon?: ReactNode;
+  extra?: ReactNode;
+  children?: ReactNode;
+}
+//#endregion
+export { ResultProps };
+//# sourceMappingURL=types.d.ts.map

package/lib/row/index.js

@@ -0,0 +1,6 @@
+//#region src/row/index.tsx
+var row_default = require("../grid/row.js").default;
+//#endregion
+exports.default = row_default;
+
+//# sourceMappingURL=index.js.map

package/lib/row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Row"],"sources":["../../src/row/index.tsx"],"sourcesContent":["import Row from '../grid/row';\n\nexport default Row;\n"],"mappings":";AAEA,IAAA,wCAAeA"}

package/lib/scroll-indicator/index.js

@@ -0,0 +1,8 @@
+require('../style/base.css');
+require('./style/index.css');
+//#region src/scroll-indicator/index.tsx
+var scroll_indicator_default = require("./scroll-indicator.js").default;
+//#endregion
+exports.default = scroll_indicator_default;
+
+//# sourceMappingURL=index.js.map

package/lib/scroll-indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ScrollIndicator"],"sources":["../../src/scroll-indicator/index.tsx"],"sourcesContent":["import ScrollIndicator from './scroll-indicator';\n\nexport default ScrollIndicator;\n"],"mappings":";AAEA,IAAA,4DAAeA"}

package/lib/scroll-indicator/scroll-indicator.d.ts

@@ -0,0 +1,11 @@
+import { ScrollIndicatorProps } from "./types.js";
+import React from "react";
+
+//#region src/scroll-indicator/scroll-indicator.d.ts
+declare const ScrollIndicator: {
+  (props: ScrollIndicatorProps): React.ReactElement;
+  displayName: string;
+};
+//#endregion
+export { ScrollIndicator };
+//# sourceMappingURL=scroll-indicator.d.ts.map

package/lib/scroll-indicator/scroll-indicator.js

@@ -0,0 +1,43 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+const require_dom = require("../_utils/dom.js");
+const require_hooks = require("../_utils/hooks.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/scroll-indicator/scroll-indicator.tsx
+const ScrollIndicator = (props) => {
+	const { prefixCls: customisedCls, fixed = true, target, className, style, ...otherProps } = props;
+	const prefixCls = require_general.getPrefixCls("scroll-indicator", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
+	const cls = (0, classnames.default)(prefixCls, className, { [`${prefixCls}_fixed`]: fixed });
+	const [width, setWidth] = (0, react.useState)("0%");
+	require_hooks.useEventListener("scroll", (0, react.useCallback)((e) => {
+		let container = e.target;
+		if (container !== (target && target())) container = window;
+		if (container) {
+			const el = container;
+			setWidth(`${require_dom.getScroll(el, true) / (require_dom.getNodeScrollHeight(el) - require_dom.getNodeHeight(el)) * 100}%`);
+		}
+	}, [target]), target ? target() ? target() : window : window);
+	const numericWidth = parseFloat(width) || 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...otherProps,
+		className: cls,
+		style: {
+			...style,
+			width
+		},
+		role: "progressbar",
+		"aria-valuenow": Math.round(numericWidth),
+		"aria-valuemin": 0,
+		"aria-valuemax": 100
+	});
+};
+ScrollIndicator.displayName = "ScrollIndicator";
+//#endregion
+exports.default = ScrollIndicator;
+
+//# sourceMappingURL=scroll-indicator.js.map

package/lib/scroll-indicator/scroll-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-indicator.js","names":["getPrefixCls","ConfigContext","getScroll","getNodeScrollHeight","getNodeHeight"],"sources":["../../src/scroll-indicator/scroll-indicator.tsx"],"sourcesContent":["import React, { useCallback, useContext, useState } from 'react';\nimport classNames from 'classnames';\nimport { Target, getScroll, getNodeScrollHeight, getNodeHeight } from '../_utils/dom';\nimport { useEventListener } from '../_utils/hooks';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { ScrollIndicatorProps } from './types';\n\nconst ScrollIndicator = (props: ScrollIndicatorProps): React.ReactElement => {\n  const { prefixCls: customisedCls, fixed = true, target, className, style, ...otherProps } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('scroll-indicator', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_fixed`]: fixed,\n  });\n  const [width, setWidth] = useState('0%');\n\n  const handleScroll = useCallback(\n    (e: Event) => {\n      let container = e.target;\n      // If the container is not provided, the target will be the root element. So set it as Window\n      // if the container is not determined.\n      if (container !== (target && target())) {\n        container = window;\n      }\n      if (container) {\n        const el = container as Target;\n        const scrollTop = getScroll(el, true);\n        const height = getNodeScrollHeight(el) - getNodeHeight(el);\n        const scrolled = (scrollTop / height) * 100;\n        setWidth(`${scrolled}%`);\n      }\n    },\n    [target]\n  );\n\n  const element = target ? (target() ? target() : window) : window;\n  useEventListener('scroll', handleScroll, element);\n\n  const numericWidth = parseFloat(width) || 0;\n  return <div {...otherProps} className={cls} style={{ ...style, width }} role=\"progressbar\" aria-valuenow={Math.round(numericWidth)} aria-valuemin={0} aria-valuemax={100} />;\n};\n\nScrollIndicator.displayName = 'ScrollIndicator';\n\nexport default ScrollIndicator;\n"],"mappings":";;;;;;;;;;;AAQA,MAAM,mBAAmB,UAAoD;CAC3E,MAAM,EAAE,WAAW,eAAe,QAAQ,MAAM,QAAQ,WAAW,OAAO,GAAG,eAAe;CAE5F,MAAM,YAAYA,gBAAAA,aAAa,qBAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACkB,WAAW,cAAc;CAC1F,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,WAAW,GAC1C,GAAG,UAAU,UAAU,OACzB,CAAC;CACF,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqB,KAAK;AAsBxC,eAAA,iBAAiB,WAAA,GAAA,MAAA,cAnBd,MAAa;EACZ,IAAI,YAAY,EAAE;AAGlB,MAAI,eAAe,UAAU,QAAQ,EACnC,aAAY;AAEd,MAAI,WAAW;GACb,MAAM,KAAK;AAIX,YAAS,GAHSC,YAAAA,UAAU,IAAI,KAAK,IACtBC,YAAAA,oBAAoB,GAAG,GAAGC,YAAAA,cAAc,GAAG,IAClB,IACnB,GAAG;;IAG5B,CAAC,OAAO,CACT,EAEe,SAAU,QAAQ,GAAG,QAAQ,GAAG,SAAU,OACT;CAEjD,MAAM,eAAe,WAAW,MAAM,IAAI;AAC1C,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAK,OAAO;GAAE,GAAG;GAAO;GAAO;EAAE,MAAK;EAAc,iBAAe,KAAK,MAAM,aAAa;EAAE,iBAAe;EAAG,iBAAe;EAAO,CAAA;;AAG9K,gBAAgB,cAAc"}

package/lib/scroll-indicator/style/_index.scss

@@ -0,0 +1,15 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-scroll-indicator {
+  box-sizing: border-box;
+  height: 3px;
+  transform: translateZ(0);
+  background: var(--ty-color-primary);
+
+  &_fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+  }
+}

package/lib/scroll-indicator/style/index.css

@@ -0,0 +1,12 @@
+.ty-scroll-indicator {
+  box-sizing: border-box;
+  height: 3px;
+  transform: translateZ(0);
+  background: var(--ty-color-primary);
+}
+.ty-scroll-indicator_fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+}

package/lib/scroll-indicator/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/lib/scroll-indicator/style/index.js

@@ -0,0 +1 @@
+require("./index.css");

package/lib/scroll-indicator/types.d.ts

@@ -0,0 +1,12 @@
+import { BaseProps } from "../_utils/props.js";
+import { Target } from "../_utils/dom.js";
+import React from "react";
+
+//#region src/scroll-indicator/types.d.ts
+interface ScrollIndicatorProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
+  fixed?: boolean;
+  target?: () => Target;
+}
+//#endregion
+export { ScrollIndicatorProps };
+//# sourceMappingURL=types.d.ts.map

package/lib/segmented/index.js

@@ -0,0 +1,8 @@
+require('../style/base.css');
+require('./style/index.css');
+//#region src/segmented/index.tsx
+var segmented_default = require("./segmented.js").default;
+//#endregion
+exports.default = segmented_default;
+
+//# sourceMappingURL=index.js.map

package/lib/segmented/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Segmented"],"sources":["../../src/segmented/index.tsx"],"sourcesContent":["import Segmented from './segmented';\n\nexport default Segmented;\n"],"mappings":";AAEA,IAAA,8CAAeA"}

package/lib/segmented/segmented.d.ts

@@ -0,0 +1,8 @@
+import { SegmentedProps } from "./types.js";
+import React from "react";
+
+//#region src/segmented/segmented.d.ts
+declare const Segmented: React.ForwardRefExoticComponent<SegmentedProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Segmented };
+//# sourceMappingURL=segmented.d.ts.map

package/lib/segmented/segmented.js

@@ -0,0 +1,79 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/segmented/segmented.tsx
+const normalizeOptions = (options) => {
+	return options.map((opt) => {
+		if (typeof opt === "string" || typeof opt === "number") return {
+			label: String(opt),
+			value: opt
+		};
+		return opt;
+	});
+};
+const Segmented = react.default.forwardRef((props, ref) => {
+	const { options, defaultValue, block = false, disabled = false, size, prefixCls: customisedCls, className, style, onChange, ...otherProps } = props;
+	const configContext = (0, react.useContext)(require_config_context.ConfigContext);
+	const prefixCls = require_general.getPrefixCls("segmented", configContext.prefixCls, customisedCls);
+	const segSize = size || configContext.componentSize || "md";
+	const normalizedOptions = normalizeOptions(options);
+	const [selected, setSelected] = (0, react.useState)("value" in props ? props.value : defaultValue ?? normalizedOptions[0]?.value);
+	(0, react.useEffect)(() => {
+		if ("value" in props) setSelected(props.value);
+	}, [props.value]);
+	const cls = (0, classnames.default)(prefixCls, className, {
+		[`${prefixCls}_${segSize}`]: segSize,
+		[`${prefixCls}_block`]: block,
+		[`${prefixCls}_disabled`]: disabled
+	});
+	const handleClick = (value, optDisabled) => {
+		if (disabled || optDisabled) return;
+		if (!("value" in props)) setSelected(value);
+		onChange?.(value);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...otherProps,
+		ref,
+		className: cls,
+		style,
+		role: "radiogroup",
+		children: normalizedOptions.map((opt) => {
+			const isActive = opt.value === selected;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: (0, classnames.default)(`${prefixCls}__item`, {
+					[`${prefixCls}__item_active`]: isActive,
+					[`${prefixCls}__item_disabled`]: opt.disabled
+				}),
+				onClick: () => handleClick(opt.value, opt.disabled),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "radio",
+						className: `${prefixCls}__input`,
+						checked: isActive,
+						disabled: disabled || opt.disabled,
+						onChange: () => handleClick(opt.value, opt.disabled),
+						value: opt.value
+					}),
+					opt.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `${prefixCls}__icon`,
+						children: opt.icon
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: `${prefixCls}__label`,
+						children: opt.label
+					})
+				]
+			}, opt.value);
+		})
+	});
+});
+Segmented.displayName = "Segmented";
+//#endregion
+exports.default = Segmented;
+
+//# sourceMappingURL=segmented.js.map

package/lib/segmented/segmented.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.js","names":["React","ConfigContext","getPrefixCls"],"sources":["../../src/segmented/segmented.tsx"],"sourcesContent":["import React, { useState, useEffect, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { SegmentedProps, SegmentedOption, SegmentedValue } from './types';\n\nconst normalizeOptions = (\n  options: (string | number | SegmentedOption)[]\n): SegmentedOption[] => {\n  return options.map((opt) => {\n    if (typeof opt === 'string' || typeof opt === 'number') {\n      return { label: String(opt), value: opt };\n    }\n    return opt;\n  });\n};\n\nconst Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>((props, ref) => {\n  const {\n    options,\n    defaultValue,\n    block = false,\n    disabled = false,\n    size,\n    prefixCls: customisedCls,\n    className,\n    style,\n    onChange,\n    ...otherProps\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('segmented', configContext.prefixCls, customisedCls);\n  const segSize = size || configContext.componentSize || 'md';\n\n  const normalizedOptions = normalizeOptions(options);\n  const [selected, setSelected] = useState<SegmentedValue>(\n    'value' in props\n      ? (props.value as SegmentedValue)\n      : defaultValue ?? normalizedOptions[0]?.value\n  );\n\n  useEffect(() => {\n    if ('value' in props) {\n      setSelected(props.value as SegmentedValue);\n    }\n  }, [props.value]);\n\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_${segSize}`]: segSize,\n    [`${prefixCls}_block`]: block,\n    [`${prefixCls}_disabled`]: disabled,\n  });\n\n  const handleClick = (value: SegmentedValue, optDisabled?: boolean) => {\n    if (disabled || optDisabled) return;\n    if (!('value' in props)) {\n      setSelected(value);\n    }\n    onChange?.(value);\n  };\n\n  return (\n    <div\n      {...otherProps}\n      ref={ref}\n      className={cls}\n      style={style}\n      role=\"radiogroup\"\n    >\n      {normalizedOptions.map((opt) => {\n        const isActive = opt.value === selected;\n        const itemCls = classNames(`${prefixCls}__item`, {\n          [`${prefixCls}__item_active`]: isActive,\n          [`${prefixCls}__item_disabled`]: opt.disabled,\n        });\n        return (\n          <label\n            key={opt.value}\n            className={itemCls}\n            onClick={() => handleClick(opt.value, opt.disabled)}\n          >\n            <input\n              type=\"radio\"\n              className={`${prefixCls}__input`}\n              checked={isActive}\n              disabled={disabled || opt.disabled}\n              onChange={() => handleClick(opt.value, opt.disabled)}\n              value={opt.value}\n            />\n            {opt.icon && <span className={`${prefixCls}__icon`}>{opt.icon}</span>}\n            <span className={`${prefixCls}__label`}>{opt.label}</span>\n          </label>\n        );\n      })}\n    </div>\n  );\n});\n\nSegmented.displayName = 'Segmented';\nexport default Segmented;\n"],"mappings":";;;;;;;;;AAMA,MAAM,oBACJ,YACsB;AACtB,QAAO,QAAQ,KAAK,QAAQ;AAC1B,MAAI,OAAO,QAAQ,YAAY,OAAO,QAAQ,SAC5C,QAAO;GAAE,OAAO,OAAO,IAAI;GAAE,OAAO;GAAK;AAE3C,SAAO;GACP;;AAGJ,MAAM,YAAYA,MAAAA,QAAM,YAA4C,OAAO,QAAQ;CACjF,MAAM,EACJ,SACA,cACA,QAAQ,OACR,WAAW,OACX,MACA,WAAW,eACX,WACA,OACA,UACA,GAAG,eACD;CAEJ,MAAM,iBAAA,GAAA,MAAA,YAA2BC,uBAAAA,cAAc;CAC/C,MAAM,YAAYC,gBAAAA,aAAa,aAAa,cAAc,WAAW,cAAc;CACnF,MAAM,UAAU,QAAQ,cAAc,iBAAiB;CAEvD,MAAM,oBAAoB,iBAAiB,QAAQ;CACnD,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UACf,WAAW,QACN,MAAM,QACP,gBAAgB,kBAAkB,IAAI,MAC3C;AAED,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,WAAW,MACb,aAAY,MAAM,MAAwB;IAE3C,CAAC,MAAM,MAAM,CAAC;CAEjB,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,WAAW;GAC1C,GAAG,UAAU,GAAG,YAAY;GAC5B,GAAG,UAAU,UAAU;GACvB,GAAG,UAAU,aAAa;EAC5B,CAAC;CAEF,MAAM,eAAe,OAAuB,gBAA0B;AACpE,MAAI,YAAY,YAAa;AAC7B,MAAI,EAAE,WAAW,OACf,aAAY,MAAM;AAEpB,aAAW,MAAM;;AAGnB,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW;EACJ;EACP,MAAK;YAEJ,kBAAkB,KAAK,QAAQ;GAC9B,MAAM,WAAW,IAAI,UAAU;AAK/B,UACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;IAEE,YAAA,GAAA,WAAA,SAPuB,GAAG,UAAU,SAAS;MAC9C,GAAG,UAAU,iBAAiB;MAC9B,GAAG,UAAU,mBAAmB,IAAI;KACtC,CAAC;IAKE,eAAe,YAAY,IAAI,OAAO,IAAI,SAAS;cAHrD;KAKE,iBAAA,GAAA,kBAAA,KAAC,SAAD;MACE,MAAK;MACL,WAAW,GAAG,UAAU;MACxB,SAAS;MACT,UAAU,YAAY,IAAI;MAC1B,gBAAgB,YAAY,IAAI,OAAO,IAAI,SAAS;MACpD,OAAO,IAAI;MACX,CAAA;KACD,IAAI,QAAQ,iBAAA,GAAA,kBAAA,KAAC,QAAD;MAAM,WAAW,GAAG,UAAU;gBAAU,IAAI;MAAY,CAAA;KACrE,iBAAA,GAAA,kBAAA,KAAC,QAAD;MAAM,WAAW,GAAG,UAAU;gBAAW,IAAI;MAAa,CAAA;KACpD;MAdD,IAAI,MAcH;IAEV;EACE,CAAA;EAER;AAEF,UAAU,cAAc"}

package/lib/segmented/style/_index.scss

@@ -0,0 +1,93 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-segmented {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px;
+  background: var(--ty-segmented-bg, #{$gray-200});
+  border-radius: $border-radius;
+  box-sizing: border-box;
+
+  &_block {
+    display: flex;
+    width: 100%;
+
+    .#{$prefix}-segmented__item {
+      flex: 1;
+      justify-content: center;
+    }
+  }
+
+  &_disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    .#{$prefix}-segmented__item {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  &_sm .#{$prefix}-segmented__item {
+    padding: 0 8px;
+    height: calc(#{$height-sm} - 4px);
+    font-size: $font-size-sm;
+  }
+
+  &_md .#{$prefix}-segmented__item {
+    padding: 0 12px;
+    height: calc(#{$height-md} - 4px);
+    font-size: $font-size-base;
+  }
+
+  &_lg .#{$prefix}-segmented__item {
+    padding: 0 16px;
+    height: calc(#{$height-lg} - 4px);
+    font-size: $font-size-lg;
+  }
+
+  &__item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    border-radius: $border-radius;
+    transition: all 0.2s;
+    user-select: none;
+    white-space: nowrap;
+
+    &:hover:not(&_active):not(&_disabled) {
+      color: var(--ty-color-text, #{$gray-900});
+    }
+
+    &_active {
+      background: var(--ty-segmented-active-bg, #fff);
+      color: var(--ty-color-text, #{$gray-900});
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+      font-weight: 500;
+    }
+
+    &_disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  &__input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__label {
+    display: inline-block;
+  }
+}

package/lib/segmented/style/index.css

@@ -0,0 +1,79 @@
+.ty-segmented {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px;
+  background: var(--ty-segmented-bg, #e9ecef);
+  border-radius: 2px;
+  box-sizing: border-box;
+}
+.ty-segmented_block {
+  display: flex;
+  width: 100%;
+}
+.ty-segmented_block .ty-segmented__item {
+  flex: 1;
+  justify-content: center;
+}
+.ty-segmented_disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.ty-segmented_disabled .ty-segmented__item {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.ty-segmented_sm .ty-segmented__item {
+  padding: 0 8px;
+  height: calc(24px - 4px);
+  font-size: 0.875rem;
+}
+.ty-segmented_md .ty-segmented__item {
+  padding: 0 12px;
+  height: calc(32px - 4px);
+  font-size: 1rem;
+}
+.ty-segmented_lg .ty-segmented__item {
+  padding: 0 16px;
+  height: calc(42px - 4px);
+  font-size: 1.25rem;
+}
+.ty-segmented__item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: all 0.2s;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  white-space: nowrap;
+}
+.ty-segmented__item:hover:not(.ty-segmented__item_active):not(.ty-segmented__item_disabled) {
+  color: var(--ty-color-text, #212529);
+}
+.ty-segmented__item_active {
+  background: var(--ty-segmented-active-bg, #fff);
+  color: var(--ty-color-text, #212529);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  font-weight: 500;
+}
+.ty-segmented__item_disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.ty-segmented__input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.ty-segmented__icon {
+  display: inline-flex;
+  align-items: center;
+}
+.ty-segmented__label {
+  display: inline-block;
+}

package/lib/segmented/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/lib/segmented/style/index.js

@@ -0,0 +1 @@
+require("./index.css");

package/lib/segmented/types.d.ts

@@ -0,0 +1,23 @@
+import { BaseProps, SizeType } from "../_utils/props.js";
+import React from "react";
+
+//#region src/segmented/types.d.ts
+interface SegmentedOption {
+  label: React.ReactNode;
+  value: string | number;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+}
+type SegmentedValue = string | number;
+interface SegmentedProps extends BaseProps, Omit<React.PropsWithoutRef<JSX.IntrinsicElements['div']>, 'onChange'> {
+  options: (string | number | SegmentedOption)[];
+  value?: SegmentedValue;
+  defaultValue?: SegmentedValue;
+  onChange?: (value: SegmentedValue) => void;
+  block?: boolean;
+  disabled?: boolean;
+  size?: SizeType;
+}
+//#endregion
+export { SegmentedProps };
+//# sourceMappingURL=types.d.ts.map

package/lib/select/index.d.ts

@@ -0,0 +1,13 @@
+import { Select } from "./select.js";
+import { SelectOption } from "./option.js";
+import { SelectOptGroup } from "./opt-group.js";
+
+//#region src/select/index.d.ts
+type ISelect = typeof Select & {
+  Option: typeof SelectOption;
+  OptGroup: typeof SelectOptGroup;
+};
+declare const DefaultSelect: ISelect;
+//#endregion
+export { DefaultSelect };
+//# sourceMappingURL=index.d.ts.map

package/lib/select/index.js

@@ -0,0 +1,15 @@
+require('../style/base.css');
+require('./style/index.css');
+require('../popup/style/index.css');
+require('../input/style/index.css');
+const require_select = require("./select.js");
+const require_option = require("./option.js");
+const require_opt_group = require("./opt-group.js");
+//#region src/select/index.tsx
+const DefaultSelect = require_select.default;
+DefaultSelect.Option = require_option.default;
+DefaultSelect.OptGroup = require_opt_group.default;
+//#endregion
+exports.default = DefaultSelect;
+
+//# sourceMappingURL=index.js.map

package/lib/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Select","SelectOption","SelectOptGroup"],"sources":["../../src/select/index.tsx"],"sourcesContent":["import Select from './select';\nimport SelectOption from './option';\nimport SelectOptGroup from './opt-group';\n\ntype ISelect = typeof Select & {\n  Option: typeof SelectOption;\n  OptGroup: typeof SelectOptGroup;\n};\n\nconst DefaultSelect = Select as ISelect;\nDefaultSelect.Option = SelectOption;\nDefaultSelect.OptGroup = SelectOptGroup;\n\nexport default DefaultSelect;\n"],"mappings":";;;;AASA,MAAM,gBAAgBA,eAAAA;AACtB,cAAc,SAASC,eAAAA;AACvB,cAAc,WAAWC,kBAAAA"}

package/lib/select/opt-group.d.ts

@@ -0,0 +1,11 @@
+import { SelectOptGroupProps } from "./types.js";
+import React from "react";
+
+//#region src/select/opt-group.d.ts
+declare const SelectOptGroup: {
+  (props: SelectOptGroupProps): React.ReactElement;
+  displayName: string;
+};
+//#endregion
+export { SelectOptGroup };
+//# sourceMappingURL=opt-group.d.ts.map

package/lib/select/opt-group.js

@@ -0,0 +1,39 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/select/opt-group.tsx
+const SelectOptGroup = (props) => {
+	const { prefixCls: customisedCls, label, className, children, ...otherProps } = props;
+	const prefixCls = require_general.getPrefixCls("select-group", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
+	const cls = (0, classnames.default)(prefixCls, className);
+	return /* @__PURE__ */ (0, react.createElement)("li", {
+		...otherProps,
+		key: label,
+		className: cls
+	}, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `${prefixCls}__title`,
+		children: label
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: `${prefixCls}__list`,
+		children: react.default.Children.map(children, (child) => {
+			const childElement = child;
+			if (childElement.type.displayName === "SelectOption") {
+				const childProps = { ...childElement.props };
+				return react.default.cloneElement(childElement, childProps);
+			} else {
+				console.warn("Select has a child that is not neither SelectOption nor SelectOptGroup component.");
+				return null;
+			}
+		})
+	}));
+};
+SelectOptGroup.displayName = "SelectOptGroup";
+//#endregion
+exports.default = SelectOptGroup;
+
+//# sourceMappingURL=opt-group.js.map

package/lib/select/opt-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"opt-group.js","names":["getPrefixCls","ConfigContext","React"],"sources":["../../src/select/opt-group.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { SelectOptGroupProps, SelectOptionsProps } from './types';\n\nconst SelectOptGroup = (props: SelectOptGroupProps): React.ReactElement => {\n  const { prefixCls: customisedCls, label, className, children, ...otherProps } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('select-group', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className);\n\n  return (\n    <li {...otherProps} key={label} className={cls}>\n      <div className={`${prefixCls}__title`}>{label}</div>\n      <ul className={`${prefixCls}__list`}>\n        {React.Children.map(children, (child) => {\n          const childElement = child as React.FunctionComponentElement<SelectOptionsProps>;\n          if (childElement.type.displayName === 'SelectOption') {\n            const childProps = {\n              ...childElement.props,\n            };\n            return React.cloneElement(childElement, childProps);\n          } else {\n            console.warn(\n              'Select has a child that is not neither SelectOption nor SelectOptGroup component.'\n            );\n            return null;\n          }\n        })}\n      </ul>\n    </li>\n  );\n};\n\nSelectOptGroup.displayName = 'SelectOptGroup';\n\nexport default SelectOptGroup;\n"],"mappings":";;;;;;;;;AAMA,MAAM,kBAAkB,UAAmD;CACzE,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,UAAU,GAAG,eAAe;CAEhF,MAAM,YAAYA,gBAAAA,aAAa,iBAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACc,WAAW,cAAc;CACtF,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,UAAU;AAE5C,QACE,iBAAA,GAAA,MAAA,eAAC,MAAD;EAAI,GAAI;EAAY,KAAK;EAAO,WAAW;EAkBtC,EAjBH,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAW,GAAG,UAAU;YAAW;EAAY,CAAA,EACpD,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,WAAW,GAAG,UAAU;YACzBC,MAAAA,QAAM,SAAS,IAAI,WAAW,UAAU;GACvC,MAAM,eAAe;AACrB,OAAI,aAAa,KAAK,gBAAgB,gBAAgB;IACpD,MAAM,aAAa,EACjB,GAAG,aAAa,OACjB;AACD,WAAOA,MAAAA,QAAM,aAAa,cAAc,WAAW;UAC9C;AACL,YAAQ,KACN,oFACD;AACD,WAAO;;IAET;EACC,CAAA,CACF;;AAIT,eAAe,cAAc"}

package/lib/select/option.d.ts

@@ -0,0 +1,11 @@
+import { SelectOptionsProps } from "./types.js";
+import React from "react";
+
+//#region src/select/option.d.ts
+declare const SelectOption: {
+  (props: SelectOptionsProps): React.ReactElement;
+  displayName: string;
+};
+//#endregion
+export { SelectOption };
+//# sourceMappingURL=option.d.ts.map