wimui 0.1.0

package/dist/components/media/Gallery/Gallery.js

@@ -0,0 +1,212 @@
+"use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import t from "../../../icon/close-small.js";
+import { Icon as n } from "../Icon/Icon.js";
+import { Button as r } from "../../form/Button/Button.js";
+import { Checkbox as i } from "../../form/Checkbox/Checkbox.js";
+import a from "./gallery.module.js";
+import o, { createContext as s, useCallback as c, useContext as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
+import m from "classnames";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/media/Gallery/Gallery.tsx
+var _ = s(null), v = () => {
+	let e = l(_);
+	if (!e) throw Error("Gallery subcomponents must be used within Gallery");
+	return e;
+}, y = o.forwardRef(({ items: i, columns: o = 3, gap: s = "md", aspect: l = "square", selectable: v = !1, selected: y, defaultSelected: x = [], onSelectionChange: S, onItemClick: C, renderActions: w, className: T, style: E, ...D }, O) => {
+	let { t: k } = e("components"), A = y !== void 0, [j, M] = p(() => new Set(x)), [N, P] = p(0), F = f(null), I = f(null), [L, R] = p(o), z = c((e) => {
+		I.current = e, typeof O == "function" ? O(e) : O && (O.current = e);
+	}, [O]);
+	u(() => {
+		let e = I.current;
+		if (!e) return;
+		let t = new ResizeObserver((e) => {
+			let t = e[0].contentRect.width;
+			R(t < 480 ? 1 : t < 576 ? 2 : o);
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [o]);
+	let B = d(() => A ? new Set(y) : j, [
+		A,
+		y,
+		j
+	]), V = c((e) => {
+		A || M(e), S?.(Array.from(e));
+	}, [A, S]), H = c((e, t, n) => {
+		let r = new Set(B);
+		if (n && F.current !== null) {
+			let n = Math.min(F.current, t), a = Math.max(F.current, t), o = !B.has(e);
+			for (let e = n; e <= a; e++) o ? r.add(i[e].id) : r.delete(i[e].id);
+		} else r.has(e) ? r.delete(e) : r.add(e), F.current = t;
+		V(r);
+	}, [
+		B,
+		i,
+		V
+	]), U = c(() => {
+		V(new Set(i.map((e) => e.id)));
+	}, [i, V]), W = c(() => {
+		V(/* @__PURE__ */ new Set());
+	}, [V]), G = d(() => {
+		let e = [];
+		for (let t = 0; t < i.length; t += L) e.push({
+			rowItems: i.slice(t, t + L),
+			startIndex: t
+		});
+		return e;
+	}, [i, L]), K = Array.from(B), q = K.length > 0, J = {
+		"--gallery-columns": L,
+		...E
+	}, Y = (e) => {
+		let t = L, n = i.length, r = N;
+		switch (e.key) {
+			case "ArrowRight":
+				e.preventDefault(), r = Math.min(N + 1, n - 1);
+				break;
+			case "ArrowLeft":
+				e.preventDefault(), r = Math.max(N - 1, 0);
+				break;
+			case "ArrowDown":
+				e.preventDefault(), r = Math.min(N + t, n - 1);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), r = Math.max(N - t, 0);
+				break;
+			case "Home":
+				e.preventDefault(), r = 0;
+				break;
+			case "End":
+				e.preventDefault(), r = n - 1;
+				break;
+			case "Escape":
+				v && (e.preventDefault(), W());
+				break;
+			case "a":
+			case "A":
+				v && (e.ctrlKey || e.metaKey) && (e.preventDefault(), U());
+				break;
+			default: return;
+		}
+		r !== N && (P(r), e.currentTarget.querySelectorAll("[data-gallery-item]")[r]?.focus());
+	};
+	return /* @__PURE__ */ h(_.Provider, {
+		value: {
+			selectable: v,
+			selectedIds: B,
+			lastClickedIndex: F,
+			items: i,
+			toggleSelect: H,
+			focusedIndex: N,
+			setFocusedIndex: P,
+			selectAll: U,
+			clearSelection: W,
+			onItemClick: C
+		},
+		children: /* @__PURE__ */ g("div", {
+			ref: z,
+			className: m("wim-gallery", a.root, T),
+			...D,
+			children: [v && q && /* @__PURE__ */ g("div", {
+				className: a.toolbar,
+				role: "toolbar",
+				"aria-label": k("gallery.toolbar_label"),
+				children: [/* @__PURE__ */ h("span", {
+					className: a.toolbarCount,
+					children: k("gallery.selected_count", { count: K.length })
+				}), /* @__PURE__ */ g("div", {
+					className: a.toolbarActions,
+					children: [w?.({
+						selectedIds: K,
+						clearSelection: W
+					}), /* @__PURE__ */ h(r, {
+						size: "sm",
+						variant: "ghost",
+						className: a.toolbarClear,
+						onClick: W,
+						"aria-label": k("gallery.clear_selection"),
+						icon: /* @__PURE__ */ h(n, {
+							component: t,
+							size: "sm"
+						})
+					})]
+				})]
+			}), /* @__PURE__ */ h("div", {
+				className: m(a.grid, a[`gap-${s}`], a[`aspect-${l}`]),
+				style: J,
+				role: "grid",
+				"aria-multiselectable": v || void 0,
+				"aria-label": k("gallery.grid_label"),
+				onKeyDown: Y,
+				tabIndex: 0,
+				children: G.map(({ rowItems: e, startIndex: t }, n) => /* @__PURE__ */ h("div", {
+					role: "row",
+					style: { display: "contents" },
+					children: e.map((e, n) => /* @__PURE__ */ h(b, {
+						item: e,
+						index: t + n
+					}, e.id))
+				}, n))
+			})]
+		})
+	});
+});
+y.displayName = "Gallery";
+var b = ({ item: t, index: n }) => {
+	let { selectable: r, selectedIds: o, toggleSelect: s, focusedIndex: c, setFocusedIndex: l, onItemClick: u } = v(), { t: d } = e("components"), f = o.has(t.id), p = c === n, _ = (e) => {
+		r ? s(t.id, n, e.shiftKey) : u?.(t, n), l(n);
+	}, y = (e) => {
+		e.stopPropagation(), s(t.id, n, e.shiftKey);
+	}, b = (e) => {
+		(e.key === " " || e.key === "Enter") && (e.preventDefault(), r ? s(t.id, n, !1) : u?.(t, n));
+	};
+	return /* @__PURE__ */ g("div", {
+		className: m(a.item, {
+			[a.selected]: f,
+			[a.selectable]: r
+		}),
+		role: "gridcell",
+		"aria-selected": r ? f : void 0,
+		tabIndex: p ? 0 : -1,
+		onClick: _,
+		onKeyDown: b,
+		onFocus: () => l(n),
+		"data-gallery-item": !0,
+		children: [/* @__PURE__ */ g("div", {
+			className: a.imageWrapper,
+			children: [
+				/* @__PURE__ */ h("img", {
+					src: t.src,
+					alt: t.alt ?? t.title ?? "",
+					className: a.image,
+					draggable: !1
+				}),
+				r && /* @__PURE__ */ h("div", {
+					className: a.checkboxOverlay,
+					children: /* @__PURE__ */ h(i, {
+						checked: f,
+						onChange: () => {},
+						onClick: y,
+						"aria-label": d(f ? "gallery.deselect_item" : "gallery.select_item", { title: t.title ?? t.alt ?? String(n + 1) }),
+						tabIndex: -1,
+						className: a.checkbox
+					})
+				}),
+				f && /* @__PURE__ */ h("div", {
+					className: a.selectedRing,
+					"aria-hidden": !0
+				})
+			]
+		}), (t.title || t.caption) && /* @__PURE__ */ g("div", {
+			className: a.caption,
+			children: [t.title && /* @__PURE__ */ h("span", {
+				className: a.captionTitle,
+				children: t.title
+			}), t.caption && /* @__PURE__ */ h("span", {
+				className: a.captionText,
+				children: t.caption
+			})]
+		})]
+	});
+};
+//#endregion
+export { y as Gallery };

package/dist/components/media/Gallery/gallery.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_7n8r7_3`,t=`_toolbar_7n8r7_10`,n=`_toolbarCount_7n8r7_31`,r=`_toolbarActions_7n8r7_37`,i=`_toolbarClear_7n8r7_43`,a=`_grid_7n8r7_47`,o=`_item_7n8r7_82`,s=`_selected_7n8r7_93`,c=`_imageWrapper_7n8r7_93`,l=`_image_7n8r7_93`,u=`_checkboxOverlay_7n8r7_134`,d=`_selectable_7n8r7_144`,f=`_checkbox_7n8r7_134`,p=`_selectedRing_7n8r7_152`,m=`_caption_7n8r7_160`,h=`_captionTitle_7n8r7_167`,g=`_captionText_7n8r7_176`,_={root:e,toolbar:t,"toolbar-in":`_toolbar-in_7n8r7_1`,toolbarCount:n,toolbarActions:r,toolbarClear:i,grid:a,"gap-xs":`_gap-xs_7n8r7_62`,"gap-sm":`_gap-sm_7n8r7_66`,"gap-md":`_gap-md_7n8r7_70`,"gap-lg":`_gap-lg_7n8r7_74`,"gap-xl":`_gap-xl_7n8r7_78`,item:o,selected:s,imageWrapper:c,"aspect-square":`_aspect-square_7n8r7_104`,"aspect-landscape":`_aspect-landscape_7n8r7_108`,"aspect-portrait":`_aspect-portrait_7n8r7_112`,"aspect-auto":`_aspect-auto_7n8r7_116`,image:l,checkboxOverlay:u,selectable:d,checkbox:f,selectedRing:p,caption:m,captionTitle:h,captionText:g};exports.caption=m,exports.captionText=g,exports.captionTitle=h,exports.checkbox=f,exports.checkboxOverlay=u,exports.default=_,exports.grid=a,exports.image=l,exports.imageWrapper=c,exports.item=o,exports.root=e,exports.selectable=d,exports.selected=s,exports.selectedRing=p,exports.toolbar=t,exports.toolbarActions=r,exports.toolbarClear=i,exports.toolbarCount=n;

package/dist/components/media/Gallery/gallery.module.js

@@ -0,0 +1,33 @@
+"use client";
+//#region src/components/media/Gallery/gallery.module.scss
+var e = "_root_7n8r7_3", t = "_toolbar_7n8r7_10", n = "_toolbarCount_7n8r7_31", r = "_toolbarActions_7n8r7_37", i = "_toolbarClear_7n8r7_43", a = "_grid_7n8r7_47", o = "_item_7n8r7_82", s = "_selected_7n8r7_93", c = "_imageWrapper_7n8r7_93", l = "_image_7n8r7_93", u = "_checkboxOverlay_7n8r7_134", d = "_selectable_7n8r7_144", f = "_checkbox_7n8r7_134", p = "_selectedRing_7n8r7_152", m = "_caption_7n8r7_160", h = "_captionTitle_7n8r7_167", g = "_captionText_7n8r7_176", _ = {
+	root: e,
+	toolbar: t,
+	"toolbar-in": "_toolbar-in_7n8r7_1",
+	toolbarCount: n,
+	toolbarActions: r,
+	toolbarClear: i,
+	grid: a,
+	"gap-xs": "_gap-xs_7n8r7_62",
+	"gap-sm": "_gap-sm_7n8r7_66",
+	"gap-md": "_gap-md_7n8r7_70",
+	"gap-lg": "_gap-lg_7n8r7_74",
+	"gap-xl": "_gap-xl_7n8r7_78",
+	item: o,
+	selected: s,
+	imageWrapper: c,
+	"aspect-square": "_aspect-square_7n8r7_104",
+	"aspect-landscape": "_aspect-landscape_7n8r7_108",
+	"aspect-portrait": "_aspect-portrait_7n8r7_112",
+	"aspect-auto": "_aspect-auto_7n8r7_116",
+	image: l,
+	checkboxOverlay: u,
+	selectable: d,
+	checkbox: f,
+	selectedRing: p,
+	caption: m,
+	captionTitle: h,
+	captionText: g
+};
+//#endregion
+export { m as caption, g as captionText, h as captionTitle, f as checkbox, u as checkboxOverlay, _ as default, a as grid, l as image, c as imageWrapper, o as item, e as root, d as selectable, s as selected, p as selectedRing, t as toolbar, r as toolbarActions, i as toolbarClear, n as toolbarCount };

package/dist/components/media/Icon/Icon.cjs

@@ -0,0 +1,2 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("./icon.module.cjs"),n=require("../../../icon/registry.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=({name:e,component:r,size:o=`md`,color:s,spin:c,className:l,...u})=>{let d=r||(e?n.registeredIcons[e]:null);return d?(0,a.jsx)(d,{className:(0,i.default)(`wim-icon`,t.default.root,o&&t.default[`size-${o}`],s&&t.default[s],(c||e&&(e===`LoadingIcon`||e===`SpinnerIcon`))&&t.default.loading,l),...u}):(e&&n.warnUnregisteredIcon(e),null)};exports.Icon=o;

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

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { ComponentSize } from '../../../types/tokens';
+import { IconName } from '../../../icon';
+type IconProps = Omit<React.SVGProps<SVGSVGElement>, "name"> & {
+    /** Icon name. Requires `import "wimui/icons"` once at the app entry to register icons. */
+    name?: IconName;
+    /** Icon component passed directly. Works without registration and is tree-shakable. */
+    component?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+    /** Size of the icon */
+    size?: ComponentSize;
+    /** Apply the loading rotation animation */
+    spin?: boolean;
+    /** Semantic color of the icon */
+    color?: "danger" | "success" | "warning" | "info" | "primary" | "secondary" | "tertiary" | "disabled";
+};
+export declare const Icon: ({ name, component, size, color, spin, className, ...props }: IconProps) => React.JSX.Element | null;
+export {};

package/dist/components/media/Icon/Icon.js

@@ -0,0 +1,16 @@
+"use client";
+import e from "./icon.module.js";
+import { registeredIcons as t, warnUnregisteredIcon as n } from "../../../icon/registry.js";
+import "react";
+import r from "classnames";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/media/Icon/Icon.tsx
+var a = ({ name: a, component: o, size: s = "md", color: c, spin: l, className: u, ...d }) => {
+	let f = o || (a ? t[a] : null);
+	return f ? /* @__PURE__ */ i(f, {
+		className: r("wim-icon", e.root, s && e[`size-${s}`], c && e[c], (l || a && (a === "LoadingIcon" || a === "SpinnerIcon")) && e.loading, u),
+		...d
+	}) : (a && n(a), null);
+};
+//#endregion
+export { a as Icon };

package/dist/components/media/Icon/icon.module.cjs

@@ -0,0 +1,2 @@
+"use client";
+var e=`_root_1fxrx_3`,t=`_danger_1fxrx_62`,n=`_success_1fxrx_65`,r=`_warning_1fxrx_68`,i=`_primary_1fxrx_71`,a=`_secondary_1fxrx_74`,o=`_tertiary_1fxrx_77`,s=`_disabled_1fxrx_80`,c=`_info_1fxrx_83`,l=`_loading_1fxrx_86`,u=`_rotate_1fxrx_1`,d={root:e,"size-xs":`_size-xs_1fxrx_35`,"size-sm":`_size-sm_1fxrx_38`,"size-md":`_size-md_1fxrx_41`,"size-lg":`_size-lg_1fxrx_44`,"size-xl":`_size-xl_1fxrx_47`,"size-2xl":`_size-2xl_1fxrx_50`,"size-3xl":`_size-3xl_1fxrx_53`,"size-4xl":`_size-4xl_1fxrx_56`,"size-5xl":`_size-5xl_1fxrx_59`,danger:t,success:n,warning:r,primary:i,secondary:a,tertiary:o,disabled:s,info:c,loading:l,rotate:u};exports.danger=t,exports.default=d,exports.disabled=s,exports.info=c,exports.loading=l,exports.primary=i,exports.root=e,exports.rotate=u,exports.secondary=a,exports.success=n,exports.tertiary=o,exports.warning=r;

package/dist/components/media/Icon/icon.module.js

@@ -0,0 +1,26 @@
+"use client";
+//#region src/components/media/Icon/icon.module.scss
+var e = "_root_1fxrx_3", t = "_danger_1fxrx_62", n = "_success_1fxrx_65", r = "_warning_1fxrx_68", i = "_primary_1fxrx_71", a = "_secondary_1fxrx_74", o = "_tertiary_1fxrx_77", s = "_disabled_1fxrx_80", c = "_info_1fxrx_83", l = "_loading_1fxrx_86", u = "_rotate_1fxrx_1", d = {
+	root: e,
+	"size-xs": "_size-xs_1fxrx_35",
+	"size-sm": "_size-sm_1fxrx_38",
+	"size-md": "_size-md_1fxrx_41",
+	"size-lg": "_size-lg_1fxrx_44",
+	"size-xl": "_size-xl_1fxrx_47",
+	"size-2xl": "_size-2xl_1fxrx_50",
+	"size-3xl": "_size-3xl_1fxrx_53",
+	"size-4xl": "_size-4xl_1fxrx_56",
+	"size-5xl": "_size-5xl_1fxrx_59",
+	danger: t,
+	success: n,
+	warning: r,
+	primary: i,
+	secondary: a,
+	tertiary: o,
+	disabled: s,
+	info: c,
+	loading: l,
+	rotate: u
+};
+//#endregion
+export { t as danger, d as default, s as disabled, c as info, l as loading, i as primary, e as root, u as rotate, a as secondary, n as success, o as tertiary, r as warning };

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

@@ -0,0 +1,7 @@
+"use client";
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../icon/image.cjs"),n=require("../Icon/Icon.cjs"),r=require("../../../hooks/useMediaLoader.cjs"),i=require("./image.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,t)=>{if(t===void 0||t===`none`||t===!1)return;let n={blur:{sm:`4px`,md:`8px`,lg:`16px`},grayscale:{sm:`33%`,md:`66%`,lg:`100%`,true:`100%`},brightness:{sm:`0.8`,md:`0.5`,lg:`0.3`},contrast:{sm:`1.2`,md:`1.5`,lg:`2`},sepia:{sm:`33%`,md:`66%`,lg:`100%`},saturate:{sm:`1.5`,md:`2`,lg:`3`},invert:{sm:`33%`,md:`66%`,lg:`100%`},opacity:{sm:`0.8`,md:`0.5`,lg:`0.2`}};if(e===`hueRotate`)return`${t}deg`;let r=typeof t==`boolean`?`true`:t;return n[e]?.[r]},l=e=>{let t=e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(e,t,n,r)=>t+t+n+n+r+r),n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return n?{r:parseInt(n[1],16)/255,g:parseInt(n[2],16)/255,b:parseInt(n[3],16)/255}:{r:0,g:0,b:0}},u=e=>{if(!e)return;let t=[],n=c(`blur`,e.blur);n&&t.push(`blur(${n})`);let r=c(`grayscale`,e.grayscale);r&&t.push(`grayscale(${r})`);let i=c(`brightness`,e.brightness);i&&t.push(`brightness(${i})`);let a=c(`contrast`,e.contrast);a&&t.push(`contrast(${a})`);let o=c(`sepia`,e.sepia);o&&t.push(`sepia(${o})`);let s=c(`saturate`,e.saturate);s&&t.push(`saturate(${s})`);let l=c(`hueRotate`,e.hueRotate);l&&t.push(`hue-rotate(${l})`);let u=c(`invert`,e.invert);u&&t.push(`invert(${u})`);let d=c(`opacity`,e.opacity);return d&&t.push(`opacity(${d})`),t.length>0?t.join(` `):`none`},d=({src:e,alt:c,width:d,height:f,radius:p=`none`,shadow:m=!1,border:h=!1,fit:g=`cover`,loading:_,caption:v,filter:y,hoverFilter:b,backdropFilter:x,hoverBackdropFilter:S,transition:C=`normal`,noise:w,duotone:T,overlay:E,zoom:D=!1,tilt:O=!1,fadeIn:k=!1,blendMode:A,bgColor:j,demoDelay:M,priority:N=!1,fallback:P,className:F,style:I,...L})=>{let[R,z]=a.default.useState(!1),{containerRef:B,isLoaded:V,isIntersecting:H,notifyLoaded:U,shouldShowSkeleton:W}=r.useMediaLoader({loading:_,src:e,demoDelay:M}),[G,K]=a.default.useState({}),q=a.default.useId().replace(/:/g,``),J=e=>{if(!O)return;let t=e.currentTarget.getBoundingClientRect(),n=e.clientX-t.left,r=e.clientY-t.top,i=t.width/2,a=t.height/2,o=(r-a)/a*-10,s=(n-i)/i*10;K({transform:`perspective(1000px) rotateX(${o}deg) rotateY(${s}deg)`})},Y=()=>{O&&K({transform:`perspective(1000px) rotateX(0deg) rotateY(0deg)`})},X=a.default.useMemo(()=>{let e={};D&&(e[`--wim-image-zoom-scale`]=(typeof D==`number`?D:1.05).toString());let t=u(y);t&&(e[`--wim-image-filter`]=t),T&&(e[`--wim-image-filter`]=`${e[`--wim-image-filter`]||``} url(#${q})`.trim());let n=u(x);n&&(e[`--wim-image-backdrop`]=n);let r=u(b);r&&(e[`--wim-image-hover-filter`]=r);let i=u(S);if(i&&(e[`--wim-image-hover-backdrop`]=i),w&&w!==`none`&&(e[`--wim-image-noise-opacity`]={xs:`0.02`,sm:`0.05`,md:`0.1`,lg:`0.2`,xl:`0.3`,"2xl":`0.4`,"3xl":`0.5`,"4xl":`0.6`,"5xl":`0.7`}[w]||`0`),E){let t=typeof E.intensity==`number`?E.intensity.toString():{sm:`0.3`,md:`0.6`,lg:`0.9`}[E.intensity]||`0.5`;e[`--wim-image-overlay-color`]=E.color||`rgba(0,0,0,0.5)`,e[`--wim-image-overlay-opacity`]=E.showOnHover?`0`:t,e[`--wim-image-overlay-hover-opacity`]=t,E.blendMode&&(e[`--wim-image-overlay-blend`]=E.blendMode)}return A&&(e[`--wim-image-blend-mode`]=A),j&&(e[`--wim-image-bg-color`]=j),e[`--wim-image-transition-duration`]={none:`0s`,fast:`var(--wim-duration-fast)`,normal:`var(--wim-duration-base)`,slow:`var(--wim-duration-extra-slow)`}[C],e},[y,b,x,S,C,w,T,E,q,D,A,j]),Z=a.default.useMemo(()=>{if(!T)return null;let e=l(T.light),t=l(T.dark);return`
+      ${e.r-t.r} 0 0 0 ${t.r}
+      ${e.g-t.g} 0 0 0 ${t.g}
+      ${e.b-t.b} 0 0 0 ${t.b}
+      0 0 0 1 0
+    `},[T]),Q={width:`100%`,height:f||`auto`,objectFit:g,...I},$=p===`none`?null:i.default[`radius${p.charAt(0).toUpperCase()+p.slice(1)}`];return(0,s.jsxs)(`figure`,{ref:B,className:(0,o.default)(`wim-image`,i.default.root,F),"data-testid":`image-root`,style:{maxWidth:d||`100%`,width:`100%`,...X,...G},onMouseMove:J,onMouseLeave:Y,children:[T&&(0,s.jsx)(`svg`,{style:{position:`absolute`,width:0,height:0},children:(0,s.jsx)(`filter`,{id:q,colorInterpolationFilters:`sRGB`,children:(0,s.jsx)(`feColorMatrix`,{type:`matrix`,values:Z||``})})}),(0,s.jsxs)(`div`,{className:(0,o.default)(i.default.inner,$,m&&i.default.shadow,h&&i.default.border,(x||S)&&i.default.hasBackdrop,w&&w!==`none`&&i.default.hasNoise,E&&i.default.hasOverlay,D&&i.default.zoomable,k&&i.default.fadeIn,k&&V&&i.default.isLoaded,W&&k&&i.default.loading),style:f===void 0?void 0:{height:f},"data-testid":`image-inner`,children:[H&&!R&&(0,s.jsx)(`img`,{src:e,alt:c,onLoad:U,onError:()=>z(!0),className:(0,o.default)(i.default.image,(y||b||T)&&i.default.hasFilter),style:Q,loading:_,fetchPriority:N?`high`:void 0,"data-testid":`image-element`,...L}),R&&(0,s.jsx)(`div`,{className:i.default.fallback,"data-testid":`image-fallback`,children:P||(0,s.jsxs)(`div`,{className:i.default.defaultFallback,children:[(0,s.jsx)(n.Icon,{component:t.default,size:`lg`,color:`secondary`}),c&&(0,s.jsx)(`span`,{className:i.default.fallbackText,children:c})]})})]}),v&&(0,s.jsx)(`figcaption`,{className:i.default.caption,"data-testid":`image-caption`,children:v})]})};exports.Image=d;

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

@@ -0,0 +1,106 @@
+import { default as React } from 'react';
+import { ComponentSize, MediaRadius } from '../../../types/tokens';
+/**
+ * フィルタの強さを定義する型
+ */
+export type ImageFilterIntensity = ComponentSize | "none";
+/**
+ * 画像に適用するフィルタオプション
+ */
+export interface ImageFilterOptions {
+    /** ぼかし */
+    blur?: ImageFilterIntensity;
+    /** グレースケール（白黒） */
+    grayscale?: ImageFilterIntensity | boolean;
+    /** 明るさ */
+    brightness?: ImageFilterIntensity;
+    /** コントラスト */
+    contrast?: ImageFilterIntensity;
+    /** セピア */
+    sepia?: ImageFilterIntensity;
+    /** 彩度 */
+    saturate?: ImageFilterIntensity;
+    /** 色相回転（角度） */
+    hueRotate?: "none" | "90" | "180" | "270";
+    /** 反転 */
+    invert?: ImageFilterIntensity;
+    /** 不透明度 */
+    opacity?: ImageFilterIntensity;
+}
+/**
+ * オーバーレイのオプション
+ */
+export interface ImageOverlayOptions {
+    /** カラーまたはグラデーション（CSS） */
+    color?: string;
+    /** 強度（不透明度） */
+    intensity?: number | "sm" | "md" | "lg";
+    /** ホバー時のみ表示するか */
+    showOnHover?: boolean;
+    /** ブレンドモード */
+    blendMode?: React.CSSProperties["mixBlendMode"];
+}
+/**
+ * デュオトーン（2色塗り）のオプション
+ */
+export interface ImageDuotoneOptions {
+    /** ハイライト（明るい部分）の色 */
+    light: string;
+    /** シャドウ（暗い部分）の色 */
+    dark: string;
+}
+export type ImageProps = React.ComponentPropsWithoutRef<"img"> & {
+    /** Source URL of the image */
+    src: string;
+    /** Alternative text for the image */
+    alt: string;
+    /** Width of the image */
+    width?: string | number;
+    /** Height of the image */
+    height?: string | number;
+    /** Corner radius size */
+    radius?: MediaRadius;
+    /** Whether to show a shadow */
+    shadow?: boolean;
+    /** Whether to show a border */
+    border?: boolean;
+    /** How the image fits its box */
+    fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+    /** Lazy-loading behavior */
+    loading?: "eager" | "lazy";
+    /** Caption shown below the image */
+    caption?: string;
+    /** Filter applied to the image itself */
+    filter?: ImageFilterOptions;
+    /** Filter applied on hover (when omitted, `filter` is kept) */
+    hoverFilter?: ImageFilterOptions;
+    /** Filter applied to the background (effective with transparent images) */
+    backdropFilter?: ImageFilterOptions;
+    /** Filter applied to the background on hover */
+    hoverBackdropFilter?: ImageFilterOptions;
+    /** Animation speed when switching filters */
+    transition?: "none" | "fast" | "normal" | "slow";
+    /** Intensity of the film-grain (noise) effect */
+    noise?: ImageFilterIntensity;
+    /** Duotone settings */
+    duotone?: ImageDuotoneOptions;
+    /** Overlay settings */
+    overlay?: ImageOverlayOptions;
+    /** Zoom factor on hover (e.g. 1.1) or true (defaults to 1.05) */
+    zoom?: boolean | number;
+    /** Tilt effect that follows the mouse */
+    tilt?: boolean;
+    /** Whether to fade in when loading completes */
+    fadeIn?: boolean;
+    /** Blend mode of the image itself */
+    blendMode?: React.CSSProperties["mixBlendMode"];
+    /** Background color used for blending */
+    bgColor?: string;
+    /** Demo only: milliseconds to intentionally delay load completion */
+    demoDelay?: number;
+    /** Whether to raise loading priority (e.g. an LCP candidate; sets fetchpriority="high") */
+    priority?: boolean;
+    /** Custom element shown when loading fails */
+    fallback?: React.ReactNode;
+};
+export declare const Image: ({ src, alt, width, height, radius, shadow, border, fit, loading, caption, filter, hoverFilter, backdropFilter, hoverBackdropFilter, transition, noise, duotone, overlay, zoom, tilt, fadeIn, blendMode, bgColor, demoDelay, priority, fallback, className, style, ...props }: ImageProps) => React.JSX.Element;

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

@@ -0,0 +1,230 @@
+"use client";
+import e from "../../../icon/image.js";
+import { Icon as t } from "../Icon/Icon.js";
+import { useMediaLoader as n } from "../../../hooks/useMediaLoader.js";
+import r from "./image.module.js";
+import i from "react";
+import a from "classnames";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/media/Image/Image.tsx
+var c = (e, t) => {
+	if (t === void 0 || t === "none" || t === !1) return;
+	let n = {
+		blur: {
+			sm: "4px",
+			md: "8px",
+			lg: "16px"
+		},
+		grayscale: {
+			sm: "33%",
+			md: "66%",
+			lg: "100%",
+			true: "100%"
+		},
+		brightness: {
+			sm: "0.8",
+			md: "0.5",
+			lg: "0.3"
+		},
+		contrast: {
+			sm: "1.2",
+			md: "1.5",
+			lg: "2"
+		},
+		sepia: {
+			sm: "33%",
+			md: "66%",
+			lg: "100%"
+		},
+		saturate: {
+			sm: "1.5",
+			md: "2",
+			lg: "3"
+		},
+		invert: {
+			sm: "33%",
+			md: "66%",
+			lg: "100%"
+		},
+		opacity: {
+			sm: "0.8",
+			md: "0.5",
+			lg: "0.2"
+		}
+	};
+	if (e === "hueRotate") return `${t}deg`;
+	let r = typeof t == "boolean" ? "true" : t;
+	return n[e]?.[r];
+}, l = (e) => {
+	let t = e.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (e, t, n, r) => t + t + n + n + r + r), n = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);
+	return n ? {
+		r: parseInt(n[1], 16) / 255,
+		g: parseInt(n[2], 16) / 255,
+		b: parseInt(n[3], 16) / 255
+	} : {
+		r: 0,
+		g: 0,
+		b: 0
+	};
+}, u = (e) => {
+	if (!e) return;
+	let t = [], n = c("blur", e.blur);
+	n && t.push(`blur(${n})`);
+	let r = c("grayscale", e.grayscale);
+	r && t.push(`grayscale(${r})`);
+	let i = c("brightness", e.brightness);
+	i && t.push(`brightness(${i})`);
+	let a = c("contrast", e.contrast);
+	a && t.push(`contrast(${a})`);
+	let o = c("sepia", e.sepia);
+	o && t.push(`sepia(${o})`);
+	let s = c("saturate", e.saturate);
+	s && t.push(`saturate(${s})`);
+	let l = c("hueRotate", e.hueRotate);
+	l && t.push(`hue-rotate(${l})`);
+	let u = c("invert", e.invert);
+	u && t.push(`invert(${u})`);
+	let d = c("opacity", e.opacity);
+	return d && t.push(`opacity(${d})`), t.length > 0 ? t.join(" ") : "none";
+}, d = ({ src: c, alt: d, width: f, height: p, radius: m = "none", shadow: h = !1, border: g = !1, fit: _ = "cover", loading: v, caption: y, filter: b, hoverFilter: x, backdropFilter: S, hoverBackdropFilter: C, transition: w = "normal", noise: T, duotone: E, overlay: D, zoom: O = !1, tilt: k = !1, fadeIn: A = !1, blendMode: j, bgColor: M, demoDelay: N, priority: P = !1, fallback: F, className: I, style: L, ...R }) => {
+	let [z, B] = i.useState(!1), { containerRef: V, isLoaded: H, isIntersecting: U, notifyLoaded: W, shouldShowSkeleton: G } = n({
+		loading: v,
+		src: c,
+		demoDelay: N
+	}), [K, q] = i.useState({}), J = i.useId().replace(/:/g, ""), Y = (e) => {
+		if (!k) return;
+		let t = e.currentTarget.getBoundingClientRect(), n = e.clientX - t.left, r = e.clientY - t.top, i = t.width / 2, a = t.height / 2, o = (r - a) / a * -10, s = (n - i) / i * 10;
+		q({ transform: `perspective(1000px) rotateX(${o}deg) rotateY(${s}deg)` });
+	}, X = () => {
+		k && q({ transform: "perspective(1000px) rotateX(0deg) rotateY(0deg)" });
+	}, Z = i.useMemo(() => {
+		let e = {};
+		O && (e["--wim-image-zoom-scale"] = (typeof O == "number" ? O : 1.05).toString());
+		let t = u(b);
+		t && (e["--wim-image-filter"] = t), E && (e["--wim-image-filter"] = `${e["--wim-image-filter"] || ""} url(#${J})`.trim());
+		let n = u(S);
+		n && (e["--wim-image-backdrop"] = n);
+		let r = u(x);
+		r && (e["--wim-image-hover-filter"] = r);
+		let i = u(C);
+		if (i && (e["--wim-image-hover-backdrop"] = i), T && T !== "none" && (e["--wim-image-noise-opacity"] = {
+			xs: "0.02",
+			sm: "0.05",
+			md: "0.1",
+			lg: "0.2",
+			xl: "0.3",
+			"2xl": "0.4",
+			"3xl": "0.5",
+			"4xl": "0.6",
+			"5xl": "0.7"
+		}[T] || "0"), D) {
+			let t = typeof D.intensity == "number" ? D.intensity.toString() : {
+				sm: "0.3",
+				md: "0.6",
+				lg: "0.9"
+			}[D.intensity] || "0.5";
+			e["--wim-image-overlay-color"] = D.color || "rgba(0,0,0,0.5)", e["--wim-image-overlay-opacity"] = D.showOnHover ? "0" : t, e["--wim-image-overlay-hover-opacity"] = t, D.blendMode && (e["--wim-image-overlay-blend"] = D.blendMode);
+		}
+		return j && (e["--wim-image-blend-mode"] = j), M && (e["--wim-image-bg-color"] = M), e["--wim-image-transition-duration"] = {
+			none: "0s",
+			fast: "var(--wim-duration-fast)",
+			normal: "var(--wim-duration-base)",
+			slow: "var(--wim-duration-extra-slow)"
+		}[w], e;
+	}, [
+		b,
+		x,
+		S,
+		C,
+		w,
+		T,
+		E,
+		D,
+		J,
+		O,
+		j,
+		M
+	]), Q = i.useMemo(() => {
+		if (!E) return null;
+		let e = l(E.light), t = l(E.dark);
+		return `
+      ${e.r - t.r} 0 0 0 ${t.r}
+      ${e.g - t.g} 0 0 0 ${t.g}
+      ${e.b - t.b} 0 0 0 ${t.b}
+      0 0 0 1 0
+    `;
+	}, [E]), $ = {
+		width: "100%",
+		height: p || "auto",
+		objectFit: _,
+		...L
+	}, ee = m === "none" ? null : r[`radius${m.charAt(0).toUpperCase() + m.slice(1)}`];
+	return /* @__PURE__ */ s("figure", {
+		ref: V,
+		className: a("wim-image", r.root, I),
+		"data-testid": "image-root",
+		style: {
+			maxWidth: f || "100%",
+			width: "100%",
+			...Z,
+			...K
+		},
+		onMouseMove: Y,
+		onMouseLeave: X,
+		children: [
+			E && /* @__PURE__ */ o("svg", {
+				style: {
+					position: "absolute",
+					width: 0,
+					height: 0
+				},
+				children: /* @__PURE__ */ o("filter", {
+					id: J,
+					colorInterpolationFilters: "sRGB",
+					children: /* @__PURE__ */ o("feColorMatrix", {
+						type: "matrix",
+						values: Q || ""
+					})
+				})
+			}),
+			/* @__PURE__ */ s("div", {
+				className: a(r.inner, ee, h && r.shadow, g && r.border, (S || C) && r.hasBackdrop, T && T !== "none" && r.hasNoise, D && r.hasOverlay, O && r.zoomable, A && r.fadeIn, A && H && r.isLoaded, G && A && r.loading),
+				style: p === void 0 ? void 0 : { height: p },
+				"data-testid": "image-inner",
+				children: [U && !z && /* @__PURE__ */ o("img", {
+					src: c,
+					alt: d,
+					onLoad: W,
+					onError: () => B(!0),
+					className: a(r.image, (b || x || E) && r.hasFilter),
+					style: $,
+					loading: v,
+					fetchPriority: P ? "high" : void 0,
+					"data-testid": "image-element",
+					...R
+				}), z && /* @__PURE__ */ o("div", {
+					className: r.fallback,
+					"data-testid": "image-fallback",
+					children: F || /* @__PURE__ */ s("div", {
+						className: r.defaultFallback,
+						children: [/* @__PURE__ */ o(t, {
+							component: e,
+							size: "lg",
+							color: "secondary"
+						}), d && /* @__PURE__ */ o("span", {
+							className: r.fallbackText,
+							children: d
+						})]
+					})
+				})]
+			}),
+			y && /* @__PURE__ */ o("figcaption", {
+				className: r.caption,
+				"data-testid": "image-caption",
+				children: y
+			})
+		]
+	});
+};
+//#endregion
+export { d as Image };