@tedi-design-system/react 14.0.0-rc.1

package/src/community/components/table-of-contents/table-of-contents-item.es.js

@@ -0,0 +1,37 @@
+import { jsxs as d, Fragment as f, jsx as e } from "react/jsx-runtime";
+import g from "../../../../external/classnames/index.es.js";
+import { useContext as w } from "react";
+import { Separator as N } from "../../../tedi/components/misc/separator/separator.es.js";
+import { Icon as h } from "../icon/icon.es.js";
+import { Text as $ } from "../typography/text/text.es.js";
+import { TableOfContentsContext as T } from "./table-of-contents.es.js";
+import l from "./table-of-contents.module.scss.es.js";
+import { Col as i } from "../../../tedi/components/layout/grid/col.es.js";
+import { Row as p } from "../../../tedi/components/layout/grid/row.es.js";
+function j(u) {
+  const { children: n, content: r, isValid: a, separator: b, hideIcon: x, id: o, handleCloseModal: c } = u, { openItems: t, showIcons: C } = w(T), s = g(l["table-of-contents__icon"], {
+    [l["table-of-contents__icon--hidden"]]: x
+  });
+  return /* @__PURE__ */ d(f, { children: [
+    /* @__PURE__ */ e(i, { role: "treeitem", "aria-expanded": !!(o && (t != null && t.includes(o))), children: /* @__PURE__ */ d(p, { gutter: 2, children: [
+      C && /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(i, { width: "auto", children: a === !1 ? /* @__PURE__ */ e(h, { className: s, name: "warning", color: "important" }) : /* @__PURE__ */ e(h, { className: s, name: "check", color: a === !0 ? "positive" : "disabled" }) }) }),
+      /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e($, { element: "div", modifiers: "break-word", children: typeof r == "function" ? r == null ? void 0 : r({ closeModal: c }) : r }) })
+    ] }) }),
+    o && (t == null ? void 0 : t.includes(o)) && (n == null ? void 0 : n.map((_, m) => /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
+      p,
+      {
+        role: "treeitem",
+        element: "ul",
+        gutterX: 0,
+        gutterY: 2,
+        direction: "column",
+        className: l["table-of-contents__child"],
+        children: /* @__PURE__ */ e(j, { ..._, handleCloseModal: c }, `${o}-${m}`)
+      }
+    ) }, `${o}-${m}`))),
+    b && /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(N, {}) })
+  ] });
+}
+export {
+  j as TableOfContentsItem
+};

package/src/community/components/table-of-contents/table-of-contents-items.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("react"),q=require("react-dom"),f=require("../typography/heading/heading.cjs.js"),x=require("./table-of-contents-item.cjs.js"),j=require("../modal/modal-provider.cjs.js"),y=require("../../helpers/hooks/use-layout.cjs.js"),C=require("../../../tedi/components/layout/vertical-spacing/vertical-spacing.cjs.js"),I=require("../../../tedi/components/layout/grid/row.cjs.js"),O=s=>{const{items:r,setReturnFocus:e,showIcons:a,heading:l,breakToMobile:c=["mobile"],className:u}=s,d=y.useLayout(c),m=a?!0:!d,{closeModal:n}=i.useContext(j.ModalContext),o=i.useId(),h=()=>{q.flushSync(()=>{e==null||e(!1)}),n==null||n(),e==null||e(!0)};return t.jsxs(C.VerticalSpacing,{size:.5,className:u,children:[m&&t.jsx(f.Heading,{element:"h3",modifiers:"h4",id:o,children:l}),t.jsx("nav",{"aria-labelledby":o,children:t.jsx(I.Row,{role:"tree",element:"ul",direction:"column",gap:2,children:r.map((b,g)=>t.jsx(x.TableOfContentsItem,{handleCloseModal:h,...b},`toc-item-${g}`))})})]})};exports.TableOfContentsItems=O;

package/src/community/components/table-of-contents/table-of-contents-items.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TableOfContentsProps } from './table-of-contents';
+export declare const TableOfContentsItems: (props: TableOfContentsProps & {
+    setReturnFocus?: React.Dispatch<React.SetStateAction<boolean>>;
+}) => import("react/jsx-runtime").JSX.Element;

package/src/community/components/table-of-contents/table-of-contents-items.es.js

@@ -0,0 +1,23 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import r from "react";
+import { flushSync as x } from "react-dom";
+import { Heading as C } from "../typography/heading/heading.es.js";
+import { TableOfContentsItem as g } from "./table-of-contents-item.es.js";
+import { ModalContext as y } from "../modal/modal-provider.es.js";
+import { useLayout as I } from "../../helpers/hooks/use-layout.es.js";
+import { VerticalSpacing as T } from "../../../tedi/components/layout/vertical-spacing/vertical-spacing.es.js";
+import { Row as w } from "../../../tedi/components/layout/grid/row.es.js";
+const H = (m) => {
+  const { items: n, setReturnFocus: o, showIcons: l, heading: a, breakToMobile: s = ["mobile"], className: c } = m, f = I(s), d = l ? !0 : !f, { closeModal: t } = r.useContext(y), i = r.useId(), p = () => {
+    x(() => {
+      o == null || o(!1);
+    }), t == null || t(), o == null || o(!0);
+  };
+  return /* @__PURE__ */ u(T, { size: 0.5, className: c, children: [
+    d && /* @__PURE__ */ e(C, { element: "h3", modifiers: "h4", id: i, children: a }),
+    /* @__PURE__ */ e("nav", { "aria-labelledby": i, children: /* @__PURE__ */ e(w, { role: "tree", element: "ul", direction: "column", gap: 2, children: n.map((h, b) => /* @__PURE__ */ e(g, { handleCloseModal: p, ...h }, `toc-item-${b}`)) }) })
+  ] });
+};
+export {
+  H as TableOfContentsItems
+};

package/src/community/components/table-of-contents/table-of-contents-modal.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),H=require("../../../../external/classnames/index.cjs.js"),d=require("react"),S=require("../button/button.cjs.js"),k=require("../button-content/button-content.cjs.js"),h=require("../icon/icon.cjs.js"),f=require("../typography/heading/heading.cjs.js"),t=require("../typography/text/text.cjs.js"),B=require("./table-of-contents.cjs.js"),C=require("./table-of-contents.module.scss.cjs.js"),F=require("./table-of-contents-items.cjs.js"),$=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),r=require("../../../tedi/components/layout/grid/row.cjs.js"),n=require("../../../tedi/components/layout/grid/col.cjs.js"),V=require("../modal/modal-provider.cjs.js"),W=require("../modal/modal-trigger.cjs.js"),z=require("../card/card.cjs.js"),b=require("../card/card-content/card-content.cjs.js"),A=require("../modal/modal.cjs.js"),D=require("../card/card-header/card-header.cjs.js"),E=x=>{const{getLabel:o}=$.useLabels(),{items:l,modalProps:p,modalProviderProps:q,heading:w,open:m,defaultOpen:T,onToggle:i,className:v}=x,a=l.map(s=>s.isValid===!0).filter(Boolean).length,c=l.map(s=>s.isValid===!1).filter(Boolean).length,j=d.useId(),[O,y]=d.useState(!0),[I,R]=d.useState(T),{showIcons:u}=d.useContext(B.TableOfContentsContext),N=i&&typeof m<"u"?m:I,L=o("table-of-contents.valid",`${a} / ${l.length}`),M=o("table-of-contents.valid",a),P=o("table-of-contents.invalid",c),_=s=>{R(s),i==null||i(s)},g=e.jsxs(e.Fragment,{children:[e.jsx(t.Text,{element:"span",modifiers:["normal","bold"],className:H.default({"sr-only":u}),children:w}),u&&c===0?e.jsxs(r.Row,{gutter:1,children:[e.jsx(n.Col,{width:"auto",children:e.jsx(h.Icon,{name:"check",color:"positive"})}),e.jsxs(n.Col,{width:"auto",children:[e.jsxs(t.Text,{element:"span","aria-hidden":!0,children:[a," / ",l.length]}),e.jsx(t.Text,{element:"span",className:"sr-only",children:L})]})]}):u?e.jsxs(r.Row,{gutter:3,children:[e.jsx(n.Col,{width:"auto",children:e.jsxs(r.Row,{gutter:1,children:[e.jsx(n.Col,{width:"auto",children:e.jsx(h.Icon,{name:"check",color:"positive"})}),e.jsxs(n.Col,{width:"auto",children:[e.jsx(t.Text,{element:"span","aria-hidden":!0,children:a}),e.jsx(t.Text,{element:"span",className:"sr-only",children:M})]})]})}),e.jsx(n.Col,{width:"auto",children:e.jsxs(r.Row,{gutter:1,children:[e.jsx(n.Col,{width:"auto",children:e.jsx(h.Icon,{name:"warning",color:"important"})}),e.jsxs(n.Col,{width:"auto",children:[e.jsx(t.Text,{element:"span","aria-hidden":!0,children:c}),e.jsx(t.Text,{element:"span",className:"sr-only",children:P})]})]})})]}):null]});return e.jsxs(V.ModalProvider,{open:N,onToggle:_,...q,children:[e.jsx(f.Heading,{element:"h2",modifiers:"normal",className:v,children:e.jsx(W.ModalTrigger,{children:e.jsx(S.Button,{fullWidth:!0,noStyle:!0,className:C.default["table-of-contents__trigger"],children:e.jsx(z.Card,{className:C.default["table-of-contents__trigger-card"],children:e.jsx(b.CardContent,{children:e.jsxs(r.Row,{children:[e.jsx(n.Col,{children:g}),e.jsx(n.Col,{width:"auto","aria-hidden":!0,children:e.jsx(k.default,{as:"span",visualType:"link",iconRight:"expand_more",children:o("open")})})]})})})})})}),e.jsxs(A.Modal,{"aria-labelledby":j,position:"bottom",returnFocus:O,...p,children:[e.jsx(D.CardHeader,{variant:"white",id:j,children:e.jsx(f.Heading,{element:"h2",modifiers:"normal",children:g})}),e.jsx(b.CardContent,{children:e.jsx(F.TableOfContentsItems,{...x,setReturnFocus:y})})]})]})};exports.TableOfContentsModal=E;

package/src/community/components/table-of-contents/table-of-contents-modal.d.ts

@@ -0,0 +1,2 @@
+import { TableOfContentsProps } from './table-of-contents';
+export declare const TableOfContentsModal: (props: TableOfContentsProps) => import("react/jsx-runtime").JSX.Element;

package/src/community/components/table-of-contents/table-of-contents-modal.es.js

@@ -0,0 +1,66 @@
+import { jsxs as t, Fragment as H, jsx as e } from "react/jsx-runtime";
+import S from "../../../../external/classnames/index.es.js";
+import h, { useContext as j } from "react";
+import { Button as V } from "../button/button.es.js";
+import $ from "../button-content/button-content.es.js";
+import { Icon as p } from "../icon/icon.es.js";
+import { Heading as v } from "../typography/heading/heading.es.js";
+import { Text as r } from "../typography/text/text.es.js";
+import { TableOfContentsContext as W } from "./table-of-contents.es.js";
+import w from "./table-of-contents.module.scss.es.js";
+import { TableOfContentsItems as q } from "./table-of-contents-items.es.js";
+import { useLabels as z } from "../../../tedi/providers/label-provider/use-labels.es.js";
+import { Row as i } from "../../../tedi/components/layout/grid/row.es.js";
+import { Col as n } from "../../../tedi/components/layout/grid/col.es.js";
+import { ModalProvider as A } from "../modal/modal-provider.es.js";
+import { ModalTrigger as D } from "../modal/modal-trigger.es.js";
+import { Card as E } from "../card/card.es.js";
+import { CardContent as C } from "../card/card-content/card-content.es.js";
+import { Modal as G } from "../modal/modal.es.js";
+import { CardHeader as J } from "../card/card-header/card-header.es.js";
+const fe = (f) => {
+  const { getLabel: l } = z(), { items: a, modalProps: y, modalProviderProps: N, heading: x, open: u, defaultOpen: I, onToggle: d, className: O } = f, s = a.map((o) => o.isValid === !0).filter(Boolean).length, c = a.map((o) => o.isValid === !1).filter(Boolean).length, g = h.useId(), [T, _] = h.useState(!0), [L, B] = h.useState(I), { showIcons: m } = j(W), M = d && typeof u < "u" ? u : L, P = l("table-of-contents.valid", `${s} / ${a.length}`), R = l("table-of-contents.valid", s), k = l("table-of-contents.invalid", c), F = (o) => {
+    B(o), d == null || d(o);
+  }, b = /* @__PURE__ */ t(H, { children: [
+    /* @__PURE__ */ e(r, { element: "span", modifiers: ["normal", "bold"], className: S({ "sr-only": m }), children: x }),
+    m && c === 0 ? /* @__PURE__ */ t(i, { gutter: 1, children: [
+      /* @__PURE__ */ e(n, { width: "auto", children: /* @__PURE__ */ e(p, { name: "check", color: "positive" }) }),
+      /* @__PURE__ */ t(n, { width: "auto", children: [
+        /* @__PURE__ */ t(r, { element: "span", "aria-hidden": !0, children: [
+          s,
+          " / ",
+          a.length
+        ] }),
+        /* @__PURE__ */ e(r, { element: "span", className: "sr-only", children: P })
+      ] })
+    ] }) : m ? /* @__PURE__ */ t(i, { gutter: 3, children: [
+      /* @__PURE__ */ e(n, { width: "auto", children: /* @__PURE__ */ t(i, { gutter: 1, children: [
+        /* @__PURE__ */ e(n, { width: "auto", children: /* @__PURE__ */ e(p, { name: "check", color: "positive" }) }),
+        /* @__PURE__ */ t(n, { width: "auto", children: [
+          /* @__PURE__ */ e(r, { element: "span", "aria-hidden": !0, children: s }),
+          /* @__PURE__ */ e(r, { element: "span", className: "sr-only", children: R })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ e(n, { width: "auto", children: /* @__PURE__ */ t(i, { gutter: 1, children: [
+        /* @__PURE__ */ e(n, { width: "auto", children: /* @__PURE__ */ e(p, { name: "warning", color: "important" }) }),
+        /* @__PURE__ */ t(n, { width: "auto", children: [
+          /* @__PURE__ */ e(r, { element: "span", "aria-hidden": !0, children: c }),
+          /* @__PURE__ */ e(r, { element: "span", className: "sr-only", children: k })
+        ] })
+      ] }) })
+    ] }) : null
+  ] });
+  return /* @__PURE__ */ t(A, { open: M, onToggle: F, ...N, children: [
+    /* @__PURE__ */ e(v, { element: "h2", modifiers: "normal", className: O, children: /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(V, { fullWidth: !0, noStyle: !0, className: w["table-of-contents__trigger"], children: /* @__PURE__ */ e(E, { className: w["table-of-contents__trigger-card"], children: /* @__PURE__ */ e(C, { children: /* @__PURE__ */ t(i, { children: [
+      /* @__PURE__ */ e(n, { children: b }),
+      /* @__PURE__ */ e(n, { width: "auto", "aria-hidden": !0, children: /* @__PURE__ */ e($, { as: "span", visualType: "link", iconRight: "expand_more", children: l("open") }) })
+    ] }) }) }) }) }) }),
+    /* @__PURE__ */ t(G, { "aria-labelledby": g, position: "bottom", returnFocus: T, ...y, children: [
+      /* @__PURE__ */ e(J, { variant: "white", id: g, children: /* @__PURE__ */ e(v, { element: "h2", modifiers: "normal", children: b }) }),
+      /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(q, { ...f, setReturnFocus: _ }) })
+    ] })
+  ] });
+};
+export {
+  fe as TableOfContentsModal
+};

package/src/community/components/table-of-contents/table-of-contents.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("react"),f=require("../../../tedi/components/misc/affix/affix.cjs.js"),C=require("../../../tedi/components/misc/scroll-visibility/scroll-visibility.cjs.js"),x=require("../../../tedi/components/misc/stretch-content/stretch-content.cjs.js"),h=require("./table-of-contents-items.cjs.js"),q=require("./table-of-contents-modal.cjs.js"),j=require("../../../tedi/providers/label-provider/use-labels.cjs.js"),O=require("../../helpers/hooks/use-layout.cjs.js"),m=require("../card/card.cjs.js"),T=require("../card/card-content/card-content.cjs.js"),i=b.createContext({openItems:void 0,showIcons:void 0}),r=n=>{const{getLabel:l}=j.useLabels(),{breakToMobile:c=["mobile"],heading:o=l("table-of-contents.title"),hideOnScroll:a=!0}=n,t=O.useLayout(c),{showIcons:u,openItems:d,...s}=n;return e.jsx(i.Provider,{value:{openItems:d,showIcons:u},children:e.jsx(f.Affix,{right:0,left:0,bottom:t?0:1.5,top:t?"unset":1.5,position:t?"fixed":"sticky",children:e.jsx(x.StretchContent,{children:t?e.jsx(C.ScrollVisibility,{animationDirection:"down",enabled:a,children:e.jsx(q.TableOfContentsModal,{...s,heading:o})}):e.jsx(m.Card,{children:e.jsx(T.CardContent,{children:e.jsx(h.TableOfContentsItems,{...s,heading:o})})})})})})};exports.TableOfContents=r;exports.TableOfContentsContext=i;exports.default=r;

package/src/community/components/table-of-contents/table-of-contents.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Layouts } from '../../helpers';
+import { ModalProps, ModalProviderProps } from '../modal';
+import { TableOfContentsItemProps } from './table-of-contents-item';
+export interface TableOfContentsProps {
+    /**
+     * List of items to be shown in the table of contents
+     */
+    items: TableOfContentsItemProps[];
+    /**
+     * Heading of the table of contents
+     * @default Value from LabelProvider
+     */
+    heading?: string;
+    /**
+     * Should component be initially shown. Won't work with open and onToggle.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Should the component be open or closed.
+     * Use to handle state outside of component, should use with onToggle prop.
+     */
+    open?: boolean;
+    /**
+     * Callback when component is toggled.
+     * Use to handle state outside of component, should use with open prop.
+     */
+    onToggle?: (open: boolean) => void;
+    /**
+     * Show icons before items
+     * @default false
+     */
+    showIcons?: boolean;
+    /**
+     * When should mobile layout to be used
+     * @default 'mobile'
+     */
+    breakToMobile?: Layouts;
+    /**
+     * Props passed to ModalProvider
+     */
+    modalProviderProps?: ModalProviderProps;
+    /**
+     * Props passed to Modal
+     */
+    modalProps?: ModalProps;
+    /**
+     * Should the component hide on mobile view when the page is scrolled
+     * @default true
+     */
+    hideOnScroll?: boolean;
+    /**
+     * Open items' id's
+     **/
+    openItems?: string[];
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+interface TableOfContentsContext {
+    openItems?: string[];
+    showIcons?: boolean;
+}
+export declare const TableOfContentsContext: React.Context<TableOfContentsContext>;
+/**
+ * TableOfContents is helper component that can be used to show table of contents for long pages or multistep forms. It keeps itself fixed next to the content when scrolled (On desktop). <br /><br />
+ * When used to link to sections on the same page, make sure to use the same id on the section and the table of contents item Anchor. Setting `tabIndex` on the section is also necessary for the focus to work correctly in some screen-readers.
+ * More info <a href="https://github.com/gettalong/kramdown/issues/215" target="_blank">here</a> and <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=262171" target="_blank">here</a>.<br /><br />
+ * When used to keep track of multistep form progress, usage on `showIcons={true}` is recommended. Keep in mind that `isValid` property is optional and can be undefined to show not validated steps. <br />
+ * Also it is possible to use disabled-text as item content, to show that user can't skip to next step. <br /><br />
+ */
+export declare const TableOfContents: (props: TableOfContentsProps) => import("react/jsx-runtime").JSX.Element;
+export default TableOfContents;

package/src/community/components/table-of-contents/table-of-contents.es.js

@@ -0,0 +1,33 @@
+import { jsx as t } from "react/jsx-runtime";
+import c from "react";
+import { Affix as f } from "../../../tedi/components/misc/affix/affix.es.js";
+import { ScrollVisibility as d } from "../../../tedi/components/misc/scroll-visibility/scroll-visibility.es.js";
+import { StretchContent as b } from "../../../tedi/components/misc/stretch-content/stretch-content.es.js";
+import { TableOfContentsItems as p } from "./table-of-contents-items.es.js";
+import { TableOfContentsModal as h } from "./table-of-contents-modal.es.js";
+import { useLabels as u } from "../../../tedi/providers/label-provider/use-labels.es.js";
+import { useLayout as C } from "../../helpers/hooks/use-layout.es.js";
+import { Card as x } from "../card/card.es.js";
+import { CardContent as I } from "../card/card-content/card-content.es.js";
+const O = c.createContext({
+  openItems: void 0,
+  showIcons: void 0
+}), A = (e) => {
+  const { getLabel: i } = u(), { breakToMobile: l = ["mobile"], heading: r = i("table-of-contents.title"), hideOnScroll: m = !0 } = e, o = C(l), { showIcons: s, openItems: a, ...n } = e;
+  return /* @__PURE__ */ t(O.Provider, { value: { openItems: a, showIcons: s }, children: /* @__PURE__ */ t(
+    f,
+    {
+      right: 0,
+      left: 0,
+      bottom: o ? 0 : 1.5,
+      top: o ? "unset" : 1.5,
+      position: o ? "fixed" : "sticky",
+      children: /* @__PURE__ */ t(b, { children: o ? /* @__PURE__ */ t(d, { animationDirection: "down", enabled: m, children: /* @__PURE__ */ t(h, { ...n, heading: r }) }) : /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(p, { ...n, heading: r }) }) }) })
+    }
+  ) });
+};
+export {
+  A as TableOfContents,
+  O as TableOfContentsContext,
+  A as default
+};

package/src/community/components/table-of-contents/table-of-contents.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"table-of-contents__trigger":"table-of-contents__trigger-fdbcc688","table-of-contents__trigger-card":"table-of-contents__trigger-card-579f9e90","table-of-contents__icon--hidden":"table-of-contents__icon--hidden-ac96efbe","table-of-contents__child":"table-of-contents__child-a1cc58be"};exports.default=e;

package/src/community/components/table-of-contents/table-of-contents.module.scss.es.js

@@ -0,0 +1,9 @@
+const t = {
+  "table-of-contents__trigger": "table-of-contents__trigger-fdbcc688",
+  "table-of-contents__trigger-card": "table-of-contents__trigger-card-579f9e90",
+  "table-of-contents__icon--hidden": "table-of-contents__icon--hidden-ac96efbe",
+  "table-of-contents__child": "table-of-contents__child-a1cc58be"
+};
+export {
+  t as default
+};

package/src/community/components/tabs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './tabs/tabs';
+export * from './tabs-item/tabs-item';
+export * from './tabs-nav/tabs-nav';
+export * from './tabs-nav/tabs-nav-item';

package/src/community/components/tabs/tabs/tabs.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),N=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),P=require("../../../../tedi/components/misc/print/print.cjs.js"),A=require("../tabs-context.cjs.js"),D=require("../tabs-item/tabs-item.cjs.js"),_=require("../tabs-nav/tabs-nav.cjs.js"),x=require("./tabs.module.scss.cjs.js"),E=require("../../../../tedi/helpers/hooks/use-print.cjs.js"),I=r=>{const y=E.usePrint(),{defaultCurrentTab:g,onTabChange:o,className:m,children:C,hideNavOnPrint:h="show"}=r,[q,j]=f.useState(g||""),v=(e=r.currentTab)=>!!r.onTabChange&&typeof e<"u",a=v(r.currentTab)?r.currentTab:q,d=e=>{a!==e&&(v()||j(e),o==null||o(e))},s=f.Children.toArray(r.children).filter(e=>f.isValidElement(e)&&e.type===D.TabsItem).map(e=>e.props),k=e=>{var n,u;const l=s.findIndex(b=>{var T;return b.id===((T=e.currentTarget)==null?void 0:T.id)}),i=l!==-1?l:0;let t=-1;switch(e.key){case" ":e.preventDefault(),d((n=e.currentTarget)==null?void 0:n.id);break;case"ArrowLeft":i===0?t=s.length-1:t=i-1;break;case"ArrowRight":i===s.length-1?t=0:t=i+1;break;case"Home":t=0;break;case"End":t=s.length-1;break}t!==-1&&(e.preventDefault(),(u=document.getElementById(s[t].id))==null||u.focus())},w=s.map((e,l)=>{const{children:i,label:t,id:n,...u}=e;return{...u,id:n,isActive:a===n,onClick:b=>{b.preventDefault(),d(n)},onKeyDown:k,children:t,href:`#${n}`,role:"tab",tabIndex:!a&&l===0||a===n?void 0:-1,"aria-controls":`${n}-panel`,"aria-label":t,"aria-selected":a===n}});return c.jsx(A.TabsContext.Provider,{value:{currentTab:a,setCurrentTab:d},children:c.jsxs("div",{"data-name":"tabs",className:y&&h==="hide"?m:N.default(x.default.tabs,m),children:[c.jsx(P.Print,{visibility:h,children:c.jsx(_.TabsNav,{items:w,"aria-labelledby":r["aria-labelledby"]})}),c.jsx("div",{className:x.default.tabs__content,children:C})]})})};exports.Tabs=I;exports.default=I;

package/src/community/components/tabs/tabs/tabs.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { PrintProps } from '../../../../tedi/components/misc/print/print';
+export interface TabsProps {
+    /**
+     * Tabs content. Children should be TabsItems
+     */
+    children: React.ReactNode;
+    /**
+     * Current tab id. Use to control the value. Only works with onTabChange prop.
+     */
+    currentTab?: string;
+    /**
+     * Default current tab. Use for uncontrolled value.
+     * Changing the value won't update the component.
+     */
+    defaultCurrentTab?: string;
+    /**
+     * Additional classes.
+     */
+    className?: string;
+    /**
+     * On tab change handler.
+     */
+    onTabChange?: (nextTab: string) => void;
+    /**
+     * ID of heading labelling the tabs.
+     */
+    'aria-labelledby': string;
+    /**
+     * Hide navigation and card when printing
+     * @default 'show'
+     */
+    hideNavOnPrint?: PrintProps['visibility'];
+}
+export declare const Tabs: (props: TabsProps) => JSX.Element;
+export default Tabs;

package/src/community/components/tabs/tabs/tabs.es.js

@@ -0,0 +1,81 @@
+import { jsx as c, jsxs as N } from "react/jsx-runtime";
+import A from "../../../../../external/classnames/index.es.js";
+import u from "react";
+import { Print as D } from "../../../../tedi/components/misc/print/print.es.js";
+import { TabsContext as P } from "../tabs-context.es.js";
+import { TabsItem as _ } from "../tabs-item/tabs-item.es.js";
+import { TabsNav as E } from "../tabs-nav/tabs-nav.es.js";
+import I from "./tabs.module.scss.es.js";
+import { usePrint as j } from "../../../../tedi/helpers/hooks/use-print.es.js";
+const q = (n) => {
+  const y = j(), { defaultCurrentTab: x, onTabChange: d, className: f, children: C, hideNavOnPrint: h = "show" } = n, [g, p] = u.useState(x || ""), v = (e = n.currentTab) => !!n.onTabChange && typeof e < "u", a = v(n.currentTab) ? n.currentTab : g, m = (e) => {
+    a !== e && (v() || p(e), d == null || d(e));
+  }, i = u.Children.toArray(n.children).filter((e) => u.isValidElement(e) && e.type === _).map((e) => e.props), k = (e) => {
+    var r, o;
+    const l = i.findIndex((b) => {
+      var T;
+      return b.id === ((T = e.currentTarget) == null ? void 0 : T.id);
+    }), s = l !== -1 ? l : 0;
+    let t = -1;
+    switch (e.key) {
+      case " ":
+        e.preventDefault(), m((r = e.currentTarget) == null ? void 0 : r.id);
+        break;
+      case "ArrowLeft":
+        s === 0 ? t = i.length - 1 : t = s - 1;
+        break;
+      case "ArrowRight":
+        s === i.length - 1 ? t = 0 : t = s + 1;
+        break;
+      case "Home":
+        t = 0;
+        break;
+      case "End":
+        t = i.length - 1;
+        break;
+    }
+    t !== -1 && (e.preventDefault(), (o = document.getElementById(i[t].id)) == null || o.focus());
+  }, w = i.map((e, l) => {
+    const { children: s, label: t, id: r, ...o } = e;
+    return {
+      ...o,
+      id: r,
+      isActive: a === r,
+      onClick: (b) => {
+        b.preventDefault(), m(r);
+      },
+      onKeyDown: k,
+      children: t,
+      href: `#${r}`,
+      role: "tab",
+      tabIndex: !a && l === 0 || a === r ? void 0 : -1,
+      "aria-controls": `${r}-panel`,
+      "aria-label": t,
+      "aria-selected": a === r
+    };
+  });
+  return /* @__PURE__ */ c(
+    P.Provider,
+    {
+      value: {
+        currentTab: a,
+        setCurrentTab: m
+      },
+      children: /* @__PURE__ */ N(
+        "div",
+        {
+          "data-name": "tabs",
+          className: y && h === "hide" ? f : A(I.tabs, f),
+          children: [
+            /* @__PURE__ */ c(D, { visibility: h, children: /* @__PURE__ */ c(E, { items: w, "aria-labelledby": n["aria-labelledby"] }) }),
+            /* @__PURE__ */ c("div", { className: I.tabs__content, children: C })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  q as Tabs,
+  q as default
+};

package/src/community/components/tabs/tabs/tabs.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="tabs-079b246a",e="tabs__content-bf8f35f6",s={tabs:t,tabs__content:e};exports.default=s;exports.tabs=t;exports.tabs__content=e;

package/src/community/components/tabs/tabs/tabs.module.scss.es.js

@@ -0,0 +1,9 @@
+const t = "tabs-079b246a", s = "tabs__content-bf8f35f6", a = {
+  tabs: t,
+  tabs__content: s
+};
+export {
+  a as default,
+  t as tabs,
+  s as tabs__content
+};

package/src/community/components/tabs/tabs-context.cjs.js

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

package/src/community/components/tabs/tabs-context.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ITabsContext {
+    currentTab: string;
+    setCurrentTab: (id: string) => void;
+}
+export declare const TabsContext: React.Context<ITabsContext>;
+export {};

package/src/community/components/tabs/tabs-context.es.js

@@ -0,0 +1,8 @@
+import t from "react";
+const r = t.createContext({
+  currentTab: "",
+  setCurrentTab: () => null
+});
+export {
+  r as TabsContext
+};

package/src/community/components/tabs/tabs-item/tabs-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),c=require("react"),l=require("../tabs-context.cjs.js"),b=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),p=require("../../card/card.cjs.js"),C=require("../../card/card-content/card-content.cjs.js"),n=r=>{const{getCurrentBreakpointProps:a}=b.useBreakpointProps(r.defaultServerBreakpoint),{className:s,padding:o,background:i,id:e,children:u}=a(r,{padding:{top:1.5,right:2,bottom:2,left:2},background:"white"}),{currentTab:d}=c.useContext(l.TabsContext);return e===d?t.jsx("div",{"data-name":"tabs-item",className:s,id:`${e}-panel`,tabIndex:0,role:"tabpanel","aria-labelledby":e,children:t.jsx(p.Card,{padding:o,background:i,borderRadius:{top:!1,right:!1},borderless:!0,children:t.jsx(C.CardContent,{children:u})})}):null};exports.TabsItem=n;exports.default=n;

package/src/community/components/tabs/tabs-item/tabs-item.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { BreakpointSupport } from '../../../helpers';
+import { CardContentProps } from '../../card';
+type TabsItemBreakpointProps = Pick<CardContentProps, 'padding' | 'background'>;
+export interface TabsItemProps extends BreakpointSupport<TabsItemBreakpointProps> {
+    /**
+     * ID property.
+     */
+    id: string;
+    /**
+     * Button label.
+     */
+    label: string;
+    /**
+     * Content of tabs item.
+     */
+    children: React.ReactNode;
+    /**
+     * Additional classes.
+     */
+    className?: string;
+}
+export declare const TabsItem: (props: TabsItemProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TabsItem;

package/src/community/components/tabs/tabs-item/tabs-item.es.js

@@ -0,0 +1,28 @@
+import { jsx as t } from "react/jsx-runtime";
+import l from "react";
+import { TabsContext as m } from "../tabs-context.es.js";
+import { useBreakpointProps as p } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { Card as u } from "../../card/card.es.js";
+import { CardContent as b } from "../../card/card-content/card-content.es.js";
+const B = (e) => {
+  const { getCurrentBreakpointProps: o } = p(e.defaultServerBreakpoint), { className: a, padding: n, background: i, id: r, children: d } = o(e, {
+    padding: { top: 1.5, right: 2, bottom: 2, left: 2 },
+    background: "white"
+  }), { currentTab: s } = l.useContext(m);
+  return r === s ? /* @__PURE__ */ t(
+    "div",
+    {
+      "data-name": "tabs-item",
+      className: a,
+      id: `${r}-panel`,
+      tabIndex: 0,
+      role: "tabpanel",
+      "aria-labelledby": r,
+      children: /* @__PURE__ */ t(u, { padding: n, background: i, borderRadius: { top: !1, right: !1 }, borderless: !0, children: /* @__PURE__ */ t(b, { children: d }) })
+    }
+  ) : null;
+};
+export {
+  B as TabsItem,
+  B as default
+};

package/src/community/components/tabs/tabs-nav/tabs-nav-item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("../../../../../external/classnames/index.cjs.js"),b=require("react"),m=require("../../../../tedi/components/misc/print/print.cjs.js"),v=require("../../../../tedi/components/navigation/hash-trigger/hash-trigger.cjs.js"),h=require("../../anchor/anchor.cjs.js"),x=require("../tabs-context.cjs.js"),t=require("./tabs-nav.module.scss.cjs.js"),a=n=>{const{isActive:i,children:o,id:s,...c}=n,u=r.default(t.default["tabs__nav-item"],{[t.default["tabs__nav-item--current"]]:i}),{setCurrentTab:l}=b.useContext(x.TabsContext);return e.jsx("li",{"data-name":"tabs-nav-item",className:u,role:"presentation",children:e.jsx(v.HashTrigger,{id:s,onMatch:d=>l(d),children:e.jsx(m.Print,{visibility:"show",children:e.jsx(h.Anchor,{...c,id:s,className:r.default(t.default["tabs__nav-link"]),children:o})})})})};exports.TabsNavItem=a;exports.default=a;

package/src/community/components/tabs/tabs-nav/tabs-nav-item.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AnchorProps } from '../../anchor/anchor';
+import { TabsItemProps } from '../tabs-item/tabs-item';
+export type TabsNavItemProps<C extends React.ElementType = 'a'> = AnchorProps<C> & Pick<TabsItemProps, 'id'>;
+export declare const TabsNavItem: <C extends React.ElementType = "a">(props: TabsNavItemProps<C>) => JSX.Element;
+export default TabsNavItem;

package/src/community/components/tabs/tabs-nav/tabs-nav-item.es.js

@@ -0,0 +1,16 @@
+import { jsx as t } from "react/jsx-runtime";
+import a from "../../../../../external/classnames/index.es.js";
+import f from "react";
+import { Print as p } from "../../../../tedi/components/misc/print/print.es.js";
+import { HashTrigger as b } from "../../../../tedi/components/navigation/hash-trigger/hash-trigger.es.js";
+import { Anchor as d } from "../../anchor/anchor.es.js";
+import { TabsContext as h } from "../tabs-context.es.js";
+import r from "./tabs-nav.module.scss.es.js";
+const y = (s) => {
+  const { isActive: o, children: i, id: e, ...m } = s, n = a(r["tabs__nav-item"], { [r["tabs__nav-item--current"]]: o }), { setCurrentTab: c } = f.useContext(h);
+  return /* @__PURE__ */ t("li", { "data-name": "tabs-nav-item", className: n, role: "presentation", children: /* @__PURE__ */ t(b, { id: e, onMatch: (l) => c(l), children: /* @__PURE__ */ t(p, { visibility: "show", children: /* @__PURE__ */ t(d, { ...m, id: e, className: a(r["tabs__nav-link"]), children: i }) }) }) });
+};
+export {
+  y as TabsNavItem,
+  y as default
+};

package/src/community/components/tabs/tabs-nav/tabs-nav.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),b=require("react"),c=require("../../../../../external/classnames/index.cjs.js"),o=require("./tabs-nav.module.scss.cjs.js"),d=require("./tabs-nav-item.cjs.js"),e=a=>{const{items:t,className:s,"aria-labelledby":l}=a,r=c.default(o.default.tabs__nav,s);return i.jsx("ul",{"data-name":"tabs-nav",className:r,role:"tablist","aria-labelledby":l,children:t.map((n,u)=>b.createElement(d.TabsNavItem,{...n,key:u}))})};exports.TabsNav=e;exports.default=e;

package/src/community/components/tabs/tabs-nav/tabs-nav.d.ts

@@ -0,0 +1,17 @@
+import { TabsNavItemProps } from './tabs-nav-item';
+export interface TabsNavProps {
+    /**
+     * Additional classes.
+     */
+    className?: string;
+    /**
+     * See @tabs-nav-item.
+     */
+    items: TabsNavItemProps[];
+    /**
+     * ID of heading labelling the tabs.
+     */
+    'aria-labelledby': string;
+}
+export declare const TabsNav: (props: TabsNavProps) => JSX.Element;
+export default TabsNav;

package/src/community/components/tabs/tabs-nav/tabs-nav.es.js

@@ -0,0 +1,13 @@
+import { jsx as o } from "react/jsx-runtime";
+import { createElement as i } from "react";
+import b from "../../../../../external/classnames/index.es.js";
+import n from "./tabs-nav.module.scss.es.js";
+import { TabsNavItem as c } from "./tabs-nav-item.es.js";
+const v = (a) => {
+  const { items: e, className: t, "aria-labelledby": s } = a, r = b(n.tabs__nav, t);
+  return /* @__PURE__ */ o("ul", { "data-name": "tabs-nav", className: r, role: "tablist", "aria-labelledby": s, children: e.map((l, m) => /* @__PURE__ */ i(c, { ...l, key: m })) });
+};
+export {
+  v as TabsNav,
+  v as default
+};

package/src/community/components/tabs/tabs-nav/tabs-nav.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="tabs__nav-536db321",a={tabs__nav:t,"tabs__nav-item":"tabs__nav-item-7f219f71","tabs__nav-item--current":"tabs__nav-item--current-7aa176ed","tabs__nav-link":"tabs__nav-link-78de1b80"};exports.default=a;exports.tabs__nav=t;

package/src/community/components/tabs/tabs-nav/tabs-nav.module.scss.es.js

@@ -0,0 +1,10 @@
+const a = "tabs__nav-536db321", t = {
+  tabs__nav: a,
+  "tabs__nav-item": "tabs__nav-item-7f219f71",
+  "tabs__nav-item--current": "tabs__nav-item--current-7aa176ed",
+  "tabs__nav-link": "tabs__nav-link-78de1b80"
+};
+export {
+  t as default,
+  a as tabs__nav
+};

package/src/community/components/tag/tag-examples.d.ts

@@ -0,0 +1,2 @@
+declare const TagExamples: () => import("react/jsx-runtime").JSX.Element;
+export default TagExamples;

package/src/community/components/tag/tag.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const k=require("react/jsx-runtime"),p=require("../../../../external/classnames/index.cjs.js"),w=require("react"),e=require("./tag.module.scss.cjs.js"),$=require("../../../tedi/components/loaders/skeleton/skeleton-block/skeleton-block.cjs.js"),a=w.forwardRef((r,n)=>{const{children:i,size:t,className:c,title:l,color:s="default",status:d,type:o="default",rounded:u=!1,hasArrow:f=!1,isLoading:g=!1,isDisabled:m=!1,iconOnly:b=!1,id:y}=r,T=g?$.SkeletonBlock:l?"abbr":"div",q=p.default(e.default.tag,c,{[e.default[`tag--${t}`]]:t},{[e.default[`tag--type-${o}`]]:o},{[e.default[`tag--color-${s}`]]:s},{[e.default[`tag--status-${d}`]]:d},{[e.default["tag--rounded"]]:u},{[e.default["tag--icon-only"]]:b},{[e.default["tag--disabled"]]:m},{[e.default["tag--with-arrow"]]:f&&!u});return k.jsx(T,{id:y,"data-name":"tag",className:q,title:l,ref:n,children:i})});a.displayName="Tag";exports.Tag=a;exports.default=a;