@frontify/fondue-components 20.0.0-rc.0 → 20.0.0

package/dist/fondue-components26.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components26.js","sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixSwitch from '@radix-ui/react-switch';\nimport { type FormEvent, type ForwardedRef, forwardRef } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/switch.module.scss';\n\ntype SwitchProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The size of the switch component.\n     * @default medium\n     */\n    size?: 'small' | 'medium' | 'large';\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     * @default false\n     */\n    value?: boolean;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     * @default false\n     */\n    defaultValue?: boolean;\n    /**\n     * Disables the select component.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Whether the switch is required.\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Callback function that is called when the switch is toggled.\n     * @param checked - The new checked state of the switch\n     */\n    onChange?: (checked: boolean) => void;\n    /**\n     * Event handler called when the checkbox is blurred\n     * @param event - The event object\n     */\n    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is focused\n     * @param event - The event object\n     */\n    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nconst SwitchComponent = (\n    {\n        value,\n        defaultValue,\n        size = 'medium',\n        onChange,\n        'data-test-id': dataTestId = 'fondue-switch',\n        'aria-label': ariaLabel = 'Switch',\n        ...props\n    }: SwitchProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <RadixSwitch.Root\n        ref={ref}\n        checked={value}\n        defaultChecked={defaultValue}\n        className={cn([styles.root, styles[size]])}\n        onCheckedChange={onChange}\n        aria-label={ariaLabel}\n        data-test-id={dataTestId}\n        {...props}\n    >\n        <RadixSwitch.Thumb className={styles.thumb} />\n    </RadixSwitch.Root>\n);\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(SwitchComponent);\nSwitch.displayName = 'Switch';\n"],"names":["SwitchComponent","value","defaultValue","size","onChange","dataTestId","ariaLabel","props","ref","jsx","RadixSwitch","cn","styles","Switch","forwardRef"],"mappings":";;;;;AAwDA,MAAMA,IAAkB,CACpB;AAAA,EACI,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,cAAcC,IAAY;AAAA,EAC1B,GAAGC;AACP,GACAC,MAEA,gBAAAC;AAAA,EAACC,EAAY;AAAA,EAAZ;AAAA,IACG,KAAAF;AAAA,IACA,SAASP;AAAA,IACT,gBAAgBC;AAAA,IAChB,WAAWS,EAAG,CAACC,EAAO,MAAMA,EAAOT,CAAI,CAAC,CAAC;AAAA,IACzC,iBAAiBC;AAAA,IACjB,cAAYE;AAAA,IACZ,gBAAcD;AAAA,IACb,GAAGE;AAAA,IAEJ,4BAACG,EAAY,OAAZ,EAAkB,WAAWE,EAAO,MAAA,CAAO;AAAA,EAAA;AAChD,GAGSC,IAASC,EAA2Cd,CAAe;AAChFa,EAAO,cAAc;"}
+{"version":3,"file":"fondue-components26.js","sources":["../src/components/Tag/Tag.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross, IconPlus } from '@frontify/fondue-icons';\nimport { Children, isValidElement, useState, type MouseEvent, type ReactNode } from 'react';\n\nimport styles from './styles/tag.module.scss';\n\ntype TagStyle = 'default' | 'highlight';\n\ntype TagEmphasis = 'strong' | 'weak';\n\ntype TagSize = 'default' | 'small';\n\ntype TagProps = {\n    /**\n     * @default 'strong'\n     */\n    emphasis?: TagEmphasis;\n    /**\n     * @default 'default'\n     */\n    variant?: TagStyle;\n    /**\n     * @default 'default'\n     */\n    size?: TagSize;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler\n     */\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on dismiss - providing this will show the dismiss button\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on add click - providing this will show the add button\n     */\n    onAddClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    title?: string;\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nexport type TagHoverContentProps = {\n    children: ReactNode;\n};\n\nexport type TagSecondaryContentProps = {\n    children: ReactNode;\n};\n\nconst TagRoot = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'tag',\n    children,\n    disabled = false,\n    emphasis = 'strong',\n    onAddClick,\n    onClick,\n    onDismiss,\n    size = 'default',\n    title,\n    variant,\n}: TagProps) => {\n    const [isHover, setIsHover] = useState(false);\n\n    // Extract hover content from slots\n    let extractedHoverContent: ReactNode = null;\n    const processedChildren = Children.map(children, (child) => {\n        if (isValidElement(child) && child.type === TagHoverContent) {\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n            extractedHoverContent = child.props.children;\n            return null;\n        }\n        return child;\n    });\n\n    const commonProps = {\n        'data-addable': !!onAddClick,\n        'data-component': 'tag',\n        'data-disabled': disabled,\n        'data-dismissable': !!onDismiss,\n        'data-emphasis': emphasis,\n        'data-size': size,\n        'data-variant': variant,\n        className: styles.root,\n    };\n\n    return (\n        <div {...commonProps}>\n            <TagMainContent\n                aria-label={ariaLabel || title}\n                disabled={disabled}\n                hoverContent={extractedHoverContent}\n                isHover={isHover}\n                onClick={onClick}\n                onMouseEnter={() => setIsHover(true)}\n                onMouseLeave={() => setIsHover(false)}\n                title={title}\n                data-test-id={dataTestId}\n            >\n                {processedChildren}\n            </TagMainContent>\n            <TagActionButtons\n                aria-label={ariaLabel || title}\n                disabled={disabled}\n                onAddClick={onAddClick}\n                onDismiss={onDismiss}\n            />\n        </div>\n    );\n};\nTagRoot.displayName = 'Tag';\n\nconst TagMainContent = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId,\n    children,\n    disabled = false,\n    hoverContent,\n    isHover = false,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    title,\n}: {\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n    disabled?: boolean;\n    hoverContent?: ReactNode;\n    isHover?: boolean;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    title?: string;\n}) => {\n    // Process children to handle secondary content slots in their natural position\n    let secondaryIndex = 0;\n    const processedChildren = Children.map(children, (child) => {\n        if (isValidElement(child) && child.type === TagSecondaryContent) {\n            const currentIndex = secondaryIndex++;\n            return (\n                <div className={styles.secondaryContent} key={`secondary-${currentIndex}`}>\n                    {/* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access */}\n                    {child.props.children}\n                </div>\n            );\n        }\n        return child;\n    });\n\n    const content = hoverContent ? (\n        <div data-hover={isHover}>\n            <div>{hoverContent}</div>\n            <div>{processedChildren}</div>\n        </div>\n    ) : (\n        processedChildren\n    );\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                aria-label={ariaLabel}\n                title={title}\n                className={styles.mainContent}\n                onClick={disabled ? undefined : onClick}\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                disabled={disabled}\n                data-test-id={dataTestId}\n            >\n                {content}\n            </button>\n        );\n    }\n\n    return (\n        <div\n            className={styles.mainContent}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            data-test-id={dataTestId}\n        >\n            {content}\n        </div>\n    );\n};\n\ntype TagActionButtonsProps = {\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler on dismiss\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on add click\n     */\n    onAddClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    'aria-label'?: string;\n};\n\nconst TagActionButtons = ({ 'aria-label': ariaLabel, disabled, onAddClick, onDismiss }: TagActionButtonsProps) => {\n    return (\n        <>\n            {onAddClick && (\n                <button\n                    type=\"button\"\n                    aria-label={`Add ${ariaLabel || ''}`}\n                    className={styles.actionButton}\n                    disabled={disabled}\n                    onClick={onAddClick}\n                >\n                    <IconPlus size=\"16\" />\n                </button>\n            )}\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    aria-label={`Dismiss ${ariaLabel || ''}`}\n                    className={styles.actionButton}\n                    disabled={disabled}\n                    onClick={onDismiss}\n                >\n                    <IconCross size=\"16\" />\n                </button>\n            )}\n        </>\n    );\n};\n\nexport const TagHoverContent = ({ children }: TagHoverContentProps) => {\n    return <>{children}</>;\n};\nTagHoverContent.displayName = 'Tag.HoverContent';\n\nexport const TagSecondaryContent = ({ children }: TagSecondaryContentProps) => {\n    return <>{children}</>;\n};\nTagSecondaryContent.displayName = 'Tag.SecondaryContent';\n\nexport const Tag = TagRoot as typeof TagRoot & {\n    HoverContent: typeof TagHoverContent;\n    SecondaryContent: typeof TagSecondaryContent;\n    displayName?: string;\n};\nTag.HoverContent = TagHoverContent;\nTag.SecondaryContent = TagSecondaryContent;\n"],"names":["TagRoot","ariaLabel","dataTestId","children","disabled","emphasis","onAddClick","onClick","onDismiss","size","title","variant","isHover","setIsHover","useState","extractedHoverContent","processedChildren","Children","child","isValidElement","TagHoverContent","commonProps","styles","jsxs","jsx","TagMainContent","TagActionButtons","hoverContent","onMouseEnter","onMouseLeave","secondaryIndex","TagSecondaryContent","currentIndex","content","Fragment","IconPlus","IconCross","Tag"],"mappings":";;;;AAwDA,MAAMA,IAAU,CAAC;AAAA,EACb,cAAcC;AAAA,EACd,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,SAAAC;AACJ,MAAgB;AACZ,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK;AAG5C,MAAIC,IAAmC;AACvC,QAAMC,IAAoBC,EAAS,IAAId,GAAU,CAACe,MAC1CC,EAAeD,CAAK,KAAKA,EAAM,SAASE,KAExCL,IAAwBG,EAAM,MAAM,UAC7B,QAEJA,CACV,GAEKG,IAAc;AAAA,IAChB,gBAAgB,CAAC,CAACf;AAAA,IAClB,kBAAkB;AAAA,IAClB,iBAAiBF;AAAA,IACjB,oBAAoB,CAAC,CAACI;AAAA,IACtB,iBAAiBH;AAAA,IACjB,aAAaI;AAAA,IACb,gBAAgBE;AAAA,IAChB,WAAWW,EAAO;AAAA,EAAA;AAGtB,SACI,gBAAAC,EAAC,OAAA,EAAK,GAAGF,GACL,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,cAAYxB,KAAaS;AAAA,QACzB,UAAAN;AAAA,QACA,cAAcW;AAAA,QACd,SAAAH;AAAA,QACA,SAAAL;AAAA,QACA,cAAc,MAAMM,EAAW,EAAI;AAAA,QACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,QACpC,OAAAH;AAAA,QACA,gBAAcR;AAAA,QAEb,UAAAc;AAAA,MAAA;AAAA,IAAA;AAAA,IAEL,gBAAAQ;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,cAAYzB,KAAaS;AAAA,QACzB,UAAAN;AAAA,QACA,YAAAE;AAAA,QACA,WAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ,GACJ;AAER;AACAR,EAAQ,cAAc;AAEtB,MAAMyB,IAAiB,CAAC;AAAA,EACpB,cAAcxB;AAAA,EACd,gBAAgBC;AAAA,EAChB,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,cAAAuB;AAAA,EACA,SAAAf,IAAU;AAAA,EACV,SAAAL;AAAA,EACA,cAAAqB;AAAA,EACA,cAAAC;AAAA,EACA,OAAAnB;AACJ,MAWM;AAEF,MAAIoB,IAAiB;AACrB,QAAMd,IAAoBC,EAAS,IAAId,GAAU,CAACe,MAAU;AACxD,QAAIC,EAAeD,CAAK,KAAKA,EAAM,SAASa,GAAqB;AAC7D,YAAMC,IAAeF;AACrB,aACI,gBAAAN,EAAC,OAAA,EAAI,WAAWF,EAAO,kBAElB,YAAM,MAAM,SAAA,GAF6B,aAAaU,CAAY,EAGvE;AAAA,IAER;AACA,WAAOd;AAAA,EACX,CAAC,GAEKe,IAAUN,IACZ,gBAAAJ,EAAC,OAAA,EAAI,cAAYX,GACb,UAAA;AAAA,IAAA,gBAAAY,EAAC,SAAK,UAAAG,EAAA,CAAa;AAAA,IACnB,gBAAAH,EAAC,SAAK,UAAAR,EAAA,CAAkB;AAAA,EAAA,EAAA,CAC5B,IAEAA;AAGJ,SAAIT,IAEI,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAYvB;AAAA,MACZ,OAAAS;AAAA,MACA,WAAWY,EAAO;AAAA,MAClB,SAASlB,IAAW,SAAYG;AAAA,MAChC,cAAAqB;AAAA,MACA,cAAAC;AAAA,MACA,UAAAzB;AAAA,MACA,gBAAcF;AAAA,MAEb,UAAA+B;AAAA,IAAA;AAAA,EAAA,IAMT,gBAAAT;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWF,EAAO;AAAA,MAClB,cAAAM;AAAA,MACA,cAAAC;AAAA,MACA,gBAAc3B;AAAA,MAEb,UAAA+B;AAAA,IAAA;AAAA,EAAA;AAGb,GAkBMP,IAAmB,CAAC,EAAE,cAAczB,GAAW,UAAAG,GAAU,YAAAE,GAAY,WAAAE,QAEnE,gBAAAe,EAAAW,GAAA,EACK,UAAA;AAAA,EAAA5B,KACG,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAY,OAAOvB,KAAa,EAAE;AAAA,MAClC,WAAWqB,EAAO;AAAA,MAClB,UAAAlB;AAAA,MACA,SAASE;AAAA,MAET,UAAA,gBAAAkB,EAACW,GAAA,EAAS,MAAK,KAAA,CAAK;AAAA,IAAA;AAAA,EAAA;AAAA,EAG3B3B,KACG,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAY,WAAWvB,KAAa,EAAE;AAAA,MACtC,WAAWqB,EAAO;AAAA,MAClB,UAAAlB;AAAA,MACA,SAASI;AAAA,MAET,UAAA,gBAAAgB,EAACY,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,IAAA;AAAA,EAAA;AACzB,GAER,GAIKhB,IAAkB,CAAC,EAAE,UAAAjB,+BACpB,UAAAA,GAAS;AAEvBiB,EAAgB,cAAc;AAEvB,MAAMW,IAAsB,CAAC,EAAE,UAAA5B,+BACxB,UAAAA,GAAS;AAEvB4B,EAAoB,cAAc;AAE3B,MAAMM,IAAMrC;AAKnBqC,EAAI,eAAejB;AACnBiB,EAAI,mBAAmBN;"}

package/dist/fondue-components27.js

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

package/dist/fondue-components27.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components27.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     */\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        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={sticky}\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    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                        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 className={styles.sortIndicator} size=\"12\" />\n                            ) : sortDirection === 'descending' ? (\n                                <IconArrowDown className={styles.sortIndicator} 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 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","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","TableRow","disabled","selected","onClick","dataTestId","isInteractive","handleClick","event","shouldIgnoreRowClick","TableRowCell","Table"],"mappings":"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"}
+{"version":3,"file":"fondue-components27.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    useMemo,\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     * Select the used variant\n     * “default 'default'\n     */\n    variant?: 'default' | 'pill';\n};\n\nconst TabConfigContext = createContext<{\n    value: string;\n    disabled?: boolean;\n}>({\n    value: '',\n    disabled: false,\n});\nTabConfigContext.displayName = 'TabConfigContext';\n\nconst TabTriggerContext = createContext<{\n    addTrigger: (trigger: TabTrigger) => void;\n}>({\n    addTrigger: () => {},\n});\nTabTriggerContext.displayName = 'TabTriggerContext';\n\nexport const TabsRoot = (\n    {\n        padding = 'compact',\n        activeTab: propsActiveTab,\n        defaultActiveTab,\n        size = 'medium',\n        onActiveTabChange,\n        children,\n        variant = 'default',\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    const contextValue = useMemo(() => ({ addTrigger }), [addTrigger]);\n\n    return (\n        <TabTriggerContext.Provider value={contextValue}>\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                data-tabs-variant={variant}\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    const contextValue = useMemo(() => ({ value, disabled }), [value, disabled]);\n\n    return <TabConfigContext.Provider value={contextValue}>{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    const previousElement = useRef<ReactNode>();\n\n    useEffect(() => {\n        addTrigger({\n            ref: localRef || ref,\n            value: value ?? '',\n            disabled,\n            props,\n            element: children,\n            previousElement: previousElement.current,\n        });\n        previousElement.current = children;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [children]);\n\n    return null;\n};\nTabsTrigger.displayName = 'Tabs.Trigger';\n\ntype TabsContentProps = {\n    children: ReactNode;\n    asChild?: boolean;\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","variant","props","ref","activeTab","setActiveTab","useControllableState","handleSetActiveTab","useCallback","value","triggerListRef","activeIndicatorRef","triggers","triggersOutOfView","addTrigger","useTabTriggers","contextValue","useMemo","jsx","jsxs","RadixTabs","styles","_a","trigger","createElement","Dropdown","Button","IconDotsHorizontal","TabsTab","disabled","TabsTrigger","useContext","localRef","useRef","previousElement","useEffect","TabsContent","itemProps","Tabs","forwardRef"],"mappings":"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"}

package/dist/fondue-components28.js

@@ -1,140 +1,36 @@
-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-components80.js";
-const H = ({
-  "aria-label": e,
-  "data-test-id": n = "tag",
-  children: o,
-  disabled: a = !1,
-  emphasis: c = "strong",
-  onAddClick: m,
-  onClick: u,
-  onDismiss: i,
-  size: p = "default",
-  title: l,
-  variant: C
-}) => {
-  const [v, d] = $(!1);
-  let r = null;
-  const f = T.map(o, (y) => x(y) && y.type === b ? (r = y.props.children, null) : y), S = {
-    "data-addable": !!m,
-    "data-component": "tag",
-    "data-disabled": a,
-    "data-dismissable": !!i,
-    "data-emphasis": c,
-    "data-size": p,
-    "data-variant": C,
-    className: s.root
-  };
-  return /* @__PURE__ */ g("div", { ...S, children: [
-    /* @__PURE__ */ t(
-      j,
-      {
-        "aria-label": e || l,
-        disabled: a,
-        hoverContent: r,
-        isHover: v,
-        onClick: u,
-        onMouseEnter: () => d(!0),
-        onMouseLeave: () => d(!1),
-        title: l,
-        "data-test-id": n,
-        children: f
-      }
-    ),
-    /* @__PURE__ */ t(
-      P,
-      {
-        "aria-label": e || l,
-        disabled: a,
-        onAddClick: m,
-        onDismiss: i
-      }
-    )
-  ] });
-};
-H.displayName = "Tag";
-const j = ({
-  "aria-label": e,
-  "data-test-id": n,
-  children: o,
-  disabled: a = !1,
-  hoverContent: c,
-  isHover: m = !1,
-  onClick: u,
-  onMouseEnter: i,
-  onMouseLeave: p,
-  title: l
-}) => {
-  let C = 0;
-  const v = T.map(o, (r) => {
-    if (x(r) && r.type === N) {
-      const f = C++;
-      return /* @__PURE__ */ t("div", { className: s.secondaryContent, children: r.props.children }, `secondary-${f}`);
-    }
-    return r;
-  }), d = c ? /* @__PURE__ */ g("div", { "data-hover": m, children: [
-    /* @__PURE__ */ t("div", { children: c }),
-    /* @__PURE__ */ t("div", { children: v })
-  ] }) : v;
-  return u ? /* @__PURE__ */ t(
-    "button",
-    {
-      type: "button",
-      "aria-label": e,
-      title: l,
-      className: s.mainContent,
-      onClick: a ? void 0 : u,
-      onMouseEnter: i,
-      onMouseLeave: p,
-      disabled: a,
-      "data-test-id": n,
-      children: d
-    }
-  ) : /* @__PURE__ */ t(
-    "div",
-    {
-      className: s.mainContent,
-      onMouseEnter: i,
-      onMouseLeave: p,
-      "data-test-id": n,
-      children: d
-    }
-  );
-}, P = ({ "aria-label": e, disabled: n, onAddClick: o, onDismiss: a }) => /* @__PURE__ */ g(h, { children: [
-  o && /* @__PURE__ */ t(
-    "button",
-    {
-      type: "button",
-      "aria-label": `Add ${e || ""}`,
-      className: s.actionButton,
-      disabled: n,
-      onClick: o,
-      children: /* @__PURE__ */ t(z, { size: "16" })
-    }
-  ),
-  a && /* @__PURE__ */ t(
-    "button",
+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";
+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,
     {
-      type: "button",
-      "aria-label": `Dismiss ${e || ""}`,
-      className: s.actionButton,
-      disabled: n,
-      onClick: a,
-      children: /* @__PURE__ */ t(B, { size: "16" })
+      "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
     }
   )
-] }), b = ({ children: e }) => /* @__PURE__ */ t(h, { children: e });
-b.displayName = "Tag.HoverContent";
-const N = ({ children: e }) => /* @__PURE__ */ t(h, { children: e });
-N.displayName = "Tag.SecondaryContent";
-const I = H;
-I.HoverContent = b;
-I.SecondaryContent = N;
+);
+x.displayName = "FondueText";
 export {
-  I as Tag,
-  b as TagHoverContent,
-  N as TagSecondaryContent
+  x as Text
 };
 //# sourceMappingURL=fondue-components28.js.map

package/dist/fondue-components28.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components28.js","sources":["../src/components/Tag/Tag.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross, IconPlus } from '@frontify/fondue-icons';\nimport { Children, isValidElement, useState, type MouseEvent, type ReactNode } from 'react';\n\nimport styles from './styles/tag.module.scss';\n\ntype TagStyle = 'default' | 'highlight';\n\ntype TagEmphasis = 'strong' | 'weak';\n\ntype TagSize = 'default' | 'small';\n\ntype TagProps = {\n    /**\n     * @default 'strong'\n     */\n    emphasis?: TagEmphasis;\n    /**\n     * @default 'default'\n     */\n    variant?: TagStyle;\n    /**\n     * @default 'default'\n     */\n    size?: TagSize;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler\n     */\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on dismiss - providing this will show the dismiss button\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on add click - providing this will show the add button\n     */\n    onAddClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    title?: string;\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nexport type TagHoverContentProps = {\n    children: ReactNode;\n};\n\nexport type TagSecondaryContentProps = {\n    children: ReactNode;\n};\n\nconst TagRoot = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'tag',\n    children,\n    disabled = false,\n    emphasis = 'strong',\n    onAddClick,\n    onClick,\n    onDismiss,\n    size = 'default',\n    title,\n    variant,\n}: TagProps) => {\n    const [isHover, setIsHover] = useState(false);\n\n    // Extract hover content from slots\n    let extractedHoverContent: ReactNode = null;\n    const processedChildren = Children.map(children, (child) => {\n        if (isValidElement(child) && child.type === TagHoverContent) {\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n            extractedHoverContent = child.props.children;\n            return null;\n        }\n        return child;\n    });\n\n    const commonProps = {\n        'data-addable': !!onAddClick,\n        'data-component': 'tag',\n        'data-disabled': disabled,\n        'data-dismissable': !!onDismiss,\n        'data-emphasis': emphasis,\n        'data-size': size,\n        'data-variant': variant,\n        className: styles.root,\n    };\n\n    return (\n        <div {...commonProps}>\n            <TagMainContent\n                aria-label={ariaLabel || title}\n                disabled={disabled}\n                hoverContent={extractedHoverContent}\n                isHover={isHover}\n                onClick={onClick}\n                onMouseEnter={() => setIsHover(true)}\n                onMouseLeave={() => setIsHover(false)}\n                title={title}\n                data-test-id={dataTestId}\n            >\n                {processedChildren}\n            </TagMainContent>\n            <TagActionButtons\n                aria-label={ariaLabel || title}\n                disabled={disabled}\n                onAddClick={onAddClick}\n                onDismiss={onDismiss}\n            />\n        </div>\n    );\n};\nTagRoot.displayName = 'Tag';\n\nconst TagMainContent = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId,\n    children,\n    disabled = false,\n    hoverContent,\n    isHover = false,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    title,\n}: {\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n    disabled?: boolean;\n    hoverContent?: ReactNode;\n    isHover?: boolean;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    title?: string;\n}) => {\n    // Process children to handle secondary content slots in their natural position\n    let secondaryIndex = 0;\n    const processedChildren = Children.map(children, (child) => {\n        if (isValidElement(child) && child.type === TagSecondaryContent) {\n            const currentIndex = secondaryIndex++;\n            return (\n                <div className={styles.secondaryContent} key={`secondary-${currentIndex}`}>\n                    {/* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access */}\n                    {child.props.children}\n                </div>\n            );\n        }\n        return child;\n    });\n\n    const content = hoverContent ? (\n        <div data-hover={isHover}>\n            <div>{hoverContent}</div>\n            <div>{processedChildren}</div>\n        </div>\n    ) : (\n        processedChildren\n    );\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                aria-label={ariaLabel}\n                title={title}\n                className={styles.mainContent}\n                onClick={disabled ? undefined : onClick}\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                disabled={disabled}\n                data-test-id={dataTestId}\n            >\n                {content}\n            </button>\n        );\n    }\n\n    return (\n        <div\n            className={styles.mainContent}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            data-test-id={dataTestId}\n        >\n            {content}\n        </div>\n    );\n};\n\ntype TagActionButtonsProps = {\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler on dismiss\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on add click\n     */\n    onAddClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    'aria-label'?: string;\n};\n\nconst TagActionButtons = ({ 'aria-label': ariaLabel, disabled, onAddClick, onDismiss }: TagActionButtonsProps) => {\n    return (\n        <>\n            {onAddClick && (\n                <button\n                    type=\"button\"\n                    aria-label={`Add ${ariaLabel || ''}`}\n                    className={styles.actionButton}\n                    disabled={disabled}\n                    onClick={onAddClick}\n                >\n                    <IconPlus size=\"16\" />\n                </button>\n            )}\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    aria-label={`Dismiss ${ariaLabel || ''}`}\n                    className={styles.actionButton}\n                    disabled={disabled}\n                    onClick={onDismiss}\n                >\n                    <IconCross size=\"16\" />\n                </button>\n            )}\n        </>\n    );\n};\n\nexport const TagHoverContent = ({ children }: TagHoverContentProps) => {\n    return <>{children}</>;\n};\nTagHoverContent.displayName = 'Tag.HoverContent';\n\nexport const TagSecondaryContent = ({ children }: TagSecondaryContentProps) => {\n    return <>{children}</>;\n};\nTagSecondaryContent.displayName = 'Tag.SecondaryContent';\n\nexport const Tag = TagRoot as typeof TagRoot & {\n    HoverContent: typeof TagHoverContent;\n    SecondaryContent: typeof TagSecondaryContent;\n    displayName?: string;\n};\nTag.HoverContent = TagHoverContent;\nTag.SecondaryContent = TagSecondaryContent;\n"],"names":["TagRoot","ariaLabel","dataTestId","children","disabled","emphasis","onAddClick","onClick","onDismiss","size","title","variant","isHover","setIsHover","useState","extractedHoverContent","processedChildren","Children","child","isValidElement","TagHoverContent","commonProps","styles","jsxs","jsx","TagMainContent","TagActionButtons","hoverContent","onMouseEnter","onMouseLeave","secondaryIndex","TagSecondaryContent","currentIndex","content","Fragment","IconPlus","IconCross","Tag"],"mappings":"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"}
+{"version":3,"file":"fondue-components28.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,EAAA,GAEPC,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;"}