wimui 0.6.1 → 0.8.0

package/dist/components/_internal/FieldLabelContent.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../i18n/useWimTranslation.cjs"),n=require("../data-display/Badge/Badge.cjs"),r=require("./field-label-content.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=({label:e,required:i=!1,requiredLabel:o,showOptional:s=!1,optionalLabel:c,className:l})=>{let{t:u}=t.useWimTranslation(`form`),d=o??u(`form.required`),f=c??u(`form.optional`);return(0,a.jsxs)(`div`,{className:l,children:[(0,a.jsx)(`span`,{className:r.default.text,children:e}),i?(0,a.jsx)(n.Badge,{intent:`danger`,size:`sm`,className:r.default.badge,"aria-hidden":`true`,children:d}):s&&(0,a.jsx)(n.Badge,{intent:`neutral`,size:`sm`,className:r.default.badge,"aria-hidden":`true`,children:f})]})};exports.FieldLabelContent=o;
+const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../i18n/useWimTranslation.cjs"),n=require("../data-display/Badge/Badge.cjs"),r=require("./field-label-content.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=({label:e,required:i=!1,requiredLabel:o,showOptional:s=!1,optionalLabel:c,className:l})=>{let{t:u}=t.useWimTranslation(`form`),d=o??u(`form.required`),f=c??u(`form.optional`);return(0,a.jsxs)(`div`,{className:l,children:[(0,a.jsx)(`span`,{className:r.default.text,children:e}),i?(0,a.jsx)(n.Badge,{intent:`danger`,variant:`subtle`,size:`sm`,className:r.default.badge,"aria-hidden":`true`,children:d}):s&&(0,a.jsx)(n.Badge,{intent:`neutral`,size:`sm`,className:r.default.badge,"aria-hidden":`true`,children:f})]})};exports.FieldLabelContent=o;

package/dist/components/_internal/FieldLabelContent.js

@@ -14,6 +14,7 @@ var a = ({ label: a, required: o = !1, requiredLabel: s, showOptional: c = !1, o
 			children: a
 		}), o ? /* @__PURE__ */ r(t, {
 			intent: "danger",
+			variant: "subtle",
 			size: "sm",
 			className: n.badge,
 			"aria-hidden": "true",

package/dist/components/_internal/field-label-content.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_text_13rfz_2`,t=`_badge_13rfz_5`,n={text:e,badge:t};exports.badge=t,exports.default=n,exports.text=e;
+var e=`_text_1ojtz_2`,t=`_badge_1ojtz_5`,n={text:e,badge:t};exports.badge=t,exports.default=n,exports.text=e;

package/dist/components/_internal/field-label-content.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/_internal/field-label-content.module.scss
-var e = "_text_13rfz_2", t = "_badge_13rfz_5", n = {
+var e = "_text_1ojtz_2", t = "_badge_1ojtz_5", n = {
 	text: e,
 	badge: t
 };

package/dist/components/data-display/Card/Card.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("./card.module.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("classnames");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=r.default.forwardRef(({asChild:e=!1,variant:r=`elevated`,padding:o=`md`,radius:s=`lg`,interactive:c=!1,className:l,children:u,...d},f)=>(0,a.jsx)(e?t.Root:`div`,{ref:f,className:(0,i.default)(`wim-card`,n.default.root,n.default[r],n.default[`padding-${o}`],n.default[`radius-${s}`],c&&n.default.interactive,l),...d,children:u}));o.displayName=`Card`;var s=({className:e,children:t,...r})=>(0,a.jsx)(`div`,{className:(0,i.default)(n.default.header,e),...r,children:t}),c=({className:e,children:t,...r})=>(0,a.jsx)(`div`,{className:(0,i.default)(n.default.body,e),...r,children:t}),l=({className:e,children:t,...r})=>(0,a.jsx)(`div`,{className:(0,i.default)(n.default.footer,e),...r,children:t});s.displayName=`Card.Header`,c.displayName=`Card.Body`,l.displayName=`Card.Footer`,o.Header=s,o.Body=c,o.Footer=l,exports.Card=o,exports.default=o,exports.CardBody=c,exports.CardFooter=l,exports.CardHeader=s;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../utilities/warn-unstyled-value.cjs"),r=require("./styled-values.cjs"),i=require("./card.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=a.default.forwardRef(({asChild:e=!1,variant:a=`elevated`,padding:c=`md`,radius:l=`lg`,interactive:u=!1,className:d,children:f,...p},m)=>{let h=e?t.Root:`div`;return r.CARD_STYLED_PADDING.includes(c)||n.warnUnstyledValue(`Card`,`padding`,c,r.CARD_STYLED_PADDING),r.CARD_STYLED_RADIUS.includes(l)||n.warnUnstyledValue(`Card`,`radius`,l,r.CARD_STYLED_RADIUS),(0,s.jsx)(h,{ref:m,className:(0,o.default)(`wim-card`,i.default.root,i.default[a],i.default[`padding-${c}`],i.default[`radius-${l}`],u&&i.default.interactive,d),...p,children:f})});c.displayName=`Card`;var l=({className:e,children:t,...n})=>(0,s.jsx)(`div`,{className:(0,o.default)(i.default.header,e),...n,children:t}),u=({className:e,children:t,...n})=>(0,s.jsx)(`div`,{className:(0,o.default)(i.default.body,e),...n,children:t}),d=({className:e,children:t,...n})=>(0,s.jsx)(`div`,{className:(0,o.default)(i.default.footer,e),...n,children:t});l.displayName=`Card.Header`,u.displayName=`Card.Body`,d.displayName=`Card.Footer`,c.Header=l,c.Body=u,c.Footer=d,exports.Card=c,exports.default=c,exports.CardBody=u,exports.CardFooter=d,exports.CardHeader=l;

package/dist/components/data-display/Card/Card.js

@@ -1,29 +1,34 @@
 "use client";
 import { Root as e } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
-import t from "./card.module.js";
-import n from "react";
-import r from "classnames";
-import { jsx as i } from "react/jsx-runtime";
-var a = n.forwardRef(({ asChild: n = !1, variant: a = "elevated", padding: o = "md", radius: s = "lg", interactive: c = !1, className: l, children: u, ...d }, f) => /* @__PURE__ */ i(n ? e : "div", {
-	ref: f,
-	className: r("wim-card", t.root, t[a], t[`padding-${o}`], t[`radius-${s}`], c && t.interactive, l),
-	...d,
-	children: u
-}));
-a.displayName = "Card";
-var o = ({ className: e, children: n, ...a }) => /* @__PURE__ */ i("div", {
-	className: r(t.header, e),
-	...a,
-	children: n
-}), s = ({ className: e, children: n, ...a }) => /* @__PURE__ */ i("div", {
-	className: r(t.body, e),
-	...a,
-	children: n
-}), c = ({ className: e, children: n, ...a }) => /* @__PURE__ */ i("div", {
-	className: r(t.footer, e),
-	...a,
-	children: n
+import { warnUnstyledValue as t } from "../../../utilities/warn-unstyled-value.js";
+import { CARD_STYLED_PADDING as n, CARD_STYLED_RADIUS as r } from "./styled-values.js";
+import i from "./card.module.js";
+import a from "react";
+import o from "classnames";
+import { jsx as s } from "react/jsx-runtime";
+var c = a.forwardRef(({ asChild: a = !1, variant: c = "elevated", padding: l = "md", radius: u = "lg", interactive: d = !1, className: f, children: p, ...m }, h) => {
+	let g = a ? e : "div";
+	return n.includes(l) || t("Card", "padding", l, n), r.includes(u) || t("Card", "radius", u, r), /* @__PURE__ */ s(g, {
+		ref: h,
+		className: o("wim-card", i.root, i[c], i[`padding-${l}`], i[`radius-${u}`], d && i.interactive, f),
+		...m,
+		children: p
+	});
 });
-o.displayName = "Card.Header", s.displayName = "Card.Body", c.displayName = "Card.Footer", a.Header = o, a.Body = s, a.Footer = c;
+c.displayName = "Card";
+var l = ({ className: e, children: t, ...n }) => /* @__PURE__ */ s("div", {
+	className: o(i.header, e),
+	...n,
+	children: t
+}), u = ({ className: e, children: t, ...n }) => /* @__PURE__ */ s("div", {
+	className: o(i.body, e),
+	...n,
+	children: t
+}), d = ({ className: e, children: t, ...n }) => /* @__PURE__ */ s("div", {
+	className: o(i.footer, e),
+	...n,
+	children: t
+});
+l.displayName = "Card.Header", u.displayName = "Card.Body", d.displayName = "Card.Footer", c.Header = l, c.Body = u, c.Footer = d;
 //#endregion
-export { a as Card, a as default, s as CardBody, c as CardFooter, o as CardHeader };
+export { c as Card, c as default, u as CardBody, d as CardFooter, l as CardHeader };

package/dist/components/data-display/Card/styled-values.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=[`none`,`xs`,`sm`,`md`,`lg`,`xl`,`2xl`,`3xl`],t=[`none`,`sm`,`md`,`lg`,`xl`,`2xl`];exports.CARD_STYLED_PADDING=e,exports.CARD_STYLED_RADIUS=t;

package/dist/components/data-display/Card/styled-values.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The `padding` and `radius` values `card.module.scss` actually implements.
+ *
+ * `CardProps` types both as the whole `ComponentSize`, so everything outside
+ * these lists type-checks and then does nothing. Narrowing the types is the
+ * real fix and it is breaking, so it waits for 0.8.0 (T38); until then `Card`
+ * warns in development instead of failing in silence.
+ *
+ * Written out rather than read off the CSS module on purpose: under Vitest a
+ * CSS module is a proxy that answers every key, so a check derived from it
+ * could never be tested. `Card.unstyled-values.test.tsx` reads
+ * `card.module.scss` off disk and fails if either list stops matching it.
+ *
+ * Not re-exported from the barrel — `src/data-display-core.ts` does
+ * `export * from "./Card/Card"`, and these are implementation detail.
+ */
+export declare const CARD_STYLED_PADDING: readonly ["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+export declare const CARD_STYLED_RADIUS: readonly ["none", "sm", "md", "lg", "xl", "2xl"];

package/dist/components/data-display/Card/styled-values.js

@@ -0,0 +1,21 @@
+"use client";
+//#region src/components/data-display/Card/styled-values.ts
+var e = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl",
+	"3xl"
+], t = [
+	"none",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+];
+//#endregion
+export { e as CARD_STYLED_PADDING, t as CARD_STYLED_RADIUS };

package/dist/components/feedback/Alert/Alert.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../_internal/FeedbackIcon.cjs"),n=require("../../_internal/FeedbackCloseButton.cjs"),r=require("./alert.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=({title:e,titleTag:s=`h4`,description:c,intent:l=`default`,icon:u,onClose:d,className:f,children:p,...m})=>{let[h,g]=i.default.useState(!0);if(!h)return null;let _=()=>{g(!1),d&&d()},v=u!==void 0||l===`success`||l===`warning`||l===`danger`||l===`info`;return(0,o.jsxs)(`div`,{className:(0,a.default)(`wim-alert`,r.default.root,r.default[l],f),role:`alert`,...m,children:[v&&(0,o.jsx)(`div`,{className:r.default.icon,children:(0,o.jsx)(t.FeedbackIcon,{intent:l,icon:u,size:`sm`})}),(0,o.jsxs)(`div`,{className:r.default.content,children:[e&&(0,o.jsx)(s,{className:r.default.title,children:e}),(c||p)&&(0,o.jsx)(`div`,{className:r.default.description,children:c||p})]}),(0,o.jsx)(n.FeedbackCloseButton,{onClose:d?_:void 0,className:r.default.close,size:`sm`})]})};exports.Alert=s;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../_internal/FeedbackIcon.cjs"),n=require("../../_internal/FeedbackCloseButton.cjs"),r=require("./alert.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=({title:e,titleTag:s=`div`,description:c,intent:l=`default`,icon:u,onClose:d,className:f,children:p,...m})=>{let[h,g]=i.default.useState(!0);if(!h)return null;let _=()=>{g(!1),d&&d()},v=u!==void 0||l===`success`||l===`warning`||l===`danger`||l===`info`;return(0,o.jsxs)(`div`,{className:(0,a.default)(`wim-alert`,r.default.root,r.default[l],f),role:`alert`,...m,children:[v&&(0,o.jsx)(`div`,{className:r.default.icon,children:(0,o.jsx)(t.FeedbackIcon,{intent:l,icon:u,size:`sm`})}),(0,o.jsxs)(`div`,{className:r.default.content,children:[e&&(0,o.jsx)(s,{className:r.default.title,children:e}),(c||p)&&(0,o.jsx)(`div`,{className:r.default.description,children:c||p})]}),(0,o.jsx)(n.FeedbackCloseButton,{onClose:d?_:void 0,className:r.default.close,size:`sm`})]})};exports.Alert=s;

package/dist/components/feedback/Alert/Alert.d.ts

@@ -6,10 +6,17 @@ type AlertProps = React.ComponentPropsWithoutRef<"div"> & {
      */
     title?: React.ReactNode;
     /**
-     * HTML tag used for the alert title
-     * @default "h4"
-     */
-    titleTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+     * HTML tag used for the alert title.
+     *
+     * The default is a `div`: an alert is a notice, not a section of the
+     * document, so its title does not belong in the heading outline. Making it
+     * one also breaks `heading-order` as soon as the alert sits under anything
+     * other than an `h3`. Pass a heading only when the alert really does head a
+     * section of the page.
+     *
+     * @default "div"
+     */
+    titleTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "p" | "strong" | "span";
     /**
      * Description text of the alert
      */

package/dist/components/feedback/Alert/Alert.js

@@ -6,7 +6,7 @@ import r from "react";
 import i from "classnames";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/feedback/Alert/Alert.tsx
-var s = ({ title: s, titleTag: c = "h4", description: l, intent: u = "default", icon: d, onClose: f, className: p, children: m, ...h }) => {
+var s = ({ title: s, titleTag: c = "div", description: l, intent: u = "default", icon: d, onClose: f, className: p, children: m, ...h }) => {
 	let [g, _] = r.useState(!0);
 	if (!g) return null;
 	let v = () => {

package/dist/components/feedback/Result/Result.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/InteractiveArea/InteractiveArea.cjs"),n=require("../../../icon/alert-circle.cjs"),r=require("../../../icon/check.cjs"),i=require("../../../icon/circle.cjs"),a=require("../../../icon/info-circle.cjs"),o=require("../../media/Icon/Icon.cjs"),s=require("./result.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=({intent:e,status:t,className:s})=>{if(t)return(0,u.jsx)(o.Icon,{component:n.default,color:`secondary`,className:s});switch(e){case`success`:return(0,u.jsx)(o.Icon,{component:r.default,color:`success`,className:s});case`danger`:return(0,u.jsx)(o.Icon,{component:n.default,color:`danger`,className:s});case`warning`:return(0,u.jsx)(o.Icon,{component:n.default,color:`warning`,className:s});case`info`:return(0,u.jsx)(o.Icon,{component:a.default,color:`info`,className:s});default:return(0,u.jsx)(o.Icon,{component:i.default,color:`secondary`,className:s})}},f=({intent:e=`default`,status:n,title:r,description:i,extra:a,icon:o,className:c,children:f})=>(0,u.jsx)(t.InteractiveArea,{icon:o||(0,u.jsx)(d,{intent:e,status:n,className:s.default.icon}),title:r??void 0,description:i??void 0,actions:a,variant:`none`,bgVariant:`transparent`,className:(0,l.default)(`wim-result`,s.default.root,e&&s.default[e],n&&s.default[n],c),styles:{inner:s.default.inner,icon:s.default.icon,content:s.default.content},children:f});exports.Result=f;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/InteractiveArea/InteractiveArea.cjs"),n=require("../../../icon/alert-circle.cjs"),r=require("../../../icon/check.cjs"),i=require("../../../icon/circle.cjs"),a=require("../../../icon/info-circle.cjs"),o=require("../../media/Icon/Icon.cjs"),s=require("./result.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=({intent:e,status:t,className:s})=>{if(t)return(0,u.jsx)(o.Icon,{component:n.default,color:`tertiary`,className:s});switch(e){case`success`:return(0,u.jsx)(o.Icon,{component:r.default,color:`success`,className:s});case`danger`:return(0,u.jsx)(o.Icon,{component:n.default,color:`danger`,className:s});case`warning`:return(0,u.jsx)(o.Icon,{component:n.default,color:`warning`,className:s});case`info`:return(0,u.jsx)(o.Icon,{component:a.default,color:`info`,className:s});default:return(0,u.jsx)(o.Icon,{component:i.default,color:`tertiary`,className:s})}},f=({intent:e=`default`,status:n,title:r,description:i,extra:a,icon:o,className:c,children:f})=>(0,u.jsx)(t.InteractiveArea,{icon:o||(0,u.jsx)(d,{intent:e,status:n,className:s.default.icon}),title:r??void 0,description:i??void 0,actions:a,variant:`none`,bgVariant:`transparent`,className:(0,l.default)(`wim-result`,s.default.root,e&&s.default[e],n&&s.default[n],c),styles:{inner:s.default.inner,icon:s.default.icon,content:s.default.content},children:f});exports.Result=f;

package/dist/components/feedback/Result/Result.js

@@ -13,7 +13,7 @@ import { jsx as c } from "react/jsx-runtime";
 var l = ({ intent: e, status: o, className: s }) => {
 	if (o) return /* @__PURE__ */ c(a, {
 		component: t,
-		color: "secondary",
+		color: "tertiary",
 		className: s
 	});
 	switch (e) {
@@ -39,7 +39,7 @@ var l = ({ intent: e, status: o, className: s }) => {
 		});
 		default: return /* @__PURE__ */ c(a, {
 			component: r,
-			color: "secondary",
+			color: "tertiary",
 			className: s
 		});
 	}

package/dist/components/form/Dropzone/Dropzone.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/InteractiveArea/InteractiveArea.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../FieldTemplate/FieldTemplate.cjs"),a=require("./dropzone.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=({label:e,description:l,accept:u,multiple:d=!1,disabled:f=!1,onChange:p,className:m,iconName:h=`UploadIcon`,error:g,required:_,layout:v=`vertical`,size:y=`md`})=>{let{t:b}=n.useWimTranslation(`form`),x=l??b(`dropzone.description`),S=`wim-dropzone-${o.default.useId()}`,C=e?`${S}-label`:void 0,w=g?`${S}-error`:void 0,T=(0,o.useRef)(null),[E,D]=(0,o.useState)(!1),[O,k]=(0,o.useState)(null),A=()=>{f||T.current?.click()};return(0,c.jsxs)(i.FieldTemplate,{label:e,error:g,required:_,layout:v,labelId:C,errorId:w,className:(0,s.default)(`wim-dropzone`,a.default.container,m),children:[(0,c.jsx)(`input`,{type:`file`,ref:T,accept:u,multiple:d,disabled:f,onChange:e=>{let t=e.target.files;k(t),p&&p(t)},style:{display:`none`},"aria-hidden":`true`,tabIndex:-1}),(0,c.jsx)(t.InteractiveArea,{className:a.default.dropzone,size:y,isDragging:E,disabled:f,isClickable:!f,onClick:A,onDragOver:e=>{e.preventDefault(),!f&&D(!0)},onDragLeave:()=>{D(!1)},onDrop:e=>{if(e.preventDefault(),D(!1),f)return;let t=e.dataTransfer.files;k(t),p&&p(t)},onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&A()},"aria-labelledby":C,"aria-describedby":w,"aria-required":_,"aria-invalid":!!g,icon:h&&(0,c.jsx)(r.Icon,{name:h,color:f?`disabled`:`primary`}),description:x,children:O&&O.length>0?(0,c.jsx)(`div`,{className:a.default.fileList,children:Array.from(O).map((e,t)=>(0,c.jsx)(`span`,{className:a.default.fileName,children:e.name},t))}):null})]})};exports.Dropzone=l;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/InteractiveArea/InteractiveArea.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../FieldTemplate/FieldTemplate.cjs"),a=require("./dropzone.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=({label:e,description:l,accept:u,multiple:d=!1,disabled:f=!1,value:p,onChange:m,className:h,iconName:g=`UploadIcon`,error:_,required:v,layout:y=`vertical`,size:b=`md`})=>{let{t:x}=n.useWimTranslation(`form`),S=l??x(`dropzone.description`),C=`wim-dropzone-${o.default.useId()}`,w=e?`${C}-label`:void 0,T=_?`${C}-error`:void 0,E=(0,o.useRef)(null),[D,O]=(0,o.useState)(!1),[k,A]=(0,o.useState)(null),j=()=>{f||E.current?.click()},M=e=>{e.preventDefault(),!f&&O(!0)},N=()=>{O(!1)},P=e=>{if(e.preventDefault(),O(!1),f)return;let t=e.dataTransfer.files;A(t),m&&m(t)},F=e=>{let t=e.target.files;A(t),m&&m(t)},I=p===void 0?k?Array.from(k).map(e=>e.name):[]:p;return(0,c.jsxs)(i.FieldTemplate,{label:e,error:_,required:v,layout:y,labelId:w,errorId:T,className:(0,s.default)(`wim-dropzone`,a.default.container,h),children:[(0,c.jsx)(`input`,{type:`file`,ref:E,accept:u,multiple:d,disabled:f,onChange:F,style:{display:`none`},"aria-hidden":`true`,tabIndex:-1}),(0,c.jsx)(t.InteractiveArea,{className:a.default.dropzone,size:b,isDragging:D,disabled:f,isClickable:!f,onClick:j,onDragOver:M,onDragLeave:N,onDrop:P,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&j()},"aria-labelledby":w,"aria-describedby":T,"aria-required":v,"aria-invalid":!!_,icon:g&&(0,c.jsx)(r.Icon,{name:g,color:f?`disabled`:`primary`}),description:S,children:I.length>0?(0,c.jsx)(`div`,{className:a.default.fileList,children:I.map((e,t)=>(0,c.jsx)(`span`,{className:a.default.fileName,children:e},t))}):null})]})};exports.Dropzone=l;

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

@@ -12,6 +12,15 @@ type DropzoneProps = {
     multiple?: boolean;
     /** Whether the component is disabled. */
     disabled?: boolean;
+    /**
+     * Names of the files the area should list — typically ones that already
+     * exist on the server, from an earlier session or an earlier step.
+     *
+     * Controlled: while this is set, it is what the area lists, and dropping or
+     * picking a file only fires `onChange`. Pass the new names back to show
+     * them. Leave it undefined to let the area track its own selection.
+     */
+    value?: string[];
     /** Callback when files are selected. */
     onChange?: (files: FileList | null) => void;
     /** Additional class names. */
@@ -30,5 +39,5 @@ type DropzoneProps = {
 /**
  * Component for uploading files by drag and drop or by clicking.
  */
-export declare const Dropzone: ({ label, description, accept, multiple, disabled, onChange, className, iconName, error, required, layout, size, }: DropzoneProps) => React.JSX.Element;
+export declare const Dropzone: ({ label, description, accept, multiple, disabled, value, onChange, className, iconName, error, required, layout, size, }: DropzoneProps) => React.JSX.Element;
 export {};

package/dist/components/form/Dropzone/Dropzone.js

@@ -8,66 +8,66 @@ import a, { useRef as o, useState as s } from "react";
 import c from "classnames";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/form/Dropzone/Dropzone.tsx
-var d = ({ label: d, description: f, accept: p, multiple: m = !1, disabled: h = !1, onChange: g, className: _, iconName: v = "UploadIcon", error: y, required: b, layout: x = "vertical", size: S = "md" }) => {
-	let { t: C } = t("form"), w = f ?? C("dropzone.description"), T = `wim-dropzone-${a.useId()}`, E = d ? `${T}-label` : void 0, D = y ? `${T}-error` : void 0, O = o(null), [k, A] = s(!1), [j, M] = s(null), N = () => {
-		h || O.current?.click();
-	};
+var d = ({ label: d, description: f, accept: p, multiple: m = !1, disabled: h = !1, value: g, onChange: _, className: v, iconName: y = "UploadIcon", error: b, required: x, layout: S = "vertical", size: C = "md" }) => {
+	let { t: w } = t("form"), T = f ?? w("dropzone.description"), E = `wim-dropzone-${a.useId()}`, D = d ? `${E}-label` : void 0, O = b ? `${E}-error` : void 0, k = o(null), [A, j] = s(!1), [M, N] = s(null), P = () => {
+		h || k.current?.click();
+	}, F = (e) => {
+		e.preventDefault(), !h && j(!0);
+	}, I = () => {
+		j(!1);
+	}, L = (e) => {
+		if (e.preventDefault(), j(!1), h) return;
+		let t = e.dataTransfer.files;
+		N(t), _ && _(t);
+	}, R = (e) => {
+		let t = e.target.files;
+		N(t), _ && _(t);
+	}, z = g === void 0 ? M ? Array.from(M).map((e) => e.name) : [] : g;
 	return /* @__PURE__ */ u(r, {
 		label: d,
-		error: y,
-		required: b,
-		layout: x,
-		labelId: E,
-		errorId: D,
-		className: c("wim-dropzone", i.container, _),
+		error: b,
+		required: x,
+		layout: S,
+		labelId: D,
+		errorId: O,
+		className: c("wim-dropzone", i.container, v),
 		children: [/* @__PURE__ */ l("input", {
 			type: "file",
-			ref: O,
+			ref: k,
 			accept: p,
 			multiple: m,
 			disabled: h,
-			onChange: (e) => {
-				let t = e.target.files;
-				M(t), g && g(t);
-			},
+			onChange: R,
 			style: { display: "none" },
 			"aria-hidden": "true",
 			tabIndex: -1
 		}), /* @__PURE__ */ l(e, {
 			className: i.dropzone,
-			size: S,
-			isDragging: k,
+			size: C,
+			isDragging: A,
 			disabled: h,
 			isClickable: !h,
-			onClick: N,
-			onDragOver: (e) => {
-				e.preventDefault(), !h && A(!0);
-			},
-			onDragLeave: () => {
-				A(!1);
-			},
-			onDrop: (e) => {
-				if (e.preventDefault(), A(!1), h) return;
-				let t = e.dataTransfer.files;
-				M(t), g && g(t);
-			},
+			onClick: P,
+			onDragOver: F,
+			onDragLeave: I,
+			onDrop: L,
 			onKeyDown: (e) => {
-				(e.key === "Enter" || e.key === " ") && N();
+				(e.key === "Enter" || e.key === " ") && P();
 			},
-			"aria-labelledby": E,
-			"aria-describedby": D,
-			"aria-required": b,
-			"aria-invalid": !!y,
-			icon: v && /* @__PURE__ */ l(n, {
-				name: v,
+			"aria-labelledby": D,
+			"aria-describedby": O,
+			"aria-required": x,
+			"aria-invalid": !!b,
+			icon: y && /* @__PURE__ */ l(n, {
+				name: y,
 				color: h ? "disabled" : "primary"
 			}),
-			description: w,
-			children: j && j.length > 0 ? /* @__PURE__ */ l("div", {
+			description: T,
+			children: z.length > 0 ? /* @__PURE__ */ l("div", {
 				className: i.fileList,
-				children: Array.from(j).map((e, t) => /* @__PURE__ */ l("span", {
+				children: z.map((e, t) => /* @__PURE__ */ l("span", {
 					className: i.fileName,
-					children: e.name
+					children: e
 				}, t))
 			}) : null
 		})]

package/dist/components/form/Fieldset/Fieldset.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./fieldset.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=({children:e,disabled:n=!1,variant:a=`default`,className:o,...s})=>(0,i.jsx)(`fieldset`,{className:(0,r.default)(`wim-fieldset`,t.default.root,a===`full-width`&&t.default.fullWidth,o),disabled:n,...s,children:e});exports.Fieldset=a;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./fieldset.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a=({children:e,disabled:n=!1,variant:a=`default`,className:o,...s})=>(0,i.jsx)(`fieldset`,{className:(0,r.default)(`wim-fieldset`,t.default.root,a===`full-width`&&t.default.fullWidth,a===`plain`&&t.default.plain,o),disabled:n,...s,children:e});exports.Fieldset=a;

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

@@ -4,8 +4,15 @@ type FieldsetProps = React.ComponentPropsWithoutRef<"fieldset"> & {
     children: React.ReactNode;
     /** Whether all contained form elements are disabled */
     disabled?: boolean;
-    /** Visual variant of the fieldset */
-    variant?: "default" | "full-width";
+    /**
+     * Visual variant of the fieldset.
+     *
+     * `plain` drops the frame and padding and keeps only the grouping — use it
+     * inside a `Card` or any surface that already draws a border, where a framed
+     * fieldset would put a box inside a box. The `<fieldset>` and its `<legend>`
+     * still do their job for assistive technology.
+     */
+    variant?: "default" | "full-width" | "plain";
     /** Additional class names */
     className?: string;
 };

package/dist/components/form/Fieldset/Fieldset.js

@@ -5,7 +5,7 @@ import t from "classnames";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/components/form/Fieldset/Fieldset.tsx
 var r = ({ children: r, disabled: i = !1, variant: a = "default", className: o, ...s }) => /* @__PURE__ */ n("fieldset", {
-	className: t("wim-fieldset", e.root, a === "full-width" && e.fullWidth, o),
+	className: t("wim-fieldset", e.root, a === "full-width" && e.fullWidth, a === "plain" && e.plain, o),
 	disabled: i,
 	...s,
 	children: r

package/dist/components/form/Fieldset/fieldset.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_1og29_2`,t=`_fullWidth_1og29_12`,n={root:e,fullWidth:t};exports.default=n,exports.fullWidth=t,exports.root=e;
+var e=`_root_1uiyp_2`,t=`_fullWidth_1uiyp_12`,n=`_plain_1uiyp_15`,r={root:e,fullWidth:t,plain:n};exports.default=r,exports.fullWidth=t,exports.plain=n,exports.root=e;

package/dist/components/form/Fieldset/fieldset.module.js

@@ -1,8 +1,9 @@
 "use client";
 //#region src/components/form/Fieldset/fieldset.module.scss
-var e = "_root_1og29_2", t = "_fullWidth_1og29_12", n = {
+var e = "_root_1uiyp_2", t = "_fullWidth_1uiyp_12", n = "_plain_1uiyp_15", r = {
 	root: e,
-	fullWidth: t
+	fullWidth: t,
+	plain: n
 };
 //#endregion
-export { n as default, t as fullWidth, e as root };
+export { r as default, t as fullWidth, n as plain, e as root };

package/dist/components/form/FileUpload/FileUpload.cjs

@@ -1,2 +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("../FieldTemplate/FieldTemplate.cjs"),a=require("./file-upload.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=({label:e,buttonLabel:l,noFileLabel:u,accept:d,multiple:f=!1,disabled:p=!1,onChange:m,className:h,iconName:g,iconPosition:_,size:v=`md`,error:y,required:b,layout:x=`vertical`})=>{let{t:S}=t.useWimTranslation(`form`),C=`wim-fileupload-${o.default.useId()}`,w=e?`${C}-label`:void 0,T=y?`${C}-error`:void 0,E=b?`${C}-required`:void 0,D=[T,E].filter(Boolean).join(` `)||void 0,O=(0,o.useRef)(null),[k,A]=(0,o.useState)(null),j=()=>{O.current?.click()},M=e=>{let t=e.target.files;A(t),m&&m(t)},N=k?Array.from(k).map(e=>e.name).join(`, `):u??S(`fileupload.no_file`);return(0,c.jsx)(i.FieldTemplate,{label:e,error:y,required:b,layout:x,labelId:w,errorId:T,className:(0,s.default)(`wim-file-upload`,a.default.root,a.default[v],h),children:(0,c.jsxs)(`div`,{className:a.default.controls,children:[(0,c.jsx)(`input`,{type:`file`,ref:O,accept:d,multiple:f,disabled:p,onChange:M,className:a.default.input,"aria-hidden":`true`,tabIndex:-1}),(0,c.jsx)(r.Button,{onClick:j,disabled:p,variant:`outline`,icon:g,iconPosition:_,size:v,"aria-labelledby":w,"aria-describedby":D,"aria-invalid":y?!0:void 0,children:l??S(`fileupload.button`)}),b&&(0,c.jsx)(n.VisuallyHidden,{id:E,children:S(`form.required`)}),(0,c.jsx)(`span`,{className:(0,s.default)(a.default.fileNames,a.default[v],p&&a.default.disabled),"aria-disabled":p||void 0,children:N})]})})};exports.FileUpload=l;
+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("../FieldTemplate/FieldTemplate.cjs"),a=require("./file-upload.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=({label:e,buttonLabel:l,noFileLabel:u,accept:d,multiple:f=!1,disabled:p=!1,value:m,onChange:h,className:g,iconName:_,iconPosition:v,size:y=`md`,error:b,required:x,layout:S=`vertical`})=>{let{t:C}=t.useWimTranslation(`form`),w=`wim-fileupload-${o.default.useId()}`,T=e?`${w}-label`:void 0,E=b?`${w}-error`:void 0,D=x?`${w}-required`:void 0,O=[E,D].filter(Boolean).join(` `)||void 0,k=(0,o.useRef)(null),[A,j]=(0,o.useState)(null),M=()=>{k.current?.click()},N=e=>{let t=e.target.files;j(t),h&&h(t)},P=m===void 0?A?Array.from(A).map(e=>e.name):[]:m,F=P.length>0?P.join(`, `):u??C(`fileupload.no_file`);return(0,c.jsx)(i.FieldTemplate,{label:e,error:b,required:x,layout:S,labelId:T,errorId:E,className:(0,s.default)(`wim-file-upload`,a.default.root,a.default[y],g),children:(0,c.jsxs)(`div`,{className:a.default.controls,children:[(0,c.jsx)(`input`,{type:`file`,ref:k,accept:d,multiple:f,disabled:p,onChange:N,className:a.default.input,"aria-hidden":`true`,tabIndex:-1}),(0,c.jsx)(r.Button,{onClick:M,disabled:p,variant:`outline`,icon:_,iconPosition:v,size:y,"aria-labelledby":T,"aria-describedby":O,"aria-invalid":b?!0:void 0,children:l??C(`fileupload.button`)}),x&&(0,c.jsx)(n.VisuallyHidden,{id:D,children:C(`form.required`)}),(0,c.jsx)(`span`,{className:(0,s.default)(a.default.fileNames,a.default[y],p&&a.default.disabled),"aria-disabled":p||void 0,children:F})]})})};exports.FileUpload=l;

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

@@ -14,6 +14,15 @@ type FileUploadProps = {
     multiple?: boolean;
     /** Whether the component is disabled */
     disabled?: boolean;
+    /**
+     * Names of the files the field should show — typically ones that already
+     * exist on the server, from an earlier session or an earlier step.
+     *
+     * Controlled: while this is set, it is what the field displays, and picking
+     * a file only fires `onChange`. Pass the new names back to show them. Leave
+     * it undefined to let the field track its own selection.
+     */
+    value?: string[];
     /** Callback when files are selected */
     onChange?: (files: FileList | null) => void;
     /** Additional class names */
@@ -34,5 +43,5 @@ type FileUploadProps = {
 /**
  * Component for selecting and uploading files.
  */
-export declare const FileUpload: ({ label, buttonLabel, noFileLabel, accept, multiple, disabled, onChange, className, iconName, iconPosition, size, error, required, layout, }: FileUploadProps) => React.JSX.Element;
+export declare const FileUpload: ({ label, buttonLabel, noFileLabel, accept, multiple, disabled, value, onChange, className, iconName, iconPosition, size, error, required, layout, }: FileUploadProps) => React.JSX.Element;
 export {};

package/dist/components/form/FileUpload/FileUpload.js

@@ -8,55 +8,55 @@ import a, { useRef as o, useState as s } from "react";
 import c from "classnames";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/form/FileUpload/FileUpload.tsx
-var d = ({ label: d, buttonLabel: f, noFileLabel: p, accept: m, multiple: h = !1, disabled: g = !1, onChange: _, className: v, iconName: y, iconPosition: b, size: x = "md", error: S, required: C, layout: w = "vertical" }) => {
-	let { t: T } = e("form"), E = `wim-fileupload-${a.useId()}`, D = d ? `${E}-label` : void 0, O = S ? `${E}-error` : void 0, k = C ? `${E}-required` : void 0, A = [O, k].filter(Boolean).join(" ") || void 0, j = o(null), [M, N] = s(null), P = () => {
-		j.current?.click();
-	}, F = (e) => {
+var d = ({ label: d, buttonLabel: f, noFileLabel: p, accept: m, multiple: h = !1, disabled: g = !1, value: _, onChange: v, className: y, iconName: b, iconPosition: x, size: S = "md", error: C, required: w, layout: T = "vertical" }) => {
+	let { t: E } = e("form"), D = `wim-fileupload-${a.useId()}`, O = d ? `${D}-label` : void 0, k = C ? `${D}-error` : void 0, A = w ? `${D}-required` : void 0, j = [k, A].filter(Boolean).join(" ") || void 0, M = o(null), [N, P] = s(null), F = () => {
+		M.current?.click();
+	}, I = (e) => {
 		let t = e.target.files;
-		N(t), _ && _(t);
-	}, I = M ? Array.from(M).map((e) => e.name).join(", ") : p ?? T("fileupload.no_file");
+		P(t), v && v(t);
+	}, L = _ === void 0 ? N ? Array.from(N).map((e) => e.name) : [] : _, R = L.length > 0 ? L.join(", ") : p ?? E("fileupload.no_file");
 	return /* @__PURE__ */ l(r, {
 		label: d,
-		error: S,
-		required: C,
-		layout: w,
-		labelId: D,
-		errorId: O,
-		className: c("wim-file-upload", i.root, i[x], v),
+		error: C,
+		required: w,
+		layout: T,
+		labelId: O,
+		errorId: k,
+		className: c("wim-file-upload", i.root, i[S], y),
 		children: /* @__PURE__ */ u("div", {
 			className: i.controls,
 			children: [
 				/* @__PURE__ */ l("input", {
 					type: "file",
-					ref: j,
+					ref: M,
 					accept: m,
 					multiple: h,
 					disabled: g,
-					onChange: F,
+					onChange: I,
 					className: i.input,
 					"aria-hidden": "true",
 					tabIndex: -1
 				}),
 				/* @__PURE__ */ l(n, {
-					onClick: P,
+					onClick: F,
 					disabled: g,
 					variant: "outline",
-					icon: y,
-					iconPosition: b,
-					size: x,
-					"aria-labelledby": D,
-					"aria-describedby": A,
-					"aria-invalid": S ? !0 : void 0,
-					children: f ?? T("fileupload.button")
+					icon: b,
+					iconPosition: x,
+					size: S,
+					"aria-labelledby": O,
+					"aria-describedby": j,
+					"aria-invalid": C ? !0 : void 0,
+					children: f ?? E("fileupload.button")
 				}),
-				C && /* @__PURE__ */ l(t, {
-					id: k,
-					children: T("form.required")
+				w && /* @__PURE__ */ l(t, {
+					id: A,
+					children: E("form.required")
 				}),
 				/* @__PURE__ */ l("span", {
-					className: c(i.fileNames, i[x], g && i.disabled),
+					className: c(i.fileNames, i[S], g && i.disabled),
 					"aria-disabled": g || void 0,
-					children: I
+					children: R
 				})
 			]
 		})

package/dist/components/form/Input/Input.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("../../../hooks/useMergedRef.cjs"),ee=require("../InputBase/InputBase.cjs"),te=require("../FieldTemplate/FieldTemplate.cjs"),i=require("./input.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,leftIcon:f,rightIcon:p,leftIconColor:m,rightIconColor:h,onLeftIconClick:g,onRightIconClick:_,allowClear:v=!1,showPasswordToggle:ne=!0,rightIconClassName:re,rightIconRotated:ie,width:ae,value:y,defaultValue:oe,onChange:b,type:x,label:S,error:C,required:w,layout:T,id:E,inputClassName:D,showPasswordAriaLabel:O,hidePasswordAriaLabel:k,rightIconAriaLabel:A,styles:j,asChild:M=!1,children:N,...P},F)=>{let{t:I}=n.useWimTranslation(`common`),se=O??I(`a11y.show_password`),L=k??I(`a11y.hide_password`),R=A??I(`a11y.right_icon_action`),[z,B]=(0,a.useState)(oe??``),[V,H]=(0,a.useState)(!1),U=(0,a.useRef)(null),W=r.useMergedRef(F,U),G=y!==void 0,K=G?y:z,q=d,ce=e=>{G||B(e.target.value),b?.(e)},le=()=>{let e=U.current;if(!e)return;let t=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,`value`)?.set;t?(t.call(e,``),e.dispatchEvent(new Event(`input`,{bubbles:!0}))):(G||B(``),b&&(e.value=``,b({target:e,currentTarget:e}))),G||B(``)},ue=()=>{H(e=>!e)},de=x===`password`&&ne,J=[];de&&J.push({name:V?`EyeOffIcon`:`EyeIcon`,onClick:e=>ue(),ariaLabel:V?L:se}),p&&(J.some(e=>e.name===p)||J.push({name:p,onClick:_,color:h,ariaLabel:R,className:re,rotated:ie}));let fe=x===`password`&&V?`text`:x,Y=C?`danger`:e,X=(0,a.useId)(),Z=E||`wim-input-${X}`,Q=C?`${Z}-error`:void 0,$=S?`${Z}-label`:void 0;return(0,s.jsx)(te.FieldTemplate,{label:S,error:C,required:w,layout:T,labelId:$,htmlFor:Z,errorId:Q,className:u,children:(0,s.jsx)(ee.InputBase,{intent:Y,variant:c,fullWidth:l,width:ae,disabled:q,leftIcon:f,leftIconColor:m,onLeftIconClick:g,rightIcons:J,allowClear:v,hasValue:!!K,onClear:le,styles:j,children:(0,s.jsx)(M?t.Root:`input`,{id:Z,ref:W,className:(0,o.default)(`wim-input`,i.default.root,i.default[Y],q&&i.default.disabled,i.default[c],D),disabled:q,value:K,onChange:ce,type:fe,"aria-invalid":Y===`danger`,"aria-describedby":Q,"aria-labelledby":S?$:void 0,"aria-required":w,...P,children:M?(0,s.jsx)(t.Slottable,{children:N}):null})})})});c.displayName=`Input`,exports.Input=c,exports.default=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),ee=require("../../../hooks/useMergedRef.cjs"),te=require("../InputBase/InputBase.cjs"),ne=require("../FieldTemplate/FieldTemplate.cjs"),r=require("./input.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=(0,i.forwardRef)(({intent:e=`default`,variant:s=`outline`,fullWidth:c=!1,className:re,disabled:ie,leftIcon:ae,rightIcon:l,leftIconColor:oe,rightIconColor:se,onLeftIconClick:u,onRightIconClick:d,allowClear:f=!1,showPasswordToggle:p=!0,rightIconClassName:m,rightIconRotated:ce,width:h,value:g,defaultValue:le,onChange:_,type:v,label:y,error:b,required:x,layout:S,id:C,inputClassName:w,showPasswordAriaLabel:T,hidePasswordAriaLabel:E,rightIconAriaLabel:D,suffix:O,styles:k,asChild:A=!1,children:j,...M},N)=>{let{t:P}=n.useWimTranslation(`common`),F=T??P(`a11y.show_password`),I=E??P(`a11y.hide_password`),L=D??P(`a11y.right_icon_action`),[R,z]=(0,i.useState)(le??``),[B,V]=(0,i.useState)(!1),H=(0,i.useRef)(null),U=ee.useMergedRef(N,H),W=g!==void 0,G=W?g:R,K=ie,ue=e=>{W||z(e.target.value),_?.(e)},de=()=>{let e=H.current;if(!e)return;let t=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,`value`)?.set;t?(t.call(e,``),e.dispatchEvent(new Event(`input`,{bubbles:!0}))):(W||z(``),_&&(e.value=``,_({target:e,currentTarget:e}))),W||z(``)},q=()=>{V(e=>!e)},fe=v===`password`&&p,J=[];fe&&J.push({name:B?`EyeOffIcon`:`EyeIcon`,onClick:e=>q(),ariaLabel:B?I:F}),l&&(J.some(e=>e.name===l)||J.push({name:l,onClick:d,color:se,ariaLabel:L,className:m,rotated:ce}));let pe=v===`password`&&B?`text`:v,Y=b?`danger`:e,me=(0,i.useId)(),X=C||`wim-input-${me}`,Z=b?`${X}-error`:void 0,Q=O!=null&&O!==``?`${X}-suffix`:void 0,he=[Z,Q].filter(Boolean).join(` `)||void 0,$=y?`${X}-label`:void 0;return(0,o.jsx)(ne.FieldTemplate,{label:y,error:b,required:x,layout:S,labelId:$,htmlFor:X,errorId:Z,className:re,children:(0,o.jsx)(te.InputBase,{intent:Y,variant:s,fullWidth:c,width:h,disabled:K,leftIcon:ae,leftIconColor:oe,onLeftIconClick:u,rightIcons:J,suffix:O,suffixId:Q,allowClear:f,hasValue:!!G,onClear:de,styles:k,children:(0,o.jsx)(A?t.Root:`input`,{id:X,ref:U,className:(0,a.default)(`wim-input`,r.default.root,r.default[Y],K&&r.default.disabled,r.default[s],w),disabled:K,value:G,onChange:ue,type:pe,"aria-invalid":Y===`danger`,"aria-describedby":he,"aria-labelledby":y?$:void 0,"aria-required":x,...M,children:A?(0,o.jsx)(t.Slottable,{children:j}):null})})})});s.displayName=`Input`,exports.Input=s,exports.default=s;

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

@@ -47,6 +47,12 @@ export interface InputProps extends Omit<React.ComponentPropsWithoutRef<"input">
     hidePasswordAriaLabel?: string;
     /** Aria label for the right icon button */
     rightIconAriaLabel?: string;
+    /**
+     * Static text shown after the field, inside the same shell — a unit such as
+     * `kg`, `%` or `円`. It is announced with the field via `aria-describedby`,
+     * so the unit does not have to be repeated in the label.
+     */
+    suffix?: React.ReactNode;
     /** Custom styles for internal parts */
     styles?: React.ComponentProps<typeof InputBase>["styles"];
     /** Whether to render as a child element. */