wimui 0.58.0 → 0.59.0

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

@@ -68,6 +68,12 @@ export interface QueryBuilderProps {
      * Labels for internationalization
      */
     labels?: QueryBuilderLabels;
+    /** Accessible name for the query builder region. Takes precedence over `labels.regionAriaLabel`. */
+    "aria-label"?: string;
+    /** ID of the element that labels the query builder region. Takes precedence over `aria-label`. */
+    "aria-labelledby"?: string;
+    /** ID of the element that describes the query builder region. */
+    "aria-describedby"?: string;
 }
 /**
  * 演算子の語彙。**利用者が `QueryRule.operator` に渡すのは `value`（記号）**で、
@@ -167,5 +173,5 @@ export type QueryOperator = (typeof DEFAULT_OPERATORS)[QueryFieldType][number]["
 /**
  * 複雑な検索条件をネスト状に組み立てるためのクエリビルダーコンポーネント。
  */
-export declare const QueryBuilder: ({ fields, query, defaultQuery, onChange, maxDepth, className, id: customId, labels, }: QueryBuilderProps) => React.JSX.Element;
+export declare const QueryBuilder: ({ fields, query, defaultQuery, onChange, maxDepth, className, id: customId, labels, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: QueryBuilderProps) => React.JSX.Element;
 export {};

package/dist/components/form/QueryBuilder/QueryBuilder.js

@@ -4,18 +4,18 @@ import { componentsNs as t } from "../../../i18n/generated/components.js";
 import { Button as n } from "../Button/Button.js";
 import { Input as r } from "../Input/Input.js";
 import { DatePicker as i } from "../DatePicker/DatePicker.js";
-import { NumberInput as a } from "../NumberInput/NumberInput.js";
-import { SegmentedControl as o } from "../SegmentedControl/SegmentedControl.js";
-import { Select as s } from "../Select/Select.js";
-import { Switch as c } from "../Switch/Switch.js";
-import { IconButton as l } from "../IconButton/IconButton.js";
-import u from "./querybuilder.module.js";
-import { warnUnknownOperator as d } from "./warn-unknown-operator.js";
-import { useCallback as f, useId as p, useRef as m, useState as h } from "react";
-import g from "classnames";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { NumberInput as ee } from "../NumberInput/NumberInput.js";
+import { SegmentedControl as a } from "../SegmentedControl/SegmentedControl.js";
+import { Select as o } from "../Select/Select.js";
+import { Switch as s } from "../Switch/Switch.js";
+import { IconButton as c } from "../IconButton/IconButton.js";
+import l from "./querybuilder.module.js";
+import { warnUnknownOperator as u } from "./warn-unknown-operator.js";
+import { useCallback as d, useId as f, useRef as p, useState as m } from "react";
+import h from "classnames";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/form/QueryBuilder/QueryBuilder.tsx
-var y = 0, b = () => typeof window < "u" && window.__VRT__ ? (y += 1, `vrt-id-${y}`) : Math.random().toString(36).substring(2, 11), x = {
+var v = 0, y = () => typeof window < "u" && window.__VRT__ ? (v += 1, `vrt-id-${v}`) : Math.random().toString(36).substring(2, 11), b = {
 	string: [
 		{
 			value: "=",
@@ -132,19 +132,19 @@ var y = 0, b = () => typeof window < "u" && window.__VRT__ ? (y += 1, `vrt-id-${
 			key: "is_not_null"
 		}
 	]
-}, S = ({ fields: y, query: S, defaultQuery: C, onChange: w, maxDepth: ee = 3, className: te, id: ne, labels: T = {} }) => {
-	let { t: E } = e(t), { ruleAdded: D = E("query.builder.rule_added"), groupAdded: O = E("query.builder.group_added"), removed: k = E("query.builder.removed"), ruleAriaLabel: A = E("query.builder.rule"), fieldAriaLabel: j = E("query.builder.field"), operatorAriaLabel: M = E("query.builder.operator"), valueAriaLabel: N = E("query.builder.value"), trueLabel: P = E("query.builder.true"), falseLabel: F = E("query.builder.false"), removeRuleAriaLabel: I = E("query.builder.remove_rule"), removeGroupAriaLabel: L = E("query.builder.remove_group"), addRuleLabel: R = E("query.builder.add_rule"), addGroupLabel: z = E("query.builder.add_group"), regionAriaLabel: B = E("query.builder.region_label"), combinatorAriaLabel: V = E("query.builder.combinator"), operators: H = {} } = T, U = p(), W = ne || `wim-qb-${U}`, G = m(null), [K, q] = h(C || {
-		id: b(),
+}, x = ({ fields: v, query: x, defaultQuery: S, onChange: C, maxDepth: te = 3, className: ne, id: re, labels: ie = {}, "aria-label": w, "aria-labelledby": T, "aria-describedby": E }) => {
+	let { t: D } = e(t), { ruleAdded: O = D("query.builder.rule_added"), groupAdded: k = D("query.builder.group_added"), removed: A = D("query.builder.removed"), ruleAriaLabel: j = D("query.builder.rule"), fieldAriaLabel: M = D("query.builder.field"), operatorAriaLabel: N = D("query.builder.operator"), valueAriaLabel: P = D("query.builder.value"), trueLabel: F = D("query.builder.true"), falseLabel: I = D("query.builder.false"), removeRuleAriaLabel: L = D("query.builder.remove_rule"), removeGroupAriaLabel: R = D("query.builder.remove_group"), addRuleLabel: z = D("query.builder.add_rule"), addGroupLabel: ae = D("query.builder.add_group"), regionAriaLabel: B = D("query.builder.region_label"), combinatorAriaLabel: V = D("query.builder.combinator"), operators: H = {} } = ie, U = f(), W = re || `wim-qb-${U}`, G = p(null), [K, q] = m(S || {
+		id: y(),
 		combinator: "and",
 		not: !1,
 		rules: []
-	}), J = S === void 0 ? K : S, Y = f((e) => {
+	}), J = x === void 0 ? K : x, Y = d((e) => {
 		G.current && (G.current.textContent = "", setTimeout(() => {
 			G.current && (G.current.textContent = e);
 		}, 50));
-	}, []), X = f((e) => {
-		S === void 0 && q(e), w?.(e);
-	}, [S, w]), Z = (e, t) => {
+	}, []), X = d((e) => {
+		x === void 0 && q(e), C?.(e);
+	}, [x, C]), Z = (e, t) => {
 		let n = (r) => r.id === e ? {
 			...r,
 			...t
@@ -156,9 +156,9 @@ var y = 0, b = () => typeof window < "u" && window.__VRT__ ? (y += 1, `vrt-id-${
 			} : "rules" in r ? n(r) : r)
 		};
 		X(n(J));
-	}, re = (e) => {
-		let t = y[0], n = {
-			id: b(),
+	}, oe = (e) => {
+		let t = v[0], n = {
+			id: y(),
 			field: t?.name || "",
 			operator: "=",
 			value: t?.type !== "boolean" && ""
@@ -169,10 +169,10 @@ var y = 0, b = () => typeof window < "u" && window.__VRT__ ? (y += 1, `vrt-id-${
 			...t,
 			rules: t.rules.map((e) => "rules" in e ? r(e) : e)
 		};
-		X(r(J)), Y(D);
-	}, ie = (e) => {
+		X(r(J)), Y(O);
+	}, se = (e) => {
 		let t = {
-			id: b(),
+			id: y(),
 			combinator: "and",
 			not: !1,
 			rules: []
@@ -183,25 +183,25 @@ var y = 0, b = () => typeof window < "u" && window.__VRT__ ? (y += 1, `vrt-id-${
 			...r,
 			rules: r.rules.map((e) => "rules" in e ? n(e) : e)
 		};
-		X(n(J)), Y(O);
+		X(n(J)), Y(k);
 	}, Q = (e) => {
 		let t = (n) => ({
 			...n,
 			rules: n.rules.filter((t) => t.id !== e).map((e) => "rules" in e ? t(e) : e)
 		});
-		X(t(J)), Y(k);
+		X(t(J)), Y(A);
 	}, $ = (e, t, r) => {
 		let i = `${e.combinator.toUpperCase()} group`;
-		return /* @__PURE__ */ v("div", {
+		return /* @__PURE__ */ _("div", {
 			role: "group",
 			"aria-label": i,
-			className: g(u.group, t > 0 && u.nested, r && u.excluded),
+			className: h(l.group, t > 0 && l.nested, r && l.excluded),
 			children: [
-				/* @__PURE__ */ v("div", {
-					className: u.groupHeader,
-					children: [/* @__PURE__ */ v("div", {
-						className: u.groupHeaderLeft,
-						children: [/* @__PURE__ */ _(o, {
+				/* @__PURE__ */ _("div", {
+					className: l.groupHeader,
+					children: [/* @__PURE__ */ _("div", {
+						className: l.groupHeaderLeft,
+						children: [/* @__PURE__ */ g(a, {
 							size: "md",
 							options: [{
 								label: "AND",
@@ -214,160 +214,162 @@ var y = 0, b = () => typeof window < "u" && window.__VRT__ ? (y += 1, `vrt-id-${
 							onChange: (t) => Z(e.id, { combinator: t }),
 							"aria-label": V,
 							styles: {
-								root: u.segmentedControl,
-								item: u.segmentedControlItem,
-								slider: u.segmentedControlSlider
+								root: l.segmentedControl,
+								item: l.segmentedControlItem,
+								slider: l.segmentedControlSlider
 							}
-						}), /* @__PURE__ */ _(c, {
+						}), /* @__PURE__ */ g(s, {
 							size: "md",
 							checked: e.not,
 							onChange: (t) => Z(e.id, { not: t.target.checked }),
 							children: "NOT"
 						})]
-					}), t > 0 && /* @__PURE__ */ _(l, {
+					}), t > 0 && /* @__PURE__ */ g(c, {
 						iconName: "TrashIcon",
-						"aria-label": L,
+						"aria-label": R,
 						variant: "ghost",
 						size: "md",
 						intent: "danger",
 						onClick: () => Q(e.id),
-						className: u.removeGroup
+						className: l.removeGroup
 					})]
 				}),
-				/* @__PURE__ */ _("div", {
-					className: u.ruleList,
-					children: e.rules.map((e) => "rules" in e ? $(e, t + 1, r) : ae(e))
+				/* @__PURE__ */ g("div", {
+					className: l.ruleList,
+					children: e.rules.map((e) => "rules" in e ? $(e, t + 1, r) : ce(e))
 				}),
-				/* @__PURE__ */ v("div", {
-					className: u.groupActions,
-					children: [/* @__PURE__ */ _(n, {
+				/* @__PURE__ */ _("div", {
+					className: l.groupActions,
+					children: [/* @__PURE__ */ g(n, {
 						size: "md",
 						variant: "ghost",
 						icon: "PlusIcon",
-						onClick: () => re(e.id),
-						children: R
-					}), t < ee && /* @__PURE__ */ _(n, {
+						onClick: () => oe(e.id),
+						children: z
+					}), t < te && /* @__PURE__ */ g(n, {
 						size: "md",
 						variant: "ghost",
 						icon: "PlusIcon",
-						onClick: () => ie(e.id),
-						children: z
+						onClick: () => se(e.id),
+						children: ae
 					})]
 				})
 			]
 		}, e.id);
-	}, ae = (e) => {
-		let t = y.find((t) => t.name === e.field)?.type || "string", n = x[t].map((e) => ({
+	}, ce = (e) => {
+		let t = v.find((t) => t.name === e.field)?.type || "string", n = b[t].map((e) => ({
 			...e,
-			label: H[e.key] || E(`query.builder.operators.${e.key}`)
-		})), o = (t) => {
-			let n = y.find((e) => e.name === t);
+			label: H[e.key] || D(`query.builder.operators.${e.key}`)
+		})), a = (t) => {
+			let n = v.find((e) => e.name === t);
 			Z(e.id, {
 				field: t,
 				operator: "=",
 				value: n?.type !== "boolean" && ""
 			});
 		};
-		n.some((t) => t.value === e.operator) || d(e.operator, t, n.map((e) => e.value));
-		let c = e.operator === "is_null" || e.operator === "is_not_null";
-		return /* @__PURE__ */ _("div", {
-			className: u.rule,
+		n.some((t) => t.value === e.operator) || u(e.operator, t, n.map((e) => e.value));
+		let s = e.operator === "is_null" || e.operator === "is_not_null";
+		return /* @__PURE__ */ g("div", {
+			className: l.rule,
 			role: "group",
-			"aria-label": A,
-			children: /* @__PURE__ */ v("div", {
-				className: u.ruleFields,
+			"aria-label": j,
+			children: /* @__PURE__ */ _("div", {
+				className: l.ruleFields,
 				children: [
-					/* @__PURE__ */ _(s, {
-						className: u.field,
-						options: y.map((e) => ({
+					/* @__PURE__ */ g(o, {
+						className: l.field,
+						options: v.map((e) => ({
 							label: e.label,
 							value: e.name
 						})),
 						value: e.field,
-						onChange: o,
-						"aria-label": j,
+						onChange: a,
+						"aria-label": M,
 						fullWidth: !0,
 						styles: {
-							root: u.select,
-							trigger: u.selectTrigger,
-							inputBase: { root: u.inputBase }
+							root: l.select,
+							trigger: l.selectTrigger,
+							inputBase: { root: l.inputBase }
 						}
 					}),
-					/* @__PURE__ */ _(s, {
-						className: u.operator,
+					/* @__PURE__ */ g(o, {
+						className: l.operator,
 						options: n.map((e) => ({
 							label: e.label,
 							value: e.value
 						})),
 						value: e.operator,
 						onChange: (t) => Z(e.id, { operator: t }),
-						"aria-label": M,
+						"aria-label": N,
 						fullWidth: !0,
 						styles: {
-							root: u.select,
-							trigger: u.selectTrigger,
-							inputBase: { root: u.inputBase }
+							root: l.select,
+							trigger: l.selectTrigger,
+							inputBase: { root: l.inputBase }
 						}
 					}),
-					!c && /* @__PURE__ */ _("div", {
-						className: u.value,
-						children: t === "number" ? /* @__PURE__ */ _(a, {
+					!s && /* @__PURE__ */ g("div", {
+						className: l.value,
+						children: t === "number" ? /* @__PURE__ */ g(ee, {
 							value: typeof e.value == "boolean" ? void 0 : e.value ?? void 0,
 							onChange: (t) => Z(e.id, { value: t.target.value }),
-							"aria-label": N
-						}) : t === "date" ? /* @__PURE__ */ _(i, {
+							"aria-label": P
+						}) : t === "date" ? /* @__PURE__ */ g(i, {
 							value: typeof e.value == "string" || typeof e.value == "number" ? new Date(e.value) : void 0,
 							onChange: (t) => Z(e.id, { value: t ? t.toISOString() : "" }),
-							"aria-label": N
-						}) : t === "boolean" ? /* @__PURE__ */ _(s, {
+							"aria-label": P
+						}) : t === "boolean" ? /* @__PURE__ */ g(o, {
 							options: [{
-								label: P,
+								label: F,
 								value: "true"
 							}, {
-								label: F,
+								label: I,
 								value: "false"
 							}],
 							value: String(e.value),
 							onChange: (t) => Z(e.id, { value: t === "true" }),
-							"aria-label": N,
+							"aria-label": P,
 							fullWidth: !0,
 							styles: {
-								root: u.select,
-								trigger: u.selectTrigger,
-								inputBase: { root: u.inputBase }
+								root: l.select,
+								trigger: l.selectTrigger,
+								inputBase: { root: l.inputBase }
 							}
-						}) : /* @__PURE__ */ _(r, {
+						}) : /* @__PURE__ */ g(r, {
 							value: typeof e.value == "boolean" ? void 0 : e.value ?? void 0,
 							onChange: (t) => Z(e.id, { value: t.target.value }),
-							"aria-label": N,
-							styles: { root: u.inputBase }
+							"aria-label": P,
+							styles: { root: l.inputBase }
 						})
 					}),
-					/* @__PURE__ */ _(l, {
+					/* @__PURE__ */ g(c, {
 						iconName: "TrashIcon",
-						"aria-label": I,
+						"aria-label": L,
 						variant: "ghost",
 						size: "md",
 						intent: "danger",
 						onClick: () => Q(e.id),
-						className: u.removeRule
+						className: l.removeRule
 					})
 				]
 			})
 		}, e.id);
 	};
-	return /* @__PURE__ */ v("div", {
+	return /* @__PURE__ */ _("div", {
 		id: W,
 		role: "region",
-		"aria-label": B,
-		className: g("wim-query-builder", u.root, te),
-		children: [/* @__PURE__ */ _("div", {
+		"aria-label": T ? void 0 : w ?? B,
+		"aria-labelledby": T,
+		"aria-describedby": E,
+		className: h("wim-query-builder", l.root, ne),
+		children: [/* @__PURE__ */ g("div", {
 			ref: G,
 			"aria-live": "polite",
 			"aria-atomic": "true",
-			className: u.srOnly
+			className: l.srOnly
 		}), $(J, 0, !1)]
 	});
 };
 //#endregion
-export { S as QueryBuilder };
+export { x as QueryBuilder };

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

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

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

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

package/dist/components/media/ImageCompare/ImageCompare.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../../icon/chevron-left.cjs"),i=require("../../../icon/chevron-right.cjs"),a=require("../Icon/Icon.cjs"),o=require("./image-compare.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=e=>Math.max(0,Math.min(100,e)),d=s.default.forwardRef(({before:e,after:d,beforeAlt:f=``,afterAlt:p=``,beforeLabel:m,afterLabel:h,defaultPosition:g=50,position:_,onPositionChange:v,orientation:y=`horizontal`,width:b,height:x,radius:S=`md`,labels:C,className:w,...T},E)=>{let{t:D}=t.useWimTranslation(n.commonNs),{handleAriaLabel:O=D(`imageCompare.handle`)}=C??{},k=_!==void 0,[A,j]=(0,s.useState)(u(g)),M=u(k?_:A),N=y===`vertical`,P=(0,s.useRef)(null),F=(0,s.useRef)(!1),I=(0,s.useCallback)(e=>{P.current=e,typeof E==`function`?E(e):E&&(E.current=e)},[E]),L=(0,s.useCallback)(e=>{let t=u(e);k||j(t),v?.(t)},[k,v]),R=(0,s.useCallback)((e,t)=>{let n=P.current?.getBoundingClientRect();if(!n)return;let r=N?(t-n.top)/n.height*100:(e-n.left)/n.width*100;L(r)},[N,L]),z=e=>{F.current=!0,e.currentTarget.setPointerCapture(e.pointerId),R(e.clientX,e.clientY)},B=e=>{F.current&&R(e.clientX,e.clientY)},V=e=>{F.current=!1,e.currentTarget.releasePointerCapture?.(e.pointerId)},H=e=>{let t=e.shiftKey?10:2,n=N?`ArrowUp`:`ArrowLeft`,r=N?`ArrowDown`:`ArrowRight`;e.key===n?(e.preventDefault(),L(M-t)):e.key===r?(e.preventDefault(),L(M+t)):e.key===`Home`?(e.preventDefault(),L(0)):e.key===`End`&&(e.preventDefault(),L(100))},U=N?{clipPath:`inset(0 0 ${100-M}% 0)`}:{clipPath:`inset(0 ${100-M}% 0 0)`},W=N?{top:`${M}%`}:{left:`${M}%`};return(0,l.jsxs)(`div`,{ref:I,className:(0,c.default)(`wim-image-compare`,o.default.root,N&&o.default.vertical,o.default[`radius-${S}`],w),style:{width:b,height:x},onPointerDown:z,onPointerMove:B,onPointerUp:V,...T,children:[(0,l.jsx)(`img`,{className:o.default.image,src:d,alt:p,draggable:!1}),h&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,o.default.afterLabel),children:h}),(0,l.jsxs)(`div`,{className:o.default.beforeLayer,style:U,children:[(0,l.jsx)(`img`,{className:o.default.image,src:e,alt:f,draggable:!1}),m&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,o.default.beforeLabel),children:m})]}),(0,l.jsxs)(`div`,{className:o.default.divider,style:W,children:[(0,l.jsx)(`span`,{className:o.default.line,"aria-hidden":`true`}),(0,l.jsxs)(`button`,{type:`button`,className:o.default.handle,role:`slider`,"aria-label":O,"aria-orientation":y,"aria-valuenow":Math.round(M),"aria-valuemin":0,"aria-valuemax":100,onKeyDown:H,onPointerDown:z,children:[(0,l.jsx)(a.Icon,{component:r.default,size:`sm`,className:o.default.arrow}),(0,l.jsx)(a.Icon,{component:i.default,size:`sm`,className:o.default.arrow})]})]})]})});d.displayName=`ImageCompare`,exports.ImageCompare=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../../icon/chevron-left.cjs"),i=require("../../../icon/chevron-right.cjs"),a=require("../Icon/Icon.cjs"),o=require("./image-compare.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=e=>Math.max(0,Math.min(100,e)),d=s.default.forwardRef(({before:e,after:d,beforeAlt:f=``,afterAlt:p=``,beforeLabel:m,afterLabel:h,defaultPosition:g=50,position:_,onPositionChange:v,orientation:y=`horizontal`,width:b,height:x,radius:S=`md`,labels:C,className:w,"aria-label":T,"aria-labelledby":E,"aria-describedby":D,...O},k)=>{let{t:A}=t.useWimTranslation(n.commonNs),{handleAriaLabel:j=A(`imageCompare.handle`)}=C??{},M=_!==void 0,[N,P]=(0,s.useState)(u(g)),F=u(M?_:N),I=y===`vertical`,L=(0,s.useRef)(null),R=(0,s.useRef)(!1),z=(0,s.useCallback)(e=>{L.current=e,typeof k==`function`?k(e):k&&(k.current=e)},[k]),B=(0,s.useCallback)(e=>{let t=u(e);M||P(t),v?.(t)},[M,v]),V=(0,s.useCallback)((e,t)=>{let n=L.current?.getBoundingClientRect();if(!n)return;let r=I?(t-n.top)/n.height*100:(e-n.left)/n.width*100;B(r)},[I,B]),H=e=>{R.current=!0,e.currentTarget.setPointerCapture(e.pointerId),V(e.clientX,e.clientY)},U=e=>{R.current&&V(e.clientX,e.clientY)},W=e=>{R.current=!1,e.currentTarget.releasePointerCapture?.(e.pointerId)},G=e=>{let t=e.shiftKey?10:2,n=I?`ArrowUp`:`ArrowLeft`,r=I?`ArrowDown`:`ArrowRight`;e.key===n?(e.preventDefault(),B(F-t)):e.key===r?(e.preventDefault(),B(F+t)):e.key===`Home`?(e.preventDefault(),B(0)):e.key===`End`&&(e.preventDefault(),B(100))},K=I?{clipPath:`inset(0 0 ${100-F}% 0)`}:{clipPath:`inset(0 ${100-F}% 0 0)`},q=I?{top:`${F}%`}:{left:`${F}%`};return(0,l.jsxs)(`div`,{ref:z,className:(0,c.default)(`wim-image-compare`,o.default.root,I&&o.default.vertical,o.default[`radius-${S}`],w),style:{width:b,height:x},onPointerDown:H,onPointerMove:U,onPointerUp:W,...O,children:[(0,l.jsx)(`img`,{className:o.default.image,src:d,alt:p,draggable:!1}),h&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,o.default.afterLabel),children:h}),(0,l.jsxs)(`div`,{className:o.default.beforeLayer,style:K,children:[(0,l.jsx)(`img`,{className:o.default.image,src:e,alt:f,draggable:!1}),m&&(0,l.jsx)(`span`,{className:(0,c.default)(o.default.label,o.default.beforeLabel),children:m})]}),(0,l.jsxs)(`div`,{className:o.default.divider,style:q,children:[(0,l.jsx)(`span`,{className:o.default.line,"aria-hidden":`true`}),(0,l.jsxs)(`button`,{type:`button`,className:o.default.handle,role:`slider`,"aria-label":E?void 0:T??j,"aria-labelledby":E,"aria-describedby":D,"aria-orientation":y,"aria-valuenow":Math.round(F),"aria-valuemin":0,"aria-valuemax":100,onKeyDown:G,onPointerDown:H,children:[(0,l.jsx)(a.Icon,{component:r.default,size:`sm`,className:o.default.arrow}),(0,l.jsx)(a.Icon,{component:i.default,size:`sm`,className:o.default.arrow})]})]})]})});d.displayName=`ImageCompare`,exports.ImageCompare=d;