@frontify/fondue-components 19.5.0 → 19.6.0

package/dist/fondue-components.js

@@ -2,9 +2,9 @@
 import { Accordion as t } from "./fondue-components3.js";
 import { Badge as m } from "./fondue-components4.js";
 import { Box as f } from "./fondue-components5.js";
-import { Button as l } from "./fondue-components6.js";
+import { Button as a } from "./fondue-components6.js";
 import { Checkbox as d } from "./fondue-components7.js";
-import { ColorPicker as c } from "./fondue-components8.js";
+import { ColorPicker as T } from "./fondue-components8.js";
 import { Dialog as g } from "./fondue-components9.js";
 import { Divider as h } from "./fondue-components10.js";
 import { Dropdown as C } from "./fondue-components11.js";
@@ -22,19 +22,20 @@ import { Select as M } from "./fondue-components22.js";
 import { Slider as O } from "./fondue-components23.js";
 import { Switch as R } from "./fondue-components24.js";
 import { Table as V } from "./fondue-components25.js";
-import { Tabs as X } from "./fondue-components26.js";
-import { Text as Z } from "./fondue-components27.js";
-import { TextInput as $ } from "./fondue-components28.js";
-import { Textarea as ro } from "./fondue-components29.js";
-import { ThemeContext as to, ThemeProvider as xo, useFondueTheme as mo } from "./fondue-components30.js";
-import { Tooltip as fo } from "./fondue-components31.js";
+import { Tag as X } from "./fondue-components26.js";
+import { Tabs as Z } from "./fondue-components27.js";
+import { Text as $ } from "./fondue-components28.js";
+import { TextInput as ro } from "./fondue-components29.js";
+import { Textarea as to } from "./fondue-components30.js";
+import { ThemeContext as mo, ThemeProvider as po, useFondueTheme as fo } from "./fondue-components31.js";
+import { Tooltip as ao } from "./fondue-components32.js";
 export {
   t as Accordion,
   m as Badge,
   f as Box,
-  l as Button,
+  a as Button,
   d as Checkbox,
-  c as ColorPicker,
+  T as ColorPicker,
   g as Dialog,
   h as Divider,
   C as Dropdown,
@@ -52,13 +53,14 @@ export {
   O as Slider,
   R as Switch,
   V as Table,
-  X as Tabs,
-  Z as Text,
-  $ as TextInput,
-  ro as Textarea,
-  to as ThemeContext,
-  xo as ThemeProvider,
-  fo as Tooltip,
-  mo as useFondueTheme
+  Z as Tabs,
+  X as Tag,
+  $ as Text,
+  ro as TextInput,
+  to as Textarea,
+  mo as ThemeContext,
+  po as ThemeProvider,
+  ao as Tooltip,
+  fo as useFondueTheme
 };
 //# sourceMappingURL=fondue-components.js.map

package/dist/fondue-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fondue-components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/fondue-components10.js

@@ -1,9 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
 import * as p from "@radix-ui/react-separator";
 import { forwardRef as f } from "react";
-import { cn as l } from "./fondue-components37.js";
-import v from "./fondue-components50.js";
-import { dividerStyles as c } from "./fondue-components51.js";
+import { cn as l } from "./fondue-components38.js";
+import v from "./fondue-components51.js";
+import { dividerStyles as c } from "./fondue-components52.js";
 const h = f(
   ({
     "data-test-id": i = "fondue-divider",

package/dist/fondue-components11.js

@@ -2,9 +2,9 @@ import { jsx as n, jsxs as g } from "react/jsx-runtime";
 import { IconCaretRight as M } from "@frontify/fondue-icons";
 import * as d from "@radix-ui/react-dropdown-menu";
 import { forwardRef as i, useMemo as G, Children as A, useRef as v } from "react";
-import { useFondueTheme as D, ThemeProvider as b } from "./fondue-components30.js";
-import { useProcessedChildren as h } from "./fondue-components52.js";
-import s from "./fondue-components53.js";
+import { useFondueTheme as D, ThemeProvider as b } from "./fondue-components31.js";
+import { useProcessedChildren as h } from "./fondue-components53.js";
+import s from "./fondue-components54.js";
 const N = ({
   children: o,
   open: t,

package/dist/fondue-components12.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { propsToCssVariables as y } from "./fondue-components35.js";
-import x from "./fondue-components54.js";
+import { propsToCssVariables as y } from "./fondue-components36.js";
+import x from "./fondue-components55.js";
 const u = n(
   ({
     as: a = "div",

package/dist/fondue-components13.js

@@ -2,9 +2,9 @@ import { jsx as a, jsxs as u } from "react/jsx-runtime";
 import { IconCross as R } from "@frontify/fondue-icons";
 import * as l from "@radix-ui/react-popover";
 import { forwardRef as i } from "react";
-import { addAutoFocusAttribute as w, addShowFocusRing as x } from "./fondue-components48.js";
-import { useFondueTheme as A, ThemeProvider as T } from "./fondue-components30.js";
-import s from "./fondue-components55.js";
+import { addAutoFocusAttribute as w, addShowFocusRing as x } from "./fondue-components49.js";
+import { useFondueTheme as A, ThemeProvider as T } from "./fondue-components31.js";
+import s from "./fondue-components56.js";
 const n = ({ children: t, ...o }) => /* @__PURE__ */ a(l.Root, { ...o, children: t });
 n.displayName = "Flyout.Root";
 const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...d }, r) => /* @__PURE__ */ a(

package/dist/fondue-components14.js

@@ -1,7 +1,7 @@
 import { jsx as f } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
-import { propsToCssVariables as n } from "./fondue-components35.js";
-import u from "./fondue-components56.js";
+import { propsToCssVariables as n } from "./fondue-components36.js";
+import u from "./fondue-components57.js";
 const c = y(
   ({
     as: a = "div",

package/dist/fondue-components15.js

@@ -1,7 +1,7 @@
 import { jsx as y } from "react/jsx-runtime";
 import { forwardRef as g } from "react";
-import { cn as x } from "./fondue-components37.js";
-import a from "./fondue-components57.js";
+import { cn as x } from "./fondue-components38.js";
+import a from "./fondue-components58.js";
 const $ = g(
   ({
     as: e = "span",

package/dist/fondue-components16.js

@@ -1,39 +1,29 @@
-import { jsxs as l, jsx as d } from "react/jsx-runtime";
-import * as w from "@radix-ui/react-label";
-import { forwardRef as m } from "react";
-import { cn as f } from "./fondue-components37.js";
-const u = ({ className: i, "data-test-id": s = "fondue-label", children: a, ...o }, n) => /* @__PURE__ */ l(
-  w.Root,
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import * as c from "@radix-ui/react-label";
+import { forwardRef as f } from "react";
+import { cn as p } from "./fondue-components38.js";
+import o from "./fondue-components59.js";
+const b = ({ className: l, "data-test-id": m = "fondue-label", children: a, ...r }, d) => /* @__PURE__ */ n(
+  c.Root,
   {
-    ref: n,
-    "data-required": o.required,
-    className: f(
-      "tw-group tw-relative tw-flex tw-gap-1 tw-font-body--stack tw-text-body-medium tw-text-text-weak tw-transition-colors",
-      // Peer-based color changes (apply to parent, inherit to spans)
-      "peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text has-[~_button:hover:not(:disabled)]:tw-text-text",
-      // Use adjacent sibling selector when checkbox is checked
-      '[*[data-state="checked"]+&]:tw-font-medium [*[data-state="indeterminate"]+&]:tw-font-medium',
-      // Disabled state styling and cursor
-      "has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed",
-      // Required asterisk
-      'after:tw-hidden data-[required="true"]:after:tw-flex after:tw-content-["*"] after:-tw-ml-1 after:tw-font-body--stack after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',
-      i
-    ),
-    "data-test-id": s,
+    ref: d,
+    "data-required": r.required,
+    className: p(o.root, l),
+    "data-test-id": m,
     onClick: (t) => {
-      const r = t.target.getAttribute("for"), e = r ? document.getElementById(r) : null;
+      const i = t.target.getAttribute("for"), e = i ? document.getElementById(i) : null;
       e && e.getAttribute("role") === "combobox" && (t.preventDefault(), t.stopPropagation(), e.click());
     },
-    ...o,
+    ...r,
     children: [
-      /* @__PURE__ */ d("span", { className: "tw-font-medium tw-opacity-0 tw-pointer-events-none", "aria-hidden": "true", children: a }),
-      /* @__PURE__ */ d("span", { className: "tw-absolute tw-inset-0", children: a })
+      /* @__PURE__ */ s("span", { className: o.hiddenText, "aria-hidden": "true", children: a }),
+      /* @__PURE__ */ s("span", { className: o.visibleText, children: a })
     ]
   }
-), x = m(u);
-x.displayName = "Label";
+), u = f(b);
+u.displayName = "Label";
 export {
-  x as Label,
-  u as LabelComponent
+  u as Label,
+  b as LabelComponent
 };
 //# sourceMappingURL=fondue-components16.js.map

package/dist/fondue-components16.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components16.js","sources":["../src/components/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type MouseEventHandler, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nexport type LabelProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The id of the input element the label is associated with\n     */\n    htmlFor: string;\n    /**\n     * Add an asterisk to the label to indicate it is required\n     * @default false\n     */\n    required?: boolean;\n    className?: string;\n    onClick?: MouseEventHandler<HTMLLabelElement>;\n    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', children, ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            className={cn(\n                'tw-group tw-relative tw-flex tw-gap-1 tw-font-body--stack tw-text-body-medium tw-text-text-weak tw-transition-colors',\n                // Peer-based color changes (apply to parent, inherit to spans)\n                'peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text has-[~_button:hover:not(:disabled)]:tw-text-text',\n                // Use adjacent sibling selector when checkbox is checked\n                '[*[data-state=\"checked\"]+&]:tw-font-medium [*[data-state=\"indeterminate\"]+&]:tw-font-medium',\n                // Disabled state styling and cursor\n                'has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed',\n                // Required asterisk\n                'after:tw-hidden data-[required=\"true\"]:after:tw-flex after:tw-content-[\"*\"] after:-tw-ml-1 after:tw-font-body--stack after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',\n                className,\n            )}\n            data-test-id={dataTestId}\n            onClick={(event) => {\n                // Add support of Select component, Radix only allows native `select`\n                // but we use `div[role=combobox]` because of downshift\n                // https://github.com/radix-ui/primitives/blob/6e75e117977c9e6ffa939e6951a707f16ba0f95e/packages/react/label/src/label.tsx#L22\n                const targetId = (event.target as HTMLElement).getAttribute('for');\n                const target = targetId ? document.getElementById(targetId) : null;\n\n                if (target && target.getAttribute('role') === 'combobox') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    target.click();\n                }\n            }}\n            {...props}\n        >\n            {/* Hidden version with medium font weight to reserve space */}\n            <span className=\"tw-font-medium tw-opacity-0 tw-pointer-events-none\" aria-hidden=\"true\">\n                {children}\n            </span>\n            {/* Visible version (inherits all styling from parent) */}\n            <span className=\"tw-absolute tw-inset-0\">{children}</span>\n        </LabelPrimitive.Root>\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","children","props","ref","jsxs","LabelPrimitive","cn","event","targetId","target","jsx","Label","forwardRef"],"mappings":";;;;AAwBO,MAAMA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,UAAAC,GAAU,GAAGC,EAAA,GACvEC,MAGI,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,KAAAF;AAAA,IACA,iBAAeD,EAAM;AAAA,IACrB,WAAWI;AAAA,MACP;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA,MACAP;AAAA,IAAA;AAAA,IAEJ,gBAAcC;AAAA,IACd,SAAS,CAACO,MAAU;AAIhB,YAAMC,IAAYD,EAAM,OAAuB,aAAa,KAAK,GAC3DE,IAASD,IAAW,SAAS,eAAeA,CAAQ,IAAI;AAE9D,MAAIC,KAAUA,EAAO,aAAa,MAAM,MAAM,eAC1CF,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNE,EAAO,MAAA;AAAA,IAEf;AAAA,IACC,GAAGP;AAAA,IAGJ,UAAA;AAAA,MAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,sDAAqD,eAAY,QAC5E,UAAAT,GACL;AAAA,MAEA,gBAAAS,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAT,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAAA,GAKlDU,IAAQC,EAAyCd,CAAc;AAC5Ea,EAAM,cAAc;"}
+{"version":3,"file":"fondue-components16.js","sources":["../src/components/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type MouseEventHandler, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/label.module.scss';\n\nexport type LabelProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The id of the input element the label is associated with\n     */\n    htmlFor: string;\n    /**\n     * Add an asterisk to the label to indicate it is required\n     * @default false\n     */\n    required?: boolean;\n    className?: string;\n    onClick?: MouseEventHandler<HTMLLabelElement>;\n    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', children, ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            className={cn(styles.root, className)}\n            data-test-id={dataTestId}\n            onClick={(event) => {\n                // Add support of Select component, Radix only allows native `select`\n                // but we use `div[role=combobox]` because of downshift\n                // https://github.com/radix-ui/primitives/blob/6e75e117977c9e6ffa939e6951a707f16ba0f95e/packages/react/label/src/label.tsx#L22\n                const targetId = (event.target as HTMLElement).getAttribute('for');\n                const target = targetId ? document.getElementById(targetId) : null;\n\n                if (target && target.getAttribute('role') === 'combobox') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    target.click();\n                }\n            }}\n            {...props}\n        >\n            {/* Hidden version with medium font weight to reserve space */}\n            <span className={styles.hiddenText} aria-hidden=\"true\">\n                {children}\n            </span>\n            {/* Visible version (inherits all styling from parent) */}\n            <span className={styles.visibleText}>{children}</span>\n        </LabelPrimitive.Root>\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","children","props","ref","jsxs","LabelPrimitive","cn","styles","event","targetId","target","jsx","Label","forwardRef"],"mappings":";;;;;AA0BO,MAAMA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,UAAAC,GAAU,GAAGC,EAAA,GACvEC,MAGI,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,KAAAF;AAAA,IACA,iBAAeD,EAAM;AAAA,IACrB,WAAWI,EAAGC,EAAO,MAAMR,CAAS;AAAA,IACpC,gBAAcC;AAAA,IACd,SAAS,CAACQ,MAAU;AAIhB,YAAMC,IAAYD,EAAM,OAAuB,aAAa,KAAK,GAC3DE,IAASD,IAAW,SAAS,eAAeA,CAAQ,IAAI;AAE9D,MAAIC,KAAUA,EAAO,aAAa,MAAM,MAAM,eAC1CF,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNE,EAAO,MAAA;AAAA,IAEf;AAAA,IACC,GAAGR;AAAA,IAGJ,UAAA;AAAA,MAAA,gBAAAS,EAAC,UAAK,WAAWJ,EAAO,YAAY,eAAY,QAC3C,UAAAN,GACL;AAAA,MAEA,gBAAAU,EAAC,QAAA,EAAK,WAAWJ,EAAO,aAAc,UAAAN,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAAA,GAK9CW,IAAQC,EAAyCf,CAAc;AAC5Ec,EAAM,cAAc;"}

package/dist/fondue-components17.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-progress";
 import { forwardRef as m } from "react";
-import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components58.js";
+import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components60.js";
 const p = m(
   ({
     value: a,

package/dist/fondue-components18.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
-import d from "./fondue-components59.js";
+import d from "./fondue-components61.js";
 const s = i(
   ({
     variant: t = "progress",

package/dist/fondue-components19.js

@@ -1,7 +1,7 @@
 import { jsxs as b, jsx as l } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-scroll-area";
 import { forwardRef as h } from "react";
-import o from "./fondue-components60.js";
+import o from "./fondue-components62.js";
 const p = ({
   type: t = "hover",
   maxHeight: e = "100%",

package/dist/fondue-components20.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import { propsToCssVariables as c } from "./fondue-components35.js";
-import f from "./fondue-components61.js";
+import { propsToCssVariables as c } from "./fondue-components36.js";
+import f from "./fondue-components63.js";
 const y = m(
   ({
     "data-test-id": a = "fondue-section",

package/dist/fondue-components21.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import * as n from "@radix-ui/react-toggle-group";
 import { forwardRef as i } from "react";
-import { useControllableState as N } from "./fondue-components62.js";
-import e from "./fondue-components63.js";
+import { useControllableState as N } from "./fondue-components64.js";
+import e from "./fondue-components65.js";
 const d = ({
   children: a,
   value: o,

package/dist/fondue-components22.js

@@ -4,12 +4,12 @@ import * as g from "@radix-ui/react-popover";
 import { Slot as q } from "@radix-ui/react-slot";
 import { useSelect as J } from "downshift";
 import { forwardRef as K, useRef as L, useState as Q } from "react";
-import { ForwardedRefCombobox as U } from "./fondue-components64.js";
-import { ForwardedRefSelectItem as W, ForwardedRefSelectItemGroup as X } from "./fondue-components65.js";
-import { SelectMenu as Y } from "./fondue-components66.js";
-import { ForwardedRefSelectSlot as Z } from "./fondue-components67.js";
-import o from "./fondue-components68.js";
-import { useSelectData as _ } from "./fondue-components69.js";
+import { ForwardedRefCombobox as U } from "./fondue-components66.js";
+import { ForwardedRefSelectItem as W, ForwardedRefSelectItemGroup as X } from "./fondue-components67.js";
+import { SelectMenu as Y } from "./fondue-components68.js";
+import { ForwardedRefSelectSlot as Z } from "./fondue-components69.js";
+import o from "./fondue-components70.js";
+import { useSelectData as _ } from "./fondue-components71.js";
 const S = ({
   children: h,
   onSelect: s,

package/dist/fondue-components23.js

@@ -1,7 +1,7 @@
 import { jsxs as f, jsx as s } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-slider";
 import { forwardRef as h, useRef as R } from "react";
-import r from "./fondue-components70.js";
+import r from "./fondue-components72.js";
 const g = ({
   value: a,
   defaultValue: n = [0],

package/dist/fondue-components24.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-switch";
 import { forwardRef as l } from "react";
-import { cn as f } from "./fondue-components37.js";
-import t from "./fondue-components71.js";
+import { cn as f } from "./fondue-components38.js";
+import t from "./fondue-components73.js";
 const n = ({
   value: a,
   defaultValue: i,

package/dist/fondue-components25.js

@@ -1,12 +1,12 @@
 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 g } from "./fondue-components47.js";
-import { useTextTruncation as N } from "./fondue-components72.js";
+import { useSyncRefs as g } from "./fondue-components48.js";
+import { useTextTruncation as N } from "./fondue-components74.js";
 import { Box as L } from "./fondue-components5.js";
 import { LoadingCircle as S } from "./fondue-components18.js";
-import i from "./fondue-components73.js";
-import { handleKeyDown as $, shouldIgnoreRowClick as D } from "./fondue-components74.js";
+import i from "./fondue-components75.js";
+import { handleKeyDown as $, shouldIgnoreRowClick as D } from "./fondue-components76.js";
 const R = b(
   ({ layout: a = "auto", fontSize: e = "medium", sticky: o, children: s, ...d }, l) => (
     // eslint-disable-next-line jsx-a11y-x/no-noninteractive-element-interactions

package/dist/fondue-components26.js

@@ -1,132 +1,140 @@
-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-components62.js";
-import { Button as M } from "./fondue-components6.js";
-import { Dropdown as d } from "./fondue-components11.js";
-import { useTabTriggers as W } from "./fondue-components75.js";
-import n from "./fondue-components76.js";
-const m = E({
-  value: "",
-  disabled: !1
-});
-m.displayName = "TabConfigContext";
-const v = E({
-  addTrigger: () => {
-  }
-});
-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,
+import { jsxs as g, jsx as t, Fragment as h } from "react/jsx-runtime";
+import { IconPlus as z, IconCross as B } from "@frontify/fondue-icons";
+import { useState as $, Children as T, isValidElement as x } from "react";
+import s from "./fondue-components77.js";
+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",
     {
-      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
-      ]
+      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
     }
-  ) });
-};
-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)
-};
+  ) : /* @__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",
+    {
+      type: "button",
+      "aria-label": `Dismiss ${e || ""}`,
+      className: s.actionButton,
+      disabled: n,
+      onClick: a,
+      children: /* @__PURE__ */ t(B, { size: "16" })
+    }
+  )
+] }), 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;
 export {
-  Z as Tabs,
-  P as TabsContent,
-  L as TabsRoot,
-  V as TabsTab,
-  k as TabsTrigger
+  I as Tag,
+  b as TagHoverContent,
+  N as TagSecondaryContent
 };
 //# sourceMappingURL=fondue-components26.js.map