wimui 0.1.0

package/dist/components/media/Image/image.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_oumpl_2`,t=`_inner_oumpl_16`,n=`_radiusSm_oumpl_24`,r=`_radiusMd_oumpl_28`,i=`_radiusLg_oumpl_32`,a=`_radiusFull_oumpl_36`,o=`_shadow_oumpl_40`,s=`_loading_oumpl_44`,c=`_border_oumpl_47`,l=`_fadeIn_oumpl_50`,u=`_image_oumpl_50`,d=`_isLoaded_oumpl_54`,f=`_hasBackdrop_oumpl_72`,p=`_hasNoise_oumpl_79`,m=`_hasOverlay_oumpl_88`,h=`_zoomable_oumpl_110`,g=`_hasFilter_oumpl_116`,_=`_caption_oumpl_123`,v=`_fallback_oumpl_131`,y=`_defaultFallback_oumpl_140`,b=`_fallbackText_oumpl_147`,x={root:e,inner:t,radiusSm:n,radiusMd:r,radiusLg:i,radiusFull:a,shadow:o,loading:s,border:c,fadeIn:l,image:u,isLoaded:d,"skeleton-loading":`_skeleton-loading_oumpl_1`,hasBackdrop:f,hasNoise:p,hasOverlay:m,zoomable:h,hasFilter:g,caption:_,fallback:v,defaultFallback:y,fallbackText:b};exports.border=c,exports.caption=_,exports.default=x,exports.defaultFallback=y,exports.fadeIn=l,exports.fallback=v,exports.fallbackText=b,exports.hasBackdrop=f,exports.hasFilter=g,exports.hasNoise=p,exports.hasOverlay=m,exports.image=u,exports.inner=t,exports.isLoaded=d,exports.loading=s,exports.radiusFull=a,exports.radiusLg=i,exports.radiusMd=r,exports.radiusSm=n,exports.root=e,exports.shadow=o,exports.zoomable=h;

package/dist/components/media/Image/image.module.js

@@ -0,0 +1,28 @@
+"use client";
+//#region src/components/media/Image/image.module.scss
+var e = "_root_oumpl_2", t = "_inner_oumpl_16", n = "_radiusSm_oumpl_24", r = "_radiusMd_oumpl_28", i = "_radiusLg_oumpl_32", a = "_radiusFull_oumpl_36", o = "_shadow_oumpl_40", s = "_loading_oumpl_44", c = "_border_oumpl_47", l = "_fadeIn_oumpl_50", u = "_image_oumpl_50", d = "_isLoaded_oumpl_54", f = "_hasBackdrop_oumpl_72", p = "_hasNoise_oumpl_79", m = "_hasOverlay_oumpl_88", h = "_zoomable_oumpl_110", g = "_hasFilter_oumpl_116", _ = "_caption_oumpl_123", v = "_fallback_oumpl_131", y = "_defaultFallback_oumpl_140", b = "_fallbackText_oumpl_147", x = {
+	root: e,
+	inner: t,
+	radiusSm: n,
+	radiusMd: r,
+	radiusLg: i,
+	radiusFull: a,
+	shadow: o,
+	loading: s,
+	border: c,
+	fadeIn: l,
+	image: u,
+	isLoaded: d,
+	"skeleton-loading": "_skeleton-loading_oumpl_1",
+	hasBackdrop: f,
+	hasNoise: p,
+	hasOverlay: m,
+	zoomable: h,
+	hasFilter: g,
+	caption: _,
+	fallback: v,
+	defaultFallback: y,
+	fallbackText: b
+};
+//#endregion
+export { c as border, _ as caption, x as default, y as defaultFallback, l as fadeIn, v as fallback, b as fallbackText, f as hasBackdrop, g as hasFilter, p as hasNoise, m as hasOverlay, u as image, t as inner, d as isLoaded, s as loading, a as radiusFull, i as radiusLg, r as radiusMd, n as radiusSm, e as root, o as shadow, h as zoomable };

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

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

package/dist/components/media/ImageCompare/ImageCompare.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+import { MediaRadius } from '../../../types/tokens';
+/** Labels for internationalization. */
+export type ImageCompareLabels = {
+    /** Accessible label for the drag handle */
+    handleAriaLabel?: string;
+};
+export interface ImageCompareProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange"> {
+    /** Source URL of the "before" image (revealed on the leading side) */
+    before: string;
+    /** Source URL of the "after" image (revealed on the trailing side) */
+    after: string;
+    /** Alternative text for the before image */
+    beforeAlt?: string;
+    /** Alternative text for the after image */
+    afterAlt?: string;
+    /** Badge label overlaid on the before side */
+    beforeLabel?: React.ReactNode;
+    /** Badge label overlaid on the after side */
+    afterLabel?: React.ReactNode;
+    /** Initial divider position as a percentage 0–100 (uncontrolled) */
+    defaultPosition?: number;
+    /** Divider position as a percentage 0–100 (controlled) */
+    position?: number;
+    /** Callback when the divider position changes */
+    onPositionChange?: (position: number) => void;
+    /** Direction the divider slides along */
+    orientation?: "horizontal" | "vertical";
+    /** Width of the component */
+    width?: string | number;
+    /** Height of the component */
+    height?: string | number;
+    /** Corner radius size */
+    radius?: MediaRadius;
+    /** Labels for internationalization */
+    labels?: ImageCompareLabels;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * ImageCompare overlays two images and reveals them with a draggable divider —
+ * a before/after slider for comparing edits, restorations, or AI-generated
+ * results against their source.
+ *
+ * Composition Contract:
+ * - Managed by: App consumption
+ * - Scroll lock: No
+ */
+export declare const ImageCompare: React.ForwardRefExoticComponent<ImageCompareProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/media/ImageCompare/ImageCompare.js

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

package/dist/components/media/ImageCompare/image-compare.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_17ls3_4`,t=`_image_17ls3_15`,n=`_beforeLayer_17ls3_22`,r=`_label_17ls3_32`,i=`_beforeLabel_17ls3_43`,a=`_afterLabel_17ls3_46`,o=`_divider_17ls3_49`,s=`_line_17ls3_60`,c=`_handle_17ls3_69`,l=`_arrow_17ls3_88`,u=`_vertical_17ls3_93`,d={root:e,image:t,beforeLayer:n,label:r,beforeLabel:i,afterLabel:a,divider:o,line:s,handle:c,arrow:l,vertical:u,"radius-none":`_radius-none_17ls3_110`,"radius-sm":`_radius-sm_17ls3_113`,"radius-md":`_radius-md_17ls3_116`,"radius-lg":`_radius-lg_17ls3_119`,"radius-full":`_radius-full_17ls3_122`};exports.afterLabel=a,exports.arrow=l,exports.beforeLabel=i,exports.beforeLayer=n,exports.default=d,exports.divider=o,exports.handle=c,exports.image=t,exports.label=r,exports.line=s,exports.root=e,exports.vertical=u;

package/dist/components/media/ImageCompare/image-compare.module.js

@@ -0,0 +1,22 @@
+"use client";
+//#region src/components/media/ImageCompare/image-compare.module.scss
+var e = "_root_17ls3_4", t = "_image_17ls3_15", n = "_beforeLayer_17ls3_22", r = "_label_17ls3_32", i = "_beforeLabel_17ls3_43", a = "_afterLabel_17ls3_46", o = "_divider_17ls3_49", s = "_line_17ls3_60", c = "_handle_17ls3_69", l = "_arrow_17ls3_88", u = "_vertical_17ls3_93", d = {
+	root: e,
+	image: t,
+	beforeLayer: n,
+	label: r,
+	beforeLabel: i,
+	afterLabel: a,
+	divider: o,
+	line: s,
+	handle: c,
+	arrow: l,
+	vertical: u,
+	"radius-none": "_radius-none_17ls3_110",
+	"radius-sm": "_radius-sm_17ls3_113",
+	"radius-md": "_radius-md_17ls3_116",
+	"radius-lg": "_radius-lg_17ls3_119",
+	"radius-full": "_radius-full_17ls3_122"
+};
+//#endregion
+export { a as afterLabel, l as arrow, i as beforeLabel, n as beforeLayer, d as default, o as divider, c as handle, t as image, r as label, s as line, e as root, u as vertical };

package/dist/components/media/Lightbox/Lightbox.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("../../_internal/OverlayBase.cjs"),i=require("../../../icon/chevron-left.cjs"),a=require("../../../icon/chevron-right.cjs"),o=require("../../../icon/close.cjs"),s=require("../../../icon/minus.cjs"),c=require("../../../icon/plus.cjs"),l=require("../Icon/Icon.cjs"),u=require("./lightbox.module.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("classnames");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=(0,d.createContext)(void 0),h=()=>{let e=(0,d.useContext)(m);if(!e)throw Error(`Lightbox components must be used within Lightbox`);return e},g=({children:e,open:t,onOpenChange:n,defaultOpen:r=!1,defaultIndex:i=0})=>{let[a,o]=(0,d.useState)(r),[s,c]=(0,d.useState)(i),[l,u]=(0,d.useState)([]),f=t!==void 0,h=f?t:a,g=(0,d.useCallback)(e=>{f||o(e),n?.(e)},[f,n]),_=(0,d.useCallback)(e=>{let t=-1;return u(n=>(t=n.length,[...n,e])),t},[]),v=(0,d.useCallback)(e=>{},[]);return(0,p.jsx)(m.Provider,{value:{open:h,setOpen:g,currentIndex:s,setCurrentIndex:c,items:l,setItems:u,registerItem:_,unregisterItem:v},children:e})},_=({children:e,className:n,onClick:r,asChild:i=!1,index:a,src:o,alt:s,caption:c,...l})=>{let{setOpen:d,setCurrentIndex:m,items:g,setItems:_}=h();return(0,p.jsx)(i?t.Root:`button`,{type:`button`,className:(0,f.default)(u.default.trigger,n),onClick:e=>{if(r?.(e),a!==void 0)m(a);else if(o){let e=g.findIndex(e=>e.src===o);if(e!==-1)m(e);else{let e=g.length;_(e=>[...e,{src:o,alt:s,caption:c}]),m(e)}}d(!0)},...l,children:(0,p.jsx)(t.Slottable,{children:e})})},v=({className:e,showCloseButton:t=!0,showNavigation:m=!0,showCounter:g=!0,closeOnOverlayClick:_=!0,...v})=>{let{open:y,setOpen:b,currentIndex:x,setCurrentIndex:S,items:C}=h(),{t:w}=n.useWimTranslation(`components`),[T,E]=(0,d.useState)(1),D=(0,d.useCallback)(()=>{S((x-1+C.length)%C.length),E(1)},[x,C.length,S]),O=(0,d.useCallback)(()=>{S((x+1)%C.length),E(1)},[x,C.length,S]),k=()=>{E(e=>e===1?2:1)};(0,d.useEffect)(()=>{if(!y)return;let e=e=>{e.key===`ArrowLeft`&&D(),e.key===`ArrowRight`&&O(),e.key===`Escape`&&b(!1)};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[y,D,O,b]);let A=C[x];return A?(0,p.jsx)(r.OverlayBase,{...v,open:y,onOpenChange:b,closeOnOverlayClick:_,overlayClassName:u.default.overlay,className:(0,f.default)(`wim-lightbox`,u.default.contentRoot,e),transitionProps:{preset:`fade`,enter:u.default.contentEnter,enterFrom:u.default.contentEnterFrom,enterTo:u.default.contentEnterTo},children:(0,p.jsxs)(`div`,{className:u.default.container,children:[(0,p.jsxs)(`div`,{className:u.default.header,children:[g&&C.length>1&&(0,p.jsx)(`div`,{className:u.default.counter,children:w(`lightbox.counter`,{current:x+1,total:C.length})}),(0,p.jsxs)(`div`,{className:u.default.controls,children:[(0,p.jsx)(`button`,{className:u.default.iconButton,onClick:k,"aria-label":w(T>1?`lightbox.zoom_out`:`lightbox.zoom_in`),children:T>1?(0,p.jsx)(l.Icon,{component:s.default}):(0,p.jsx)(l.Icon,{component:c.default})}),t&&(0,p.jsx)(`button`,{className:u.default.iconButton,onClick:()=>b(!1),"aria-label":w(`lightbox.close`),children:(0,p.jsx)(l.Icon,{component:o.default})})]})]}),(0,p.jsxs)(`div`,{className:u.default.viewport,children:[m&&C.length>1&&(0,p.jsx)(`button`,{className:(0,f.default)(u.default.navButton,u.default.prev),onClick:D,"aria-label":w(`lightbox.previous`),children:(0,p.jsx)(l.Icon,{component:i.default})}),(0,p.jsx)(`div`,{className:u.default.mediaWrapper,style:{transform:`scale(${T})`},children:(0,p.jsx)(`img`,{src:A.src,alt:A.alt||``,className:u.default.image})}),m&&C.length>1&&(0,p.jsx)(`button`,{className:(0,f.default)(u.default.navButton,u.default.next),onClick:O,"aria-label":w(`lightbox.next`),children:(0,p.jsx)(l.Icon,{component:a.default})})]}),(A.title||A.caption)&&(0,p.jsxs)(`div`,{className:u.default.footer,children:[A.title&&(0,p.jsx)(`h3`,{className:u.default.title,children:A.title}),A.caption&&(0,p.jsx)(`p`,{className:u.default.caption,children:A.caption})]})]})}):null},y=({items:e,children:t})=>{let{setItems:n}=h();return(0,d.useEffect)(()=>{n(e)},[e,n]),(0,p.jsx)(`div`,{className:u.default.gallery,children:t})},b=g;b.Trigger=_,b.Content=v,b.Gallery=y,b.displayName=`Lightbox`,_.displayName=`Lightbox.Trigger`,v.displayName=`Lightbox.Content`,y.displayName=`Lightbox.Gallery`,exports.Lightbox=g,exports.LightboxContent=v,exports.LightboxGallery=y,exports.LightboxRoot=b,exports.default=b,exports.LightboxTrigger=_,exports.useLightbox=h;

package/dist/components/media/Lightbox/Lightbox.d.ts

@@ -0,0 +1,69 @@
+import { default as React } from 'react';
+import { OverlayBase } from '../../_internal/OverlayBase';
+export interface LightboxItem {
+    src: string;
+    alt?: string;
+    caption?: string;
+    title?: string;
+}
+interface LightboxContextType {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    currentIndex: number;
+    setCurrentIndex: (index: number | ((prev: number) => number)) => void;
+    items: LightboxItem[];
+    setItems: React.Dispatch<React.SetStateAction<LightboxItem[]>>;
+    registerItem: (item: LightboxItem) => number;
+    unregisterItem: (index: number) => void;
+}
+export declare const useLightbox: () => LightboxContextType;
+export interface LightboxProps {
+    /** Lightbox parts (Lightbox.Trigger, Lightbox.Content, etc.) */
+    children: React.ReactNode;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when the open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Initial open state for uncontrolled usage */
+    defaultOpen?: boolean;
+    /** Index of the item shown first */
+    defaultIndex?: number;
+}
+export declare const Lightbox: ({ children, open: controlledOpen, onOpenChange, defaultOpen, defaultIndex, }: LightboxProps) => React.JSX.Element;
+export interface LightboxTriggerProps extends React.ComponentPropsWithoutRef<"button"> {
+    asChild?: boolean;
+    index?: number;
+    src?: string;
+    alt?: string;
+    caption?: string;
+}
+export declare const LightboxTrigger: {
+    ({ children, className, onClick, asChild, index, src, alt, caption, ...props }: LightboxTriggerProps): React.JSX.Element;
+    displayName: string;
+};
+export interface LightboxContentProps extends Partial<React.ComponentPropsWithoutRef<typeof OverlayBase>> {
+    showCloseButton?: boolean;
+    showNavigation?: boolean;
+    showCounter?: boolean;
+    closeOnOverlayClick?: boolean;
+}
+export declare const LightboxContent: {
+    ({ className, showCloseButton, showNavigation, showCounter, closeOnOverlayClick, ...props }: LightboxContentProps): React.JSX.Element | null;
+    displayName: string;
+};
+export interface LightboxGalleryProps {
+    children: React.ReactNode;
+    items: LightboxItem[];
+}
+export declare const LightboxGallery: {
+    ({ items, children }: LightboxGalleryProps): React.JSX.Element;
+    displayName: string;
+};
+export type { LightboxProps as LightboxRootProps };
+export interface LightboxComponent extends React.FC<LightboxProps> {
+    Trigger: typeof LightboxTrigger;
+    Content: typeof LightboxContent;
+    Gallery: typeof LightboxGallery;
+}
+export declare const LightboxRoot: LightboxComponent;
+export default LightboxRoot;

package/dist/components/media/Lightbox/Lightbox.js

@@ -0,0 +1,182 @@
+"use client";
+import { Root as e, Slottable as t } from "../../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { useWimTranslation as n } from "../../../i18n/useWimTranslation.js";
+import { OverlayBase as r } from "../../_internal/OverlayBase.js";
+import i from "../../../icon/chevron-left.js";
+import a from "../../../icon/chevron-right.js";
+import o from "../../../icon/close.js";
+import s from "../../../icon/minus.js";
+import c from "../../../icon/plus.js";
+import { Icon as l } from "../Icon/Icon.js";
+import u from "./lightbox.module.js";
+import { createContext as d, useCallback as f, useContext as p, useEffect as m, useState as h } from "react";
+import g from "classnames";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/media/Lightbox/Lightbox.tsx
+var y = d(void 0), b = () => {
+	let e = p(y);
+	if (!e) throw Error("Lightbox components must be used within Lightbox");
+	return e;
+}, x = ({ children: e, open: t, onOpenChange: n, defaultOpen: r = !1, defaultIndex: i = 0 }) => {
+	let [a, o] = h(r), [s, c] = h(i), [l, u] = h([]), d = t !== void 0, p = d ? t : a, m = f((e) => {
+		d || o(e), n?.(e);
+	}, [d, n]), g = f((e) => {
+		let t = -1;
+		return u((n) => (t = n.length, [...n, e])), t;
+	}, []), v = f((e) => {}, []);
+	return /* @__PURE__ */ _(y.Provider, {
+		value: {
+			open: p,
+			setOpen: m,
+			currentIndex: s,
+			setCurrentIndex: c,
+			items: l,
+			setItems: u,
+			registerItem: g,
+			unregisterItem: v
+		},
+		children: e
+	});
+}, S = ({ children: n, className: r, onClick: i, asChild: a = !1, index: o, src: s, alt: c, caption: l, ...d }) => {
+	let { setOpen: f, setCurrentIndex: p, items: m, setItems: h } = b();
+	return /* @__PURE__ */ _(a ? e : "button", {
+		type: "button",
+		className: g(u.trigger, r),
+		onClick: (e) => {
+			if (i?.(e), o !== void 0) p(o);
+			else if (s) {
+				let e = m.findIndex((e) => e.src === s);
+				if (e !== -1) p(e);
+				else {
+					let e = m.length;
+					h((e) => [...e, {
+						src: s,
+						alt: c,
+						caption: l
+					}]), p(e);
+				}
+			}
+			f(!0);
+		},
+		...d,
+		children: /* @__PURE__ */ _(t, { children: n })
+	});
+}, C = ({ className: e, showCloseButton: t = !0, showNavigation: d = !0, showCounter: p = !0, closeOnOverlayClick: y = !0, ...x }) => {
+	let { open: S, setOpen: C, currentIndex: w, setCurrentIndex: T, items: E } = b(), { t: D } = n("components"), [O, k] = h(1), A = f(() => {
+		T((w - 1 + E.length) % E.length), k(1);
+	}, [
+		w,
+		E.length,
+		T
+	]), j = f(() => {
+		T((w + 1) % E.length), k(1);
+	}, [
+		w,
+		E.length,
+		T
+	]), M = () => {
+		k((e) => e === 1 ? 2 : 1);
+	};
+	m(() => {
+		if (!S) return;
+		let e = (e) => {
+			e.key === "ArrowLeft" && A(), e.key === "ArrowRight" && j(), e.key === "Escape" && C(!1);
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		S,
+		A,
+		j,
+		C
+	]);
+	let N = E[w];
+	return N ? /* @__PURE__ */ _(r, {
+		...x,
+		open: S,
+		onOpenChange: C,
+		closeOnOverlayClick: y,
+		overlayClassName: u.overlay,
+		className: g("wim-lightbox", u.contentRoot, e),
+		transitionProps: {
+			preset: "fade",
+			enter: u.contentEnter,
+			enterFrom: u.contentEnterFrom,
+			enterTo: u.contentEnterTo
+		},
+		children: /* @__PURE__ */ v("div", {
+			className: u.container,
+			children: [
+				/* @__PURE__ */ v("div", {
+					className: u.header,
+					children: [p && E.length > 1 && /* @__PURE__ */ _("div", {
+						className: u.counter,
+						children: D("lightbox.counter", {
+							current: w + 1,
+							total: E.length
+						})
+					}), /* @__PURE__ */ v("div", {
+						className: u.controls,
+						children: [/* @__PURE__ */ _("button", {
+							className: u.iconButton,
+							onClick: M,
+							"aria-label": D(O > 1 ? "lightbox.zoom_out" : "lightbox.zoom_in"),
+							children: O > 1 ? /* @__PURE__ */ _(l, { component: s }) : /* @__PURE__ */ _(l, { component: c })
+						}), t && /* @__PURE__ */ _("button", {
+							className: u.iconButton,
+							onClick: () => C(!1),
+							"aria-label": D("lightbox.close"),
+							children: /* @__PURE__ */ _(l, { component: o })
+						})]
+					})]
+				}),
+				/* @__PURE__ */ v("div", {
+					className: u.viewport,
+					children: [
+						d && E.length > 1 && /* @__PURE__ */ _("button", {
+							className: g(u.navButton, u.prev),
+							onClick: A,
+							"aria-label": D("lightbox.previous"),
+							children: /* @__PURE__ */ _(l, { component: i })
+						}),
+						/* @__PURE__ */ _("div", {
+							className: u.mediaWrapper,
+							style: { transform: `scale(${O})` },
+							children: /* @__PURE__ */ _("img", {
+								src: N.src,
+								alt: N.alt || "",
+								className: u.image
+							})
+						}),
+						d && E.length > 1 && /* @__PURE__ */ _("button", {
+							className: g(u.navButton, u.next),
+							onClick: j,
+							"aria-label": D("lightbox.next"),
+							children: /* @__PURE__ */ _(l, { component: a })
+						})
+					]
+				}),
+				(N.title || N.caption) && /* @__PURE__ */ v("div", {
+					className: u.footer,
+					children: [N.title && /* @__PURE__ */ _("h3", {
+						className: u.title,
+						children: N.title
+					}), N.caption && /* @__PURE__ */ _("p", {
+						className: u.caption,
+						children: N.caption
+					})]
+				})
+			]
+		})
+	}) : null;
+}, w = ({ items: e, children: t }) => {
+	let { setItems: n } = b();
+	return m(() => {
+		n(e);
+	}, [e, n]), /* @__PURE__ */ _("div", {
+		className: u.gallery,
+		children: t
+	});
+}, T = x;
+T.Trigger = S, T.Content = C, T.Gallery = w, T.displayName = "Lightbox", S.displayName = "Lightbox.Trigger", C.displayName = "Lightbox.Content", w.displayName = "Lightbox.Gallery";
+//#endregion
+export { x as Lightbox, C as LightboxContent, w as LightboxGallery, T as LightboxRoot, T as default, S as LightboxTrigger, b as useLightbox };

package/dist/components/media/Lightbox/lightbox.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1uvzv_4`,t=`_trigger_1uvzv_7`,n=`_overlay_1uvzv_33`,r=`_contentRoot_1uvzv_38`,i=`_container_1uvzv_48`,a=`_header_1uvzv_57`,o=`_counter_1uvzv_65`,s=`_controls_1uvzv_70`,c=`_iconButton_1uvzv_74`,l=`_viewport_1uvzv_99`,u=`_mediaWrapper_1uvzv_108`,d=`_image_1uvzv_117`,f=`_navButton_1uvzv_126`,p=`_prev_1uvzv_148`,m=`_next_1uvzv_151`,h=`_footer_1uvzv_158`,g=`_title_1uvzv_163`,_=`_caption_1uvzv_168`,v=`_gallery_1uvzv_173`,y=`_contentEnter_1uvzv_186`,b=`_contentEnterFrom_1uvzv_190`,x=`_contentEnterTo_1uvzv_195`,S={root:e,trigger:t,overlay:n,contentRoot:r,container:i,header:a,counter:o,controls:s,iconButton:c,viewport:l,mediaWrapper:u,image:d,navButton:f,prev:p,next:m,footer:h,title:g,caption:_,gallery:v,contentEnter:y,contentEnterFrom:b,contentEnterTo:x};exports.caption=_,exports.container=i,exports.contentEnter=y,exports.contentEnterFrom=b,exports.contentEnterTo=x,exports.contentRoot=r,exports.controls=s,exports.counter=o,exports.default=S,exports.footer=h,exports.gallery=v,exports.header=a,exports.iconButton=c,exports.image=d,exports.mediaWrapper=u,exports.navButton=f,exports.next=m,exports.overlay=n,exports.prev=p,exports.root=e,exports.title=g,exports.trigger=t,exports.viewport=l;

package/dist/components/media/Lightbox/lightbox.module.js

@@ -0,0 +1,28 @@
+"use client";
+//#region src/components/media/Lightbox/lightbox.module.scss
+var e = "_root_1uvzv_4", t = "_trigger_1uvzv_7", n = "_overlay_1uvzv_33", r = "_contentRoot_1uvzv_38", i = "_container_1uvzv_48", a = "_header_1uvzv_57", o = "_counter_1uvzv_65", s = "_controls_1uvzv_70", c = "_iconButton_1uvzv_74", l = "_viewport_1uvzv_99", u = "_mediaWrapper_1uvzv_108", d = "_image_1uvzv_117", f = "_navButton_1uvzv_126", p = "_prev_1uvzv_148", m = "_next_1uvzv_151", h = "_footer_1uvzv_158", g = "_title_1uvzv_163", _ = "_caption_1uvzv_168", v = "_gallery_1uvzv_173", y = "_contentEnter_1uvzv_186", b = "_contentEnterFrom_1uvzv_190", x = "_contentEnterTo_1uvzv_195", S = {
+	root: e,
+	trigger: t,
+	overlay: n,
+	contentRoot: r,
+	container: i,
+	header: a,
+	counter: o,
+	controls: s,
+	iconButton: c,
+	viewport: l,
+	mediaWrapper: u,
+	image: d,
+	navButton: f,
+	prev: p,
+	next: m,
+	footer: h,
+	title: g,
+	caption: _,
+	gallery: v,
+	contentEnter: y,
+	contentEnterFrom: b,
+	contentEnterTo: x
+};
+//#endregion
+export { _ as caption, i as container, y as contentEnter, b as contentEnterFrom, x as contentEnterTo, r as contentRoot, s as controls, o as counter, S as default, h as footer, v as gallery, a as header, c as iconButton, d as image, u as mediaWrapper, f as navButton, m as next, n as overlay, p as prev, e as root, g as title, t as trigger, l as viewport };

package/dist/components/media/Video/Video.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../Icon/Icon.cjs"),n=require("../../../hooks/useMediaLoader.cjs"),r=require("./hooks/useVideoPlayer.cjs"),i=require("./components/VideoAdvancedMenu.cjs"),a=require("./components/VideoControls.cjs"),o=require("./video.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=({src:e,width:s,height:u,autoPlay:d=!1,loop:f=!1,muted:p=!1,controls:m=!0,poster:h,radius:g=`none`,shadow:_=!1,border:v=!1,fit:y=`cover`,preload:b,caption:x,className:S,style:C,customControls:w=!1,advancedControls:T=!1,videoId:E,resumePlayback:D=!1,playlist:O,autoPlayNext:k=!1,qualities:A,loading:j=`lazy`,fadeIn:M=!1,demoDelay:N,labels:P={},tracks:F,...I})=>{let{videoAriaLabel:L=`Video`,seconds:R=`s`}=P,{containerRef:z,isLoaded:B,isIntersecting:V,notifyLoaded:H,shouldShowSkeleton:U}=n.useMediaLoader({loading:j,src:A?.[0]?.src||O?.[0]?.src||e,demoDelay:N}),W=r.useVideoPlayer({src:e,autoPlay:d,loop:f,muted:p,fit:y,videoId:E,resumePlayback:D,playlist:O,autoPlayNext:k,qualities:A,customControls:w,advancedControls:T,poster:h,containerRef:z}),{videoRef:G,isPlaying:K,activeSrc:q,activePoster:J,showNativeControls:Y,skipIndicator:X,activeMenu:Z,setActiveMenu:Q}=W,$={width:`100%`,height:u||`auto`,objectFit:W.activeFit,...C},ee=g===`none`?null:o.default[`radius${g.charAt(0).toUpperCase()+g.slice(1)}`];return(0,l.jsxs)(`figure`,{className:(0,c.default)(`wim-video`,o.default.root,S),style:{width:`100%`},role:`region`,"aria-label":L,"data-testid":`video-root`,children:[(0,l.jsxs)(`div`,{className:(0,c.default)(o.default.inner,ee,_&&o.default.shadow,v&&o.default.border,(w||T)&&o.default.custom,M&&o.default.fadeIn,M&&B&&o.default.isLoaded,U&&o.default.loading),ref:z,"data-testid":`video-inner`,children:[V&&(0,l.jsx)(`video`,{ref:G,src:q,className:o.default.video,style:$,autoPlay:d&&B,loop:f&&(!O||O.length<=1),muted:p,controls:Y&&m,poster:J,preload:b,playsInline:!0,onTimeUpdate:W.handleTimeUpdate,onLoadedMetadata:W.handleLoadedMetadata,onLoadedData:H,onEnded:W.handleEnded,onPlay:()=>{},onPause:()=>{},onClick:W.handleVideoClick,"data-testid":`video-element`,...I,children:F?.map((e,t)=>(0,l.jsx)(`track`,{...e},t))}),X.show&&(0,l.jsxs)(`div`,{className:o.default.skipIndicator,children:[(0,l.jsx)(t.Icon,{name:X.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,l.jsx)(t.Icon,{name:X.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,l.jsx)(t.Icon,{name:X.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,l.jsxs)(`span`,{children:[`10`,R]})]}),(w||T)&&(0,l.jsxs)(`div`,{role:`none`,className:o.default.customControls,onClick:()=>Z&&Q(null),children:[T&&(0,l.jsx)(i.VideoAdvancedMenu,{styles:o.default,activeMenu:Z,setActiveMenu:Q,qualities:A,currentQualityIndex:W.currentQualityIndex,handleQualityChange:W.handleQualityChange,playbackRate:W.playbackRate,setPlaybackRate:W.setPlaybackRate,activeFit:W.activeFit,setActiveFit:W.setActiveFit,playlist:O,currentPlayIndex:W.currentPlayIndex,playPlaylistItem:W.playPlaylistItem,labels:P}),(0,l.jsx)(a.VideoControls,{styles:o.default,playlist:O,advancedControls:T,currentPlayIndex:W.currentPlayIndex,setCurrentPlayIndex:W.setCurrentPlayIndex,skip:W.skip,isPlaying:K,togglePlay:W.togglePlay,currentTime:W.currentTime,duration:W.duration,handleSeek:W.handleSeek,volume:W.volume,isMuted:W.isMuted,toggleMute:W.toggleMute,handleVolumeChange:W.handleVolumeChange,activeMenu:Z,setActiveMenu:Q,togglePiP:W.togglePiP,isFullscreen:W.isFullscreen,toggleFullscreen:W.toggleFullscreen,formatTime:W.formatTime,labels:P})]})]}),x&&(0,l.jsx)(`figcaption`,{className:o.default.caption,"data-testid":`video-caption`,children:x})]})};exports.Video=u;

package/dist/components/media/Video/Video.d.ts

@@ -0,0 +1,66 @@
+import { default as React } from 'react';
+import { MediaRadius } from '../../../types/tokens';
+import { VideoLabels } from './components/VideoControls';
+export type { VideoLabels };
+type VideoProps = Omit<React.ComponentPropsWithoutRef<"video">, "src"> & {
+    /** Source URL of the video */
+    src?: string;
+    /** Width of the video */
+    width?: string | number;
+    /** Height of the video */
+    height?: string | number;
+    /** Whether to start playing automatically */
+    autoPlay?: boolean;
+    /** Whether to loop playback */
+    loop?: boolean;
+    /** Whether to start muted */
+    muted?: boolean;
+    /** Whether to show playback controls */
+    controls?: boolean;
+    /** Poster image shown before playback */
+    poster?: string;
+    /** Corner radius size */
+    radius?: MediaRadius;
+    /** Whether to show a shadow */
+    shadow?: boolean;
+    /** Whether to show a border */
+    border?: boolean;
+    /** How the video fits its box */
+    fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+    /** Preload behavior */
+    preload?: "auto" | "metadata" | "none";
+    /** Caption shown below the video */
+    caption?: React.ReactNode;
+    /** Whether to use the custom control bar instead of native controls */
+    customControls?: boolean;
+    /** Whether to enable advanced controls (quality, playback rate, etc.) */
+    advancedControls?: boolean;
+    /** Unique ID used to persist and resume playback position */
+    videoId?: string;
+    /** Whether to resume playback from the last saved position */
+    resumePlayback?: boolean;
+    /** Playlist of videos to play in sequence */
+    playlist?: {
+        src: string;
+        title?: string;
+        poster?: string;
+    }[];
+    /** Whether to automatically play the next playlist item */
+    autoPlayNext?: boolean;
+    /** Selectable quality sources */
+    qualities?: {
+        label: string;
+        src: string;
+    }[];
+    /** Loading behavior. With "lazy", an Intersection Observer is enabled. */
+    loading?: "eager" | "lazy";
+    /** Whether to fade in when loading completes */
+    fadeIn?: boolean;
+    /** Demo only: milliseconds to intentionally delay load completion */
+    demoDelay?: number;
+    /** Labels for manual translation */
+    labels?: VideoLabels;
+    /** Subtitle/caption tracks passed as <track> elements (kind, src, srcLang, label). */
+    tracks?: React.ComponentPropsWithoutRef<"track">[];
+};
+export declare const Video: ({ src, width: _width, height, autoPlay, loop, muted, controls, poster, radius, shadow, border, fit, preload, caption, className, style, customControls, advancedControls, videoId, resumePlayback, playlist, autoPlayNext, qualities, loading, fadeIn, demoDelay, labels, tracks, ...props }: VideoProps) => React.JSX.Element;