@frontify/fondue-components 8.0.2 → 9.0.0

package/dist/fondue-components22.js

@@ -1,50 +1,52 @@
-import { jsx as a, jsxs as p } from "react/jsx-runtime";
-import { createContext as x, forwardRef as i, useCallback as j, createElement as N, useContext as T, useRef as A, useEffect as D } from "react";
-import { IconDotsHorizontal as E } from "@frontify/fondue-icons";
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
+import { createContext as x, forwardRef as i, useCallback as A, createElement as N, useContext as b, useRef as D, useEffect as E } from "react";
+import { IconDotsHorizontal as O } from "@frontify/fondue-icons";
 import * as d from "@radix-ui/react-tabs";
-import { useControllableState as O } from "./fondue-components48.js";
-import { Button as V } from "./fondue-components4.js";
+import { useControllableState as V } from "./fondue-components48.js";
+import { Button as q } from "./fondue-components4.js";
 import { Dropdown as l } from "./fondue-components9.js";
-import { useTabTriggers as q } from "./fondue-components62.js";
+import { useTabTriggers as B } from "./fondue-components62.js";
 import r from "./fondue-components63.js";
-const b = x({
+const T = x({
   value: "",
   disabled: !1
 }), w = x({
   addTrigger: () => {
   }
 }), y = ({
-  children: t,
+  padding: t = "compact",
   activeTab: o,
   defaultActiveTab: s,
-  onActiveTabChange: n,
-  size: c = "medium",
-  ...m
-}, u) => {
+  size: n = "medium",
+  onActiveTabChange: c,
+  children: m,
+  ...p
+}, k) => {
   var R;
-  const [f, v] = O({
+  const [f, v] = V({
     prop: o,
     defaultProp: s,
-    onChange: n
-  }), g = j(
+    onChange: c
+  }), g = A(
     (e) => {
       v(e);
     },
     [v]
-  ), { triggerListRef: k, activeIndicatorRef: P, triggers: C, triggersOutOfView: h, addTrigger: S } = q({
+  ), { triggerListRef: P, activeIndicatorRef: S, triggers: C, triggersOutOfView: h, addTrigger: j } = B({
     activeTab: f
   });
-  return /* @__PURE__ */ a(w.Provider, { value: { addTrigger: S }, children: /* @__PURE__ */ p(
+  return /* @__PURE__ */ a(w.Provider, { value: { addTrigger: j }, children: /* @__PURE__ */ u(
     d.Root,
     {
-      ref: u,
+      ref: k,
       className: r.root,
       onValueChange: g,
       value: f ?? ((R = C[0]) == null ? void 0 : R.value),
-      ...m,
+      "data-tabs-content-padding": t,
+      ...p,
       children: [
-        /* @__PURE__ */ p("div", { className: r.triggerListWrapper, children: [
-          /* @__PURE__ */ a(d.List, { ref: k, "data-size": c, className: r.triggerList, children: C.map((e) => /* @__PURE__ */ N(
+        /* @__PURE__ */ u("div", { className: r.triggerListWrapper, children: [
+          /* @__PURE__ */ a(d.List, { ref: P, "data-size": n, className: r.triggerList, children: C.map((e) => /* @__PURE__ */ N(
             d.Trigger,
             {
               ...e.props,
@@ -56,8 +58,8 @@ const b = x({
             },
             e.element
           )) }),
-          /* @__PURE__ */ p(l.Root, { children: [
-            h.length > 0 && /* @__PURE__ */ a(l.Trigger, { "data-test-id": "overflow-items-dropdown-trigger", children: /* @__PURE__ */ a(V, { emphasis: "default", aspect: "square", size: "small", children: /* @__PURE__ */ a(E, { size: 16 }) }) }),
+          /* @__PURE__ */ u(l.Root, { children: [
+            h.length > 0 && /* @__PURE__ */ a(l.Trigger, { "data-test-id": "overflow-items-dropdown-trigger", children: /* @__PURE__ */ a(q, { emphasis: "default", aspect: "square", size: "small", children: /* @__PURE__ */ a(O, { size: 16 }) }) }),
             /* @__PURE__ */ a(l.Content, { align: "end", "data-test-id": "overflow-items-dropdown-content", children: h.map((e) => /* @__PURE__ */ N(
               l.Item,
               {
@@ -73,24 +75,24 @@ const b = x({
             "span",
             {
               "data-test-id": "active-tab-indicator",
-              ref: P,
+              ref: S,
               className: r.activeIndicator
             }
           )
         ] }),
-        t
+        m
       ]
     }
   ) });
 };
 y.displayName = "Tabs.Root";
-const z = ({ children: t, value: o, disabled: s }) => /* @__PURE__ */ a(b.Provider, { value: { value: o, disabled: s }, children: t });
+const z = ({ children: t, value: o, disabled: s }) => /* @__PURE__ */ a(T.Provider, { value: { value: o, disabled: s }, children: t });
 z.displayName = "Tabs.Tab";
 const I = ({ children: t, ...o }, s) => {
-  const { value: n, disabled: c } = T(b), { addTrigger: m } = T(w), u = A(null);
-  return D(() => {
+  const { value: n, disabled: c } = b(T), { addTrigger: m } = b(w), p = D(null);
+  return E(() => {
     m({
-      ref: u || s,
+      ref: p || s,
       value: n ?? "",
       disabled: c,
       props: o,
@@ -100,18 +102,18 @@ const I = ({ children: t, ...o }, s) => {
 };
 I.displayName = "Tabs.Trigger";
 const L = ({ children: t, ...o }, s) => {
-  const { value: n } = T(b);
+  const { value: n } = b(T);
   return /* @__PURE__ */ a(d.Content, { ref: s, ...o, className: r.content, value: n ?? "", children: t });
 };
 L.displayName = "Tabs.Content";
-const Q = {
+const U = {
   Root: i(y),
   Tab: i(z),
   Trigger: i(I),
   Content: i(L)
 };
 export {
-  Q as Tabs,
+  U as Tabs,
   L as TabsContent,
   y as TabsRoot,
   z as TabsTab,

package/dist/fondue-components22.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components22.js","sources":["../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconDotsHorizontal } from '@frontify/fondue-icons';\nimport * as RadixTabs from '@radix-ui/react-tabs';\nimport {\n    createContext,\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport { Button } from '../Button/Button';\nimport { Dropdown } from '../Dropdown/Dropdown';\n\nimport { useTabTriggers } from './hooks/useTabTriggers';\nimport styles from './styles/tabs.module.scss';\nimport { type TabTrigger } from './types';\n\nexport type TabsRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The default active tab\n     * Used for uncontrolled components\n     */\n    defaultActiveTab?: string;\n    /**\n     * The controlled value of the active tab\n     */\n    activeTab?: string;\n    /**\n     * The height of the tabs\n     * @default 'medium'\n     */\n    size?: 'medium' | 'large';\n    /**\n     * Event handler called when the active tab changes\n     */\n    onActiveTabChange?: (value: string) => void;\n};\n\nconst TabConfigContext = createContext<{\n    value: string;\n    disabled?: boolean;\n}>({\n    value: '',\n    disabled: false,\n});\n\nconst TabTriggerContext = createContext<{\n    addTrigger: (trigger: TabTrigger) => void;\n}>({\n    addTrigger: () => {},\n});\n\nexport const TabsRoot = (\n    {\n        children,\n        activeTab: propsActiveTab,\n        defaultActiveTab,\n        onActiveTabChange,\n        size = 'medium',\n        ...props\n    }: TabsRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [activeTab, setActiveTab] = useControllableState({\n        prop: propsActiveTab,\n        defaultProp: defaultActiveTab,\n        onChange: onActiveTabChange,\n    });\n\n    const handleSetActiveTab = useCallback(\n        (value: string) => {\n            setActiveTab(value);\n        },\n        [setActiveTab],\n    );\n\n    const { triggerListRef, activeIndicatorRef, triggers, triggersOutOfView, addTrigger } = useTabTriggers({\n        activeTab,\n    });\n\n    return (\n        <TabTriggerContext.Provider value={{ addTrigger }}>\n            <RadixTabs.Root\n                ref={ref}\n                className={styles.root}\n                onValueChange={handleSetActiveTab}\n                value={activeTab ?? triggers[0]?.value}\n                {...props}\n            >\n                <div className={styles.triggerListWrapper}>\n                    <RadixTabs.List ref={triggerListRef} data-size={size} className={styles.triggerList}>\n                        {triggers.map((trigger) => (\n                            <RadixTabs.Trigger\n                                {...trigger.props}\n                                key={trigger.value}\n                                value={trigger.value}\n                                disabled={trigger.disabled}\n                                className={styles.trigger}\n                                ref={trigger.ref}\n                            >\n                                {trigger.element}\n                            </RadixTabs.Trigger>\n                        ))}\n                    </RadixTabs.List>\n                    <Dropdown.Root>\n                        {triggersOutOfView.length > 0 && (\n                            <Dropdown.Trigger data-test-id=\"overflow-items-dropdown-trigger\">\n                                <Button emphasis=\"default\" aspect=\"square\" size=\"small\">\n                                    <IconDotsHorizontal size={16} />\n                                </Button>\n                            </Dropdown.Trigger>\n                        )}\n                        <Dropdown.Content align=\"end\" data-test-id=\"overflow-items-dropdown-content\">\n                            {triggersOutOfView.map((trigger) => (\n                                <Dropdown.Item\n                                    {...trigger.props}\n                                    disabled={trigger.disabled}\n                                    onSelect={() => handleSetActiveTab(trigger.value)}\n                                    key={trigger.value}\n                                >\n                                    {trigger.element}\n                                </Dropdown.Item>\n                            ))}\n                        </Dropdown.Content>\n                    </Dropdown.Root>\n                    <span\n                        data-test-id=\"active-tab-indicator\"\n                        ref={activeIndicatorRef}\n                        className={styles.activeIndicator}\n                    />\n                </div>\n                {children}\n            </RadixTabs.Root>\n        </TabTriggerContext.Provider>\n    );\n};\nTabsRoot.displayName = 'Tabs.Root';\n\ntype TabsTabProps = {\n    children: ReactNode;\n    value: string;\n    disabled?: boolean;\n};\n\nexport const TabsTab = ({ children, value, disabled }: TabsTabProps) => (\n    <TabConfigContext.Provider value={{ value, disabled }}>{children}</TabConfigContext.Provider>\n);\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabsTriggerProps = {\n    children: ReactNode;\n};\n\nexport const TabsTrigger = ({ children, ...props }: TabsTriggerProps, ref: ForwardedRef<HTMLButtonElement>) => {\n    const { value, disabled } = useContext(TabConfigContext);\n\n    const { addTrigger } = useContext(TabTriggerContext);\n\n    const localRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n        addTrigger({\n            ref: localRef || ref,\n            value: value ?? '',\n            disabled,\n            props,\n            element: children,\n        });\n    }, []);\n\n    return null;\n};\nTabsTrigger.displayName = 'Tabs.Trigger';\n\ntype TabsContentProps = {\n    children: ReactNode;\n};\n\nexport const TabsContent = ({ children, ...itemProps }: TabsContentProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const { value } = useContext(TabConfigContext);\n\n    return (\n        <RadixTabs.Content ref={ref} {...itemProps} className={styles.content} value={value ?? ''}>\n            {children}\n        </RadixTabs.Content>\n    );\n};\nTabsContent.displayName = 'Tabs.Content';\n\nexport const Tabs = {\n    Root: forwardRef<HTMLDivElement, TabsRootProps>(TabsRoot),\n    Tab: forwardRef<HTMLDivElement, TabsTabProps>(TabsTab),\n    Trigger: forwardRef<HTMLButtonElement, TabsTriggerProps>(TabsTrigger),\n    Content: forwardRef<HTMLDivElement, TabsContentProps>(TabsContent),\n};\n"],"names":["TabConfigContext","createContext","TabTriggerContext","TabsRoot","children","propsActiveTab","defaultActiveTab","onActiveTabChange","size","props","ref","activeTab","setActiveTab","useControllableState","handleSetActiveTab","useCallback","value","triggerListRef","activeIndicatorRef","triggers","triggersOutOfView","addTrigger","useTabTriggers","jsxs","RadixTabs","styles","_a","jsx","trigger","createElement","Dropdown","Button","IconDotsHorizontal","TabsTab","disabled","TabsTrigger","useContext","localRef","useRef","useEffect","TabsContent","itemProps","Tabs","forwardRef"],"mappings":";;;;;;;;;AA+CA,MAAMA,IAAmBC,EAGtB;AAAA,EACC,OAAO;AAAA,EACP,UAAU;AACd,CAAC,GAEKC,IAAoBD,EAEvB;AAAA,EACC,YAAY,MAAM;AAAA,EAAA;AACtB,CAAC,GAEYE,IAAW,CACpB;AAAA,EACI,UAAAC;AAAA,EACA,WAAWC;AAAA,EACX,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACP,GACAC,MACC;;AACD,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAqB;AAAA,IACnD,MAAMR;AAAA,IACN,aAAaC;AAAA,IACb,UAAUC;AAAA,EAAA,CACb,GAEKO,IAAqBC;AAAA,IACvB,CAACC,MAAkB;AACf,MAAAJ,EAAaI,CAAK;AAAA,IACtB;AAAA,IACA,CAACJ,CAAY;AAAA,EACjB,GAEM,EAAE,gBAAAK,GAAgB,oBAAAC,GAAoB,UAAAC,GAAU,mBAAAC,GAAmB,YAAAC,MAAeC,EAAe;AAAA,IACnG,WAAAX;AAAA,EAAA,CACH;AAED,2BACKT,EAAkB,UAAlB,EAA2B,OAAO,EAAE,YAAAmB,KACjC,UAAA,gBAAAE;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACG,KAAAd;AAAA,MACA,WAAWe,EAAO;AAAA,MAClB,eAAeX;AAAA,MACf,OAAOH,OAAae,IAAAP,EAAS,CAAC,MAAV,gBAAAO,EAAa;AAAA,MAChC,GAAGjB;AAAA,MAEJ,UAAA;AAAA,QAAC,gBAAAc,EAAA,OAAA,EAAI,WAAWE,EAAO,oBACnB,UAAA;AAAA,UAAA,gBAAAE,EAACH,EAAU,MAAV,EAAe,KAAKP,GAAgB,aAAWT,GAAM,WAAWiB,EAAO,aACnE,UAASN,EAAA,IAAI,CAACS,MACX,gBAAAC;AAAA,YAACL,EAAU;AAAA,YAAV;AAAA,cACI,GAAGI,EAAQ;AAAA,cACZ,KAAKA,EAAQ;AAAA,cACb,OAAOA,EAAQ;AAAA,cACf,UAAUA,EAAQ;AAAA,cAClB,WAAWH,EAAO;AAAA,cAClB,KAAKG,EAAQ;AAAA,YAAA;AAAA,YAEZA,EAAQ;AAAA,UAEhB,CAAA,GACL;AAAA,UACA,gBAAAL,EAACO,EAAS,MAAT,EACI,UAAA;AAAA,YAAkBV,EAAA,SAAS,KACvB,gBAAAO,EAAAG,EAAS,SAAT,EAAiB,gBAAa,mCAC3B,UAAC,gBAAAH,EAAAI,GAAA,EAAO,UAAS,WAAU,QAAO,UAAS,MAAK,SAC5C,4BAACC,GAAmB,EAAA,MAAM,IAAI,EAAA,CAClC,EACJ,CAAA;AAAA,YAEJ,gBAAAL,EAACG,EAAS,SAAT,EAAiB,OAAM,OAAM,gBAAa,mCACtC,UAAAV,EAAkB,IAAI,CAACQ,MACpB,gBAAAC;AAAA,cAACC,EAAS;AAAA,cAAT;AAAA,gBACI,GAAGF,EAAQ;AAAA,gBACZ,UAAUA,EAAQ;AAAA,gBAClB,UAAU,MAAMd,EAAmBc,EAAQ,KAAK;AAAA,gBAChD,KAAKA,EAAQ;AAAA,cAAA;AAAA,cAEZA,EAAQ;AAAA,YAAA,CAEhB,EACL,CAAA;AAAA,UAAA,GACJ;AAAA,UACA,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAa;AAAA,cACb,KAAKT;AAAA,cACL,WAAWO,EAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QACtB,GACJ;AAAA,QACCrB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAET;AAER;AACAD,EAAS,cAAc;AAQhB,MAAM8B,IAAU,CAAC,EAAE,UAAA7B,GAAU,OAAAY,GAAO,UAAAkB,EACvC,MAAA,gBAAAP,EAAC3B,EAAiB,UAAjB,EAA0B,OAAO,EAAE,OAAAgB,GAAO,UAAAkB,EAAA,GAAa,UAAA9B,EAAS,CAAA;AAErE6B,EAAQ,cAAc;AAMf,MAAME,IAAc,CAAC,EAAE,UAAA/B,GAAU,GAAGK,EAAA,GAA2BC,MAAyC;AAC3G,QAAM,EAAE,OAAAM,GAAO,UAAAkB,MAAaE,EAAWpC,CAAgB,GAEjD,EAAE,YAAAqB,EAAA,IAAee,EAAWlC,CAAiB,GAE7CmC,IAAWC,EAA0B,IAAI;AAE/C,SAAAC,EAAU,MAAM;AACD,IAAAlB,EAAA;AAAA,MACP,KAAKgB,KAAY3B;AAAA,MACjB,OAAOM,KAAS;AAAA,MAChB,UAAAkB;AAAA,MACA,OAAAzB;AAAA,MACA,SAASL;AAAA,IAAA,CACZ;AAAA,EACL,GAAG,EAAE,GAEE;AACX;AACA+B,EAAY,cAAc;AAMnB,MAAMK,IAAc,CAAC,EAAE,UAAApC,GAAU,GAAGqC,EAAA,GAA+B/B,MAAsC;AAC5G,QAAM,EAAE,OAAAM,EAAA,IAAUoB,EAAWpC,CAAgB;AAE7C,SACK,gBAAA2B,EAAAH,EAAU,SAAV,EAAkB,KAAAd,GAAW,GAAG+B,GAAW,WAAWhB,EAAO,SAAS,OAAOT,KAAS,IAClF,UAAAZ,EACL,CAAA;AAER;AACAoC,EAAY,cAAc;AAEnB,MAAME,IAAO;AAAA,EAChB,MAAMC,EAA0CxC,CAAQ;AAAA,EACxD,KAAKwC,EAAyCV,CAAO;AAAA,EACrD,SAASU,EAAgDR,CAAW;AAAA,EACpE,SAASQ,EAA6CH,CAAW;AACrE;"}
+{"version":3,"file":"fondue-components22.js","sources":["../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconDotsHorizontal } from '@frontify/fondue-icons';\nimport * as RadixTabs from '@radix-ui/react-tabs';\nimport {\n    createContext,\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport { Button } from '../Button/Button';\nimport { Dropdown } from '../Dropdown/Dropdown';\n\nimport { useTabTriggers } from './hooks/useTabTriggers';\nimport styles from './styles/tabs.module.scss';\nimport { type TabTrigger } from './types';\n\nexport type TabsRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The default active tab\n     * Used for uncontrolled components\n     */\n    defaultActiveTab?: string;\n    /**\n     * The controlled value of the active tab\n     */\n    activeTab?: string;\n    /**\n     * The height of the tabs\n     * @default 'medium'\n     */\n    size?: 'medium' | 'large';\n    /**\n     * Event handler called when the active tab changes\n     */\n    onActiveTabChange?: (value: string) => void;\n};\n\nconst TabConfigContext = createContext<{\n    value: string;\n    disabled?: boolean;\n}>({\n    value: '',\n    disabled: false,\n});\n\nconst TabTriggerContext = createContext<{\n    addTrigger: (trigger: TabTrigger) => void;\n}>({\n    addTrigger: () => {},\n});\n\nexport const TabsRoot = (\n    {\n        padding = 'compact',\n        activeTab: propsActiveTab,\n        defaultActiveTab,\n        size = 'medium',\n        onActiveTabChange,\n        children,\n        ...props\n    }: TabsRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [activeTab, setActiveTab] = useControllableState({\n        prop: propsActiveTab,\n        defaultProp: defaultActiveTab,\n        onChange: onActiveTabChange,\n    });\n\n    const handleSetActiveTab = useCallback(\n        (value: string) => {\n            setActiveTab(value);\n        },\n        [setActiveTab],\n    );\n\n    const { triggerListRef, activeIndicatorRef, triggers, triggersOutOfView, addTrigger } = useTabTriggers({\n        activeTab,\n    });\n\n    return (\n        <TabTriggerContext.Provider value={{ addTrigger }}>\n            <RadixTabs.Root\n                ref={ref}\n                className={styles.root}\n                onValueChange={handleSetActiveTab}\n                value={activeTab ?? triggers[0]?.value}\n                data-tabs-content-padding={padding}\n                {...props}\n            >\n                <div className={styles.triggerListWrapper}>\n                    <RadixTabs.List ref={triggerListRef} data-size={size} className={styles.triggerList}>\n                        {triggers.map((trigger) => (\n                            <RadixTabs.Trigger\n                                {...trigger.props}\n                                key={trigger.value}\n                                value={trigger.value}\n                                disabled={trigger.disabled}\n                                className={styles.trigger}\n                                ref={trigger.ref}\n                            >\n                                {trigger.element}\n                            </RadixTabs.Trigger>\n                        ))}\n                    </RadixTabs.List>\n                    <Dropdown.Root>\n                        {triggersOutOfView.length > 0 && (\n                            <Dropdown.Trigger data-test-id=\"overflow-items-dropdown-trigger\">\n                                <Button emphasis=\"default\" aspect=\"square\" size=\"small\">\n                                    <IconDotsHorizontal size={16} />\n                                </Button>\n                            </Dropdown.Trigger>\n                        )}\n                        <Dropdown.Content align=\"end\" data-test-id=\"overflow-items-dropdown-content\">\n                            {triggersOutOfView.map((trigger) => (\n                                <Dropdown.Item\n                                    {...trigger.props}\n                                    disabled={trigger.disabled}\n                                    onSelect={() => handleSetActiveTab(trigger.value)}\n                                    key={trigger.value}\n                                >\n                                    {trigger.element}\n                                </Dropdown.Item>\n                            ))}\n                        </Dropdown.Content>\n                    </Dropdown.Root>\n                    <span\n                        data-test-id=\"active-tab-indicator\"\n                        ref={activeIndicatorRef}\n                        className={styles.activeIndicator}\n                    />\n                </div>\n                {children}\n            </RadixTabs.Root>\n        </TabTriggerContext.Provider>\n    );\n};\nTabsRoot.displayName = 'Tabs.Root';\n\ntype TabsTabProps = {\n    children: ReactNode;\n    value: string;\n    disabled?: boolean;\n};\n\nexport const TabsTab = ({ children, value, disabled }: TabsTabProps) => (\n    <TabConfigContext.Provider value={{ value, disabled }}>{children}</TabConfigContext.Provider>\n);\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabsTriggerProps = {\n    children: ReactNode;\n};\n\nexport const TabsTrigger = ({ children, ...props }: TabsTriggerProps, ref: ForwardedRef<HTMLButtonElement>) => {\n    const { value, disabled } = useContext(TabConfigContext);\n\n    const { addTrigger } = useContext(TabTriggerContext);\n\n    const localRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n        addTrigger({\n            ref: localRef || ref,\n            value: value ?? '',\n            disabled,\n            props,\n            element: children,\n        });\n    }, []);\n\n    return null;\n};\nTabsTrigger.displayName = 'Tabs.Trigger';\n\ntype TabsContentProps = {\n    children: ReactNode;\n};\n\nexport const TabsContent = ({ children, ...itemProps }: TabsContentProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const { value } = useContext(TabConfigContext);\n\n    return (\n        <RadixTabs.Content ref={ref} {...itemProps} className={styles.content} value={value ?? ''}>\n            {children}\n        </RadixTabs.Content>\n    );\n};\nTabsContent.displayName = 'Tabs.Content';\n\nexport const Tabs = {\n    Root: forwardRef<HTMLDivElement, TabsRootProps>(TabsRoot),\n    Tab: forwardRef<HTMLDivElement, TabsTabProps>(TabsTab),\n    Trigger: forwardRef<HTMLButtonElement, TabsTriggerProps>(TabsTrigger),\n    Content: forwardRef<HTMLDivElement, TabsContentProps>(TabsContent),\n};\n"],"names":["TabConfigContext","createContext","TabTriggerContext","TabsRoot","padding","propsActiveTab","defaultActiveTab","size","onActiveTabChange","children","props","ref","activeTab","setActiveTab","useControllableState","handleSetActiveTab","useCallback","value","triggerListRef","activeIndicatorRef","triggers","triggersOutOfView","addTrigger","useTabTriggers","jsxs","RadixTabs","styles","_a","jsx","trigger","createElement","Dropdown","Button","IconDotsHorizontal","TabsTab","disabled","TabsTrigger","useContext","localRef","useRef","useEffect","TabsContent","itemProps","Tabs","forwardRef"],"mappings":"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"}

package/dist/fondue-components28.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components66.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components67.js";
 import { sv as e } from "./fondue-components27.js";
 const o = e({
   base: `tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium tw-box-border ${t}`,

package/dist/fondue-components31.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components66.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components67.js";
 import { sv as e } from "./fondue-components27.js";
 const s = e({
   base: `tw-peer tw-relative tw-inline-flex tw-bg-base tw-text-white tw-shrink-0 tw-rounded tw-border tw-border-line-x-strong group-hover:tw-border-line-xx-strong hover:tw-border-line-xx-strong tw-transition-colors data-[state="checked"]:tw-border-transparent data-[state="indeterminate"]:tw-border-transparent disabled:tw-border-line-strong disabled:tw-bg-base disabled:tw-cursor-not-allowed data-[state="checked"]:disabled:tw-bg-box-disabled-strong ${t}`,

package/dist/fondue-components33.js

@@ -1,7 +1,7 @@
 import { jsxs as s, jsx as a, Fragment as p } from "react/jsx-runtime";
 import { IconDroplet as h, IconTrashBin as N, IconCaretDown as f } from "@frontify/fondue-icons";
 import { forwardRef as b } from "react";
-import e from "./fondue-components67.js";
+import e from "./fondue-components66.js";
 import { colorToCss as I } from "./fondue-components36.js";
 const o = ({
   id: c,

package/dist/fondue-components38.js

@@ -1,18 +1,18 @@
-const n = "_content_1dnjb_6", t = "_header_1dnjb_50", e = "_footer_1dnjb_51", o = "_body_1dnjb_52", d = "_underlay_1dnjb_77", _ = "_sideContent_1dnjb_90", s = {
-  content: n,
-  header: t,
-  footer: e,
-  body: o,
-  underlay: d,
-  sideContent: _
+const t = "_content_lmry4_6", e = "_header_lmry4_50", o = "_footer_lmry4_51", n = "_body_lmry4_52", _ = "_underlay_lmry4_176", r = "_sideContent_lmry4_189", d = {
+  content: t,
+  header: e,
+  footer: o,
+  body: n,
+  underlay: _,
+  sideContent: r
 };
 export {
-  o as body,
-  n as content,
-  s as default,
-  e as footer,
-  t as header,
-  _ as sideContent,
-  d as underlay
+  n as body,
+  t as content,
+  d as default,
+  o as footer,
+  e as header,
+  r as sideContent,
+  _ as underlay
 };
 //# sourceMappingURL=fondue-components38.js.map

package/dist/fondue-components57.js

@@ -1,16 +1,16 @@
-const t = "_root_2ajx7_5", _ = "_small_2ajx7_33", a = "_medium_2ajx7_37", o = "_large_2ajx7_41", m = "_thumb_2ajx7_55", s = {
-  root: t,
-  small: _,
-  medium: a,
+const m = "_root_hrjmg_5", t = "_small_hrjmg_33", _ = "_medium_hrjmg_37", o = "_large_hrjmg_41", r = "_thumb_hrjmg_55", s = {
+  root: m,
+  small: t,
+  medium: _,
   large: o,
-  thumb: m
+  thumb: r
 };
 export {
   s as default,
   o as large,
-  a as medium,
-  t as root,
-  _ as small,
-  m as thumb
+  _ as medium,
+  m as root,
+  t as small,
+  r as thumb
 };
 //# sourceMappingURL=fondue-components57.js.map

package/dist/fondue-components63.js

@@ -1,18 +1,18 @@
-const t = "_root_ieias_5", i = "_triggerList_ieias_14", r = "_triggerListWrapper_ieias_28", e = "_trigger_ieias_14", s = "_content_ieias_78", o = "_activeIndicator_ieias_82", g = {
+const t = "_root_1msyd_5", r = "_triggerList_1msyd_14", s = "_triggerListWrapper_1msyd_28", e = "_trigger_1msyd_14", i = "_content_1msyd_78", o = "_activeIndicator_1msyd_91", g = {
   root: t,
-  triggerList: i,
-  triggerListWrapper: r,
+  triggerList: r,
+  triggerListWrapper: s,
   trigger: e,
-  content: s,
+  content: i,
   activeIndicator: o
 };
 export {
   o as activeIndicator,
-  s as content,
+  i as content,
   g as default,
   t as root,
   e as trigger,
-  i as triggerList,
-  r as triggerListWrapper
+  r as triggerList,
+  s as triggerListWrapper
 };
 //# sourceMappingURL=fondue-components63.js.map

package/dist/fondue-components64.js

@@ -1,19 +1,19 @@
-const o = "_root_1w6r3_5", t = "_input_1w6r3_59", s = "_slot_1w6r3_82", _ = "_iconSuccess_1w6r3_132", n = "_iconError_1w6r3_140", r = "_loadingStatus_1w6r3_148", c = "_spin_1w6r3_1", i = {
+const o = "_root_7i0v6_5", t = "_input_7i0v6_59", s = "_slot_7i0v6_82", _ = "_iconSuccess_7i0v6_132", i = "_iconError_7i0v6_141", n = "_loadingStatus_7i0v6_155", c = "_spin_7i0v6_1", r = {
   root: o,
   input: t,
   slot: s,
   iconSuccess: _,
-  iconError: n,
-  loadingStatus: r,
+  iconError: i,
+  loadingStatus: n,
   spin: c,
-  "tw-dark": "_tw-dark_1w6r3_180"
+  "tw-dark": "_tw-dark_7i0v6_187"
 };
 export {
-  i as default,
-  n as iconError,
+  r as default,
+  i as iconError,
   _ as iconSuccess,
   t as input,
-  r as loadingStatus,
+  n as loadingStatus,
   o as root,
   s as slot,
   c as spin

package/dist/fondue-components66.js

@@ -1,5 +1,18 @@
-const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
+const o = "_root_1nv86_5", t = "_button_1nv86_56", c = "_colorIndicator_1nv86_69", n = "_actions_1nv86_75", _ = "_clear_1nv86_85", r = "_caret_1nv86_98", a = {
+  root: o,
+  button: t,
+  colorIndicator: c,
+  actions: n,
+  clear: _,
+  caret: r
+};
 export {
-  t as FOCUS_OUTLINE
+  n as actions,
+  t as button,
+  r as caret,
+  _ as clear,
+  c as colorIndicator,
+  a as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components66.js.map

package/dist/fondue-components66.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components66.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}
+{"version":3,"file":"fondue-components66.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/fondue-components67.js

@@ -1,18 +1,5 @@
-const o = "_root_1nv86_5", t = "_button_1nv86_56", c = "_colorIndicator_1nv86_69", n = "_actions_1nv86_75", _ = "_clear_1nv86_85", r = "_caret_1nv86_98", a = {
-  root: o,
-  button: t,
-  colorIndicator: c,
-  actions: n,
-  clear: _,
-  caret: r
-};
+const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
 export {
-  n as actions,
-  t as button,
-  r as caret,
-  _ as clear,
-  c as colorIndicator,
-  a as default,
-  o as root
+  t as FOCUS_OUTLINE
 };
 //# sourceMappingURL=fondue-components67.js.map

package/dist/fondue-components67.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components67.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"fondue-components67.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}

package/dist/fondue-components7.js

@@ -1,124 +1,137 @@
-import { jsx as a, jsxs as T } from "react/jsx-runtime";
+import { jsx as o, jsxs as T } from "react/jsx-runtime";
 import { IconCross as F } from "@frontify/fondue-icons";
-import * as i from "@radix-ui/react-dialog";
-import { createContext as M, forwardRef as l, useContext as S } from "react";
+import * as d from "@radix-ui/react-dialog";
+import { createContext as M, forwardRef as s, useContext as S } from "react";
 import { addAutoFocusAttribute as B, addShowFocusRing as H } from "./fondue-components37.js";
-import r from "./fondue-components38.js";
-const n = M({ isModal: !1 }), g = ({ children: t, ...o }) => /* @__PURE__ */ a(n.Provider, { value: { isModal: o.modal ?? !1 }, children: /* @__PURE__ */ a(i.Root, { ...o, children: t }) });
-g.displayName = "Dialog.Root";
-const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-dialog-trigger", ...d }, s) => /* @__PURE__ */ a(
-  i.Trigger,
+import l from "./fondue-components38.js";
+const g = M({ isModal: !1 }), u = ({ children: a, ...t }) => /* @__PURE__ */ o(g.Provider, { value: { isModal: t.modal ?? !1 }, children: /* @__PURE__ */ o(d.Root, { ...t, children: a }) });
+u.displayName = "Dialog.Root";
+const c = ({ asChild: a = !0, children: t, "data-test-id": e = "fondue-dialog-trigger", ...i }, r) => /* @__PURE__ */ o(
+  d.Trigger,
   {
     onMouseDown: B,
     "data-auto-focus-visible": "true",
     "data-auto-focus-trigger": !0,
     "data-test-id": e,
-    asChild: t,
-    ref: s,
-    ...d,
-    children: o
+    asChild: a,
+    ref: r,
+    ...i,
+    children: t
   }
 );
 c.displayName = "Dialog.Trigger";
-const j = ({ children: t, showUnderlay: o }) => {
-  const { isModal: e } = S(n);
-  return e ? /* @__PURE__ */ a(i.Overlay, { "data-visible": o, className: r.underlay, children: t }) : /* @__PURE__ */ a("div", { className: r.underlay, "data-visible": o, children: t });
-}, u = ({
-  maxWidth: t = "800px",
-  minWidth: o = "400px",
+const j = ({ children: a, showUnderlay: t }) => {
+  const { isModal: e } = S(g);
+  return e ? /* @__PURE__ */ o(d.Overlay, { "data-visible": t, className: l.underlay, children: a }) : /* @__PURE__ */ o("div", { className: l.underlay, "data-visible": t, children: a });
+}, m = ({
+  maxWidth: a = "800px",
+  minWidth: t = "400px",
   minHeight: e = "200px",
-  padding: d = "compact",
-  verticalAlign: s = "center",
-  "data-test-id": h = "fondue-dialog-content",
+  padding: i = "compact",
+  verticalAlign: r = "center",
+  "data-test-id": n = "fondue-dialog-content",
   showUnderlay: v = !1,
-  children: x,
-  rounded: b = !0,
+  rounded: x = !0,
+  children: b,
   ...w
-}, R) => /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ a(j, { showUnderlay: v, children: /* @__PURE__ */ a(
-  i.Content,
+}, R) => /* @__PURE__ */ o(d.Portal, { children: /* @__PURE__ */ o(j, { showUnderlay: v, children: /* @__PURE__ */ o(
+  d.Content,
   {
     style: {
-      "--dialog-max-width": t,
-      "--dialog-min-width": o,
+      "--dialog-max-width": a,
+      "--dialog-min-width": t,
       "--dialog-min-height": e
     },
     ref: R,
-    className: r.content,
+    className: l.content,
     onFocus: H,
-    "data-dialog-rounded": b,
-    "data-dialog-spacing": d,
-    "data-test-id": h,
-    "data-dialog-vertical-align": s,
+    "data-dialog-padding": i,
+    "data-dialog-rounded": x,
+    "data-test-id": n,
+    "data-dialog-vertical-align": r,
     ...w,
-    children: x
+    children: b
   }
 ) }) });
-u.displayName = "Dialog.Content";
-const m = ({
-  children: t,
-  showBorder: o = !0,
+m.displayName = "Dialog.Content";
+const p = ({
+  padding: a,
+  showBorder: t = !0,
   showCloseButton: e = !0,
-  "data-test-id": d = "fondue-dialog-header"
-}, s) => /* @__PURE__ */ T(
+  children: i,
+  "data-test-id": r = "fondue-dialog-header"
+}, n) => /* @__PURE__ */ T(
   "div",
   {
-    "data-test-id": d,
-    ref: s,
-    className: r.header,
-    "data-show-border": o,
+    "data-test-id": r,
+    ref: n,
+    className: l.header,
+    "data-dialog-header-padding": a,
+    "data-show-border": t,
     "data-dialog-layout-component": !0,
     children: [
-      /* @__PURE__ */ a("div", { children: t }),
-      e && /* @__PURE__ */ a(i.Close, { role: "button", "data-test-id": `${d}-close`, className: "tw-cursor-pointer", children: /* @__PURE__ */ a(F, { size: 20 }) })
+      /* @__PURE__ */ o("div", { children: i }),
+      e && /* @__PURE__ */ o(d.Close, { role: "button", "data-test-id": `${r}-close`, className: "tw-cursor-pointer", children: /* @__PURE__ */ o(F, { size: 20 }) })
     ]
   }
 );
-m.displayName = "Dialog.Header";
-const p = ({ showBorder: t = !0, children: o, "data-test-id": e = "fondue-dialog-footer" }, d) => /* @__PURE__ */ a(
+p.displayName = "Dialog.Header";
+const D = ({ padding: a, showBorder: t = !0, children: e, "data-test-id": i = "fondue-dialog-footer" }, r) => /* @__PURE__ */ o(
   "div",
   {
-    "data-test-id": e,
-    ref: d,
-    className: r.footer,
+    "data-test-id": i,
+    ref: r,
+    className: l.footer,
+    "data-dialog-footer-padding": a,
     "data-show-border": t,
     "data-dialog-layout-component": !0,
-    children: o
+    children: e
+  }
+);
+D.displayName = "Dialog.Footer";
+const y = ({ padding: a, children: t, "data-test-id": e = "fondue-dialog-body" }, i) => /* @__PURE__ */ o(
+  "div",
+  {
+    "data-test-id": e,
+    ref: i,
+    className: l.body,
+    "data-dialog-body-padding": a,
+    "data-dialog-layout-component": !0,
+    children: t
   }
 );
-p.displayName = "Dialog.Footer";
-const D = ({ children: t, "data-test-id": o = "fondue-dialog-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: r.body, "data-dialog-layout-component": !0, children: t });
-D.displayName = "Dialog.Body";
-const y = ({ children: t, "data-test-id": o = "fondue-dialog-side-content" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: r.sideContent, "data-dialog-layout-component": !0, children: t });
-y.displayName = "Dialog.SideContent";
-const f = ({ children: t }) => /* @__PURE__ */ a(i.Close, { asChild: !0, children: t });
-f.displayName = "Dialog.Close";
-const C = ({ children: t, asChild: o }) => /* @__PURE__ */ a(i.Title, { asChild: o, children: t });
-C.displayName = "Dialog.Title";
-const N = ({ children: t, asChild: o }) => /* @__PURE__ */ a(i.Description, { asChild: o, children: t });
-N.displayName = "Dialog.Description";
+y.displayName = "Dialog.Body";
+const f = ({ children: a, "data-test-id": t = "fondue-dialog-side-content" }, e) => /* @__PURE__ */ o("div", { "data-test-id": t, ref: e, className: l.sideContent, "data-dialog-layout-component": !0, children: a });
+f.displayName = "Dialog.SideContent";
+const C = ({ children: a }) => /* @__PURE__ */ o(d.Close, { asChild: !0, children: a });
+C.displayName = "Dialog.Close";
+const N = ({ children: a, asChild: t }) => /* @__PURE__ */ o(d.Title, { asChild: t, children: a });
+N.displayName = "Dialog.Title";
+const h = ({ children: a, asChild: t }) => /* @__PURE__ */ o(d.Description, { asChild: t, children: a });
+h.displayName = "Dialog.Description";
 const k = {
-  Root: g,
-  Title: C,
-  Description: N,
-  Close: f,
-  Trigger: l(c),
-  Content: l(u),
-  Header: l(m),
-  Footer: l(p),
-  Body: l(D),
-  SideContent: l(y)
+  Root: u,
+  Title: N,
+  Description: h,
+  Close: C,
+  Trigger: s(c),
+  Content: s(m),
+  Header: s(p),
+  Footer: s(D),
+  Body: s(y),
+  SideContent: s(f)
 };
 export {
   k as Dialog,
-  D as DialogBody,
-  f as DialogClose,
-  u as DialogContent,
-  N as DialogDescription,
-  p as DialogFooter,
-  m as DialogHeader,
-  g as DialogRoot,
-  y as DialogSideContent,
-  C as DialogTitle,
+  y as DialogBody,
+  C as DialogClose,
+  m as DialogContent,
+  h as DialogDescription,
+  D as DialogFooter,
+  p as DialogHeader,
+  u as DialogRoot,
+  f as DialogSideContent,
+  N as DialogTitle,
   c as DialogTrigger
 };
 //# sourceMappingURL=fondue-components7.js.map