@tedi-design-system/react 18.0.0-rc.3 → 18.0.0-rc.30

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

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),d=require("../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),u=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),f=l=>{const{getCurrentBreakpointProps:m}=O.useBreakpointProps(l.defaultServerBreakpoint),{width:t="md",maxWidth:r,position:y="center",fullscreen:o=!1}=m(l),{children:v,size:_="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:S,context:j,labelId:M,descriptionId:k}=N.useModalContext();if(!q)return null;const s=l["aria-labelledby"]??(M||void 0),L=l["aria-describedby"]??(k||void 0),w=s?void 0:l["aria-label"],c=T(t),i={};c||(i.width=t),r&&(i.maxWidth=r);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:u.default(e.default["tedi-modal__overlay"],e.default[`tedi-modal__overlay--position-${y}`],I,{[e.default["tedi-modal__overlay--no-overlay"]]:!x,[e.default["tedi-modal__overlay--scroll-page"]]:b==="page"}),children:a.jsx(d.FloatingFocusManager,{context:j,modal:n,returnFocus:g,initialFocus:P,visuallyHiddenDismiss:C?p("modal.close"):void 0,children:a.jsx("div",{...S({ref:B,"aria-labelledby":s,"aria-describedby":L,"aria-label":w,"aria-modal":n,style:i,className:u.default(e.default["tedi-modal__container"],c&&e.default[`tedi-modal__container--${t}`],e.default[`tedi-modal--${_}`],D,F)}),children:v})})})})};f.displayName="Modal.Content";exports.ModalContent=f;

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,80 @@
+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 n = l["aria-labelledby"] ?? (S || void 0), w = l["aria-describedby"] ?? (k || void 0), D = n ? void 0 : l["aria-label"], d = j(o), i = {};
+  d || (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": n,
+                "aria-describedby": w,
+                "aria-label": D,
+                "aria-modal": s,
+                style: i,
+                className: c(
+                  e["tedi-modal__container"],
+                  d && e[`tedi-modal__container--${o}`],
+                  e[`tedi-modal--${y}`],
+                  I,
+                  x
+                )
+              }),
+              children: f
+            }
+          )
+        }
+      )
+    }
+  ) });
+};
+z.displayName = "Modal.Content";
+export {
+  z as ModalContent
+};

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.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("../../../../../../external/classnames/index.cjs.js"),e=require("../modal.module.scss.cjs.js"),a=({children:i,left:d,className:r})=>{const t=!!d;return o.jsxs("div",{className:l.default(e.default["tedi-modal__footer"],e.default[t?"tedi-modal__footer--split":"tedi-modal__footer--end"],r),children:[t&&o.jsx("div",{className:e.default["tedi-modal__footer-side"],children:d}),o.jsx("div",{className:l.default(e.default["tedi-modal__footer-side"],e.default["tedi-modal__footer-side--right"]),children:i})]})};a.displayName="Modal.Footer";exports.ModalFooter=a;

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("../../../../../../external/classnames/index.cjs.js"),n=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"),r=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();n.useEffect(()=>(l(!!s||!!t),()=>l(!1)),[s,t,l]),n.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})]})})};r.displayName="Modal.Header";exports.ModalHeader=r;

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,24 @@
+import { jsx as r, 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 s 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: p } = n, { onOpenChange: f, labelId: h, descriptionId: u, setHasTitle: a, setHasDescription: l } = g();
+  d(() => (a(!!o || !!e), () => a(!1)), [o, e, a]), d(() => (l(!!t || !!e), () => l(!1)), [t, e, l]);
+  const _ = () => f(!1);
+  return /* @__PURE__ */ r("div", { className: N(s["tedi-modal__header"], p), children: e ?? /* @__PURE__ */ i(B, { children: [
+    /* @__PURE__ */ i("div", { className: s["tedi-modal__header-row"], children: [
+      o && /* @__PURE__ */ r(x, { element: "h3", modifiers: "h3", id: h, className: s["tedi-modal__header-title"], children: o }),
+      m && /* @__PURE__ */ r(H, { size: "default", ...c, onClick: _ })
+    ] }),
+    t && /* @__PURE__ */ r(C, { id: u, className: s["tedi-modal__header-description"], children: t })
+  ] }) });
+};
+M.displayName = "Modal.Header";
+export {
+  M as ModalHeader
+};

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

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

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,13 @@
+import { cloneElement as n } from "react";
+import { useModalContext as s } 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 } = s(), t = e.ref ?? e.props.ref, f = p(o, t);
+  return n(e, r({ ref: f, ...e.props }));
+};
+c.displayName = "Modal.Trigger";
+export {
+  c as ModalTrigger
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,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"),x=require("./modal-closer/modal-closer.cjs.js"),B=require("./modal-content/modal-content.cjs.js"),j=require("./modal-context.cjs.js"),v=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:y,defaultOpen:I=!1,open:c,onToggle:s,closeOnBackdropClick:d=!0,closeOnEscape:u=!0,role:h="dialog"}=b,[F,R]=o.useState(I),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:h}),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(j.ModalContext.Provider,{value:S,children:y})};e.Trigger=$.ModalTrigger;e.Content=B.ModalContent;e.Header=D.ModalHeader;e.Body=k.ModalBody;e.Footer=v.ModalFooter;e.Closer=x.ModalCloser;e.displayName="Modal";exports.Modal=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('.').ModalTriggerProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: import('.').ModalContentProps): JSX.Element | null;
+        displayName: string;
+    };
+    Header: {
+        (props: import('.').ModalHeaderProps): JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, noScroll, className }: import('.').ModalBodyProps): JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children, left, className }: import('.').ModalFooterProps): JSX.Element;
+        displayName: string;
+    };
+    Closer: {
+        ({ children }: import('.').ModalCloserProps): JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
+};
+export default Modal;

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-modal__overlay":"tedi-modal__overlay-4ba27f12","tedi-modal-fade-in":"tedi-modal-fade-in-03b6ba7e","tedi-modal__overlay--no-overlay":"tedi-modal__overlay--no-overlay-4c0b9b0f","tedi-modal__container":"tedi-modal__container-f7f79f11","tedi-modal__overlay--position-center":"tedi-modal__overlay--position-center-db370559","tedi-modal__overlay--position-top":"tedi-modal__overlay--position-top-469a07ac","tedi-modal__overlay--position-bottom":"tedi-modal__overlay--position-bottom-f6c156b6","tedi-modal__overlay--position-right":"tedi-modal__overlay--position-right-57cb8cb7","tedi-modal__overlay--position-left":"tedi-modal__overlay--position-left-63802043","tedi-modal-slide-in-right":"tedi-modal-slide-in-right-52e8333d","tedi-modal-slide-in-left":"tedi-modal-slide-in-left-c5629074","tedi-modal__overlay--scroll-page":"tedi-modal__overlay--scroll-page-e6c42c19","tedi-modal__overlay--fullscreen-edge":"tedi-modal__overlay--fullscreen-edge-5b985472","tedi-modal__container--xs":"tedi-modal__container--xs-93a56d58","tedi-modal__container--sm":"tedi-modal__container--sm-74214c83","tedi-modal__container--md":"tedi-modal__container--md-3ba6debd","tedi-modal__container--lg":"tedi-modal__container--lg-4cecddbc","tedi-modal__container--xl":"tedi-modal__container--xl-4b756481","tedi-modal__container--fullscreen":"tedi-modal__container--fullscreen-5270a652","tedi-modal__container--fullscreen-edge":"tedi-modal__container--fullscreen-edge-875e4586","tedi-modal__header":"tedi-modal__header-991e3b5b","tedi-modal__header-row":"tedi-modal__header-row-344e6c2b","tedi-modal__header-title":"tedi-modal__header-title-844d9ea1","tedi-modal__header-description":"tedi-modal__header-description-32d28ecd","tedi-modal__body":"tedi-modal__body-ec279ff5","tedi-modal__body--scroll-page":"tedi-modal__body--scroll-page-4a4020dd","tedi-modal__footer":"tedi-modal__footer-29a01427","tedi-modal__footer--split":"tedi-modal__footer--split-6dd6e683","tedi-modal__footer--end":"tedi-modal__footer--end-fc399353","tedi-modal__footer-side":"tedi-modal__footer-side-928c643e","tedi-modal__footer-side--right":"tedi-modal__footer-side--right-e7945eee","tedi-modal--small":"tedi-modal--small-80da804f"};exports.default=e;