@tedi-design-system/react 18.0.0-rc.1 → 18.0.0-rc.10

package/src/tedi/components/overlays/modal/modal-body/modal-body.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export interface ModalBodyProps {
+    /**
+     * Body content.
+     */
+    children: ReactNode;
+    /**
+     * Disable the body's internal scroll. Use when the modal is wrapped in
+     * `<Modal.Content scrollBehavior="page">` and overflow is handled by the page.
+     * @default false
+     */
+    noScroll?: boolean;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+export declare const ModalBody: {
+    ({ children, noScroll, className }: ModalBodyProps): JSX.Element;
+    displayName: string;
+};
+export default ModalBody;

package/src/tedi/components/overlays/modal/modal-body/modal-body.es.js

@@ -0,0 +1,21 @@
+import { jsx as l } from "react/jsx-runtime";
+import m from "../../../../../../external/classnames/index.es.js";
+import o from "../modal.module.scss.es.js";
+const e = ({ children: a, noScroll: d = !1, className: s }) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: m(
+      o["tedi-modal__body"],
+      {
+        [o["tedi-modal__body--scroll-page"]]: d
+      },
+      s
+    ),
+    children: a
+  }
+);
+e.displayName = "Modal.Body";
+export {
+  e as ModalBody,
+  e as default
+};

package/src/tedi/components/overlays/modal/modal-closer/modal-closer.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),r=require("../modal-context.cjs.js"),e=({children:o})=>{const{onOpenChange:n}=r.useModalContext();return a.cloneElement(o,{onClick:s=>{var l,t;(t=(l=o.props).onClick)==null||t.call(l,s),n(!1)}})};e.displayName="Modal.Closer";exports.ModalCloser=e;exports.default=e;

package/src/tedi/components/overlays/modal/modal-closer/modal-closer.d.ts

@@ -0,0 +1,15 @@
+import { MouseEvent, ReactElement } from 'react';
+export interface ModalCloserProps {
+    /**
+     * Element that closes the modal when clicked. The element is cloned and receives
+     * a wrapped `onClick` that calls the original handler first, then closes the modal.
+     */
+    children: ReactElement<{
+        onClick?: (event: MouseEvent<HTMLElement>) => void;
+    }>;
+}
+export declare const ModalCloser: {
+    ({ children }: ModalCloserProps): JSX.Element;
+    displayName: string;
+};
+export default ModalCloser;

package/src/tedi/components/overlays/modal/modal-closer/modal-closer.es.js

@@ -0,0 +1,16 @@
+import { cloneElement as a } from "react";
+import { useModalContext as r } from "../modal-context.es.js";
+const s = ({ children: o }) => {
+  const { onOpenChange: n } = r();
+  return a(o, {
+    onClick: (t) => {
+      var e, l;
+      (l = (e = o.props).onClick) == null || l.call(e, t), n(!1);
+    }
+  });
+};
+s.displayName = "Modal.Closer";
+export {
+  s as ModalCloser,
+  s as default
+};

package/src/tedi/components/overlays/modal/modal-content/modal-content.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),d=require("../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),f=require("../../../../../../external/classnames/index.cjs.js"),e=require("../modal.module.scss.cjs.js"),N=require("../modal-context.cjs.js"),O=require("../../../../helpers/hooks/use-breakpoint-props.cjs.js"),W=require("../../../../providers/label-provider/use-labels.cjs.js"),H=["xs","sm","md","lg","xl"],T=l=>H.includes(l),r=l=>{const{getCurrentBreakpointProps:m}=O.useBreakpointProps(l.defaultServerBreakpoint),{width:t="md",maxWidth:s,position:_="center",fullscreen:o=!1}=m(l),{children:v,size:y="default",scrollBehavior:b="content",trapFocus:n=!0,returnFocus:g=!0,showOverlay:x=!0,lockScroll:h=!0,visuallyHiddenDismiss:C=!1,initialFocus:P,className:F}=l,{getLabel:p}=W.useLabels(),{open:q,floating:B,getFloatingProps:M,context:S,labelId:j,descriptionId:k}=N.useModalContext();if(!q)return null;const c=l["aria-labelledby"]??(j||void 0),L=l["aria-describedby"]??(k||void 0),w=c?void 0:l["aria-label"],u=T(t),i={};u||(i.width=t),s&&(i.maxWidth=s);const D=o===!0?e.default["tedi-modal__container--fullscreen"]:o==="edge"?e.default["tedi-modal__container--fullscreen-edge"]:void 0,I=o==="edge"?e.default["tedi-modal__overlay--fullscreen-edge"]:void 0;return a.jsx(d.FloatingPortal,{children:a.jsx(d.FloatingOverlay,{lockScroll:h,className:f.default(e.default["tedi-modal__overlay"],e.default[`tedi-modal__overlay--position-${_}`],I,{[e.default["tedi-modal__overlay--no-overlay"]]:!x,[e.default["tedi-modal__overlay--scroll-page"]]:b==="page"}),children:a.jsx(d.FloatingFocusManager,{context:S,modal:n,returnFocus:g,initialFocus:P,visuallyHiddenDismiss:C?p("modal.close"):void 0,children:a.jsx("div",{...M({ref:B,"aria-labelledby":c,"aria-describedby":L,"aria-label":w,"aria-modal":n,style:i,className:f.default(e.default["tedi-modal__container"],u&&e.default[`tedi-modal__container--${t}`],e.default[`tedi-modal--${y}`],D,F)}),children:v})})})})};r.displayName="Modal.Content";exports.ModalContent=r;exports.default=r;

package/src/tedi/components/overlays/modal/modal-content/modal-content.d.ts

@@ -0,0 +1,108 @@
+import { FloatingFocusManager } from '@floating-ui/react';
+import { ComponentProps, ReactNode } from 'react';
+import { BreakpointSupport } from '../../../../helpers';
+export type ModalWidthPreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ModalWidth = ModalWidthPreset | (string & Record<never, never>);
+export type ModalSize = 'default' | 'small';
+export type ModalPosition = 'center' | 'top' | 'right' | 'left' | 'bottom';
+export type ModalScrollBehavior = 'content' | 'page';
+export type ModalFullscreen = boolean | 'edge';
+type ModalContentBreakpointProps = {
+    /**
+     * Modal width — a Figma-aligned preset (`xs`–`xl`) or any CSS length.
+     * Use `maxWidth` when you only need to cap the width instead of set it.
+     * @default md
+     */
+    width?: ModalWidth;
+    /**
+     * Hard cap on width. Lightweight alternative to a custom `width`.
+     * @default calc(100vw - 16px * 2)
+     */
+    maxWidth?: string;
+    /**
+     * Placement on the viewport.
+     * @default center
+     */
+    position?: ModalPosition;
+    /**
+     * Fullscreen behaviour:
+     * - `false` — content-sized modal inside the 16px backdrop padding.
+     * - `true` — modal fills the overlay; 16px backdrop stays visible.
+     * - `'edge'` — edge-to-edge; overlay padding removed, no border/radius.
+     * @default false
+     */
+    fullscreen?: ModalFullscreen;
+};
+export interface ModalContentProps extends BreakpointSupport<ModalContentBreakpointProps> {
+    /**
+     * `<Modal.Header>`, `<Modal.Body>`, `<Modal.Footer>` and any other content.
+     */
+    children: ReactNode;
+    /**
+     * Size density — controls header/body/footer padding.
+     * @default default
+     */
+    size?: ModalSize;
+    /**
+     * Where overflow scrolls. `'content'` keeps the modal frame fixed and scrolls the body;
+     * `'page'` lets the modal grow with content and scrolls the overlay around it.
+     * @default content
+     */
+    scrollBehavior?: ModalScrollBehavior;
+    /**
+     * Trap focus inside the modal while open.
+     * @default true
+     */
+    trapFocus?: boolean;
+    /**
+     * Restore focus to the trigger after closing.
+     * @default true
+     */
+    returnFocus?: boolean;
+    /**
+     * Render the dimmed backdrop. `false` keeps portal + focus management but no overlay.
+     * @default true
+     */
+    showOverlay?: boolean;
+    /**
+     * Lock background scroll while open.
+     * @default true
+     */
+    lockScroll?: boolean;
+    /**
+     * Render visually-hidden dismiss buttons at the start and end of the dialog
+     * so touch screen-readers can escape without an Escape key.
+     * @default false
+     */
+    visuallyHiddenDismiss?: boolean;
+    /**
+     * Override the dialog's labelling element. Only needed when the label lives
+     * outside `<Modal.Header>` — the header wires this automatically.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Override the dialog's describing element. Only needed when the description
+     * lives outside `<Modal.Header>` — the header wires this automatically.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Plain-text accessible name. Use when there's no visible title (icon-only
+     * confirmation, etc.). Ignored when `aria-labelledby` is set.
+     */
+    'aria-label'?: string;
+    /**
+     * Element to focus on open. Tabbable index (`0` = first tabbable, `-1` = dialog
+     * container) or a ref. Override the default to focus a "Cancel" button on
+     * destructive prompts, or the first input on form-heavy modals.
+     */
+    initialFocus?: ComponentProps<typeof FloatingFocusManager>['initialFocus'];
+    /**
+     * Additional class name on the modal container.
+     */
+    className?: string;
+}
+export declare const ModalContent: {
+    (props: ModalContentProps): JSX.Element | null;
+    displayName: string;
+};
+export default ModalContent;

package/src/tedi/components/overlays/modal/modal-content/modal-content.es.js

@@ -0,0 +1,81 @@
+import { jsx as a } from "react/jsx-runtime";
+import { FloatingPortal as M, FloatingOverlay as W, FloatingFocusManager as H } from "../../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import c from "../../../../../../external/classnames/index.es.js";
+import e from "../modal.module.scss.es.js";
+import { useModalContext as O } from "../modal-context.es.js";
+import { useBreakpointProps as $ } from "../../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as E } from "../../../../providers/label-provider/use-labels.es.js";
+const T = ["xs", "sm", "md", "lg", "xl"], j = (l) => T.includes(l), z = (l) => {
+  const { getCurrentBreakpointProps: m } = $(l.defaultServerBreakpoint), {
+    width: o = "md",
+    maxWidth: r,
+    position: u = "center",
+    fullscreen: t = !1
+  } = m(l), {
+    children: f,
+    size: y = "default",
+    scrollBehavior: v = "content",
+    trapFocus: s = !0,
+    returnFocus: _ = !0,
+    showOverlay: b = !0,
+    lockScroll: g = !0,
+    visuallyHiddenDismiss: h = !1,
+    initialFocus: p,
+    className: x
+  } = l, { getLabel: F } = E(), { open: C, floating: P, getFloatingProps: B, context: N, labelId: S, descriptionId: k } = O();
+  if (!C) return null;
+  const d = l["aria-labelledby"] ?? (S || void 0), w = l["aria-describedby"] ?? (k || void 0), D = d ? void 0 : l["aria-label"], n = j(o), i = {};
+  n || (i.width = o), r && (i.maxWidth = r);
+  const I = t === !0 ? e["tedi-modal__container--fullscreen"] : t === "edge" ? e["tedi-modal__container--fullscreen-edge"] : void 0, L = t === "edge" ? e["tedi-modal__overlay--fullscreen-edge"] : void 0;
+  return /* @__PURE__ */ a(M, { children: /* @__PURE__ */ a(
+    W,
+    {
+      lockScroll: g,
+      className: c(
+        e["tedi-modal__overlay"],
+        e[`tedi-modal__overlay--position-${u}`],
+        L,
+        {
+          [e["tedi-modal__overlay--no-overlay"]]: !b,
+          [e["tedi-modal__overlay--scroll-page"]]: v === "page"
+        }
+      ),
+      children: /* @__PURE__ */ a(
+        H,
+        {
+          context: N,
+          modal: s,
+          returnFocus: _,
+          initialFocus: p,
+          visuallyHiddenDismiss: h ? F("modal.close") : void 0,
+          children: /* @__PURE__ */ a(
+            "div",
+            {
+              ...B({
+                ref: P,
+                "aria-labelledby": d,
+                "aria-describedby": w,
+                "aria-label": D,
+                "aria-modal": s,
+                style: i,
+                className: c(
+                  e["tedi-modal__container"],
+                  n && e[`tedi-modal__container--${o}`],
+                  e[`tedi-modal--${y}`],
+                  I,
+                  x
+                )
+              }),
+              children: f
+            }
+          )
+        }
+      )
+    }
+  ) });
+};
+z.displayName = "Modal.Content";
+export {
+  z as ModalContent,
+  z as default
+};

package/src/tedi/components/overlays/modal/modal-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),o=t.createContext(null),n=()=>{const e=t.useContext(o);if(!e)throw new Error("Modal subcomponents must be rendered inside <Modal>.");return e},l=()=>{const{open:e,onOpenChange:r,labelId:s,descriptionId:d}=n();return{open:e,onOpenChange:r,labelId:s,descriptionId:d}};exports.ModalContext=o;exports.useModal=l;exports.useModalContext=n;

package/src/tedi/components/overlays/modal/modal-context.d.ts

@@ -0,0 +1,59 @@
+import { FloatingContext, ReferenceType } from '@floating-ui/react';
+export interface ModalContextValue {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    reference: (node: ReferenceType | null) => void;
+    floating: (node: HTMLElement | null) => void;
+    getReferenceProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    context: FloatingContext<ReferenceType>;
+    labelId: string;
+    descriptionId: string;
+    setHasTitle: (hasTitle: boolean) => void;
+    setHasDescription: (hasDescription: boolean) => void;
+}
+export declare const ModalContext: import('react').Context<ModalContextValue | null>;
+export declare const useModalContext: () => ModalContextValue;
+/**
+ * Public Modal context — the safe subset consumers can read from inside a `<Modal>`.
+ * Use this when you bypass `<Modal.Header>` and render your own title / description
+ * markup, or when you need to close the modal programmatically from deeply nested code.
+ *
+ * The floating-ui plumbing (`reference`, `floating`, `getReferenceProps`, …) is
+ * intentionally hidden — touching it from outside the Modal package leads to subtle
+ * focus/dismissal bugs.
+ *
+ * @example Custom header with manual `aria-labelledby` wiring
+ * ```tsx
+ * function CustomHeader({ title }: { title: string }) {
+ *   const { labelId, onOpenChange } = useModal();
+ *   return (
+ *     <Modal.Header>
+ *       <h2 id={labelId}>{title}</h2>
+ *       <ClosingButton onClick={() => onOpenChange(false)} />
+ *     </Modal.Header>
+ *   );
+ * }
+ * ```
+ *
+ * @example Close the modal from a footer action
+ * ```tsx
+ * function ConfirmButton() {
+ *   const { onOpenChange } = useModal();
+ *   return <Button onClick={() => onOpenChange(false)}>Confirm</Button>;
+ * }
+ * ```
+ *
+ * @throws if called outside a `<Modal>` subtree.
+ */
+export interface UseModalReturn {
+    /** Whether the modal is currently open. */
+    open: boolean;
+    /** Programmatically open or close the modal. Equivalent to clicking the trigger / closer. */
+    onOpenChange: (open: boolean) => void;
+    /** ID assigned to the title element, intended for `aria-labelledby`. Empty when no title is registered. */
+    labelId: string;
+    /** ID assigned to the description element, intended for `aria-describedby`. Empty when no description is registered. */
+    descriptionId: string;
+}
+export declare const useModal: () => UseModalReturn;

package/src/tedi/components/overlays/modal/modal-context.es.js

@@ -0,0 +1,15 @@
+import { createContext as r, useContext as s } from "react";
+const d = r(null), c = () => {
+  const e = s(d);
+  if (!e)
+    throw new Error("Modal subcomponents must be rendered inside <Modal>.");
+  return e;
+}, a = () => {
+  const { open: e, onOpenChange: o, labelId: t, descriptionId: n } = c();
+  return { open: e, onOpenChange: o, labelId: t, descriptionId: n };
+};
+export {
+  d as ModalContext,
+  a as useModal,
+  c as useModalContext
+};

package/src/tedi/components/overlays/modal/modal-footer/modal-footer.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),a=require("../../../../../../external/classnames/index.cjs.js"),e=require("../modal.module.scss.cjs.js"),d=({children:i,left:t,className:s})=>{const l=!!t;return o.jsxs("div",{className:a.default(e.default["tedi-modal__footer"],e.default[l?"tedi-modal__footer--split":"tedi-modal__footer--end"],s),children:[l&&o.jsx("div",{className:e.default["tedi-modal__footer-side"],children:t}),o.jsx("div",{className:a.default(e.default["tedi-modal__footer-side"],e.default["tedi-modal__footer-side--right"]),children:i})]})};d.displayName="Modal.Footer";exports.ModalFooter=d;exports.default=d;

package/src/tedi/components/overlays/modal/modal-footer/modal-footer.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export interface ModalFooterProps {
+    /**
+     * Content placed on the right side of the footer (the primary actions).
+     * If `left` is omitted, the footer simply right-aligns these children.
+     */
+    children?: ReactNode;
+    /**
+     * Content placed on the left side of the footer. When set, the footer splits into
+     * `left` + `right` halves — matches Figma's "Buttons left and right" variant.
+     */
+    left?: ReactNode;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+export declare const ModalFooter: {
+    ({ children, left, className }: ModalFooterProps): JSX.Element;
+    displayName: string;
+};
+export default ModalFooter;

package/src/tedi/components/overlays/modal/modal-footer/modal-footer.es.js

@@ -0,0 +1,25 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import s from "../../../../../../external/classnames/index.es.js";
+import o from "../modal.module.scss.es.js";
+const l = ({ children: i, left: e, className: a }) => {
+  const d = !!e;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: s(
+        o["tedi-modal__footer"],
+        o[d ? "tedi-modal__footer--split" : "tedi-modal__footer--end"],
+        a
+      ),
+      children: [
+        d && /* @__PURE__ */ t("div", { className: o["tedi-modal__footer-side"], children: e }),
+        /* @__PURE__ */ t("div", { className: s(o["tedi-modal__footer-side"], o["tedi-modal__footer-side--right"]), children: i })
+      ]
+    }
+  );
+};
+l.displayName = "Modal.Footer";
+export {
+  l as ModalFooter,
+  l as default
+};

package/src/tedi/components/overlays/modal/modal-header/modal-header.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),g=require("../../../../../../external/classnames/index.cjs.js"),r=require("react"),j=require("../../../base/typography/heading/heading.cjs.js"),p=require("../../../base/typography/text/text.cjs.js"),q=require("../../../buttons/closing-button/closing-button.cjs.js"),a=require("../modal.module.scss.cjs.js"),B=require("../modal-context.cjs.js"),n=i=>{const{title:s,description:o,closeButton:c=!0,closeButtonProps:u,children:t,className:m}=i,{onOpenChange:f,labelId:h,descriptionId:x,setHasTitle:l,setHasDescription:d}=B.useModalContext();r.useEffect(()=>(l(!!s||!!t),()=>l(!1)),[s,t,l]),r.useEffect(()=>(d(!!o||!!t),()=>d(!1)),[o,t,d]);const _=()=>f(!1);return e.jsx("div",{className:g.default(a.default["tedi-modal__header"],m),children:t??e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:a.default["tedi-modal__header-row"],children:[s&&e.jsx(j.Heading,{element:"h3",modifiers:"h3",id:h,className:a.default["tedi-modal__header-title"],children:s}),c&&e.jsx(q.ClosingButton,{size:"default",...u,onClick:_})]}),o&&e.jsx(p.Text,{id:x,className:a.default["tedi-modal__header-description"],children:o})]})})};n.displayName="Modal.Header";exports.ModalHeader=n;exports.default=n;

package/src/tedi/components/overlays/modal/modal-header/modal-header.d.ts

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+import { ClosingButtonProps } from '../../../buttons/closing-button/closing-button';
+export interface ModalHeaderProps {
+    /**
+     * Title text. Rendered as an `<h3>` and automatically registered as the modal's
+     * `aria-labelledby`. Pass `children` instead for full control of the title markup.
+     */
+    title?: ReactNode;
+    /**
+     * Description text below the title. Automatically registered as the modal's
+     * `aria-describedby`.
+     */
+    description?: ReactNode;
+    /**
+     * Show the closing button.
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     * Forwarded to the closing button — use to override size, title, etc.
+     */
+    closeButtonProps?: Omit<ClosingButtonProps, 'onClick'>;
+    /**
+     * Replaces the default title/description layout entirely. When set, `title` and
+     * `description` are ignored.
+     *
+     * Accessibility note: the automatic `aria-labelledby` / `aria-describedby` wiring
+     * only fires for the `title` / `description` props. With `children` you need to
+     * connect them yourself — call `useModal()` to read `labelId` / `descriptionId`
+     * and put them on the right elements:
+     *
+     * ```tsx
+     * function CustomHeader() {
+     *   const { labelId, descriptionId, onOpenChange } = useModal();
+     *   return (
+     *     <Modal.Header>
+     *       <h2 id={labelId}>Custom title</h2>
+     *       <p id={descriptionId}>Supporting text</p>
+     *       <ClosingButton onClick={() => onOpenChange(false)} />
+     *     </Modal.Header>
+     *   );
+     * }
+     * ```
+     *
+     * Alternatively, set `aria-labelledby` / `aria-describedby` explicitly on
+     * `<Modal.Content>` pointing at IDs you control.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+export declare const ModalHeader: {
+    (props: ModalHeaderProps): JSX.Element;
+    displayName: string;
+};
+export default ModalHeader;

package/src/tedi/components/overlays/modal/modal-header/modal-header.es.js

@@ -0,0 +1,25 @@
+import { jsx as a, jsxs as i, Fragment as B } from "react/jsx-runtime";
+import N from "../../../../../../external/classnames/index.es.js";
+import { useEffect as d } from "react";
+import { Heading as x } from "../../../base/typography/heading/heading.es.js";
+import { Text as C } from "../../../base/typography/text/text.es.js";
+import { ClosingButton as H } from "../../../buttons/closing-button/closing-button.es.js";
+import r from "../modal.module.scss.es.js";
+import { useModalContext as g } from "../modal-context.es.js";
+const M = (n) => {
+  const { title: o, description: t, closeButton: m = !0, closeButtonProps: c, children: e, className: f } = n, { onOpenChange: p, labelId: h, descriptionId: u, setHasTitle: s, setHasDescription: l } = g();
+  d(() => (s(!!o || !!e), () => s(!1)), [o, e, s]), d(() => (l(!!t || !!e), () => l(!1)), [t, e, l]);
+  const _ = () => p(!1);
+  return /* @__PURE__ */ a("div", { className: N(r["tedi-modal__header"], f), children: e ?? /* @__PURE__ */ i(B, { children: [
+    /* @__PURE__ */ i("div", { className: r["tedi-modal__header-row"], children: [
+      o && /* @__PURE__ */ a(x, { element: "h3", modifiers: "h3", id: h, className: r["tedi-modal__header-title"], children: o }),
+      m && /* @__PURE__ */ a(H, { size: "default", ...c, onClick: _ })
+    ] }),
+    t && /* @__PURE__ */ a(C, { id: u, className: r["tedi-modal__header-description"], children: t })
+  ] }) });
+};
+M.displayName = "Modal.Header";
+export {
+  M as ModalHeader,
+  M as default
+};

package/src/tedi/components/overlays/modal/modal-trigger/modal-trigger.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),c=require("../modal-context.cjs.js"),u=(...e)=>t=>{for(const r of e)r&&(typeof r=="function"?r(t):r.current=t)},o=({children:e})=>{const{getReferenceProps:t,reference:r}=c.useModalContext(),s=e.ref??e.props.ref,n=u(r,s);return f.cloneElement(e,t({ref:n,...e.props}))};o.displayName="Modal.Trigger";exports.ModalTrigger=o;exports.default=o;

package/src/tedi/components/overlays/modal/modal-trigger/modal-trigger.d.ts

@@ -0,0 +1,13 @@
+import { JSX } from 'react';
+export interface ModalTriggerProps {
+    /**
+     * Element that opens the modal when clicked. The element is cloned and receives
+     * the `onClick` / `aria-*` props produced by floating-ui.
+     */
+    children: JSX.Element;
+}
+export declare const ModalTrigger: {
+    ({ children }: ModalTriggerProps): JSX.Element;
+    displayName: string;
+};
+export default ModalTrigger;

package/src/tedi/components/overlays/modal/modal-trigger/modal-trigger.es.js

@@ -0,0 +1,14 @@
+import { cloneElement as s } from "react";
+import { useModalContext as n } from "../modal-context.es.js";
+const p = (...e) => (r) => {
+  for (const o of e)
+    o && (typeof o == "function" ? o(r) : o.current = r);
+}, c = ({ children: e }) => {
+  const { getReferenceProps: r, reference: o } = n(), t = e.ref ?? e.props.ref, f = p(o, t);
+  return s(e, r({ ref: f, ...e.props }));
+};
+c.displayName = "Modal.Trigger";
+export {
+  c as ModalTrigger,
+  c as default
+};

package/src/tedi/components/overlays/modal/modal.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("react/jsx-runtime"),n=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),o=require("react"),k=require("./modal-body/modal-body.cjs.js"),v=require("./modal-closer/modal-closer.cjs.js"),x=require("./modal-content/modal-content.cjs.js"),B=require("./modal-context.cjs.js"),j=require("./modal-footer/modal-footer.cjs.js"),D=require("./modal-header/modal-header.cjs.js"),_=require("./modal-trigger/modal-trigger.cjs.js"),e=b=>{const{children:I,defaultOpen:h=!1,open:c,onToggle:s,closeOnBackdropClick:d=!0,closeOnEscape:u=!0,role:y="dialog"}=b,[F,R]=o.useState(h),a=typeof c<"u",l=a?c:F,i=o.useCallback(q=>{a||R(q),s==null||s(q)},[a,s]),{refs:r,context:t}=n.useFloating({open:l,onOpenChange:i}),{getReferenceProps:p,getFloatingProps:g}=n.useInteractions([n.useClick(t),n.useRole(t,{role:y}),n.useDismiss(t,{enabled:d||u,escapeKey:u,outsidePress:d})]),f=o.useId(),C=`${f}-label`,M=`${f}-description`,[m,H]=o.useState(!1),[O,P]=o.useState(!1),S=o.useMemo(()=>({open:l,onOpenChange:i,reference:r.setReference,floating:r.setFloating,getReferenceProps:p,getFloatingProps:g,context:t,labelId:m?C:"",descriptionId:O?M:"",setHasTitle:H,setHasDescription:P}),[l,i,r.setReference,r.setFloating,p,g,t,m,O,C,M]);return T.jsx(B.ModalContext.Provider,{value:S,children:I})};e.Trigger=_.ModalTrigger;e.Content=x.ModalContent;e.Header=D.ModalHeader;e.Body=k.ModalBody;e.Footer=j.ModalFooter;e.Closer=v.ModalCloser;e.displayName="Modal";exports.Modal=e;exports.default=e;

package/src/tedi/components/overlays/modal/modal.d.ts

@@ -0,0 +1,68 @@
+import { ReactNode } from 'react';
+export type ModalRole = 'dialog' | 'alertdialog';
+export interface ModalProps {
+    /**
+     * `<Modal.Trigger>` and `<Modal.Content>` children.
+     */
+    children: ReactNode;
+    /**
+     * Open state for uncontrolled mode. Use `open` + `onToggle` for controlled mode.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Open state for controlled mode. Pair with `onToggle`.
+     */
+    open?: boolean;
+    /**
+     * Called whenever the modal opens or closes. Pair with `open` for controlled mode.
+     */
+    onToggle?: (open: boolean) => void;
+    /**
+     * Close the modal when the backdrop is clicked.
+     * @default true
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Close the modal when the Escape key is pressed.
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * ARIA role for the dialog. Use `'alertdialog'` for destructive confirmations
+     * (delete, cancel subscription) — screen readers announce alertdialogs with higher
+     * urgency and require an explicit user action to dismiss. Affects both the trigger's
+     * `aria-haspopup` and the floating element's `role`.
+     * @default dialog
+     */
+    role?: ModalRole;
+}
+export declare const Modal: {
+    (props: ModalProps): JSX.Element;
+    Trigger: {
+        ({ children }: import('./modal-trigger/modal-trigger').ModalTriggerProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: import('./modal-content/modal-content').ModalContentProps): JSX.Element | null;
+        displayName: string;
+    };
+    Header: {
+        (props: import('./modal-header/modal-header').ModalHeaderProps): JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, noScroll, className }: import('./modal-body/modal-body').ModalBodyProps): JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children, left, className }: import('./modal-footer/modal-footer').ModalFooterProps): JSX.Element;
+        displayName: string;
+    };
+    Closer: {
+        ({ children }: import('./modal-closer/modal-closer').ModalCloserProps): JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
+};
+export default Modal;