@frontify/fondue-components 27.0.1 → 29.0.0

package/dist/fondue-components33.js

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

package/dist/fondue-components33.js.map

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

package/dist/fondue-components34.js

@@ -1,84 +1,149 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { IconCheckMark as w, IconExclamationMarkTriangle as h } from "@frontify/fondue-icons";
-import { forwardRef as f, useRef as S } from "react";
-import { LoadingCircle as T } from "./fondue-components19.js";
-import a from "./fondue-components87.js";
-const u = ({
-  children: s,
-  className: c,
-  status: e = "neutral",
-  "data-test-id": l = "fondue-text-input",
-  "aria-errormessage": R,
-  placeholder: n,
-  ...o
-}, N) => {
-  const d = S(!1);
-  return /* @__PURE__ */ m(
-    "div",
-    {
-      className: [a.root, c].filter(Boolean).join(" "),
-      "data-status": e,
-      "data-test-id": l,
-      children: [
-        e === "loading" ? /* @__PURE__ */ t("div", { className: a.loadingStatus, "data-test-id": `${l}-loader`, children: /* @__PURE__ */ t(T, { size: "xx-small" }) }) : null,
-        /* @__PURE__ */ m("div", { className: a.inputWrapper, children: [
-          n && /* @__PURE__ */ t("div", { className: a.placeholder, children: n }),
-          /* @__PURE__ */ t(
-            "input",
-            {
-              onMouseDown: (r) => {
-                d.current = !0, r.currentTarget.dataset.showFocusRing = "false";
-              },
-              type: "text",
-              placeholder: n,
-              ...o,
-              onFocus: (r) => {
-                var i;
-                d.current || (r.target.dataset.showFocusRing = "true"), (i = o.onFocus) == null || i.call(o, r);
-              },
-              onBlur: (r) => {
-                var i;
-                r.target.dataset.showFocusRing = "false", d.current = !1, (i = o.onBlur) == null || i.call(o, r);
-              },
-              ref: N,
-              className: a.input,
-              "aria-invalid": e === "error",
-              "aria-errormessage": e === "error" ? R : void 0
-            }
-          )
-        ] }),
-        e === "success" ? /* @__PURE__ */ t(w, { size: 16, className: a.iconSuccess, "data-test-id": `${l}-success-icon` }) : null,
-        e === "error" ? /* @__PURE__ */ t(
-          h,
-          {
-            size: 16,
-            className: a.iconError,
-            "data-test-id": `${l}-error-icon`
-          }
-        ) : null,
-        s
-      ]
-    }
-  );
-};
-u.displayName = "TextField.Root";
-const x = ({ name: s, className: c, ...e }, l) => /* @__PURE__ */ t(
-  "div",
-  {
-    "data-slot": !0,
-    "data-name": s,
-    ...e,
-    ref: l,
-    className: [a.slot, c].filter(Boolean).join(" ")
+import { jsxs as h, jsx as t, Fragment as b } from "react/jsx-runtime";
+import { IconPlus as j, IconCross as M } from "@frontify/fondue-icons";
+import { forwardRef as x, useState as P, Children as H, isValidElement as I } from "react";
+import s from "./fondue-components102.js";
+const S = x(
+  ({
+    "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: y = "default"
+  }, v) => {
+    const [C, d] = P(!1);
+    let r = null;
+    const g = H.map(o, (f) => I(f) && f.type === N ? (r = f.props.children, null) : f), $ = {
+      "data-addable": !!m,
+      "data-component": "tag",
+      "data-disabled": a,
+      "data-dismissable": !!i,
+      "data-emphasis": c,
+      "data-size": p,
+      "data-variant": y,
+      className: s.root
+    };
+    return /* @__PURE__ */ h("div", { ...$, children: [
+      /* @__PURE__ */ t(
+        z,
+        {
+          ref: v,
+          "aria-label": e || l,
+          disabled: a,
+          hoverContent: r,
+          isHover: C,
+          onClick: u,
+          onMouseEnter: () => d(!0),
+          onMouseLeave: () => d(!1),
+          title: l,
+          "data-test-id": n,
+          children: g
+        }
+      ),
+      /* @__PURE__ */ t(
+        R,
+        {
+          "aria-label": e || l,
+          disabled: a,
+          onAddClick: m,
+          onDismiss: i
+        }
+      )
+    ] });
+  }
+);
+S.displayName = "Tag";
+const z = x(
+  ({
+    "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
+  }, y) => {
+    let v = 0;
+    const C = H.map(o, (r) => {
+      if (I(r) && r.type === T) {
+        const g = v++;
+        return /* @__PURE__ */ t("div", { className: s.secondaryContent, children: r.props.children }, `secondary-${g}`);
+      }
+      return r;
+    }), d = c ? /* @__PURE__ */ h("div", { "data-hover": m, children: [
+      /* @__PURE__ */ t("div", { children: c }),
+      /* @__PURE__ */ t("div", { children: C })
+    ] }) : C;
+    return u ? /* @__PURE__ */ t(
+      "button",
+      {
+        ref: y,
+        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",
+      {
+        ref: y,
+        className: s.mainContent,
+        onMouseEnter: i,
+        onMouseLeave: p,
+        "data-test-id": n,
+        children: d
+      }
+    );
   }
 );
-x.displayName = "TextField.Slot";
-const F = f(u), v = f(x), g = F;
-g.Root = F;
-g.Slot = v;
+z.displayName = "TagMainContent";
+const R = ({ "aria-label": e, disabled: n, onAddClick: o, onDismiss: a }) => /* @__PURE__ */ h(b, { children: [
+  o && /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      "aria-label": `Add ${e || ""}`,
+      className: s.actionButton,
+      disabled: n,
+      onClick: o,
+      children: /* @__PURE__ */ t(j, { size: "16" })
+    }
+  ),
+  a && /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      "aria-label": `Dismiss ${e || ""}`,
+      className: s.actionButton,
+      disabled: n,
+      onClick: a,
+      children: /* @__PURE__ */ t(M, { size: "16" })
+    }
+  )
+] }), N = ({ children: e }) => /* @__PURE__ */ t(b, { children: e });
+N.displayName = "Tag.HoverContent";
+const T = ({ children: e }) => /* @__PURE__ */ t(b, { children: e });
+T.displayName = "Tag.SecondaryContent";
+const B = S;
+B.HoverContent = N;
+B.SecondaryContent = T;
 export {
-  u as TextFieldRoot,
-  x as TextFieldSlot,
-  g as TextInput
+  B as Tag,
+  N as TagHoverContent,
+  T as TagSecondaryContent
 };
 //# sourceMappingURL=fondue-components34.js.map

package/dist/fondue-components34.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components34.js","sources":["../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useRef,\n    type ChangeEvent,\n    type FocusEvent,\n    type ForwardedRef,\n    type KeyboardEvent,\n    type ReactNode,\n    type SyntheticEvent,\n} from 'react';\n\nimport { LoadingCircle } from '../LoadingCircle/LoadingCircle';\n\nimport styles from './styles/text.module.scss';\n\nexport type TextInputProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The place where the input slots are placed\n     */\n    children?: ReactNode;\n    /**\n     * The default value of the text input\n     * Used for uncontrolled components\n     */\n    defaultValue?: string | number;\n    /**\n     * The controlled value of the text input\n     */\n    value?: string | number;\n    /**\n     * Type of the text input\n     * @default \"text\"\n     */\n    type?: 'date' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';\n    /**\n     * The placeholder in the text input\n     */\n    placeholder?: string;\n    /**\n     * Disable the text input\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the text input required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the text input spell-checkable\n     * @default true\n     */\n    spellCheck?: boolean;\n    /**\n     * Make the text input read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    /**\n     * Set the type of input so autocomplete can help the user\n     * @default \"on\"\n     */\n    autoComplete?: string;\n    /**\n     * The maximum length of the text input\n     */\n    maxLength?: number;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error' | 'loading';\n    className?: string;\n    /**\n     * Event handler called when the text input value changes\n     */\n    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n    'aria-errormessage'?: string;\n};\n\nexport const TextFieldRoot = (\n    {\n        children,\n        className,\n        status = 'neutral',\n        'data-test-id': dataTestId = 'fondue-text-input',\n        'aria-errormessage': ariaErrormessage,\n        placeholder,\n        ...inputProps\n    }: TextInputProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) => {\n    const wasClicked = useRef(false);\n\n    return (\n        <div\n            className={[styles.root, className].filter(Boolean).join(' ')}\n            data-status={status}\n            data-test-id={dataTestId}\n        >\n            {status === 'loading' ? (\n                <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`}>\n                    <LoadingCircle size=\"xx-small\" />\n                </div>\n            ) : null}\n            <div className={styles.inputWrapper}>\n                {placeholder && <div className={styles.placeholder}>{placeholder}</div>}\n                <input\n                    onMouseDown={(mouseEvent) => {\n                        wasClicked.current = true;\n                        mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                    }}\n                    type=\"text\"\n                    placeholder={placeholder}\n                    {...inputProps}\n                    onFocus={(focusEvent) => {\n                        if (!wasClicked.current) {\n                            focusEvent.target.dataset.showFocusRing = 'true';\n                        }\n                        inputProps.onFocus?.(focusEvent);\n                    }}\n                    onBlur={(blurEvent) => {\n                        blurEvent.target.dataset.showFocusRing = 'false';\n                        wasClicked.current = false;\n                        inputProps.onBlur?.(blurEvent);\n                    }}\n                    ref={ref}\n                    className={styles.input}\n                    aria-invalid={status === 'error'}\n                    aria-errormessage={status === 'error' ? ariaErrormessage : undefined}\n                />\n            </div>\n\n            {status === 'success' ? (\n                <IconCheckMark size={16} className={styles.iconSuccess} data-test-id={`${dataTestId}-success-icon`} />\n            ) : null}\n\n            {status === 'error' ? (\n                <IconExclamationMarkTriangle\n                    size={16}\n                    className={styles.iconError}\n                    data-test-id={`${dataTestId}-error-icon`}\n                />\n            ) : null}\n\n            {children}\n        </div>\n    );\n};\nTextFieldRoot.displayName = 'TextField.Root';\n\nexport type TextFieldSlotProps = {\n    children: ReactNode;\n    name?: 'left' | 'right';\n    className?: string;\n};\n\nexport const TextFieldSlot = (\n    { name, className, ...slotProps }: TextFieldSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-slot\n            data-name={name}\n            {...slotProps}\n            ref={forwardedRef}\n            className={[styles.slot, className].filter(Boolean).join(' ')}\n        />\n    );\n};\n\nTextFieldSlot.displayName = 'TextField.Slot';\n\nconst ForwardedRefTextFieldRoot = forwardRef<HTMLInputElement, TextInputProps>(TextFieldRoot);\nconst ForwardedRefTextFieldSlot = forwardRef<HTMLDivElement, TextFieldSlotProps>(TextFieldSlot);\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const TextInput: typeof TextFieldRoot & {\n    Root: typeof ForwardedRefTextFieldRoot;\n    Slot: typeof ForwardedRefTextFieldSlot;\n} = ForwardedRefTextFieldRoot;\nTextInput.Root = ForwardedRefTextFieldRoot;\nTextInput.Slot = ForwardedRefTextFieldSlot;\n"],"names":["TextFieldRoot","children","className","status","dataTestId","ariaErrormessage","placeholder","inputProps","ref","wasClicked","useRef","jsxs","styles","jsx","LoadingCircle","mouseEvent","focusEvent","_a","blurEvent","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;AA6GO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,qBAAqBC;AAAA,EACrB,aAAAC;AAAA,EACA,GAAGC;AACP,GACAC,MACC;AACD,QAAMC,IAAaC,EAAO,EAAK;AAE/B,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,CAACC,EAAO,MAAMV,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC5D,eAAaC;AAAA,MACb,gBAAcC;AAAA,MAEb,UAAA;AAAA,QAAAD,MAAW,YACR,gBAAAU,EAAC,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGR,CAAU,WAC7D,UAAA,gBAAAS,EAACC,GAAA,EAAc,MAAK,WAAA,CAAW,GACnC,IACA;AAAA,QACJ,gBAAAH,EAAC,OAAA,EAAI,WAAWC,EAAO,cAClB,UAAA;AAAA,UAAAN,KAAe,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,aAAc,UAAAN,GAAY;AAAA,UACjE,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,aAAa,CAACE,MAAe;AACzB,gBAAAN,EAAW,UAAU,IACrBM,EAAW,cAAc,QAAQ,gBAAgB;AAAA,cACrD;AAAA,cACA,MAAK;AAAA,cACL,aAAAT;AAAA,cACC,GAAGC;AAAA,cACJ,SAAS,CAACS,MAAe;;AACrB,gBAAKP,EAAW,YACZO,EAAW,OAAO,QAAQ,gBAAgB,UAE9CC,IAAAV,EAAW,YAAX,QAAAU,EAAA,KAAAV,GAAqBS;AAAA,cACzB;AAAA,cACA,QAAQ,CAACE,MAAc;;AACnB,gBAAAA,EAAU,OAAO,QAAQ,gBAAgB,SACzCT,EAAW,UAAU,KACrBQ,IAAAV,EAAW,WAAX,QAAAU,EAAA,KAAAV,GAAoBW;AAAA,cACxB;AAAA,cACA,KAAAV;AAAA,cACA,WAAWI,EAAO;AAAA,cAClB,gBAAcT,MAAW;AAAA,cACzB,qBAAmBA,MAAW,UAAUE,IAAmB;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/D,GACJ;AAAA,QAECF,MAAW,YACR,gBAAAU,EAACM,GAAA,EAAc,MAAM,IAAI,WAAWP,EAAO,aAAa,gBAAc,GAAGR,CAAU,iBAAiB,IACpG;AAAA,QAEHD,MAAW,UACR,gBAAAU;AAAA,UAACO;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,WAAWR,EAAO;AAAA,YAClB,gBAAc,GAAGR,CAAU;AAAA,UAAA;AAAA,QAAA,IAE/B;AAAA,QAEHH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;AACAD,EAAc,cAAc;AAQrB,MAAMqB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAApB,GAAW,GAAGqB,EAAA,GACtBC,MAGI,gBAAAX;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,aAAS;AAAA,IACT,aAAWS;AAAA,IACV,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,WAAW,CAACZ,EAAO,MAAMV,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,EAAA;AAAA;AAKxEmB,EAAc,cAAc;AAE5B,MAAMI,IAA4BC,EAA6C1B,CAAa,GACtF2B,IAA4BD,EAA+CL,CAAa,GAEjFO,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}
+{"version":3,"file":"fondue-components34.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, forwardRef, 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 - when provided, the Tag renders as a button element\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 TagPropsWithClick = Omit<TagProps, 'onClick'> & {\n    onClick: (event?: MouseEvent<HTMLButtonElement>) => void;\n};\n\nexport type TagPropsWithoutClick = Omit<TagProps, 'onClick'> & {\n    onClick?: undefined;\n};\n\nexport type TagHoverContentProps = {\n    children: ReactNode;\n};\n\nexport type TagSecondaryContentProps = {\n    children: ReactNode;\n};\n\nconst TagRoot = forwardRef<HTMLButtonElement | HTMLDivElement, TagProps>(\n    (\n        {\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 = 'default',\n        },\n        ref,\n    ) => {\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 react-hooks/immutability\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                    ref={ref}\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    },\n);\nTagRoot.displayName = 'Tag';\n\ntype TagMainContentProps = {\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\nconst TagMainContent = forwardRef<HTMLButtonElement | HTMLDivElement, TagMainContentProps>(\n    (\n        {\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        ref,\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                    ref={ref as React.Ref<HTMLButtonElement>}\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                ref={ref as React.Ref<HTMLDivElement>}\n                className={styles.mainContent}\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                data-test-id={dataTestId}\n            >\n                {content}\n            </div>\n        );\n    },\n);\nTagMainContent.displayName = 'TagMainContent';\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\n/**\n * TagComponent interface with function overloads for conditional ref typing.\n *\n * The overload order matters for TypeScript's type inference:\n * - TypeScript uses the FIRST matching overload when inferring types in generic contexts\n *   (e.g., Storybook's StoryObj<typeof Tag>)\n * - By placing TagPropsWithoutClick first, generic inference defaults to HTMLDivElement\n * - When onClick is explicitly provided, TypeScript matches the second overload,\n *   correctly inferring HTMLButtonElement for the ref\n */\ntype TagComponent = {\n    (props: TagPropsWithoutClick & React.RefAttributes<HTMLDivElement>): React.ReactNode;\n    (props: TagPropsWithClick & React.RefAttributes<HTMLButtonElement>): React.ReactNode;\n    displayName?: string;\n    HoverContent: typeof TagHoverContent;\n    SecondaryContent: typeof TagSecondaryContent;\n};\n\nexport const Tag: TagComponent = TagRoot as unknown as TagComponent;\nTag.HoverContent = TagHoverContent;\nTag.SecondaryContent = TagSecondaryContent;\n"],"names":["TagRoot","forwardRef","ariaLabel","dataTestId","children","disabled","emphasis","onAddClick","onClick","onDismiss","size","title","variant","ref","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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"}