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

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;

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

@@ -0,0 +1,37 @@
+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"
+};
+export {
+  e as default
+};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),d=require("react"),j=require("./overlay.cjs.js"),F=s=>{const{children:u,classNames:e,labelledBy:y,describedBy:f}=s,{open:l,x:m,y:h,strategy:g,focusManager:o,floating:b,arrowRef:v,getFloatingProps:x,placement:w,context:i,arrow:t,scrollLock:c,contentId:p}=d.useContext(j.OverlayContext);return d.useEffect(()=>{c&&(l?(document.documentElement.style.overflow="hidden",document.documentElement.scrollHeight>window.innerHeight&&(document.body.style.overflow="scroll")):(document.documentElement.style.overflow="",document.body.style.overflow=""))},[l,c]),l?n.jsx(r.FloatingPortal,{children:n.jsx(r.FloatingFocusManager,{modal:(o==null?void 0:o.modal)||!1,...o,context:i,children:n.jsxs("div",{...x({ref:b,tabIndex:-1,id:p,"aria-labelledby":y,"aria-describedby":f,style:{position:g,left:m,top:h},className:e==null?void 0:e.content}),"data-placement":w,"data-testid":"overlay-content",children:[n.jsx(r.FloatingArrow,{ref:a=>v.current=a,context:i,className:e==null?void 0:e.arrow,height:t==null?void 0:t.height,width:t==null?void 0:t.width,"data-testid":"overlay-arrow"}),u]})})}):null};exports.OverlayContent=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),r=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),s=require("react"),q=require("./overlay.cjs.js"),C=u=>{const{children:y,classNames:e,labelledBy:f,describedBy:m}=u,{open:l,x:g,y:h,strategy:b,focusManager:o,floating:v,arrowRef:x,getFloatingProps:w,placement:p,context:i,arrow:t,scrollLock:c,contentId:j,role:F}=s.useContext(q.OverlayContext);if(s.useEffect(()=>{c&&(l?(document.documentElement.style.overflow="hidden",document.documentElement.scrollHeight>window.innerHeight&&(document.body.style.overflow="scroll")):(document.documentElement.style.overflow="",document.body.style.overflow=""))},[l,c]),!l)return null;const a=n.jsxs("div",{...w({ref:v,tabIndex:-1,id:j,"aria-labelledby":f,"aria-describedby":m,style:{position:b,left:g,top:h},className:e==null?void 0:e.content}),"data-placement":p,"data-testid":"overlay-content",children:[n.jsx(r.FloatingArrow,{ref:d=>x.current=d,context:i,className:e==null?void 0:e.arrow,height:t==null?void 0:t.height,width:t==null?void 0:t.width,"data-testid":"overlay-arrow"}),y]});return n.jsx(r.FloatingPortal,{children:F==="tooltip"?a:n.jsx(r.FloatingFocusManager,{modal:(o==null?void 0:o.modal)||!1,...o,context:i,children:a})})};exports.OverlayContent=C;

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

@@ -1,48 +1,50 @@
-import { jsx as n, jsxs as w } from "react/jsx-runtime";
-import { FloatingPortal as x, FloatingFocusManager as F, FloatingArrow as E } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import { useContext as C, useEffect as j } from "react";
-import { OverlayContext as B } from "./overlay.es.js";
-const S = (a) => {
-  const { children: c, classNames: e, labelledBy: s, describedBy: m } = a, {
+import { jsxs as F, jsx as n } from "react/jsx-runtime";
+import { FloatingArrow as E, FloatingPortal as C, FloatingFocusManager as j } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { useContext as B, useEffect as H } from "react";
+import { OverlayContext as I } from "./overlay.es.js";
+const A = (c) => {
+  const { children: s, classNames: e, labelledBy: m, describedBy: f } = c, {
     open: l,
-    x: f,
-    y,
-    strategy: h,
+    x: y,
+    y: h,
+    strategy: u,
     focusManager: o,
-    floating: u,
-    arrowRef: b,
-    getFloatingProps: g,
-    placement: p,
+    floating: g,
+    arrowRef: p,
+    getFloatingProps: b,
+    placement: v,
     context: r,
     arrow: t,
-    scrollLock: d,
-    contentId: v
-  } = C(B);
-  return j(() => {
-    d && (l ? (document.documentElement.style.overflow = "hidden", document.documentElement.scrollHeight > window.innerHeight && (document.body.style.overflow = "scroll")) : (document.documentElement.style.overflow = "", document.body.style.overflow = ""));
-  }, [l, d]), l ? /* @__PURE__ */ n(x, { children: /* @__PURE__ */ n(F, { modal: (o == null ? void 0 : o.modal) || !1, ...o, context: r, children: /* @__PURE__ */ w(
+    scrollLock: i,
+    contentId: w,
+    role: x
+  } = B(I);
+  if (H(() => {
+    i && (l ? (document.documentElement.style.overflow = "hidden", document.documentElement.scrollHeight > window.innerHeight && (document.body.style.overflow = "scroll")) : (document.documentElement.style.overflow = "", document.body.style.overflow = ""));
+  }, [l, i]), !l) return null;
+  const d = /* @__PURE__ */ F(
     "div",
     {
-      ...g({
-        ref: u,
+      ...b({
+        ref: g,
         tabIndex: -1,
-        id: v,
-        "aria-labelledby": s,
-        "aria-describedby": m,
+        id: w,
+        "aria-labelledby": m,
+        "aria-describedby": f,
         style: {
-          position: h,
-          left: f,
-          top: y
+          position: u,
+          left: y,
+          top: h
         },
         className: e == null ? void 0 : e.content
       }),
-      "data-placement": p,
+      "data-placement": v,
       "data-testid": "overlay-content",
       children: [
         /* @__PURE__ */ n(
           E,
           {
-            ref: (i) => b.current = i,
+            ref: (a) => p.current = a,
             context: r,
             className: e == null ? void 0 : e.arrow,
             height: t == null ? void 0 : t.height,
@@ -50,11 +52,12 @@ const S = (a) => {
             "data-testid": "overlay-arrow"
           }
         ),
-        c
+        s
       ]
     }
-  ) }) }) : null;
+  );
+  return /* @__PURE__ */ n(C, { children: x === "tooltip" ? d : /* @__PURE__ */ n(j, { modal: (o == null ? void 0 : o.modal) || !1, ...o, context: r, children: d }) });
 };
 export {
-  S as OverlayContent
+  A as OverlayContent
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const N=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),n=require("react"),Q=require("./overlay-content.cjs.js"),X=require("./overlay-trigger.cjs.js"),j=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),i=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),Y=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),Z=require("../../../helpers/hooks/use-is-mounted.cjs.js"),$=3,S=n.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0,contentId:""}),u=E=>{const L=Y.useIsTouchDevice(),{children:W,placement:A="top",openWith:s=L?"click":"hover",defaultOpen:G=!1,open:a,onToggle:r,role:d="tooltip",arrowDimensions:e,offset:H=$+((e==null?void 0:e.height)??0),arrowPadding:V=4,focusManager:f,dismissible:y,scrollLock:O,trackReferencePosition:z=!1}=E,{order:M=["reference","content"],initialFocus:m,modal:g,...x}=f??{},C=m!==void 0?m:g?0:void 0,[F,P]=n.useState(G),p=n.useRef(null),R=Z.useIsMounted(),h=n.useMemo(()=>r&&typeof a<"u"?a:F,[r,a,F]),v=n.useCallback(l=>{typeof a>"u"&&P(l),r==null||r(l)},[a,P,r]),{x:q,y:I,refs:c,strategy:b,context:o,middlewareData:w,placement:k}=t.useFloating({placement:A,open:h,onOpenChange:v,middleware:[i.offset(H),i.flip(),i.shift({padding:8}),i.arrow({element:p,padding:V})],whileElementsMounted:z?(l,J,K)=>j.autoUpdate(l,J,K,{animationFrame:!0}):j.autoUpdate}),{getReferenceProps:T,getFloatingProps:U}=t.useInteractions([t.useHover(o,{enabled:s==="hover",handleClose:t.safePolygon()}),t.useClick(o,{toggle:y}),t.useFocus(o,{enabled:s==="hover"}),t.useRole(o,{role:d}),t.useDismiss(o,{enabled:y,outsidePressEvent:s==="click"?"mousedown":"pointerdown"})]),_=n.useId(),B=n.useMemo(()=>({open:h,onOpenChange:v,isMounted:R,openWith:s,focusManager:f?{order:M,modal:g,initialFocus:C,...x}:void 0,reference:c.setReference,floating:c.setFloating,arrowRef:p,x:q,y:I,strategy:b,getReferenceProps:T,getFloatingProps:U,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...w.arrow},context:o,placement:k,scrollLock:O,role:d,contentId:_}),[h,v,R,s,f,c.setReference,c.setFloating,p,q,I,b,T,U,e==null?void 0:e.width,e==null?void 0:e.height,w.arrow,o,k,O,d,_,g,M,C,x]);return N.jsx(S.Provider,{value:B,children:W})};u.Trigger=X.OverlayTrigger;u.Content=Q.OverlayContent;exports.Overlay=u;exports.OverlayContext=S;exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const N=require("react/jsx-runtime"),t=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),n=require("react"),Q=require("./overlay-content.cjs.js"),X=require("./overlay-trigger.cjs.js"),Y=require("../../../helpers/hooks/use-is-touch-device.cjs.js"),Z=require("../../../helpers/hooks/use-is-mounted.cjs.js"),j=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),i=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),$=3,S=n.createContext({open:!1,onOpenChange:()=>{},isMounted:!1,openWith:"hover",reference:()=>{},floating:()=>{},focusManager:{},arrowRef:{current:null},x:0,y:0,strategy:"absolute",getReferenceProps:()=>({}),getFloatingProps:()=>({}),arrow:{width:0,height:0,x:0,y:0,centerOffset:0},placement:"top",context:{},scrollLock:void 0,contentId:""}),u=E=>{const L=Y.useIsTouchDevice(),{children:W,placement:A="top",openWith:s=L?"click":"hover",defaultOpen:G=!1,open:a,onToggle:r,role:d="tooltip",arrowDimensions:e,offset:H=$+((e==null?void 0:e.height)??0),arrowPadding:V=4,focusManager:f,dismissible:y,scrollLock:O,trackReferencePosition:z=!1}=E,{order:M=["reference","content"],initialFocus:m,modal:g,...x}=f??{},C=m!==void 0?m:g?0:void 0,[F,P]=n.useState(G),p=n.useRef(null),R=Z.useIsMounted(),h=n.useMemo(()=>r&&typeof a<"u"?a:F,[r,a,F]),v=n.useCallback(l=>{typeof a>"u"&&P(l),r==null||r(l)},[a,P,r]),{x:q,y:I,refs:c,strategy:b,context:o,middlewareData:w,placement:k}=t.useFloating({placement:A,open:h,onOpenChange:v,middleware:[i.offset(H),i.flip(),i.shift({padding:8}),i.arrow({element:p,padding:V})],whileElementsMounted:z?(l,J,K)=>j.autoUpdate(l,J,K,{animationFrame:!0}):j.autoUpdate}),{getReferenceProps:T,getFloatingProps:U}=t.useInteractions([t.useHover(o,{enabled:s==="hover",handleClose:t.safePolygon()}),t.useClick(o,{toggle:y}),t.useFocus(o,{enabled:s==="hover"}),t.useRole(o,{role:d}),t.useDismiss(o,{enabled:y,outsidePressEvent:s==="click"?"mousedown":"pointerdown"})]),_=n.useId(),B=n.useMemo(()=>({open:h,onOpenChange:v,isMounted:R,openWith:s,focusManager:f?{order:M,modal:g,initialFocus:C,...x}:void 0,reference:c.setReference,floating:c.setFloating,arrowRef:p,x:q,y:I,strategy:b,getReferenceProps:T,getFloatingProps:U,arrow:{width:e==null?void 0:e.width,height:e==null?void 0:e.height,...w.arrow},context:o,placement:k,scrollLock:O,role:d,contentId:_}),[h,v,R,s,f,c.setReference,c.setFloating,p,q,I,b,T,U,e==null?void 0:e.width,e==null?void 0:e.height,w.arrow,o,k,O,d,_,g,M,C,x]);return N.jsx(S.Provider,{value:B,children:W})};u.Trigger=X.OverlayTrigger;u.Content=Q.OverlayContent;exports.Overlay=u;exports.OverlayContext=S;exports.default=u;