wimui 0.1.0

package/dist/components/form/Textarea/Textarea.d.ts

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+import { FieldIntent, FieldVariant, FieldWidth } from '../../../types/tokens';
+export type TextareaProps = React.ComponentPropsWithoutRef<"textarea"> & {
+    /**
+     * If true, the textarea element will be rendered as its child, merging its props onto that child.
+     */
+    asChild?: boolean;
+    /** Semantic intent of the field (e.g. error state) */
+    intent?: FieldIntent;
+    /** Visual style variant of the field */
+    variant?: FieldVariant;
+    /** Whether to take full width of parent */
+    fullWidth?: boolean;
+    /** Sizing behavior: "fixed" keeps the height, "content" grows with the text */
+    fieldSizing?: "fixed" | "content";
+    /** Field label */
+    label?: string;
+    /** Error message */
+    error?: string;
+    /** Whether to show the required indicator */
+    required?: boolean;
+    /** Layout direction of label and field */
+    layout?: "vertical" | "horizontal";
+    /** Fixed width of the field (width token, CSS value, or number in px) */
+    width?: FieldWidth | string | number;
+};
+/**
+ * Component for accepting multi-line text input.
+ */
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
+    /**
+     * If true, the textarea element will be rendered as its child, merging its props onto that child.
+     */
+    asChild?: boolean;
+    /** Semantic intent of the field (e.g. error state) */
+    intent?: FieldIntent;
+    /** Visual style variant of the field */
+    variant?: FieldVariant;
+    /** Whether to take full width of parent */
+    fullWidth?: boolean;
+    /** Sizing behavior: "fixed" keeps the height, "content" grows with the text */
+    fieldSizing?: "fixed" | "content";
+    /** Field label */
+    label?: string;
+    /** Error message */
+    error?: string;
+    /** Whether to show the required indicator */
+    required?: boolean;
+    /** Layout direction of label and field */
+    layout?: "vertical" | "horizontal";
+    /** Fixed width of the field (width token, CSS value, or number in px) */
+    width?: FieldWidth | string | number;
+} & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/form/Textarea/Textarea.js

@@ -0,0 +1,47 @@
+"use client";
+import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { FieldTemplate as n } from "../FieldTemplate/FieldTemplate.js";
+import r from "./textarea.module.js";
+import i from "react";
+import a from "classnames";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/form/Textarea/Textarea.tsx
+var s = i.forwardRef(({ asChild: s = !1, children: c, intent: l = "default", variant: u = "outline", fullWidth: d = !1, fieldSizing: f = "fixed", className: p, disabled: m, label: h, error: g, required: _, layout: v, id: y, width: b, ...x }, S) => {
+	let C = m, w = g ? "danger" : l, T = i.useId(), E = y || `wim-textarea-${T}`, D = g ? `${E}-error` : void 0, O = h ? `${E}-label` : void 0, k = typeof b == "string" && [
+		"xs",
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	].includes(b), A = b !== void 0 && !k && !d, j = k && !d ? b : void 0, M = j ? r[`width${j.charAt(0).toUpperCase()}${j.slice(1)}`] : void 0;
+	return /* @__PURE__ */ o(n, {
+		label: h,
+		error: g,
+		required: _,
+		layout: v,
+		labelId: O,
+		errorId: D,
+		className: p,
+		children: /* @__PURE__ */ o(s ? e : "textarea", {
+			id: E,
+			ref: S,
+			className: a("wim-textarea", r.root, r[w], C && r.disabled, r[u], d && r.fullWidth, A && r.hasCustomWidth, M, f === "content" && r.fieldSizingContent),
+			style: {
+				...A ? { "--wim-input-width": typeof b == "number" ? `${b}px` : b } : {},
+				...x.style
+			},
+			disabled: C,
+			"aria-invalid": w === "danger",
+			"aria-describedby": D,
+			"aria-labelledby": h ? O : void 0,
+			"aria-required": _,
+			...x,
+			placeholder: x.placeholder,
+			"aria-label": x["aria-label"],
+			children: s ? /* @__PURE__ */ o(t, { children: c }) : c
+		})
+	});
+});
+s.displayName = "Textarea";
+//#endregion
+export { s as Textarea };

package/dist/components/form/Textarea/textarea.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_142tf_15`,t=`_outline_142tf_42`,n=`_ghost_142tf_48`,r=`_danger_142tf_6`,i=`_disabled_142tf_65`,a=`_fullWidth_142tf_75`,o=`_widthXs_142tf_79`,s=`_widthSm_142tf_82`,c=`_widthMd_142tf_85`,l=`_widthLg_142tf_88`,u=`_widthXl_142tf_91`,d=`_hasCustomWidth_142tf_94`,f=`_fieldSizingContent_142tf_98`,p={root:e,outline:t,ghost:n,danger:r,disabled:i,fullWidth:a,widthXs:o,widthSm:s,widthMd:c,widthLg:l,widthXl:u,hasCustomWidth:d,fieldSizingContent:f};exports.danger=r,exports.default=p,exports.disabled=i,exports.fieldSizingContent=f,exports.fullWidth=a,exports.ghost=n,exports.hasCustomWidth=d,exports.outline=t,exports.root=e,exports.widthLg=l,exports.widthMd=c,exports.widthSm=s,exports.widthXl=u,exports.widthXs=o;

package/dist/components/form/Textarea/textarea.module.js

@@ -0,0 +1,19 @@
+"use client";
+//#region src/components/form/Textarea/textarea.module.scss
+var e = "_root_142tf_15", t = "_outline_142tf_42", n = "_ghost_142tf_48", r = "_danger_142tf_6", i = "_disabled_142tf_65", a = "_fullWidth_142tf_75", o = "_widthXs_142tf_79", s = "_widthSm_142tf_82", c = "_widthMd_142tf_85", l = "_widthLg_142tf_88", u = "_widthXl_142tf_91", d = "_hasCustomWidth_142tf_94", f = "_fieldSizingContent_142tf_98", p = {
+	root: e,
+	outline: t,
+	ghost: n,
+	danger: r,
+	disabled: i,
+	fullWidth: a,
+	widthXs: o,
+	widthSm: s,
+	widthMd: c,
+	widthLg: l,
+	widthXl: u,
+	hasCustomWidth: d,
+	fieldSizingContent: f
+};
+//#endregion
+export { r as danger, p as default, i as disabled, f as fieldSizingContent, a as fullWidth, n as ghost, d as hasCustomWidth, t as outline, e as root, l as widthLg, c as widthMd, s as widthSm, u as widthXl, o as widthXs };

package/dist/components/form/ThemeToggle/ThemeToggle.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../icon/monitor.cjs"),r=require("../../../icon/moon.cjs"),i=require("../../../icon/sun.cjs"),a=require("../../media/Icon/Icon.cjs"),o=require("../../../theme.cjs"),s=require("./theme-toggle.module.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d={light:i.default,dark:r.default,system:n.default},f=`wim-theme`,p=e=>e===`light`||e===`dark`||e===`system`,m=c.default.forwardRef(({value:e,defaultValue:n=`system`,onChange:r,modes:i=[`light`,`dark`],variant:m=`icon`,size:h=`md`,storageKey:g=f,applyToDocument:_=!0,labels:v,className:y,asChild:b=!1,children:x,...S},C)=>{let{light:w=`Light`,dark:T=`Dark`,system:E=`System`,toggle:D=`Toggle theme`}=v??{},O={light:w,dark:T,system:E},k=e!==void 0,[A,j]=(0,c.useState)(()=>{if(typeof window<`u`&&g){let e=window.localStorage.getItem(g);if(p(e)&&i.includes(e))return e}return i.includes(n)?n:i[0]}),M=k?e:A;(0,c.useEffect)(()=>{_&&o.setWimTheme(M)},[M,_]);let N=(0,c.useCallback)(e=>{k||j(e),typeof window<`u`&&g&&window.localStorage.setItem(g,e),r?.(e)},[k,g,r]),P=()=>{let e=i[(i.indexOf(M)+1)%i.length];N(e)},F=b?t.Root:`div`;return m===`segmented`?(0,u.jsxs)(F,{ref:C,role:`group`,"aria-label":D,className:(0,l.default)(s.default.segmented,s.default[h],y),...S,children:[i.map(e=>{let t=e===M;return(0,u.jsx)(`button`,{type:`button`,className:(0,l.default)(s.default.segment,t&&s.default.active),"aria-pressed":t,"aria-label":O[e],title:O[e],onClick:()=>N(e),children:(0,u.jsx)(a.Icon,{component:d[e],size:`sm`})},e)}),(0,u.jsx)(t.Slottable,{children:x})]}):(0,u.jsxs)(F,{ref:C,className:(0,l.default)(`wim-theme-toggle`,s.default.root,y),...S,children:[(0,u.jsx)(`button`,{type:`button`,className:(0,l.default)(s.default.iconButton,s.default[h]),"aria-label":`${D} (${O[M]})`,title:O[M],onClick:P,children:(0,u.jsx)(a.Icon,{component:d[M],size:`sm`})}),(0,u.jsx)(t.Slottable,{children:x})]})});m.displayName=`ThemeToggle`,exports.ThemeToggle=m;

package/dist/components/form/ThemeToggle/ThemeToggle.d.ts

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+import { ComponentSizeBasic } from '../../../types/tokens';
+import { WimTheme } from '../../../theme';
+/** Theme mode. "system" follows the OS via `prefers-color-scheme`. */
+export type ThemeMode = WimTheme;
+/** Labels for internationalization. */
+export type ThemeToggleLabels = {
+    /** Label for the light mode */
+    light?: string;
+    /** Label for the dark mode */
+    dark?: string;
+    /** Label for the system (auto) mode */
+    system?: string;
+    /** Accessible label / group label for the control */
+    toggle?: string;
+};
+export interface ThemeToggleProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange"> {
+    /** Selected mode (controlled) */
+    value?: ThemeMode;
+    /** Initially selected mode (uncontrolled) */
+    defaultValue?: ThemeMode;
+    /** Callback when the mode changes */
+    onChange?: (mode: ThemeMode) => void;
+    /** Modes to offer, in cycle order */
+    modes?: ThemeMode[];
+    /** "icon" cycles modes on a single button; "segmented" shows one button per mode */
+    variant?: "icon" | "segmented";
+    /** Size of the control */
+    size?: ComponentSizeBasic;
+    /** localStorage key used to persist the choice; pass null to disable persistence */
+    storageKey?: string | null;
+    /** Whether to apply the selected mode to the document root as `data-theme` */
+    applyToDocument?: boolean;
+    /** Labels for internationalization */
+    labels?: ThemeToggleLabels;
+    /** Additional class names */
+    className?: string;
+    /** Whether to render as a child element. */
+    asChild?: boolean;
+}
+/**
+ * ThemeToggle switches the app between light, dark, and system themes. It writes
+ * `data-theme` to the document root (the attribute the design tokens key off)
+ * and persists the choice to localStorage.
+ *
+ * Prefer wrapping the app in `WimProvider` for theme/density/locale. When both
+ * drive the same document theme, lift state and set `applyToDocument={false}` here.
+ *
+ * Composition Contract:
+ * - Managed by: App consumption
+ * - Scroll lock: No
+ */
+export declare const ThemeToggle: React.ForwardRefExoticComponent<ThemeToggleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/form/ThemeToggle/ThemeToggle.js

@@ -0,0 +1,82 @@
+"use client";
+import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import n from "../../../icon/monitor.js";
+import r from "../../../icon/moon.js";
+import i from "../../../icon/sun.js";
+import { Icon as a } from "../../media/Icon/Icon.js";
+import { setWimTheme as o } from "../../../theme.js";
+import s from "./theme-toggle.module.js";
+import c, { useCallback as l, useEffect as u, useState as d } from "react";
+import f from "classnames";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/form/ThemeToggle/ThemeToggle.tsx
+var h = {
+	light: i,
+	dark: r,
+	system: n
+}, g = "wim-theme", _ = (e) => e === "light" || e === "dark" || e === "system", v = c.forwardRef(({ value: n, defaultValue: r = "system", onChange: i, modes: c = ["light", "dark"], variant: v = "icon", size: y = "md", storageKey: b = g, applyToDocument: x = !0, labels: S, className: C, asChild: w = !1, children: T, ...E }, D) => {
+	let { light: O = "Light", dark: k = "Dark", system: A = "System", toggle: j = "Toggle theme" } = S ?? {}, M = {
+		light: O,
+		dark: k,
+		system: A
+	}, N = n !== void 0, [P, F] = d(() => {
+		if (typeof window < "u" && b) {
+			let e = window.localStorage.getItem(b);
+			if (_(e) && c.includes(e)) return e;
+		}
+		return c.includes(r) ? r : c[0];
+	}), I = N ? n : P;
+	u(() => {
+		x && o(I);
+	}, [I, x]);
+	let L = l((e) => {
+		N || F(e), typeof window < "u" && b && window.localStorage.setItem(b, e), i?.(e);
+	}, [
+		N,
+		b,
+		i
+	]), R = () => {
+		let e = c[(c.indexOf(I) + 1) % c.length];
+		L(e);
+	}, z = w ? e : "div";
+	return v === "segmented" ? /* @__PURE__ */ m(z, {
+		ref: D,
+		role: "group",
+		"aria-label": j,
+		className: f(s.segmented, s[y], C),
+		...E,
+		children: [c.map((e) => {
+			let t = e === I;
+			return /* @__PURE__ */ p("button", {
+				type: "button",
+				className: f(s.segment, t && s.active),
+				"aria-pressed": t,
+				"aria-label": M[e],
+				title: M[e],
+				onClick: () => L(e),
+				children: /* @__PURE__ */ p(a, {
+					component: h[e],
+					size: "sm"
+				})
+			}, e);
+		}), /* @__PURE__ */ p(t, { children: T })]
+	}) : /* @__PURE__ */ m(z, {
+		ref: D,
+		className: f("wim-theme-toggle", s.root, C),
+		...E,
+		children: [/* @__PURE__ */ p("button", {
+			type: "button",
+			className: f(s.iconButton, s[y]),
+			"aria-label": `${j} (${M[I]})`,
+			title: M[I],
+			onClick: R,
+			children: /* @__PURE__ */ p(a, {
+				component: h[I],
+				size: "sm"
+			})
+		}), /* @__PURE__ */ p(t, { children: T })]
+	});
+});
+v.displayName = "ThemeToggle";
+//#endregion
+export { v as ThemeToggle };

package/dist/components/form/ThemeToggle/theme-toggle.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1of3l_4`,t=`_iconButton_1of3l_7`,n=`_segmented_1of3l_30`,r=`_segment_1of3l_30`,i=`_active_1of3l_58`,a=`_sm_1of3l_63`,o=`_lg_1of3l_67`,s={root:e,iconButton:t,segmented:n,segment:r,active:i,sm:a,lg:o};exports.active=i,exports.default=s,exports.iconButton=t,exports.lg=o,exports.root=e,exports.segment=r,exports.segmented=n,exports.sm=a;

package/dist/components/form/ThemeToggle/theme-toggle.module.js

@@ -0,0 +1,13 @@
+"use client";
+//#region src/components/form/ThemeToggle/theme-toggle.module.scss
+var e = "_root_1of3l_4", t = "_iconButton_1of3l_7", n = "_segmented_1of3l_30", r = "_segment_1of3l_30", i = "_active_1of3l_58", a = "_sm_1of3l_63", o = "_lg_1of3l_67", s = {
+	root: e,
+	iconButton: t,
+	segmented: n,
+	segment: r,
+	active: i,
+	sm: a,
+	lg: o
+};
+//#endregion
+export { i as active, s as default, t as iconButton, o as lg, e as root, r as segment, n as segmented, a as sm };

package/dist/components/form/TimePicker/TimePicker.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../hooks/useMergedRef.cjs"),n=require("../Input/input.module.cjs"),r=require("../Input/Input.cjs"),i=require("./time-picker.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=(0,a.forwardRef)(({intent:e=`default`,variant:c=`outline`,fullWidth:l=!1,className:u,disabled:d,allowClear:f=!0,value:p,defaultValue:m,onChange:h,...g},_)=>{let v=p!==void 0,[y,b]=(0,a.useState)(m??``),x=v?p:y,S=(0,a.useRef)(null),C=t.useMergedRef(_,S),w=f&&!!x&&!d,T=w?void 0:`ClockIcon`;return(0,s.jsx)(r.Input,{ref:C,type:`time`,allowClear:w,intent:e,variant:c,fullWidth:l,className:(0,o.default)(`wim-time-picker`,u),inputClassName:(0,o.default)(n.default.root,i.default.input),disabled:d,value:p,defaultValue:m,onChange:e=>{v||b(e.target.value),h?.(e)},rightIcon:T,rightIconColor:d||w?void 0:`primary`,onRightIconClick:w?void 0:()=>{S.current?.showPicker?.()},...g})});c.displayName=`TimePicker`,exports.TimePicker=c;

package/dist/components/form/TimePicker/TimePicker.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { InputProps } from '../../form/Input/Input';
+import { FieldIntent, FieldVariant } from '../../../types/tokens';
+export type TimePickerProps = Omit<InputProps, "type" | "rightIcon"> & {
+    /** Semantic intent of the field (e.g. error state) */
+    intent?: FieldIntent;
+    /** Visual style variant of the field */
+    variant?: FieldVariant;
+    /** Whether to take full width of parent */
+    fullWidth?: boolean;
+    /** Whether to show a clear button when value is present */
+    allowClear?: boolean;
+};
+/**
+ * Component for selecting a time.
+ */
+export declare const TimePicker: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "rightIcon"> & {
+    /** Semantic intent of the field (e.g. error state) */
+    intent?: FieldIntent;
+    /** Visual style variant of the field */
+    variant?: FieldVariant;
+    /** Whether to take full width of parent */
+    fullWidth?: boolean;
+    /** Whether to show a clear button when value is present */
+    allowClear?: boolean;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/components/form/TimePicker/TimePicker.js

@@ -0,0 +1,37 @@
+"use client";
+import { useMergedRef as e } from "../../../hooks/useMergedRef.js";
+import t from "../Input/input.module.js";
+import { Input as n } from "../Input/Input.js";
+import r from "./time-picker.module.js";
+import { forwardRef as i, useRef as a, useState as o } from "react";
+import s from "classnames";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/form/TimePicker/TimePicker.tsx
+var l = i(({ intent: i = "default", variant: l = "outline", fullWidth: u = !1, className: d, disabled: f, allowClear: p = !0, value: m, defaultValue: h, onChange: g, ..._ }, v) => {
+	let y = m !== void 0, [b, x] = o(h ?? ""), S = y ? m : b, C = a(null), w = e(v, C), T = p && !!S && !f, E = T ? void 0 : "ClockIcon";
+	return /* @__PURE__ */ c(n, {
+		ref: w,
+		type: "time",
+		allowClear: T,
+		intent: i,
+		variant: l,
+		fullWidth: u,
+		className: s("wim-time-picker", d),
+		inputClassName: s(t.root, r.input),
+		disabled: f,
+		value: m,
+		defaultValue: h,
+		onChange: (e) => {
+			y || x(e.target.value), g?.(e);
+		},
+		rightIcon: E,
+		rightIconColor: f || T ? void 0 : "primary",
+		onRightIconClick: T ? void 0 : () => {
+			C.current?.showPicker?.();
+		},
+		..._
+	});
+});
+l.displayName = "TimePicker";
+//#endregion
+export { l as TimePicker };

package/dist/components/form/TimePicker/time-picker.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_input_yanjx_2`,t={input:e};exports.default=t,exports.input=e;

package/dist/components/form/TimePicker/time-picker.module.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/components/form/TimePicker/time-picker.module.scss
+var e = "_input_yanjx_2", t = { input: e };
+//#endregion
+export { t as default, e as input };

package/dist/components/form/ToggleGroup/ToggleGroup.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../media/Icon/Icon.cjs"),r=require("../../../hooks/useMergedRef.cjs"),i=require("../FieldTemplate/FieldTemplate.cjs"),a=require("../../_internal/useIndicator.cjs"),o=require("./toggle-group.module.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("classnames");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=(0,s.forwardRef)(({options:e,value:u,defaultValue:d,onChange:f,selectionMode:p=`single`,size:m=`md`,fullWidth:h=!1,className:g,"aria-label":_,"aria-labelledby":v,disabled:y=!1,label:b,error:x,required:S,layout:C=`vertical`,id:w,asChild:T=!1,children:E},D)=>{let O=s.default.useId(),k=w||`wim-toggle-group-${O}`,A=`${k}-label`,j=`${k}-error`,M=u!==void 0,[N,P]=(0,s.useState)(d??(p===`multiple`?[]:``)),F=M?u:N,{containerRef:I,sliderStyle:L,isReady:R}=a.useIndicator({activeSelector:`.${o.default.active}`,dependence:e.length}),z=(0,s.useRef)([]),B=e.findIndex(e=>!e.disabled),[V,H]=(0,s.useState)(()=>{if(p===`single`){let t=M?u:d;if(typeof t==`string`){let n=e.findIndex(e=>!e.disabled&&e.value===t);if(n>=0)return n}}return B>=0?B:0});(0,s.useEffect)(()=>{if(p===`single`&&M&&typeof u==`string`){let t=e.findIndex(e=>!e.disabled&&e.value===u);t>=0&&H(t)}},[u,p,M,e]);let U=e=>{let t;if(p===`multiple`){let n=Array.isArray(F)?F:[];t=n.includes(e)?n.filter(t=>t!==e):[...n,e]}else t=F===e?``:e;M||P(t),f?.(t)},W=e=>p===`multiple`?(Array.isArray(F)?F:[]).includes(e):F===e,G=(t,n)=>{for(let r=1;r<=e.length;r++){let i=(t+n*r+e.length)%e.length;if(!e[i].disabled)return i}return t},K=(t,n)=>{let r=null;if(n.key===`ArrowRight`||n.key===`ArrowDown`)n.preventDefault(),r=G(t,1);else if(n.key===`ArrowLeft`||n.key===`ArrowUp`)n.preventDefault(),r=G(t,-1);else if(n.key===`Home`)n.preventDefault(),r=B>=0?B:null;else if(n.key===`End`){n.preventDefault();for(let t=e.length-1;t>=0;t--)if(!e[t].disabled){r=t;break}}r!==null&&r!==t&&(H(r),z.current[r]?.focus(),p===`single`&&U(e[r].value))},q=p===`single`?`radiogroup`:`toolbar`;return(0,l.jsx)(i.FieldTemplate,{label:b,error:x,required:S,layout:C,labelId:A,htmlFor:`${k}-item-0`,errorId:j,className:g,children:(0,l.jsxs)(T?t.Root:`div`,{ref:r.useMergedRef(I,D),id:k,className:(0,c.default)(`wim-toggle-group`,o.default.root,o.default[m],o.default[p],h&&o.default.fullWidth,R&&o.default.ready,x&&o.default.danger),role:q,"aria-label":_,"aria-labelledby":b?A:v,"aria-orientation":`horizontal`,"aria-invalid":x?!0:void 0,"aria-describedby":x?j:void 0,children:[(0,l.jsx)(`div`,{className:(0,c.default)(o.default.slider,o.default[p],R&&o.default.ready),style:L,"aria-hidden":`true`}),e.map((e,t)=>(0,l.jsxs)(`button`,{id:`${k}-item-${t}`,ref:e=>{z.current[t]=e},type:`button`,className:(0,c.default)(o.default.item,o.default[p],W(e.value)&&o.default.active,!e.label&&e.iconName&&o.default.iconOnly),onClick:()=>{H(t),U(e.value)},onKeyDown:e=>K(t,e),disabled:y||e.disabled,role:p===`single`?`radio`:`button`,"aria-checked":p===`single`?W(e.value):void 0,"aria-pressed":p===`multiple`?W(e.value):void 0,"aria-label":e.label||e.value,tabIndex:!e.disabled&&t===V?0:-1,children:[e.iconName&&(0,l.jsx)(n.Icon,{name:e.iconName,size:m,className:o.default.icon}),e.label&&(0,l.jsx)(`span`,{className:o.default.label,children:e.label})]},e.value)),(0,l.jsx)(t.Slottable,{children:E})]})})});u.displayName=`ToggleGroup`,exports.ToggleGroup=u;

package/dist/components/form/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+import { Icon } from '../../media/Icon/Icon';
+import { ComponentSizeBasic } from '../../../types/tokens';
+export type Option = {
+    label?: string;
+    value: string;
+    iconName?: React.ComponentProps<typeof Icon>["name"];
+    disabled?: boolean;
+};
+type ToggleGroupProps = {
+    /** List of toggle options */
+    options: Option[];
+    /** Selected value(s) (controlled) */
+    value?: string | string[];
+    /** Initially selected value(s) (uncontrolled) */
+    defaultValue?: string | string[];
+    /** Callback when the selection changes */
+    onChange?: (value: string | string[]) => void;
+    /** Whether one or multiple options can be selected */
+    selectionMode?: "single" | "multiple";
+    /** Size of the toggle buttons */
+    size?: ComponentSizeBasic;
+    /** Whether to take full width of parent */
+    fullWidth?: boolean;
+    /** Additional class names */
+    className?: string;
+    /** Whether the group is disabled */
+    disabled?: boolean;
+    /** Group label */
+    label?: string;
+    /** Error message */
+    error?: string;
+    /** Whether to show the required indicator */
+    required?: boolean;
+    /** Layout direction of label and field */
+    layout?: "vertical" | "horizontal";
+    /** Unique ID for the component */
+    id?: string;
+    /**
+     * If true, merge group props onto the child element.
+     */
+    asChild?: boolean;
+    /** Optional children used when asChild is true */
+    children?: React.ReactNode;
+    /** Accessible label when no visible label is provided */
+    "aria-label"?: string;
+    /** ID of the element that labels the group */
+    "aria-labelledby"?: string;
+};
+/**
+ * ToggleGroup component allows users to select one or multiple options from a set of buttons.
+ */
+export declare const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/form/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,122 @@
+"use client";
+import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { Icon as n } from "../../media/Icon/Icon.js";
+import { useMergedRef as r } from "../../../hooks/useMergedRef.js";
+import { FieldTemplate as i } from "../FieldTemplate/FieldTemplate.js";
+import { useIndicator as a } from "../../_internal/useIndicator.js";
+import o from "./toggle-group.module.js";
+import s, { forwardRef as c, useEffect as l, useRef as u, useState as d } from "react";
+import f from "classnames";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/form/ToggleGroup/ToggleGroup.tsx
+var h = c(({ options: c, value: h, defaultValue: g, onChange: _, selectionMode: v = "single", size: y = "md", fullWidth: b = !1, className: x, "aria-label": S, "aria-labelledby": C, disabled: w = !1, label: T, error: E, required: D, layout: O = "vertical", id: k, asChild: A = !1, children: j }, M) => {
+	let N = s.useId(), P = k || `wim-toggle-group-${N}`, F = `${P}-label`, I = `${P}-error`, L = h !== void 0, [R, z] = d(g ?? (v === "multiple" ? [] : "")), B = L ? h : R, { containerRef: V, sliderStyle: H, isReady: U } = a({
+		activeSelector: `.${o.active}`,
+		dependence: c.length
+	}), W = u([]), G = c.findIndex((e) => !e.disabled), [K, q] = d(() => {
+		if (v === "single") {
+			let e = L ? h : g;
+			if (typeof e == "string") {
+				let t = c.findIndex((t) => !t.disabled && t.value === e);
+				if (t >= 0) return t;
+			}
+		}
+		return G >= 0 ? G : 0;
+	});
+	l(() => {
+		if (v === "single" && L && typeof h == "string") {
+			let e = c.findIndex((e) => !e.disabled && e.value === h);
+			e >= 0 && q(e);
+		}
+	}, [
+		h,
+		v,
+		L,
+		c
+	]);
+	let J = (e) => {
+		let t;
+		if (v === "multiple") {
+			let n = Array.isArray(B) ? B : [];
+			t = n.includes(e) ? n.filter((t) => t !== e) : [...n, e];
+		} else t = B === e ? "" : e;
+		L || z(t), _?.(t);
+	}, Y = (e) => v === "multiple" ? (Array.isArray(B) ? B : []).includes(e) : B === e, X = (e, t) => {
+		for (let n = 1; n <= c.length; n++) {
+			let r = (e + t * n + c.length) % c.length;
+			if (!c[r].disabled) return r;
+		}
+		return e;
+	}, Z = (e, t) => {
+		let n = null;
+		if (t.key === "ArrowRight" || t.key === "ArrowDown") t.preventDefault(), n = X(e, 1);
+		else if (t.key === "ArrowLeft" || t.key === "ArrowUp") t.preventDefault(), n = X(e, -1);
+		else if (t.key === "Home") t.preventDefault(), n = G >= 0 ? G : null;
+		else if (t.key === "End") {
+			t.preventDefault();
+			for (let e = c.length - 1; e >= 0; e--) if (!c[e].disabled) {
+				n = e;
+				break;
+			}
+		}
+		n !== null && n !== e && (q(n), W.current[n]?.focus(), v === "single" && J(c[n].value));
+	}, Q = v === "single" ? "radiogroup" : "toolbar";
+	return /* @__PURE__ */ p(i, {
+		label: T,
+		error: E,
+		required: D,
+		layout: O,
+		labelId: F,
+		htmlFor: `${P}-item-0`,
+		errorId: I,
+		className: x,
+		children: /* @__PURE__ */ m(A ? e : "div", {
+			ref: r(V, M),
+			id: P,
+			className: f("wim-toggle-group", o.root, o[y], o[v], b && o.fullWidth, U && o.ready, E && o.danger),
+			role: Q,
+			"aria-label": S,
+			"aria-labelledby": T ? F : C,
+			"aria-orientation": "horizontal",
+			"aria-invalid": E ? !0 : void 0,
+			"aria-describedby": E ? I : void 0,
+			children: [
+				/* @__PURE__ */ p("div", {
+					className: f(o.slider, o[v], U && o.ready),
+					style: H,
+					"aria-hidden": "true"
+				}),
+				c.map((e, t) => /* @__PURE__ */ m("button", {
+					id: `${P}-item-${t}`,
+					ref: (e) => {
+						W.current[t] = e;
+					},
+					type: "button",
+					className: f(o.item, o[v], Y(e.value) && o.active, !e.label && e.iconName && o.iconOnly),
+					onClick: () => {
+						q(t), J(e.value);
+					},
+					onKeyDown: (e) => Z(t, e),
+					disabled: w || e.disabled,
+					role: v === "single" ? "radio" : "button",
+					"aria-checked": v === "single" ? Y(e.value) : void 0,
+					"aria-pressed": v === "multiple" ? Y(e.value) : void 0,
+					"aria-label": e.label || e.value,
+					tabIndex: !e.disabled && t === K ? 0 : -1,
+					children: [e.iconName && /* @__PURE__ */ p(n, {
+						name: e.iconName,
+						size: y,
+						className: o.icon
+					}), e.label && /* @__PURE__ */ p("span", {
+						className: o.label,
+						children: e.label
+					})]
+				}, e.value)),
+				/* @__PURE__ */ p(t, { children: j })
+			]
+		})
+	});
+});
+h.displayName = "ToggleGroup";
+//#endregion
+export { h as ToggleGroup };

package/dist/components/form/ToggleGroup/toggle-group.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1y6wn_22`,t=`_danger_1y6wn_13`,n=`_fullWidth_1y6wn_41`,r=`_item_1y6wn_45`,i=`_slider_1y6wn_48`,a=`_single_1y6wn_63`,o=`_ready_1y6wn_63`,s=`_multiple_1y6wn_66`,c=`_active_1y6wn_100`,l=`_iconOnly_1y6wn_122`,u=`_icon_1y6wn_122`,d=`_sm_1y6wn_138`,f=`_md_1y6wn_146`,p=`_lg_1y6wn_154`,m={root:e,danger:t,fullWidth:n,item:r,slider:i,single:a,ready:o,multiple:s,active:c,iconOnly:l,icon:u,sm:d,md:f,lg:p};exports.active=c,exports.danger=t,exports.default=m,exports.fullWidth=n,exports.icon=u,exports.iconOnly=l,exports.item=r,exports.lg=p,exports.md=f,exports.multiple=s,exports.ready=o,exports.root=e,exports.single=a,exports.slider=i,exports.sm=d;

package/dist/components/form/ToggleGroup/toggle-group.module.js

@@ -0,0 +1,20 @@
+"use client";
+//#region src/components/form/ToggleGroup/toggle-group.module.scss
+var e = "_root_1y6wn_22", t = "_danger_1y6wn_13", n = "_fullWidth_1y6wn_41", r = "_item_1y6wn_45", i = "_slider_1y6wn_48", a = "_single_1y6wn_63", o = "_ready_1y6wn_63", s = "_multiple_1y6wn_66", c = "_active_1y6wn_100", l = "_iconOnly_1y6wn_122", u = "_icon_1y6wn_122", d = "_sm_1y6wn_138", f = "_md_1y6wn_146", p = "_lg_1y6wn_154", m = {
+	root: e,
+	danger: t,
+	fullWidth: n,
+	item: r,
+	slider: i,
+	single: a,
+	ready: o,
+	multiple: s,
+	active: c,
+	iconOnly: l,
+	icon: u,
+	sm: d,
+	md: f,
+	lg: p
+};
+//#endregion
+export { c as active, t as danger, m as default, n as fullWidth, u as icon, l as iconOnly, r as item, p as lg, f as md, s as multiple, o as ready, e as root, a as single, i as slider, d as sm };

package/dist/components/form/Transfer/Transfer.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),r=require("../Button/Button.cjs"),i=require("../../_internal/BaseListItem/BaseListItem.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("../Checkbox/Checkbox.cjs"),s=require("../../data-display/VirtualList/VirtualList.cjs"),c=require("./transfer.module.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("classnames");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=36,p=50,m=({data:e,title:t,listType:n,id:r,disabled:a,selectedKeys:m,focusedKey:h,setFocusedKey:g,onSelect:_,onSelectAll:v,onKeyDown:y,labels:b={},className:x})=>{let{noData:S=`No Data`}=b,C=(0,l.useRef)(null),w=(0,l.useRef)(null),[T,E]=(0,l.useState)(0);(0,l.useEffect)(()=>{let e=C.current;if(!e)return;let t=new ResizeObserver(([e])=>{E(Math.floor(e.contentRect.height))});return t.observe(e),()=>t.disconnect()},[]),(0,l.useEffect)(()=>{if(!h||!w.current||T===0)return;let t=e.findIndex(e=>e.key===h);if(t===-1)return;let n=w.current,r=t*f,i=r+f;r<n.scrollTop?n.scrollTop=r:i>n.scrollTop+T&&(n.scrollTop=i-T)},[h,e,T]);let D=e.filter(e=>!e.disabled).map(e=>e.key),O=m.filter(e=>D.includes(e)),k=D.length>0&&O.length===D.length,A=O.length>0&&O.length<D.length,j=h&&e.some(e=>e.key===h)?`${r}-${n}-option-${h}`:void 0,M=e.length>=p&&T>0,N=(t,o)=>(0,d.jsx)(i.BaseListItem,{id:`${r}-${n}-option-${t.key}`,className:(0,u.default)(c.default.item,h===t.key&&c.default.active),disabled:a||t.disabled,active:h===t.key,onClick:()=>{t.disabled||(g(t.key),_(t.key))},role:`option`,"aria-selected":m.includes(t.key),"aria-disabled":a||t.disabled,"aria-setsize":M?e.length:void 0,"aria-posinset":M?o+1:void 0,icon:(0,d.jsx)(`div`,{className:(0,u.default)(c.default.checkboxVisual,m.includes(t.key)&&c.default.checked,(a||t.disabled)&&c.default.disabled),"aria-hidden":`true`}),children:t.title},t.key),P=typeof t==`string`?t:``;return(0,d.jsxs)(`div`,{className:(0,u.default)(c.default.list,x),children:[(0,d.jsxs)(`div`,{className:c.default.header,children:[(0,d.jsx)(o.Checkbox,{checked:k,indeterminate:A,onChange:()=>v(D,n),disabled:a||D.length===0,children:(0,d.jsx)(`span`,{className:c.default.headerTitle,title:P,children:t})}),(0,d.jsxs)(`span`,{className:c.default.headerCount,children:[O.length,`/`,e.length]})]}),(0,d.jsx)(`div`,{ref:C,className:c.default.body,role:e.length>0?`listbox`:void 0,"aria-multiselectable":e.length>0?`true`:void 0,"aria-label":P,"aria-activedescendant":e.length>0?j:void 0,"aria-disabled":a||void 0,tabIndex:e.length===0?-1:0,onKeyDown:t=>y(t,n,e),onFocus:()=>{if(!h){let t=e.find(e=>!e.disabled);t&&g(t.key)}},style:M?{overflow:`hidden`,padding:0}:void 0,children:e.length===0?(0,d.jsx)(`div`,{className:c.default.empty,"aria-live":`polite`,children:S}):M?(0,d.jsx)(s.VirtualList,{items:e,itemHeight:f,height:T,renderItem:N,itemRole:`none`,ref:w,role:`presentation`}):e.map((e,t)=>N(e,t))})]})},h=({dataSource:e=[],targetKeys:i,onChange:o,titles:s=[`Source`,`Target`],className:f,style:p,disabled:h=!1,label:g,error:_,required:v,layout:y=`vertical`,labels:b={}})=>{let{t:x}=t.useWimTranslation(`form`),{moveToTarget:S=x(`transfer.move_to_target`),moveToSource:C=x(`transfer.move_to_source`),statusMovedToTarget:w=e=>x(`transfer.status_moved_to_target`,{count:e}),statusMovedToSource:T=e=>x(`transfer.status_moved_to_source`,{count:e})}=b,[E,D]=(0,l.useState)([]),[O,k]=(0,l.useState)(i||[]),A=`wim-transfer-${(0,l.useId)()}`,j=g?`${A}-label`:void 0,M=_?`${A}-error`:void 0,N=i!==void 0&&!!o,P=N?i:O,F=(0,l.useMemo)(()=>e.filter(e=>!P.includes(e.key)),[e,P]),I=(0,l.useMemo)(()=>e.filter(e=>P.includes(e.key)),[e,P]),[L,R]=(0,l.useState)(null),[z,B]=(0,l.useState)(null),[V,H]=(0,l.useState)(``),U=(0,l.useRef)(null);L&&!F.some(e=>e.key===L)&&R(null),z&&!I.some(e=>e.key===z)&&B(null);let W=e=>{h||D(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},G=(e,t)=>{if(h)return;let n=e;n.every(e=>E.includes(e))?D(e=>e.filter(e=>!n.includes(e))):D(e=>[...new Set([...e,...n])])},K=e=>{if(h)return;let t=e===`toRight`?F.map(e=>e.key):I.map(e=>e.key),n=E.filter(e=>t.includes(e));if(n.length===0)return;let r=e===`toRight`?[...P,...n]:P.filter(e=>!n.includes(e));N||k(r),o&&o(r,e,n),D(e=>e.filter(e=>!n.includes(e)));let i=e===`toRight`?w(n.length):T(n.length);U.current&&clearTimeout(U.current),H(``),U.current=setTimeout(()=>H(i),50)},q=(e,t,n)=>{let r=e.filter(e=>!e.disabled);if(r.length===0)return null;if(t===null)return n===1?r[0].key:r[r.length-1].key;let i=r.findIndex(e=>e.key===t);return i===-1?r[0].key:r[(i+n+r.length)%r.length].key},J=(e,t,n)=>{if(h)return;let r=t===`source`?L:z,i=t===`source`?R:B;if(e.key===`ArrowDown`)e.preventDefault(),i(q(n,r,1));else if(e.key===`ArrowUp`)e.preventDefault(),i(q(n,r,-1));else if(e.key===`Home`){e.preventDefault();let t=n.find(e=>!e.disabled);t&&i(t.key)}else if(e.key===`End`){e.preventDefault();let t=[...n].reverse().find(e=>!e.disabled);t&&i(t.key)}else if(e.key===` `){e.preventDefault();let t=n.find(e=>e.key===r);t&&!t.disabled&&W(t.key)}else e.key===`Enter`&&(e.preventDefault(),K(t===`source`?`toRight`:`toLeft`))},Y=E.filter(e=>F.some(t=>t.key===e)).length===0,X=E.filter(e=>I.some(t=>t.key===e)).length===0;return(0,d.jsx)(a.FieldTemplate,{label:g,error:_,required:v,layout:y,labelId:j,errorId:M,className:f,children:(0,d.jsxs)(`div`,{className:(0,u.default)(c.default.container,`wim-transfer`),children:[(0,d.jsx)(n.VisuallyHidden,{"aria-live":`polite`,"aria-atomic":`true`,children:V}),(0,d.jsxs)(`div`,{className:(0,u.default)(c.default.root,h&&c.default.disabled),style:p,role:`group`,"aria-labelledby":g?j:void 0,"aria-describedby":M,children:[(0,d.jsx)(m,{className:`wim-transfer__list`,data:F,title:s[0],listType:`source`,id:A,disabled:h,selectedKeys:E,focusedKey:L,setFocusedKey:R,onSelect:W,onSelectAll:G,onKeyDown:J,labels:b}),(0,d.jsxs)(`div`,{className:(0,u.default)(c.default.operation,`wim-transfer__operation`),children:[(0,d.jsx)(r.Button,{variant:`outline`,size:`sm`,className:c.default.button,onClick:()=>K(`toRight`),disabled:h||Y,icon:`ChevronRightIcon`,"aria-label":S}),(0,d.jsx)(r.Button,{variant:`outline`,size:`sm`,className:c.default.button,onClick:()=>K(`toLeft`),disabled:h||X,icon:`ChevronLeftIcon`,"aria-label":C})]}),(0,d.jsx)(m,{className:`wim-transfer__list`,data:I,title:s[1],listType:`target`,id:A,disabled:h,selectedKeys:E,focusedKey:z,setFocusedKey:B,onSelect:W,onSelectAll:G,onKeyDown:J,labels:b})]})]})})};exports.Transfer=h;

package/dist/components/form/Transfer/Transfer.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+export type TransferLabels = {
+    noData?: React.ReactNode;
+    moveToTarget?: string;
+    moveToSource?: string;
+    statusMovedToTarget?: (count: number) => string;
+    statusMovedToSource?: (count: number) => string;
+};
+export type TransferItem = {
+    key: string;
+    title: React.ReactNode;
+    description?: string;
+    disabled?: boolean;
+};
+export type TransferProps = {
+    /** All items shown across the two lists */
+    dataSource: TransferItem[];
+    /** Keys of the items in the target (right) list */
+    targetKeys?: string[];
+    /** Callback when items are moved between the lists */
+    onChange?: (targetKeys: string[], direction: "toLeft" | "toRight", moveKeys: string[]) => void;
+    /** Titles of the source and target lists */
+    titles?: [React.ReactNode, React.ReactNode];
+    /** Additional class names */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Field label */
+    label?: React.ReactNode;
+    /** Error message */
+    error?: string;
+    /** Whether to show the required indicator */
+    required?: boolean;
+    /** Layout direction of label and field */
+    layout?: "vertical" | "horizontal";
+    /** Labels for internationalization */
+    labels?: TransferLabels;
+};
+/**
+ * 2つのカラム間でアイテムを移動させて選択を行うためのコンポーネント。
+ */
+export declare const Transfer: ({ dataSource, targetKeys, onChange, titles, className, style, disabled, label, error, required, layout, labels, }: TransferProps) => React.JSX.Element;