wimui 0.1.0

package/dist/components/form/FloatButton/FloatButton.js

@@ -0,0 +1,68 @@
+"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 r from "./float-button.module.js";
+import i, { useCallback as a, useEffect 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/FloatButton/FloatButton.tsx
+var d = i.forwardRef(({ asChild: i = !1, iconName: d = "CircleIcon", variant: f, intent: p = "default", shape: m = "circle", size: h = "md", label: g, shrink: _ = !1, position: v = "bottom-right", description: y, badge: b, backTop: x = !1, visibilityHeight: S = 400, className: C, style: w, onClick: T, "aria-label": E, children: D, ...O }, k) => {
+	let [A, j] = s(() => x ? typeof window < "u" ? (window.pageYOffset || document.documentElement.scrollTop) > S : !1 : !0), M = a(() => {
+		if (x) {
+			let e = window.pageYOffset || document.documentElement.scrollTop;
+			j(e > S);
+		}
+	}, [x, S]);
+	o(() => {
+		if (x) return window.addEventListener("scroll", M), () => window.removeEventListener("scroll", M);
+	}, [x, M]);
+	let N = (e) => {
+		x && window.scrollTo({
+			top: 0,
+			behavior: "smooth"
+		}), T?.(e);
+	};
+	if (!A && x) return null;
+	let P = i ? e : "button", F = v === "bottom-right" ? r.bottomRight : v === "bottom-left" ? r.bottomLeft : v === "bottom-center" ? r.bottomCenter : v === "top-right" ? r.topRight : v === "top-left" ? r.topLeft : r.static;
+	return /* @__PURE__ */ u(P, {
+		ref: k,
+		type: i ? void 0 : "button",
+		className: c("wim-float-button", r.root, !f && r[p], f === "default" && r.variant_default, f === "primary" && r.primary, f === "glass" && r.glass, p === "danger" && r.danger, p === "success" && r.success, r[m], r[h], F, !!g && r.extended, !!_ && r.shrink, x && !!g && r.backtop, C),
+		style: w,
+		onClick: N,
+		title: typeof y == "string" ? y : void 0,
+		"aria-label": E || (typeof g == "string" ? g : d),
+		...O,
+		children: [
+			/* @__PURE__ */ l(t, { children: D }),
+			/* @__PURE__ */ u("span", {
+				className: r.inner,
+				children: [
+					/* @__PURE__ */ l(n, {
+						name: x ? "ChevronUpIcon" : d,
+						size: h,
+						className: c(x && r.iconBacktop)
+					}),
+					g && /* @__PURE__ */ l("span", {
+						className: r.labelWrapper,
+						children: /* @__PURE__ */ l("span", {
+							className: r.label,
+							children: g
+						})
+					}),
+					b && /* @__PURE__ */ l("span", {
+						className: c(r.badge, b === !0 && r.dot),
+						children: typeof b == "number" ? b : ""
+					})
+				]
+			}),
+			y && /* @__PURE__ */ l("span", {
+				className: r.description,
+				children: y
+			})
+		]
+	});
+});
+d.displayName = "FloatButton";
+//#endregion
+export { d as FloatButton, d as default };

package/dist/components/form/FloatButton/float-button.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1brud_3`,t=`_iconBacktop_1brud_15`,n=`_icon_1brud_15`,r=`_inner_1brud_18`,i=`_labelWrapper_1brud_27`,a=`_label_1brud_27`,o=`_lg_1brud_43`,s=`_md_1brud_49`,c=`_sm_1brud_55`,l=`_extended_1brud_64`,u=`_shrink_1brud_81`,d=`_circle_1brud_95`,f=`_square_1brud_98`,p=`_primary_1brud_101`,m=`_default_intent_1brud_101`,h=`_danger_1brud_110`,g=`_success_1brud_119`,_=`_variant_default_1brud_128`,v=`_glass_1brud_138`,y=`_bottomRight_1brud_149`,b=`_bottomLeft_1brud_154`,x=`_bottomCenter_1brud_159`,S=`_topRight_1brud_171`,C=`_topLeft_1brud_176`,w=`_badge_1brud_184`,T=`_dot_1brud_202`,E=`_description_1brud_212`,D={root:e,iconBacktop:t,icon:n,inner:r,labelWrapper:i,label:a,lg:o,md:s,sm:c,extended:l,shrink:u,circle:d,square:f,primary:p,default_intent:m,default:`_default_1brud_101`,danger:h,success:g,variant_default:_,glass:v,bottomRight:y,bottomLeft:b,bottomCenter:x,topRight:S,topLeft:C,static:`_static_1brud_181`,badge:w,dot:T,description:E};exports.badge=w,exports.bottomCenter=x,exports.bottomLeft=b,exports.bottomRight=y,exports.circle=d,exports.danger=h,exports.default=D,exports.default_intent=m,exports.description=E,exports.dot=T,exports.extended=l,exports.glass=v,exports.icon=n,exports.iconBacktop=t,exports.inner=r,exports.label=a,exports.labelWrapper=i,exports.lg=o,exports.md=s,exports.primary=p,exports.root=e,exports.shrink=u,exports.sm=c,exports.square=f,exports.success=g,exports.topLeft=C,exports.topRight=S,exports.variant_default=_;

package/dist/components/form/FloatButton/float-button.module.js

@@ -0,0 +1,35 @@
+"use client";
+//#region src/components/form/FloatButton/float-button.module.scss
+var e = "_root_1brud_3", t = "_iconBacktop_1brud_15", n = "_icon_1brud_15", r = "_inner_1brud_18", i = "_labelWrapper_1brud_27", a = "_label_1brud_27", o = "_lg_1brud_43", s = "_md_1brud_49", c = "_sm_1brud_55", l = "_extended_1brud_64", u = "_shrink_1brud_81", d = "_circle_1brud_95", f = "_square_1brud_98", p = "_primary_1brud_101", m = "_default_intent_1brud_101", h = "_danger_1brud_110", g = "_success_1brud_119", _ = "_variant_default_1brud_128", v = "_glass_1brud_138", y = "_bottomRight_1brud_149", b = "_bottomLeft_1brud_154", x = "_bottomCenter_1brud_159", S = "_topRight_1brud_171", C = "_topLeft_1brud_176", w = "_badge_1brud_184", T = "_dot_1brud_202", E = "_description_1brud_212", D = {
+	root: e,
+	iconBacktop: t,
+	icon: n,
+	inner: r,
+	labelWrapper: i,
+	label: a,
+	lg: o,
+	md: s,
+	sm: c,
+	extended: l,
+	shrink: u,
+	circle: d,
+	square: f,
+	primary: p,
+	default_intent: m,
+	default: "_default_1brud_101",
+	danger: h,
+	success: g,
+	variant_default: _,
+	glass: v,
+	bottomRight: y,
+	bottomLeft: b,
+	bottomCenter: x,
+	topRight: S,
+	topLeft: C,
+	static: "_static_1brud_181",
+	badge: w,
+	dot: T,
+	description: E
+};
+//#endregion
+export { w as badge, x as bottomCenter, b as bottomLeft, y as bottomRight, d as circle, h as danger, D as default, m as default_intent, E as description, T as dot, l as extended, v as glass, n as icon, t as iconBacktop, r as inner, a as label, i as labelWrapper, o as lg, s as md, p as primary, e as root, u as shrink, c as sm, f as square, g as success, C as topLeft, S as topRight, _ as variant_default };

package/dist/components/form/IconButton/IconButton.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../Button/Button.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=n.default.forwardRef(({iconName:e,className:n,asChild:a=!1,...o},s)=>(0,i.jsx)(t.Button,{ref:s,asChild:a,...o,className:(0,r.default)(`wim-icon-button`,n),icon:e}));a.displayName=`IconButton`,exports.IconButton=a;

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

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { Button } from '../../form/Button/Button';
+import { Icon } from '../../media/Icon/Icon';
+export type IconButtonProps = Omit<React.ComponentProps<typeof Button>, "label" | "iconPosition"> & {
+    /** Icon name to display */
+    iconName: React.ComponentProps<typeof Icon>["name"];
+    /** Accessible label for the icon-only button */
+    "aria-label": string;
+};
+/**
+ * Icon-only button component.
+ * Supports `asChild` via Button (Slot pattern) for polymorphic rendering.
+ */
+export declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/form/IconButton/IconButton.js

@@ -0,0 +1,16 @@
+"use client";
+import { Button as e } from "../Button/Button.js";
+import t from "react";
+import n from "classnames";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/form/IconButton/IconButton.tsx
+var i = t.forwardRef(({ iconName: t, className: i, asChild: a = !1, ...o }, s) => /* @__PURE__ */ r(e, {
+	ref: s,
+	asChild: a,
+	...o,
+	className: n("wim-icon-button", i),
+	icon: t
+}));
+i.displayName = "IconButton";
+//#endregion
+export { i as IconButton };

package/dist/components/form/ImageCropper/ImageCropper.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../Button/Button.cjs"),r=require("../../overlay/Dialog/Dialog.cjs"),i=require("../Slider/Slider.cjs"),a=require("../IconButton/IconButton.cjs"),o=require("./image-cropper.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=s.default.forwardRef(({src:e,aspectRatio:u=1,circular:d=!1,onCrop:f,showRotation:p=!0,showZoom:m=!0,showApplyButton:h=!0,applyLabel:g,onApply:_,className:v,...y},b)=>{let{t:x}=t.useWimTranslation(`form`),[S,C]=(0,s.useState)(1),[w,T]=(0,s.useState)(0),[E,D]=(0,s.useState)({x:0,y:0}),[O,k]=(0,s.useState)(!1),[A,j]=(0,s.useState)({x:0,y:0}),[M,N]=(0,s.useState)(!1),P=(0,s.useRef)(null),F=(0,s.useRef)(null);(0,s.useEffect)(()=>{D({x:0,y:0}),C(1),T(0)},[e]);let I=e=>{k(!0),j({x:e.clientX-E.x,y:e.clientY-E.y})},L=(0,s.useCallback)(e=>{O&&D({x:e.clientX-A.x,y:e.clientY-A.y})},[O,A]),R=(0,s.useCallback)(()=>{k(!1)},[]);(0,s.useEffect)(()=>(O?(window.addEventListener(`mousemove`,L),window.addEventListener(`mouseup`,R)):(window.removeEventListener(`mousemove`,L),window.removeEventListener(`mouseup`,R)),()=>{window.removeEventListener(`mousemove`,L),window.removeEventListener(`mouseup`,R)}),[O,L,R]);let z=()=>{T(e=>(e+90)%360)},B=()=>{N(!0)},V=()=>{let t=e||``;f?.(t),_?.(t),N(!1)};return e?(0,l.jsxs)(`div`,{ref:b,className:(0,c.default)(`wim-image-cropper`,o.default.root,v),...y,children:[(0,l.jsxs)(`div`,{ref:F,className:o.default.viewer,onMouseDown:I,role:`presentation`,children:[(0,l.jsx)(`div`,{className:o.default.imageContainer,children:(0,l.jsx)(`img`,{ref:P,src:e,alt:`Crop target`,className:o.default.image,style:{transform:`translate(${E.x}px, ${E.y}px) rotate(${w}deg) scale(${S})`},draggable:!1})}),(0,l.jsx)(`div`,{className:o.default.overlay,children:(0,l.jsx)(`div`,{className:(0,c.default)(o.default.cropArea,{[o.default.circular]:d}),style:{aspectRatio:u}})})]}),(0,l.jsxs)(`div`,{className:o.default.controls,children:[m&&(0,l.jsx)(`div`,{className:o.default.zoomControl,children:(0,l.jsx)(i.Slider,{min:1,max:3,step:.1,value:S,onChange:e=>C(e),label:x(`image_cropper.zoom`),styles:{root:o.default.zoomSlider}})}),p&&(0,l.jsx)(`div`,{className:o.default.rotationControl,children:(0,l.jsx)(a.IconButton,{iconName:`RefreshIcon`,onClick:z,"aria-label":x(`image_cropper.rotate`),variant:`outline`,size:`sm`})}),h&&(0,l.jsx)(`div`,{className:o.default.applyControl,children:(0,l.jsx)(n.Button,{onClick:B,size:`sm`,variant:`solid`,children:g||x(`image_cropper.apply`)})})]}),(0,l.jsx)(r.Dialog,{open:M,onOpenChange:N,children:(0,l.jsxs)(r.DialogContent,{children:[(0,l.jsx)(r.DialogHeader,{children:(0,l.jsx)(r.DialogTitle,{children:x(`image_cropper.confirm_title`)})}),(0,l.jsx)(r.DialogDescription,{children:x(`image_cropper.confirm_message`)}),(0,l.jsxs)(r.DialogFooter,{children:[(0,l.jsx)(r.DialogClose,{asChild:!0,children:(0,l.jsx)(n.Button,{variant:`ghost`,children:x(`image_cropper.cancel`)})}),(0,l.jsx)(n.Button,{onClick:V,variant:`solid`,children:x(`image_cropper.confirm`)})]})]})})]}):(0,l.jsx)(`div`,{ref:b,className:(0,c.default)(`wim-image-cropper`,o.default.root,o.default.empty,v),...y,children:(0,l.jsx)(`div`,{className:o.default.emptyContent,children:x(`image_cropper.no_image`)})})});u.displayName=`ImageCropper`,exports.ImageCropper=u;

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

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+export interface ImageCropperProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** URL or data URL of the image to crop */
+    src?: string;
+    /** Aspect ratio (width / height); 1 produces a square */
+    aspectRatio?: number;
+    /** Whether to display a circular crop area (for profile images) */
+    circular?: boolean;
+    /** Callback when the crop result is finalized */
+    onCrop?: (dataUrl: string) => void;
+    /** Whether to show the rotation button */
+    showRotation?: boolean;
+    /** Whether to show the zoom slider */
+    showZoom?: boolean;
+    /** Whether to show the apply button */
+    showApplyButton?: boolean;
+    /** Label of the apply button */
+    applyLabel?: string;
+    /** Callback when the crop is applied (after confirming in the dialog) */
+    onApply?: (dataUrl: string) => void;
+}
+/**
+ * Component for cropping and rotating an image.
+ * Suitable for setting user profile images.
+ */
+export declare const ImageCropper: React.ForwardRefExoticComponent<ImageCropperProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/form/ImageCropper/ImageCropper.js

@@ -0,0 +1,150 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import { Button as t } from "../Button/Button.js";
+import { Dialog as n, DialogClose as r, DialogContent as i, DialogDescription as a, DialogFooter as o, DialogHeader as s, DialogTitle as c } from "../../overlay/Dialog/Dialog.js";
+import { Slider as l } from "../Slider/Slider.js";
+import { IconButton as u } from "../IconButton/IconButton.js";
+import d from "./image-cropper.module.js";
+import f, { useCallback as p, useEffect as m, useRef as h, useState as g } from "react";
+import _ from "classnames";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/form/ImageCropper/ImageCropper.tsx
+var b = f.forwardRef(({ src: f, aspectRatio: b = 1, circular: x = !1, onCrop: S, showRotation: C = !0, showZoom: w = !0, showApplyButton: T = !0, applyLabel: E, onApply: D, className: O, ...k }, A) => {
+	let { t: j } = e("form"), [M, N] = g(1), [P, F] = g(0), [I, L] = g({
+		x: 0,
+		y: 0
+	}), [R, z] = g(!1), [B, V] = g({
+		x: 0,
+		y: 0
+	}), [H, U] = g(!1), W = h(null), G = h(null);
+	m(() => {
+		L({
+			x: 0,
+			y: 0
+		}), N(1), F(0);
+	}, [f]);
+	let K = (e) => {
+		z(!0), V({
+			x: e.clientX - I.x,
+			y: e.clientY - I.y
+		});
+	}, q = p((e) => {
+		R && L({
+			x: e.clientX - B.x,
+			y: e.clientY - B.y
+		});
+	}, [R, B]), J = p(() => {
+		z(!1);
+	}, []);
+	m(() => (R ? (window.addEventListener("mousemove", q), window.addEventListener("mouseup", J)) : (window.removeEventListener("mousemove", q), window.removeEventListener("mouseup", J)), () => {
+		window.removeEventListener("mousemove", q), window.removeEventListener("mouseup", J);
+	}), [
+		R,
+		q,
+		J
+	]);
+	let Y = () => {
+		F((e) => (e + 90) % 360);
+	}, X = () => {
+		U(!0);
+	}, Z = () => {
+		let e = f || "";
+		S?.(e), D?.(e), U(!1);
+	};
+	return f ? /* @__PURE__ */ y("div", {
+		ref: A,
+		className: _("wim-image-cropper", d.root, O),
+		...k,
+		children: [
+			/* @__PURE__ */ y("div", {
+				ref: G,
+				className: d.viewer,
+				onMouseDown: K,
+				role: "presentation",
+				children: [/* @__PURE__ */ v("div", {
+					className: d.imageContainer,
+					children: /* @__PURE__ */ v("img", {
+						ref: W,
+						src: f,
+						alt: "Crop target",
+						className: d.image,
+						style: { transform: `translate(${I.x}px, ${I.y}px) rotate(${P}deg) scale(${M})` },
+						draggable: !1
+					})
+				}), /* @__PURE__ */ v("div", {
+					className: d.overlay,
+					children: /* @__PURE__ */ v("div", {
+						className: _(d.cropArea, { [d.circular]: x }),
+						style: { aspectRatio: b }
+					})
+				})]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: d.controls,
+				children: [
+					w && /* @__PURE__ */ v("div", {
+						className: d.zoomControl,
+						children: /* @__PURE__ */ v(l, {
+							min: 1,
+							max: 3,
+							step: .1,
+							value: M,
+							onChange: (e) => N(e),
+							label: j("image_cropper.zoom"),
+							styles: { root: d.zoomSlider }
+						})
+					}),
+					C && /* @__PURE__ */ v("div", {
+						className: d.rotationControl,
+						children: /* @__PURE__ */ v(u, {
+							iconName: "RefreshIcon",
+							onClick: Y,
+							"aria-label": j("image_cropper.rotate"),
+							variant: "outline",
+							size: "sm"
+						})
+					}),
+					T && /* @__PURE__ */ v("div", {
+						className: d.applyControl,
+						children: /* @__PURE__ */ v(t, {
+							onClick: X,
+							size: "sm",
+							variant: "solid",
+							children: E || j("image_cropper.apply")
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ v(n, {
+				open: H,
+				onOpenChange: U,
+				children: /* @__PURE__ */ y(i, { children: [
+					/* @__PURE__ */ v(s, { children: /* @__PURE__ */ v(c, { children: j("image_cropper.confirm_title") }) }),
+					/* @__PURE__ */ v(a, { children: j("image_cropper.confirm_message") }),
+					/* @__PURE__ */ y(o, { children: [/* @__PURE__ */ v(r, {
+						asChild: !0,
+						children: /* @__PURE__ */ v(t, {
+							variant: "ghost",
+							children: j("image_cropper.cancel")
+						})
+					}), /* @__PURE__ */ v(t, {
+						onClick: Z,
+						variant: "solid",
+						children: j("image_cropper.confirm")
+					})] })
+				] })
+			})
+		]
+	}) : /* @__PURE__ */ v("div", {
+		ref: A,
+		className: _("wim-image-cropper", d.root, d.empty, O),
+		...k,
+		children: /* @__PURE__ */ v("div", {
+			className: d.emptyContent,
+			children: j("image_cropper.no_image")
+		})
+	});
+});
+b.displayName = "ImageCropper";
+//#endregion
+export { b as ImageCropper };

package/dist/components/form/ImageCropper/image-cropper.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_13usn_3`,t=`_viewer_13usn_13`,n=`_imageContainer_13usn_24`,r=`_image_13usn_24`,i=`_overlay_13usn_36`,a=`_cropArea_13usn_45`,o=`_circular_13usn_51`,s=`_controls_13usn_54`,c=`_zoomControl_13usn_62`,l=`_zoomSlider_13usn_65`,u=`_rotationControl_13usn_68`,d=`_applyControl_13usn_71`,f=`_empty_13usn_75`,p=`_emptyContent_13usn_84`,m={root:e,viewer:t,imageContainer:n,image:r,overlay:i,cropArea:a,circular:o,controls:s,zoomControl:c,zoomSlider:l,rotationControl:u,applyControl:d,empty:f,emptyContent:p};exports.applyControl=d,exports.circular=o,exports.controls=s,exports.cropArea=a,exports.default=m,exports.empty=f,exports.emptyContent=p,exports.image=r,exports.imageContainer=n,exports.overlay=i,exports.root=e,exports.rotationControl=u,exports.viewer=t,exports.zoomControl=c,exports.zoomSlider=l;

package/dist/components/form/ImageCropper/image-cropper.module.js

@@ -0,0 +1,20 @@
+"use client";
+//#region src/components/form/ImageCropper/image-cropper.module.scss
+var e = "_root_13usn_3", t = "_viewer_13usn_13", n = "_imageContainer_13usn_24", r = "_image_13usn_24", i = "_overlay_13usn_36", a = "_cropArea_13usn_45", o = "_circular_13usn_51", s = "_controls_13usn_54", c = "_zoomControl_13usn_62", l = "_zoomSlider_13usn_65", u = "_rotationControl_13usn_68", d = "_applyControl_13usn_71", f = "_empty_13usn_75", p = "_emptyContent_13usn_84", m = {
+	root: e,
+	viewer: t,
+	imageContainer: n,
+	image: r,
+	overlay: i,
+	cropArea: a,
+	circular: o,
+	controls: s,
+	zoomControl: c,
+	zoomSlider: l,
+	rotationControl: u,
+	applyControl: d,
+	empty: f,
+	emptyContent: p
+};
+//#endregion
+export { d as applyControl, o as circular, s as controls, a as cropArea, m as default, f as empty, p as emptyContent, r as image, n as imageContainer, i as overlay, e as root, u as rotationControl, t as viewer, c as zoomControl, l as zoomSlider };

package/dist/components/form/InlineEdit/InlineEdit.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../FieldTemplate/FieldTemplate.cjs"),r=require("../Input/Input.cjs"),i=require("../IconButton/IconButton.cjs"),a=require("./inline-edit.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=o.default.forwardRef(({value:e,defaultValue:l,onChange:u,onSave:d,onCancel:f,onEdit:p,placeholder:m,disabled:h=!1,fullWidth:g=!1,label:_,className:v,...y},b)=>{let{t:x}=t.useWimTranslation(`common`),[S,C]=(0,o.useState)(!1),[w,T]=(0,o.useState)(l??``),[E,D]=(0,o.useState)(l??``),O=(0,o.useRef)(null),k=e!==void 0,A=k?e:E,j=()=>{h||(k||D(w),C(!0),p?.())},M=()=>{h||(k||T(A),C(!1),d?.(A))},N=()=>{h||(k||D(w),C(!1),f?.())},P=e=>{let t=e.target.value;k||D(t),u?.(t)},F=e=>{e.key===`Enter`?(e.preventDefault(),M()):e.key===`Escape`&&(e.preventDefault(),N())};return(0,o.useEffect)(()=>{S&&O.current&&O.current.focus()},[S]),(0,c.jsx)(n.FieldTemplate,{label:_,className:v,children:(0,c.jsx)(`div`,{ref:b,className:(0,s.default)(`wim-inline-edit`,a.default.root,g&&a.default.fullWidth,h&&a.default.disabled),...y,children:S?(0,c.jsxs)(`div`,{className:a.default.editWrapper,children:[(0,c.jsx)(r.Input,{ref:O,value:A,onChange:P,onKeyDown:F,disabled:h,placeholder:m,fullWidth:g,className:a.default.input}),(0,c.jsxs)(`div`,{className:a.default.editActions,children:[(0,c.jsx)(i.IconButton,{iconName:`CheckIcon`,intent:`success`,variant:`outline`,"aria-label":x(`action.save`),onClick:M,disabled:h}),(0,c.jsx)(i.IconButton,{iconName:`CloseIcon`,intent:`default`,variant:`outline`,"aria-label":x(`action.cancel`),onClick:N,disabled:h})]})]}):(0,c.jsxs)(`div`,{className:a.default.preview,onClick:j,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),j())},tabIndex:h?-1:0,role:`button`,"aria-disabled":h,children:[(0,c.jsx)(`span`,{className:(0,s.default)(a.default.text,!A&&a.default.placeholder),children:A||m||`\xA0`}),(0,c.jsx)(`span`,{className:a.default.editIconWrapper,children:(0,c.jsx)(i.IconButton,{iconName:`EditIcon`,variant:`ghost`,tabIndex:-1,"aria-label":x(`action.edit`),"aria-hidden":`true`,asChild:!0,children:(0,c.jsx)(`span`,{})})})]})})})});l.displayName=`InlineEdit`,exports.InlineEdit=l;

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

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+export type InlineEditProps = Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> & {
+    /** Current text (controlled) */
+    value?: string;
+    /** Initial text (uncontrolled) */
+    defaultValue?: string;
+    /** Callback when the text changes while editing */
+    onChange?: (value: string) => void;
+    /** Callback when the edit is confirmed */
+    onSave?: (value: string) => void;
+    /** Callback when the edit is cancelled */
+    onCancel?: () => void;
+    /** Callback when editing starts */
+    onEdit?: () => void;
+    /** Placeholder shown when the text is empty */
+    placeholder?: string;
+    /** Whether editing is disabled */
+    disabled?: boolean;
+    /** Whether to take full width of parent */
+    fullWidth?: boolean;
+    /** Accessible label for the text and edit button */
+    label?: React.ReactNode;
+};
+/**
+ * Component for editing text inline.
+ *
+ * Composition Contract:
+ * - Managed by: App consumption
+ * - Scroll lock: No
+ */
+export declare const InlineEdit: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "defaultValue" | "onChange"> & {
+    /** Current text (controlled) */
+    value?: string;
+    /** Initial text (uncontrolled) */
+    defaultValue?: string;
+    /** Callback when the text changes while editing */
+    onChange?: (value: string) => void;
+    /** Callback when the edit is confirmed */
+    onSave?: (value: string) => void;
+    /** Callback when the edit is cancelled */
+    onCancel?: () => void;
+    /** Callback when editing starts */
+    onEdit?: () => void;
+    /** Placeholder shown when the text is empty */
+    placeholder?: string;
+    /** Whether editing is disabled */
+    disabled?: boolean;
+    /** Whether to take full width of parent */
+    fullWidth?: boolean;
+    /** Accessible label for the text and edit button */
+    label?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/form/InlineEdit/InlineEdit.js

@@ -0,0 +1,92 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import { FieldTemplate as t } from "../FieldTemplate/FieldTemplate.js";
+import { Input as n } from "../Input/Input.js";
+import { IconButton as r } from "../IconButton/IconButton.js";
+import i from "./inline-edit.module.js";
+import a, { useEffect as o, useRef as s, useState as c } from "react";
+import l from "classnames";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/form/InlineEdit/InlineEdit.tsx
+var f = a.forwardRef(({ value: a, defaultValue: f, onChange: p, onSave: m, onCancel: h, onEdit: g, placeholder: _, disabled: v = !1, fullWidth: y = !1, label: b, className: x, ...S }, C) => {
+	let { t: w } = e("common"), [T, E] = c(!1), [D, O] = c(f ?? ""), [k, A] = c(f ?? ""), j = s(null), M = a !== void 0, N = M ? a : k, P = () => {
+		v || (M || A(D), E(!0), g?.());
+	}, F = () => {
+		v || (M || O(N), E(!1), m?.(N));
+	}, I = () => {
+		v || (M || A(D), E(!1), h?.());
+	}, L = (e) => {
+		let t = e.target.value;
+		M || A(t), p?.(t);
+	}, R = (e) => {
+		e.key === "Enter" ? (e.preventDefault(), F()) : e.key === "Escape" && (e.preventDefault(), I());
+	};
+	return o(() => {
+		T && j.current && j.current.focus();
+	}, [T]), /* @__PURE__ */ u(t, {
+		label: b,
+		className: x,
+		children: /* @__PURE__ */ u("div", {
+			ref: C,
+			className: l("wim-inline-edit", i.root, y && i.fullWidth, v && i.disabled),
+			...S,
+			children: T ? /* @__PURE__ */ d("div", {
+				className: i.editWrapper,
+				children: [/* @__PURE__ */ u(n, {
+					ref: j,
+					value: N,
+					onChange: L,
+					onKeyDown: R,
+					disabled: v,
+					placeholder: _,
+					fullWidth: y,
+					className: i.input
+				}), /* @__PURE__ */ d("div", {
+					className: i.editActions,
+					children: [/* @__PURE__ */ u(r, {
+						iconName: "CheckIcon",
+						intent: "success",
+						variant: "outline",
+						"aria-label": w("action.save"),
+						onClick: F,
+						disabled: v
+					}), /* @__PURE__ */ u(r, {
+						iconName: "CloseIcon",
+						intent: "default",
+						variant: "outline",
+						"aria-label": w("action.cancel"),
+						onClick: I,
+						disabled: v
+					})]
+				})]
+			}) : /* @__PURE__ */ d("div", {
+				className: i.preview,
+				onClick: P,
+				onKeyDown: (e) => {
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), P());
+				},
+				tabIndex: v ? -1 : 0,
+				role: "button",
+				"aria-disabled": v,
+				children: [/* @__PURE__ */ u("span", {
+					className: l(i.text, !N && i.placeholder),
+					children: N || _ || "\xA0"
+				}), /* @__PURE__ */ u("span", {
+					className: i.editIconWrapper,
+					children: /* @__PURE__ */ u(r, {
+						iconName: "EditIcon",
+						variant: "ghost",
+						tabIndex: -1,
+						"aria-label": w("action.edit"),
+						"aria-hidden": "true",
+						asChild: !0,
+						children: /* @__PURE__ */ u("span", {})
+					})
+				})]
+			})
+		})
+	});
+});
+f.displayName = "InlineEdit";
+//#endregion
+export { f as InlineEdit };

package/dist/components/form/InlineEdit/inline-edit.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1gg9o_2`,t=`_fullWidth_1gg9o_9`,n=`_disabled_1gg9o_12`,r=`_text_1gg9o_16`,i=`_placeholder_1gg9o_17`,a=`_editIconWrapper_1gg9o_20`,o=`_editWrapper_1gg9o_24`,s=`_input_1gg9o_29`,c=`_editActions_1gg9o_33`,l=`_preview_1gg9o_39`,u={root:e,fullWidth:t,disabled:n,text:r,placeholder:i,editIconWrapper:a,editWrapper:o,input:s,editActions:c,preview:l};exports.default=u,exports.disabled=n,exports.editActions=c,exports.editIconWrapper=a,exports.editWrapper=o,exports.fullWidth=t,exports.input=s,exports.placeholder=i,exports.preview=l,exports.root=e,exports.text=r;

package/dist/components/form/InlineEdit/inline-edit.module.js

@@ -0,0 +1,16 @@
+"use client";
+//#region src/components/form/InlineEdit/inline-edit.module.scss
+var e = "_root_1gg9o_2", t = "_fullWidth_1gg9o_9", n = "_disabled_1gg9o_12", r = "_text_1gg9o_16", i = "_placeholder_1gg9o_17", a = "_editIconWrapper_1gg9o_20", o = "_editWrapper_1gg9o_24", s = "_input_1gg9o_29", c = "_editActions_1gg9o_33", l = "_preview_1gg9o_39", u = {
+	root: e,
+	fullWidth: t,
+	disabled: n,
+	text: r,
+	placeholder: i,
+	editIconWrapper: a,
+	editWrapper: o,
+	input: s,
+	editActions: c,
+	preview: l
+};
+//#endregion
+export { u as default, n as disabled, c as editActions, a as editIconWrapper, o as editWrapper, t as fullWidth, s as input, i as placeholder, l as preview, e as root, r as text };

package/dist/components/form/Input/Input.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("../../../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;

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

@@ -0,0 +1,59 @@
+import { default as React } from 'react';
+import { Icon } from '../../media/Icon/Icon';
+import { InputBase } from '../InputBase';
+import { FieldIntent, FieldVariant, FieldWidth } from '../../../types/tokens';
+export interface InputProps extends Omit<React.ComponentPropsWithoutRef<"input">, "prefix"> {
+    /** 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;
+    /** Icon name to display on the left side */
+    leftIcon?: React.ComponentProps<typeof Icon>["name"];
+    /** Icon name to display on the right side */
+    rightIcon?: React.ComponentProps<typeof Icon>["name"];
+    /** Color of the left icon */
+    leftIconColor?: React.ComponentProps<typeof Icon>["color"];
+    /** Color of the right icon */
+    rightIconColor?: React.ComponentProps<typeof Icon>["color"];
+    /** Callback when the left icon is clicked (renders the icon as a button) */
+    onLeftIconClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Callback when the right icon is clicked (renders the icon as a button) */
+    onRightIconClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Whether to show a clear button when value is present */
+    allowClear?: boolean;
+    /** Whether to show the visibility toggle when type is "password" */
+    showPasswordToggle?: boolean;
+    /** Additional class name for the right icon */
+    rightIconClassName?: string;
+    /** Whether to rotate the right icon 180 degrees (e.g. for an open state) */
+    rightIconRotated?: boolean;
+    /** Fixed width of the field (width token, CSS value, or number in px) */
+    width?: FieldWidth | string | number;
+    /** 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";
+    /** Additional class name for the inner input element */
+    inputClassName?: string;
+    /** Aria label for the show-password toggle */
+    showPasswordAriaLabel?: string;
+    /** Aria label for the hide-password toggle */
+    hidePasswordAriaLabel?: string;
+    /** Aria label for the right icon button */
+    rightIconAriaLabel?: string;
+    /** Custom styles for internal parts */
+    styles?: React.ComponentProps<typeof InputBase>["styles"];
+    /** Whether to render as a child element. */
+    asChild?: boolean;
+}
+/**
+ * Basic component for accepting user input.
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;