@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/data-display/EmptyState/EmptyState.mjs

@@ -0,0 +1,146 @@
+import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import { VisuallyHidden as n } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { Button as r } from "../../primitives/Button/Button.mjs";
+import { ErrorIcon as i, FileIcon as a, LockIcon as o, OfflineIcon as s, RefreshIcon as c, SearchIcon as l, StarIcon as u } from "../../primitives/Icon/icons.mjs";
+import { Heading as d, Text as f } from "../../primitives/Typography/Typography.mjs";
+import p from "./EmptyState.module.css.mjs";
+import { useEffect as m, useId as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/data-display/EmptyState/EmptyState.tsx
+var ee = {
+	neutral: p.neutral,
+	primary: p.primary,
+	info: p.info,
+	success: p.success,
+	warning: p.warning,
+	danger: p.danger
+}, y = {
+	plain: p.plain,
+	card: p.card,
+	subtle: p.subtle
+}, b = {
+	sm: p.sm,
+	md: p.md,
+	lg: p.lg
+}, x = {
+	center: p.alignCenter,
+	start: p.alignStart
+}, S = {
+	sm: "lg",
+	md: "2xl",
+	lg: "4xl"
+}, C = {
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+}, w = {
+	"no-data": {
+		icon: /* @__PURE__ */ _(a, {}),
+		tone: "neutral",
+		copy: "noData"
+	},
+	"no-results": {
+		icon: /* @__PURE__ */ _(l, {}),
+		tone: "neutral",
+		copy: "noResults"
+	},
+	error: {
+		icon: /* @__PURE__ */ _(i, {}),
+		tone: "danger",
+		copy: "error"
+	},
+	offline: {
+		icon: /* @__PURE__ */ _(s, {}),
+		tone: "warning",
+		copy: "offline"
+	},
+	"no-access": {
+		icon: /* @__PURE__ */ _(o, {}),
+		tone: "neutral",
+		copy: "noAccess"
+	},
+	"first-run": {
+		icon: /* @__PURE__ */ _(u, {}),
+		tone: "primary",
+		copy: "firstRun"
+	}
+};
+function T(e, t, n) {
+	return t === "noResults" ? {
+		title: e.noResults.title(n),
+		description: e.noResults.description
+	} : e[t];
+}
+var E = (e) => typeof e == "string" || typeof e == "number" ? String(e) : void 0, D = ({ kind: i, query: a, icon: o, illustration: s, title: l, headingLevel: u = 2, description: D, actions: O, onRetry: k, retryLabel: A, retrying: te = !1, footer: j, tone: M, size: N = "md", align: P = "center", variant: F = "plain", announce: I = !1, announceMessage: L, className: R, children: z, ...B }) => {
+	let V = e(), H = A ?? V.emptyState.retry, U = i ? w[i] : void 0, W = U ? T(V.emptyState, U.copy, a) : void 0, G = h(), K = l === void 0 ? W?.title : l, q = D === void 0 ? W?.description : D, J = o === void 0 ? U?.icon : o, Y = M ?? U?.tone ?? "neutral", X = K != null && K !== "", Z = q != null && q !== "", ne = k !== void 0 || O != null, Q = L ?? [E(K), E(q)].filter(Boolean).join(". "), [re, $] = g("");
+	m(() => {
+		if ($(""), !I || !Q) return;
+		let e = window.setTimeout(() => $(Q), 150);
+		return () => window.clearTimeout(e);
+	}, [I, Q]);
+	let ie = B.role && X && B["aria-label"] === void 0 && B["aria-labelledby"] === void 0 ? G : void 0;
+	return /* @__PURE__ */ v("div", {
+		"aria-labelledby": ie,
+		...B,
+		className: t(p.root, y[F], b[N], x[P], ee[Y], R),
+		"data-kind": i,
+		children: [
+			s == null ? J != null && /* @__PURE__ */ v("div", {
+				className: p.media,
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ _("span", {
+					className: p.blob,
+					children: J
+				}), /* @__PURE__ */ _("span", { className: p.dot })]
+			}) : /* @__PURE__ */ _("div", {
+				className: p.illustration,
+				"aria-hidden": "true",
+				children: s
+			}),
+			(X || Z) && /* @__PURE__ */ v("div", {
+				className: p.text,
+				children: [X && /* @__PURE__ */ _(d, {
+					id: G,
+					level: u,
+					size: S[N],
+					weight: "black",
+					className: p.title,
+					children: K
+				}), Z && /* @__PURE__ */ _(f, {
+					size: C[N],
+					tone: "muted",
+					leading: "normal",
+					wrap: "pretty",
+					className: p.description,
+					children: q
+				})]
+			}),
+			z,
+			ne && /* @__PURE__ */ v("div", {
+				className: p.actions,
+				children: [k !== void 0 && /* @__PURE__ */ _(r, {
+					size: N,
+					variant: "solid",
+					tone: "primary",
+					loading: te,
+					startIcon: /* @__PURE__ */ _(c, {}),
+					onClick: () => k(),
+					children: H
+				}), O]
+			}),
+			j != null && /* @__PURE__ */ _("div", {
+				className: p.footer,
+				children: j
+			}),
+			I && /* @__PURE__ */ _(n, {
+				role: I === "assertive" ? "alert" : "status",
+				"aria-live": I === "assertive" ? "assertive" : "polite",
+				"aria-atomic": "true",
+				children: re
+			})
+		]
+	});
+};
+//#endregion
+export { D as EmptyState };

package/dist/components/data-display/EmptyState/EmptyState.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_nsx1u_33`,t=`_alignCenter_nsx1u_87`,n=`_alignStart_nsx1u_97`,r=`_plain_nsx1u_111`,i=`_card_nsx1u_119`,a=`_subtle_nsx1u_131`,o=`_sm_nsx1u_147`,s=`_md_nsx1u_169`,c=`_lg_nsx1u_191`,l=`_neutral_nsx1u_217`,u=`_primary_nsx1u_225`,d=`_info_nsx1u_233`,f=`_success_nsx1u_241`,p=`_warning_nsx1u_249`,m=`_danger_nsx1u_257`,h=`_media_nsx1u_271`,g=`_blob_nsx1u_287`,_=`_dot_nsx1u_323`,v=`_illustration_nsx1u_357`,y=`_text_nsx1u_391`,b=`_title_nsx1u_407`,x=`_description_nsx1u_415`,S=`_actions_nsx1u_427`,C=`_footer_nsx1u_459`,w={root:e,alignCenter:t,alignStart:n,plain:r,card:i,subtle:a,sm:o,md:s,lg:c,neutral:l,primary:u,info:d,success:f,warning:p,danger:m,media:h,"pop-in":`_pop-in_nsx1u_1`,blob:g,dot:_,"dot-in":`_dot-in_nsx1u_1`,illustration:v,text:y,title:b,description:x,actions:S,footer:C};exports.actions=S,exports.alignCenter=t,exports.alignStart=n,exports.blob=g,exports.card=i,exports.danger=m,exports.default=w,exports.description=x,exports.dot=_,exports.footer=C,exports.illustration=v,exports.info=d,exports.lg=c,exports.md=s,exports.media=h,exports.neutral=l,exports.plain=r,exports.primary=u,exports.root=e,exports.sm=o,exports.subtle=a,exports.success=f,exports.text=y,exports.title=b,exports.warning=p;

package/dist/components/data-display/EmptyState/EmptyState.module.css.mjs

@@ -0,0 +1,31 @@
+//#region src/components/data-display/EmptyState/EmptyState.module.css
+var e = "_root_nsx1u_33", t = "_alignCenter_nsx1u_87", n = "_alignStart_nsx1u_97", r = "_plain_nsx1u_111", i = "_card_nsx1u_119", a = "_subtle_nsx1u_131", o = "_sm_nsx1u_147", s = "_md_nsx1u_169", c = "_lg_nsx1u_191", l = "_neutral_nsx1u_217", u = "_primary_nsx1u_225", d = "_info_nsx1u_233", f = "_success_nsx1u_241", p = "_warning_nsx1u_249", m = "_danger_nsx1u_257", h = "_media_nsx1u_271", g = "_blob_nsx1u_287", _ = "_dot_nsx1u_323", v = "_illustration_nsx1u_357", y = "_text_nsx1u_391", b = "_title_nsx1u_407", x = "_description_nsx1u_415", S = "_actions_nsx1u_427", C = "_footer_nsx1u_459", w = {
+	root: e,
+	alignCenter: t,
+	alignStart: n,
+	plain: r,
+	card: i,
+	subtle: a,
+	sm: o,
+	md: s,
+	lg: c,
+	neutral: l,
+	primary: u,
+	info: d,
+	success: f,
+	warning: p,
+	danger: m,
+	media: h,
+	"pop-in": "_pop-in_nsx1u_1",
+	blob: g,
+	dot: _,
+	"dot-in": "_dot-in_nsx1u_1",
+	illustration: v,
+	text: y,
+	title: b,
+	description: x,
+	actions: S,
+	footer: C
+};
+//#endregion
+export { S as actions, t as alignCenter, n as alignStart, g as blob, i as card, m as danger, w as default, x as description, _ as dot, C as footer, v as illustration, d as info, c as lg, s as md, h as media, l as neutral, r as plain, u as primary, e as root, o as sm, a as subtle, f as success, y as text, b as title, p as warning };

package/dist/components/data-display/EmptyState/index.d.ts

@@ -0,0 +1 @@
+export * from './EmptyState';

package/dist/components/data-display/Image/Image.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../utils/cx.cjs.js"),t=require("../../../utils/fillSlot.cjs.js"),n=require("../../primitives/Icon/icons.cjs.js"),ee=require("../../feedback/Skeleton/Skeleton.cjs.js"),r=require("./Image.module.css.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o={square:r.default.ratioSquare,landscape:r.default.ratioLandscape,video:r.default.ratioVideo,wide:r.default.ratioWide,portrait:r.default.ratioPortrait},s={cover:r.default.fitCover,contain:r.default.fitContain,fill:r.default.fitFill,none:r.default.fitNone,"scale-down":r.default.fitScaleDown},c={none:r.default.radiusNone,xs:r.default.radiusXs,sm:r.default.radiusSm,md:r.default.radiusMd,lg:r.default.radiusLg,xl:r.default.radiusXl,"2xl":r.default.radius2xl,pill:r.default.radiusPill},l={none:r.default.shadowNone,xs:r.default.shadowXs,sm:r.default.shadowSm,md:r.default.shadowMd,lg:r.default.shadowLg,xl:r.default.shadowXl};function u({alt:u,src:d,ratio:f,fit:p=`cover`,position:m,stretch:te,priority:h=!1,placeholder:g=`skeleton`,blurDataURL:_,fallbackSrc:v,fallback:y,radius:b,bordered:x=!1,shadow:ne=`none`,caption:S,onLoadingStatusChange:C,className:w,style:T,ref:E,loading:re,decoding:ie,fetchPriority:D,onLoad:O,onError:k,width:A,height:j,srcSet:ae,sizes:oe,...M}){let N=t.useFillSlot(),P=te??N,se=b??(N?`none`:`lg`),[F,I]=(0,i.useState)({key:d,stage:0,loaded:!1}),L=F;F.key!==d&&(L={key:d,stage:0,loaded:!1},I(L));let R=!!v&&v!==d,z=L.stage===0?d:L.stage===1?v:void 0,B=L.stage===2?`error`:L.loaded?`loaded`:`loading`,V=(0,i.useCallback)(()=>{I(e=>{let t=e.key===d?e:{key:d,stage:0,loaded:!1};return t.loaded?t:{...t,loaded:!0}})},[d]),H=(0,i.useCallback)(()=>{I(e=>{let t=e.key===d?e:{key:d,stage:0,loaded:!1};return t.stage===2?t:{key:d,stage:t.stage===0&&R?1:2,loaded:!1}})},[d,R]),U=(0,i.useRef)(C);U.current=C;let W=(0,i.useRef)(void 0);(0,i.useEffect)(()=>{W.current!==B&&(W.current=B,U.current?.(B))},[B]);let G=(0,i.useRef)(null);(0,i.useLayoutEffect)(()=>{let e=G.current;if(!e||!z||!e.complete)return;if(e.naturalWidth>0){V();return}let t=!1;return e.decode().then(()=>!t&&V(),()=>!t&&H()),()=>{t=!0}},[z,V,H]);let ce=(0,i.useCallback)(e=>{G.current=e,typeof E==`function`?E(e):E&&(E.current=e)},[E]),le=e=>{V(),O?.(e)},ue=e=>{H(),k?.(e)},de=u===``,fe=M[`aria-label`]??u,pe=e=>Object.fromEntries(Object.entries(e).filter(([e])=>e===`id`||e===`title`||e.startsWith(`data-`)||e.startsWith(`aria-`))),K=de?{"aria-hidden":!0}:{role:`img`,"aria-label":fe},me=typeof f==`string`?o[f]:void 0,q=!P&&f===void 0&&typeof A==`number`&&typeof j==`number`&&A>0&&j>0?{width:A,height:j}:void 0,J=P||f!==void 0||q!==void 0,Y=P?void 0:typeof f==`number`?{aspectRatio:String(f)}:q?{aspectRatio:`${q.width} / ${q.height}`,inlineSize:`${q.width}px`}:void 0,X=null,Z=`custom`;g===`skeleton`?(Z=`skeleton`,X=(0,a.jsx)(ee.Skeleton,{width:`100%`,height:`100%`,radius:`none`})):g===`blur`?(Z=_?`blur`:`empty`,X=_?(0,a.jsx)(`img`,{src:_,alt:``,className:r.default.blurImage,decoding:`sync`}):null):g===`empty`||g==null||typeof g==`boolean`?Z=`empty`:X=g;let he=B===`loading`||B===`loaded`&&Z===`blur`,ge=!z&&B===`loading`,_e=e.cx(r.default.frame,J?r.default.sized:r.default.intrinsic,P&&r.default.stretch,!P&&me,c[se],l[ne],x&&r.default.bordered),Q=S!=null&&S!==!1,$=(0,a.jsxs)(`span`,{className:e.cx(_e,!Q&&w),style:Q?Y:{...Y,...T},"data-status":B,children:[he&&(0,a.jsx)(`span`,{className:e.cx(r.default.placeholder,Z===`empty`&&r.default.placeholderEmpty,B===`loaded`&&r.default.placeholderDone),...ge?K:{"aria-hidden":!0},children:X}),B===`error`?(0,a.jsx)(`span`,{className:r.default.fallback,...pe(M),...K,children:y??(0,a.jsx)(n.ImageIcon,{size:`xl`,className:r.default.fallbackIcon})}):z&&(0,i.createElement)(`img`,{...M,key:z,ref:ce,src:z,srcSet:L.stage===0?ae:void 0,sizes:L.stage===0?oe:void 0,alt:u,width:A,height:j,loading:h?`eager`:re??`lazy`,decoding:ie??`async`,fetchPriority:h?`high`:D,className:e.cx(r.default.img,s[p],B===`loaded`&&r.default.loaded),style:m?{objectPosition:m}:void 0,onLoad:le,onError:ue})]});return Q?(0,a.jsxs)(`figure`,{className:e.cx(r.default.figure,P||f!==void 0?r.default.figureFull:r.default.figureFit,w),style:T,children:[$,(0,a.jsx)(`figcaption`,{className:r.default.caption,children:S})]}):$}exports.Image=u;

package/dist/components/data-display/Image/Image.d.ts

@@ -0,0 +1,107 @@
+import { ComponentPropsWithRef, ReactNode, Ref } from 'react';
+import { Radius } from '../../../types/common';
+/**
+ * Named aspect ratios (width / height):
+ * - `square` 1 / 1
+ * - `landscape` 4 / 3
+ * - `video` 16 / 9
+ * - `wide` 21 / 9
+ * - `portrait` 3 / 4
+ */
+export type ImageRatioPreset = "square" | "landscape" | "video" | "wide" | "portrait";
+/** Aspect ratio: a preset name, or a number of width / height (e.g. `16 / 9`, `1.5`). */
+export type ImageRatio = ImageRatioPreset | number;
+/** How the picture fills its box (CSS `object-fit`). */
+export type ImageFit = "cover" | "contain" | "fill" | "none" | "scale-down";
+/** Soft drop shadow (`--shadow-*`). Same vocabulary as `Box`. */
+export type ImageShadow = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * What shows while the picture loads.
+ * - `skeleton`: a pulsing `Skeleton` fill.
+ * - `blur`: `blurDataURL` (a tiny data URI) scaled up and blurred.
+ * - `empty`: a plain neutral surface.
+ * - any React node: your own placeholder (decorative; it's hidden from assistive technology).
+ */
+export type ImagePlaceholder = "skeleton" | "blur" | "empty" | ReactNode;
+/** Loading state reported by `onLoadingStatusChange`. */
+export type ImageLoadingStatus = "loading" | "loaded" | "error";
+export interface ImageProps extends Omit<ComponentPropsWithRef<"img">, "alt" | "placeholder"> {
+    /**
+     * Text alternative. Required. Describe what the picture shows, or pass
+     * `alt=""` to mark the image decorative: it, its placeholder, and its error
+     * fallback are then hidden from assistive technology.
+     */
+    alt: string;
+    /**
+     * Image URL. While it is `undefined`, the placeholder shows (useful while a
+     * URL is still being fetched). Changing it resets the loading state.
+     */
+    src?: string;
+    /**
+     * Responsive candidates, passed to the `<img>` as-is, e.g.
+     * `"team-400.jpg 400w, team-800.jpg 800w"`. Pair with `sizes` so the
+     * browser can pick the smallest file that fills the rendered width.
+     */
+    srcSet?: string;
+    /** Rendered width hints for `srcSet` `w` descriptors, e.g. `"(min-width: 768px) 50vw, 100vw"`. */
+    sizes?: string;
+    /**
+     * Aspect ratio of the frame, applied with CSS `aspect-ratio` so space is
+     * reserved before the image loads (no layout shift). A preset (`square`
+     * 1/1, `landscape` 4/3, `video` 16/9, `wide` 21/9, `portrait` 3/4) or a
+     * number (`16 / 9`). The frame then fills its container's width. Without a
+     * ratio, the frame hugs the image; pass `width` and `height` to reserve space.
+     */
+    ratio?: ImageRatio;
+    /** How the picture fills the frame (CSS `object-fit`). Matters when `ratio` or `stretch` sets the frame size. @default "cover" */
+    fit?: ImageFit;
+    /** Which part of the picture stays in view when cropped (CSS `object-position`), e.g. `"top"` or `"50% 20%"`. */
+    position?: string;
+    /**
+     * Fill the parent's width and height instead of using `ratio`. Use it when
+     * the parent already reserves the space. Defaults to `true` inside
+     * `Card.Media` (which sizes and clips its media), `false` elsewhere.
+     */
+    stretch?: boolean;
+    /**
+     * Load as soon as possible: sets `loading="eager"` and
+     * `fetchPriority="high"`. Use for the main above-the-fold image only.
+     * Otherwise images load lazily (`loading="lazy"`, `decoding="async"`).
+     */
+    priority?: boolean;
+    /** What shows while loading: `skeleton`, `blur` (needs `blurDataURL`), `empty`, or your own node. @default "skeleton" */
+    placeholder?: ImagePlaceholder;
+    /** Tiny data URI (e.g. a 16px-wide preview) shown scaled and blurred when `placeholder="blur"`. */
+    blurDataURL?: string;
+    /** Second URL tried once if `src` fails. */
+    fallbackSrc?: string;
+    /**
+     * Shown when `src` (and `fallbackSrc`) fail. Defaults to a neutral surface
+     * with an image icon. It sits inside a `role="img"` box named by `alt`
+     * (hidden when `alt=""`), so keep it visual.
+     */
+    fallback?: ReactNode;
+    /** Corner rounding (`--radius-*`). Defaults to `none` inside `Card.Media`, which owns the corners. @default "lg" */
+    radius?: Radius;
+    /** Draw a subtle border around the frame, on top of the picture's edges. */
+    bordered?: boolean;
+    /** Soft drop shadow (`--shadow-*`). @default "none" */
+    shadow?: ImageShadow;
+    /** Caption. When set, the image is wrapped in a `<figure>` with a `<figcaption>`. */
+    caption?: ReactNode;
+    /** Called when loading starts (or restarts after `src` changes), finishes, or fails for good. */
+    onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+    /**
+     * The `<img>` element. All other native props (`id`, `data-*`, `aria-*`,
+     * `crossOrigin`, `onLoad`, ...) go on the `<img>` too; `className` and
+     * `style` go on the outer frame (or the `<figure>` when there's a caption).
+     */
+    ref?: Ref<HTMLImageElement>;
+}
+/**
+ * A native `<img>` in a frame that reserves its aspect ratio, shows a
+ * placeholder while loading, fades the picture in, and falls back gracefully
+ * on errors (`fallbackSrc`, then a `fallback` box that keeps the `alt` text
+ * as its accessible name).
+ */
+export declare function Image({ alt, src, ratio, fit, position, stretch: stretchProp, priority, placeholder, blurDataURL, fallbackSrc, fallback, radius: radiusProp, bordered, shadow, caption, onLoadingStatusChange, className, style, ref, loading, decoding, fetchPriority, onLoad, onError, width, height, srcSet, sizes, ...rest }: ImageProps): import("react").JSX.Element;

package/dist/components/data-display/Image/Image.mjs

@@ -0,0 +1,171 @@
+import { cx as e } from "../../../utils/cx.mjs";
+import { useFillSlot as t } from "../../../utils/fillSlot.mjs";
+import { ImageIcon as ee } from "../../primitives/Icon/icons.mjs";
+import { Skeleton as n } from "../../feedback/Skeleton/Skeleton.mjs";
+import r from "./Image.module.css.mjs";
+import { createElement as i, useCallback as a, useEffect as te, useLayoutEffect as ne, useRef as o, useState as re } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/data-display/Image/Image.tsx
+var l = {
+	square: r.ratioSquare,
+	landscape: r.ratioLandscape,
+	video: r.ratioVideo,
+	wide: r.ratioWide,
+	portrait: r.ratioPortrait
+}, u = {
+	cover: r.fitCover,
+	contain: r.fitContain,
+	fill: r.fitFill,
+	none: r.fitNone,
+	"scale-down": r.fitScaleDown
+}, ie = {
+	none: r.radiusNone,
+	xs: r.radiusXs,
+	sm: r.radiusSm,
+	md: r.radiusMd,
+	lg: r.radiusLg,
+	xl: r.radiusXl,
+	"2xl": r.radius2xl,
+	pill: r.radiusPill
+}, ae = {
+	none: r.shadowNone,
+	xs: r.shadowXs,
+	sm: r.shadowSm,
+	md: r.shadowMd,
+	lg: r.shadowLg,
+	xl: r.shadowXl
+};
+function d({ alt: d, src: f, ratio: p, fit: oe = "cover", position: m, stretch: h, priority: g = !1, placeholder: _ = "skeleton", blurDataURL: v, fallbackSrc: y, fallback: b, radius: x, bordered: S = !1, shadow: C = "none", caption: w, onLoadingStatusChange: T, className: E, style: D, ref: O, loading: se, decoding: ce, fetchPriority: le, onLoad: ue, onError: de, width: k, height: A, srcSet: fe, sizes: pe, ...j }) {
+	let M = t(), N = h ?? M, P = x ?? (M ? "none" : "lg"), [F, I] = re({
+		key: f,
+		stage: 0,
+		loaded: !1
+	}), L = F;
+	F.key !== f && (L = {
+		key: f,
+		stage: 0,
+		loaded: !1
+	}, I(L));
+	let R = !!y && y !== f, z = L.stage === 0 ? f : L.stage === 1 ? y : void 0, B = L.stage === 2 ? "error" : L.loaded ? "loaded" : "loading", V = a(() => {
+		I((e) => {
+			let t = e.key === f ? e : {
+				key: f,
+				stage: 0,
+				loaded: !1
+			};
+			return t.loaded ? t : {
+				...t,
+				loaded: !0
+			};
+		});
+	}, [f]), H = a(() => {
+		I((e) => {
+			let t = e.key === f ? e : {
+				key: f,
+				stage: 0,
+				loaded: !1
+			};
+			return t.stage === 2 ? t : {
+				key: f,
+				stage: t.stage === 0 && R ? 1 : 2,
+				loaded: !1
+			};
+		});
+	}, [f, R]), U = o(T);
+	U.current = T;
+	let W = o(void 0);
+	te(() => {
+		W.current !== B && (W.current = B, U.current?.(B));
+	}, [B]);
+	let G = o(null);
+	ne(() => {
+		let e = G.current;
+		if (!e || !z || !e.complete) return;
+		if (e.naturalWidth > 0) {
+			V();
+			return;
+		}
+		let t = !1;
+		return e.decode().then(() => !t && V(), () => !t && H()), () => {
+			t = !0;
+		};
+	}, [
+		z,
+		V,
+		H
+	]);
+	let me = a((e) => {
+		G.current = e, typeof O == "function" ? O(e) : O && (O.current = e);
+	}, [O]), he = (e) => {
+		V(), ue?.(e);
+	}, ge = (e) => {
+		H(), de?.(e);
+	}, _e = d === "", ve = j["aria-label"] ?? d, ye = (e) => Object.fromEntries(Object.entries(e).filter(([e]) => e === "id" || e === "title" || e.startsWith("data-") || e.startsWith("aria-"))), K = _e ? { "aria-hidden": !0 } : {
+		role: "img",
+		"aria-label": ve
+	}, q = typeof p == "string" ? l[p] : void 0, J = !N && p === void 0 && typeof k == "number" && typeof A == "number" && k > 0 && A > 0 ? {
+		width: k,
+		height: A
+	} : void 0, be = N || p !== void 0 || J !== void 0, Y = N ? void 0 : typeof p == "number" ? { aspectRatio: String(p) } : J ? {
+		aspectRatio: `${J.width} / ${J.height}`,
+		inlineSize: `${J.width}px`
+	} : void 0, X = null, Z = "custom";
+	_ === "skeleton" ? (Z = "skeleton", X = /* @__PURE__ */ s(n, {
+		width: "100%",
+		height: "100%",
+		radius: "none"
+	})) : _ === "blur" ? (Z = v ? "blur" : "empty", X = v ? /* @__PURE__ */ s("img", {
+		src: v,
+		alt: "",
+		className: r.blurImage,
+		decoding: "sync"
+	}) : null) : _ === "empty" || _ == null || typeof _ == "boolean" ? Z = "empty" : X = _;
+	let xe = B === "loading" || B === "loaded" && Z === "blur", Se = !z && B === "loading", Ce = e(r.frame, be ? r.sized : r.intrinsic, N && r.stretch, !N && q, ie[P], ae[C], S && r.bordered), Q = w != null && w !== !1, $ = /* @__PURE__ */ c("span", {
+		className: e(Ce, !Q && E),
+		style: Q ? Y : {
+			...Y,
+			...D
+		},
+		"data-status": B,
+		children: [xe && /* @__PURE__ */ s("span", {
+			className: e(r.placeholder, Z === "empty" && r.placeholderEmpty, B === "loaded" && r.placeholderDone),
+			...Se ? K : { "aria-hidden": !0 },
+			children: X
+		}), B === "error" ? /* @__PURE__ */ s("span", {
+			className: r.fallback,
+			...ye(j),
+			...K,
+			children: b ?? /* @__PURE__ */ s(ee, {
+				size: "xl",
+				className: r.fallbackIcon
+			})
+		}) : z && /* @__PURE__ */ i("img", {
+			...j,
+			key: z,
+			ref: me,
+			src: z,
+			srcSet: L.stage === 0 ? fe : void 0,
+			sizes: L.stage === 0 ? pe : void 0,
+			alt: d,
+			width: k,
+			height: A,
+			loading: g ? "eager" : se ?? "lazy",
+			decoding: ce ?? "async",
+			fetchPriority: g ? "high" : le,
+			className: e(r.img, u[oe], B === "loaded" && r.loaded),
+			style: m ? { objectPosition: m } : void 0,
+			onLoad: he,
+			onError: ge
+		})]
+	});
+	return Q ? /* @__PURE__ */ c("figure", {
+		className: e(r.figure, N || p !== void 0 ? r.figureFull : r.figureFit, E),
+		style: D,
+		children: [$, /* @__PURE__ */ s("figcaption", {
+			className: r.caption,
+			children: w
+		})]
+	}) : $;
+}
+//#endregion
+export { d as Image };

package/dist/components/data-display/Image/Image.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_frame_1a1eu_15`,t=`_sized_1a1eu_35`,n=`_stretch_1a1eu_45`,r=`_intrinsic_1a1eu_57`,i=`_ratioSquare_1a1eu_77`,a=`_ratioLandscape_1a1eu_79`,o=`_ratioVideo_1a1eu_81`,s=`_ratioWide_1a1eu_83`,c=`_ratioPortrait_1a1eu_85`,l=`_radiusNone_1a1eu_91`,u=`_radiusXs_1a1eu_93`,d=`_radiusSm_1a1eu_95`,f=`_radiusMd_1a1eu_97`,p=`_radiusLg_1a1eu_99`,m=`_radiusXl_1a1eu_101`,h=`_radius2xl_1a1eu_103`,g=`_radiusPill_1a1eu_105`,_=`_shadowNone_1a1eu_111`,v=`_shadowXs_1a1eu_113`,y=`_shadowSm_1a1eu_115`,b=`_shadowMd_1a1eu_117`,x=`_shadowLg_1a1eu_119`,S=`_shadowXl_1a1eu_121`,C=`_bordered_1a1eu_129`,w=`_img_1a1eu_157`,T=`_loaded_1a1eu_199`,E=`_fitCover_1a1eu_209`,D=`_fitContain_1a1eu_211`,O=`_fitFill_1a1eu_213`,k=`_fitNone_1a1eu_215`,A=`_fitScaleDown_1a1eu_217`,j=`_placeholder_1a1eu_229`,M=`_placeholderEmpty_1a1eu_249`,N=`_placeholderDone_1a1eu_259`,P=`_blurImage_1a1eu_269`,F=`_fallback_1a1eu_297`,I=`_fallbackIcon_1a1eu_341`,L=`_figure_1a1eu_357`,R=`_figureFull_1a1eu_373`,z=`_figureFit_1a1eu_381`,B=`_caption_1a1eu_393`,V={frame:e,sized:t,stretch:n,intrinsic:r,ratioSquare:i,ratioLandscape:a,ratioVideo:o,ratioWide:s,ratioPortrait:c,radiusNone:l,radiusXs:u,radiusSm:d,radiusMd:f,radiusLg:p,radiusXl:m,radius2xl:h,radiusPill:g,shadowNone:_,shadowXs:v,shadowSm:y,shadowMd:b,shadowLg:x,shadowXl:S,bordered:C,img:w,loaded:T,fitCover:E,fitContain:D,fitFill:O,fitNone:k,fitScaleDown:A,placeholder:j,placeholderEmpty:M,placeholderDone:N,blurImage:P,fallback:F,fallbackIcon:I,figure:L,figureFull:R,figureFit:z,caption:B};exports.blurImage=P,exports.bordered=C,exports.caption=B,exports.default=V,exports.fallback=F,exports.fallbackIcon=I,exports.figure=L,exports.figureFit=z,exports.figureFull=R,exports.fitContain=D,exports.fitCover=E,exports.fitFill=O,exports.fitNone=k,exports.fitScaleDown=A,exports.frame=e,exports.img=w,exports.intrinsic=r,exports.loaded=T,exports.placeholder=j,exports.placeholderDone=N,exports.placeholderEmpty=M,exports.radius2xl=h,exports.radiusLg=p,exports.radiusMd=f,exports.radiusNone=l,exports.radiusPill=g,exports.radiusSm=d,exports.radiusXl=m,exports.radiusXs=u,exports.ratioLandscape=a,exports.ratioPortrait=c,exports.ratioSquare=i,exports.ratioVideo=o,exports.ratioWide=s,exports.shadowLg=x,exports.shadowMd=b,exports.shadowNone=_,exports.shadowSm=y,exports.shadowXl=S,exports.shadowXs=v,exports.sized=t,exports.stretch=n;

package/dist/components/data-display/Image/Image.module.css.mjs

@@ -0,0 +1,46 @@
+//#region src/components/data-display/Image/Image.module.css
+var e = "_frame_1a1eu_15", t = "_sized_1a1eu_35", n = "_stretch_1a1eu_45", r = "_intrinsic_1a1eu_57", i = "_ratioSquare_1a1eu_77", a = "_ratioLandscape_1a1eu_79", o = "_ratioVideo_1a1eu_81", s = "_ratioWide_1a1eu_83", c = "_ratioPortrait_1a1eu_85", l = "_radiusNone_1a1eu_91", u = "_radiusXs_1a1eu_93", d = "_radiusSm_1a1eu_95", f = "_radiusMd_1a1eu_97", p = "_radiusLg_1a1eu_99", m = "_radiusXl_1a1eu_101", h = "_radius2xl_1a1eu_103", g = "_radiusPill_1a1eu_105", _ = "_shadowNone_1a1eu_111", v = "_shadowXs_1a1eu_113", y = "_shadowSm_1a1eu_115", b = "_shadowMd_1a1eu_117", x = "_shadowLg_1a1eu_119", S = "_shadowXl_1a1eu_121", C = "_bordered_1a1eu_129", w = "_img_1a1eu_157", T = "_loaded_1a1eu_199", E = "_fitCover_1a1eu_209", D = "_fitContain_1a1eu_211", O = "_fitFill_1a1eu_213", k = "_fitNone_1a1eu_215", A = "_fitScaleDown_1a1eu_217", j = "_placeholder_1a1eu_229", M = "_placeholderEmpty_1a1eu_249", N = "_placeholderDone_1a1eu_259", P = "_blurImage_1a1eu_269", F = "_fallback_1a1eu_297", I = "_fallbackIcon_1a1eu_341", L = "_figure_1a1eu_357", R = "_figureFull_1a1eu_373", z = "_figureFit_1a1eu_381", B = "_caption_1a1eu_393", V = {
+	frame: e,
+	sized: t,
+	stretch: n,
+	intrinsic: r,
+	ratioSquare: i,
+	ratioLandscape: a,
+	ratioVideo: o,
+	ratioWide: s,
+	ratioPortrait: c,
+	radiusNone: l,
+	radiusXs: u,
+	radiusSm: d,
+	radiusMd: f,
+	radiusLg: p,
+	radiusXl: m,
+	radius2xl: h,
+	radiusPill: g,
+	shadowNone: _,
+	shadowXs: v,
+	shadowSm: y,
+	shadowMd: b,
+	shadowLg: x,
+	shadowXl: S,
+	bordered: C,
+	img: w,
+	loaded: T,
+	fitCover: E,
+	fitContain: D,
+	fitFill: O,
+	fitNone: k,
+	fitScaleDown: A,
+	placeholder: j,
+	placeholderEmpty: M,
+	placeholderDone: N,
+	blurImage: P,
+	fallback: F,
+	fallbackIcon: I,
+	figure: L,
+	figureFull: R,
+	figureFit: z,
+	caption: B
+};
+//#endregion
+export { P as blurImage, C as bordered, B as caption, V as default, F as fallback, I as fallbackIcon, L as figure, z as figureFit, R as figureFull, D as fitContain, E as fitCover, O as fitFill, k as fitNone, A as fitScaleDown, e as frame, w as img, r as intrinsic, T as loaded, j as placeholder, N as placeholderDone, M as placeholderEmpty, h as radius2xl, p as radiusLg, f as radiusMd, l as radiusNone, g as radiusPill, d as radiusSm, m as radiusXl, u as radiusXs, a as ratioLandscape, c as ratioPortrait, i as ratioSquare, o as ratioVideo, s as ratioWide, x as shadowLg, b as shadowMd, _ as shadowNone, y as shadowSm, S as shadowXl, v as shadowXs, t as sized, n as stretch };

package/dist/components/data-display/Image/index.d.ts

@@ -0,0 +1 @@
+export * from './Image';

package/dist/components/data-display/List/List.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../utils/cx.cjs.js"),t=require("./List.module.css.cjs.js");let n=require("react"),r=require("react/jsx-runtime");var i={plain:t.default.plain,bulleted:t.default.bulleted,numbered:t.default.numbered,divided:t.default.divided,card:t.default.card},a={sm:t.default.sm,md:t.default.md,lg:t.default.lg},o=(0,n.createContext)({variant:`plain`,marker:void 0}),s=({variant:n=`plain`,as:s,ordered:c=!1,size:l=`md`,spacing:u,marker:d,start:f,className:p,style:m,children:h,ref:g,..._})=>{let v=s??(c||n===`numbered`?`ol`:`ul`),y=f===void 0?m:{counterReset:`dh-list-item ${f-1}`,...m};return(0,r.jsx)(o.Provider,{value:{variant:n,marker:d},children:(0,r.jsx)(v,{role:`list`,..._,ref:g,start:v===`ol`?f:void 0,"data-spacing":u,className:e.cx(t.default.root,i[n],a[l],p),style:y,children:h})})},c=({marker:i})=>{let{variant:a,marker:s}=(0,n.useContext)(o),c=i??s;return c===!1?null:c!=null&&c!==!0?(0,r.jsx)(`span`,{className:e.cx(t.default.marker,t.default.customMarker),"aria-hidden":`true`,children:c}):a===`bulleted`?(0,r.jsx)(`span`,{className:e.cx(t.default.marker,t.default.bulletMarker),"aria-hidden":`true`,children:(0,r.jsx)(`span`,{className:t.default.dot})}):a===`numbered`?(0,r.jsx)(`span`,{className:e.cx(t.default.marker,t.default.numberMarker),"aria-hidden":`true`,children:(0,r.jsx)(`span`,{className:t.default.number})}):null},l=e=>e!=null&&e!==!1&&e!==``,u=(...e)=>e.filter(Boolean).join(` `)||void 0,d=({slots:n,main:i,descriptionId:a,metaId:o,interactive:s,disabled:u,liProps:d,ariaCurrent:f})=>{let{start:p,description:m,meta:h,end:g,marker:_}=n,v=!!(n.selected||n.current),{className:y,...b}=d;return(0,r.jsxs)(`li`,{"aria-current":s?void 0:f,"aria-disabled":u||void 0,...b,className:e.cx(t.default.item,s&&t.default.interactive,v&&t.default.selected,u&&t.default.disabled,y),children:[(0,r.jsx)(c,{marker:_}),l(p)&&(0,r.jsx)(`span`,{className:t.default.start,children:p}),(0,r.jsxs)(`div`,{className:t.default.content,children:[i,l(m)&&(0,r.jsx)(`span`,{id:a,className:t.default.description,children:m}),n.title!==void 0&&l(n.children)&&(0,r.jsx)(`div`,{className:t.default.body,children:n.children})]}),l(h)&&(0,r.jsx)(`span`,{id:o,className:t.default.meta,children:h}),l(g)&&(0,r.jsx)(`div`,{className:t.default.end,children:g})]})};function f(e){let{start:t,title:n,description:r,meta:i,end:a,marker:o,selected:s,current:c,children:l,...u}=e;return{slots:{start:t,title:n,description:r,meta:i,end:a,marker:o,selected:s,current:c,children:l},rest:u}}var p=e=>{let{slots:n,rest:i}=f(e),a=!!(n.selected||n.current),o=n.title===void 0?l(n.children)&&(0,r.jsx)(`div`,{className:t.default.body,children:n.children}):(0,r.jsx)(`span`,{className:t.default.title,children:n.title});return(0,r.jsx)(d,{slots:n,main:o,interactive:!1,liProps:i,ariaCurrent:n.current??(a?`true`:void 0)})};p.displayName=`List.Item`;var m=i=>{let{slots:a,rest:o}=f(i),{disabled:s=!1,className:c,style:p,itemProps:m,type:h=`button`,"aria-describedby":g,"aria-current":_,...v}=o,y=(0,n.useId)(),b=`${y}-description`,x=`${y}-meta`,S=!!(a.selected||a.current),C=(0,r.jsx)(`button`,{...v,type:h,disabled:s,className:t.default.action,"aria-current":_??a.current??(S?`true`:void 0),"aria-describedby":u(g,l(a.description)&&b,l(a.meta)&&x),children:(0,r.jsx)(`span`,{className:t.default.title,children:a.title??a.children})});return(0,r.jsx)(d,{slots:a,main:C,descriptionId:b,metaId:x,interactive:!0,disabled:s,liProps:{...m,className:e.cx(m?.className,c),style:{...m?.style,...p}}})};m.displayName=`List.ItemButton`;var h=i=>{let{slots:a,rest:o}=f(i),{disabled:s=!1,className:c,style:p,itemProps:m,href:h,onClick:g,"aria-describedby":_,"aria-current":v,...y}=o,b=(0,n.useId)(),x=`${b}-description`,S=`${b}-meta`,C=!!(a.selected||a.current),w=(0,r.jsx)(`a`,{...y,href:s?void 0:h,role:s?`link`:void 0,"aria-disabled":s||void 0,onClick:s?e=>e.preventDefault():g,className:t.default.action,"aria-current":v??a.current??(C?`page`:void 0),"aria-describedby":u(_,l(a.description)&&x,l(a.meta)&&S),children:(0,r.jsx)(`span`,{className:t.default.title,children:a.title??a.children})});return(0,r.jsx)(d,{slots:a,main:w,descriptionId:x,metaId:S,interactive:!0,disabled:s,liProps:{...m,className:e.cx(m?.className,c),style:{...m?.style,...p}}})};h.displayName=`List.ItemLink`;var g=({as:n=`h3`,size:i=`md`,className:o,children:s,...c})=>(0,r.jsx)(n,{...c,className:e.cx(t.default.subheader,a[i],o),children:s});g.displayName=`List.Subheader`,s.Item=p,s.ItemButton=m,s.ItemLink=h,s.Subheader=g,exports.List=s,exports.ListItem=p,exports.ListItemButton=m,exports.ListItemLink=h,exports.ListSubheader=g;