@octohirono/stitch-design-system 0.1.0

package/dist/components/Popover/Popover.js

@@ -0,0 +1,24 @@
+import e from "./popover.module.js";
+import "react";
+import t from "clsx";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Popover as i } from "radix-ui";
+//#region packages/react/src/components/Popover/Popover.tsx
+var a = ({ trigger: a, children: o, open: s, defaultOpen: c, onOpenChange: l, sideOffset: u = 8, className: d, "aria-label": f, "aria-labelledby": p }) => /* @__PURE__ */ r(i.Root, {
+	open: s,
+	defaultOpen: c,
+	onOpenChange: l,
+	children: [/* @__PURE__ */ n(i.Trigger, {
+		asChild: !0,
+		children: a
+	}), /* @__PURE__ */ n(i.Portal, { children: /* @__PURE__ */ r(i.Content, {
+		className: t(e.content, d),
+		sideOffset: u,
+		"aria-label": f,
+		"aria-labelledby": p,
+		children: [o, /* @__PURE__ */ n(i.Arrow, { className: e.arrow })]
+	}) })]
+});
+a.displayName = "Popover";
+//#endregion
+export { a as Popover };

package/dist/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { Popover } from './Popover';
+export type { PopoverProps } from './Popover';

package/dist/components/Popover/popover.module.js

@@ -0,0 +1,9 @@
+//#region packages/react/src/components/Popover/popover.module.less
+var e = "_content_hwtib_1", t = "_arrow_hwtib_26", n = {
+	content: e,
+	"stitch-popover-in": "_stitch-popover-in_hwtib_1",
+	"stitch-popover-out": "_stitch-popover-out_hwtib_1",
+	arrow: t
+};
+//#endregion
+export { t as arrow, e as content, n as default };

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+export type ProgressSize = 'small' | 'middle' | 'large';
+/**
+ * 百分比文字位置
+ *  - inside: 在 bar 内部（fill 段内右对齐，跟随 fill；fill 过窄时退到 track 末端）
+ *  - right:  在 bar 右侧
+ *  - top:    在 bar 上方
+ */
+export type ProgressInfoPosition = 'inside' | 'right' | 'top';
+export interface ProgressProps {
+    /** 当前百分比，0–100 */
+    percent: number;
+    /**
+     * 尺寸
+     * @default 'middle'
+     */
+    size?: ProgressSize;
+    /**
+     * 是否显示百分比文字
+     * @default true
+     */
+    showInfo?: boolean;
+    /**
+     * 百分比文字位置
+     * @default 'inside'
+     */
+    infoPosition?: ProgressInfoPosition;
+    /** 自定义文字格式化（默认 `${percent}%`；对齐 Ant v5 `format`） */
+    format?: (percent: number) => React.ReactNode;
+    /**
+     * 进度条 fill 宽度动画时长（秒），0 = 不动画；不影响斜纹滚动
+     * @default 0.6
+     */
+    duration?: number;
+    /** 透传到根元素 */
+    className?: string;
+    /** 透传到根元素 */
+    style?: React.CSSProperties;
+    /** 无可见标题时给 progressbar 一个无障碍标签（WCAG aria-progressbar-name 必需） */
+    'aria-label'?: string;
+    /** 关联外部可见标题的 id */
+    'aria-labelledby'?: string;
+}
+export declare const Progress: React.FC<ProgressProps>;

package/dist/components/Progress/Progress.js

@@ -0,0 +1,55 @@
+import e from "./progress.module.js";
+import { useMemo as t } from "react";
+import n from "clsx";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region packages/react/src/components/Progress/Progress.tsx
+var a = {
+	small: e["size-small"],
+	middle: e["size-middle"],
+	large: e["size-large"]
+}, o = 18, s = ({ percent: s, size: c = "middle", showInfo: l = !0, infoPosition: u = "inside", format: d, duration: f = .6, className: p, style: m, "aria-label": h, "aria-labelledby": g }) => {
+	let _ = t(() => typeof s != "number" || Number.isNaN(s) ? 0 : Math.max(0, Math.min(100, s)), [s]), v = t(() => d ? d(_) : `${Math.round(_)}%`, [d, _]), y = {
+		width: `${_}%`,
+		transitionDuration: `${f}s`
+	}, b = l && u === "inside", x = b && _ >= o, S = n(e.progress, p), C = n(e.track, a[c]), w = n(e.fill, f === 0 && e.noTransition), T = n(e.body, u === "top" ? "" : e.noGap), E = typeof v == "string" ? v : void 0, D = /* @__PURE__ */ i("div", {
+		className: C,
+		children: [/* @__PURE__ */ r("div", {
+			className: w,
+			style: y,
+			children: x && /* @__PURE__ */ r("span", {
+				className: e.infoInside,
+				children: v
+			})
+		}), b && !x && /* @__PURE__ */ r("span", {
+			className: n(e.infoInside, e.infoOutside),
+			children: v
+		})]
+	});
+	return /* @__PURE__ */ r("div", {
+		className: S,
+		style: m,
+		role: "progressbar",
+		"aria-label": h,
+		"aria-labelledby": g,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": Math.round(_),
+		"aria-valuetext": E,
+		children: u === "top" ? /* @__PURE__ */ i("div", {
+			className: T,
+			children: [l && /* @__PURE__ */ r("div", {
+				className: n(e.info, e.top),
+				children: v
+			}), D]
+		}) : /* @__PURE__ */ i("div", {
+			className: e.row,
+			children: [D, l && u === "right" && /* @__PURE__ */ r("div", {
+				className: n(e.info, e.right),
+				children: v
+			})]
+		})
+	});
+};
+s.displayName = "Progress";
+//#endregion
+export { s as Progress };

package/dist/components/Progress/index.d.ts

@@ -0,0 +1,2 @@
+export { Progress } from './Progress';
+export type { ProgressProps, ProgressSize, ProgressInfoPosition, } from './Progress';

package/dist/components/Progress/progress.module.js

@@ -0,0 +1,21 @@
+//#region packages/react/src/components/Progress/progress.module.less
+var e = "_progress_1oxpl_1", t = "_body_1oxpl_11", n = "_noGap_1oxpl_19", r = "_row_1oxpl_22", i = "_info_1oxpl_30", a = "_right_1oxpl_38", o = "_top_1oxpl_42", s = "_track_1oxpl_45", c = "_fill_1oxpl_65", l = "_noTransition_1oxpl_83", u = "_infoInside_1oxpl_94", d = "_infoOutside_1oxpl_107", f = {
+	progress: e,
+	body: t,
+	noGap: n,
+	row: r,
+	info: i,
+	right: a,
+	top: o,
+	track: s,
+	"size-small": "_size-small_1oxpl_55",
+	"size-middle": "_size-middle_1oxpl_59",
+	"size-large": "_size-large_1oxpl_62",
+	fill: c,
+	"stitch-progress-stripe": "_stitch-progress-stripe_1oxpl_1",
+	noTransition: l,
+	infoInside: u,
+	infoOutside: d
+};
+//#endregion
+export { t as body, f as default, c as fill, i as info, u as infoInside, d as infoOutside, n as noGap, l as noTransition, e as progress, a as right, r as row, o as top, s as track };

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+export type RadioSize = 'small' | 'middle' | 'large';
+export interface RadioOption {
+    /** 选项标签 */
+    label: React.ReactNode;
+    /** 选项值 */
+    value: string | number;
+    /** 是否禁用该选项 */
+    disabled?: boolean;
+}
+/**
+ * 单选组（Ant `Radio.Group` 语义）：`options` + **标量** `value` / `defaultValue`
+ * + `onChange(单个值)`。与 Checkbox（多选、值为数组）成对——单选用圆点标记、多选用勾，
+ * 靠**标记**区分而非盒形状。
+ *
+ * 跨-prop 注意事项：
+ * - **受控/非受控双模式**：给 `value` 由父管，只给 `defaultValue` 组件自管。
+ * - **radiogroup 键盘（WAI-ARIA 模式）**：容器 `role="radiogroup"`，每个
+ *   `<input type="radio">` 共享同一 `name`；整组一个 Tab 停靠点（roving tabindex，焦点落
+ *   选中项 / 无选中落首项），方向键 ↑↓←→ 在启用项间移动焦点并**即时选中**，Home/End 跳首尾
+ *   启用项（禁用项自动跳过）；`:focus-visible` 焦点环走 `--stitch-focus-ring`。
+ * - **选中标记走 `<Icon name="dot">`**（实心圆点，装饰 `aria-hidden`），非裸 `<svg>`；点色随
+ *   `--stitch-accent-text`（与填充面成对比）。选中态为纯淡入，无爆闪/勾线动画。
+ * - **圆角复用表单控件档 `--stitch-radius-input`**（与 Checkbox 同源，随主题变）——radio 惯常
+ *   正圆，但组件禁写死圆角，故交由主题的 input 圆角档决定。
+ */
+export interface RadioProps {
+    /** 选中的值（受控） */
+    value?: string | number;
+    /** 默认选中的值（非受控） */
+    defaultValue?: string | number;
+    /** 选项列表 */
+    options: RadioOption[];
+    /** 尺寸 */
+    size?: RadioSize;
+    /** 禁用全部 */
+    disabled?: boolean;
+    /** 布局方向 */
+    direction?: 'horizontal' | 'vertical';
+    /** 变化回调 */
+    onChange?: (value: string | number) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Radio: React.FC<RadioProps>;

package/dist/components/Radio/Radio.js

@@ -0,0 +1,102 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./radio.module.js";
+import { useCallback as n, useEffect as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
+import c from "clsx";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region packages/react/src/components/Radio/Radio.tsx
+var d = {
+	small: 12,
+	middle: 15,
+	large: 19
+}, f = ({ value: f, defaultValue: p, options: m, size: h = "middle", disabled: g = !1, direction: _ = "horizontal", onChange: v, className: y, style: b }) => {
+	let [x, S] = s(p), C = f !== void 0, w = C ? f : x, T = `stitch-radio-${i().replace(/:/g, "")}`, E = o([]), [D, O] = s(() => {
+		let e = m.findIndex((e) => e.value === w);
+		return e >= 0 ? e : 0;
+	});
+	r(() => {
+		let e = m.findIndex((e) => e.value === w);
+		e >= 0 && O(e);
+	}, [w]);
+	let k = a(() => m.map((e, t) => ({
+		opt: e,
+		idx: t
+	})).filter(({ opt: e }) => !g && !e.disabled).map(({ idx: e }) => e), [m, g]), A = a(() => k.indexOf(D), [k, D]), j = n((e, t) => {
+		g || t || (C || S(e), v?.(e));
+	}, [
+		g,
+		C,
+		v
+	]), M = n((e) => {
+		if (k.length === 0) return;
+		let t = -1;
+		switch (e.key) {
+			case "ArrowRight":
+			case "ArrowDown":
+				e.preventDefault(), t = (A + 1) % k.length;
+				break;
+			case "ArrowLeft":
+			case "ArrowUp":
+				e.preventDefault(), t = (A - 1 + k.length) % k.length;
+				break;
+			case "Home":
+				e.preventDefault(), t = 0;
+				break;
+			case "End":
+				e.preventDefault(), t = k.length - 1;
+				break;
+			default: return;
+		}
+		if (t >= 0) {
+			let e = k[t];
+			O(e), j(m[e].value, m[e].disabled), E.current[e]?.focus();
+		}
+	}, [
+		k,
+		A,
+		m,
+		j
+	]);
+	return /* @__PURE__ */ l("div", {
+		role: "radiogroup",
+		className: c(t.radioGroup, t[_], g && t.groupDisabled, y),
+		style: b,
+		onKeyDown: M,
+		children: m.map((n, r) => {
+			let i = w === n.value, a = g || n.disabled, o = r === D && !a, s = `${T}-${r}`;
+			return /* @__PURE__ */ u("label", {
+				className: c(t.radioItem, t[h], {
+					[t.checked]: i,
+					[t.disabled]: a
+				}),
+				children: [/* @__PURE__ */ u("span", {
+					className: t.cbx,
+					children: [/* @__PURE__ */ l("input", {
+						id: s,
+						ref: (e) => {
+							E.current[r] = e;
+						},
+						type: "radio",
+						name: T,
+						checked: i,
+						disabled: a,
+						tabIndex: o ? 0 : -1,
+						onChange: () => j(n.value, n.disabled),
+						onFocus: () => {
+							a || O(r);
+						}
+					}), /* @__PURE__ */ l(e, {
+						name: "dot",
+						size: d[h],
+						className: t.dot
+					})]
+				}), /* @__PURE__ */ l("span", {
+					className: t.label,
+					children: n.label
+				})]
+			}, String(n.value));
+		})
+	});
+};
+f.displayName = "Radio";
+//#endregion
+export { f as Radio };

package/dist/components/Radio/index.d.ts

@@ -0,0 +1,2 @@
+export { Radio } from './Radio';
+export type { RadioProps, RadioOption, RadioSize } from './Radio';

package/dist/components/Radio/radio.module.js

@@ -0,0 +1,17 @@
+//#region packages/react/src/components/Radio/radio.module.less
+var e = "_radioGroup_11jg7_1", t = "_horizontal_11jg7_7", n = "_vertical_11jg7_10", r = "_radioItem_11jg7_14", i = "_small_11jg7_22", a = "_label_11jg7_25", o = "_middle_11jg7_28", s = "_large_11jg7_34", c = "_cbx_11jg7_40", l = "_dot_11jg7_67", u = "_disabled_11jg7_97", d = "_groupDisabled_11jg7_111", f = {
+	radioGroup: e,
+	horizontal: t,
+	vertical: n,
+	radioItem: r,
+	small: i,
+	label: a,
+	middle: o,
+	large: s,
+	cbx: c,
+	dot: l,
+	disabled: u,
+	groupDisabled: d
+};
+//#endregion
+export { c as cbx, f as default, u as disabled, l as dot, d as groupDisabled, t as horizontal, a as label, s as large, o as middle, e as radioGroup, r as radioItem, i as small, n as vertical };

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
+/**
+ * 自定义滚动区（无 Ant 对应）：给内容区套一层样式统一的滚动条，抹平各浏览器原生滚动条的
+ * 视觉差异。**纯样式增强件**——只包一层滚动条外观，不改 `children` 的内容语义、不新增交互，
+ * 使用者仍在 `children` 里放任意可滚动内容、由 `className`/`style` 定容器高度或最大高度。
+ *
+ * 跨-prop 注意事项：
+ * - **高度/尺寸由使用者给**：组件本身不设高度；容器需可溢出才出滚动条，故必须由使用者经
+ *   `style`（如 `{ height }` / `{ maxHeight }`）或 `className` 约束尺寸，否则内容撑开不滚动。
+ * - **`orientation` → 渲哪条滚动条**：`vertical`（默认）只纵向、`horizontal` 只横向、`both`
+ *   纵横两条 + 右下角块（`Corner`）。这是本组件唯一的分支逻辑。
+ * - **溢出才现条**：底层 `type="auto"`——仅当内容在对应方向溢出时才渲出滚动条（贴近原生
+ *   语义），不溢出不占位。
+ * - **Less 皮**：`Scrollbar` 走透明槽、`Thumb` 走 `--stitch-text-muted` 中性中灰（近原生
+ *   手柄）+ hover/拖动加深到 `--stitch-text-secondary`，圆角走 `--stitch-radius-button`；
+ *   状态由底层挂的 `data-state`/
+ *   `data-orientation` 描，组件不自持 state。
+ * - **键盘/焦点/滚动/ARIA** 全归底层原语，组件不重复实现（纯外观层，非新增交互）。
+ */
+export interface ScrollAreaProps {
+    /** 可滚动内容（放进 Viewport，语义原样保留） */
+    children?: React.ReactNode;
+    /**
+     * 滚动方向：决定渲哪条滚动条
+     * @default 'vertical'
+     */
+    orientation?: ScrollAreaOrientation;
+    /** 自定义类名（挂到根容器；配 style 定高度/最大高度） */
+    className?: string;
+    /** 行内样式（挂到根容器；使用者在此定 height / maxHeight 令内容可溢出） */
+    style?: React.CSSProperties;
+}
+export declare const ScrollArea: React.FC<ScrollAreaProps>;

package/dist/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,34 @@
+import e from "./scroll-area.module.js";
+import "react";
+import t from "clsx";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { ScrollArea as i } from "radix-ui";
+//#region packages/react/src/components/ScrollArea/ScrollArea.tsx
+var a = ({ children: a, orientation: o = "vertical", className: s, style: c }) => {
+	let l = o === "vertical" || o === "both", u = o === "horizontal" || o === "both";
+	return /* @__PURE__ */ r(i.Root, {
+		className: t(e.root, s),
+		style: c,
+		type: "auto",
+		children: [
+			/* @__PURE__ */ n(i.Viewport, {
+				className: e.viewport,
+				children: a
+			}),
+			l && /* @__PURE__ */ n(i.Scrollbar, {
+				className: e.scrollbar,
+				orientation: "vertical",
+				children: /* @__PURE__ */ n(i.Thumb, { className: e.thumb })
+			}),
+			u && /* @__PURE__ */ n(i.Scrollbar, {
+				className: e.scrollbar,
+				orientation: "horizontal",
+				children: /* @__PURE__ */ n(i.Thumb, { className: e.thumb })
+			}),
+			o === "both" && /* @__PURE__ */ n(i.Corner, { className: e.corner })
+		]
+	});
+};
+a.displayName = "ScrollArea";
+//#endregion
+export { a as ScrollArea };

package/dist/components/ScrollArea/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollArea } from './ScrollArea';
+export type { ScrollAreaProps, ScrollAreaOrientation } from './ScrollArea';

package/dist/components/ScrollArea/scroll-area.module.js

@@ -0,0 +1,10 @@
+//#region packages/react/src/components/ScrollArea/scroll-area.module.less
+var e = "_root_1mbik_1", t = "_viewport_1mbik_5", n = "_scrollbar_1mbik_10", r = "_thumb_1mbik_28", i = "_corner_1mbik_49", a = {
+	root: e,
+	viewport: t,
+	scrollbar: n,
+	thumb: r,
+	corner: i
+};
+//#endregion
+export { i as corner, a as default, e as root, n as scrollbar, r as thumb, t as viewport };

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+export type SelectSize = 'small' | 'middle' | 'large';
+export interface SelectOption {
+    /** 选项标签 */
+    label: React.ReactNode;
+    /** 选项值 */
+    value: string | number;
+    /** 是否禁用该选项 */
+    disabled?: boolean;
+}
+/**
+ * 单选下拉（Ant `Select` 语义）：`options`（`{label, value, disabled?}`）+ **标量**
+ * `value` / `defaultValue`（`string | number`）+ `onChange(单个值)` + `placeholder` +
+ * `size` + `disabled`。
+ *
+ * 跨-prop 注意事项：
+ * - **受控/非受控双模式**：给 `value` 由父管，只给 `defaultValue` 组件自管。`size`
+ *   （`small`/`middle`/`large`）走 `--stitch-height-*`，与表单控件族对齐。
+ * - **a11y 角色链**：trigger `role="combobox"` + `aria-haspopup="listbox"` + `aria-expanded`
+ *   + `aria-controls`（展开时指向 listbox）+ `aria-activedescendant`（当前高亮项）；浮层
+ *   `role="listbox"`，每项 `role="option"` + `aria-selected`；禁用项 `aria-disabled`。
+ * - **键盘**：闭合时 Enter/Space/↑/↓ 打开；展开时 ↑↓ 在**启用项**间移动高亮（禁用项跳过、首尾
+ *   wrap），Home/End 跳首尾启用项，Enter/Space 选中当前高亮，Esc 关闭并把焦点还给 trigger；
+ *   trigger `:focus-visible` 焦点环走 `--stitch-focus-ring`。
+ * - **图标走 `<Icon>` 非裸 `<svg>`**：箭头 `<Icon name="chevron-down">`（`size="1em"` 跟随字号，
+ *   展开 `rotate(180deg)` + 转 accent 色），选中项尾随 `<Icon name="check">`。
+ * - **标准正下方展开**：浮层在 trigger 正下方展开（`top:100%`，`max-height` + 滚动），非侧向弹出/
+ *   视口翻转定位——这是标准化取舍，保证可预期的下拉手感。
+ */
+export interface SelectProps {
+    /** 选项列表 */
+    options: SelectOption[];
+    /** 选中的值（受控） */
+    value?: string | number;
+    /** 默认选中的值（非受控） */
+    defaultValue?: string | number;
+    /** 值变化回调 */
+    onChange?: (value: string | number) => void;
+    /** 占位提示（未选中时显示） */
+    placeholder?: string;
+    /** 尺寸 */
+    size?: SelectSize;
+    /** 禁用整个选择器 */
+    disabled?: boolean;
+    /** 自定义类名（挂在根节点） */
+    className?: string;
+    /** 自定义样式（挂在根节点） */
+    style?: React.CSSProperties;
+    /** 无可见 label 时的无障碍标签 */
+    'aria-label'?: string;
+    /** 关联外部可见 label 的 id */
+    'aria-labelledby'?: string;
+}
+export declare const Select: React.FC<SelectProps>;

package/dist/components/Select/Select.js

@@ -0,0 +1,118 @@
+import { Icon as e } from "../Icon/Icon.js";
+import t from "./select.module.js";
+import { useCallback as n, useEffect as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
+import c from "clsx";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region packages/react/src/components/Select/Select.tsx
+var d = ({ options: d, value: f, defaultValue: p, onChange: m, placeholder: h = "请选择", size: g = "middle", disabled: _ = !1, className: v, style: y, "aria-label": b, "aria-labelledby": x }) => {
+	let [S, C] = s(p), w = f !== void 0, T = w ? f : S, [E, D] = s(!1), [O, k] = s(null), A = o(null), j = o(null), M = `stitch-select-${i().replace(/:/g, "")}`, N = `${M}-listbox`, P = (e) => `${M}-option-${e}`, F = d.find((e) => e.value === T), I = F ? F.label : h, L = F !== void 0, R = a(() => d.filter((e) => !e.disabled).map((e) => e.value), [d]);
+	r(() => {
+		if (!E) return;
+		let e = (e) => {
+			A.current && !A.current.contains(e.target) && D(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [E]), r(() => {
+		if (E) {
+			let e = R[0] ?? null;
+			k(T != null && R.includes(T) ? T : e);
+		} else k(null);
+	}, [E]);
+	let z = n((e) => {
+		w || C(e), m?.(e), D(!1), j.current?.focus();
+	}, [w, m]), B = (e) => {
+		if (!R.length) return;
+		let t = O == null ? -1 : R.indexOf(O), n = t < 0 ? e === 1 ? 0 : R.length - 1 : (t + e + R.length) % R.length;
+		k(R[n]);
+	};
+	return /* @__PURE__ */ u("div", {
+		ref: A,
+		className: c(t.wrapper, _ && t.disabled, v),
+		style: y,
+		onKeyDown: (e) => {
+			if (_) return;
+			let { key: t } = e;
+			if (!E) {
+				(t === "Enter" || t === " " || t === "ArrowDown" || t === "ArrowUp") && (e.preventDefault(), D(!0));
+				return;
+			}
+			switch (t) {
+				case "Escape":
+					e.preventDefault(), D(!1), j.current?.focus();
+					break;
+				case "ArrowDown":
+					e.preventDefault(), B(1);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), B(-1);
+					break;
+				case "Home":
+					e.preventDefault(), R.length && k(R[0]);
+					break;
+				case "End":
+					e.preventDefault(), R.length && k(R[R.length - 1]);
+					break;
+				case "Enter":
+				case " ": e.preventDefault(), O != null && z(O);
+			}
+		},
+		children: [/* @__PURE__ */ u("div", {
+			ref: j,
+			className: c(t.trigger, t[g], E && t.open),
+			onClick: () => !_ && D((e) => !e),
+			role: "combobox",
+			"aria-haspopup": "listbox",
+			"aria-expanded": E,
+			"aria-controls": E ? N : void 0,
+			"aria-activedescendant": E && O != null ? P(O) : void 0,
+			"aria-disabled": _ || void 0,
+			"aria-label": b,
+			"aria-labelledby": x,
+			tabIndex: _ ? -1 : 0,
+			children: [/* @__PURE__ */ l("span", {
+				className: L ? t.value : t.placeholder,
+				children: I
+			}), /* @__PURE__ */ l(e, {
+				name: "chevron-down",
+				size: "1em",
+				className: c(t.arrow, E && t.arrowOpen)
+			})]
+		}), E && /* @__PURE__ */ l("div", {
+			className: t.dropdown,
+			role: "listbox",
+			id: N,
+			"aria-label": b,
+			"aria-labelledby": x,
+			"aria-activedescendant": O == null ? void 0 : P(O),
+			children: d.map((n) => {
+				let r = T === n.value, i = O === n.value;
+				return /* @__PURE__ */ u("div", {
+					id: P(n.value),
+					role: "option",
+					"aria-selected": r,
+					"aria-disabled": n.disabled || void 0,
+					className: c(t.option, {
+						[t.optionActive]: i,
+						[t.optionSelected]: r,
+						[t.optionDisabled]: n.disabled
+					}),
+					onClick: () => !n.disabled && z(n.value),
+					onMouseEnter: () => {
+						n.disabled || k(n.value);
+					},
+					children: [/* @__PURE__ */ l("span", {
+						className: t.optionLabel,
+						children: n.label
+					}), r && /* @__PURE__ */ l(e, {
+						name: "check",
+						size: "1em",
+						className: t.checkMark
+					})]
+				}, String(n.value));
+			})
+		})]
+	});
+};
+d.displayName = "Select";
+//#endregion
+export { d as Select };

package/dist/components/Select/index.d.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps, SelectOption, SelectSize } from './Select';

package/dist/components/Select/select.module.js

@@ -0,0 +1,24 @@
+//#region packages/react/src/components/Select/select.module.less
+var e = "_wrapper_13o0n_1", t = "_trigger_13o0n_8", n = "_open_13o0n_30", r = "_small_13o0n_33", i = "_middle_13o0n_38", a = "_large_13o0n_43", o = "_value_13o0n_48", s = "_placeholder_13o0n_55", c = "_arrow_13o0n_62", l = "_arrowOpen_13o0n_67", u = "_dropdown_13o0n_71", d = "_dropdownFadeIn_13o0n_1", f = "_option_13o0n_98", p = "_optionLabel_13o0n_111", m = "_optionActive_13o0n_115", h = "_optionSelected_13o0n_118", g = "_checkMark_13o0n_122", _ = "_optionDisabled_13o0n_126", v = "_disabled_13o0n_133", y = {
+	wrapper: e,
+	trigger: t,
+	open: n,
+	small: r,
+	middle: i,
+	large: a,
+	value: o,
+	placeholder: s,
+	arrow: c,
+	arrowOpen: l,
+	dropdown: u,
+	dropdownFadeIn: d,
+	option: f,
+	optionLabel: p,
+	optionActive: m,
+	optionSelected: h,
+	checkMark: g,
+	optionDisabled: _,
+	disabled: v
+};
+//#endregion
+export { c as arrow, l as arrowOpen, g as checkMark, y as default, v as disabled, u as dropdown, d as dropdownFadeIn, a as large, i as middle, n as open, f as option, m as optionActive, _ as optionDisabled, p as optionLabel, h as optionSelected, s as placeholder, r as small, t as trigger, o as value, e as wrapper };