@tedi-design-system/react 18.0.0-rc.8 → 18.0.0

package/src/community/components/vertical-stepper/step-item/step-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("../../../../../external/classnames/index.cjs.js"),I=require("react"),j=require("../../../../tedi/components/base/typography/text/text.cjs.js"),c=require("../../../../tedi/components/base/icon/icon.cjs.js"),k=require("../../../../tedi/components/buttons/collapse/collapse.cjs.js"),s=require("../vertical-stepper.module.scss.cjs.js"),i=require("../../../../tedi/components/layout/grid/row.cjs.js"),o=require("../../../../tedi/components/layout/grid/col.cjs.js"),R=({children:t,className:h,isSelected:p,hasIcon:r,title:d,href:N,onClick:u,state:l="default",info:a,isOpen:m,onToggle:x})=>{const[g,q]=I.useState(!1),f=m??g,v=n=>{x&&x(n),m===void 0&&q(n)},y=C.default(s.default["stepper-item"],{[s.default[l]]:l,[s.default.selected]:p,[s.default["has-info"]]:a&&!t,[s.default["info-with-children"]]:a&&t,[s.default["stepper-collapse-open"]]:f},h);return e.jsxs("li",{role:"treeitem","aria-selected":p,className:y,children:[e.jsx("span",{className:s.default["stepper-counter"]}),e.jsx("div",{className:s.default["stepper-content"],children:t?e.jsx(k.Collapse,{onToggle:v,open:f,hideCollapseText:!0,id:"vertical-stepper-collapse",className:s.default["stepper-item-collapse"],title:e.jsxs(e.Fragment,{children:[e.jsx(i.Row,{alignItems:"start",children:e.jsx(o.Col,{children:e.jsxs(j.Text,{element:"span",className:s.default["stepper-link"],children:[d,r&&l==="error"&&e.jsx(c.Icon,{name:"error",color:"danger",size:16,display:"inline",className:s.default["stepper-icon"]}),r&&l==="completed"&&e.jsx(c.Icon,{name:"check",color:"success",size:16,display:"inline",className:s.default["stepper-icon"]})]})})}),e.jsx(i.Row,{children:e.jsx(o.Col,{children:a})})]}),children:t&&e.jsx("ul",{className:s.default["sub-item-list"],children:t})}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.default["stepper-link-container"],children:e.jsx("a",{href:N,onClick:n=>{n.preventDefault(),u&&u()},children:e.jsxs(j.Text,{element:"span",className:s.default["stepper-link"],children:[d,r&&l==="error"&&e.jsx(c.Icon,{name:"error",color:"danger",size:16,display:"inline",className:s.default["stepper-icon"]}),r&&l==="completed"&&e.jsx(c.Icon,{name:"check",color:"success",size:16,display:"inline",className:s.default["stepper-icon"]})]})})}),e.jsx(i.Row,{children:e.jsx(o.Col,{children:a})})]})}),e.jsx("div",{className:s.default["stepper-line"]})]})};exports.StepItem=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("../../../../../external/classnames/index.cjs.js"),I=require("react"),j=require("../../../../tedi/components/base/typography/text/text.cjs.js"),c=require("../../../../tedi/components/base/icon/icon.cjs.js"),k=require("../../../../tedi/components/content/collapse/collapse.cjs.js"),s=require("../vertical-stepper.module.scss.cjs.js"),i=require("../../../../tedi/components/layout/grid/row.cjs.js"),o=require("../../../../tedi/components/layout/grid/col.cjs.js"),R=({children:t,className:h,isSelected:p,hasIcon:r,title:d,href:N,onClick:u,state:l="default",info:a,isOpen:m,onToggle:x})=>{const[g,q]=I.useState(!1),f=m??g,v=n=>{x&&x(n),m===void 0&&q(n)},y=C.default(s.default["stepper-item"],{[s.default[l]]:l,[s.default.selected]:p,[s.default["has-info"]]:a&&!t,[s.default["info-with-children"]]:a&&t,[s.default["stepper-collapse-open"]]:f},h);return e.jsxs("li",{role:"treeitem","aria-selected":p,className:y,children:[e.jsx("span",{className:s.default["stepper-counter"]}),e.jsx("div",{className:s.default["stepper-content"],children:t?e.jsx(k.Collapse,{onToggle:v,open:f,hideCollapseText:!0,id:"vertical-stepper-collapse",className:s.default["stepper-item-collapse"],title:e.jsxs(e.Fragment,{children:[e.jsx(i.Row,{alignItems:"start",children:e.jsx(o.Col,{children:e.jsxs(j.Text,{element:"span",className:s.default["stepper-link"],children:[d,r&&l==="error"&&e.jsx(c.Icon,{name:"error",color:"danger",size:16,display:"inline",className:s.default["stepper-icon"]}),r&&l==="completed"&&e.jsx(c.Icon,{name:"check",color:"success",size:16,display:"inline",className:s.default["stepper-icon"]})]})})}),e.jsx(i.Row,{children:e.jsx(o.Col,{children:a})})]}),children:t&&e.jsx("ul",{className:s.default["sub-item-list"],children:t})}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.default["stepper-link-container"],children:e.jsx("a",{href:N,onClick:n=>{n.preventDefault(),u&&u()},children:e.jsxs(j.Text,{element:"span",className:s.default["stepper-link"],children:[d,r&&l==="error"&&e.jsx(c.Icon,{name:"error",color:"danger",size:16,display:"inline",className:s.default["stepper-icon"]}),r&&l==="completed"&&e.jsx(c.Icon,{name:"check",color:"success",size:16,display:"inline",className:s.default["stepper-icon"]})]})})}),e.jsx(i.Row,{children:e.jsx(o.Col,{children:a})})]})}),e.jsx("div",{className:s.default["stepper-line"]})]})};exports.StepItem=R;

package/src/community/components/vertical-stepper/step-item/step-item.es.js

@@ -3,7 +3,7 @@ import j from "../../../../../external/classnames/index.es.js";
 import I from "react";
 import { Text as v } from "../../../../tedi/components/base/typography/text/text.es.js";
 import { Icon as t } from "../../../../tedi/components/base/icon/icon.es.js";
-import { Collapse as R } from "../../../../tedi/components/buttons/collapse/collapse.es.js";
+import { Collapse as R } from "../../../../tedi/components/content/collapse/collapse.es.js";
 import e from "../vertical-stepper.module.scss.es.js";
 import { Row as c } from "../../../../tedi/components/layout/grid/row.es.js";
 import { Col as o } from "../../../../tedi/components/layout/grid/col.es.js";

package/src/community/components/vertical-stepper/vertical-stepper.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("../../../../external/classnames/index.cjs.js"),t=require("./vertical-stepper.module.scss.cjs.js"),r=s=>{const{className:l,children:c,isCompact:a}=s,o=u.default(t.default.stepper,l,{[t.default["stepper--compact"]]:a});return e.jsx("nav",{children:e.jsx("ol",{role:"tree",className:o,children:c})})};exports.VerticalStepper=r;exports.default=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../../../external/classnames/index.cjs.js"),t=require("./vertical-stepper.module.scss.cjs.js"),p=r=>{const{className:c,children:s,isCompact:l}=r,a=o.default(t.default.stepper,c,{[t.default["stepper--compact"]]:l});return e.jsx("nav",{children:e.jsx("ol",{role:"tree",className:a,children:s})})};exports.VerticalStepper=p;

package/src/community/components/vertical-stepper/vertical-stepper.es.js

@@ -1,11 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
-import c from "../../../../external/classnames/index.es.js";
+import m from "../../../../external/classnames/index.es.js";
 import r from "./vertical-stepper.module.scss.es.js";
 const n = (t) => {
-  const { className: s, children: o, isCompact: p } = t, a = c(r.stepper, s, { [r["stepper--compact"]]: p });
-  return /* @__PURE__ */ e("nav", { children: /* @__PURE__ */ e("ol", { role: "tree", className: a, children: o }) });
+  const { className: s, children: o, isCompact: p } = t, c = m(r.stepper, s, { [r["stepper--compact"]]: p });
+  return /* @__PURE__ */ e("nav", { children: /* @__PURE__ */ e("ol", { role: "tree", className: c, children: o }) });
 };
 export {
-  n as VerticalStepper,
-  n as default
+  n as VerticalStepper
 };

package/src/community/helpers/hooks/use-breakpoint-props.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),r=require("./use-breakpoint.cjs.js"),l=require("../../../../external/lodash-es/pickBy.cjs.js"),k=require("../../../../external/lodash-es/omit.cjs.js"),B=(i="xs")=>{const e=r.useBreakpoint(i),t=s.useMemo(()=>e?r.breakpoints.slice(0,r.breakpoints.indexOf(e)+1):[],[e]);return{getCurrentBreakpointProps:s.useCallback((o,a={})=>{const{sm:x,md:f,lg:g,xl:m,xxl:b,...u}=o,c=[...t.map(n=>l.default(n==="xs"?u:o[n],p=>p!==void 0))].filter(Boolean);return Object.assign(k.default(a,"defaultServerBreakpoint"),...c)},[t])}};exports.useBreakpointProps=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),t=require("./use-breakpoint.cjs.js"),l=require("../../../../external/lodash-es/pickBy.cjs.js"),k=require("../../../../external/lodash-es/omit.cjs.js"),B=(i="xs")=>{const e=t.default(i),r=s.useMemo(()=>e?t.breakpoints.slice(0,t.breakpoints.indexOf(e)+1):[],[e]);return{getCurrentBreakpointProps:s.useCallback((o,a={})=>{const{sm:f,md:x,lg:g,xl:m,xxl:b,...u}=o,c=[...r.map(n=>l.default(n==="xs"?u:o[n],p=>p!==void 0))].filter(Boolean);return Object.assign(k.default(a,"defaultServerBreakpoint"),...c)},[r])}};exports.useBreakpointProps=B;

package/src/community/helpers/hooks/use-breakpoint-props.es.js

@@ -1,5 +1,5 @@
 import n from "react";
-import { useBreakpoint as u, breakpoints as s } from "./use-breakpoint.es.js";
+import u, { breakpoints as s } from "./use-breakpoint.es.js";
 import k from "../../../../external/lodash-es/pickBy.es.js";
 import l from "../../../../external/lodash-es/omit.es.js";
 const O = (i = "xs") => {

package/src/community/helpers/hooks/use-layout.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("./use-breakpoint.cjs.js"),o=["xs","sm"],r=["md"],i=["lg","xl","xxl"],a=t=>{const s=k.useBreakpoint(),p=t==null?void 0:t.reduce((e,n)=>{switch(n){case"desktop":return[...e,...i];case"tablet":return[...e,...r];case"mobile":return[...e,...o];default:return[...e,n]}},[]);return s?p.includes(s):!1};exports.default=a;exports.desktopBreakpoints=i;exports.mobileBreakpoints=o;exports.tabletBreakpoints=r;exports.useLayout=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./use-breakpoint.cjs.js"),o=["xs","sm"],r=["md"],i=["lg","xl","xxl"],a=t=>{const s=d.default(),p=t==null?void 0:t.reduce((e,n)=>{switch(n){case"desktop":return[...e,...i];case"tablet":return[...e,...r];case"mobile":return[...e,...o];default:return[...e,n]}},[]);return s?p.includes(s):!1};exports.default=a;exports.desktopBreakpoints=i;exports.mobileBreakpoints=o;exports.tabletBreakpoints=r;exports.useLayout=a;

package/src/community/helpers/hooks/use-layout.es.js

@@ -1,4 +1,4 @@
-import { useBreakpoint as o } from "./use-breakpoint.es.js";
+import o from "./use-breakpoint.es.js";
 const i = ["xs", "sm"], p = ["md"], k = ["lg", "xl", "xxl"], a = (t) => {
   const s = o(), r = t == null ? void 0 : t.reduce((e, n) => {
     switch (n) {

package/src/tedi/components/buttons/button-group/button-group.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),n=require("../../base/icon/icon.cjs.js"),x=require("../button/button.cjs.js"),r=require("./button-group.module.scss.cjs.js"),C=require("../../../providers/label-provider/use-labels.cjs.js"),L=require("../../../helpers/hooks/use-breakpoint.cjs.js"),l=require("../../overlays/dropdown/dropdown.cjs.js"),b=k=>{const{getLabel:j}=C.useLabels(),{children:q,className:w,type:c="primary",onSelectionChange:i,stretch:v=!1,ariaLabel:I,size:f="default",enableMobileDropdown:A=!1,mobileBreakpoint:N="md",dropdownLabel:y=j("sidenav.submenu"),dropdownLabelMode:R="static"}=k,B=L.useBreakpoint(),D=L.isBreakpointBelow(B,N),m=_.Children.toArray(q).filter(e=>_.isValidElement(e)&&e.type===x.Button),s=m.find(e=>e.props.isActive),M=R==="static"?y:(s==null?void 0:s.props.children)??y,a=s==null?void 0:s.props.iconLeft,d=s==null?void 0:s.props.icon;return D&&A?o.jsxs(l.Dropdown,{width:"trigger",children:[o.jsx(l.Dropdown.Trigger,{children:o.jsxs(x.Button,{visualType:c,className:g.default(r.default["tedi-button-group__dropdown-trigger"],r.default[`tedi-button-group__dropdown-trigger--${c}`],w),noStyle:!0,fullWidth:!0,children:[a?o.jsx(n.Icon,{name:typeof a=="string"?a:a.name,color:"inherit"}):d?o.jsx(n.Icon,{name:typeof d=="string"?d:d.name,color:"inherit"}):o.jsx(n.Icon,{name:"menu",color:"inherit"}),M]})}),o.jsx(l.Dropdown.Content,{children:m.map((e,u)=>o.jsxs(l.Dropdown.Item,{index:u,active:e==null?void 0:e.props.isActive,disabled:e==null?void 0:e.props.disabled,onClick:t=>{var p,h;e.props.disabled||(t.type==="click"&&((h=(p=e.props).onClick)==null||h.call(p,t)),e.props.id&&(i==null||i(e.props.id)))},className:r.default["tedi-button-group__dropdown-item"],children:[e.props.iconLeft&&o.jsx(n.Icon,{name:typeof e.props.iconLeft=="string"?e.props.iconLeft:e.props.iconLeft.name,color:"inherit"}),e.props.children,e.props.iconRight&&o.jsx(n.Icon,{name:typeof e.props.iconRight=="string"?e.props.iconRight:e.props.iconRight.name,color:"inherit"}),e.props.isActive&&o.jsx("span",{className:"sr-only",children:j("button-group.selected")})]},e.props.id||u))})]}):o.jsx("div",{className:g.default(r.default["tedi-button-group"],r.default[`tedi-button-group--${c}`],{[r.default["tedi-button-group--stretch"]]:v},w),role:"group","aria-label":I,children:m.map(e=>_.cloneElement(e,{className:g.default(r.default["tedi-button-group__item"],{[r.default["tedi-button-group__item--active"]]:e.props.isActive,[r.default["tedi-button-group__item--disabled"]]:e.props.disabled,[r.default[`tedi-button-group__item--size-${f}`]]:f},e.props.className),size:f,"aria-pressed":!!e.props.isActive,onClick:u=>{var t,p;(p=(t=e.props).onClick)==null||p.call(t,u),e.props.id&&(i==null||i(e.props.id))}}))})};exports.ButtonGroup=b;exports.default=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("../../../../../external/classnames/index.cjs.js"),y=require("react"),n=require("../../base/icon/icon.cjs.js"),x=require("../button/button.cjs.js"),r=require("./button-group.module.scss.cjs.js"),M=require("../../../providers/label-provider/use-labels.cjs.js"),L=require("../../../helpers/hooks/use-breakpoint.cjs.js"),u=require("../../overlays/dropdown/dropdown.cjs.js"),C=b=>{const{getLabel:_}=M.useLabels(),{children:k,className:j,type:c="primary",onSelectionChange:s,stretch:q=!1,ariaLabel:v,size:f="default",enableMobileDropdown:I=!1,mobileBreakpoint:A="md",dropdownLabel:w=_("sidenav.submenu"),dropdownLabelMode:N="static"}=b,R=L.default(),D=L.isBreakpointBelow(R,A),m=y.Children.toArray(k).filter(e=>y.isValidElement(e)&&e.type===x.Button),i=m.find(e=>e.props.isActive),B=N==="static"?w:(i==null?void 0:i.props.children)??w,a=i==null?void 0:i.props.iconLeft,d=i==null?void 0:i.props.icon;return D&&I?o.jsxs(u.Dropdown,{width:"trigger",children:[o.jsx(u.Dropdown.Trigger,{children:o.jsxs(x.Button,{visualType:c,className:g.default(r.default["tedi-button-group__dropdown-trigger"],r.default[`tedi-button-group__dropdown-trigger--${c}`],j),noStyle:!0,fullWidth:!0,children:[a?o.jsx(n.Icon,{name:typeof a=="string"?a:a.name,color:"inherit"}):d?o.jsx(n.Icon,{name:typeof d=="string"?d:d.name,color:"inherit"}):o.jsx(n.Icon,{name:"menu",color:"inherit"}),B]})}),o.jsx(u.Dropdown.Content,{children:m.map((e,l)=>o.jsxs(u.Dropdown.Item,{index:l,active:e==null?void 0:e.props.isActive,disabled:e==null?void 0:e.props.disabled,onClick:t=>{var p,h;e.props.disabled||(t.type==="click"&&((h=(p=e.props).onClick)==null||h.call(p,t)),e.props.id&&(s==null||s(e.props.id)))},className:r.default["tedi-button-group__dropdown-item"],children:[e.props.iconLeft&&o.jsx(n.Icon,{name:typeof e.props.iconLeft=="string"?e.props.iconLeft:e.props.iconLeft.name,color:"inherit"}),e.props.children,e.props.iconRight&&o.jsx(n.Icon,{name:typeof e.props.iconRight=="string"?e.props.iconRight:e.props.iconRight.name,color:"inherit"}),e.props.isActive&&o.jsx("span",{className:"sr-only",children:_("button-group.selected")})]},e.props.id||l))})]}):o.jsx("div",{className:g.default(r.default["tedi-button-group"],r.default[`tedi-button-group--${c}`],{[r.default["tedi-button-group--stretch"]]:q},j),role:"group","aria-label":v,children:m.map(e=>y.cloneElement(e,{className:g.default(r.default["tedi-button-group__item"],{[r.default["tedi-button-group__item--active"]]:e.props.isActive,[r.default["tedi-button-group__item--disabled"]]:e.props.disabled,[r.default[`tedi-button-group__item--size-${f}`]]:f},e.props.className),size:f,"aria-pressed":!!e.props.isActive,onClick:l=>{var t,p;(p=(t=e.props).onClick)==null||p.call(t,l),e.props.id&&(s==null||s(e.props.id))}}))})};exports.ButtonGroup=C;

package/src/tedi/components/buttons/button-group/button-group.es.js

@@ -5,7 +5,7 @@ import { Icon as a } from "../../base/icon/icon.es.js";
 import { Button as k } from "../button/button.es.js";
 import r from "./button-group.module.scss.es.js";
 import { useLabels as D } from "../../../providers/label-provider/use-labels.es.js";
-import { useBreakpoint as E, isBreakpointBelow as T } from "../../../helpers/hooks/use-breakpoint.es.js";
+import E, { isBreakpointBelow as T } from "../../../helpers/hooks/use-breakpoint.es.js";
 import { Dropdown as d } from "../../overlays/dropdown/dropdown.es.js";
 const P = (N) => {
   const { getLabel: _ } = D(), {
@@ -107,6 +107,5 @@ const P = (N) => {
   );
 };
 export {
-  P as ButtonGroup,
-  P as default
+  P as ButtonGroup
 };

package/src/tedi/components/buttons/card-button/card-button.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),i=require("../../../../../external/classnames/index.cjs.js"),l=require("react"),m=require("./card-button.module.scss.cjs.js"),n=l.forwardRef((o,r)=>{const{as:a,children:u,className:s,...t}=o,e=a||"button",c=e==="button";return d.jsx(e,{"data-name":"card-button",...t,...c?{type:t.type??"button"}:{},ref:r,className:i.default(m.default["tedi-card-button"],s),children:u})});n.displayName="CardButton";const b=n;exports.CardButton=b;

package/src/tedi/components/buttons/card-button/card-button.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { PolymorphicComponentPropWithRef } from '../../../helpers/polymorphic/types';
+export interface CardButtonBaseProps {
+    /**
+     * A single `<Card>` to render as the interactive surface. The host element provides the
+     * interaction semantics and applies the hover / active / focus / disabled states to the
+     * card and its blocks. Keep it to one card and avoid nested interactive elements.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name on the host element.
+     */
+    className?: string;
+}
+export type CardButtonProps<C extends React.ElementType = 'button'> = PolymorphicComponentPropWithRef<C, CardButtonBaseProps>;
+export declare const CardButton: <C extends React.ElementType = "button">(props: CardButtonProps<C>) => React.ReactElement | null;
+export default CardButton;

package/src/tedi/components/buttons/card-button/card-button.es.js

@@ -0,0 +1,25 @@
+import { jsx as c } from "react/jsx-runtime";
+import u from "../../../../../external/classnames/index.es.js";
+import { forwardRef as d } from "react";
+import i from "./card-button.module.scss.es.js";
+const n = d(
+  (r, s) => {
+    const { as: a, children: e, className: m, ...t } = r, o = a || "button";
+    return /* @__PURE__ */ c(
+      o,
+      {
+        "data-name": "card-button",
+        ...t,
+        ...o === "button" ? { type: t.type ?? "button" } : {},
+        ref: s,
+        className: u(i["tedi-card-button"], m),
+        children: e
+      }
+    );
+  }
+);
+n.displayName = "CardButton";
+const y = n;
+export {
+  y as CardButton
+};

package/src/tedi/components/buttons/card-button/card-button.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-card-button":"tedi-card-button-57ad7420"};exports.default=e;

package/src/tedi/components/buttons/card-button/card-button.module.scss.es.js

@@ -0,0 +1,6 @@
+const t = {
+  "tedi-card-button": "tedi-card-button-57ad7420"
+};
+export {
+  t as default
+};

package/src/tedi/components/buttons/card-button/index.d.ts

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

package/src/tedi/components/buttons/collapse-button/collapse-button.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),L=require("../../../../../external/classnames/index.cjs.js"),T=require("react"),d=require("../../base/icon/icon.cjs.js"),e=require("./collapse-button.module.scss.cjs.js"),v=require("../../../providers/label-provider/use-labels.cjs.js"),b=T.forwardRef((f,m)=>{const{open:a,onOpenChange:s,openText:x,closeText:_,hideText:t=!1,arrowType:o="default",size:n="default",inverted:y=!1,underline:h=!0,className:j,onClick:c,"aria-label":i,...N}=f,{getLabel:r}=v.useLabels(),u=a?_??r("close"):x??r("open"),q=t?i??u:i,C=p=>{c==null||c(p),!p.defaultPrevented&&(s==null||s(!a))},B=L.default(e.default["tedi-collapse-button"],{[e.default["tedi-collapse-button--open"]]:a,[e.default["tedi-collapse-button--small"]]:n==="small",[e.default["tedi-collapse-button--inverted"]]:y&&o!=="secondary",[e.default["tedi-collapse-button--icon-only"]]:t,[e.default["tedi-collapse-button--neutral"]]:t&&o!=="secondary",[e.default["tedi-collapse-button--secondary"]]:t&&o==="secondary",[e.default["tedi-collapse-button--no-underline"]]:!t&&!h},j);return l.jsxs("button",{ref:m,type:"button",...N,className:B,onClick:C,"aria-expanded":a,"aria-label":q,children:[!t&&l.jsx("span",{className:e.default["tedi-collapse-button__text"],children:u}),t?o==="secondary"?l.jsx("span",{className:e.default["tedi-collapse-button__icon-wrapper"],children:l.jsx(d.Icon,{className:e.default["tedi-collapse-button__icon"],name:"expand_more",color:"inherit",filled:!0,size:24})}):l.jsx(d.Icon,{className:e.default["tedi-collapse-button__icon"],name:"expand_more",color:"inherit",filled:!0,size:n==="small"?18:24}):l.jsx("span",{className:e.default["tedi-collapse-button__icon-pad"],children:l.jsx(d.Icon,{className:e.default["tedi-collapse-button__icon"],name:"expand_more",color:"inherit",size:n==="small"?16:18})})]})});b.displayName="CollapseButton";const z=b;exports.CollapseButton=z;

package/src/tedi/components/buttons/collapse-button/collapse-button.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+export type CollapseButtonArrowType = 'default' | 'secondary';
+export type CollapseButtonSize = 'default' | 'small';
+export interface CollapseButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'onChange' | 'children'> {
+    /**
+     * Current open state. Bind alongside `onOpenChange` to keep in sync.
+     */
+    open: boolean;
+    /**
+     * Called when the user toggles the button. Receives the next open state.
+     * Standard native `onClick` still fires too; if it calls `preventDefault`
+     * the toggle is suppressed.
+     */
+    onOpenChange?: (next: boolean) => void;
+    /**
+     * Label shown when collapsed. Rendered literally — translate at the call
+     * site if needed. When omitted, falls back to the `LabelProvider`'s
+     * translated `'open'` label.
+     */
+    openText?: string;
+    /**
+     * Label shown when expanded. Rendered literally — translate at the call
+     * site if needed. When omitted, falls back to the `LabelProvider`'s
+     * translated `'close'` label.
+     */
+    closeText?: string;
+    /**
+     * Hide the label and render the chevron only.
+     * @default false
+     */
+    hideText?: boolean;
+    /**
+     * Chevron style. Only takes effect with `hideText` (icon-only mode).
+     * @default default
+     */
+    arrowType?: CollapseButtonArrowType;
+    /**
+     * Visual size.
+     * @default default
+     */
+    size?: CollapseButtonSize;
+    /**
+     * Light text and icon for placement on a dark / brand background. Ignored
+     * when `arrowType` is `secondary` (no inverted form in the design).
+     * @default false
+     */
+    inverted?: boolean;
+    /**
+     * Underline the text label. Set `false` in contexts where the chevron is
+     * the sole affordance (e.g. inside an accordion header). Has no effect in
+     * icon-only mode.
+     * @default true
+     */
+    underline?: boolean;
+    /**
+     * Accessible label. Required when `hideText` is `true`.
+     */
+    'aria-label'?: string;
+}
+export declare const CollapseButton: React.ForwardRefExoticComponent<CollapseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default CollapseButton;

package/src/tedi/components/buttons/collapse-button/collapse-button.es.js

@@ -0,0 +1,84 @@
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import w from "../../../../../external/classnames/index.es.js";
+import B from "react";
+import { Icon as i } from "../../base/icon/icon.es.js";
+import e from "./collapse-button.module.scss.es.js";
+import { useLabels as j } from "../../../providers/label-provider/use-labels.es.js";
+const u = B.forwardRef((b, f) => {
+  const {
+    open: l,
+    onOpenChange: s,
+    openText: _,
+    closeText: x,
+    hideText: t = !1,
+    arrowType: a = "default",
+    size: n = "default",
+    inverted: y = !1,
+    underline: N = !0,
+    className: h,
+    onClick: r,
+    "aria-label": c,
+    ...C
+  } = b, { getLabel: d } = j(), p = l ? x ?? d("close") : _ ?? d("open"), z = t ? c ?? p : c, L = (m) => {
+    r == null || r(m), !m.defaultPrevented && (s == null || s(!l));
+  }, T = w(
+    e["tedi-collapse-button"],
+    {
+      [e["tedi-collapse-button--open"]]: l,
+      [e["tedi-collapse-button--small"]]: n === "small",
+      [e["tedi-collapse-button--inverted"]]: y && a !== "secondary",
+      [e["tedi-collapse-button--icon-only"]]: t,
+      [e["tedi-collapse-button--neutral"]]: t && a !== "secondary",
+      [e["tedi-collapse-button--secondary"]]: t && a === "secondary",
+      [e["tedi-collapse-button--no-underline"]]: !t && !N
+    },
+    h
+  );
+  return /* @__PURE__ */ v(
+    "button",
+    {
+      ref: f,
+      type: "button",
+      ...C,
+      className: T,
+      onClick: L,
+      "aria-expanded": l,
+      "aria-label": z,
+      children: [
+        !t && /* @__PURE__ */ o("span", { className: e["tedi-collapse-button__text"], children: p }),
+        t ? a === "secondary" ? /* @__PURE__ */ o("span", { className: e["tedi-collapse-button__icon-wrapper"], children: /* @__PURE__ */ o(
+          i,
+          {
+            className: e["tedi-collapse-button__icon"],
+            name: "expand_more",
+            color: "inherit",
+            filled: !0,
+            size: 24
+          }
+        ) }) : /* @__PURE__ */ o(
+          i,
+          {
+            className: e["tedi-collapse-button__icon"],
+            name: "expand_more",
+            color: "inherit",
+            filled: !0,
+            size: n === "small" ? 18 : 24
+          }
+        ) : /* @__PURE__ */ o("span", { className: e["tedi-collapse-button__icon-pad"], children: /* @__PURE__ */ o(
+          i,
+          {
+            className: e["tedi-collapse-button__icon"],
+            name: "expand_more",
+            color: "inherit",
+            size: n === "small" ? 16 : 18
+          }
+        ) })
+      ]
+    }
+  );
+});
+u.displayName = "CollapseButton";
+const q = u;
+export {
+  q as CollapseButton
+};

package/src/tedi/components/buttons/collapse-button/collapse-button.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-collapse-button":"tedi-collapse-button-ae05875b","tedi-collapse-button__text":"tedi-collapse-button__text-6763f718","tedi-collapse-button--no-underline":"tedi-collapse-button--no-underline-26e3e8f3","tedi-collapse-button__icon":"tedi-collapse-button__icon-343170a2","tedi-collapse-button__icon-pad":"tedi-collapse-button__icon-pad-352e26ef","tedi-collapse-button__icon-wrapper":"tedi-collapse-button__icon-wrapper-8eda7a8b","tedi-collapse-button--open":"tedi-collapse-button--open-2f66bdca","tedi-collapse-button--small":"tedi-collapse-button--small-2e823f5a","tedi-collapse-button--icon-only":"tedi-collapse-button--icon-only-65e88949","tedi-collapse-button--neutral":"tedi-collapse-button--neutral-16b6a760","tedi-collapse-button--secondary":"tedi-collapse-button--secondary-f3a0b2c7","tedi-collapse-button--inverted":"tedi-collapse-button--inverted-288a9527"};exports.default=t;

package/src/tedi/components/buttons/collapse-button/collapse-button.module.scss.es.js

@@ -0,0 +1,17 @@
+const t = {
+  "tedi-collapse-button": "tedi-collapse-button-ae05875b",
+  "tedi-collapse-button__text": "tedi-collapse-button__text-6763f718",
+  "tedi-collapse-button--no-underline": "tedi-collapse-button--no-underline-26e3e8f3",
+  "tedi-collapse-button__icon": "tedi-collapse-button__icon-343170a2",
+  "tedi-collapse-button__icon-pad": "tedi-collapse-button__icon-pad-352e26ef",
+  "tedi-collapse-button__icon-wrapper": "tedi-collapse-button__icon-wrapper-8eda7a8b",
+  "tedi-collapse-button--open": "tedi-collapse-button--open-2f66bdca",
+  "tedi-collapse-button--small": "tedi-collapse-button--small-2e823f5a",
+  "tedi-collapse-button--icon-only": "tedi-collapse-button--icon-only-65e88949",
+  "tedi-collapse-button--neutral": "tedi-collapse-button--neutral-16b6a760",
+  "tedi-collapse-button--secondary": "tedi-collapse-button--secondary-f3a0b2c7",
+  "tedi-collapse-button--inverted": "tedi-collapse-button--inverted-288a9527"
+};
+export {
+  t as default
+};

package/src/tedi/components/content/accordion/accordion-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext(null),o=()=>t.useContext(e);exports.AccordionContext=e;exports.useAccordionContext=o;

package/src/tedi/components/content/accordion/accordion-context.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export interface AccordionContextValue {
+    /**
+     * Whether the accordion allows multiple items to be expanded at the same time.
+     */
+    allowMultiple: boolean;
+    /**
+     * Group-level default for items' initial expanded state. Items use this value
+     * when they don't specify their own `defaultExpanded`. Per-item overrides
+     * (including explicit `false`) take precedence.
+     */
+    defaultExpanded: boolean;
+    /**
+     * Called by an AccordionItem after it has updated its expanded state to `true`.
+     * In single-expand mode the Accordion will collapse all other registered items.
+     */
+    notifyExpanded: (id: string) => void;
+    /**
+     * Allows AccordionItem to register itself so that the Accordion can collapse it
+     * when another item is expanded (single-expand mode).
+     *
+     * Returns an unregister callback.
+     */
+    register: (id: string, setExpanded: (value: boolean) => void) => () => void;
+}
+export declare const AccordionContext: React.Context<AccordionContextValue | null>;
+export declare const useAccordionContext: () => AccordionContextValue | null;

package/src/tedi/components/content/accordion/accordion-context.es.js

@@ -0,0 +1,6 @@
+import t from "react";
+const o = t.createContext(null), n = () => t.useContext(o);
+export {
+  o as AccordionContext,
+  n as useAccordionContext
+};

package/src/tedi/components/content/accordion/accordion-item/accordion-item-context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),o=t.createContext(null),r=n=>{const e=t.useContext(o);if(!e)throw new Error(`<${n}> must be rendered inside an <Accordion.Item>.`);return e};exports.AccordionItemContext=o;exports.useAccordionItemContext=r;

package/src/tedi/components/content/accordion/accordion-item/accordion-item-context.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+/**
+ * Context exposed by `AccordionItem` to its `Header` and `Content` sub-components.
+ *
+ * The item owns the expanded state, the shared layout flags (`showIconCard`, `selected`)
+ * and the ARIA wiring (`headerId`, `contentId`). Header and content only render
+ * appearance and project user content.
+ */
+export interface AccordionItemContextValue {
+    /** ID of the element acting as the header trigger (used for `aria-labelledby` on content). */
+    headerId: string;
+    /** ID of the content panel (used for `aria-controls` on the trigger). */
+    contentId: string;
+    /** Whether the item is currently expanded. */
+    expanded: boolean;
+    /** Toggles the expanded state. No-op when the item is disabled. */
+    toggle: () => void;
+    /** Whether the icon-card layout is active for this item. */
+    showIconCard: boolean;
+    /** Whether the item is disabled (header is non-interactive, state can't be toggled by user). */
+    disabled: boolean;
+}
+export declare const AccordionItemContext: React.Context<AccordionItemContextValue | null>;
+export declare const useAccordionItemContext: (componentName: string) => AccordionItemContextValue;

package/src/tedi/components/content/accordion/accordion-item/accordion-item-context.es.js

@@ -0,0 +1,11 @@
+import e from "react";
+const n = e.createContext(null), c = (o) => {
+  const t = e.useContext(n);
+  if (!t)
+    throw new Error(`<${o}> must be rendered inside an <Accordion.Item>.`);
+  return t;
+};
+export {
+  n as AccordionItemContext,
+  c as useAccordionItemContext
+};

package/src/tedi/components/content/accordion/accordion-item/accordion-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),M=require("../../../../../../external/classnames/index.cjs.js"),a=require("react"),i=require("../accordion.module.scss.cjs.js"),N=require("../accordion-context.cjs.js"),O=require("../accordion-item-content/accordion-item-content.cjs.js"),S=require("../accordion-item-header/accordion-item-header.cjs.js"),$=require("./accordion-item-context.cjs.js"),L=u=>typeof u.expanded=="boolean",_=u=>{const{children:w,id:r,defaultExpanded:A,expanded:f,onToggle:t,showIconCard:l=!1,selected:b=!1,iconCard:q,disabled:d=!1,openOnHashMatch:p=!1}=u,v=a.useId(),c=r??v,h=`${c}-header`,I=`${c}-content`,e=N.useAccordionContext(),y=A??(e==null?void 0:e.defaultExpanded)??!1,o=L(u),[j,m]=a.useState(y),s=o?f:j;a.useEffect(()=>{if(!e)return;const n=E=>{o?t==null||t(E):m(E)};return e.register(c,n)},[e,c,o,t]);const C=a.useCallback(()=>{if(d)return;const n=!s;o||m(n),t==null||t(n),n&&(e==null||e.notifyExpanded(c))},[e,c,o,d,s,t]);a.useEffect(()=>{if(!p||!r||d||typeof window>"u")return;const n=()=>{window.location.hash===`#${r}`&&(o?f||t==null||t(!0):m(!0),e==null||e.notifyExpanded(r))};return n(),window.addEventListener("hashchange",n),()=>window.removeEventListener("hashchange",n)},[p,r,d,o,f,t]);const H=a.useMemo(()=>({headerId:h,contentId:I,expanded:s,toggle:C,showIconCard:l,disabled:d}),[h,I,s,C,l,d]),P=M.default(i.default["tedi-accordion__item"],{[i.default["tedi-accordion__item--selected"]]:b,[i.default["tedi-accordion__item--expanded"]]:s,[i.default["tedi-accordion__item--disabled"]]:d,[i.default["tedi-accordion__item--with-icon-card"]]:l});return x.jsx($.AccordionItemContext.Provider,{value:H,children:x.jsxs("div",{"data-name":"accordion-item","data-testid":"tedi-accordion-item",className:P,children:[l&&x.jsx("span",{"data-name":"accordion-icon-card",className:i.default["tedi-accordion__icon-card"],children:q}),w]})})};_.displayName="AccordionItem";const R=Object.assign(_,{Header:S.AccordionItemHeader,Content:O.AccordionItemContent});exports.AccordionItem=R;

package/src/tedi/components/content/accordion/accordion-item/accordion-item.d.ts

@@ -0,0 +1,76 @@
+import { default as React } from 'react';
+export interface AccordionItemProps {
+    /**
+     * Inner content. Must include `Accordion.Item.Header` and `Accordion.Item.Content`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Stable id used for the header/content ARIA wiring. Auto-generated if omitted.
+     */
+    id?: string;
+    /**
+     * Whether the accordion item is expanded initially (uncontrolled).
+     * Does not control the expanded state after initialization.
+     *
+     * When omitted, falls back to the parent `Accordion`'s `defaultExpanded` (or `false`).
+     * Pass an explicit boolean to override the group default — including `false` to
+     * keep an individual item collapsed when the group default is `true`.
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Controlled expanded state. When provided the item operates in controlled mode
+     * and `onToggle` should be used to react to user-driven toggles.
+     */
+    expanded?: boolean;
+    /**
+     * Called whenever the user toggles the item. Receives the next expanded state.
+     */
+    onToggle?: (expanded: boolean) => void;
+    /**
+     * Enables the icon-card layout variant. Affects both header and content styling,
+     * which is why it lives on the item.
+     * @default false
+     */
+    showIconCard?: boolean;
+    /**
+     * Marks the accordion item as selected (applies a visual 'selected' state).
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Icon card content rendered as a sibling of the header/content (only when `showIconCard` is true).
+     */
+    iconCard?: React.ReactNode;
+    /**
+     * Disables the item — the header trigger becomes non-interactive (`disabled`) and the
+     * item's expanded state can no longer be toggled by user interaction. The current
+     * state is preserved (e.g. a disabled item that's `defaultExpanded` stays open).
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, the item auto-expands if `window.location.hash` matches its `id`
+     * (e.g. `https://example.com/page#my-item`). Also re-runs on `hashchange`, so
+     * navigating between in-page links updates which item is open.
+     *
+     * Requires an explicit `id` prop — the auto-generated React id isn't stable enough
+     * for deep-linking. No-op when `id` is omitted.
+     * @default false
+     */
+    openOnHashMatch?: boolean;
+}
+export declare const AccordionItem: {
+    (props: AccordionItemProps): JSX.Element;
+    displayName: string;
+} & {
+    Header: {
+        (props: import('..').AccordionItemHeaderProps): JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: import('..').AccordionItemContentProps): JSX.Element;
+        displayName: string;
+    };
+};
+export default AccordionItem;

package/src/tedi/components/content/accordion/accordion-item/accordion-item.es.js

@@ -0,0 +1,69 @@
+import { jsx as E, jsxs as M } from "react/jsx-runtime";
+import $ from "../../../../../../external/classnames/index.es.js";
+import i from "react";
+import r from "../accordion.module.scss.es.js";
+import { useAccordionContext as L } from "../accordion-context.es.js";
+import { AccordionItemContent as O } from "../accordion-item-content/accordion-item-content.es.js";
+import { AccordionItemHeader as k } from "../accordion-item-header/accordion-item-header.es.js";
+import { AccordionItemContext as D } from "./accordion-item-context.es.js";
+const F = (m) => typeof m.expanded == "boolean", w = (m) => {
+  const {
+    children: C,
+    id: c,
+    defaultExpanded: A,
+    expanded: l,
+    onToggle: t,
+    showIconCard: f = !1,
+    selected: b = !1,
+    iconCard: v,
+    disabled: d = !1,
+    openOnHashMatch: u = !1
+  } = m, y = i.useId(), a = c ?? y, x = `${a}-header`, h = `${a}-content`, e = L(), H = A ?? (e == null ? void 0 : e.defaultExpanded) ?? !1, o = F(m), [N, p] = i.useState(H), s = o ? l : N;
+  i.useEffect(() => {
+    if (!e) return;
+    const n = (_) => {
+      o ? t == null || t(_) : p(_);
+    };
+    return e.register(a, n);
+  }, [e, a, o, t]);
+  const I = i.useCallback(() => {
+    if (d) return;
+    const n = !s;
+    o || p(n), t == null || t(n), n && (e == null || e.notifyExpanded(a));
+  }, [e, a, o, d, s, t]);
+  i.useEffect(() => {
+    if (!u || !c || d || typeof window > "u") return;
+    const n = () => {
+      window.location.hash === `#${c}` && (o ? l || t == null || t(!0) : p(!0), e == null || e.notifyExpanded(c));
+    };
+    return n(), window.addEventListener("hashchange", n), () => window.removeEventListener("hashchange", n);
+  }, [u, c, d, o, l, t]);
+  const P = i.useMemo(
+    () => ({
+      headerId: x,
+      contentId: h,
+      expanded: s,
+      toggle: I,
+      showIconCard: f,
+      disabled: d
+    }),
+    [x, h, s, I, f, d]
+  ), j = $(r["tedi-accordion__item"], {
+    [r["tedi-accordion__item--selected"]]: b,
+    [r["tedi-accordion__item--expanded"]]: s,
+    [r["tedi-accordion__item--disabled"]]: d,
+    [r["tedi-accordion__item--with-icon-card"]]: f
+  });
+  return /* @__PURE__ */ E(D.Provider, { value: P, children: /* @__PURE__ */ M("div", { "data-name": "accordion-item", "data-testid": "tedi-accordion-item", className: j, children: [
+    f && /* @__PURE__ */ E("span", { "data-name": "accordion-icon-card", className: r["tedi-accordion__icon-card"], children: v }),
+    C
+  ] }) });
+};
+w.displayName = "AccordionItem";
+const K = Object.assign(w, {
+  Header: k,
+  Content: O
+});
+export {
+  K as AccordionItem
+};

package/src/tedi/components/content/accordion/accordion-item-content/accordion-item-content.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),m=require("../../../../../../external/classnames/index.cjs.js"),t=require("../accordion.module.scss.cjs.js"),u=require("../accordion-item/accordion-item-context.cjs.js"),o=c=>{const{children:i,contentClass:d}=c,{headerId:r,contentId:a,expanded:e,showIconCard:s}=u.useAccordionItemContext("Accordion.Item.Content"),l=m.default(t.default["tedi-accordion-item-content"],{[t.default["tedi-accordion-item-content--with-icon-card"]]:s},d);return n.jsx("div",{"data-name":"accordion-item-content",id:a,className:l,role:e?"region":void 0,"aria-labelledby":r,"aria-hidden":!e,inert:e?void 0:"",children:n.jsx("div",{className:t.default["tedi-accordion-item-content__inner"],children:i})})};o.displayName="AccordionItemContent";exports.AccordionItemContent=o;

package/src/tedi/components/content/accordion/accordion-item-content/accordion-item-content.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export interface AccordionItemContentProps {
+    /**
+     * Collapsible content.
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom CSS class for the accordion content.
+     */
+    contentClass?: string;
+}
+export declare const AccordionItemContent: {
+    (props: AccordionItemContentProps): JSX.Element;
+    displayName: string;
+};
+export default AccordionItemContent;