@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/feedback/Alert/Alert.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),i=require("../../primitives/Button/Button.cjs.js"),a=require("../../primitives/Icon/icons.cjs.js"),o=require("../../primitives/Typography/Typography.cjs.js"),s=require("./Alert.module.css.cjs.js");let c=require("react"),l=require("react/jsx-runtime");var u={info:s.default.info,success:s.default.success,warning:s.default.warning,danger:s.default.danger,neutral:s.default.neutral},d={soft:s.default.soft,solid:s.default.solid,outline:s.default.outline},f={sm:s.default.sm,md:s.default.md,lg:s.default.lg},p={none:s.default.radiusNone,xs:s.default.radiusXs,sm:s.default.radiusSm,md:s.default.radiusMd,lg:s.default.radiusLg,xl:s.default.radiusXl,"2xl":s.default.radius2xl,pill:s.default.radiusPill},m={info:(0,l.jsx)(a.InfoIcon,{}),success:(0,l.jsx)(a.SuccessIcon,{}),warning:(0,l.jsx)(a.WarningIcon,{}),danger:(0,l.jsx)(a.ErrorIcon,{}),neutral:(0,l.jsx)(a.NoteIcon,{})},h={info:!1,success:!1,warning:!0,danger:!0,neutral:!1},g=({tone:g=`info`,variant:_=`soft`,title:v,headingLevel:y,children:b,icon:x,toneLabel:S,actions:C,dismissible:w=!1,dismissLabel:T,onDismiss:E,returnFocusRef:D,open:O,defaultOpen:k=!0,onOpenChange:A,live:j=`off`,as:M=`div`,size:N=`md`,radius:P=`lg`,className:F,...I})=>{let L=t.useMessages(),R=T??L.alert.dismiss,z=(0,c.useId)(),[B,V]=e.useControllableState({value:O,defaultValue:k,onChange:A}),H=(0,c.useRef)(!1);if((0,c.useEffect)(()=>{!B&&H.current&&(H.current=!1,D?.current?.focus())},[B,D]),!B)return null;let U=()=>{H.current=D!==void 0,V(!1),E?.()},W=v!=null&&v!==``&&v!==!1,G=b!=null&&b!==``&&b!==!1,K=x===void 0?m[g]:x,q=K!==!1&&K!==null&&K!==``,J=typeof S==`string`?S:S??h[g]?L.alert.prefix[g]:``,Y=J?(0,l.jsx)(r.VisuallyHidden,{children:J}):null,X=j===`assertive`?`alert`:j===`polite`?`status`:void 0,Z=(M===`section`||M===`aside`)&&W&&I[`aria-label`]===void 0&&I[`aria-labelledby`]===void 0?z:void 0,Q=W?y===void 0?(0,l.jsxs)(`p`,{id:z,className:s.default.title,children:[Y,v]}):(0,l.jsxs)(o.Heading,{id:z,level:y,size:`md`,weight:`bold`,tone:`inherit`,balance:!1,className:s.default.title,children:[Y,v]}):null;return(0,l.jsxs)(M,{role:X,"aria-labelledby":Z,...I,className:n.cx(s.default.root,d[_],u[g],f[N],p[P],w&&s.default.dismissible,F),"data-tone":g,"data-variant":_,children:[q&&(0,l.jsx)(`span`,{className:s.default.iconCircle,"aria-hidden":`true`,children:K}),(0,l.jsxs)(`div`,{className:s.default.content,children:[Q,G&&(0,l.jsxs)(`div`,{className:s.default.description,children:[!W&&Y,b]}),!W&&!G&&Y,C!=null&&(0,l.jsx)(`div`,{className:s.default.actions,children:C})]}),w&&(0,l.jsx)(i.IconButton,{"aria-label":R,variant:_===`solid`?`solid`:`ghost`,tone:_===`solid`?g:`neutral`,size:`sm`,className:s.default.dismiss,onClick:U,children:(0,l.jsx)(a.CloseIcon,{})})]})};exports.Alert=g;

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

@@ -0,0 +1,101 @@
+import { ComponentPropsWithRef, ReactNode, RefObject } from 'react';
+import { Radius, Size, StatusTone } from '../../../types/common';
+import { HeadingLevel } from '../../primitives/Typography';
+/** Semantic color of the alert: a status tone, or `neutral` for general notes. */
+export type AlertTone = StatusTone | "neutral";
+/**
+ * Surface style.
+ * - `soft` (default): tinted background with a thick tone border on the start edge.
+ * - `solid`: full tone fill with high-contrast text. Use for the most urgent messages.
+ * - `outline`: page-colored surface with a tone border all around.
+ */
+export type AlertVariant = "soft" | "solid" | "outline";
+/**
+ * How the alert is exposed to assistive technology.
+ * - `"off"` (default): no live role. Use for alerts present when the page loads.
+ * - `"polite"`: `role="status"`. Announced when idle. Use for confirmations
+ *   ("Saved") and non-urgent updates.
+ * - `"assertive"`: `role="alert"`. Interrupts the user. Use only for errors or
+ *   warnings that appear in response to an action.
+ *
+ * Live roles only announce content that changes **after** the page loads:
+ * insert the whole `Alert` (or change its content) dynamically. An alert that
+ * is already in the initial HTML is not announced, whatever its role.
+ */
+export type AlertLive = "off" | "polite" | "assertive";
+/** Root element. `section` and `aside` are labelled by the title automatically. */
+export type AlertElement = "div" | "section" | "aside";
+export interface AlertOwnProps {
+    /** Semantic color and default icon. @default "info" */
+    tone?: AlertTone;
+    /** Surface style. @default "soft" */
+    variant?: AlertVariant;
+    /** Bold display-font title. Optional; a description alone is fine for short messages. */
+    title?: ReactNode;
+    /**
+     * Renders the title as a real heading (`h1`-`h6`) at this level. Leave
+     * unset for a plain bold paragraph, which suits most inline alerts.
+     */
+    headingLevel?: HeadingLevel;
+    /** Description: the message body. May include links and lists. */
+    children?: ReactNode;
+    /**
+     * Icon in the tinted circle. Defaults to a distinct shape per tone (info,
+     * success check, warning triangle, error). Pass `false` to hide it.
+     * Always decorative (hidden from assistive technology): the tone is also
+     * conveyed by `toneLabel` and the text.
+     */
+    icon?: ReactNode | false;
+    /**
+     * Visually hidden prefix read before the title (or the description, when
+     * there is no title), e.g. "Error: ". `true` uses the default for the tone,
+     * a string sets your own (localize it here), `false` turns it off.
+     * @default on for `danger` ("Error: ") and `warning` ("Warning: "), off otherwise
+     */
+    toneLabel?: string | boolean;
+    /** Action row under the description, usually `Button`s (size `sm`) or `Link`s. */
+    actions?: ReactNode;
+    /** Shows a "Dismiss" icon button at the end. @default false */
+    dismissible?: boolean;
+    /** Accessible name of the dismiss button. Localize it here. @default "Dismiss" */
+    dismissLabel?: string;
+    /** Called when the dismiss button is pressed, after the alert hides. */
+    onDismiss?: () => void;
+    /**
+     * Element to focus after dismissal, so keyboard focus isn't lost when the
+     * alert (and its dismiss button) disappears. Pick the control that
+     * triggered the alert, or the next logical element. If unset and focus was
+     * inside the alert, handle focus yourself in `onDismiss`.
+     */
+    returnFocusRef?: RefObject<HTMLElement | null>;
+    /** Whether the alert is shown (controlled). Set with `onOpenChange` to control dismissal. */
+    open?: boolean;
+    /** Whether the alert is shown initially (uncontrolled). @default true */
+    defaultOpen?: boolean;
+    /** Called with `false` when the alert is dismissed. */
+    onOpenChange?: (open: boolean) => void;
+    /** Live-region behavior. See `AlertLive`. @default "off" */
+    live?: AlertLive;
+    /** Root element. `section` and `aside` become labelled landmarks when there is a title. @default "div" */
+    as?: AlertElement;
+    /** Padding, type size, and icon size. @default "md" */
+    size?: Size;
+    /** Corner rounding. @default "lg" */
+    radius?: Radius;
+}
+export type AlertProps = AlertOwnProps & Omit<ComponentPropsWithRef<"div">, keyof AlertOwnProps>;
+/**
+ * An inline, in-page message: info, success, warning, danger, or neutral.
+ * Not a toast or a banner; it sits in the flow of the content it relates to.
+ *
+ * Accessibility:
+ * - Tone is never color alone: each tone has a distinct icon shape, and
+ *   `danger`/`warning` get a visually hidden "Error: "/"Warning: " prefix
+ *   (see `toneLabel`).
+ * - `live` picks the role: none (default), `status` (polite), or `alert`
+ *   (assertive). Live roles only announce content inserted after page load.
+ * - The dismiss button is a native `<button>` named "Dismiss" (at least
+ *   32x32). After dismissal, focus moves to `returnFocusRef` when given.
+ * - With `as="section"` or `as="aside"`, the landmark is labelled by the title.
+ */
+export declare const Alert: ({ tone, variant, title, headingLevel, children, icon, toneLabel, actions, dismissible, dismissLabel: dismissLabelProp, onDismiss, returnFocusRef, open: openProp, defaultOpen, onOpenChange, live, as: Root, size, radius, className, ...rest }: AlertProps) => import("react").JSX.Element | null;

package/dist/components/feedback/Alert/Alert.mjs

@@ -0,0 +1,113 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useMessages as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { VisuallyHidden as r } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { IconButton as i } from "../../primitives/Button/Button.mjs";
+import { CloseIcon as a, ErrorIcon as o, InfoIcon as s, NoteIcon as c, SuccessIcon as l, WarningIcon as u } from "../../primitives/Icon/icons.mjs";
+import { Heading as d } from "../../primitives/Typography/Typography.mjs";
+import f from "./Alert.module.css.mjs";
+import { useEffect as p, useId as m, useRef as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/feedback/Alert/Alert.tsx
+var v = {
+	info: f.info,
+	success: f.success,
+	warning: f.warning,
+	danger: f.danger,
+	neutral: f.neutral
+}, y = {
+	soft: f.soft,
+	solid: f.solid,
+	outline: f.outline
+}, b = {
+	sm: f.sm,
+	md: f.md,
+	lg: f.lg
+}, x = {
+	none: f.radiusNone,
+	xs: f.radiusXs,
+	sm: f.radiusSm,
+	md: f.radiusMd,
+	lg: f.radiusLg,
+	xl: f.radiusXl,
+	"2xl": f.radius2xl,
+	pill: f.radiusPill
+}, S = {
+	info: /* @__PURE__ */ g(s, {}),
+	success: /* @__PURE__ */ g(l, {}),
+	warning: /* @__PURE__ */ g(u, {}),
+	danger: /* @__PURE__ */ g(o, {}),
+	neutral: /* @__PURE__ */ g(c, {})
+}, C = {
+	info: !1,
+	success: !1,
+	warning: !0,
+	danger: !0,
+	neutral: !1
+}, w = ({ tone: o = "info", variant: s = "soft", title: c, headingLevel: l, children: u, icon: w, toneLabel: T, actions: E, dismissible: D = !1, dismissLabel: O, onDismiss: k, returnFocusRef: A, open: j, defaultOpen: M = !0, onOpenChange: N, live: P = "off", as: F = "div", size: I = "md", radius: L = "lg", className: R, ...z }) => {
+	let B = t(), V = O ?? B.alert.dismiss, H = m(), [U, W] = e({
+		value: j,
+		defaultValue: M,
+		onChange: N
+	}), G = h(!1);
+	if (p(() => {
+		!U && G.current && (G.current = !1, A?.current?.focus());
+	}, [U, A]), !U) return null;
+	let K = () => {
+		G.current = A !== void 0, W(!1), k?.();
+	}, q = c != null && c !== "" && c !== !1, J = u != null && u !== "" && u !== !1, Y = w === void 0 ? S[o] : w, X = Y !== !1 && Y !== null && Y !== "", Z = typeof T == "string" ? T : T ?? C[o] ? B.alert.prefix[o] : "", Q = Z ? /* @__PURE__ */ g(r, { children: Z }) : null, $ = P === "assertive" ? "alert" : P === "polite" ? "status" : void 0, ee = (F === "section" || F === "aside") && q && z["aria-label"] === void 0 && z["aria-labelledby"] === void 0 ? H : void 0, te = q ? l === void 0 ? /* @__PURE__ */ _("p", {
+		id: H,
+		className: f.title,
+		children: [Q, c]
+	}) : /* @__PURE__ */ _(d, {
+		id: H,
+		level: l,
+		size: "md",
+		weight: "bold",
+		tone: "inherit",
+		balance: !1,
+		className: f.title,
+		children: [Q, c]
+	}) : null;
+	return /* @__PURE__ */ _(F, {
+		role: $,
+		"aria-labelledby": ee,
+		...z,
+		className: n(f.root, y[s], v[o], b[I], x[L], D && f.dismissible, R),
+		"data-tone": o,
+		"data-variant": s,
+		children: [
+			X && /* @__PURE__ */ g("span", {
+				className: f.iconCircle,
+				"aria-hidden": "true",
+				children: Y
+			}),
+			/* @__PURE__ */ _("div", {
+				className: f.content,
+				children: [
+					te,
+					J && /* @__PURE__ */ _("div", {
+						className: f.description,
+						children: [!q && Q, u]
+					}),
+					!q && !J && Q,
+					E != null && /* @__PURE__ */ g("div", {
+						className: f.actions,
+						children: E
+					})
+				]
+			}),
+			D && /* @__PURE__ */ g(i, {
+				"aria-label": V,
+				variant: s === "solid" ? "solid" : "ghost",
+				tone: s === "solid" ? o : "neutral",
+				size: "sm",
+				className: f.dismiss,
+				onClick: K,
+				children: /* @__PURE__ */ g(a, {})
+			})
+		]
+	});
+};
+//#endregion
+export { w as Alert };

package/dist/components/feedback/Alert/Alert.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_1cmri_27`,t=`_sm_1cmri_95`,n=`_md_1cmri_115`,r=`_lg_1cmri_127`,i=`_radiusNone_1cmri_149`,a=`_radiusXs_1cmri_151`,o=`_radiusSm_1cmri_153`,s=`_radiusMd_1cmri_155`,c=`_radiusLg_1cmri_157`,l=`_radiusXl_1cmri_159`,u=`_radius2xl_1cmri_161`,d=`_radiusPill_1cmri_163`,f=`_info_1cmri_169`,p=`_success_1cmri_185`,m=`_warning_1cmri_201`,h=`_danger_1cmri_217`,g=`_neutral_1cmri_233`,_=`_soft_1cmri_251`,v=`_solid_1cmri_271`,y=`_outline_1cmri_289`,b=`_iconCircle_1cmri_311`,x=`_content_1cmri_349`,S=`_title_1cmri_371`,C=`_description_1cmri_391`,w=`_actions_1cmri_459`,T=`_dismiss_1cmri_479`,E={root:e,"alert-enter":`_alert-enter_1cmri_1`,sm:t,md:n,lg:r,radiusNone:i,radiusXs:a,radiusSm:o,radiusMd:s,radiusLg:c,radiusXl:l,radius2xl:u,radiusPill:d,info:f,success:p,warning:m,danger:h,neutral:g,soft:_,solid:v,outline:y,iconCircle:b,content:x,title:S,description:C,actions:w,dismiss:T};exports.actions=w,exports.content=x,exports.danger=h,exports.default=E,exports.description=C,exports.dismiss=T,exports.iconCircle=b,exports.info=f,exports.lg=r,exports.md=n,exports.neutral=g,exports.outline=y,exports.radius2xl=u,exports.radiusLg=c,exports.radiusMd=s,exports.radiusNone=i,exports.radiusPill=d,exports.radiusSm=o,exports.radiusXl=l,exports.radiusXs=a,exports.root=e,exports.sm=t,exports.soft=_,exports.solid=v,exports.success=p,exports.title=S,exports.warning=m;

package/dist/components/feedback/Alert/Alert.module.css.mjs

@@ -0,0 +1,32 @@
+//#region src/components/feedback/Alert/Alert.module.css
+var e = "_root_1cmri_27", t = "_sm_1cmri_95", n = "_md_1cmri_115", r = "_lg_1cmri_127", i = "_radiusNone_1cmri_149", a = "_radiusXs_1cmri_151", o = "_radiusSm_1cmri_153", s = "_radiusMd_1cmri_155", c = "_radiusLg_1cmri_157", l = "_radiusXl_1cmri_159", u = "_radius2xl_1cmri_161", d = "_radiusPill_1cmri_163", f = "_info_1cmri_169", p = "_success_1cmri_185", m = "_warning_1cmri_201", h = "_danger_1cmri_217", g = "_neutral_1cmri_233", _ = "_soft_1cmri_251", v = "_solid_1cmri_271", y = "_outline_1cmri_289", b = "_iconCircle_1cmri_311", x = "_content_1cmri_349", S = "_title_1cmri_371", C = "_description_1cmri_391", w = "_actions_1cmri_459", T = "_dismiss_1cmri_479", E = {
+	root: e,
+	"alert-enter": "_alert-enter_1cmri_1",
+	sm: t,
+	md: n,
+	lg: r,
+	radiusNone: i,
+	radiusXs: a,
+	radiusSm: o,
+	radiusMd: s,
+	radiusLg: c,
+	radiusXl: l,
+	radius2xl: u,
+	radiusPill: d,
+	info: f,
+	success: p,
+	warning: m,
+	danger: h,
+	neutral: g,
+	soft: _,
+	solid: v,
+	outline: y,
+	iconCircle: b,
+	content: x,
+	title: S,
+	description: C,
+	actions: w,
+	dismiss: T
+};
+//#endregion
+export { w as actions, x as content, h as danger, E as default, C as description, T as dismiss, b as iconCircle, f as info, r as lg, n as md, g as neutral, y as outline, u as radius2xl, c as radiusLg, s as radiusMd, i as radiusNone, d as radiusPill, o as radiusSm, l as radiusXl, a as radiusXs, e as root, t as sm, _ as soft, v as solid, p as success, S as title, m as warning };

package/dist/components/feedback/Alert/index.d.ts

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

package/dist/components/feedback/Banner/Banner.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../utils/refs.cjs.js"),r=require("../../../utils/cx.cjs.js"),ee=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),i=require("../../primitives/Button/Button.cjs.js"),a=require("../../primitives/Icon/icons.cjs.js"),te=require("../../layout/Container/Container.cjs.js"),o=require("./Banner.module.css.cjs.js");let s=require("react"),c=require("react/jsx-runtime");var ne={neutral:o.default.neutral,primary:o.default.primary,accent:o.default.accent,success:o.default.success,warning:o.default.warning,danger:o.default.danger,info:o.default.info},re={solid:o.default.solid,soft:o.default.soft},ie={sm:o.default.sm,md:o.default.md,lg:o.default.lg},ae={start:o.default.alignStart,center:o.default.alignCenter},l={static:o.default.static,sticky:o.default.sticky},u={sm:`sm`,md:`sm`,lg:`md`},oe={sm:4,md:6,lg:8},d={info:(0,c.jsx)(a.InfoIcon,{}),success:(0,c.jsx)(a.SuccessIcon,{}),warning:(0,c.jsx)(a.WarningIcon,{}),danger:(0,c.jsx)(a.ErrorIcon,{})},se=(e,t)=>e===`solid`?{variant:`inverse`,tone:t}:t===`accent`||t===`warning`||t===`neutral`?{variant:`solid`,tone:`neutral`}:{variant:`solid`,tone:t},f=`dhui-banner:`,p=new Set,m=new Set,h=e=>{try{if(window.localStorage.getItem(f+e)===`dismissed`)return!0}catch{}return p.has(e)},g=(e,t)=>{if(t)try{window.localStorage.setItem(f+e,`dismissed`)}catch{p.add(e)}else{p.delete(e);try{window.localStorage.removeItem(f+e)}catch{}}m.forEach(e=>e())},_=e=>{m.add(e);let t=t=>{(t.key===null||t.key.startsWith(f))&&e()};return window.addEventListener(`storage`,t),()=>{m.delete(e),window.removeEventListener(`storage`,t)}},ce=e=>(0,s.useSyncExternalStore)(_,()=>e===void 0?`visible`:h(e)?`dismissed`:`visible`,()=>e===void 0?`visible`:`unknown`),v=e=>{typeof window>`u`||g(e,!1)},y=`a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]`,le=e=>{let t=Array.from(document.querySelectorAll(y)).filter(t=>!e.contains(t)&&!t.closest(`[inert]`)&&t.getClientRects().length>0),n=t.find(t=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING);if(n)return n;let r=t.filter(t=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_PRECEDING);return r[r.length-1]??null},b=e=>typeof e==`string`||typeof e==`number`?String(e):void 0,x=({tone:f=`primary`,variant:p=`solid`,size:m=`md`,icon:h,title:_,children:v,actions:y,dismissible:x=!1,dismissLabel:ue,open:S,defaultOpen:C=!0,onOpenChange:w,persistKey:T,position:E=`static`,align:de=`start`,contained:D=!1,live:O=`off`,liveMessage:fe,className:pe,ref:k,onAnimationEnd:me,...A})=>{let j=t.useMessages(),he=ue??j.banner.dismiss,M=(0,s.useId)(),N=(0,s.useRef)(null),[P,F]=e.useControllableState({value:S,defaultValue:C,onChange:w}),I=S!==void 0,L=ce(T),R=P&&L===`visible`,[z,B]=(0,s.useState)(R),[V,H]=(0,s.useState)(`idle`);R&&!z?(B(!0),H(`entering`)):R&&V===`closing`?H(`idle`):!R&&z&&V!==`closing`&&H(`closing`);let U=(0,s.useRef)(V);U.current=V;let W=(0,s.useCallback)(()=>{U.current===`closing`&&B(!1),H(`idle`)},[]);(0,s.useEffect)(()=>{if(V===`idle`)return;let e=window.setTimeout(W,600);return()=>window.clearTimeout(e)},[V,W]);let ge=e=>{me?.(e),e.target===e.currentTarget&&W()},_e=()=>{let e=N.current;e&&e.contains(document.activeElement)&&le(e)?.focus(),T!==void 0&&g(T,!0),T!==void 0&&!I?w?.(!1):F(!1)},G=E===`sticky`;(0,s.useEffect)(()=>{let e=N.current;if(!G||!z||!e)return;let t=document.documentElement,n=()=>t.style.setProperty(`--banner-height`,`${e.getBoundingClientRect().height}px`);n();let r=typeof ResizeObserver>`u`?null:new ResizeObserver(n);return r?.observe(e),()=>{r?.disconnect(),t.style.removeProperty(`--banner-height`)}},[G,z]);let K=fe??[b(_),b(v)].filter(Boolean).join(`. `),[q,J]=(0,s.useState)(``);(0,s.useEffect)(()=>{if(J(``),O===`off`||!R||!K)return;let e=window.setTimeout(()=>J(K),150);return()=>window.clearTimeout(e)},[O,R,K]);let ve=(0,s.useCallback)(e=>{N.current=e,n.assignRef(k,e)},[k]);if(!z)return null;let Y=_!=null&&_!==``,X=h===void 0?f in d?d[f]:null:h,Z=se(p,f),Q=D===!0?`xl`:D===!1?void 0:D,$=(0,c.jsxs)(`div`,{className:r.cx(o.default.inner,Q===void 0&&o.default.gutter,x&&o.default.dismissible),children:[(0,c.jsxs)(`div`,{className:o.default.main,children:[(0,c.jsxs)(`div`,{className:o.default.content,children:[X!=null&&(0,c.jsx)(`span`,{className:o.default.icon,"aria-hidden":`true`,children:X}),(0,c.jsxs)(`div`,{className:o.default.text,children:[Y&&(0,c.jsx)(`p`,{id:M,className:o.default.title,children:_}),v!=null&&(0,c.jsx)(`div`,{className:o.default.message,children:v})]})]}),y!=null&&(0,c.jsx)(i.ButtonGroup,{className:o.default.actions,size:u[m],variant:Z.variant,tone:Z.tone,children:y})]}),x&&(0,c.jsx)(i.IconButton,{className:o.default.dismiss,"aria-label":he,size:u[m],variant:p===`solid`?`soft`:`ghost`,tone:`neutral`,onClick:_e,children:(0,c.jsx)(a.CloseIcon,{})})]});return(0,c.jsxs)(`section`,{"aria-labelledby":A[`aria-label`]===void 0&&Y?M:void 0,"aria-label":A[`aria-labelledby`]===void 0&&!Y?j.banner.region:void 0,...A,ref:ve,inert:V===`closing`||void 0,"data-state":V===`closing`?`closed`:`open`,className:r.cx(o.default.root,ne[f],re[p],ie[m],ae[de],l[E],V===`entering`&&o.default.entering,V===`closing`&&o.default.closing,pe),onAnimationEnd:ge,children:[(0,c.jsx)(`div`,{className:o.default.clip,children:Q===void 0?$:(0,c.jsx)(te.Container,{size:Q,gutter:oe[m],children:$})}),O!==`off`&&(0,c.jsx)(ee.VisuallyHidden,{role:O===`assertive`?`alert`:`status`,"aria-live":O,"aria-atomic":`true`,children:q})]})};exports.Banner=x,exports.resetBannerDismissal=v;

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

@@ -0,0 +1,132 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Size, Tone } from '../../../types/common';
+import { ContainerSize } from '../../layout/Container';
+/**
+ * Semantic color of the strip. `neutral`, `primary`, and `accent` (the bright
+ * promo strip, always dark text) suit announcements; status tones suit
+ * system messages and get a matching default icon.
+ */
+export type BannerTone = Tone;
+/**
+ * Visual style.
+ * - `solid`: full tone fill with `--color-on-{tone}` text. Loud; for
+ *   announcements and promos.
+ * - `soft`: subtle tone tint with body text and a tone border along the
+ *   bottom edge. Calmer; for system and status messages.
+ */
+export type BannerVariant = "solid" | "soft";
+/** `static` sits in the flow; `sticky` sticks to the top of its scroll container. */
+export type BannerPosition = "static" | "sticky";
+/** Horizontal alignment of the content. */
+export type BannerAlign = "start" | "center";
+/**
+ * Live-region behavior.
+ * - `"off"` (default): not announced. Use for banners present on page load;
+ *   don't use `role="alert"` for those, it interrupts users on every load.
+ * - `"polite"`: announced via `role="status"` when it appears or its message
+ *   changes (e.g. "You're offline").
+ * - `"assertive"`: announced via `role="alert"`, interrupting the user. Keep
+ *   it for urgent, time-sensitive problems.
+ */
+export type BannerLive = "off" | "polite" | "assertive";
+/**
+ * Forgets a remembered dismissal, so every `Banner` with this `persistKey`
+ * shows again. Safe to call when storage is unavailable or on the server.
+ */
+export declare const resetBannerDismissal: (persistKey: string) => void;
+export interface BannerOwnProps {
+    /** Semantic color. Status tones get a default icon. @default "primary" */
+    tone?: BannerTone;
+    /** Visual style: loud `solid` fill or calm `soft` tint. @default "solid" */
+    variant?: BannerVariant;
+    /** Padding and type size. @default "md" */
+    size?: Size;
+    /**
+     * Leading icon, always decorative (hidden from assistive technology), so
+     * the text must carry the meaning. Status tones show a matching icon by
+     * default; pass `null` to hide it.
+     */
+    icon?: ReactNode;
+    /** Short bold lead-in, shown before the message. Also names the landmark. */
+    title?: ReactNode;
+    /**
+     * The message. For links inside it, use `<Link tone="neutral">`: it
+     * inherits the strip's text color (verified on every tone) and stays
+     * underlined, so it is not identified by color alone.
+     */
+    children?: ReactNode;
+    /**
+     * Buttons or Links after the message. `Button`s get a default `variant`,
+     * `tone`, and `size` that keep verified contrast on the strip (their own
+     * props still win): soft neutral on `solid` strips; solid tone (or solid
+     * neutral for neutral, accent, and warning) on `soft` strips. For a
+     * secondary action on a soft strip, use `variant="outline" tone="neutral"`.
+     */
+    actions?: ReactNode;
+    /** Shows a dismiss button at the end. @default false */
+    dismissible?: boolean;
+    /** Accessible name of the dismiss button. Localize it here. @default "Dismiss banner" */
+    dismissLabel?: string;
+    /** Whether the banner is shown (controlled). */
+    open?: boolean;
+    /** Whether the banner is shown at first (uncontrolled). @default true */
+    defaultOpen?: boolean;
+    /** Called with the next open state, e.g. `false` when the user dismisses it. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Remembers a dismissal in localStorage under this key, so the banner stays
+     * hidden on later visits. Use a new key (e.g. with a version) to show an
+     * updated banner again; `resetBannerDismissal(key)` forgets it. Server
+     * rendering and hydration render nothing until storage is read, so a
+     * dismissed banner never flashes (a visible one appears just after
+     * hydration). Falls back to memory when storage is blocked.
+     */
+    persistKey?: string;
+    /**
+     * `sticky` sticks to the top of the scroll container (`--z-sticky`) and
+     * sets `--banner-height` on `<html>` while shown, so pages can offset with
+     * `scroll-padding-top: var(--banner-height, 0px)` and keep focused content
+     * from being hidden under it (WCAG 2.4.11). @default "static"
+     */
+    position?: BannerPosition;
+    /** Content alignment. @default "start" */
+    align?: BannerAlign;
+    /**
+     * Keeps the content within a centered max width (via `Container`) while
+     * the color runs edge to edge. `true` uses `xl`; pass a size to change it.
+     * @default false
+     */
+    contained?: boolean | ContainerSize;
+    /**
+     * Announces the banner to screen readers when it appears or its message
+     * changes. `"polite"` uses `role="status"`, `"assertive"` uses
+     * `role="alert"`. Leave `"off"` for banners present on page load.
+     * @default "off"
+     */
+    live?: BannerLive;
+    /**
+     * Text announced when `live` is set. Defaults to the title and message
+     * when they are plain strings; pass this when either is JSX.
+     */
+    liveMessage?: string;
+}
+export type BannerProps = BannerOwnProps & Omit<ComponentPropsWithRef<"section">, keyof BannerOwnProps>;
+/**
+ * A full-width, page-level strip for announcements, promos, cookie notices,
+ * trial reminders, maintenance windows, and connection status. For a message
+ * inside the page content, use `Alert` instead.
+ *
+ * Accessibility:
+ * - Renders a `<section>` region landmark, named by `aria-label` or
+ *   `aria-labelledby`, else by the `title`, else "Announcement". Give each
+ *   banner on a page a distinct name.
+ * - Icons are decorative; status is carried by the text (and the default
+ *   status icon shape), never by color alone.
+ * - With `live`, a visually hidden `role="status"` (or `role="alert"`) region
+ *   is filled just after the banner appears, so it is announced reliably.
+ * - Dismissing moves focus to the next focusable element after the banner
+ *   (or the one before it), so keyboard focus is never lost.
+ * - The dismiss animation collapses the strip with `--ease-standard`; it is
+ *   instant under `prefers-reduced-motion`.
+ */
+export declare const Banner: ({ tone, variant, size, icon, title, children, actions, dismissible, dismissLabel: dismissLabelProp, open, defaultOpen, onOpenChange, persistKey, position, align, contained, live, liveMessage, className, ref, onAnimationEnd, ...rest }: BannerProps) => import("react").JSX.Element | null;

package/dist/components/feedback/Banner/Banner.mjs

@@ -0,0 +1,199 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useMessages as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { assignRef as n } from "../../../utils/refs.mjs";
+import { cx as r } from "../../../utils/cx.mjs";
+import { VisuallyHidden as ee } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { ButtonGroup as te, IconButton as ne } from "../../primitives/Button/Button.mjs";
+import { CloseIcon as re, ErrorIcon as i, InfoIcon as a, SuccessIcon as o, WarningIcon as s } from "../../primitives/Icon/icons.mjs";
+import { Container as ie } from "../../layout/Container/Container.mjs";
+import c from "./Banner.module.css.mjs";
+import { useCallback as l, useEffect as u, useId as d, useRef as f, useState as p, useSyncExternalStore as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/components/feedback/Banner/Banner.tsx
+var ae = {
+	neutral: c.neutral,
+	primary: c.primary,
+	accent: c.accent,
+	success: c.success,
+	warning: c.warning,
+	danger: c.danger,
+	info: c.info
+}, oe = {
+	solid: c.solid,
+	soft: c.soft
+}, se = {
+	sm: c.sm,
+	md: c.md,
+	lg: c.lg
+}, ce = {
+	start: c.alignStart,
+	center: c.alignCenter
+}, le = {
+	static: c.static,
+	sticky: c.sticky
+}, _ = {
+	sm: "sm",
+	md: "sm",
+	lg: "md"
+}, ue = {
+	sm: 4,
+	md: 6,
+	lg: 8
+}, v = {
+	info: /* @__PURE__ */ h(a, {}),
+	success: /* @__PURE__ */ h(o, {}),
+	warning: /* @__PURE__ */ h(s, {}),
+	danger: /* @__PURE__ */ h(i, {})
+}, de = (e, t) => e === "solid" ? {
+	variant: "inverse",
+	tone: t
+} : t === "accent" || t === "warning" || t === "neutral" ? {
+	variant: "solid",
+	tone: "neutral"
+} : {
+	variant: "solid",
+	tone: t
+}, y = "dhui-banner:", b = /* @__PURE__ */ new Set(), x = /* @__PURE__ */ new Set(), S = (e) => {
+	try {
+		if (window.localStorage.getItem(y + e) === "dismissed") return !0;
+	} catch {}
+	return b.has(e);
+}, C = (e, t) => {
+	if (t) try {
+		window.localStorage.setItem(y + e, "dismissed");
+	} catch {
+		b.add(e);
+	}
+	else {
+		b.delete(e);
+		try {
+			window.localStorage.removeItem(y + e);
+		} catch {}
+	}
+	x.forEach((e) => e());
+}, w = (e) => {
+	x.add(e);
+	let t = (t) => {
+		(t.key === null || t.key.startsWith(y)) && e();
+	};
+	return window.addEventListener("storage", t), () => {
+		x.delete(e), window.removeEventListener("storage", t);
+	};
+}, fe = (e) => m(w, () => e === void 0 ? "visible" : S(e) ? "dismissed" : "visible", () => e === void 0 ? "visible" : "unknown"), T = (e) => {
+	typeof window > "u" || C(e, !1);
+}, E = "a[href], button:not([disabled]), input:not([disabled]):not([type=\"hidden\"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]", D = (e) => {
+	let t = Array.from(document.querySelectorAll(E)).filter((t) => !e.contains(t) && !t.closest("[inert]") && t.getClientRects().length > 0), n = t.find((t) => e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING);
+	if (n) return n;
+	let r = t.filter((t) => e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_PRECEDING);
+	return r[r.length - 1] ?? null;
+}, O = (e) => typeof e == "string" || typeof e == "number" ? String(e) : void 0, k = ({ tone: i = "primary", variant: a = "solid", size: o = "md", icon: s, title: m, children: y, actions: b, dismissible: x = !1, dismissLabel: S, open: w, defaultOpen: T = !0, onOpenChange: E, persistKey: k, position: A = "static", align: pe = "start", contained: j = !1, live: M = "off", liveMessage: me, className: he, ref: N, onAnimationEnd: ge, ...P }) => {
+	let F = t(), I = S ?? F.banner.dismiss, L = d(), R = f(null), [_e, ve] = e({
+		value: w,
+		defaultValue: T,
+		onChange: E
+	}), ye = w !== void 0, be = fe(k), z = _e && be === "visible", [B, V] = p(z), [H, U] = p("idle");
+	z && !B ? (V(!0), U("entering")) : z && H === "closing" ? U("idle") : !z && B && H !== "closing" && U("closing");
+	let W = f(H);
+	W.current = H;
+	let G = l(() => {
+		W.current === "closing" && V(!1), U("idle");
+	}, []);
+	u(() => {
+		if (H === "idle") return;
+		let e = window.setTimeout(G, 600);
+		return () => window.clearTimeout(e);
+	}, [H, G]);
+	let xe = (e) => {
+		ge?.(e), e.target === e.currentTarget && G();
+	}, Se = () => {
+		let e = R.current;
+		e && e.contains(document.activeElement) && D(e)?.focus(), k !== void 0 && C(k, !0), k !== void 0 && !ye ? E?.(!1) : ve(!1);
+	}, K = A === "sticky";
+	u(() => {
+		let e = R.current;
+		if (!K || !B || !e) return;
+		let t = document.documentElement, n = () => t.style.setProperty("--banner-height", `${e.getBoundingClientRect().height}px`);
+		n();
+		let r = typeof ResizeObserver > "u" ? null : new ResizeObserver(n);
+		return r?.observe(e), () => {
+			r?.disconnect(), t.style.removeProperty("--banner-height");
+		};
+	}, [K, B]);
+	let q = me ?? [O(m), O(y)].filter(Boolean).join(". "), [Ce, J] = p("");
+	u(() => {
+		if (J(""), M === "off" || !z || !q) return;
+		let e = window.setTimeout(() => J(q), 150);
+		return () => window.clearTimeout(e);
+	}, [
+		M,
+		z,
+		q
+	]);
+	let we = l((e) => {
+		R.current = e, n(N, e);
+	}, [N]);
+	if (!B) return null;
+	let Y = m != null && m !== "", X = s === void 0 ? i in v ? v[i] : null : s, Z = de(a, i), Q = j === !0 ? "xl" : j === !1 ? void 0 : j, $ = /* @__PURE__ */ g("div", {
+		className: r(c.inner, Q === void 0 && c.gutter, x && c.dismissible),
+		children: [/* @__PURE__ */ g("div", {
+			className: c.main,
+			children: [/* @__PURE__ */ g("div", {
+				className: c.content,
+				children: [X != null && /* @__PURE__ */ h("span", {
+					className: c.icon,
+					"aria-hidden": "true",
+					children: X
+				}), /* @__PURE__ */ g("div", {
+					className: c.text,
+					children: [Y && /* @__PURE__ */ h("p", {
+						id: L,
+						className: c.title,
+						children: m
+					}), y != null && /* @__PURE__ */ h("div", {
+						className: c.message,
+						children: y
+					})]
+				})]
+			}), b != null && /* @__PURE__ */ h(te, {
+				className: c.actions,
+				size: _[o],
+				variant: Z.variant,
+				tone: Z.tone,
+				children: b
+			})]
+		}), x && /* @__PURE__ */ h(ne, {
+			className: c.dismiss,
+			"aria-label": I,
+			size: _[o],
+			variant: a === "solid" ? "soft" : "ghost",
+			tone: "neutral",
+			onClick: Se,
+			children: /* @__PURE__ */ h(re, {})
+		})]
+	});
+	return /* @__PURE__ */ g("section", {
+		"aria-labelledby": P["aria-label"] === void 0 && Y ? L : void 0,
+		"aria-label": P["aria-labelledby"] === void 0 && !Y ? F.banner.region : void 0,
+		...P,
+		ref: we,
+		inert: H === "closing" || void 0,
+		"data-state": H === "closing" ? "closed" : "open",
+		className: r(c.root, ae[i], oe[a], se[o], ce[pe], le[A], H === "entering" && c.entering, H === "closing" && c.closing, he),
+		onAnimationEnd: xe,
+		children: [/* @__PURE__ */ h("div", {
+			className: c.clip,
+			children: Q === void 0 ? $ : /* @__PURE__ */ h(ie, {
+				size: Q,
+				gutter: ue[o],
+				children: $
+			})
+		}), M !== "off" && /* @__PURE__ */ h(ee, {
+			role: M === "assertive" ? "alert" : "status",
+			"aria-live": M,
+			"aria-atomic": "true",
+			children: Ce
+		})]
+	});
+};
+//#endregion
+export { k as Banner, T as resetBannerDismissal };

package/dist/components/feedback/Banner/Banner.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_1lqjn_29`,t=`_neutral_1lqjn_71`,n=`_primary_1lqjn_85`,r=`_accent_1lqjn_99`,i=`_success_1lqjn_113`,a=`_warning_1lqjn_127`,o=`_danger_1lqjn_141`,s=`_info_1lqjn_155`,c=`_solid_1lqjn_173`,l=`_soft_1lqjn_187`,u=`_sm_1lqjn_205`,d=`_md_1lqjn_221`,f=`_lg_1lqjn_237`,p=`_sticky_1lqjn_267`,m=`_clip_1lqjn_283`,h=`_inner_1lqjn_291`,g=`_gutter_1lqjn_307`,_=`_main_1lqjn_315`,v=`_content_1lqjn_333`,y=`_icon_1lqjn_349`,b=`_text_1lqjn_379`,x=`_title_1lqjn_397`,S=`_message_1lqjn_413`,C=`_actions_1lqjn_429`,w=`_dismiss_1lqjn_437`,T=`_alignStart_1lqjn_459`,E=`_alignCenter_1lqjn_467`,D=`_dismissible_1lqjn_497`,O=`_entering_1lqjn_507`,k=`_closing_1lqjn_509`,A={root:e,neutral:t,primary:n,accent:r,success:i,warning:a,danger:o,info:s,solid:c,soft:l,sm:u,md:d,lg:f,static:`_static_1lqjn_259`,sticky:p,clip:m,inner:h,gutter:g,main:_,content:v,icon:y,text:b,title:x,message:S,actions:C,dismiss:w,alignStart:T,alignCenter:E,dismissible:D,entering:O,closing:k,"banner-expand":`_banner-expand_1lqjn_1`,"banner-collapse":`_banner-collapse_1lqjn_1`,"banner-slide-in":`_banner-slide-in_1lqjn_1`,"banner-slide-out":`_banner-slide-out_1lqjn_1`};exports.accent=r,exports.actions=C,exports.alignCenter=E,exports.alignStart=T,exports.clip=m,exports.closing=k,exports.content=v,exports.danger=o,exports.default=A,exports.dismiss=w,exports.dismissible=D,exports.entering=O,exports.gutter=g,exports.icon=y,exports.info=s,exports.inner=h,exports.lg=f,exports.main=_,exports.md=d,exports.message=S,exports.neutral=t,exports.primary=n,exports.root=e,exports.sm=u,exports.soft=l,exports.solid=c,exports.sticky=p,exports.success=i,exports.text=b,exports.title=x,exports.warning=a;

package/dist/components/feedback/Banner/Banner.module.css.mjs

@@ -0,0 +1,40 @@
+//#region src/components/feedback/Banner/Banner.module.css
+var e = "_root_1lqjn_29", t = "_neutral_1lqjn_71", n = "_primary_1lqjn_85", r = "_accent_1lqjn_99", i = "_success_1lqjn_113", a = "_warning_1lqjn_127", o = "_danger_1lqjn_141", s = "_info_1lqjn_155", c = "_solid_1lqjn_173", l = "_soft_1lqjn_187", u = "_sm_1lqjn_205", d = "_md_1lqjn_221", f = "_lg_1lqjn_237", p = "_sticky_1lqjn_267", m = "_clip_1lqjn_283", h = "_inner_1lqjn_291", g = "_gutter_1lqjn_307", _ = "_main_1lqjn_315", v = "_content_1lqjn_333", y = "_icon_1lqjn_349", b = "_text_1lqjn_379", x = "_title_1lqjn_397", S = "_message_1lqjn_413", C = "_actions_1lqjn_429", w = "_dismiss_1lqjn_437", T = "_alignStart_1lqjn_459", E = "_alignCenter_1lqjn_467", D = "_dismissible_1lqjn_497", O = "_entering_1lqjn_507", k = "_closing_1lqjn_509", A = {
+	root: e,
+	neutral: t,
+	primary: n,
+	accent: r,
+	success: i,
+	warning: a,
+	danger: o,
+	info: s,
+	solid: c,
+	soft: l,
+	sm: u,
+	md: d,
+	lg: f,
+	static: "_static_1lqjn_259",
+	sticky: p,
+	clip: m,
+	inner: h,
+	gutter: g,
+	main: _,
+	content: v,
+	icon: y,
+	text: b,
+	title: x,
+	message: S,
+	actions: C,
+	dismiss: w,
+	alignStart: T,
+	alignCenter: E,
+	dismissible: D,
+	entering: O,
+	closing: k,
+	"banner-expand": "_banner-expand_1lqjn_1",
+	"banner-collapse": "_banner-collapse_1lqjn_1",
+	"banner-slide-in": "_banner-slide-in_1lqjn_1",
+	"banner-slide-out": "_banner-slide-out_1lqjn_1"
+};
+//#endregion
+export { r as accent, C as actions, E as alignCenter, T as alignStart, m as clip, k as closing, v as content, o as danger, A as default, w as dismiss, D as dismissible, O as entering, g as gutter, y as icon, s as info, h as inner, f as lg, _ as main, d as md, S as message, t as neutral, n as primary, e as root, u as sm, l as soft, c as solid, p as sticky, i as success, b as text, x as title, a as warning };

package/dist/components/feedback/Banner/index.d.ts

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