@tedi-design-system/react 17.1.0-rc.9 → 17.2.0-rc.1

package/src/tedi/components/layout/header/header.d.ts

@@ -0,0 +1,115 @@
+import { default as React } from 'react';
+export interface HeaderProps {
+    /**
+     * Content rendered inside the header, typically Header.Logo, Header.Center, and Header.Actions subcomponents.
+     */
+    children: React.ReactNode;
+    /**
+     * Toggle element for the mobile side navigation menu.
+     * Typically a SideNav.Toggle component.
+     */
+    toggle?: React.ReactNode;
+    /**
+     * Content rendered below the main header bar on mobile viewports (below `md` breakpoint).
+     * Commonly used for a mobile-specific search bar or other compact navigation elements.
+     */
+    bottom?: React.ReactNode;
+    /** Additional CSS class name applied to the header wrapper. */
+    className?: string;
+}
+export declare const Header: {
+    (props: HeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    Logo: {
+        (props: HeaderLogoProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
+    Center: {
+        (props: HeaderCenterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Actions: {
+        (props: HeaderActionsProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Language: {
+        (props: import('./components/header-language/header-language').HeaderLanguageProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Login: {
+        (props: import('./components/header-login/header-login').HeaderLoginProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Logout: {
+        (props: import('./components/header-logout/header-logout').HeaderLogoutProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Profile: {
+        (props: import('./components/header-profile/header-profile').HeaderProfileProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Role: {
+        (props: import('./components/header-role/header-role').HeaderRoleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Search: {
+        (props: import('./components/header-search/header-search').HeaderSearchProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export interface HeaderLogoProps {
+    /**
+     * The default logo to display (typically used in light theme).
+     */
+    logo: React.ReactNode;
+    /**
+     * Optional logo variant for dark theme.
+     * If provided, it will be used when the current theme is dark.
+     */
+    logoDark?: React.ReactNode;
+    /**
+     * Controls visibility of the logo.
+     * Useful for conditionally hiding the logo based on application state, feature flags,
+     * or custom media queries that fall between standard breakpoints (e.g. 420px).
+     * For responsive hiding at standard breakpoints, prefer wrapping Header.Logo with HideAt/ShowAt.
+     * @default true
+     */
+    showLogo?: boolean;
+    /**
+     * Optional link URL.
+     * If provided, the logo will be wrapped in an anchor element.
+     */
+    href?: string;
+    /** Additional CSS class name applied to the logo wrapper. */
+    className?: string;
+}
+export declare const HeaderLogo: {
+    (props: HeaderLogoProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export interface HeaderCenterProps {
+    /** Content rendered in the center area of the header, typically navigation links or a search bar. */
+    children: React.ReactNode;
+    /**
+     * Controls the horizontal alignment of center content.
+     * @default center
+     */
+    alignment?: 'flex-start' | 'center' | 'space-between';
+    /** Additional CSS class name applied to the center content area. */
+    className?: string;
+}
+export declare const HeaderCenter: {
+    (props: HeaderCenterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface HeaderActionsProps {
+    /** Action elements rendered on the right side of the header (e.g. language selector, login, profile). */
+    children: React.ReactNode;
+    /** Additional CSS class name applied to the actions wrapper. */
+    className?: string;
+}
+export declare const HeaderActions: {
+    (props: HeaderActionsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Header;

package/src/tedi/components/layout/header/index.d.ts

@@ -0,0 +1,7 @@
+export * from './header';
+export * from './components/header-language/header-language';
+export * from './components/header-login/header-login';
+export * from './components/header-logout/header-logout';
+export * from './components/header-profile/header-profile';
+export * from './components/header-role/header-role';
+export * from './components/header-search/header-search';

package/src/tedi/components/layout/hide-at/hide-at.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { Breakpoint } from '../../../helpers';
+type HideAtProps = {
+    children: React.ReactNode;
+} & Partial<Record<Breakpoint, boolean>>;
+export declare const HideAt: {
+    ({ children, ...breakpoints }: HideAtProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export {};

package/src/tedi/components/layout/show-at/show-at.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { Breakpoint } from '../../../helpers';
+type ShowAtProps = {
+    children: React.ReactNode;
+} & Partial<Record<Breakpoint, boolean>>;
+export declare const ShowAt: {
+    ({ children, ...breakpoints }: ShowAtProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export {};

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-sidenav-toggle":"tedi-sidenav-toggle-5aa60f9e","tedi-sidenav-toggle--collapse":"tedi-sidenav-toggle--collapse-3b54974c"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-sidenav-toggle":"tedi-sidenav-toggle-5aa60f9e","tedi-sidenav-toggle__icon":"tedi-sidenav-toggle__icon-a52afb07","tedi-sidenav-toggle--collapse":"tedi-sidenav-toggle--collapse-3b54974c"};exports.default=e;

package/src/tedi/components/layout/sidenav/components/sidenav-toggle/sidenav-toggle.module.scss.es.js

@@ -1,5 +1,6 @@
 const e = {
   "tedi-sidenav-toggle": "tedi-sidenav-toggle-5aa60f9e",
+  "tedi-sidenav-toggle__icon": "tedi-sidenav-toggle__icon-a52afb07",
   "tedi-sidenav-toggle--collapse": "tedi-sidenav-toggle--collapse-3b54974c"
 };
 export {

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),b=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),I=require("../../base/icon/icon.cjs.js"),M=require("../../buttons/button/button.cjs.js"),t=require("./breadcrumbs.module.scss.cjs.js"),P=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),S=require("../../../providers/label-provider/use-labels.cjs.js"),d=require("../../overlays/dropdown/dropdown.cjs.js"),k=n=>{const l=[];return o.Children.forEach(n,a=>{if(o.isValidElement(a)){if(a.type===o.Fragment){l.push(...k(a.props.children));return}l.push(a)}}),l},D=e.jsx(I.Icon,{name:"chevron_right",size:16,color:"brand"}),h=n=>{const{children:l,ariaLabel:a,showMoreLabel:v,separator:w=D,className:p}=n,{getCurrentBreakpointProps:B}=P.useBreakpointProps(n.defaultServerBreakpoint),{variant:C="long",maxItems:f,itemsBeforeCollapse:q=1,itemsAfterCollapse:y=1}=B(n),{getLabel:x}=S.useLabels(),_=a??x("breadcrumbs"),L=v??x("breadcrumbs.show-more"),s=k(l);if(s.length===0)return null;if(C==="short"){if(s.length<2)return null;const r=s[s.length-2],i=r.props,c=typeof r.type!="string"&&i.iconLeft===void 0?o.cloneElement(r,{iconLeft:"arrow_back"}):r;return e.jsx("nav",{"aria-label":_,className:b.default(t.default["tedi-breadcrumbs"],p),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:c})})})}const u=Math.max(0,q),m=Math.max(1,y),g=f!==void 0&&s.length>f&&s.length>u+m?[...s.slice(0,u).map(r=>({kind:"item",element:r})),{kind:"ellipsis",hidden:s.slice(u,s.length-m)},...s.slice(s.length-m).map(r=>({kind:"item",element:r}))]:s.map(r=>({kind:"item",element:r})),j=g.length-1;return e.jsx("nav",{"aria-label":_,className:b.default(t.default["tedi-breadcrumbs"],p),children:e.jsx("ol",{className:t.default["tedi-breadcrumbs__list"],children:g.map((r,i)=>e.jsxs(o.Fragment,{children:[r.kind==="item"?e.jsx("li",{className:b.default(t.default["tedi-breadcrumbs__item"],{[t.default["tedi-breadcrumbs__current"]]:i===j}),children:r.element}):e.jsx("li",{className:t.default["tedi-breadcrumbs__item"],children:e.jsxs(d.Dropdown,{children:[e.jsx(d.Dropdown.Trigger,{children:e.jsxs(M.Button,{noStyle:!0,className:t.default["tedi-breadcrumbs__ellipsis"],children:[e.jsx("span",{"aria-hidden":"true",children:"…"}),e.jsx("span",{className:"sr-only",children:L})]})}),e.jsx(d.Dropdown.Content,{children:r.hidden.map((c,N)=>e.jsx(d.Dropdown.Item,{index:N,asChild:!0,children:c},c.key??N))})]})}),i<j&&e.jsx("li",{className:t.default["tedi-breadcrumbs__separator"],"aria-hidden":"true",children:w})]},i))})})};h.displayName="Breadcrumbs";exports.Breadcrumbs=h;exports.default=h;

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,66 @@
+import { default as React, ReactNode } from 'react';
+import { BreakpointSupport } from '../../../helpers';
+type BreadcrumbsBreakpointProps = {
+    /**
+     * - `'long'` — full trail of crumbs separated by chevrons.
+     * - `'short'` — only the second-to-last child rendered as a back-link with
+     *   a left-pointing arrow. Useful on narrow viewports. Renders nothing when
+     *   fewer than two crumbs are supplied.
+     * @default long
+     */
+    variant?: 'long' | 'short';
+    /**
+     * Maximum number of crumbs to render before collapsing the middle into an
+     * ellipsis button. Clicking the button opens a dropdown listing the hidden
+     * crumbs. Only applies in the `'long'` variant. When omitted, all crumbs are
+     * rendered.
+     */
+    maxItems?: number;
+    /**
+     * Number of crumbs to keep visible at the start of the trail when collapsed.
+     * @default 1
+     */
+    itemsBeforeCollapse?: number;
+    /**
+     * Number of crumbs to keep visible at the end of the trail when collapsed.
+     * The current page (last crumb) should normally stay visible — keep this ≥ 1.
+     * @default 1
+     */
+    itemsAfterCollapse?: number;
+};
+export interface BreadcrumbsProps extends BreakpointSupport<BreadcrumbsBreakpointProps> {
+    /**
+     * Crumbs in order from the root page to the current page. Each child becomes
+     * one crumb; chevron separators are inserted between them. Use a `Link` (or
+     * any anchor) for navigable crumbs and a plain element (e.g. `<span>`) for
+     * the current page — add `aria-current="page"` to it yourself.
+     */
+    children: React.ReactNode;
+    /**
+     * Accessible label for the wrapping `<nav>` landmark. Falls back to the
+     * `breadcrumbs` entry from `LabelProvider`.
+     */
+    ariaLabel?: string;
+    /**
+     * Accessible label for the ellipsis button that opens the collapsed-crumbs
+     * dropdown. Only used when `maxItems` causes a collapse. Falls back to the
+     * `breadcrumbs.show-more` entry from `LabelProvider`.
+     */
+    showMoreLabel?: string;
+    /**
+     * Node rendered between crumbs. Pass a string (e.g. `'/'`, `'›'`) for text
+     * separators or any React node for custom markup. Hidden from assistive
+     * technology — screen readers announce only the crumbs themselves.
+     * @default <Icon name="chevron_right" size={16} color="brand" />
+     */
+    separator?: ReactNode;
+    /**
+     * Additional class name applied to the `<nav>` element.
+     */
+    className?: string;
+}
+export declare const Breadcrumbs: {
+    (props: BreadcrumbsProps): JSX.Element | null;
+    displayName: string;
+};
+export default Breadcrumbs;

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.es.js

@@ -0,0 +1,65 @@
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import h from "../../../../../external/classnames/index.es.js";
+import { cloneElement as E, Fragment as k, Children as P, isValidElement as S } from "react";
+import { Icon as j } from "../../base/icon/icon.es.js";
+import { Button as A } from "../../buttons/button/button.es.js";
+import s from "./breadcrumbs.module.scss.es.js";
+import { useBreakpointProps as T } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as z } from "../../../providers/label-provider/use-labels.es.js";
+import { Dropdown as c } from "../../overlays/dropdown/dropdown.es.js";
+const v = (l) => {
+  const n = [];
+  return P.forEach(l, (a) => {
+    if (S(a)) {
+      if (a.type === k) {
+        n.push(...v(a.props.children));
+        return;
+      }
+      n.push(a);
+    }
+  }), n;
+}, D = /* @__PURE__ */ r(j, { name: "chevron_right", size: 16, color: "brand" }), F = (l) => {
+  const { children: n, ariaLabel: a, showMoreLabel: y, separator: B = D, className: u } = l, { getCurrentBreakpointProps: L } = T(l.defaultServerBreakpoint), {
+    variant: w = "long",
+    maxItems: b,
+    itemsBeforeCollapse: x = 1,
+    itemsAfterCollapse: I = 1
+  } = L(l), { getLabel: f } = z(), _ = a ?? f("breadcrumbs"), M = y ?? f("breadcrumbs.show-more"), t = v(n);
+  if (t.length === 0) return null;
+  if (w === "short") {
+    if (t.length < 2) return null;
+    const e = t[t.length - 2], i = e.props, o = typeof e.type != "string" && i.iconLeft === void 0 ? E(e, { iconLeft: "arrow_back" }) : e;
+    return /* @__PURE__ */ r("nav", { "aria-label": _, className: h(s["tedi-breadcrumbs"], u), children: /* @__PURE__ */ r("ol", { className: s["tedi-breadcrumbs__list"], children: /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__item"], children: o }) }) });
+  }
+  const m = Math.max(0, x), d = Math.max(1, I), g = b !== void 0 && t.length > b && t.length > m + d ? [
+    ...t.slice(0, m).map((e) => ({ kind: "item", element: e })),
+    {
+      kind: "ellipsis",
+      hidden: t.slice(m, t.length - d)
+    },
+    ...t.slice(t.length - d).map((e) => ({ kind: "item", element: e }))
+  ] : t.map((e) => ({ kind: "item", element: e })), N = g.length - 1;
+  return /* @__PURE__ */ r("nav", { "aria-label": _, className: h(s["tedi-breadcrumbs"], u), children: /* @__PURE__ */ r("ol", { className: s["tedi-breadcrumbs__list"], children: g.map((e, i) => /* @__PURE__ */ p(k, { children: [
+    e.kind === "item" ? /* @__PURE__ */ r(
+      "li",
+      {
+        className: h(s["tedi-breadcrumbs__item"], {
+          [s["tedi-breadcrumbs__current"]]: i === N
+        }),
+        children: e.element
+      }
+    ) : /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__item"], children: /* @__PURE__ */ p(c, { children: [
+      /* @__PURE__ */ r(c.Trigger, { children: /* @__PURE__ */ p(A, { noStyle: !0, className: s["tedi-breadcrumbs__ellipsis"], children: [
+        /* @__PURE__ */ r("span", { "aria-hidden": "true", children: "…" }),
+        /* @__PURE__ */ r("span", { className: "sr-only", children: M })
+      ] }) }),
+      /* @__PURE__ */ r(c.Content, { children: e.hidden.map((o, C) => /* @__PURE__ */ r(c.Item, { index: C, asChild: !0, children: o }, o.key ?? C)) })
+    ] }) }),
+    i < N && /* @__PURE__ */ r("li", { className: s["tedi-breadcrumbs__separator"], "aria-hidden": "true", children: B })
+  ] }, i)) }) });
+};
+F.displayName = "Breadcrumbs";
+export {
+  F as Breadcrumbs,
+  F as default
+};

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-breadcrumbs":"tedi-breadcrumbs-0247287c","tedi-breadcrumbs__list":"tedi-breadcrumbs__list-10d5a5f4","tedi-breadcrumbs__item":"tedi-breadcrumbs__item-d8534029","tedi-breadcrumbs__separator":"tedi-breadcrumbs__separator-7f7b6f95","tedi-breadcrumbs__current":"tedi-breadcrumbs__current-db9fd67c","tedi-breadcrumbs__ellipsis":"tedi-breadcrumbs__ellipsis-0b4cdcac"};exports.default=e;

package/src/tedi/components/navigation/breadcrumbs/breadcrumbs.module.scss.es.js

@@ -0,0 +1,11 @@
+const e = {
+  "tedi-breadcrumbs": "tedi-breadcrumbs-0247287c",
+  "tedi-breadcrumbs__list": "tedi-breadcrumbs__list-10d5a5f4",
+  "tedi-breadcrumbs__item": "tedi-breadcrumbs__item-d8534029",
+  "tedi-breadcrumbs__separator": "tedi-breadcrumbs__separator-7f7b6f95",
+  "tedi-breadcrumbs__current": "tedi-breadcrumbs__current-db9fd67c",
+  "tedi-breadcrumbs__ellipsis": "tedi-breadcrumbs__ellipsis-0b4cdcac"
+};
+export {
+  e as default
+};

package/src/tedi/components/navigation/breadcrumbs/index.d.ts

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

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

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

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

@@ -75,6 +75,13 @@ export interface OverlayProps {
      * @default false
      */
     trackReferencePosition?: boolean;
+    /**
+     * Minimum distance (in px) between the arrow and the edges of the content.
+     * Helps keep the arrow away from rounded corners, especially on `-start` and `-end` placements.
+     * Use a larger value for bigger arrows or arrows with borders.
+     * @default 4
+     */
+    arrowPadding?: number;
 }
 export interface OverlayContextType {
     open: boolean;

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

@@ -1,13 +1,13 @@
-import { jsx as B } from "react/jsx-runtime";
-import { useFloating as J, useInteractions as K, useHover as N, useClick as Q, useFocus as X, useRole as Y, useDismiss as Z, safePolygon as _ } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import { createContext as $, useState as D, useRef as ee, useMemo as T, useCallback as te, useId as oe } from "react";
-import { OverlayContent as ne } from "./overlay-content.es.js";
-import { OverlayTrigger as re } from "./overlay-trigger.es.js";
+import { jsx as J } from "react/jsx-runtime";
+import { useFloating as K, useInteractions as N, useHover as Q, useClick as X, useFocus as Y, useRole as Z, useDismiss as _, safePolygon as $ } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { createContext as D, useState as ee, useRef as te, useMemo as T, useCallback as oe, useId as ne } from "react";
+import { OverlayContent as re } from "./overlay-content.es.js";
+import { OverlayTrigger as se } from "./overlay-trigger.es.js";
 import { autoUpdate as E } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as se, flip as ae, shift as ce, arrow as le } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-import { useIsTouchDevice as ie } from "../../../helpers/hooks/use-is-touch-device.es.js";
-import { useIsMounted as fe } from "../../../helpers/hooks/use-is-mounted.es.js";
-const ue = 3, de = $({
+import { offset as ae, flip as ce, shift as le, arrow as ie } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+import { useIsTouchDevice as fe } from "../../../helpers/hooks/use-is-touch-device.es.js";
+import { useIsMounted as ue } from "../../../helpers/hooks/use-is-mounted.es.js";
+const de = 3, pe = D({
   open: !1,
   onOpenChange: () => {
   },
@@ -36,7 +36,7 @@ const ue = 3, de = $({
   scrollLock: void 0,
   contentId: ""
 }), L = (W) => {
-  const j = ie(), {
+  const j = fe(), {
     children: A,
     placement: G = "top",
     openWith: n = j ? "click" : "hover",
@@ -45,47 +45,48 @@ const ue = 3, de = $({
     onToggle: o,
     role: c = "tooltip",
     arrowDimensions: e,
-    offset: S = ue + ((e == null ? void 0 : e.height) ?? 0),
+    offset: S = de + ((e == null ? void 0 : e.height) ?? 0),
+    arrowPadding: U = 4,
     focusManager: l,
     dismissible: p,
     scrollLock: g,
-    trackReferencePosition: U = !1
-  } = W, { order: h = ["reference", "content"], initialFocus: m, modal: i, ...v } = l ?? {}, y = m !== void 0 ? m : i ? 0 : void 0, [O, x] = D(H), f = ee(null), F = fe(), u = T(() => o && typeof r < "u" ? r : O, [o, r, O]), d = te(
+    trackReferencePosition: V = !1
+  } = W, { order: h = ["reference", "content"], initialFocus: m, modal: i, ...v } = l ?? {}, y = m !== void 0 ? m : i ? 0 : void 0, [O, x] = ee(H), f = te(null), F = ue(), u = T(() => o && typeof r < "u" ? r : O, [o, r, O]), d = oe(
     (a) => {
       typeof r > "u" && x(a), o == null || o(a);
     },
     [r, x, o]
-  ), { x: C, y: M, refs: s, strategy: P, context: t, middlewareData: R, placement: k } = J({
+  ), { x: P, y: C, refs: s, strategy: M, context: t, middlewareData: R, placement: w } = K({
     placement: G,
     open: u,
     onOpenChange: d,
     middleware: [
-      se(S),
-      ae(),
-      ce({ padding: 8 }),
-      le({
+      ae(S),
+      ce(),
+      le({ padding: 8 }),
+      ie({
         element: f,
-        padding: 4
+        padding: U
       })
     ],
-    whileElementsMounted: U ? (a, q, z) => E(a, q, z, { animationFrame: !0 }) : E
-  }), { getReferenceProps: w, getFloatingProps: I } = K([
-    N(t, {
+    whileElementsMounted: V ? (a, z, B) => E(a, z, B, { animationFrame: !0 }) : E
+  }), { getReferenceProps: k, getFloatingProps: I } = N([
+    Q(t, {
       enabled: n === "hover",
-      handleClose: _()
+      handleClose: $()
     }),
-    Q(t, {
+    X(t, {
       toggle: p
     }),
-    X(t, {
+    Y(t, {
       enabled: n === "hover"
     }),
-    Y(t, { role: c }),
-    Z(t, {
+    Z(t, { role: c }),
+    _(t, {
       enabled: p,
       outsidePressEvent: n === "click" ? "mousedown" : "pointerdown"
     })
-  ]), b = oe(), V = T(
+  ]), b = ne(), q = T(
     () => ({
       open: u,
       onOpenChange: d,
@@ -100,10 +101,10 @@ const ue = 3, de = $({
       reference: s.setReference,
       floating: s.setFloating,
       arrowRef: f,
-      x: C,
-      y: M,
-      strategy: P,
-      getReferenceProps: w,
+      x: P,
+      y: C,
+      strategy: M,
+      getReferenceProps: k,
       getFloatingProps: I,
       arrow: {
         width: e == null ? void 0 : e.width,
@@ -111,7 +112,7 @@ const ue = 3, de = $({
         ...R.arrow
       },
       context: t,
-      placement: k,
+      placement: w,
       scrollLock: g,
       role: c,
       contentId: b
@@ -125,16 +126,16 @@ const ue = 3, de = $({
       s.setReference,
       s.setFloating,
       f,
+      P,
       C,
       M,
-      P,
-      w,
+      k,
       I,
       e == null ? void 0 : e.width,
       e == null ? void 0 : e.height,
       R.arrow,
       t,
-      k,
+      w,
       g,
       c,
       b,
@@ -144,12 +145,12 @@ const ue = 3, de = $({
       v
     ]
   );
-  return /* @__PURE__ */ B(de.Provider, { value: V, children: A });
+  return /* @__PURE__ */ J(pe.Provider, { value: q, children: A });
 };
-L.Trigger = re;
-L.Content = ne;
+L.Trigger = se;
+L.Content = re;
 export {
   L as Overlay,
-  de as OverlayContext,
+  pe as OverlayContext,
   L as default
 };

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

@@ -1,3 +1,4 @@
 export * from './popover';
 export * from './popover-content';
+export * from './popover-context';
 export * from './popover-trigger';

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),C=require("../../base/typography/text/text.cjs.js"),q=require("../../buttons/closing-button/closing-button.cjs.js"),y=require("../overlay/overlay.cjs.js"),j=require("../overlay/overlay-content.cjs.js"),o=require("./popover.module.scss.cjs.js"),_=f=>{const{children:r,width:l="small",className:x,title:e,titleProps:d={element:"h4"},close:a,closeProps:n={size:"default"}}=f,{onOpenChange:h}=i.useContext(y.OverlayContext),c=i.useId(),u=!!r,p=i.useId();return t.jsxs(j.OverlayContent,{classNames:{content:s.default(o.default["tedi-popover"],{[o.default[`tedi-popover--${l}`]]:l},x),arrow:o.default["tedi-popover__arrow"]},labelledBy:e?c:void 0,describedBy:u?p:void 0,children:[(e||a)&&t.jsxs("div",{className:s.default(o.default["tedi-popover__header"],{[o.default["tedi-popover__header--no-title"]]:!e}),children:[e&&t.jsx(C.Text,{...d,id:c,className:s.default("align-self-center",d.className),children:e}),a&&t.jsx(q.ClosingButton,{...n,onClick:m=>{var v;h(!1),(v=n.onClick)==null||v.call(n,m)}})]}),u?t.jsx("div",{id:p,children:r}):r]})};exports.PopoverContent=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),s=require("react"),y=require("../../base/typography/text/text.cjs.js"),_=require("../../buttons/closing-button/closing-button.cjs.js"),j=require("../overlay/overlay.cjs.js"),b=require("../overlay/overlay-content.cjs.js"),e=require("./popover.module.scss.cjs.js"),g=require("./popover-context.cjs.js"),x=C=>{const{children:i,width:d="small",className:h,title:t,titleProps:l={element:"h4"},close:a,closeProps:r={size:"default"}}=C,{onOpenChange:m}=s.useContext(j.OverlayContext),{withBorder:c}=s.useContext(g.PopoverContext),u=s.useId(),p=!!i,v=s.useId();return o.jsxs(b.OverlayContent,{classNames:{content:n.default(e.default["tedi-popover"],{[e.default[`tedi-popover--${d}`]]:d&&d!=="none",[e.default["tedi-popover--border"]]:c},h),arrow:n.default(e.default["tedi-popover__arrow"],{[e.default["tedi-popover__arrow--border"]]:c})},labelledBy:t?u:void 0,describedBy:p?v:void 0,children:[(t||a)&&o.jsxs("div",{className:n.default(e.default["tedi-popover__header"],{[e.default["tedi-popover__header--no-title"]]:!t}),children:[t&&o.jsx(y.Text,{...l,id:u,className:n.default("align-self-center",l.className),children:t}),a&&o.jsx(_.ClosingButton,{...r,onClick:q=>{var f;m(!1),(f=r.onClick)==null||f.call(r,q)}})]}),p?o.jsx("div",{id:v,children:i}):i]})};x.displayName="PopoverContent";exports.PopoverContent=x;

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

@@ -27,6 +27,9 @@ export interface PopoverContentProps extends Omit<OverlayContentProps, 'classNam
      * Popover width.
      * @default small
      */
-    width?: 'small' | 'medium' | 'large';
+    width?: 'small' | 'medium' | 'large' | 'none';
 }
-export declare const PopoverContent: (props: PopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverContent: {
+    (props: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

@@ -1,49 +1,58 @@
-import { jsxs as v, jsx as i } from "react/jsx-runtime";
-import s from "../../../../../external/classnames/index.es.js";
-import { useContext as _, useId as f } from "react";
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import r from "../../../../../external/classnames/index.es.js";
+import { useContext as h, useId as C } from "react";
 import { Text as u } from "../../base/typography/text/text.es.js";
-import { ClosingButton as y } from "../../buttons/closing-button/closing-button.es.js";
+import { ClosingButton as w } from "../../buttons/closing-button/closing-button.es.js";
 import { OverlayContext as B } from "../overlay/overlay.es.js";
-import { OverlayContent as g } from "../overlay/overlay-content.es.js";
-import o from "./popover.module.scss.es.js";
-const P = (h) => {
+import { OverlayContent as b } from "../overlay/overlay-content.es.js";
+import e from "./popover.module.scss.es.js";
+import { PopoverContext as g } from "./popover-context.es.js";
+const I = (_) => {
   const {
-    children: r,
+    children: i,
     width: n = "small",
-    className: C,
-    title: e,
-    titleProps: l = { element: "h4" },
-    close: a,
+    className: x,
+    title: o,
+    titleProps: d = { element: "h4" },
+    close: l,
     closeProps: t = { size: "default" }
-  } = h, { onOpenChange: x } = _(B), d = f(), m = !!r, c = f();
-  return /* @__PURE__ */ v(
-    g,
+  } = _, { onOpenChange: N } = h(B), { withBorder: p } = h(g), a = C(), m = !!i, c = C();
+  return /* @__PURE__ */ f(
+    b,
     {
       classNames: {
-        content: s(o["tedi-popover"], { [o[`tedi-popover--${n}`]]: n }, C),
-        arrow: o["tedi-popover__arrow"]
+        content: r(
+          e["tedi-popover"],
+          {
+            [e[`tedi-popover--${n}`]]: n && n !== "none",
+            [e["tedi-popover--border"]]: p
+          },
+          x
+        ),
+        arrow: r(e["tedi-popover__arrow"], { [e["tedi-popover__arrow--border"]]: p })
       },
-      labelledBy: e ? d : void 0,
+      labelledBy: o ? a : void 0,
       describedBy: m ? c : void 0,
       children: [
-        (e || a) && /* @__PURE__ */ v("div", { className: s(o["tedi-popover__header"], { [o["tedi-popover__header--no-title"]]: !e }), children: [
-          e && /* @__PURE__ */ i(u, { ...l, id: d, className: s("align-self-center", l.className), children: e }),
-          a && /* @__PURE__ */ i(
-            y,
+        (o || l) && /* @__PURE__ */ f("div", { className: r(e["tedi-popover__header"], { [e["tedi-popover__header--no-title"]]: !o }), children: [
+          o && /* @__PURE__ */ s(u, { ...d, id: a, className: r("align-self-center", d.className), children: o }),
+          l && /* @__PURE__ */ s(
+            w,
             {
               ...t,
-              onClick: (N) => {
-                var p;
-                x(!1), (p = t.onClick) == null || p.call(t, N);
+              onClick: (y) => {
+                var v;
+                N(!1), (v = t.onClick) == null || v.call(t, y);
               }
             }
           )
         ] }),
-        m ? /* @__PURE__ */ i("div", { id: c, children: r }) : r
+        m ? /* @__PURE__ */ s("div", { id: c, children: i }) : i
       ]
     }
   );
 };
+I.displayName = "PopoverContent";
 export {
-  P as PopoverContent
+  I as PopoverContent
 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({withBorder:!1});exports.PopoverContext=t;