@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,150 @@
+import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import { UserIcon as n } from "../../primitives/Icon/icons.mjs";
+import r from "./Avatar.module.css.mjs";
+import { Children as i, createContext as a, isValidElement as o, useContext as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/data-display/Avatar/Avatar.tsx
+function d(e) {
+	let t = Intl.Segmenter;
+	return t ? Array.from(new t(void 0, { granularity: "grapheme" }).segment(e), (e) => e.segment) : Array.from(e);
+}
+var f = /[\p{L}\p{N}]/u;
+function p(e) {
+	let t = d(e).find((e) => f.test(e));
+	return t ? t.toLocaleUpperCase() : "";
+}
+function m(e) {
+	if (!e) return "";
+	let t = e.trim().split(/\s+/u).filter((e) => f.test(e));
+	if (t.length === 0) return "";
+	let n = p(t[0]);
+	return t.length === 1 ? n : n + p(t[t.length - 1]);
+}
+var h = Object.freeze([
+	"primary",
+	"accent",
+	"success",
+	"info",
+	"neutral"
+]);
+function g(e) {
+	let t = 5381;
+	for (let n of e.trim().toLocaleLowerCase()) t = (t << 5) + t + (n.codePointAt(0) ?? 0) | 0;
+	return h[Math.abs(t) % h.length];
+}
+var _ = {
+	xs: r.xs,
+	sm: r.sm,
+	md: r.md,
+	lg: r.lg,
+	xl: r.xl,
+	"2xl": r.size2xl
+}, v = {
+	circle: r.circle,
+	rounded: r.rounded,
+	square: r.square
+}, y = {
+	soft: r.soft,
+	solid: r.solid
+}, b = {
+	neutral: r.toneNeutral,
+	primary: r.tonePrimary,
+	accent: r.toneAccent,
+	success: r.toneSuccess,
+	warning: r.toneWarning,
+	danger: r.toneDanger,
+	info: r.toneInfo
+}, x = {
+	neutral: r.ringNeutral,
+	primary: r.ringPrimary,
+	accent: r.ringAccent,
+	success: r.ringSuccess,
+	warning: r.ringWarning,
+	danger: r.ringDanger,
+	info: r.ringInfo
+}, S = {
+	online: r.statusOnline,
+	away: r.statusAway,
+	busy: r.statusBusy,
+	offline: r.statusOffline
+}, C = {
+	sm: r.spacingSm,
+	md: r.spacingMd,
+	lg: r.spacingLg
+}, w = a(null);
+function T({ src: i, alt: a, name: o, size: d, shape: f, tone: p = "neutral", variant: h = "soft", colorFromName: C = !1, status: T, statusLabel: E, ring: D = !1, ringTone: O = "accent", decorative: k = !1, icon: A, imgProps: ee, onImageStatusChange: te, className: j, "aria-label": M, "aria-labelledby": N, ...P }) {
+	let F = e(), I = s(w), ne = I?.size ?? d ?? "md", re = f ?? I?.shape ?? "circle", [L, R] = c(null), z = i ? L?.src === i ? L.status : "loading" : void 0, B = (e) => {
+		!i || L?.src === i && L.status === e || (R({
+			src: i,
+			status: e
+		}), te?.(e));
+	}, { onLoad: V, onError: H, className: U, ref: W, ...G } = ee ?? {}, K = (e) => {
+		e && e.complete && L?.src !== i && B(e.naturalWidth > 0 ? "loaded" : "error"), typeof W == "function" ? W(e) : W && (W.current = e);
+	}, q = (e) => {
+		B("loaded"), V?.(e);
+	}, J = (e) => {
+		B("error"), H?.(e);
+	}, Y = m(o), ie = C && o?.trim() ? g(o) : p, ae = !!i && z !== "error", X = k || a === "" && !o, Z = a || o?.trim() || F.avatar.fallbackName, Q = T ? E ?? F.avatar.status[T] : void 0, oe = Q ? `${Z} (${Q})` : Z, se = X && !Q ? { "aria-hidden": !0 } : X ? {
+		role: "img",
+		"aria-label": Q
+	} : {
+		role: "img",
+		"aria-label": N ? M : M === void 0 ? oe : ((e) => Q ? `${e} (${Q})` : e)(M),
+		"aria-labelledby": N
+	}, $;
+	return $ = ae ? /* @__PURE__ */ l("img", {
+		...G,
+		ref: K,
+		src: i,
+		alt: "",
+		className: t(r.image, z === "loaded" && r.imageLoaded, U),
+		onLoad: q,
+		onError: J
+	}) : Y ? /* @__PURE__ */ l("span", {
+		className: r.initials,
+		children: Y
+	}) : A ?? /* @__PURE__ */ l(n, { className: r.icon }), /* @__PURE__ */ u("span", {
+		...P,
+		...se,
+		"data-status": T,
+		"data-image-status": z,
+		className: t(r.root, _[ne], v[re], y[h], b[ie], I && r.inGroup, D && r.ring, D && x[O], j),
+		children: [/* @__PURE__ */ l("span", {
+			className: r.face,
+			children: $
+		}), T && /* @__PURE__ */ l("span", {
+			className: t(r.status, S[T]),
+			"aria-hidden": "true"
+		})]
+	});
+}
+function E({ size: n = "md", shape: a, max: s, spacing: c = "md", surplusLabel: d, renderSurplus: f, className: p, children: m, ...h }) {
+	let g = e(), y = d ?? g.avatar.surplus, b = i.toArray(m).filter(o), x = s !== void 0 && s >= 0 && s < b.length ? Math.floor(s) : b.length, S = b.slice(0, x), T = b.slice(x), E = T.length;
+	return /* @__PURE__ */ l(w.Provider, {
+		value: {
+			size: n,
+			shape: a
+		},
+		children: /* @__PURE__ */ u("div", {
+			role: "group",
+			...h,
+			className: t(r.group, _[n], C[c], p),
+			children: [S, E > 0 && (f ? f(E, T) : /* @__PURE__ */ l("span", {
+				role: "img",
+				"aria-label": y(E),
+				className: t(r.root, _[n], v[a ?? "circle"], r.soft, r.toneNeutral, r.inGroup),
+				children: /* @__PURE__ */ l("span", {
+					className: r.face,
+					children: /* @__PURE__ */ u("span", {
+						className: t(r.initials, r.surplus),
+						"aria-hidden": "true",
+						children: ["+", E]
+					})
+				})
+			}))]
+		})
+	});
+}
+//#endregion
+export { T as Avatar, E as AvatarGroup, h as avatarNameTones, g as avatarToneFromName, m as getInitials };

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

@@ -0,0 +1 @@
+var e=`_root_qebz0_25`,t=`_face_qebz0_61`,n=`_xs_qebz0_89`,r=`_sm_qebz0_97`,i=`_md_qebz0_105`,a=`_lg_qebz0_113`,o=`_xl_qebz0_121`,s=`_size2xl_qebz0_129`,c=`_circle_qebz0_141`,l=`_rounded_qebz0_147`,u=`_square_qebz0_153`,d=`_soft_qebz0_165`,f=`_toneNeutral_qebz0_165`,p=`_tonePrimary_qebz0_167`,m=`_toneAccent_qebz0_169`,h=`_toneSuccess_qebz0_171`,g=`_toneWarning_qebz0_173`,_=`_toneDanger_qebz0_175`,v=`_toneInfo_qebz0_177`,y=`_solid_qebz0_181`,b=`_image_qebz0_213`,x=`_imageLoaded_qebz0_233`,S=`_initials_qebz0_241`,C=`_surplus_qebz0_259`,w=`_icon_qebz0_269`,T=`_inGroup_qebz0_283`,E=`_ring_qebz0_291`,D=`_ringNeutral_qebz0_305`,O=`_ringPrimary_qebz0_307`,k=`_ringAccent_qebz0_309`,A=`_ringSuccess_qebz0_311`,j=`_ringWarning_qebz0_313`,M=`_ringDanger_qebz0_315`,N=`_ringInfo_qebz0_317`,P=`_status_qebz0_335`,F=`_statusOnline_qebz0_377`,I=`_statusAway_qebz0_385`,L=`_statusBusy_qebz0_417`,R=`_statusOffline_qebz0_447`,z=`_group_qebz0_467`,B=`_spacingSm_qebz0_495`,V=`_spacingMd_qebz0_501`,H=`_spacingLg_qebz0_507`,U={root:e,face:t,xs:n,sm:r,md:i,lg:a,xl:o,size2xl:s,circle:c,rounded:l,square:u,soft:d,toneNeutral:f,tonePrimary:p,toneAccent:m,toneSuccess:h,toneWarning:g,toneDanger:_,toneInfo:v,solid:y,image:b,imageLoaded:x,initials:S,surplus:C,icon:w,inGroup:T,ring:E,ringNeutral:D,ringPrimary:O,ringAccent:k,ringSuccess:A,ringWarning:j,ringDanger:M,ringInfo:N,status:P,statusOnline:F,statusAway:I,statusBusy:L,statusOffline:R,group:z,spacingSm:B,spacingMd:V,spacingLg:H};exports.circle=c,exports.default=U,exports.face=t,exports.group=z,exports.icon=w,exports.image=b,exports.imageLoaded=x,exports.inGroup=T,exports.initials=S,exports.lg=a,exports.md=i,exports.ring=E,exports.ringAccent=k,exports.ringDanger=M,exports.ringInfo=N,exports.ringNeutral=D,exports.ringPrimary=O,exports.ringSuccess=A,exports.ringWarning=j,exports.root=e,exports.rounded=l,exports.size2xl=s,exports.sm=r,exports.soft=d,exports.solid=y,exports.spacingLg=H,exports.spacingMd=V,exports.spacingSm=B,exports.square=u,exports.status=P,exports.statusAway=I,exports.statusBusy=L,exports.statusOffline=R,exports.statusOnline=F,exports.surplus=C,exports.toneAccent=m,exports.toneDanger=_,exports.toneInfo=v,exports.toneNeutral=f,exports.tonePrimary=p,exports.toneSuccess=h,exports.toneWarning=g,exports.xl=o,exports.xs=n;

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

@@ -0,0 +1,48 @@
+//#region src/components/data-display/Avatar/Avatar.module.css
+var e = "_root_qebz0_25", t = "_face_qebz0_61", n = "_xs_qebz0_89", r = "_sm_qebz0_97", i = "_md_qebz0_105", a = "_lg_qebz0_113", o = "_xl_qebz0_121", s = "_size2xl_qebz0_129", c = "_circle_qebz0_141", l = "_rounded_qebz0_147", u = "_square_qebz0_153", d = "_soft_qebz0_165", f = "_toneNeutral_qebz0_165", p = "_tonePrimary_qebz0_167", m = "_toneAccent_qebz0_169", h = "_toneSuccess_qebz0_171", g = "_toneWarning_qebz0_173", _ = "_toneDanger_qebz0_175", v = "_toneInfo_qebz0_177", y = "_solid_qebz0_181", b = "_image_qebz0_213", x = "_imageLoaded_qebz0_233", S = "_initials_qebz0_241", C = "_surplus_qebz0_259", w = "_icon_qebz0_269", T = "_inGroup_qebz0_283", E = "_ring_qebz0_291", D = "_ringNeutral_qebz0_305", O = "_ringPrimary_qebz0_307", k = "_ringAccent_qebz0_309", A = "_ringSuccess_qebz0_311", j = "_ringWarning_qebz0_313", M = "_ringDanger_qebz0_315", N = "_ringInfo_qebz0_317", P = "_status_qebz0_335", F = "_statusOnline_qebz0_377", I = "_statusAway_qebz0_385", L = "_statusBusy_qebz0_417", R = "_statusOffline_qebz0_447", z = "_group_qebz0_467", B = "_spacingSm_qebz0_495", V = "_spacingMd_qebz0_501", H = "_spacingLg_qebz0_507", U = {
+	root: e,
+	face: t,
+	xs: n,
+	sm: r,
+	md: i,
+	lg: a,
+	xl: o,
+	size2xl: s,
+	circle: c,
+	rounded: l,
+	square: u,
+	soft: d,
+	toneNeutral: f,
+	tonePrimary: p,
+	toneAccent: m,
+	toneSuccess: h,
+	toneWarning: g,
+	toneDanger: _,
+	toneInfo: v,
+	solid: y,
+	image: b,
+	imageLoaded: x,
+	initials: S,
+	surplus: C,
+	icon: w,
+	inGroup: T,
+	ring: E,
+	ringNeutral: D,
+	ringPrimary: O,
+	ringAccent: k,
+	ringSuccess: A,
+	ringWarning: j,
+	ringDanger: M,
+	ringInfo: N,
+	status: P,
+	statusOnline: F,
+	statusAway: I,
+	statusBusy: L,
+	statusOffline: R,
+	group: z,
+	spacingSm: B,
+	spacingMd: V,
+	spacingLg: H
+};
+//#endregion
+export { c as circle, U as default, t as face, z as group, w as icon, b as image, x as imageLoaded, T as inGroup, S as initials, a as lg, i as md, E as ring, k as ringAccent, M as ringDanger, N as ringInfo, D as ringNeutral, O as ringPrimary, A as ringSuccess, j as ringWarning, e as root, l as rounded, s as size2xl, r as sm, d as soft, y as solid, H as spacingLg, V as spacingMd, B as spacingSm, u as square, P as status, I as statusAway, L as statusBusy, R as statusOffline, F as statusOnline, C as surplus, m as toneAccent, _ as toneDanger, v as toneInfo, f as toneNeutral, p as tonePrimary, h as toneSuccess, g as toneWarning, o as xl, n as xs };

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

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

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

@@ -0,0 +1 @@
+const e=require("../../../utils/cx.cjs.js"),t=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),n=require("./Badge.module.css.cjs.js");let r=require("react"),i=require("react/jsx-runtime");var a=globalThis.process?.env?.NODE_ENV!==`production`,o={solid:n.default.solid,soft:n.default.soft,outline:n.default.outline},s={neutral:n.default.neutral,primary:n.default.primary,accent:n.default.accent,success:n.default.success,warning:n.default.warning,danger:n.default.danger,info:n.default.info},c={sm:n.default.sm,md:n.default.md,lg:n.default.lg},l={none:n.default.radiusNone,xs:n.default.radiusXs,sm:n.default.radiusSm,md:n.default.radiusMd,lg:n.default.radiusLg,xl:n.default.radiusXl,"2xl":n.default.radius2xl,pill:n.default.radiusPill},u={"top-end":n.default.topEnd,"top-start":n.default.topStart,"bottom-end":n.default.bottomEnd,"bottom-start":n.default.bottomStart},d={rectangle:n.default.overlapRectangle,circle:n.default.overlapCircle};function f(e,t=99){return e>t?`${t}+`:String(e)}var p=e=>typeof e==`number`?`${e}px`:e,m=({variant:r=`soft`,tone:a=`neutral`,size:u=`md`,radius:d=`pill`,count:p,max:m=99,showZero:h=!1,label:g,startIcon:_,dot:v=!1,caps:y=!1,className:b,children:x,...S})=>{let C=p!==void 0;if(C&&p===0&&!h)return null;let w=C?f(p,m):x,T=g!==void 0&&g!==``;return(0,i.jsxs)(`span`,{...S,className:e.cx(n.default.root,o[r],s[a],c[u],l[d],C&&n.default.count,y&&n.default.caps,b),children:[(0,i.jsxs)(`span`,{className:n.default.content,"aria-hidden":T?!0:void 0,children:[v&&(0,i.jsx)(`span`,{className:n.default.dot,"aria-hidden":`true`}),_!=null&&(0,i.jsx)(`span`,{className:n.default.icon,"aria-hidden":`true`,children:_}),w!=null&&w!==``&&(0,i.jsx)(`span`,{className:n.default.label,children:w})]}),T&&(0,i.jsx)(t.VisuallyHidden,{children:g})]})},h=({children:l,variant:m=`solid`,tone:h=`accent`,size:g=`md`,count:_,max:v=99,showZero:y=!1,label:b,dot:x=!1,content:S,placement:C=`top-end`,overlap:w=`rectangle`,offset:T,invisible:E=!1,badgeClassName:D,className:O,style:k,...A})=>{let j=!x&&_!==void 0,M=E||j&&_===0&&!y,N=x?null:j?f(_,v):S,P=b!==void 0&&b!==``&&!M,F=!M&&(x||N!=null)&&(b===void 0||b===``);(0,r.useEffect)(()=>{a&&F&&console.warn('[BadgeAnchor] Pass a `label` (e.g. "3 unread messages") so screen readers get the badge\'s meaning; the visual dot or count is hidden from them.')},[F]);let[I,L]=T===void 0?[void 0,void 0]:Array.isArray(T)?T:[T,T],R=T===void 0?k:{"--badge-offset-x":p(I),"--badge-offset-y":p(L),...k};return(0,i.jsxs)(`span`,{...A,className:e.cx(n.default.anchor,O),style:R,children:[l,(0,i.jsxs)(`span`,{className:e.cx(n.default.root,n.default.anchored,o[m],s[h],c[g],n.default.radiusPill,u[C],d[w],x?n.default.anchoredDot:n.default.count,M&&n.default.invisible,D),"data-state":M?`hidden`:`visible`,children:[!x&&(0,i.jsx)(`span`,{className:n.default.content,"aria-hidden":`true`,children:N!=null&&N!==``&&(0,i.jsx)(`span`,{className:n.default.label,children:N})}),P&&(0,i.jsx)(t.VisuallyHidden,{children:b})]})]})};exports.Badge=m,exports.BadgeAnchor=h,exports.formatBadgeCount=f;

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

@@ -0,0 +1,95 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Radius, Size, Tone } from '../../../types/common';
+/** Visual style of a badge. Semantic color is set separately with `tone`. */
+export type BadgeVariant = "solid" | "soft" | "outline";
+/** Corner of the anchor a `BadgeAnchor` badge sits on. Logical: `end` flips in RTL. */
+export type BadgePlacement = "top-end" | "top-start" | "bottom-end" | "bottom-start";
+/**
+ * Shape of the anchored child, so the badge lands on its visible corner.
+ * - `rectangle`: sits on the bounding-box corner (buttons, cards, square avatars).
+ * - `circle`: pulled inward onto the circle's edge (round avatars, round icon buttons).
+ */
+export type BadgeOverlap = "rectangle" | "circle";
+/** A length for `offset`: a number of pixels or any CSS length (e.g. `"var(--space-1)"`). */
+export type BadgeOffsetValue = number | string;
+/** Formats a count, capping it at `max` (e.g. `120` with max 99 becomes `"99+"`). */
+export declare function formatBadgeCount(count: number, max?: number): string;
+/** Props shared by `Badge` and `BadgeAnchor`. */
+export interface BadgeStyleProps {
+    /** Visual style. @default "solid" on `BadgeAnchor`, "soft" on `Badge` */
+    variant?: BadgeVariant;
+    /** Semantic color. @default "neutral" on `Badge`, "accent" on `BadgeAnchor` */
+    tone?: Tone;
+    /** Height, padding, and type size. @default "md" */
+    size?: Size;
+    /** A number to show instead of `children`. Rendered with tabular figures and capped at `max`. */
+    count?: number;
+    /** Largest count shown before it collapses to `"{max}+"`. @default 99 */
+    max?: number;
+    /** Show the badge when `count` is `0`. When false, a zero count renders nothing (or hides the anchored badge). @default false */
+    showZero?: boolean;
+    /**
+     * Accessible text that replaces the visible content for screen readers,
+     * e.g. `"3 unread messages"` for a badge that shows `3`. Rendered with
+     * `VisuallyHidden`; the visible content is then `aria-hidden`.
+     */
+    label?: string;
+}
+export interface BadgeOwnProps extends BadgeStyleProps {
+    /** Corner rounding. @default "pill" */
+    radius?: Radius;
+    /** Decorative icon before the text. Hidden from assistive technology, so the text must carry the meaning. */
+    startIcon?: ReactNode;
+    /** Shows a small leading status dot in the current text color. Decorative: pair it with text. @default false */
+    dot?: boolean;
+    /** Uppercase display type with wide tracking and heavy weight: the athletic "jersey" look. @default false */
+    caps?: boolean;
+    /** The badge text. Ignored when `count` is set. */
+    children?: ReactNode;
+}
+export type BadgeProps = BadgeOwnProps & Omit<ComponentPropsWithRef<"span">, keyof BadgeOwnProps>;
+/**
+ * A small, non-interactive status or label pill. Use it for statuses
+ * ("Final", "Live"), categories, and counts. Always give it text or an
+ * icon plus text, so its meaning never depends on color alone.
+ *
+ * Renders a `<span>` with no role. For counts, pass `label` (e.g.
+ * `"3 unread messages"`) so screen readers hear more than a bare number.
+ */
+export declare const Badge: ({ variant, tone, size, radius, count, max, showZero, label, startIcon, dot, caps, className, children, ...rest }: BadgeProps) => import("react").JSX.Element | null;
+export interface BadgeAnchorOwnProps extends BadgeStyleProps {
+    /** The element the badge is attached to, such as an `IconButton` or an avatar. */
+    children: ReactNode;
+    /** Show a small dot instead of a count or `content`. Pass `label` so its meaning is available to screen readers. @default false */
+    dot?: boolean;
+    /** Custom badge content (a short text or icon) when not using `count` or `dot`. */
+    content?: ReactNode;
+    /** Corner of the anchor to sit on. Logical, so `end` flips in right-to-left layouts. @default "top-end" */
+    placement?: BadgePlacement;
+    /** Shape of the anchor, so the badge sits on its visible edge. @default "rectangle" */
+    overlap?: BadgeOverlap;
+    /**
+     * Nudges the badge from its corner. A single value moves it that far
+     * outward on both axes (negative moves inward); a tuple sets
+     * `[inline, block]` separately. Numbers are pixels.
+     */
+    offset?: BadgeOffsetValue | [inline: BadgeOffsetValue, block: BadgeOffsetValue];
+    /** Hide the badge with a springy scale-out. The badge stays mounted so it can animate back in. @default false */
+    invisible?: boolean;
+    /** Extra class for the badge itself (the root class goes on the wrapper). */
+    badgeClassName?: string;
+}
+export type BadgeAnchorProps = BadgeAnchorOwnProps & Omit<ComponentPropsWithRef<"span">, keyof BadgeAnchorOwnProps>;
+/**
+ * Pins a count, dot, or short label to a corner of its child. The badge is
+ * ringed in `--color-bg` (override with the `--badge-ring-color` custom
+ * property on a colored surface) so it reads as separate from the anchor.
+ *
+ * Accessibility: the badge is decorative by default (`aria-hidden`) because
+ * an interactive anchor should carry the information in its own name, e.g.
+ * `<IconButton aria-label="Notifications, 3 unread">`. For a non-interactive
+ * anchor (like an avatar), pass `label` to add screen-reader text instead.
+ * To announce count changes, use one app-level live region, not a live
+ * region on every badge.
+ */
+export declare const BadgeAnchor: ({ children, variant, tone, size, count, max, showZero, label, dot, content, placement, overlap, offset, invisible, badgeClassName, className, style, ...rest }: BadgeAnchorProps) => import("react").JSX.Element;

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

@@ -0,0 +1,100 @@
+import { cx as e } from "../../../utils/cx.mjs";
+import { VisuallyHidden as t } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import n from "./Badge.module.css.mjs";
+import { useEffect as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/data-display/Badge/Badge.tsx
+var o = globalThis.process?.env?.NODE_ENV !== "production", s = {
+	solid: n.solid,
+	soft: n.soft,
+	outline: n.outline
+}, c = {
+	neutral: n.neutral,
+	primary: n.primary,
+	accent: n.accent,
+	success: n.success,
+	warning: n.warning,
+	danger: n.danger,
+	info: n.info
+}, l = {
+	sm: n.sm,
+	md: n.md,
+	lg: n.lg
+}, u = {
+	none: n.radiusNone,
+	xs: n.radiusXs,
+	sm: n.radiusSm,
+	md: n.radiusMd,
+	lg: n.radiusLg,
+	xl: n.radiusXl,
+	"2xl": n.radius2xl,
+	pill: n.radiusPill
+}, d = {
+	"top-end": n.topEnd,
+	"top-start": n.topStart,
+	"bottom-end": n.bottomEnd,
+	"bottom-start": n.bottomStart
+}, f = {
+	rectangle: n.overlapRectangle,
+	circle: n.overlapCircle
+};
+function p(e, t = 99) {
+	return e > t ? `${t}+` : String(e);
+}
+var m = (e) => typeof e == "number" ? `${e}px` : e, h = ({ variant: r = "soft", tone: o = "neutral", size: d = "md", radius: f = "pill", count: m, max: h = 99, showZero: g = !1, label: _, startIcon: v, dot: y = !1, caps: b = !1, className: x, children: S, ...C }) => {
+	let w = m !== void 0;
+	if (w && m === 0 && !g) return null;
+	let T = w ? p(m, h) : S, E = _ !== void 0 && _ !== "";
+	return /* @__PURE__ */ a("span", {
+		...C,
+		className: e(n.root, s[r], c[o], l[d], u[f], w && n.count, b && n.caps, x),
+		children: [/* @__PURE__ */ a("span", {
+			className: n.content,
+			"aria-hidden": E ? !0 : void 0,
+			children: [
+				y && /* @__PURE__ */ i("span", {
+					className: n.dot,
+					"aria-hidden": "true"
+				}),
+				v != null && /* @__PURE__ */ i("span", {
+					className: n.icon,
+					"aria-hidden": "true",
+					children: v
+				}),
+				T != null && T !== "" && /* @__PURE__ */ i("span", {
+					className: n.label,
+					children: T
+				})
+			]
+		}), E && /* @__PURE__ */ i(t, { children: _ })]
+	});
+}, g = ({ children: u, variant: h = "solid", tone: g = "accent", size: _ = "md", count: v, max: y = 99, showZero: b = !1, label: x, dot: S = !1, content: C, placement: w = "top-end", overlap: T = "rectangle", offset: E, invisible: D = !1, badgeClassName: O, className: k, style: A, ...j }) => {
+	let M = !S && v !== void 0, N = D || M && v === 0 && !b, P = S ? null : M ? p(v, y) : C, F = x !== void 0 && x !== "" && !N, I = !N && (S || P != null) && (x === void 0 || x === "");
+	r(() => {
+		o && I && console.warn("[BadgeAnchor] Pass a `label` (e.g. \"3 unread messages\") so screen readers get the badge's meaning; the visual dot or count is hidden from them.");
+	}, [I]);
+	let [L, R] = E === void 0 ? [void 0, void 0] : Array.isArray(E) ? E : [E, E], z = E === void 0 ? A : {
+		"--badge-offset-x": m(L),
+		"--badge-offset-y": m(R),
+		...A
+	};
+	return /* @__PURE__ */ a("span", {
+		...j,
+		className: e(n.anchor, k),
+		style: z,
+		children: [u, /* @__PURE__ */ a("span", {
+			className: e(n.root, n.anchored, s[h], c[g], l[_], n.radiusPill, d[w], f[T], S ? n.anchoredDot : n.count, N && n.invisible, O),
+			"data-state": N ? "hidden" : "visible",
+			children: [!S && /* @__PURE__ */ i("span", {
+				className: n.content,
+				"aria-hidden": "true",
+				children: P != null && P !== "" && /* @__PURE__ */ i("span", {
+					className: n.label,
+					children: P
+				})
+			}), F && /* @__PURE__ */ i(t, { children: x })]
+		})]
+	});
+};
+//#endregion
+export { h as Badge, g as BadgeAnchor, p as formatBadgeCount };

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

@@ -0,0 +1 @@
+var e=`_root_fn6ui_21`,t=`_content_fn6ui_93`,n=`_label_fn6ui_105`,r=`_icon_fn6ui_113`,i=`_dot_fn6ui_139`,a=`_solid_fn6ui_161`,o=`_soft_fn6ui_171`,s=`_outline_fn6ui_181`,c=`_neutral_fn6ui_197`,l=`_primary_fn6ui_213`,u=`_accent_fn6ui_229`,d=`_success_fn6ui_245`,f=`_warning_fn6ui_261`,p=`_danger_fn6ui_277`,m=`_info_fn6ui_293`,h=`_sm_fn6ui_313`,g=`_md_fn6ui_331`,_=`_lg_fn6ui_349`,v=`_radiusNone_fn6ui_371`,y=`_radiusXs_fn6ui_377`,b=`_radiusSm_fn6ui_383`,x=`_radiusMd_fn6ui_389`,S=`_radiusLg_fn6ui_395`,C=`_radiusXl_fn6ui_401`,w=`_radius2xl_fn6ui_407`,T=`_radiusPill_fn6ui_413`,E=`_count_fn6ui_427`,D=`_caps_fn6ui_441`,O=`_anchor_fn6ui_461`,k=`_anchored_fn6ui_475`,A=`_anchoredDot_fn6ui_557`,j=`_overlapRectangle_fn6ui_623`,M=`_overlapCircle_fn6ui_629`,N=`_topEnd_fn6ui_637`,P=`_topStart_fn6ui_649`,F=`_bottomEnd_fn6ui_661`,I=`_bottomStart_fn6ui_673`,L=`_invisible_fn6ui_709`,R={root:e,content:t,label:n,icon:r,dot:i,solid:a,soft:o,outline:s,neutral:c,primary:l,accent:u,success:d,warning:f,danger:p,info:m,sm:h,md:g,lg:_,radiusNone:v,radiusXs:y,radiusSm:b,radiusMd:x,radiusLg:S,radiusXl:C,radius2xl:w,radiusPill:T,count:E,caps:D,anchor:O,anchored:k,anchoredDot:A,overlapRectangle:j,overlapCircle:M,topEnd:N,topStart:P,bottomEnd:F,bottomStart:I,invisible:L};exports.accent=u,exports.anchor=O,exports.anchored=k,exports.anchoredDot=A,exports.bottomEnd=F,exports.bottomStart=I,exports.caps=D,exports.content=t,exports.count=E,exports.danger=p,exports.default=R,exports.dot=i,exports.icon=r,exports.info=m,exports.invisible=L,exports.label=n,exports.lg=_,exports.md=g,exports.neutral=c,exports.outline=s,exports.overlapCircle=M,exports.overlapRectangle=j,exports.primary=l,exports.radius2xl=w,exports.radiusLg=S,exports.radiusMd=x,exports.radiusNone=v,exports.radiusPill=T,exports.radiusSm=b,exports.radiusXl=C,exports.radiusXs=y,exports.root=e,exports.sm=h,exports.soft=o,exports.solid=a,exports.success=d,exports.topEnd=N,exports.topStart=P,exports.warning=f;

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

@@ -0,0 +1,43 @@
+//#region src/components/data-display/Badge/Badge.module.css
+var e = "_root_fn6ui_21", t = "_content_fn6ui_93", n = "_label_fn6ui_105", r = "_icon_fn6ui_113", i = "_dot_fn6ui_139", a = "_solid_fn6ui_161", o = "_soft_fn6ui_171", s = "_outline_fn6ui_181", c = "_neutral_fn6ui_197", l = "_primary_fn6ui_213", u = "_accent_fn6ui_229", d = "_success_fn6ui_245", f = "_warning_fn6ui_261", p = "_danger_fn6ui_277", m = "_info_fn6ui_293", h = "_sm_fn6ui_313", g = "_md_fn6ui_331", _ = "_lg_fn6ui_349", v = "_radiusNone_fn6ui_371", y = "_radiusXs_fn6ui_377", b = "_radiusSm_fn6ui_383", x = "_radiusMd_fn6ui_389", S = "_radiusLg_fn6ui_395", C = "_radiusXl_fn6ui_401", w = "_radius2xl_fn6ui_407", T = "_radiusPill_fn6ui_413", E = "_count_fn6ui_427", D = "_caps_fn6ui_441", O = "_anchor_fn6ui_461", k = "_anchored_fn6ui_475", A = "_anchoredDot_fn6ui_557", j = "_overlapRectangle_fn6ui_623", M = "_overlapCircle_fn6ui_629", N = "_topEnd_fn6ui_637", P = "_topStart_fn6ui_649", F = "_bottomEnd_fn6ui_661", I = "_bottomStart_fn6ui_673", L = "_invisible_fn6ui_709", R = {
+	root: e,
+	content: t,
+	label: n,
+	icon: r,
+	dot: i,
+	solid: a,
+	soft: o,
+	outline: s,
+	neutral: c,
+	primary: l,
+	accent: u,
+	success: d,
+	warning: f,
+	danger: p,
+	info: m,
+	sm: h,
+	md: g,
+	lg: _,
+	radiusNone: v,
+	radiusXs: y,
+	radiusSm: b,
+	radiusMd: x,
+	radiusLg: S,
+	radiusXl: C,
+	radius2xl: w,
+	radiusPill: T,
+	count: E,
+	caps: D,
+	anchor: O,
+	anchored: k,
+	anchoredDot: A,
+	overlapRectangle: j,
+	overlapCircle: M,
+	topEnd: N,
+	topStart: P,
+	bottomEnd: F,
+	bottomStart: I,
+	invisible: L
+};
+//#endregion
+export { u as accent, O as anchor, k as anchored, A as anchoredDot, F as bottomEnd, I as bottomStart, D as caps, t as content, E as count, p as danger, R as default, i as dot, r as icon, m as info, L as invisible, n as label, _ as lg, g as md, c as neutral, s as outline, M as overlapCircle, j as overlapRectangle, l as primary, w as radius2xl, S as radiusLg, x as radiusMd, v as radiusNone, T as radiusPill, b as radiusSm, C as radiusXl, y as radiusXs, e as root, h as sm, o as soft, a as solid, d as success, N as topEnd, P as topStart, f as warning };

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

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

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

@@ -0,0 +1 @@
+const e=require("../../../utils/cx.cjs.js"),t=require("../../../utils/fillSlot.cjs.js"),n=require("../../primitives/Icon/Icon.cjs.js"),r=require("../../primitives/Typography/Typography.cjs.js"),i=require("./Card.module.css.cjs.js");let a=require("react"),o=require("react/jsx-runtime");var s={elevated:i.default.elevated,outline:i.default.outline,filled:i.default.filled,soft:i.default.soft},c={neutral:i.default.toneNeutral,primary:i.default.tonePrimary,accent:i.default.toneAccent,success:i.default.toneSuccess,warning:i.default.toneWarning,danger:i.default.toneDanger,info:i.default.toneInfo},l={none:i.default.radiusNone,xs:i.default.radiusXs,sm:i.default.radiusSm,md:i.default.radiusMd,lg:i.default.radiusLg,xl:i.default.radiusXl,"2xl":i.default.radius2xl,pill:i.default.radiusPill},u={none:i.default.paddingNone,sm:i.default.paddingSm,md:i.default.paddingMd,lg:i.default.paddingLg},d={vertical:i.default.vertical,horizontal:i.default.horizontal},f={"16/9":i.default.aspect16x9,"4/3":i.default.aspect4x3,"3/2":i.default.aspect3x2,"1/1":i.default.aspect1x1,"21/9":i.default.aspect21x9,auto:i.default.aspectAuto},p={top:i.default.mediaTop,bottom:i.default.mediaBottom,start:i.default.mediaStart},m={start:i.default.justifyStart,center:i.default.justifyCenter,end:i.default.justifyEnd,between:i.default.justifyBetween,stretch:i.default.justifyStretch},h=(0,a.createContext)(null);function g(t){let{as:r,variant:f=`elevated`,tone:p,radius:m=`xl`,padding:g=`md`,orientation:_=`vertical`,interactive:v=!1,selected:y=!1,className:b,children:x,...S}=t,w=r??`article`,T=p??(f===`soft`?`primary`:void 0),[E,D]=(0,a.useState)([]),O=(0,a.useCallback)(e=>(D(t=>t.includes(e)?t:[...t,e]),()=>D(t=>t.filter(t=>t!==e))),[]),k=E[0]??null,A={orientation:_,registerTitle:O},j=x;if(_===`horizontal`){let e=[],t=[];a.Children.forEach(x,n=>{(0,a.isValidElement)(n)&&n.type===C?e.push(n):n!=null&&typeof n!=`boolean`&&t.push(n)}),j=(0,o.jsxs)(`div`,{className:i.default.layout,children:[e,(0,o.jsx)(`div`,{className:i.default.content,children:t})]})}let M=(r??`article`)===`article`&&k!==null&&S[`aria-label`]===void 0&&S[`aria-labelledby`]===void 0;return(0,o.jsx)(h.Provider,{value:A,children:(0,o.jsxs)(w,{"aria-labelledby":M?k:void 0,...S,"data-selected":y||void 0,className:e.cx(i.default.root,s[f],T&&c[T],l[m],u[g],d[_],v&&i.default.interactive,y&&i.default.selected,b),children:[j,y&&(0,o.jsx)(`span`,{className:i.default.selectedBadge,"aria-hidden":`true`,children:(0,o.jsx)(n.Icon,{name:`check`,size:`sm`,strokeWidth:3})})]})})}var _=e=>typeof e==`string`||typeof e==`number`;function v({title:t,description:n,action:r,className:a,children:s,...c}){let l=t!=null||n!=null||s!=null&&s!==!1;return(0,o.jsxs)(`div`,{...c,className:e.cx(i.default.header,a),children:[l&&(0,o.jsxs)(`div`,{className:i.default.headerText,children:[_(t)?(0,o.jsx)(y,{children:t}):t,_(n)?(0,o.jsx)(b,{children:n}):n,s]}),r!=null&&(0,o.jsx)(`div`,{className:i.default.action,children:r})]})}function y({level:t=3,size:n=`xl`,href:s,id:c,className:l,children:u,...d}){let f=(0,a.useContext)(h),p=(0,a.useId)(),m=c??`${p}-title`,g=f?.registerTitle;return(0,a.useEffect)(()=>{if(g)return g(m)},[g,m]),(0,o.jsx)(r.Heading,{...d,id:m,level:t,size:n,tone:`inherit`,className:e.cx(i.default.title,l),children:s===void 0?u:(0,o.jsx)(w,{href:s,children:u})})}function b({className:t,...n}){return(0,o.jsx)(r.Text,{...n,size:`sm`,tone:`inherit`,className:e.cx(i.default.description,t)})}function x({className:t,...n}){return(0,o.jsx)(`div`,{...n,className:e.cx(i.default.body,t)})}function S({justify:t=`end`,className:n,...r}){return(0,o.jsx)(`div`,{...r,className:e.cx(i.default.footer,m[t],n)})}function C({aspectRatio:n=`16/9`,position:r,className:s,...c}){let l=(0,a.useContext)(h),u=r??(l?.orientation===`horizontal`?`start`:`top`);return(0,o.jsx)(t.FillSlotContext.Provider,{value:!0,children:(0,o.jsx)(`div`,{...c,className:e.cx(i.default.media,f[n],p[u],s)})})}function w(t){let{as:n,className:r,...a}=t;return(0,o.jsx)(n??`a`,{type:n===`button`?`button`:void 0,...a,className:e.cx(i.default.overlay,r)})}var T=Object.assign(g,{Header:v,Title:y,Description:b,Body:x,Footer:S,Media:C,LinkOverlay:w});exports.Card=T,exports.CardBody=x,exports.CardDescription=b,exports.CardFooter=S,exports.CardHeader=v,exports.CardLinkOverlay=w,exports.CardMedia=C,exports.CardTitle=y;

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

@@ -0,0 +1,171 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Orientation, Radius, Tone } from '../../../types/common';
+import { HeadingLevel, TypographySize } from '../../primitives/Typography';
+/**
+ * Surface style of a Card.
+ * - `elevated`: raised surface with a soft shadow (default).
+ * - `outline`: flat surface with a border (`tone` colors the border).
+ * - `filled`: sunken, recessed surface.
+ * - `soft`: tinted with `--color-{tone}-subtle`; text switches to the tone's verified subtle text color.
+ */
+export type CardVariant = "elevated" | "outline" | "filled" | "soft";
+/** Inner spacing of a Card. `none` removes padding for fully custom layouts. */
+export type CardPadding = "none" | "sm" | "md" | "lg";
+/** Elements a Card root can render as. Use `li` inside a `ul`/`ol` of cards. */
+export type CardElement = "article" | "section" | "div" | "li";
+/** Aspect ratio of `Card.Media` (width / height). `auto` sizes to the content. */
+export type CardMediaAspectRatio = "16/9" | "4/3" | "3/2" | "1/1" | "21/9" | "auto";
+/**
+ * Where `Card.Media` sits, which decides which edges bleed and which corners
+ * follow the card's radius.
+ * - `top`: first in the card, bleeds to the top and sides.
+ * - `bottom`: last in the card, bleeds to the bottom and sides.
+ * - `start`: side media in a horizontal card (inline-start edge). Becomes
+ *   `top` when the card collapses to a column on narrow widths.
+ */
+export type CardMediaPosition = "top" | "bottom" | "start";
+/** Main-axis distribution of `Card.Footer` actions. `stretch` makes every action fill equally. */
+export type CardFooterJustify = "start" | "center" | "end" | "between" | "stretch";
+/** Elements `Card.LinkOverlay` can render as. */
+export type CardLinkOverlayElement = "a" | "button" | "label";
+interface CardOwnProps<E extends CardElement> {
+    /** Element to render. `article` (default) for self-contained items, `section` for page regions, `li` inside a list of cards, `div` for no semantics. */
+    as?: E;
+    /** Surface style. @default "elevated" */
+    variant?: CardVariant;
+    /**
+     * Semantic color. Tints the `soft` variant (defaults to `primary` there)
+     * and colors the `outline` border. Has no effect on `elevated` or `filled`.
+     */
+    tone?: Tone;
+    /** Corner rounding. `pill` is treated as `--radius-2xl`. @default "xl" */
+    radius?: Radius;
+    /** Inner spacing (also sets the gap between parts). @default "md" */
+    padding?: CardPadding;
+    /**
+     * `vertical` stacks parts top to bottom. `horizontal` puts `Card.Media`
+     * beside the content and collapses to vertical when the card is narrower
+     * than 30rem (container query on the card itself, so it works in grids).
+     * Horizontal cards size to their container, not their content.
+     * @default "vertical"
+     */
+    orientation?: Orientation;
+    /**
+     * Hover lift (raise and stronger shadow). Use together with
+     * `Card.LinkOverlay` or `Card.Title href` so the whole card is clickable.
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Shows the selected look: a primary ring plus a check badge (shape, not
+     * color alone). Purely visual: the selection semantics (e.g. a native
+     * radio or checkbox inside the card, or `aria-selected` on a listbox
+     * option) belong to the parent pattern.
+     * @default false
+     */
+    selected?: boolean;
+    children?: ReactNode;
+}
+/** Props for `Card`, typed for the element chosen with `as`. */
+export type CardProps<E extends CardElement = "article"> = CardOwnProps<E> & Omit<ComponentPropsWithRef<E>, keyof CardOwnProps<E>>;
+/**
+ * A soft, rounded surface that groups related content. Compose it from
+ * `Card.Media`, `Card.Header`, `Card.Title`, `Card.Description`, `Card.Body`,
+ * and `Card.Footer`. For a fully clickable card, add one `Card.LinkOverlay`
+ * (or give `Card.Title` an `href`): the link stretches over the card while
+ * nested buttons stay independently clickable.
+ */
+declare function CardRoot<E extends CardElement = "article">(props: CardProps<E>): import("react").JSX.Element;
+export interface CardHeaderProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
+    /** Title. A string or number is wrapped in `Card.Title`; pass your own `<Card.Title>` to change its level or add `href`. */
+    title?: ReactNode;
+    /** Supporting text under the title. A string or number is wrapped in `Card.Description`. */
+    description?: ReactNode;
+    /** Slot at the top-right (inline-end), e.g. an icon button or menu. Stays clickable above a stretched link. */
+    action?: ReactNode;
+    /** Extra content in the text column, after the title and description (e.g. tags or meta). */
+    children?: ReactNode;
+}
+/** Top row of a card: title and description on the start side, an optional action on the end side. */
+export declare function CardHeader({ title, description, action, className, children, ...rest }: CardHeaderProps): import("react").JSX.Element;
+export interface CardTitleProps extends Omit<ComponentPropsWithRef<"h3">, "color"> {
+    /** Heading level, chosen by document outline (not looks). @default 3 */
+    level?: HeadingLevel;
+    /** Visual size, independent of `level`. @default "xl" */
+    size?: TypographySize;
+    /**
+     * Makes the title a stretched link that covers the whole card (the card's
+     * single link, named by the title text). Shortcut for wrapping the text in
+     * `Card.LinkOverlay`.
+     */
+    href?: string;
+}
+/**
+ * Card heading in the display font. Its color follows the card (so it stays
+ * contrast-verified on `soft` cards). The first title in a card also names
+ * an `article` card via `aria-labelledby`.
+ */
+export declare function CardTitle({ level, size, href, id, className, children, ...rest }: CardTitleProps): import("react").JSX.Element;
+export type CardDescriptionProps = ComponentPropsWithRef<"p">;
+/** Muted supporting text (tone-tinted on `soft` cards). */
+export declare function CardDescription({ className, ...rest }: CardDescriptionProps): import("react").JSX.Element;
+export type CardBodyProps = ComponentPropsWithRef<"div">;
+/** Main content area. Grows to fill the card so footers line up across a grid. */
+export declare function CardBody({ className, ...rest }: CardBodyProps): import("react").JSX.Element;
+export interface CardFooterProps extends ComponentPropsWithRef<"div"> {
+    /** Distribution of actions. @default "end" */
+    justify?: CardFooterJustify;
+}
+/** Bottom row for actions. Buttons in it stay clickable above a stretched link. */
+export declare function CardFooter({ justify, className, ...rest }: CardFooterProps): import("react").JSX.Element;
+export interface CardMediaProps extends ComponentPropsWithRef<"div"> {
+    /** Width-to-height ratio. Ignored beside the content in a horizontal card, where media fills the card's height. @default "16/9" */
+    aspectRatio?: CardMediaAspectRatio;
+    /** Which edge the media bleeds to. Defaults to `start` in horizontal cards and `top` otherwise. */
+    position?: CardMediaPosition;
+    /**
+     * The image, video, or other media. Direct `img`, `video`, `picture`,
+     * `iframe`, and `svg` children are cropped to fill (`object-fit: cover`);
+     * any other single child is stretched to fill, and an `Image` fills and
+     * drops its own rounding without extra props.
+     * Give meaningful images real `alt` text; use `alt=""` for decorative ones.
+     */
+    children?: ReactNode;
+}
+/**
+ * Full-bleed media (image, video, illustration). Cancels the card's padding
+ * on its edges and follows the card's outer corner radius.
+ */
+export declare function CardMedia({ aspectRatio, position, className, ...rest }: CardMediaProps): import("react").JSX.Element;
+interface CardLinkOverlayOwnProps<E extends CardLinkOverlayElement> {
+    /**
+     * `a` (default) for navigation, `button` for an in-page action (e.g. open a
+     * dialog), `label` to make the whole card toggle a form control inside it
+     * (point `htmlFor` at a radio or checkbox).
+     */
+    as?: E;
+    /** Visible text; it becomes the accessible name, so make it meaningful (usually the title). */
+    children?: ReactNode;
+}
+/** Props for `Card.LinkOverlay`, typed for the element chosen with `as`. */
+export type CardLinkOverlayProps<E extends CardLinkOverlayElement = "a"> = CardLinkOverlayOwnProps<E> & Omit<ComponentPropsWithRef<E>, keyof CardLinkOverlayOwnProps<E>>;
+/**
+ * Accessible "stretched link". Renders one real link (or button/label) whose
+ * `::after` covers the whole card, so the card is clickable while there is a
+ * single focus stop with a meaningful name. Other links and buttons inside
+ * the card are lifted above it and stay independently clickable. Use at most
+ * one per card, and don't place it inside `Card.Media`.
+ */
+export declare function CardLinkOverlay<E extends CardLinkOverlayElement = "a">(props: CardLinkOverlayProps<E>): import("react").JSX.Element;
+type CardComponent = typeof CardRoot & {
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+    Media: typeof CardMedia;
+    LinkOverlay: typeof CardLinkOverlay;
+};
+/** @see CardRoot */
+export declare const Card: CardComponent;
+export {};