@frontify/fondue-components 13.0.2 → 14.0.0

package/dist/fondue-components24.js

@@ -1,122 +1,157 @@
-import { jsx as a, jsxs as u } from "react/jsx-runtime";
-import { createContext as x, forwardRef as i, useCallback as A, createElement as N, useContext as b, useRef as D, useEffect as E } from "react";
-import { IconDotsHorizontal as O } from "@frontify/fondue-icons";
-import * as d from "@radix-ui/react-tabs";
-import { useControllableState as V } from "./fondue-components55.js";
-import { Button as q } from "./fondue-components4.js";
-import { Dropdown as l } from "./fondue-components9.js";
-import { useTabTriggers as B } from "./fondue-components68.js";
-import r from "./fondue-components69.js";
-const T = x({
-  value: "",
-  disabled: !1
-}), w = x({
-  addTrigger: () => {
-  }
-}), y = ({
-  padding: t = "compact",
-  activeTab: o,
-  defaultActiveTab: s,
-  size: n = "medium",
-  onActiveTabChange: c,
-  children: m,
-  ...p
-}, k) => {
-  var R;
-  const [f, v] = V({
-    prop: o,
-    defaultProp: s,
-    onChange: c
-  }), g = A(
-    (e) => {
-      v(e);
-    },
-    [v]
-  ), { triggerListRef: P, activeIndicatorRef: S, triggers: C, triggersOutOfView: h, addTrigger: j } = B({
-    activeTab: f
-  });
-  return /* @__PURE__ */ a(w.Provider, { value: { addTrigger: j }, children: /* @__PURE__ */ u(
-    d.Root,
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { IconArrowUp as A, IconArrowDown as K, IconArrowBidirectional as h } from "@frontify/fondue-icons";
+import { forwardRef as m, useRef as w, useMemo as j } from "react";
+import { useSyncRefs as g } from "./fondue-components43.js";
+import { useTextTruncation as N } from "./fondue-components67.js";
+import { Box as L } from "./fondue-components4.js";
+import { LoadingCircle as S } from "./fondue-components17.js";
+import i from "./fondue-components68.js";
+import { handleKeyDown as $ } from "./fondue-components69.js";
+const R = m(
+  ({ layout: a = "auto", fontSize: e = "medium", sticky: n, children: r, ...d }, l) => /* @__PURE__ */ t("div", { onKeyDown: $, role: "grid", tabIndex: -1, children: /* @__PURE__ */ t(
+    "table",
     {
-      ref: k,
-      className: r.root,
-      onValueChange: g,
-      value: f ?? ((R = C[0]) == null ? void 0 : R.value),
-      "data-tabs-content-padding": t,
-      ...p,
-      children: [
-        /* @__PURE__ */ u("div", { className: r.triggerListWrapper, children: [
-          /* @__PURE__ */ a(d.List, { ref: P, "data-size": n, className: r.triggerList, children: C.map((e) => /* @__PURE__ */ N(
-            d.Trigger,
-            {
-              ...e.props,
-              key: e.value,
-              value: e.value,
-              disabled: e.disabled,
-              className: r.trigger,
-              ref: e.ref
-            },
-            e.element
-          )) }),
-          /* @__PURE__ */ u(l.Root, { children: [
-            h.length > 0 && /* @__PURE__ */ a(l.Trigger, { "data-test-id": "overflow-items-dropdown-trigger", children: /* @__PURE__ */ a(q, { emphasis: "default", aspect: "square", size: "small", children: /* @__PURE__ */ a(O, { size: 16 }) }) }),
-            /* @__PURE__ */ a(l.Content, { align: "end", "data-test-id": "overflow-items-dropdown-content", children: h.map((e) => /* @__PURE__ */ N(
-              l.Item,
-              {
-                ...e.props,
-                disabled: e.disabled,
-                onSelect: () => g(e.value),
-                key: e.value
-              },
-              e.element
-            )) })
-          ] }),
-          /* @__PURE__ */ a(
-            "span",
-            {
-              "data-test-id": "active-tab-indicator",
-              ref: S,
-              className: r.activeIndicator
-            }
-          )
-        ] }),
-        m
-      ]
+      ref: l,
+      className: i.table,
+      "data-layout": a,
+      "data-font-size": e,
+      "data-sticky": n,
+      ...d,
+      children: r
     }
-  ) });
-};
-y.displayName = "Tabs.Root";
-const z = ({ children: t, value: o, disabled: s }) => /* @__PURE__ */ a(T.Provider, { value: { value: o, disabled: s }, children: t });
-z.displayName = "Tabs.Tab";
-const I = ({ children: t, ...o }, s) => {
-  const { value: n, disabled: c } = b(T), { addTrigger: m } = b(w), p = D(null);
-  return E(() => {
-    m({
-      ref: p || s,
-      value: n ?? "",
-      disabled: c,
-      props: o,
-      element: t
-    });
-  }, []), null;
-};
-I.displayName = "Tabs.Trigger";
-const L = ({ children: t, ...o }, s) => {
-  const { value: n } = b(T);
-  return /* @__PURE__ */ a(d.Content, { ref: s, ...o, className: r.content, value: n ?? "", children: t });
-};
-L.displayName = "Tabs.Content";
-const U = {
-  Root: i(y),
-  Tab: i(z),
-  Trigger: i(I),
-  Content: i(L)
+  ) })
+);
+R.displayName = "Table.Root";
+const C = m(({ children: a }, e) => /* @__PURE__ */ t("caption", { ref: e, className: i.caption, children: a }));
+C.displayName = "Table.Caption";
+const x = m(
+  ({ children: a, "aria-label": e, "aria-busy": n }, r) => /* @__PURE__ */ t("thead", { ref: r, className: i.header, "aria-label": e, "aria-busy": n, children: a })
+);
+x.displayName = "Table.Header";
+const T = m(
+  ({
+    noShrink: a = !1,
+    truncate: e = !1,
+    align: n = "left",
+    scope: r = "col",
+    sortTranslations: d,
+    sortDirection: l,
+    colSpan: c,
+    width: f,
+    state: b = "idle",
+    loadingStateAriaLabel: u,
+    onSortChange: s,
+    children: o
+  }, v) => {
+    const y = w(null);
+    g(y, v), N(y);
+    const z = j(() => typeof o == "string" ? l === "ascending" ? (d == null ? void 0 : d.sortDescending) ?? `Sort by ${o} descending` : (d == null ? void 0 : d.sortAscending) ?? `Sort by ${o} ascending` : l === "ascending" ? "Sort descending" : "Sort ascending", [o, l, d]), B = () => {
+      if (!s)
+        return;
+      s(l === void 0 || l === "descending" ? "ascending" : "descending");
+    };
+    return /* @__PURE__ */ t(
+      "th",
+      {
+        ref: y,
+        style: { width: f },
+        className: i.headerCell,
+        scope: r,
+        colSpan: c,
+        "data-align": n,
+        "data-truncate": e,
+        "data-no-shrink": a,
+        "data-sortable": !!s,
+        "aria-sort": s ? l || "none" : void 0,
+        children: b === "loading" ? /* @__PURE__ */ p("div", { className: i.cellContent, "aria-live": "polite", "aria-label": u, children: [
+          typeof o == "string" && e ? /* @__PURE__ */ t("span", { className: i.buttonText, children: o }) : o,
+          /* @__PURE__ */ t(S, { "data-test-id": "fondue-loading-circle", size: "xx-small" })
+        ] }) : s ? /* @__PURE__ */ p(
+          "button",
+          {
+            className: i.cellContent,
+            "aria-label": z,
+            "data-active": !!l,
+            onClick: B,
+            children: [
+              typeof o == "string" && e ? /* @__PURE__ */ t("span", { className: i.buttonText, children: o }) : o,
+              /* @__PURE__ */ t(L, { width: 3, children: l === "ascending" ? /* @__PURE__ */ t(A, { size: "12" }) : l === "descending" ? /* @__PURE__ */ t(K, { size: "12" }) : /* @__PURE__ */ t(h, { className: i.sortIndicator, size: "12" }) })
+            ]
+          }
+        ) : o
+      }
+    );
+  }
+);
+T.displayName = "Table.HeaderCell";
+const I = m(
+  ({ children: a, "aria-busy": e }, n) => /* @__PURE__ */ t("tbody", { ref: n, className: i.body, "aria-busy": e, children: a })
+);
+I.displayName = "Table.Body";
+const H = m(
+  ({ disabled: a = !1, selected: e = !1, onClick: n, children: r, "aria-label": d, "data-test-id": l }, c) => {
+    const f = n !== void 0 && !a, b = () => {
+      a || n && n(e);
+    }, u = (s) => {
+      f && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), b());
+    };
+    return /* @__PURE__ */ t(
+      "tr",
+      {
+        ref: c,
+        className: i.row,
+        tabIndex: 0,
+        role: f ? "button" : "row",
+        "data-disabled": a,
+        "data-interactive": f,
+        "data-selected": e,
+        "aria-disabled": a,
+        "aria-label": d,
+        "aria-selected": e,
+        onClick: f ? b : void 0,
+        onKeyDown: f ? u : void 0,
+        "data-test-id": l,
+        children: r
+      }
+    );
+  }
+);
+H.displayName = "Table.Row";
+const k = m(
+  ({ colSpan: a, truncate: e, align: n = "left", children: r, "aria-label": d }, l) => {
+    const c = w(null);
+    return g(c, l), N(c), /* @__PURE__ */ t(
+      "td",
+      {
+        ref: c,
+        className: i.rowCell,
+        colSpan: a,
+        "data-align": n,
+        "data-truncate": e,
+        "aria-label": d,
+        children: r
+      }
+    );
+  }
+);
+k.displayName = "Table.RowCell";
+const Q = {
+  Root: R,
+  Caption: C,
+  Header: x,
+  HeaderCell: T,
+  Body: I,
+  Row: H,
+  RowCell: k
 };
 export {
-  U as Tabs,
-  L as TabsContent,
-  y as TabsRoot,
-  z as TabsTab,
-  I as TabsTrigger
+  Q as Table,
+  I as TableBody,
+  C as TableCaption,
+  x as TableHeader,
+  T as TableHeaderCell,
+  R as TableRoot,
+  H as TableRow,
+  k as TableRowCell
 };
 //# sourceMappingURL=fondue-components24.js.map

package/dist/fondue-components24.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components24.js","sources":["../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconDotsHorizontal } from '@frontify/fondue-icons';\nimport * as RadixTabs from '@radix-ui/react-tabs';\nimport {\n    createContext,\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport { Button } from '../Button/Button';\nimport { Dropdown } from '../Dropdown/Dropdown';\n\nimport { useTabTriggers } from './hooks/useTabTriggers';\nimport styles from './styles/tabs.module.scss';\nimport { type TabTrigger } from './types';\n\nexport type TabsRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The default active tab\n     * Used for uncontrolled components\n     */\n    defaultActiveTab?: string;\n    /**\n     * The controlled value of the active tab\n     */\n    activeTab?: string;\n    /**\n     * The height of the tabs\n     * @default 'medium'\n     */\n    size?: 'medium' | 'large';\n    /**\n     * Event handler called when the active tab changes\n     */\n    onActiveTabChange?: (value: string) => void;\n};\n\nconst TabConfigContext = createContext<{\n    value: string;\n    disabled?: boolean;\n}>({\n    value: '',\n    disabled: false,\n});\n\nconst TabTriggerContext = createContext<{\n    addTrigger: (trigger: TabTrigger) => void;\n}>({\n    addTrigger: () => {},\n});\n\nexport const TabsRoot = (\n    {\n        padding = 'compact',\n        activeTab: propsActiveTab,\n        defaultActiveTab,\n        size = 'medium',\n        onActiveTabChange,\n        children,\n        ...props\n    }: TabsRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [activeTab, setActiveTab] = useControllableState({\n        prop: propsActiveTab,\n        defaultProp: defaultActiveTab,\n        onChange: onActiveTabChange,\n    });\n\n    const handleSetActiveTab = useCallback(\n        (value: string) => {\n            setActiveTab(value);\n        },\n        [setActiveTab],\n    );\n\n    const { triggerListRef, activeIndicatorRef, triggers, triggersOutOfView, addTrigger } = useTabTriggers({\n        activeTab,\n    });\n\n    return (\n        <TabTriggerContext.Provider value={{ addTrigger }}>\n            <RadixTabs.Root\n                ref={ref}\n                className={styles.root}\n                onValueChange={handleSetActiveTab}\n                value={activeTab ?? triggers[0]?.value}\n                data-tabs-content-padding={padding}\n                {...props}\n            >\n                <div className={styles.triggerListWrapper}>\n                    <RadixTabs.List ref={triggerListRef} data-size={size} className={styles.triggerList}>\n                        {triggers.map((trigger) => (\n                            <RadixTabs.Trigger\n                                {...trigger.props}\n                                key={trigger.value}\n                                value={trigger.value}\n                                disabled={trigger.disabled}\n                                className={styles.trigger}\n                                ref={trigger.ref}\n                            >\n                                {trigger.element}\n                            </RadixTabs.Trigger>\n                        ))}\n                    </RadixTabs.List>\n                    <Dropdown.Root>\n                        {triggersOutOfView.length > 0 && (\n                            <Dropdown.Trigger data-test-id=\"overflow-items-dropdown-trigger\">\n                                <Button emphasis=\"default\" aspect=\"square\" size=\"small\">\n                                    <IconDotsHorizontal size={16} />\n                                </Button>\n                            </Dropdown.Trigger>\n                        )}\n                        <Dropdown.Content align=\"end\" data-test-id=\"overflow-items-dropdown-content\">\n                            {triggersOutOfView.map((trigger) => (\n                                <Dropdown.Item\n                                    {...trigger.props}\n                                    disabled={trigger.disabled}\n                                    onSelect={() => handleSetActiveTab(trigger.value)}\n                                    key={trigger.value}\n                                >\n                                    {trigger.element}\n                                </Dropdown.Item>\n                            ))}\n                        </Dropdown.Content>\n                    </Dropdown.Root>\n                    <span\n                        data-test-id=\"active-tab-indicator\"\n                        ref={activeIndicatorRef}\n                        className={styles.activeIndicator}\n                    />\n                </div>\n                {children}\n            </RadixTabs.Root>\n        </TabTriggerContext.Provider>\n    );\n};\nTabsRoot.displayName = 'Tabs.Root';\n\ntype TabsTabProps = {\n    children: ReactNode;\n    value: string;\n    disabled?: boolean;\n};\n\nexport const TabsTab = ({ children, value, disabled }: TabsTabProps) => (\n    <TabConfigContext.Provider value={{ value, disabled }}>{children}</TabConfigContext.Provider>\n);\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabsTriggerProps = {\n    children: ReactNode;\n};\n\nexport const TabsTrigger = ({ children, ...props }: TabsTriggerProps, ref: ForwardedRef<HTMLButtonElement>) => {\n    const { value, disabled } = useContext(TabConfigContext);\n\n    const { addTrigger } = useContext(TabTriggerContext);\n\n    const localRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n        addTrigger({\n            ref: localRef || ref,\n            value: value ?? '',\n            disabled,\n            props,\n            element: children,\n        });\n    }, []);\n\n    return null;\n};\nTabsTrigger.displayName = 'Tabs.Trigger';\n\ntype TabsContentProps = {\n    children: ReactNode;\n};\n\nexport const TabsContent = ({ children, ...itemProps }: TabsContentProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const { value } = useContext(TabConfigContext);\n\n    return (\n        <RadixTabs.Content ref={ref} {...itemProps} className={styles.content} value={value ?? ''}>\n            {children}\n        </RadixTabs.Content>\n    );\n};\nTabsContent.displayName = 'Tabs.Content';\n\nexport const Tabs = {\n    Root: forwardRef<HTMLDivElement, TabsRootProps>(TabsRoot),\n    Tab: forwardRef<HTMLDivElement, TabsTabProps>(TabsTab),\n    Trigger: forwardRef<HTMLButtonElement, TabsTriggerProps>(TabsTrigger),\n    Content: forwardRef<HTMLDivElement, TabsContentProps>(TabsContent),\n};\n"],"names":["TabConfigContext","createContext","TabTriggerContext","TabsRoot","padding","propsActiveTab","defaultActiveTab","size","onActiveTabChange","children","props","ref","activeTab","setActiveTab","useControllableState","handleSetActiveTab","useCallback","value","triggerListRef","activeIndicatorRef","triggers","triggersOutOfView","addTrigger","useTabTriggers","jsxs","RadixTabs","styles","_a","jsx","trigger","createElement","Dropdown","Button","IconDotsHorizontal","TabsTab","disabled","TabsTrigger","useContext","localRef","useRef","useEffect","TabsContent","itemProps","Tabs","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components24.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    forwardRef,\n    useMemo,\n    useRef,\n    type CSSProperties,\n    type KeyboardEvent,\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 } 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     */\n    sticky?: 'head' | 'col' | 'both';\n    children: ReactNode;\n} & CommonAriaAttrs;\n\nexport const TableRoot = forwardRef<HTMLTableElement, TableRootProps>(\n    ({ layout = 'auto', fontSize = 'medium', sticky, children, ...props }, ref) => {\n        return (\n            <div onKeyDown={handleKeyDown} role=\"grid\" tabIndex={-1}>\n                <table\n                    ref={ref}\n                    className={styles.table}\n                    data-layout={layout}\n                    data-font-size={fontSize}\n                    data-sticky={sticky}\n                    {...props}\n                >\n                    {children}\n                </table>\n            </div>\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    children: ReactNode;\n    'aria-label'?: string;\n    'aria-busy'?: boolean;\n};\n\nexport const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n    ({ children, 'aria-label': ariaLabel, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <thead ref={ref} className={styles.header} 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                    >\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    children: ReactNode;\n    'aria-busy'?: boolean;\n};\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n    ({ children, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <tbody ref={ref} className={styles.body} aria-busy={ariaBusy}>\n                {children}\n            </tbody>\n        );\n    },\n);\nTableBody.displayName = 'Table.Body';\n\ntype BaseTableRowProps = {\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     * 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\ntype ClickableTableRowProps = BaseTableRowProps & {\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    onNavigate?: never;\n    href?: never;\n};\n\ntype NavigableTableRowProps = BaseTableRowProps & {\n    onClick?: never;\n    /**\n     * Handler called when the row is clicked or activated via keyboard for navigation\n     * Must be provided together with href\n     */\n    onNavigate: (href: string) => void;\n    /**\n     * URL associated with this row for navigation\n     * Must be provided together with onNavigate\n     */\n    href: string;\n};\n\ntype NonInteractiveTableRowProps = BaseTableRowProps & {\n    onClick?: never;\n    onNavigate?: never;\n    href?: never;\n};\n\ntype TableRowProps = ClickableTableRowProps | NavigableTableRowProps | NonInteractiveTableRowProps;\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 = () => {\n            if (disabled) {\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={selected}\n                aria-disabled={disabled}\n                aria-label={ariaLabel}\n                aria-selected={selected}\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","handleKeyDown","jsx","styles","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","TableRow","disabled","selected","onClick","dataTestId","isInteractive","handleClick","event","TableRowCell","Table"],"mappings":"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"}

package/dist/fondue-components25.js

@@ -1,36 +1,122 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { cn as c } from "./fondue-components31.js";
-import t from "./fondue-components70.js";
-const x = l(
-  ({
-    children: e,
-    as: r = "span",
-    size: m = "medium",
-    weight: a = "default",
-    color: s = "default",
-    boxColor: o,
-    className: i,
-    ...d
-  }, f) => /* @__PURE__ */ p(
-    r,
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
+import { createContext as x, forwardRef as i, useCallback as A, createElement as N, useContext as b, useRef as D, useEffect as E } from "react";
+import { IconDotsHorizontal as O } from "@frontify/fondue-icons";
+import * as d from "@radix-ui/react-tabs";
+import { useControllableState as V } from "./fondue-components57.js";
+import { Button as q } from "./fondue-components5.js";
+import { Dropdown as l } from "./fondue-components10.js";
+import { useTabTriggers as B } from "./fondue-components70.js";
+import r from "./fondue-components71.js";
+const T = x({
+  value: "",
+  disabled: !1
+}), w = x({
+  addTrigger: () => {
+  }
+}), y = ({
+  padding: t = "compact",
+  activeTab: o,
+  defaultActiveTab: s,
+  size: n = "medium",
+  onActiveTabChange: c,
+  children: m,
+  ...p
+}, k) => {
+  var R;
+  const [f, v] = V({
+    prop: o,
+    defaultProp: s,
+    onChange: c
+  }), g = A(
+    (e) => {
+      v(e);
+    },
+    [v]
+  ), { triggerListRef: P, activeIndicatorRef: S, triggers: C, triggersOutOfView: h, addTrigger: j } = B({
+    activeTab: f
+  });
+  return /* @__PURE__ */ a(w.Provider, { value: { addTrigger: j }, children: /* @__PURE__ */ u(
+    d.Root,
     {
-      "data-test-id": "text",
-      className: c([
-        t.root,
-        t[`size-${m}`],
-        t[`weight-${a}`],
-        t[o ? `color-box-${o}` : `color-${s}`],
-        i
-      ]),
-      ref: f,
-      ...d,
-      children: e
+      ref: k,
+      className: r.root,
+      onValueChange: g,
+      value: f ?? ((R = C[0]) == null ? void 0 : R.value),
+      "data-tabs-content-padding": t,
+      ...p,
+      children: [
+        /* @__PURE__ */ u("div", { className: r.triggerListWrapper, children: [
+          /* @__PURE__ */ a(d.List, { ref: P, "data-size": n, className: r.triggerList, children: C.map((e) => /* @__PURE__ */ N(
+            d.Trigger,
+            {
+              ...e.props,
+              key: e.value,
+              value: e.value,
+              disabled: e.disabled,
+              className: r.trigger,
+              ref: e.ref
+            },
+            e.element
+          )) }),
+          /* @__PURE__ */ u(l.Root, { children: [
+            h.length > 0 && /* @__PURE__ */ a(l.Trigger, { "data-test-id": "overflow-items-dropdown-trigger", children: /* @__PURE__ */ a(q, { emphasis: "default", aspect: "square", size: "small", children: /* @__PURE__ */ a(O, { size: 16 }) }) }),
+            /* @__PURE__ */ a(l.Content, { align: "end", "data-test-id": "overflow-items-dropdown-content", children: h.map((e) => /* @__PURE__ */ N(
+              l.Item,
+              {
+                ...e.props,
+                disabled: e.disabled,
+                onSelect: () => g(e.value),
+                key: e.value
+              },
+              e.element
+            )) })
+          ] }),
+          /* @__PURE__ */ a(
+            "span",
+            {
+              "data-test-id": "active-tab-indicator",
+              ref: S,
+              className: r.activeIndicator
+            }
+          )
+        ] }),
+        m
+      ]
     }
-  )
-);
-x.displayName = "FondueText";
+  ) });
+};
+y.displayName = "Tabs.Root";
+const z = ({ children: t, value: o, disabled: s }) => /* @__PURE__ */ a(T.Provider, { value: { value: o, disabled: s }, children: t });
+z.displayName = "Tabs.Tab";
+const I = ({ children: t, ...o }, s) => {
+  const { value: n, disabled: c } = b(T), { addTrigger: m } = b(w), p = D(null);
+  return E(() => {
+    m({
+      ref: p || s,
+      value: n ?? "",
+      disabled: c,
+      props: o,
+      element: t
+    });
+  }, []), null;
+};
+I.displayName = "Tabs.Trigger";
+const L = ({ children: t, ...o }, s) => {
+  const { value: n } = b(T);
+  return /* @__PURE__ */ a(d.Content, { ref: s, ...o, className: r.content, value: n ?? "", children: t });
+};
+L.displayName = "Tabs.Content";
+const U = {
+  Root: i(y),
+  Tab: i(z),
+  Trigger: i(I),
+  Content: i(L)
+};
 export {
-  x as Text
+  U as Tabs,
+  L as TabsContent,
+  y as TabsRoot,
+  z as TabsTab,
+  I as TabsTrigger
 };
 //# sourceMappingURL=fondue-components25.js.map

package/dist/fondue-components25.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components25.js","sources":["../src/components/Text/Text.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode, forwardRef, type ForwardedRef, type HTMLAttributeAnchorTarget } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/text.module.scss';\n\ntype TextWeight = 'default' | 'strong' | 'x-strong';\ntype TextSize = 'x-small' | 'small' | 'medium' | 'large';\ntype TextColor = 'default' | 'weak' | 'x-weak' | 'disabled' | 'negative' | 'positive' | 'warning' | 'interactive';\ntype BoxColor = 'neutral' | 'selected' | 'disabled' | 'positive' | 'negative' | 'warning';\n\ntype TagType = 'a' | 'abbr' | 'address' | 'em' | 'label' | 'li' | 'span' | 'strong' | 'time' | 'p';\n\nexport type TextProps<TTag extends TagType = 'span'> = CommonAriaProps &\n    TagProps<TTag> & {\n        /**\n         * Id of the element\n         */\n        id?: string;\n        /**\n         * Size of the text\n         *\n         * @default 'medium'\n         */\n        size?: TextSize;\n        /**\n         * Weight of the font\n         *\n         * @default 'default'\n         */\n        weight?: TextWeight;\n        /**\n         * The html element used to render\n         *\n         * @default 'span'\n         */\n        as?: TTag;\n        /**\n         * Color of the text\n         *\n         * @default 'default'\n         */\n        color?: TextColor;\n        /**\n         * The texts color when used within a box\n         *\n         * @description optional color prop that uses the inverse box color when accessibility contrast is needed\n         **/\n        boxColor?: BoxColor;\n        className?: string;\n        children?: ReactNode;\n    };\n\ntype TagPropMap = {\n    a: { href?: string; target: HTMLAttributeAnchorTarget; rel?: string; title?: string };\n    abbr: { title?: string };\n    address: object;\n    em: object;\n    label: { for?: string };\n    li: { value?: string };\n    p: object;\n    span: object;\n    strong: object;\n    time: { dateTime?: string };\n};\ntype TagProps<TTag extends TagType> = TagPropMap[TTag];\n\ntype TextElementMap = {\n    a: HTMLAnchorElement;\n    abbr: HTMLElement;\n    address: HTMLElement;\n    em: HTMLElement;\n    label: HTMLLabelElement;\n    li: HTMLLIElement;\n    p: HTMLParagraphElement;\n    span: HTMLSpanElement;\n    strong: HTMLElement;\n    time: HTMLTimeElement;\n};\ntype TextElementType<TTag extends TagType> = TextElementMap[TTag];\n\nexport const Text = forwardRef(\n    (\n        {\n            children,\n            as: Tag = 'span',\n            size = 'medium',\n            weight = 'default',\n            color = 'default',\n            boxColor,\n            className,\n            ...props\n        },\n        ref,\n    ) => (\n        <Tag\n            data-test-id=\"text\"\n            className={cn([\n                styles.root,\n                styles[`size-${size}`],\n                styles[`weight-${weight}`],\n                styles[boxColor ? `color-box-${boxColor}` : `color-${color}`],\n                className,\n            ])}\n            // @ts-expect-error ref can not be inferred properly by TS\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </Tag>\n    ),\n) as (<TTag extends TagType = 'span'>(\n    props: TextProps<TTag> & { ref?: ForwardedRef<TextElementType<TTag>> },\n) => JSX.Element) & { displayName: string };\n\nText.displayName = 'FondueText';\n"],"names":["Text","forwardRef","children","Tag","size","weight","color","boxColor","className","props","ref","jsx","cn","styles"],"mappings":";;;;AAoFO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,UAAAC;AAAA,IACA,IAAIC,IAAM;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,KAEPC,MAEA,gBAAAC;AAAA,IAACR;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAWS,EAAG;AAAA,QACVC,EAAO;AAAA,QACPA,EAAO,QAAQT,CAAI,EAAE;AAAA,QACrBS,EAAO,UAAUR,CAAM,EAAE;AAAA,QACzBQ,EAAON,IAAW,aAAaA,CAAQ,KAAK,SAASD,CAAK,EAAE;AAAA,QAC5DE;AAAA,MAAA,CACH;AAAA,MAED,KAAAE;AAAA,MACC,GAAGD;AAAA,MAEH,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGb;AAIAF,EAAK,cAAc;"}
+{"version":3,"file":"fondue-components25.js","sources":["../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconDotsHorizontal } from '@frontify/fondue-icons';\nimport * as RadixTabs from '@radix-ui/react-tabs';\nimport {\n    createContext,\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport { Button } from '../Button/Button';\nimport { Dropdown } from '../Dropdown/Dropdown';\n\nimport { useTabTriggers } from './hooks/useTabTriggers';\nimport styles from './styles/tabs.module.scss';\nimport { type TabTrigger } from './types';\n\nexport type TabsRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The default active tab\n     * Used for uncontrolled components\n     */\n    defaultActiveTab?: string;\n    /**\n     * The controlled value of the active tab\n     */\n    activeTab?: string;\n    /**\n     * The height of the tabs\n     * @default 'medium'\n     */\n    size?: 'medium' | 'large';\n    /**\n     * Event handler called when the active tab changes\n     */\n    onActiveTabChange?: (value: string) => void;\n};\n\nconst TabConfigContext = createContext<{\n    value: string;\n    disabled?: boolean;\n}>({\n    value: '',\n    disabled: false,\n});\n\nconst TabTriggerContext = createContext<{\n    addTrigger: (trigger: TabTrigger) => void;\n}>({\n    addTrigger: () => {},\n});\n\nexport const TabsRoot = (\n    {\n        padding = 'compact',\n        activeTab: propsActiveTab,\n        defaultActiveTab,\n        size = 'medium',\n        onActiveTabChange,\n        children,\n        ...props\n    }: TabsRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [activeTab, setActiveTab] = useControllableState({\n        prop: propsActiveTab,\n        defaultProp: defaultActiveTab,\n        onChange: onActiveTabChange,\n    });\n\n    const handleSetActiveTab = useCallback(\n        (value: string) => {\n            setActiveTab(value);\n        },\n        [setActiveTab],\n    );\n\n    const { triggerListRef, activeIndicatorRef, triggers, triggersOutOfView, addTrigger } = useTabTriggers({\n        activeTab,\n    });\n\n    return (\n        <TabTriggerContext.Provider value={{ addTrigger }}>\n            <RadixTabs.Root\n                ref={ref}\n                className={styles.root}\n                onValueChange={handleSetActiveTab}\n                value={activeTab ?? triggers[0]?.value}\n                data-tabs-content-padding={padding}\n                {...props}\n            >\n                <div className={styles.triggerListWrapper}>\n                    <RadixTabs.List ref={triggerListRef} data-size={size} className={styles.triggerList}>\n                        {triggers.map((trigger) => (\n                            <RadixTabs.Trigger\n                                {...trigger.props}\n                                key={trigger.value}\n                                value={trigger.value}\n                                disabled={trigger.disabled}\n                                className={styles.trigger}\n                                ref={trigger.ref}\n                            >\n                                {trigger.element}\n                            </RadixTabs.Trigger>\n                        ))}\n                    </RadixTabs.List>\n                    <Dropdown.Root>\n                        {triggersOutOfView.length > 0 && (\n                            <Dropdown.Trigger data-test-id=\"overflow-items-dropdown-trigger\">\n                                <Button emphasis=\"default\" aspect=\"square\" size=\"small\">\n                                    <IconDotsHorizontal size={16} />\n                                </Button>\n                            </Dropdown.Trigger>\n                        )}\n                        <Dropdown.Content align=\"end\" data-test-id=\"overflow-items-dropdown-content\">\n                            {triggersOutOfView.map((trigger) => (\n                                <Dropdown.Item\n                                    {...trigger.props}\n                                    disabled={trigger.disabled}\n                                    onSelect={() => handleSetActiveTab(trigger.value)}\n                                    key={trigger.value}\n                                >\n                                    {trigger.element}\n                                </Dropdown.Item>\n                            ))}\n                        </Dropdown.Content>\n                    </Dropdown.Root>\n                    <span\n                        data-test-id=\"active-tab-indicator\"\n                        ref={activeIndicatorRef}\n                        className={styles.activeIndicator}\n                    />\n                </div>\n                {children}\n            </RadixTabs.Root>\n        </TabTriggerContext.Provider>\n    );\n};\nTabsRoot.displayName = 'Tabs.Root';\n\ntype TabsTabProps = {\n    children: ReactNode;\n    value: string;\n    disabled?: boolean;\n};\n\nexport const TabsTab = ({ children, value, disabled }: TabsTabProps) => (\n    <TabConfigContext.Provider value={{ value, disabled }}>{children}</TabConfigContext.Provider>\n);\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabsTriggerProps = {\n    children: ReactNode;\n};\n\nexport const TabsTrigger = ({ children, ...props }: TabsTriggerProps, ref: ForwardedRef<HTMLButtonElement>) => {\n    const { value, disabled } = useContext(TabConfigContext);\n\n    const { addTrigger } = useContext(TabTriggerContext);\n\n    const localRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n        addTrigger({\n            ref: localRef || ref,\n            value: value ?? '',\n            disabled,\n            props,\n            element: children,\n        });\n    }, []);\n\n    return null;\n};\nTabsTrigger.displayName = 'Tabs.Trigger';\n\ntype TabsContentProps = {\n    children: ReactNode;\n};\n\nexport const TabsContent = ({ children, ...itemProps }: TabsContentProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const { value } = useContext(TabConfigContext);\n\n    return (\n        <RadixTabs.Content ref={ref} {...itemProps} className={styles.content} value={value ?? ''}>\n            {children}\n        </RadixTabs.Content>\n    );\n};\nTabsContent.displayName = 'Tabs.Content';\n\nexport const Tabs = {\n    Root: forwardRef<HTMLDivElement, TabsRootProps>(TabsRoot),\n    Tab: forwardRef<HTMLDivElement, TabsTabProps>(TabsTab),\n    Trigger: forwardRef<HTMLButtonElement, TabsTriggerProps>(TabsTrigger),\n    Content: forwardRef<HTMLDivElement, TabsContentProps>(TabsContent),\n};\n"],"names":["TabConfigContext","createContext","TabTriggerContext","TabsRoot","padding","propsActiveTab","defaultActiveTab","size","onActiveTabChange","children","props","ref","activeTab","setActiveTab","useControllableState","handleSetActiveTab","useCallback","value","triggerListRef","activeIndicatorRef","triggers","triggersOutOfView","addTrigger","useTabTriggers","jsxs","RadixTabs","styles","_a","jsx","trigger","createElement","Dropdown","Button","IconDotsHorizontal","TabsTab","disabled","TabsTrigger","useContext","localRef","useRef","useEffect","TabsContent","itemProps","Tabs","forwardRef"],"mappings":"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"}

package/dist/fondue-components26.js

@@ -1,69 +1,36 @@
-import { jsxs as g, jsx as s } from "react/jsx-runtime";
-import { IconCheckMark as w, IconExclamationMarkTriangle as N } from "@frontify/fondue-icons";
-import { forwardRef as n, useRef as S } from "react";
-import { cn as m } from "./fondue-components31.js";
-import r from "./fondue-components71.js";
-const f = ({
-  children: c,
-  className: d,
-  status: e = "neutral",
-  "data-test-id": a = "fondue-text-input",
-  ...t
-}, R) => {
-  const i = S(!1);
-  return /* @__PURE__ */ g("div", { className: m(r.root, d), "data-status": e, "data-test-id": a, children: [
-    e === "loading" ? /* @__PURE__ */ s("div", { className: r.loadingStatus, "data-test-id": `${a}-loader` }) : null,
-    /* @__PURE__ */ s(
-      "input",
-      {
-        onMouseDown: (o) => {
-          i.current = !0, o.currentTarget.dataset.showFocusRing = "false";
-        },
-        type: "text",
-        ...t,
-        onFocus: (o) => {
-          var l;
-          i.current || (o.target.dataset.showFocusRing = "true"), (l = t.onFocus) == null || l.call(t, o);
-        },
-        onBlur: (o) => {
-          var l;
-          o.target.dataset.showFocusRing = "false", i.current = !1, (l = t.onBlur) == null || l.call(t, o);
-        },
-        ref: R,
-        className: r.input,
-        "aria-invalid": e === "error"
-      }
-    ),
-    e === "success" ? /* @__PURE__ */ s(w, { size: 16, className: r.iconSuccess, "data-test-id": `${a}-success-icon` }) : null,
-    e === "error" ? /* @__PURE__ */ s(
-      N,
-      {
-        size: 16,
-        className: r.iconError,
-        "data-test-id": `${a}-error-icon`
-      }
-    ) : null,
-    c
-  ] });
-};
-f.displayName = "TextField.Root";
-const u = ({ name: c, className: d, ...e }, a) => /* @__PURE__ */ s(
-  "div",
-  {
-    "data-slot": !0,
-    "data-name": c,
-    ...e,
-    ref: a,
-    className: m(r.slot, d)
-  }
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { cn as c } from "./fondue-components33.js";
+import t from "./fondue-components72.js";
+const x = l(
+  ({
+    children: e,
+    as: r = "span",
+    size: m = "medium",
+    weight: a = "default",
+    color: s = "default",
+    boxColor: o,
+    className: i,
+    ...d
+  }, f) => /* @__PURE__ */ p(
+    r,
+    {
+      "data-test-id": "text",
+      className: c([
+        t.root,
+        t[`size-${m}`],
+        t[`weight-${a}`],
+        t[o ? `color-box-${o}` : `color-${s}`],
+        i
+      ]),
+      ref: f,
+      ...d,
+      children: e
+    }
+  )
 );
-u.displayName = "TextField.Slot";
-const x = n(f), T = n(u), F = x;
-F.Root = x;
-F.Slot = T;
+x.displayName = "FondueText";
 export {
-  f as TextFieldRoot,
-  u as TextFieldSlot,
-  F as TextInput
+  x as Text
 };
 //# sourceMappingURL=fondue-components26.js.map