@frontify/fondue-components 22.2.0 → 23.0.0

package/dist/fondue-components25.js

@@ -1,176 +1,199 @@
-import { jsx as d, jsxs as p } from "react/jsx-runtime";
-import { IconArrowUp as B, IconArrowDown as A, IconArrowBidirectional as K } from "@frontify/fondue-icons";
-import { forwardRef as f, useRef as w, useMemo as S } from "react";
-import { useSyncRefs as g } from "./fondue-components48.js";
-import { useTextTruncation as N } from "./fondue-components74.js";
-import { Box as L } from "./fondue-components5.js";
-import { LoadingCircle as j } from "./fondue-components18.js";
-import n from "./fondue-components75.js";
-import { handleKeyDown as $, shouldIgnoreRowClick as D } from "./fondue-components76.js";
-const R = f(
-  ({ layout: t = "auto", fontSize: e = "medium", sticky: l, children: i, ...a }, o) => {
-    const m = l === "head" || l === "both", s = l === "col" || l === "both";
-    return (
-      // eslint-disable-next-line jsx-a11y-x/no-noninteractive-element-interactions
-      /* @__PURE__ */ d(
-        "table",
-        {
-          ref: o,
-          className: n.table,
-          "data-layout": t,
-          "data-font-size": e,
-          "data-sticky-header": m,
-          "data-sticky-left-column": s,
-          onKeyDown: $,
-          ...a,
-          children: i
-        }
-      )
+import { jsx as n, jsxs as T } from "react/jsx-runtime";
+import { IconArrowUp as O, IconArrowDown as K, IconArrowBidirectional as W } from "@frontify/fondue-icons";
+import { forwardRef as u, useRef as N, useState as _, useEffect as D, useMemo as L } from "react";
+import { useSyncRefs as R } from "./fondue-components49.js";
+import { useTextTruncation as h } from "./fondue-components75.js";
+import { useTranslation as j } from "./fondue-components34.js";
+import { Box as M } from "./fondue-components5.js";
+import { LoadingCircle as S } from "./fondue-components18.js";
+import c from "./fondue-components76.js";
+import { handleKeyDown as U, shouldIgnoreRowClick as q } from "./fondue-components77.js";
+const x = u(
+  ({ layout: t = "auto", fontSize: e = "medium", gutter: r = "0px", sticky: o, noBorder: a = !1, children: l, ...b }, f) => {
+    const m = N(null), [p, s] = _(!1);
+    R(m, f);
+    const i = o === "head" || o === "both", v = o === "col" || o === "both";
+    return D(() => {
+      const d = m.current;
+      if (!d)
+        return;
+      const y = () => {
+        const g = d.parentElement;
+        if (!g)
+          return;
+        const C = d.scrollWidth, E = g.clientWidth;
+        s(C > E);
+      };
+      y();
+      const w = new ResizeObserver(y);
+      return w.observe(d), d.parentElement && w.observe(d.parentElement), () => {
+        w.disconnect();
+      };
+    }, [l]), // eslint-disable-next-line jsx-a11y-x/no-noninteractive-element-interactions
+    /* @__PURE__ */ n(
+      "table",
+      {
+        ref: m,
+        className: c.table,
+        style: {
+          // @ts-expect-error CSS custom properties are not in CSSProperties type
+          "--table-gutter": r
+        },
+        "data-layout": t,
+        "data-font-size": e,
+        "data-sticky-header": i,
+        "data-sticky-left-column": v,
+        "data-no-border": a,
+        "data-has-horizontal-overflow": p,
+        onKeyDown: U,
+        ...b,
+        children: l
+      }
     );
   }
 );
-R.displayName = "Table.Root";
-const C = f(({ children: t }, e) => /* @__PURE__ */ d("caption", { ref: e, className: n.caption, children: t }));
-C.displayName = "Table.Caption";
-const v = f(
-  ({ sticky: t = !1, children: e, "aria-label": l, "aria-busy": i }, a) => /* @__PURE__ */ d("thead", { ref: a, className: n.header, "data-sticky": t, "aria-label": l, "aria-busy": i, children: e })
+x.displayName = "Table.Root";
+const k = u(({ children: t }, e) => /* @__PURE__ */ n("caption", { ref: e, className: c.caption, children: t }));
+k.displayName = "Table.Caption";
+const z = u(
+  ({ sticky: t = !1, children: e, "aria-label": r, "aria-busy": o }, a) => /* @__PURE__ */ n("thead", { ref: a, className: c.header, "data-sticky": t, "aria-label": r, "aria-busy": o, children: e })
 );
-v.displayName = "Table.Header";
-const x = f(
+z.displayName = "Table.Header";
+const H = u(
   ({
     noShrink: t = !1,
     truncate: e = !1,
-    align: l = "left",
-    scope: i = "col",
+    align: r = "left",
+    scope: o = "col",
     sortTranslations: a,
-    sortDirection: o,
-    colSpan: m,
-    width: s,
-    state: b = "idle",
-    loadingStateAriaLabel: u,
-    onSortChange: r,
-    children: c
-  }, I) => {
-    const y = w(null);
-    g(y, I), N(y);
-    const h = S(() => typeof c == "string" ? o === "ascending" ? (a == null ? void 0 : a.sortDescending) ?? `Sort by ${c} descending` : (a == null ? void 0 : a.sortAscending) ?? `Sort by ${c} ascending` : o === "ascending" ? "Sort descending" : "Sort ascending", [c, o, a]), z = () => {
-      if (!r)
+    sortDirection: l,
+    colSpan: b,
+    width: f,
+    state: m = "idle",
+    loadingStateAriaLabel: p,
+    onSortChange: s,
+    children: i
+  }, v) => {
+    const { t: d } = j(), y = N(null);
+    R(y, v), h(y);
+    const w = L(() => typeof i == "string" ? l === "ascending" ? (a == null ? void 0 : a.sortDescending) ?? d("Table_sortByDescending", { column: i }) : (a == null ? void 0 : a.sortAscending) ?? d("Table_sortByAscending", { column: i }) : d(l === "ascending" ? "Table_sortDescending" : "Table_sortAscending"), [i, l, a, d]), g = () => {
+      if (!s)
         return;
-      r(o === void 0 || o === "descending" ? "ascending" : "descending");
+      s(l === void 0 || l === "descending" ? "ascending" : "descending");
     };
-    return /* @__PURE__ */ d(
+    return /* @__PURE__ */ n(
       "th",
       {
         ref: y,
-        style: { width: s },
-        className: n.headerCell,
-        scope: i,
-        colSpan: m,
-        "data-align": l,
+        style: { width: f },
+        className: c.headerCell,
+        scope: o,
+        colSpan: b,
+        "data-align": r,
         "data-truncate": e,
         "data-no-shrink": t,
-        "data-sortable": !!r,
-        "aria-sort": r ? o || "none" : void 0,
-        children: b === "loading" ? /* @__PURE__ */ p("div", { className: n.cellContent, "aria-live": "polite", "aria-label": u, children: [
-          typeof c == "string" && e ? /* @__PURE__ */ d("span", { className: n.buttonText, children: c }) : c,
-          /* @__PURE__ */ d(j, { "data-test-id": "fondue-loading-circle", size: "xx-small" })
-        ] }) : r ? /* @__PURE__ */ p(
+        "data-sortable": !!s,
+        "aria-sort": s ? l || "none" : void 0,
+        children: m === "loading" ? /* @__PURE__ */ T("div", { className: c.cellContent, "aria-live": "polite", "aria-label": p, children: [
+          typeof i == "string" && e ? /* @__PURE__ */ n("span", { className: c.buttonText, children: i }) : i,
+          /* @__PURE__ */ n(S, { "data-test-id": "fondue-loading-circle", size: "xx-small" })
+        ] }) : s ? /* @__PURE__ */ T(
           "button",
           {
-            className: n.cellContent,
-            "aria-label": h,
-            "data-active": !!o,
-            onClick: z,
+            className: c.cellContent,
+            "aria-label": w,
+            "data-active": !!l,
+            onClick: g,
             type: "button",
             children: [
-              typeof c == "string" && e ? /* @__PURE__ */ d("span", { className: n.buttonText, children: c }) : c,
-              /* @__PURE__ */ d(L, { width: 3, children: o === "ascending" ? /* @__PURE__ */ d(B, { size: "12" }) : o === "descending" ? /* @__PURE__ */ d(A, { size: "12" }) : /* @__PURE__ */ d(K, { className: n.sortIndicator, size: "12" }) })
+              typeof i == "string" && e ? /* @__PURE__ */ n("span", { className: c.buttonText, children: i }) : i,
+              /* @__PURE__ */ n(M, { width: 3, children: l === "ascending" ? /* @__PURE__ */ n(O, { size: "12" }) : l === "descending" ? /* @__PURE__ */ n(K, { size: "12" }) : /* @__PURE__ */ n(W, { className: c.sortIndicator, size: "12" }) })
             ]
           }
-        ) : c
+        ) : i
       }
     );
   }
 );
-x.displayName = "Table.HeaderCell";
-const k = f(
-  ({ firstColumnSticky: t = !1, lastColumnSticky: e = !1, children: l, "aria-busy": i }, a) => /* @__PURE__ */ d(
+H.displayName = "Table.HeaderCell";
+const B = u(
+  ({ firstColumnSticky: t = !1, lastColumnSticky: e = !1, children: r, "aria-busy": o }, a) => /* @__PURE__ */ n(
     "tbody",
     {
       ref: a,
-      className: n.body,
+      className: c.body,
       "data-first-column-sticky": t,
       "data-last-column-sticky": e,
-      "aria-busy": i,
-      children: l
+      "aria-busy": o,
+      children: r
     }
   )
 );
-k.displayName = "Table.Body";
-const T = f(
-  ({ disabled: t = !1, selected: e = !1, onClick: l, children: i, "aria-label": a, "data-test-id": o }, m) => {
-    const s = l !== void 0 && !t, b = (r) => {
-      t || D(r) || l && l(e);
-    }, u = (r) => {
-      s && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), b());
+B.displayName = "Table.Body";
+const I = u(
+  ({ disabled: t = !1, selected: e = !1, onClick: r, children: o, "aria-label": a, "data-test-id": l }, b) => {
+    const f = r !== void 0 && !t, m = (s) => {
+      t || q(s) || r && r(e);
+    }, p = (s) => {
+      f && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), m());
     };
-    return /* @__PURE__ */ d(
+    return /* @__PURE__ */ n(
       "tr",
       {
-        ref: m,
-        className: n.row,
+        ref: b,
+        className: c.row,
         tabIndex: 0,
-        role: s ? "button" : "row",
+        role: f ? "button" : "row",
         "data-disabled": t,
-        "data-interactive": s,
-        "data-selected": s ? void 0 : e,
+        "data-interactive": f,
+        "data-selected": f ? void 0 : e,
         "aria-disabled": t,
         "aria-label": a,
-        "aria-selected": s ? void 0 : e,
-        onClick: s ? b : void 0,
-        onKeyDown: s ? u : void 0,
-        "data-test-id": o,
-        children: i
+        "aria-selected": f ? void 0 : e,
+        onClick: f ? m : void 0,
+        onKeyDown: f ? p : void 0,
+        "data-test-id": l,
+        children: o
       }
     );
   }
 );
-T.displayName = "Table.Row";
-const H = f(
-  ({ colSpan: t, truncate: e, align: l = "left", children: i, "aria-label": a }, o) => {
-    const m = w(null);
-    return g(m, o), N(m), /* @__PURE__ */ d(
+I.displayName = "Table.Row";
+const A = u(
+  ({ colSpan: t, truncate: e, align: r = "left", children: o, "aria-label": a }, l) => {
+    const b = N(null);
+    return R(b, l), h(b), /* @__PURE__ */ n(
       "td",
       {
-        ref: m,
-        className: n.rowCell,
+        ref: b,
+        className: c.rowCell,
         colSpan: t,
-        "data-align": l,
+        "data-align": r,
         "data-truncate": e,
         "aria-label": a,
-        children: i
+        children: o
       }
     );
   }
 );
-H.displayName = "Table.RowCell";
-const V = {
-  Root: R,
-  Caption: C,
-  Header: v,
-  HeaderCell: x,
-  Body: k,
-  Row: T,
-  RowCell: H
+A.displayName = "Table.RowCell";
+const ee = {
+  Root: x,
+  Caption: k,
+  Header: z,
+  HeaderCell: H,
+  Body: B,
+  Row: I,
+  RowCell: A
 };
 export {
-  V as Table,
-  k as TableBody,
-  C as TableCaption,
-  v as TableHeader,
-  x as TableHeaderCell,
-  R as TableRoot,
-  T as TableRow,
-  H as TableRowCell
+  ee as Table,
+  B as TableBody,
+  k as TableCaption,
+  z as TableHeader,
+  H as TableHeaderCell,
+  x as TableRoot,
+  I as TableRow,
+  A as TableRowCell
 };
 //# sourceMappingURL=fondue-components25.js.map

package/dist/fondue-components25.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components25.js","sources":["../src/components/Table/Table.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconArrowBidirectional, IconArrowDown, IconArrowUp } from '@frontify/fondue-icons';\nimport {\n    type AriaAttributes,\n    forwardRef,\n    useMemo,\n    useRef,\n    type CSSProperties,\n    type KeyboardEvent,\n    type MouseEvent,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { useTextTruncation } from '#/hooks/useTextTruncation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport { Box } from '../Box/Box';\nimport { LoadingCircle } from '../LoadingCircle/LoadingCircle';\n\nimport styles from './styles/table.module.scss';\nimport { handleKeyDown, shouldIgnoreRowClick } from './utils';\n\ntype TableRootProps = {\n    /**\n     * Whether the table should have a fixed or auto layout\n     * @default 'auto'\n     */\n    layout?: 'auto' | 'fixed';\n    /**\n     * Font size of the table content\n     * @default 'small'\n     */\n    fontSize?: 'small' | 'medium';\n    /**\n     * Whether header should stick to the top when scrolling\n     * @deprecated Use `Table.Header sticky` prop instead. For sticky columns, use `Table.Body firstColumnSticky` or `lastColumnSticky` props\n     */\n    sticky?: 'head' | 'col' | 'both';\n    children: ReactNode;\n} & CommonAriaAttrs &\n    Pick<AriaAttributes, 'aria-multiselectable'>;\n\nexport const TableRoot = forwardRef<HTMLTableElement, TableRootProps>(\n    ({ layout = 'auto', fontSize = 'medium', sticky, children, ...props }, ref) => {\n        // Handle deprecated `sticky` prop for backward compatibility\n        const legacyStickyHeader = sticky === 'head' || sticky === 'both';\n        const legacyStickyLeftColumn = sticky === 'col' || sticky === 'both';\n\n        return (\n            // eslint-disable-next-line jsx-a11y-x/no-noninteractive-element-interactions\n            <table\n                ref={ref}\n                className={styles.table}\n                data-layout={layout}\n                data-font-size={fontSize}\n                data-sticky-header={legacyStickyHeader}\n                data-sticky-left-column={legacyStickyLeftColumn}\n                onKeyDown={handleKeyDown}\n                {...props}\n            >\n                {children}\n            </table>\n        );\n    },\n);\nTableRoot.displayName = 'Table.Root';\n\nexport const TableCaption = forwardRef<HTMLTableCaptionElement, { children: ReactNode }>(({ children }, ref) => {\n    return (\n        <caption ref={ref} className={styles.caption}>\n            {children}\n        </caption>\n    );\n});\nTableCaption.displayName = 'Table.Caption';\n\ntype TableHeaderProps = {\n    /**\n     * Whether the header should stick to the top when scrolling\n     * @default false\n     */\n    sticky?: boolean;\n    children: ReactNode;\n    'aria-label'?: string;\n    'aria-busy'?: boolean;\n};\n\nexport const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n    ({ sticky = false, children, 'aria-label': ariaLabel, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <thead ref={ref} className={styles.header} data-sticky={sticky} aria-label={ariaLabel} aria-busy={ariaBusy}>\n                {children}\n            </thead>\n        );\n    },\n);\nTableHeader.displayName = 'Table.Header';\n\ntype SortDirection = 'ascending' | 'descending' | undefined;\ntype HorizontalAlignment = 'left' | 'center' | 'right';\n\ntype TableHeaderCellProps = {\n    /**\n     * Scope of the column\n     * @default 'col'\n     */\n    scope?: HTMLTableCellElement['scope'];\n    /**\n     * Number of columns the cell should span\n     */\n    colSpan?: HTMLTableCellElement['colSpan'];\n    /**\n     * Width of the column\n     */\n    width?: CSSProperties['width'];\n    /**\n     * Current sort direction of the column\n     */\n    sortDirection?: SortDirection;\n    /**\n     * Horizontal alignment of the content\n     * @default 'left'\n     */\n    align?: HorizontalAlignment;\n    /**\n     * Whether to truncate content with ellipsis when it overflows\n     * @default false\n     */\n    truncate?: boolean;\n    /**\n     * Aria label for asceding/descending sort. Variables: {column} - column name\n     * @default \"Sort by {column} ascending/descending\"\n     */\n    sortTranslations?: {\n        sortAscending?: string;\n        sortDescending?: string;\n    };\n    /**\n     * Whether the column should have a minimum width\n     * @default false\n     */\n    noShrink?: boolean;\n    /**\n     * State of the cell, used for displaying loading state\n     * @default 'idle'\n     */\n    state?: 'idle' | 'loading';\n    /**\n     * The aria-label to be applied when state='loading'\n     */\n    loadingStateAriaLabel?: string;\n    /**\n     * Handler called when the sort direction changes\n     * @param direction - The new sort direction\n     */\n    onSortChange?: (direction: SortDirection) => void;\n    children: ReactNode;\n};\n\nexport const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n    (\n        {\n            noShrink = false,\n            truncate = false,\n            align = 'left',\n            scope = 'col',\n            sortTranslations,\n            sortDirection,\n            colSpan,\n            width,\n            state = 'idle',\n            loadingStateAriaLabel,\n            onSortChange,\n            children,\n        },\n        ref,\n    ) => {\n        const cellRef = useRef<HTMLTableCellElement>(null);\n        useSyncRefs<HTMLTableCellElement>(cellRef, ref);\n\n        useTextTruncation(cellRef);\n\n        const sortLabel = useMemo(() => {\n            if (typeof children === 'string') {\n                if (sortDirection === 'ascending') {\n                    return sortTranslations?.sortDescending ?? `Sort by ${children} descending`;\n                }\n                return sortTranslations?.sortAscending ?? `Sort by ${children} ascending`;\n            }\n\n            return sortDirection === 'ascending' ? 'Sort descending' : 'Sort ascending';\n        }, [children, sortDirection, sortTranslations]);\n\n        const handleSortChange = () => {\n            if (!onSortChange) {\n                return;\n            }\n\n            const newDirection: SortDirection =\n                sortDirection === undefined || sortDirection === 'descending' ? 'ascending' : 'descending';\n\n            onSortChange(newDirection);\n        };\n\n        return (\n            <th\n                ref={cellRef}\n                style={{ width }}\n                className={styles.headerCell}\n                scope={scope}\n                colSpan={colSpan}\n                data-align={align}\n                data-truncate={truncate}\n                data-no-shrink={noShrink}\n                data-sortable={!!onSortChange}\n                aria-sort={onSortChange ? sortDirection || 'none' : undefined}\n            >\n                {state === 'loading' ? (\n                    <div className={styles.cellContent} aria-live=\"polite\" aria-label={loadingStateAriaLabel}>\n                        {typeof children === 'string' && truncate ? (\n                            <span className={styles.buttonText}>{children}</span>\n                        ) : (\n                            children\n                        )}\n                        <LoadingCircle data-test-id=\"fondue-loading-circle\" size=\"xx-small\" />\n                    </div>\n                ) : onSortChange ? (\n                    <button\n                        className={styles.cellContent}\n                        aria-label={sortLabel}\n                        data-active={!!sortDirection}\n                        onClick={handleSortChange}\n                        type=\"button\"\n                    >\n                        {typeof children === 'string' && truncate ? (\n                            <span className={styles.buttonText}>{children}</span>\n                        ) : (\n                            children\n                        )}\n                        <Box width={3}>\n                            {sortDirection === 'ascending' ? (\n                                <IconArrowUp size=\"12\" />\n                            ) : sortDirection === 'descending' ? (\n                                <IconArrowDown size=\"12\" />\n                            ) : (\n                                <IconArrowBidirectional className={styles.sortIndicator} size=\"12\" />\n                            )}\n                        </Box>\n                    </button>\n                ) : (\n                    children\n                )}\n            </th>\n        );\n    },\n);\nTableHeaderCell.displayName = 'Table.HeaderCell';\n\ntype TableBodyProps = {\n    /**\n     * Whether the first column should stick to the left when scrolling horizontally\n     * @default false\n     */\n    firstColumnSticky?: boolean;\n    /**\n     * Whether the last column should stick to the right when scrolling horizontally\n     * @default false\n     */\n    lastColumnSticky?: boolean;\n    children: ReactNode;\n    'aria-busy'?: boolean;\n};\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n    ({ firstColumnSticky = false, lastColumnSticky = false, children, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <tbody\n                ref={ref}\n                className={styles.body}\n                data-first-column-sticky={firstColumnSticky}\n                data-last-column-sticky={lastColumnSticky}\n                aria-busy={ariaBusy}\n            >\n                {children}\n            </tbody>\n        );\n    },\n);\nTableBody.displayName = 'Table.Body';\n\ntype TableRowProps = {\n    /**\n     * Whether the row is in a selected state\n     * @default false\n     */\n    selected?: boolean;\n    /**\n     * Whether to disable interactions for this row\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Handler called when the row is clicked or activated via keyboard\n     * If provided, the row will be hoverable and interactive\n     */\n    onClick?: (selected: boolean) => void;\n    /**\n     * Content to be rendered within the row\n     */\n    children: ReactNode;\n    /**\n     * Accessible label for the row\n     */\n    'aria-label'?: string;\n    'data-test-id'?: string;\n};\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n    (\n        { disabled = false, selected = false, onClick, children, 'aria-label': ariaLabel, 'data-test-id': dataTestId },\n        ref,\n    ) => {\n        const isInteractive = onClick !== undefined && !disabled;\n\n        const handleClick = (event?: MouseEvent) => {\n            if (disabled) {\n                return;\n            }\n\n            if (shouldIgnoreRowClick(event)) {\n                return;\n            }\n\n            if (onClick) {\n                onClick(selected);\n            }\n        };\n\n        const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n            if (!isInteractive) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                handleClick();\n            }\n        };\n\n        return (\n            <tr\n                ref={ref}\n                className={styles.row}\n                tabIndex={0}\n                role={isInteractive ? 'button' : 'row'}\n                data-disabled={disabled}\n                data-interactive={isInteractive}\n                data-selected={!isInteractive ? selected : undefined}\n                aria-disabled={disabled}\n                aria-label={ariaLabel}\n                aria-selected={!isInteractive ? selected : undefined}\n                onClick={isInteractive ? handleClick : undefined}\n                onKeyDown={isInteractive ? handleKeyDown : undefined}\n                data-test-id={dataTestId}\n            >\n                {children}\n            </tr>\n        );\n    },\n);\nTableRow.displayName = 'Table.Row';\n\ntype TableRowCellProps = {\n    /**\n     * Number of columns the cell should span\n     */\n    colSpan?: HTMLTableCellElement['colSpan'];\n    /**\n     * Whether to truncate content with ellipsis when it overflows\n     * @default false\n     */\n    truncate?: boolean;\n    /**\n     * Horizontal alignment of the content\n     * @default 'left'\n     */\n    align?: HorizontalAlignment;\n    children: ReactNode;\n    'aria-label'?: string;\n};\n\nexport const TableRowCell = forwardRef<HTMLTableCellElement, TableRowCellProps>(\n    ({ colSpan, truncate, align = 'left', children, 'aria-label': ariaLabel }, ref): ReactElement => {\n        const cellRef = useRef<HTMLTableCellElement>(null);\n        useSyncRefs<HTMLTableCellElement>(cellRef, ref);\n\n        useTextTruncation(cellRef);\n\n        return (\n            <td\n                ref={cellRef}\n                className={styles.rowCell}\n                colSpan={colSpan}\n                data-align={align}\n                data-truncate={truncate}\n                aria-label={ariaLabel}\n            >\n                {children}\n            </td>\n        );\n    },\n);\nTableRowCell.displayName = 'Table.RowCell';\n\nexport const Table = {\n    Root: TableRoot,\n    Caption: TableCaption,\n    Header: TableHeader,\n    HeaderCell: TableHeaderCell,\n    Body: TableBody,\n    Row: TableRow,\n    RowCell: TableRowCell,\n};\n"],"names":["TableRoot","forwardRef","layout","fontSize","sticky","children","props","ref","legacyStickyHeader","legacyStickyLeftColumn","jsx","styles","handleKeyDown","TableCaption","TableHeader","ariaLabel","ariaBusy","TableHeaderCell","noShrink","truncate","align","scope","sortTranslations","sortDirection","colSpan","width","state","loadingStateAriaLabel","onSortChange","cellRef","useRef","useSyncRefs","useTextTruncation","sortLabel","useMemo","handleSortChange","jsxs","LoadingCircle","Box","IconArrowUp","IconArrowDown","IconArrowBidirectional","TableBody","firstColumnSticky","lastColumnSticky","TableRow","disabled","selected","onClick","dataTestId","isInteractive","handleClick","event","shouldIgnoreRowClick","TableRowCell","Table"],"mappings":"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"}
+{"version":3,"file":"fondue-components25.js","sources":["../src/components/Table/Table.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconArrowBidirectional, IconArrowDown, IconArrowUp } from '@frontify/fondue-icons';\nimport {\n    type AriaAttributes,\n    forwardRef,\n    useMemo,\n    useRef,\n    useEffect,\n    useState,\n    type CSSProperties,\n    type KeyboardEvent,\n    type MouseEvent,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { useTextTruncation } from '#/hooks/useTextTruncation';\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport { Box } from '../Box/Box';\nimport { LoadingCircle } from '../LoadingCircle/LoadingCircle';\n\nimport styles from './styles/table.module.scss';\nimport { handleKeyDown, shouldIgnoreRowClick } from './utils';\n\ntype TableRootProps = {\n    /**\n     * Whether the table should have a fixed or auto layout\n     * @default 'auto'\n     */\n    layout?: 'auto' | 'fixed';\n    /**\n     * Font size of the table content\n     * @default 'small'\n     */\n    fontSize?: 'small' | 'medium';\n    /**\n     * Additional spacing between table cells (both horizontal and vertical)\n     *\n     * This value is added to the default cell spacing. For example, with `gutter=\"48px\"`,\n     * cells will have 48px of additional space between them in both directions\n     * (24px added to each side).\n     *\n     * Accepts any CSS length value with units (e.g., '16px', '1rem', '48px')\n     *\n     * **Important:** Always include a unit, even for zero (use '0px', not '0')\n     * @default '0px'\n     */\n    gutter?: CSSProperties['borderSpacing'];\n    /**\n     * Whether header should stick to the top when scrolling\n     * @deprecated Use `Table.Header sticky` prop instead. For sticky columns, use `Table.Body firstColumnSticky` or `lastColumnSticky` props\n     */\n    sticky?: 'head' | 'col' | 'both';\n    /**\n     * Whether to remove the top and bottom borders from the table\n     * @default false\n     */\n    noBorder?: boolean;\n    children: ReactNode;\n} & CommonAriaAttrs &\n    Pick<AriaAttributes, 'aria-multiselectable'>;\n\nexport const TableRoot = forwardRef<HTMLTableElement, TableRootProps>(\n    ({ layout = 'auto', fontSize = 'medium', gutter = '0px', sticky, noBorder = false, children, ...props }, ref) => {\n        const tableRef = useRef<HTMLTableElement>(null);\n        const [hasHorizontalOverflow, setHasHorizontalOverflow] = useState(false);\n\n        useSyncRefs<HTMLTableElement>(tableRef, ref);\n\n        // Handle deprecated `sticky` prop for backward compatibility\n        const legacyStickyHeader = sticky === 'head' || sticky === 'both';\n        const legacyStickyLeftColumn = sticky === 'col' || sticky === 'both';\n\n        useEffect(() => {\n            const table = tableRef.current;\n            if (!table) {\n                return;\n            }\n\n            const checkOverflow = () => {\n                const parent = table.parentElement;\n                if (!parent) {\n                    return;\n                }\n\n                const tableWidth = table.scrollWidth;\n                const parentWidth = parent.clientWidth;\n                setHasHorizontalOverflow(tableWidth > parentWidth);\n            };\n\n            checkOverflow();\n\n            const resizeObserver = new ResizeObserver(checkOverflow);\n            resizeObserver.observe(table);\n            if (table.parentElement) {\n                resizeObserver.observe(table.parentElement);\n            }\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }, [children]);\n\n        return (\n            // eslint-disable-next-line jsx-a11y-x/no-noninteractive-element-interactions\n            <table\n                ref={tableRef}\n                className={styles.table}\n                style={{\n                    // @ts-expect-error CSS custom properties are not in CSSProperties type\n                    '--table-gutter': gutter,\n                }}\n                data-layout={layout}\n                data-font-size={fontSize}\n                data-sticky-header={legacyStickyHeader}\n                data-sticky-left-column={legacyStickyLeftColumn}\n                data-no-border={noBorder}\n                data-has-horizontal-overflow={hasHorizontalOverflow}\n                onKeyDown={handleKeyDown}\n                {...props}\n            >\n                {children}\n            </table>\n        );\n    },\n);\nTableRoot.displayName = 'Table.Root';\n\nexport const TableCaption = forwardRef<HTMLTableCaptionElement, { children: ReactNode }>(({ children }, ref) => {\n    return (\n        <caption ref={ref} className={styles.caption}>\n            {children}\n        </caption>\n    );\n});\nTableCaption.displayName = 'Table.Caption';\n\ntype TableHeaderProps = {\n    /**\n     * Whether the header should stick to the top when scrolling\n     * @default false\n     */\n    sticky?: boolean;\n    children: ReactNode;\n    'aria-label'?: string;\n    'aria-busy'?: boolean;\n};\n\nexport const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n    ({ sticky = false, children, 'aria-label': ariaLabel, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <thead ref={ref} className={styles.header} data-sticky={sticky} aria-label={ariaLabel} aria-busy={ariaBusy}>\n                {children}\n            </thead>\n        );\n    },\n);\nTableHeader.displayName = 'Table.Header';\n\ntype SortDirection = 'ascending' | 'descending' | undefined;\ntype HorizontalAlignment = 'left' | 'center' | 'right';\n\ntype TableHeaderCellProps = {\n    /**\n     * Scope of the column\n     * @default 'col'\n     */\n    scope?: HTMLTableCellElement['scope'];\n    /**\n     * Number of columns the cell should span\n     */\n    colSpan?: HTMLTableCellElement['colSpan'];\n    /**\n     * Width of the column\n     */\n    width?: CSSProperties['width'];\n    /**\n     * Current sort direction of the column\n     */\n    sortDirection?: SortDirection;\n    /**\n     * Horizontal alignment of the content\n     * @default 'left'\n     */\n    align?: HorizontalAlignment;\n    /**\n     * Whether to truncate content with ellipsis when it overflows\n     * @default false\n     */\n    truncate?: boolean;\n    /**\n     * Aria label for asceding/descending sort. Variables: {column} - column name\n     * @default \"Sort by {column} ascending/descending\"\n     */\n    sortTranslations?: {\n        sortAscending?: string;\n        sortDescending?: string;\n    };\n    /**\n     * Whether the column should have a minimum width\n     * @default false\n     */\n    noShrink?: boolean;\n    /**\n     * State of the cell, used for displaying loading state\n     * @default 'idle'\n     */\n    state?: 'idle' | 'loading';\n    /**\n     * The aria-label to be applied when state='loading'\n     */\n    loadingStateAriaLabel?: string;\n    /**\n     * Handler called when the sort direction changes\n     * @param direction - The new sort direction\n     */\n    onSortChange?: (direction: SortDirection) => void;\n    children: ReactNode;\n};\n\nexport const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n    (\n        {\n            noShrink = false,\n            truncate = false,\n            align = 'left',\n            scope = 'col',\n            sortTranslations,\n            sortDirection,\n            colSpan,\n            width,\n            state = 'idle',\n            loadingStateAriaLabel,\n            onSortChange,\n            children,\n        },\n        ref,\n    ) => {\n        const { t } = useTranslation();\n        const cellRef = useRef<HTMLTableCellElement>(null);\n        useSyncRefs<HTMLTableCellElement>(cellRef, ref);\n\n        useTextTruncation(cellRef);\n\n        const sortLabel = useMemo(() => {\n            if (typeof children === 'string') {\n                if (sortDirection === 'ascending') {\n                    return sortTranslations?.sortDescending ?? t('Table_sortByDescending', { column: children });\n                }\n                return sortTranslations?.sortAscending ?? t('Table_sortByAscending', { column: children });\n            }\n\n            return sortDirection === 'ascending' ? t('Table_sortDescending') : t('Table_sortAscending');\n        }, [children, sortDirection, sortTranslations, t]);\n\n        const handleSortChange = () => {\n            if (!onSortChange) {\n                return;\n            }\n\n            const newDirection: SortDirection =\n                sortDirection === undefined || sortDirection === 'descending' ? 'ascending' : 'descending';\n\n            onSortChange(newDirection);\n        };\n\n        return (\n            <th\n                ref={cellRef}\n                style={{ width }}\n                className={styles.headerCell}\n                scope={scope}\n                colSpan={colSpan}\n                data-align={align}\n                data-truncate={truncate}\n                data-no-shrink={noShrink}\n                data-sortable={!!onSortChange}\n                aria-sort={onSortChange ? sortDirection || 'none' : undefined}\n            >\n                {state === 'loading' ? (\n                    <div className={styles.cellContent} aria-live=\"polite\" aria-label={loadingStateAriaLabel}>\n                        {typeof children === 'string' && truncate ? (\n                            <span className={styles.buttonText}>{children}</span>\n                        ) : (\n                            children\n                        )}\n                        <LoadingCircle data-test-id=\"fondue-loading-circle\" size=\"xx-small\" />\n                    </div>\n                ) : onSortChange ? (\n                    <button\n                        className={styles.cellContent}\n                        aria-label={sortLabel}\n                        data-active={!!sortDirection}\n                        onClick={handleSortChange}\n                        type=\"button\"\n                    >\n                        {typeof children === 'string' && truncate ? (\n                            <span className={styles.buttonText}>{children}</span>\n                        ) : (\n                            children\n                        )}\n                        <Box width={3}>\n                            {sortDirection === 'ascending' ? (\n                                <IconArrowUp size=\"12\" />\n                            ) : sortDirection === 'descending' ? (\n                                <IconArrowDown size=\"12\" />\n                            ) : (\n                                <IconArrowBidirectional className={styles.sortIndicator} size=\"12\" />\n                            )}\n                        </Box>\n                    </button>\n                ) : (\n                    children\n                )}\n            </th>\n        );\n    },\n);\nTableHeaderCell.displayName = 'Table.HeaderCell';\n\ntype TableBodyProps = {\n    /**\n     * Whether the first column should stick to the left when scrolling horizontally\n     * @default false\n     */\n    firstColumnSticky?: boolean;\n    /**\n     * Whether the last column should stick to the right when scrolling horizontally\n     * @default false\n     */\n    lastColumnSticky?: boolean;\n    children: ReactNode;\n    'aria-busy'?: boolean;\n};\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n    ({ firstColumnSticky = false, lastColumnSticky = false, children, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <tbody\n                ref={ref}\n                className={styles.body}\n                data-first-column-sticky={firstColumnSticky}\n                data-last-column-sticky={lastColumnSticky}\n                aria-busy={ariaBusy}\n            >\n                {children}\n            </tbody>\n        );\n    },\n);\nTableBody.displayName = 'Table.Body';\n\ntype TableRowProps = {\n    /**\n     * Whether the row is in a selected state\n     * @default false\n     */\n    selected?: boolean;\n    /**\n     * Whether to disable interactions for this row\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Handler called when the row is clicked or activated via keyboard\n     * If provided, the row will be hoverable and interactive\n     */\n    onClick?: (selected: boolean) => void;\n    /**\n     * Content to be rendered within the row\n     */\n    children: ReactNode;\n    /**\n     * Accessible label for the row\n     */\n    'aria-label'?: string;\n    'data-test-id'?: string;\n};\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n    (\n        { disabled = false, selected = false, onClick, children, 'aria-label': ariaLabel, 'data-test-id': dataTestId },\n        ref,\n    ) => {\n        const isInteractive = onClick !== undefined && !disabled;\n\n        const handleClick = (event?: MouseEvent) => {\n            if (disabled) {\n                return;\n            }\n\n            if (shouldIgnoreRowClick(event)) {\n                return;\n            }\n\n            if (onClick) {\n                onClick(selected);\n            }\n        };\n\n        const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n            if (!isInteractive) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                handleClick();\n            }\n        };\n\n        return (\n            <tr\n                ref={ref}\n                className={styles.row}\n                tabIndex={0}\n                role={isInteractive ? 'button' : 'row'}\n                data-disabled={disabled}\n                data-interactive={isInteractive}\n                data-selected={!isInteractive ? selected : undefined}\n                aria-disabled={disabled}\n                aria-label={ariaLabel}\n                aria-selected={!isInteractive ? selected : undefined}\n                onClick={isInteractive ? handleClick : undefined}\n                onKeyDown={isInteractive ? handleKeyDown : undefined}\n                data-test-id={dataTestId}\n            >\n                {children}\n            </tr>\n        );\n    },\n);\nTableRow.displayName = 'Table.Row';\n\ntype TableRowCellProps = {\n    /**\n     * Number of columns the cell should span\n     */\n    colSpan?: HTMLTableCellElement['colSpan'];\n    /**\n     * Whether to truncate content with ellipsis when it overflows\n     * @default false\n     */\n    truncate?: boolean;\n    /**\n     * Horizontal alignment of the content\n     * @default 'left'\n     */\n    align?: HorizontalAlignment;\n    children: ReactNode;\n    'aria-label'?: string;\n};\n\nexport const TableRowCell = forwardRef<HTMLTableCellElement, TableRowCellProps>(\n    ({ colSpan, truncate, align = 'left', children, 'aria-label': ariaLabel }, ref): ReactElement => {\n        const cellRef = useRef<HTMLTableCellElement>(null);\n        useSyncRefs<HTMLTableCellElement>(cellRef, ref);\n\n        useTextTruncation(cellRef);\n\n        return (\n            <td\n                ref={cellRef}\n                className={styles.rowCell}\n                colSpan={colSpan}\n                data-align={align}\n                data-truncate={truncate}\n                aria-label={ariaLabel}\n            >\n                {children}\n            </td>\n        );\n    },\n);\nTableRowCell.displayName = 'Table.RowCell';\n\nexport const Table = {\n    Root: TableRoot,\n    Caption: TableCaption,\n    Header: TableHeader,\n    HeaderCell: TableHeaderCell,\n    Body: TableBody,\n    Row: TableRow,\n    RowCell: TableRowCell,\n};\n"],"names":["TableRoot","forwardRef","layout","fontSize","gutter","sticky","noBorder","children","props","ref","tableRef","useRef","hasHorizontalOverflow","setHasHorizontalOverflow","useState","useSyncRefs","legacyStickyHeader","legacyStickyLeftColumn","useEffect","table","checkOverflow","parent","tableWidth","parentWidth","resizeObserver","jsx","styles","handleKeyDown","TableCaption","TableHeader","ariaLabel","ariaBusy","TableHeaderCell","noShrink","truncate","align","scope","sortTranslations","sortDirection","colSpan","width","state","loadingStateAriaLabel","onSortChange","t","useTranslation","cellRef","useTextTruncation","sortLabel","useMemo","handleSortChange","jsxs","LoadingCircle","Box","IconArrowUp","IconArrowDown","IconArrowBidirectional","TableBody","firstColumnSticky","lastColumnSticky","TableRow","disabled","selected","onClick","dataTestId","isInteractive","handleClick","event","shouldIgnoreRowClick","TableRowCell","Table"],"mappings":"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"}

package/dist/fondue-components26.js

@@ -1,7 +1,7 @@
 import { jsxs as g, jsx as t, Fragment as h } from "react/jsx-runtime";
 import { IconPlus as z, IconCross as B } from "@frontify/fondue-icons";
 import { useState as $, Children as T, isValidElement as x } from "react";
-import s from "./fondue-components77.js";
+import s from "./fondue-components78.js";
 const H = ({
   "aria-label": e,
   "data-test-id": n = "tag",

package/dist/fondue-components27.js

@@ -2,12 +2,12 @@ import { jsx as a, jsxs as b } from "react/jsx-runtime";
 import { createContext as E, forwardRef as l, useContext as f, useRef as w, useEffect as q, useMemo as I, useCallback as B, createElement as z } from "react";
 import { IconDotsHorizontal as F } from "@frontify/fondue-icons";
 import * as c from "@radix-ui/react-tabs";
-import { useControllableState as H } from "./fondue-components64.js";
+import { useControllableState as H } from "./fondue-components65.js";
 import { Button as M } from "./fondue-components6.js";
 import { Dropdown as d } from "./fondue-components11.js";
 import { useFondueTheme as W } from "./fondue-components31.js";
-import { useTabTriggers as G } from "./fondue-components78.js";
-import n from "./fondue-components79.js";
+import { useTabTriggers as G } from "./fondue-components79.js";
+import n from "./fondue-components80.js";
 const m = E({
   value: "",
   disabled: !1

package/dist/fondue-components28.js

@@ -1,7 +1,7 @@
 import { jsx as p } from "react/jsx-runtime";
 import { forwardRef as l } from "react";
-import { cn as c } from "./fondue-components38.js";
-import t from "./fondue-components80.js";
+import { cn as c } from "./fondue-components39.js";
+import t from "./fondue-components81.js";
 const x = l(
   ({
     children: e,

package/dist/fondue-components29.js

@@ -1,8 +1,8 @@
 import { jsxs as m, jsx as s } from "react/jsx-runtime";
 import { IconCheckMark as h, IconExclamationMarkTriangle as S } from "@frontify/fondue-icons";
 import { forwardRef as f, useRef as T } from "react";
-import { cn as u } from "./fondue-components38.js";
-import a from "./fondue-components81.js";
+import { cn as u } from "./fondue-components39.js";
+import a from "./fondue-components82.js";
 const x = ({
   children: i,
   className: c,

package/dist/fondue-components30.js

@@ -1,7 +1,7 @@
 import { jsxs as z, jsx as o } from "react/jsx-runtime";
 import { IconCheckMark as $, IconExclamationMarkTriangle as b, IconCross as q } from "@frontify/fondue-icons";
 import { useRef as F, useState as x, useEffect as B } from "react";
-import l from "./fondue-components82.js";
+import l from "./fondue-components83.js";
 const Q = ({
   "data-test-id": w = "fondue-textarea",
   autocomplete: D,

package/dist/fondue-components31.js

@@ -1,16 +1,34 @@
-import { jsx as r } from "react/jsx-runtime";
-import i from "./fondue-components83.js";
-import { Slot as c } from "@radix-ui/react-slot";
-import { createContext as a, useContext as u, useMemo as p } from "react";
-const o = a({ theme: "light", dir: "ltr" });
+import { jsx as m } from "react/jsx-runtime";
+import a from "./fondue-components84.js";
+import { Slot as p } from "@radix-ui/react-slot";
+import { createContext as u, useContext as x, useMemo as f } from "react";
+import { enUS as n } from "./fondue-components85.js";
+const o = u({
+  theme: "light",
+  dir: "ltr",
+  translations: n
+});
 o.displayName = "ThemeContext";
-const C = () => u(o), v = ({ children: m, theme: e = "light", dir: t = "ltr", asChild: s = !1 }) => {
-  const n = s ? c : "div", l = p(() => ({ theme: e, dir: t }), [e, t]);
-  return /* @__PURE__ */ r(o.Provider, { value: l, children: /* @__PURE__ */ r(n, { dir: t, className: i[e], children: m }) });
+const g = () => x(o), y = ({
+  children: s,
+  theme: e = "light",
+  dir: t = "ltr",
+  translations: r = n,
+  asChild: l = !1
+}) => {
+  const i = l ? p : "div", c = f(
+    () => ({
+      theme: e,
+      dir: t,
+      translations: r
+    }),
+    [t, e, r]
+  );
+  return /* @__PURE__ */ m(o.Provider, { value: c, children: /* @__PURE__ */ m(i, { dir: t, className: a[e], children: s }) });
 };
 export {
   o as ThemeContext,
-  v as ThemeProvider,
-  C as useFondueTheme
+  y as ThemeProvider,
+  g as useFondueTheme
 };
 //# sourceMappingURL=fondue-components31.js.map

package/dist/fondue-components31.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components31.js","sources":["../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport styles from '@frontify/fondue-tokens/theme-tokens';\nimport { Slot } from '@radix-ui/react-slot';\nimport { createContext, useContext, useMemo, type ReactNode } from 'react';\n\ntype AvailableTheme = keyof typeof styles;\n\ntype ThemeProviderProps = {\n    children: ReactNode;\n    /**\n     * The theme to apply\n     * @default \"light\"\n     * */\n    theme: AvailableTheme;\n    /**\n     * Direction to apply to the theme\n     * @default \"ltr\"\n     */\n    dir: 'ltr' | 'rtl';\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n};\n\nexport const ThemeContext = createContext<Pick<ThemeProviderProps, 'theme' | 'dir'>>({ theme: 'light', dir: 'ltr' });\nThemeContext.displayName = 'ThemeContext';\n\nexport const useFondueTheme = () => {\n    return useContext(ThemeContext);\n};\n\nexport const ThemeProvider = ({ children, theme = 'light', dir = 'ltr', asChild = false }: ThemeProviderProps) => {\n    const Comp = asChild ? Slot : 'div';\n\n    const contextValue = useMemo(() => ({ theme, dir }), [theme, dir]);\n\n    return (\n        <ThemeContext.Provider value={contextValue}>\n            <Comp dir={dir} className={styles[theme]}>\n                {children}\n            </Comp>\n        </ThemeContext.Provider>\n    );\n};\n"],"names":["ThemeContext","createContext","useFondueTheme","useContext","ThemeProvider","children","theme","dir","asChild","Comp","Slot","contextValue","useMemo","jsx","styles"],"mappings":";;;;AA2BO,MAAMA,IAAeC,EAAyD,EAAE,OAAO,SAAS,KAAK,OAAO;AACnHD,EAAa,cAAc;AAEpB,MAAME,IAAiB,MACnBC,EAAWH,CAAY,GAGrBI,IAAgB,CAAC,EAAE,UAAAC,GAAU,OAAAC,IAAQ,SAAS,KAAAC,IAAM,OAAO,SAAAC,IAAU,SAAgC;AAC9G,QAAMC,IAAOD,IAAUE,IAAO,OAExBC,IAAeC,EAAQ,OAAO,EAAE,OAAAN,GAAO,KAAAC,MAAQ,CAACD,GAAOC,CAAG,CAAC;AAEjE,SACI,gBAAAM,EAACb,EAAa,UAAb,EAAsB,OAAOW,GAC1B,UAAA,gBAAAE,EAACJ,GAAA,EAAK,KAAAF,GAAU,WAAWO,EAAOR,CAAK,GAClC,UAAAD,GACL,GACJ;AAER;"}
+{"version":3,"file":"fondue-components31.js","sources":["../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport styles from '@frontify/fondue-tokens/theme-tokens';\nimport { Slot } from '@radix-ui/react-slot';\nimport { createContext, useContext, useMemo, type ReactNode } from 'react';\n\nimport { enUS, type Translations } from '../../locales';\n\ntype AvailableTheme = keyof typeof styles;\n\ntype ThemeProviderProps = {\n    children: ReactNode;\n    /**\n     * The theme to apply\n     * @default \"light\"\n     * */\n    theme?: AvailableTheme;\n    /**\n     * Direction to apply to the theme\n     * @default \"ltr\"\n     */\n    dir?: 'ltr' | 'rtl';\n    /**\n     * Translations object to use for component strings.\n     * Import from '@frontify/fondue/components/locales' or provide your own.\n     * Must be a complete Translations object.\n     * @default \"enUS\"\n     * @example\n     * ```tsx\n     * import { deDE } from '@frontify/fondue/components/locales';\n     * <ThemeProvider translations={deDE}>...</ThemeProvider>\n     * ```\n     */\n    translations?: Translations;\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n};\n\ntype ThemeContextValue = {\n    theme: AvailableTheme;\n    dir: 'ltr' | 'rtl';\n    translations: Translations;\n};\n\nexport const ThemeContext = createContext<ThemeContextValue>({\n    theme: 'light',\n    dir: 'ltr',\n    translations: enUS,\n});\nThemeContext.displayName = 'ThemeContext';\n\nexport const useFondueTheme = () => {\n    return useContext(ThemeContext);\n};\n\nexport const ThemeProvider = ({\n    children,\n    theme = 'light',\n    dir = 'ltr',\n    translations = enUS,\n    asChild = false,\n}: ThemeProviderProps) => {\n    const Comp = asChild ? Slot : 'div';\n\n    const contextValue = useMemo(\n        () => ({\n            theme,\n            dir,\n            translations,\n        }),\n        [dir, theme, translations],\n    );\n\n    return (\n        <ThemeContext.Provider value={contextValue}>\n            <Comp dir={dir} className={styles[theme]}>\n                {children}\n            </Comp>\n        </ThemeContext.Provider>\n    );\n};\n"],"names":["ThemeContext","createContext","enUS","useFondueTheme","useContext","ThemeProvider","children","theme","dir","translations","asChild","Comp","Slot","contextValue","useMemo","jsx","styles"],"mappings":";;;;;AA+CO,MAAMA,IAAeC,EAAiC;AAAA,EACzD,OAAO;AAAA,EACP,KAAK;AAAA,EACL,cAAcC;AAClB,CAAC;AACDF,EAAa,cAAc;AAEpB,MAAMG,IAAiB,MACnBC,EAAWJ,CAAY,GAGrBK,IAAgB,CAAC;AAAA,EAC1B,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,KAAAC,IAAM;AAAA,EACN,cAAAC,IAAeP;AAAA,EACf,SAAAQ,IAAU;AACd,MAA0B;AACtB,QAAMC,IAAOD,IAAUE,IAAO,OAExBC,IAAeC;AAAA,IACjB,OAAO;AAAA,MACH,OAAAP;AAAA,MACA,KAAAC;AAAA,MACA,cAAAC;AAAA,IAAA;AAAA,IAEJ,CAACD,GAAKD,GAAOE,CAAY;AAAA,EAAA;AAG7B,SACI,gBAAAM,EAACf,EAAa,UAAb,EAAsB,OAAOa,GAC1B,UAAA,gBAAAE,EAACJ,GAAA,EAAK,KAAAH,GAAU,WAAWQ,EAAOT,CAAK,GAClC,UAAAD,GACL,GACJ;AAER;"}

package/dist/fondue-components32.js

@@ -1,9 +1,9 @@
 import { jsx as o, jsxs as y } from "react/jsx-runtime";
 import * as r from "@radix-ui/react-tooltip";
 import { forwardRef as l } from "react";
-import { cn as R } from "./fondue-components38.js";
+import { cn as R } from "./fondue-components39.js";
 import { useFondueTheme as N, ThemeProvider as x } from "./fondue-components31.js";
-import s from "./fondue-components84.js";
+import s from "./fondue-components86.js";
 const p = ({ children: t, enterDelay: e = 700, open: i, onOpenChange: n }) => /* @__PURE__ */ o(r.Provider, { children: /* @__PURE__ */ o(r.Root, { delayDuration: e, open: i, onOpenChange: n, children: t }) });
 p.displayName = "Tooltip.Root";
 const m = ({ asChild: t = !1, children: e, "data-test-id": i = "fondue-tooltip-trigger" }, n) => /* @__PURE__ */ o(

package/dist/fondue-components33.js

@@ -1,4 +1,4 @@
-const o = "_root_eybkh_2", c = "_accordionItem_eybkh_23", n = "_accordionTrigger_eybkh_29", r = "_accordionHeader_eybkh_34", t = "_accordionSlot_eybkh_41", e = "_accordionCaret_eybkh_66", a = "_accordionTriggerContent_eybkh_74", i = "_accordionContent_eybkh_79", d = "_accordionContentText_eybkh_108", _ = {
+const o = "_root_12wzh_2", c = "_accordionItem_12wzh_23", n = "_accordionTrigger_12wzh_29", r = "_accordionHeader_12wzh_34", t = "_accordionSlot_12wzh_42", e = "_accordionCaret_12wzh_69", a = "_accordionTriggerContent_12wzh_77", i = "_accordionContent_12wzh_82", d = "_accordionContentText_12wzh_111", _ = {
   root: o,
   accordionItem: c,
   accordionTrigger: n,

package/dist/fondue-components34.js

@@ -1,11 +1,27 @@
-import { jsx as r } from "react/jsx-runtime";
-import s from "./fondue-components85.js";
-import { colorToCss as e } from "./fondue-components86.js";
-const a = ["default", "positive", "highlight", "warning", "negative"], i = (t) => typeof t == "string" && a.includes(t), p = ({ status: t }) => {
-  const o = i(t) ? { "data-status": t } : { style: { backgroundColor: typeof t == "string" ? t : e(t) || "transparent" } };
-  return /* @__PURE__ */ r("div", { "data-test-id": "badge-status", className: s.root, ...o });
+import { useContext as i, useCallback as u } from "react";
+import { ThemeContext as c } from "./fondue-components31.js";
+const d = () => {
+  const { translations: r } = i(c);
+  return {
+    /** Translation function */
+    t: u(
+      (o, e) => {
+        const n = r[o];
+        if (n === void 0)
+          return process.env.NODE_ENV !== "production" && console.warn(`[Fondue] Translation key "${o}" not found`), o;
+        if (typeof n != "string")
+          return process.env.NODE_ENV !== "production" && console.warn(`[Fondue] Translation value for key "${o}" is not a string`), o;
+        let t = n;
+        if (e)
+          for (const [s, a] of Object.entries(e))
+            t = t.replaceAll(`\${${s}}`, a);
+        return t;
+      },
+      [r]
+    )
+  };
 };
 export {
-  p as BadgeStatus
+  d as useTranslation
 };
 //# sourceMappingURL=fondue-components34.js.map