@tedi-design-system/react 18.0.0-rc.2 → 18.0.0-rc.20

package/src/tedi/components/overlays/dropdown/dropdown-item/dropdown-item.d.ts

@@ -63,5 +63,12 @@ export type DropdownItemProps = {
      */
     isParent?: boolean;
     className?: string;
-};
-export declare const DropdownItem: ({ children, onClick, disabled, active, index, indent, asChild, closeOnSelect, isParent, className, }: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+    /**
+     * ARIA role for the item. Defaults to `menuitem`; override to convey selection
+     * semantics (e.g. `menuitemcheckbox` / `menuitemradio` / `option`) and pair it
+     * with the matching `aria-checked` / `aria-selected`.
+     * @default menuitem
+     */
+    role?: React.AriaRole;
+} & React.AriaAttributes;
+export declare const DropdownItem: ({ children, onClick, disabled, active, index, indent, asChild, closeOnSelect, isParent, className, role, ...aria }: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;

package/src/tedi/components/overlays/dropdown/dropdown-item/dropdown-item.es.js

@@ -1,67 +1,70 @@
-import { jsx as K } from "react/jsx-runtime";
-import N from "../../../../../../external/classnames/index.es.js";
-import { useDropdownContext as T } from "../dropdown-context.es.js";
+import { jsx as T } from "react/jsx-runtime";
+import j from "../../../../../../external/classnames/index.es.js";
+import { useDropdownContext as E } from "../dropdown-context.es.js";
 import r from "./dropdown-item.module.scss.es.js";
-const V = ({
-  children: a,
+const l = ({
+  children: y,
   onClick: t,
-  disabled: p,
-  active: y,
+  disabled: n,
+  active: _,
   index: d,
   indent: i,
   asChild: o = !1,
   closeOnSelect: s = !0,
-  isParent: _ = !1,
-  className: w
+  isParent: w = !1,
+  className: c,
+  role: m,
+  ...v
 }) => {
-  const { getItemProps: c, listItemsRef: v, setOpen: m, activeIndex: b, divided: x, variant: f } = T(), D = o ? "div" : "button", I = (e) => typeof e != "number" ? {} : {
+  const { getItemProps: b, listItemsRef: x, setOpen: f, activeIndex: D, divided: I, variant: u } = E(), g = o ? "div" : "button", P = (e) => typeof e != "number" || e <= 0 ? {} : {
     "--dropdown-indent-level": e,
     "--dropdown-indent": `${e}rem`
-  }, g = (e) => {
-    if (p) return;
-    const n = e.currentTarget.querySelector(
+  }, q = (e) => {
+    if (n) return;
+    const p = e.currentTarget.querySelector(
       'input[type="checkbox"], input[type="radio"]'
     );
-    if (n) {
-      n.click();
+    if (p) {
+      p.click();
       return;
     }
-    o ? t == null || t(e) : (t == null || t(e), s && m(!1));
-  }, P = (e) => {
-    if (!p && (e.key === "Enter" || e.key === " ")) {
+    o ? t == null || t(e) : (t == null || t(e), s && f(!1));
+  }, K = (e) => {
+    if (!n && (e.key === "Enter" || e.key === " ")) {
       e.preventDefault();
-      const n = e.currentTarget.querySelector(
+      const p = e.currentTarget.querySelector(
         'input[type="checkbox"], input[type="radio"]'
       );
-      n ? n.click() : t == null || t(e), !o && s && m(!1);
+      p ? p.click() : t == null || t(e), !o && s && f(!1);
     }
-  }, u = {
+  }, a = {
     ref(e) {
-      typeof d == "number" && (v.current[d] = e);
+      typeof d == "number" && (x.current[d] = e);
     },
-    tabIndex: b === d ? 0 : -1,
-    className: N(
+    tabIndex: D === d ? 0 : -1,
+    className: j(
       r["tedi-dropdown__item"],
       {
-        [r["tedi-dropdown__item--active"]]: y,
-        [r["tedi-dropdown__item--disabled"]]: p,
-        [r["tedi-dropdown__item--divided"]]: x,
+        [r["tedi-dropdown__item--active"]]: _,
+        [r["tedi-dropdown__item--disabled"]]: n,
+        [r["tedi-dropdown__item--divided"]]: I,
         [r["tedi-dropdown__item--indent"]]: i,
-        [r["tedi-dropdown__item--tree-item"]]: f === "tree" && i,
-        [r["tedi-dropdown__item--tree-parent"]]: f === "tree" && _
+        [r["tedi-dropdown__item--tree-item"]]: u === "tree" && i,
+        [r["tedi-dropdown__item--tree-parent"]]: u === "tree" && w
       },
-      w
+      c
     ),
-    style: I(i),
-    onClick: g,
-    onKeyDown: P
-  }, q = o && s === !1 ? u : c({
-    role: "menuitem",
-    disabled: o ? void 0 : p,
-    ...u
+    style: P(i),
+    onClick: q,
+    onKeyDown: K,
+    ...v
+  }, N = o && s === !1 ? { ...a, role: m } : b({
+    role: m ?? "menuitem",
+    disabled: o ? void 0 : n,
+    ...a
   });
-  return /* @__PURE__ */ K(D, { ...q, children: a });
+  return /* @__PURE__ */ T(g, { ...N, children: y });
 };
 export {
-  V as DropdownItem
+  l as DropdownItem
 };

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

@@ -78,7 +78,7 @@ export declare const Dropdown: {
     Content: ({ children }: {
         children: React.ReactNode;
     }) => null;
-    Item: ({ children, onClick, disabled, active, index, indent, asChild, closeOnSelect, isParent, className, }: import('./dropdown-item/dropdown-item').DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, onClick, disabled, active, index, indent, asChild, closeOnSelect, isParent, className, role, ...aria }: import('./dropdown-item/dropdown-item').DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
     Separator: () => import("react/jsx-runtime").JSX.Element;
 };
 export {};

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

@@ -52,9 +52,6 @@ const ce = 4, l = (p) => {
       activeIndex: a,
       onNavigate: m,
       loop: !0,
-      // When the caller passes `defaultActiveIndex`, treat that item as the
-      // current selection and force focus to land on it when the dropdown
-      // opens — regardless of whether it was opened via click or keyboard.
       selectedIndex: o ?? null,
       focusItemOnOpen: o !== null ? !0 : "auto"
     })

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

@@ -0,0 +1,8 @@
+export * from './modal';
+export * from './modal-trigger/modal-trigger';
+export * from './modal-content/modal-content';
+export * from './modal-header/modal-header';
+export * from './modal-body/modal-body';
+export * from './modal-footer/modal-footer';
+export * from './modal-closer/modal-closer';
+export * from './modal-context';

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),s=require("../../../../../../external/classnames/index.cjs.js"),d=require("../modal.module.scss.cjs.js"),e=({children:o,noScroll:l=!1,className:a})=>t.jsx("div",{className:s.default(d.default["tedi-modal__body"],{[d.default["tedi-modal__body--scroll-page"]]:l},a),children:o});e.displayName="Modal.Body";exports.ModalBody=e;exports.default=e;

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;