wimui 0.1.0

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

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export type ScrollProgressProps = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Color of the progress bar.
+     * @default "primary"
+     */
+    color?: "primary" | "secondary" | "success" | "warning" | "danger";
+    /**
+     * Element whose scroll position is tracked. Defaults to `window`.
+     */
+    target?: React.RefObject<HTMLElement | null>;
+};
+/**
+ * Visualizes reading progress or scroll position as a bar.
+ */
+export declare const ScrollProgress: ({ color, target, className, "aria-label": ariaLabel, ...props }: ScrollProgressProps) => React.JSX.Element;

package/dist/components/feedback/ScrollProgress/ScrollProgress.js

@@ -0,0 +1,40 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import t from "./scrollprogress.module.js";
+import { useEffect as n, useState as r } from "react";
+import i from "classnames";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/feedback/ScrollProgress/ScrollProgress.tsx
+var o = ({ color: o = "primary", target: s, className: c, "aria-label": l, ...u }) => {
+	let { t: d } = e("common"), [f, p] = r(0);
+	return n(() => {
+		let e = () => {
+			let e = 0;
+			if (s && s.current) {
+				let t = s.current, n = t.scrollHeight - t.clientHeight;
+				n > 0 && (e = t.scrollTop / n * 100);
+			} else {
+				let t = document.documentElement.scrollHeight - window.innerHeight;
+				t > 0 && (e = window.scrollY / t * 100);
+			}
+			p(e);
+		}, t = s && s.current ? s.current : window;
+		return t.addEventListener("scroll", e), e(), () => {
+			t.removeEventListener("scroll", e);
+		};
+	}, [s]), /* @__PURE__ */ a("div", {
+		className: i("wim-scroll-progress", t.root, o && t[o], c),
+		role: "progressbar",
+		"aria-valuenow": Math.round(f),
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-label": l ?? d("a11y.scroll_progress"),
+		...u,
+		children: /* @__PURE__ */ a("div", {
+			className: t.bar,
+			style: { width: `${f}%` }
+		})
+	});
+};
+//#endregion
+export { o as ScrollProgress };

package/dist/components/feedback/ScrollProgress/scrollprogress.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1m9px_2`,t=`_bar_1m9px_11`,n=`_secondary_1m9px_16`,r=`_success_1m9px_19`,i=`_warning_1m9px_22`,a=`_danger_1m9px_25`,o={root:e,bar:t,secondary:n,success:r,warning:i,danger:a};exports.bar=t,exports.danger=a,exports.default=o,exports.root=e,exports.secondary=n,exports.success=r,exports.warning=i;

package/dist/components/feedback/ScrollProgress/scrollprogress.module.js

@@ -0,0 +1,12 @@
+"use client";
+//#region src/components/feedback/ScrollProgress/scrollprogress.module.scss
+var e = "_root_1m9px_2", t = "_bar_1m9px_11", n = "_secondary_1m9px_16", r = "_success_1m9px_19", i = "_warning_1m9px_22", a = "_danger_1m9px_25", o = {
+	root: e,
+	bar: t,
+	secondary: n,
+	success: r,
+	warning: i,
+	danger: a
+};
+//#endregion
+export { t as bar, a as danger, o as default, e as root, n as secondary, r as success, i as warning };

package/dist/components/feedback/Skeleton/Skeleton.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./skeleton.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=({variant:e=`text`,animation:n=`pulse`,width:a,height:o,style:s,className:c,...l})=>{let u={width:a,height:o,...s};return(0,i.jsx)(`div`,{className:(0,r.default)(`wim-skeleton`,t.default.root,t.default[e],n!==`none`&&t.default[n],c),style:u,"aria-hidden":`true`,"aria-busy":`true`,...l})};exports.Skeleton=a;

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

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+type SkeletonProps = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Shape of the skeleton.
+     * - `text`: shaped like a line of text.
+     * - `rect`: rectangle.
+     * - `circle`: circle.
+     * @default "text"
+     */
+    variant?: "text" | "rect" | "circle";
+    /**
+     * Type of animation.
+     * - `pulse`: slow fade in and out.
+     * - `wave`: wave moving from left to right.
+     * - `none`: no animation.
+     * @default "pulse"
+     */
+    animation?: "pulse" | "wave" | "none";
+    /**
+     * Width, including a CSS unit (px, %, rem, etc.).
+     */
+    width?: string | number;
+    /**
+     * Height, including a CSS unit (px, %, rem, etc.).
+     */
+    height?: string | number;
+};
+/**
+ * Placeholder displayed while content is loading.
+ */
+export declare const Skeleton: ({ variant, animation, width, height, style, className, ...props }: SkeletonProps) => React.JSX.Element;
+export {};

package/dist/components/feedback/Skeleton/Skeleton.js

@@ -0,0 +1,22 @@
+"use client";
+import e from "./skeleton.module.js";
+import "react";
+import t from "classnames";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/feedback/Skeleton/Skeleton.tsx
+var r = ({ variant: r = "text", animation: i = "pulse", width: a, height: o, style: s, className: c, ...l }) => {
+	let u = {
+		width: a,
+		height: o,
+		...s
+	};
+	return /* @__PURE__ */ n("div", {
+		className: t("wim-skeleton", e.root, e[r], i !== "none" && e[i], c),
+		style: u,
+		"aria-hidden": "true",
+		"aria-busy": "true",
+		...l
+	});
+};
+//#endregion
+export { r as Skeleton };

package/dist/components/feedback/Skeleton/skeleton.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1g2xz_2`,t=`_text_1g2xz_9`,n=`_rect_1g2xz_24`,r=`_circle_1g2xz_27`,i=`_pulse_1g2xz_30`,a=`_wave_1g2xz_33`,o={root:e,text:t,rect:n,circle:r,pulse:i,"skeleton-pulse":`_skeleton-pulse_1g2xz_1`,wave:a,"skeleton-wave":`_skeleton-wave_1g2xz_1`};exports.circle=r,exports.default=o,exports.pulse=i,exports.rect=n,exports.root=e,exports.text=t,exports.wave=a;

package/dist/components/feedback/Skeleton/skeleton.module.js

@@ -0,0 +1,14 @@
+"use client";
+//#region src/components/feedback/Skeleton/skeleton.module.scss
+var e = "_root_1g2xz_2", t = "_text_1g2xz_9", n = "_rect_1g2xz_24", r = "_circle_1g2xz_27", i = "_pulse_1g2xz_30", a = "_wave_1g2xz_33", o = {
+	root: e,
+	text: t,
+	rect: n,
+	circle: r,
+	pulse: i,
+	"skeleton-pulse": "_skeleton-pulse_1g2xz_1",
+	wave: a,
+	"skeleton-wave": "_skeleton-wave_1g2xz_1"
+};
+//#endregion
+export { r as circle, o as default, i as pulse, n as rect, e as root, t as text, a as wave };

package/dist/components/feedback/Snackbar/Snackbar.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../form/Button/Button.cjs"),n=require("../../_internal/FeedbackIcon.cjs"),r=require("../../_internal/FeedbackCloseButton.cjs"),i=require("./snackbar.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=({message:e,open:c=!1,intent:l=`info`,position:u=`bottom-center`,autoHideDuration:d=5e3,showCloseButton:f=!1,actionLabel:p,onAction:m,onClose:h,className:g})=>{let[_,v]=(0,a.useState)(!1),[y,b]=(0,a.useState)(!1),[x,S]=(0,a.useState)(c);c!==x&&(S(c),c?b(!0):v(!1)),(0,a.useEffect)(()=>{if(c){let e=setTimeout(()=>v(!0),10);return()=>clearTimeout(e)}else{let e=setTimeout(()=>b(!1),300);return()=>clearTimeout(e)}},[c]);let C=(0,a.useCallback)(()=>{v(!1),setTimeout(()=>{h&&h()},300)},[h]),[w,T]=(0,a.useState)(d),[E,D]=(0,a.useState)(()=>Date.now()),[O,k]=(0,a.useState)(!1);(0,a.useEffect)(()=>{if(c&&d>0&&!O){let e=setTimeout(()=>{C()},w);return D(Date.now()),()=>clearTimeout(e)}},[c,d,C,O,w]);let A=()=>{if(d>0){k(!0);let e=Date.now()-E;T(t=>Math.max(0,t-e))}},j=()=>{d>0&&(D(Date.now()),k(!1))},M=()=>{m&&m()};if(!y&&!c)return null;let N=l===`danger`||l===`warning`?`alert`:`status`,P=l===`danger`||l===`warning`?`assertive`:`polite`;return(0,s.jsx)(`div`,{className:(0,o.default)(i.default.wrapper,i.default[u]),children:(0,s.jsxs)(`div`,{className:(0,o.default)(`wim-snackbar`,i.default.root,l&&i.default[l],_&&i.default.visible,f&&i.default.hasCloseButton,g),role:N,"aria-live":P,onMouseEnter:A,onMouseLeave:j,onFocus:A,onBlur:j,children:[(0,s.jsxs)(`div`,{className:i.default.content,children:[l!==`info`&&(0,s.jsx)(`div`,{className:i.default.icon,children:(0,s.jsx)(n.FeedbackIcon,{intent:l,size:`sm`})}),(0,s.jsx)(`span`,{className:i.default.message,children:e})]}),(0,s.jsxs)(`div`,{className:i.default.actions,children:[p&&(0,s.jsx)(t.Button,{variant:`ghost`,size:`sm`,onClick:M,className:i.default.actionButton,children:p}),(0,s.jsx)(r.FeedbackCloseButton,{onClose:f?C:void 0,className:i.default.closeButton,size:`sm`})]})]})})},l=(0,a.createContext)(void 0),u=({children:e})=>{let[t,n]=(0,a.useState)(null),[r,i]=(0,a.useState)(!1),o=(0,a.useCallback)(e=>{let r=Math.random().toString(36).substr(2,9),a=typeof e==`string`?{message:e}:e;i(!1),setTimeout(()=>{n({...a,id:r}),i(!0)},t?300:0)},[t]),u=(0,a.useCallback)(()=>{i(!1)},[]);return(0,s.jsxs)(l.Provider,{value:{showMessage:o,hideMessage:u},children:[e,t&&(0,s.jsx)(c,{...t,open:r,onClose:()=>{i(!1),t.onClose&&t.onClose()}})]})},d=()=>{let e=(0,a.useContext)(l);if(!e)throw Error(`useSnackbar must be used within a SnackbarProvider`);return e};exports.Snackbar=c,exports.SnackbarProvider=u,exports.useSnackbar=d;

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

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+import { FeedbackIntent } from '../../../types/tokens';
+export type SnackbarPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export interface SnackbarProps {
+    /** Message displayed in the snackbar */
+    message: string;
+    /**
+     * Whether the snackbar is shown
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Intent (semantic state)
+     * @default "info"
+     */
+    intent?: FeedbackIntent;
+    /**
+     * Position on the screen
+     * @default "bottom-center"
+     */
+    position?: SnackbarPosition;
+    /**
+     * Time in milliseconds before the snackbar closes automatically. Set 0 to disable auto-close.
+     * @default 5000
+     */
+    autoHideDuration?: number;
+    /**
+     * Whether to show a close button
+     * @default false
+     */
+    showCloseButton?: boolean;
+    /** Label of the action button */
+    actionLabel?: string;
+    /** Called when the action button is clicked */
+    onAction?: () => void;
+    /** Called when the snackbar is closed */
+    onClose?: () => void;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Snackbar for notifying the user with a short message.
+ */
+export declare const Snackbar: ({ message, open, intent, position, autoHideDuration, showCloseButton, actionLabel, onAction, onClose, className, }: SnackbarProps) => React.JSX.Element | null;
+type SnackbarContextType = {
+    showMessage: (props: string | Omit<SnackbarProps, "open" | "onClose">) => void;
+    hideMessage: () => void;
+};
+export declare const SnackbarProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const useSnackbar: () => SnackbarContextType;
+export {};

package/dist/components/feedback/Snackbar/Snackbar.js

@@ -0,0 +1,122 @@
+"use client";
+import { Button as e } from "../../form/Button/Button.js";
+import { FeedbackIcon as t } from "../../_internal/FeedbackIcon.js";
+import { FeedbackCloseButton as n } from "../../_internal/FeedbackCloseButton.js";
+import r from "./snackbar.module.js";
+import { createContext as i, useCallback as a, useContext as o, useEffect 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/feedback/Snackbar/Snackbar.tsx
+var f = ({ message: i, open: o = !1, intent: f = "info", position: p = "bottom-center", autoHideDuration: m = 5e3, showCloseButton: h = !1, actionLabel: g, onAction: _, onClose: v, className: y }) => {
+	let [b, x] = c(!1), [S, C] = c(!1), [w, T] = c(o);
+	o !== w && (T(o), o ? C(!0) : x(!1)), s(() => {
+		if (o) {
+			let e = setTimeout(() => x(!0), 10);
+			return () => clearTimeout(e);
+		} else {
+			let e = setTimeout(() => C(!1), 300);
+			return () => clearTimeout(e);
+		}
+	}, [o]);
+	let E = a(() => {
+		x(!1), setTimeout(() => {
+			v && v();
+		}, 300);
+	}, [v]), [D, O] = c(m), [k, A] = c(() => Date.now()), [j, M] = c(!1);
+	s(() => {
+		if (o && m > 0 && !j) {
+			let e = setTimeout(() => {
+				E();
+			}, D);
+			return A(Date.now()), () => clearTimeout(e);
+		}
+	}, [
+		o,
+		m,
+		E,
+		j,
+		D
+	]);
+	let N = () => {
+		if (m > 0) {
+			M(!0);
+			let e = Date.now() - k;
+			O((t) => Math.max(0, t - e));
+		}
+	}, P = () => {
+		m > 0 && (A(Date.now()), M(!1));
+	}, F = () => {
+		_ && _();
+	};
+	if (!S && !o) return null;
+	let I = f === "danger" || f === "warning" ? "alert" : "status", L = f === "danger" || f === "warning" ? "assertive" : "polite";
+	return /* @__PURE__ */ u("div", {
+		className: l(r.wrapper, r[p]),
+		children: /* @__PURE__ */ d("div", {
+			className: l("wim-snackbar", r.root, f && r[f], b && r.visible, h && r.hasCloseButton, y),
+			role: I,
+			"aria-live": L,
+			onMouseEnter: N,
+			onMouseLeave: P,
+			onFocus: N,
+			onBlur: P,
+			children: [/* @__PURE__ */ d("div", {
+				className: r.content,
+				children: [f !== "info" && /* @__PURE__ */ u("div", {
+					className: r.icon,
+					children: /* @__PURE__ */ u(t, {
+						intent: f,
+						size: "sm"
+					})
+				}), /* @__PURE__ */ u("span", {
+					className: r.message,
+					children: i
+				})]
+			}), /* @__PURE__ */ d("div", {
+				className: r.actions,
+				children: [g && /* @__PURE__ */ u(e, {
+					variant: "ghost",
+					size: "sm",
+					onClick: F,
+					className: r.actionButton,
+					children: g
+				}), /* @__PURE__ */ u(n, {
+					onClose: h ? E : void 0,
+					className: r.closeButton,
+					size: "sm"
+				})]
+			})]
+		})
+	});
+}, p = i(void 0), m = ({ children: e }) => {
+	let [t, n] = c(null), [r, i] = c(!1), o = a((e) => {
+		let r = Math.random().toString(36).substr(2, 9), a = typeof e == "string" ? { message: e } : e;
+		i(!1), setTimeout(() => {
+			n({
+				...a,
+				id: r
+			}), i(!0);
+		}, t ? 300 : 0);
+	}, [t]), s = a(() => {
+		i(!1);
+	}, []);
+	return /* @__PURE__ */ d(p.Provider, {
+		value: {
+			showMessage: o,
+			hideMessage: s
+		},
+		children: [e, t && /* @__PURE__ */ u(f, {
+			...t,
+			open: r,
+			onClose: () => {
+				i(!1), t.onClose && t.onClose();
+			}
+		})]
+	});
+}, h = () => {
+	let e = o(p);
+	if (!e) throw Error("useSnackbar must be used within a SnackbarProvider");
+	return e;
+};
+//#endregion
+export { f as Snackbar, m as SnackbarProvider, h as useSnackbar };

package/dist/components/feedback/Snackbar/snackbar.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_wrapper_mqx6a_2`,t=`_root_mqx6a_40`,n=`_hasCloseButton_mqx6a_57`,r=`_visible_mqx6a_72`,i=`_content_mqx6a_76`,a=`_icon_mqx6a_82`,o=`_message_mqx6a_88`,s=`_actions_mqx6a_93`,c=`_actionButton_mqx6a_99`,l=`_closeButton_mqx6a_103`,u=`_success_mqx6a_127`,d=`_danger_mqx6a_132`,f=`_warning_mqx6a_137`,p=`_info_mqx6a_142`,m={wrapper:e,"top-left":`_top-left_mqx6a_10`,"top-center":`_top-center_mqx6a_15`,"top-right":`_top-right_mqx6a_20`,"bottom-left":`_bottom-left_mqx6a_25`,"bottom-center":`_bottom-center_mqx6a_30`,"bottom-right":`_bottom-right_mqx6a_35`,root:t,hasCloseButton:n,visible:r,content:i,icon:a,message:o,actions:s,actionButton:c,closeButton:l,success:u,danger:d,warning:f,info:p};exports.actionButton=c,exports.actions=s,exports.closeButton=l,exports.content=i,exports.danger=d,exports.default=m,exports.hasCloseButton=n,exports.icon=a,exports.info=p,exports.message=o,exports.root=t,exports.success=u,exports.visible=r,exports.warning=f,exports.wrapper=e;

package/dist/components/feedback/Snackbar/snackbar.module.js

@@ -0,0 +1,26 @@
+"use client";
+//#region src/components/feedback/Snackbar/snackbar.module.scss
+var e = "_wrapper_mqx6a_2", t = "_root_mqx6a_40", n = "_hasCloseButton_mqx6a_57", r = "_visible_mqx6a_72", i = "_content_mqx6a_76", a = "_icon_mqx6a_82", o = "_message_mqx6a_88", s = "_actions_mqx6a_93", c = "_actionButton_mqx6a_99", l = "_closeButton_mqx6a_103", u = "_success_mqx6a_127", d = "_danger_mqx6a_132", f = "_warning_mqx6a_137", p = "_info_mqx6a_142", m = {
+	wrapper: e,
+	"top-left": "_top-left_mqx6a_10",
+	"top-center": "_top-center_mqx6a_15",
+	"top-right": "_top-right_mqx6a_20",
+	"bottom-left": "_bottom-left_mqx6a_25",
+	"bottom-center": "_bottom-center_mqx6a_30",
+	"bottom-right": "_bottom-right_mqx6a_35",
+	root: t,
+	hasCloseButton: n,
+	visible: r,
+	content: i,
+	icon: a,
+	message: o,
+	actions: s,
+	actionButton: c,
+	closeButton: l,
+	success: u,
+	danger: d,
+	warning: f,
+	info: p
+};
+//#endregion
+export { c as actionButton, s as actions, l as closeButton, i as content, d as danger, m as default, n as hasCloseButton, a as icon, p as info, o as message, t as root, u as success, r as visible, f as warning, e as wrapper };

package/dist/components/feedback/Spinner/Spinner.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../utilities/style-utils.cjs"),n=require("./spinner.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=({size:e=`md`,color:r=`primary`,label:o,labelPosition:s=`right`,className:c,style:l,...u})=>{let d=typeof r==`string`&&[`primary`,`secondary`,`success`,`warning`,`danger`,`neutral`].includes(r);return(0,a.jsxs)(`div`,{className:(0,i.default)(n.default.container,o&&n.default[`label-${s}`],c),role:`status`,"aria-live":`polite`,style:{color:d?void 0:t.getColorValue(r),...l},...u,children:[(0,a.jsxs)(`svg`,{className:(0,i.default)(`wim-spinner`,n.default.root,n.default[e],d&&n.default[r]),viewBox:`0 0 50 50`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,a.jsx)(`circle`,{className:n.default.track,cx:`25`,cy:`25`,r:`20`,stroke:`currentColor`,strokeWidth:`4`}),(0,a.jsx)(`circle`,{className:n.default.head,cx:`25`,cy:`25`,r:`20`,stroke:`currentColor`,strokeWidth:`4`,strokeLinecap:`round`,strokeDasharray:`126`,strokeDashoffset:`100`})]}),o&&(0,a.jsx)(`span`,{className:n.default.label,children:o})]})};exports.Spinner=o;

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

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { WimColor, ComponentSizeExtended } from '../../../types/tokens';
+type SpinnerProps = React.ComponentPropsWithoutRef<"div"> & {
+    /**
+     * Size of the spinner.
+     * @default "md"
+     */
+    size?: ComponentSizeExtended;
+    /**
+     * Color of the spinner. Accepts a design token color name or "currentColor".
+     * @default "primary"
+     */
+    color?: "currentColor" | WimColor;
+    /**
+     * Text label displayed next to the spinner.
+     */
+    label?: string;
+    /**
+     * Position of the label relative to the spinner.
+     * @default "right"
+     */
+    labelPosition?: "right" | "bottom";
+};
+/**
+ * Rotating indicator that shows something is loading.
+ */
+export declare const Spinner: ({ size, color, label, labelPosition, className, style, ...props }: SpinnerProps) => React.JSX.Element;
+export {};

package/dist/components/feedback/Spinner/Spinner.js

@@ -0,0 +1,56 @@
+"use client";
+import { getColorValue as e } from "../../../utilities/style-utils.js";
+import t from "./spinner.module.js";
+import "react";
+import n from "classnames";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/feedback/Spinner/Spinner.tsx
+var a = ({ size: a = "md", color: o = "primary", label: s, labelPosition: c = "right", className: l, style: u, ...d }) => {
+	let f = typeof o == "string" && [
+		"primary",
+		"secondary",
+		"success",
+		"warning",
+		"danger",
+		"neutral"
+	].includes(o);
+	return /* @__PURE__ */ i("div", {
+		className: n(t.container, s && t[`label-${c}`], l),
+		role: "status",
+		"aria-live": "polite",
+		style: {
+			color: f ? void 0 : e(o),
+			...u
+		},
+		...d,
+		children: [/* @__PURE__ */ i("svg", {
+			className: n("wim-spinner", t.root, t[a], f && t[o]),
+			viewBox: "0 0 50 50",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ r("circle", {
+				className: t.track,
+				cx: "25",
+				cy: "25",
+				r: "20",
+				stroke: "currentColor",
+				strokeWidth: "4"
+			}), /* @__PURE__ */ r("circle", {
+				className: t.head,
+				cx: "25",
+				cy: "25",
+				r: "20",
+				stroke: "currentColor",
+				strokeWidth: "4",
+				strokeLinecap: "round",
+				strokeDasharray: "126",
+				strokeDashoffset: "100"
+			})]
+		}), s && /* @__PURE__ */ r("span", {
+			className: t.label,
+			children: s
+		})]
+	});
+};
+//#endregion
+export { a as Spinner };

package/dist/components/feedback/Spinner/spinner.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_container_12fik_3`,t=`_root_12fik_13`,n=`_sm_12fik_19`,r=`_md_12fik_22`,i=`_lg_12fik_25`,a=`_xl_12fik_28`,o=`_primary_12fik_31`,s=`_secondary_12fik_34`,c=`_success_12fik_37`,l=`_warning_12fik_40`,u=`_danger_12fik_43`,d=`_neutral_12fik_46`,f=`_currentColor_12fik_49`,p=`_track_12fik_52`,m=`_head_12fik_55`,h=`_label_12fik_8`,g={container:e,"label-bottom":`_label-bottom_12fik_8`,root:t,"wim-spinner-rotate":`_wim-spinner-rotate_12fik_1`,sm:n,md:r,lg:i,xl:a,primary:o,secondary:s,success:c,warning:l,danger:u,neutral:d,currentColor:f,track:p,head:m,"wim-spinner-dash":`_wim-spinner-dash_12fik_1`,label:h};exports.container=e,exports.currentColor=f,exports.danger=u,exports.default=g,exports.head=m,exports.label=h,exports.lg=i,exports.md=r,exports.neutral=d,exports.primary=o,exports.root=t,exports.secondary=s,exports.sm=n,exports.success=c,exports.track=p,exports.warning=l,exports.xl=a;

package/dist/components/feedback/Spinner/spinner.module.js

@@ -0,0 +1,25 @@
+"use client";
+//#region src/components/feedback/Spinner/spinner.module.scss
+var e = "_container_12fik_3", t = "_root_12fik_13", n = "_sm_12fik_19", r = "_md_12fik_22", i = "_lg_12fik_25", a = "_xl_12fik_28", o = "_primary_12fik_31", s = "_secondary_12fik_34", c = "_success_12fik_37", l = "_warning_12fik_40", u = "_danger_12fik_43", d = "_neutral_12fik_46", f = "_currentColor_12fik_49", p = "_track_12fik_52", m = "_head_12fik_55", h = "_label_12fik_8", g = {
+	container: e,
+	"label-bottom": "_label-bottom_12fik_8",
+	root: t,
+	"wim-spinner-rotate": "_wim-spinner-rotate_12fik_1",
+	sm: n,
+	md: r,
+	lg: i,
+	xl: a,
+	primary: o,
+	secondary: s,
+	success: c,
+	warning: l,
+	danger: u,
+	neutral: d,
+	currentColor: f,
+	track: p,
+	head: m,
+	"wim-spinner-dash": "_wim-spinner-dash_12fik_1",
+	label: h
+};
+//#endregion
+export { e as container, f as currentColor, u as danger, g as default, m as head, h as label, i as lg, r as md, d as neutral, o as primary, t as root, s as secondary, n as sm, c as success, p as track, l as warning, a as xl };

package/dist/components/feedback/Toast/Toast.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/Transition/Transition.cjs"),n=require("../../_internal/FeedbackIcon.cjs"),r=require("../../_internal/FeedbackCloseButton.cjs"),i=require("./toast.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=({id:e,title:c,description:l,intent:u=`info`,duration:d=3e3,open:f=!0,onClose:p,className:m})=>{let[h,g]=(0,a.useState)(!0),_=(0,a.useCallback)(()=>{g(!1),p&&p(e)},[p,e]);return(0,a.useEffect)(()=>{if(f&&d>0&&h){let e=setTimeout(()=>{_()},d+300);return()=>clearTimeout(e)}},[f,d,e,p,h,_]),(0,s.jsxs)(t.Transition,{show:f&&h,enter:i.default.enter,enterFrom:i.default.enterFrom,enterTo:i.default.enterTo,leave:i.default.leave,leaveFrom:i.default.leaveFrom,leaveTo:i.default.leaveTo,className:(0,o.default)(`wim-toast`,i.default.root,i.default[u],m),role:`status`,"aria-live":`polite`,children:[(0,s.jsx)(`div`,{className:i.default.icon,children:(0,s.jsx)(n.FeedbackIcon,{intent:u,size:`sm`})}),(0,s.jsxs)(`div`,{className:i.default.content,children:[c&&(0,s.jsx)(`h5`,{className:i.default.title,children:c}),l&&(0,s.jsx)(`p`,{className:i.default.description,children:l})]}),(0,s.jsx)(r.FeedbackCloseButton,{onClose:p?_:void 0,id:e,className:i.default.closeButton,size:`md`})]})},l=(0,a.createContext)(void 0),u=({children:e,position:t=`top-right`})=>{let[n,r]=(0,a.useState)([]),u=(0,a.useCallback)(e=>{let t=Math.random().toString(36).substr(2,9);r(n=>[...n,{...e,id:t}])},[]),d=(0,a.useCallback)(e=>{r(t=>t.filter(t=>t.id!==e))},[]);return(0,s.jsxs)(l.Provider,{value:{show:u,remove:d},children:[e,(0,s.jsx)(`div`,{className:(0,o.default)(i.default.container,i.default[t]),children:n.map(e=>(0,s.jsx)(c,{...e,onClose:()=>d(e.id)},e.id))})]})},d=()=>{let e=(0,a.useContext)(l);if(!e)throw Error(`useToast must be used within a ToastProvider`);return e};exports.Toast=c,exports.ToastProvider=u,exports.useToast=d;

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

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+import { FeedbackIntent } from '../../../types/tokens';
+export type ToastPosition = "top-right" | "top-left" | "top-center" | "bottom-right" | "bottom-left" | "bottom-center";
+export type ToastProps = {
+    /**
+     * Identifier of the toast, passed to onClose. Used by ToastProvider to manage a stack.
+     */
+    id?: string;
+    /**
+     * Title of the toast.
+     */
+    title?: string;
+    /**
+     * Description text displayed below the title.
+     */
+    description?: string;
+    /**
+     * Intent (semantic state) of the toast.
+     * @default "info"
+     */
+    intent?: FeedbackIntent;
+    /**
+     * Time in milliseconds before the toast closes automatically. Set 0 to disable auto-close.
+     * @default 3000
+     */
+    duration?: number;
+    /**
+     * Whether the toast is shown.
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * Called with the toast id when the toast is closed.
+     */
+    onClose?: (id?: string) => void;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+};
+/**
+ * Toast for communicating notifications and feedback to the user.
+ */
+export declare const Toast: ({ id, title, description, intent, duration, open, onClose, className, }: ToastProps) => React.JSX.Element;
+type ToastItem = {
+    id: string;
+    title?: string;
+    description?: string;
+    intent?: FeedbackIntent;
+    duration?: number;
+};
+type ToastContextType = {
+    show: (toast: Omit<ToastItem, "id">) => void;
+    remove: (id: string) => void;
+};
+export declare const ToastProvider: ({ children, position, }: {
+    children: React.ReactNode;
+    position?: ToastPosition;
+}) => React.JSX.Element;
+export declare const useToast: () => ToastContextType;
+export {};

package/dist/components/feedback/Toast/Toast.js

@@ -0,0 +1,94 @@
+"use client";
+import { Transition as e } from "../../layout/Transition/Transition.js";
+import { FeedbackIcon as t } from "../../_internal/FeedbackIcon.js";
+import { FeedbackCloseButton as n } from "../../_internal/FeedbackCloseButton.js";
+import r from "./toast.module.js";
+import { createContext as i, useCallback as a, useContext as o, useEffect 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/feedback/Toast/Toast.tsx
+var f = ({ id: i, title: o, description: f, intent: p = "info", duration: m = 3e3, open: h = !0, onClose: g, className: _ }) => {
+	let [v, y] = c(!0), b = a(() => {
+		y(!1), g && g(i);
+	}, [g, i]);
+	return s(() => {
+		if (h && m > 0 && v) {
+			let e = setTimeout(() => {
+				b();
+			}, m + 300);
+			return () => clearTimeout(e);
+		}
+	}, [
+		h,
+		m,
+		i,
+		g,
+		v,
+		b
+	]), /* @__PURE__ */ d(e, {
+		show: h && v,
+		enter: r.enter,
+		enterFrom: r.enterFrom,
+		enterTo: r.enterTo,
+		leave: r.leave,
+		leaveFrom: r.leaveFrom,
+		leaveTo: r.leaveTo,
+		className: l("wim-toast", r.root, r[p], _),
+		role: "status",
+		"aria-live": "polite",
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: r.icon,
+				children: /* @__PURE__ */ u(t, {
+					intent: p,
+					size: "sm"
+				})
+			}),
+			/* @__PURE__ */ d("div", {
+				className: r.content,
+				children: [o && /* @__PURE__ */ u("h5", {
+					className: r.title,
+					children: o
+				}), f && /* @__PURE__ */ u("p", {
+					className: r.description,
+					children: f
+				})]
+			}),
+			/* @__PURE__ */ u(n, {
+				onClose: g ? b : void 0,
+				id: i,
+				className: r.closeButton,
+				size: "md"
+			})
+		]
+	});
+}, p = i(void 0), m = ({ children: e, position: t = "top-right" }) => {
+	let [n, i] = c([]), o = a((e) => {
+		let t = Math.random().toString(36).substr(2, 9);
+		i((n) => [...n, {
+			...e,
+			id: t
+		}]);
+	}, []), s = a((e) => {
+		i((t) => t.filter((t) => t.id !== e));
+	}, []);
+	return /* @__PURE__ */ d(p.Provider, {
+		value: {
+			show: o,
+			remove: s
+		},
+		children: [e, /* @__PURE__ */ u("div", {
+			className: l(r.container, r[t]),
+			children: n.map((e) => /* @__PURE__ */ u(f, {
+				...e,
+				onClose: () => s(e.id)
+			}, e.id))
+		})]
+	});
+}, h = () => {
+	let e = o(p);
+	if (!e) throw Error("useToast must be used within a ToastProvider");
+	return e;
+};
+//#endregion
+export { f as Toast, m as ToastProvider, h as useToast };