@frontify/fondue-components 5.1.1 → 5.1.3

package/dist/fondue-components.js

@@ -2,13 +2,13 @@
 import { Box as t } from "./fondue-components3.js";
 import { Button as x } from "./fondue-components4.js";
 import { Checkbox as f } from "./fondue-components5.js";
-import { ColorPicker as l } from "./fondue-components6.js";
-import { Dialog as a } from "./fondue-components7.js";
+import { ColorPicker as i } from "./fondue-components6.js";
+import { Dialog as n } from "./fondue-components7.js";
 import { Divider as d } from "./fondue-components8.js";
 import { Dropdown as b } from "./fondue-components9.js";
-import { Flex as u } from "./fondue-components10.js";
-import { Flyout as C } from "./fondue-components11.js";
-import { Grid as T } from "./fondue-components12.js";
+import { Flex as g } from "./fondue-components10.js";
+import { Flyout as B } from "./fondue-components11.js";
+import { Grid as D } from "./fondue-components12.js";
 import { Label as k } from "./fondue-components13.js";
 import { LoadingBar as F } from "./fondue-components14.js";
 import { ScrollArea as s } from "./fondue-components15.js";
@@ -17,20 +17,21 @@ import { SegmentedControl as G } from "./fondue-components17.js";
 import { Select as P } from "./fondue-components18.js";
 import { Slider as q } from "./fondue-components19.js";
 import { Switch as E } from "./fondue-components20.js";
-import { Tabs as J } from "./fondue-components21.js";
-import { TextInput as M } from "./fondue-components22.js";
-import { Tooltip as O } from "./fondue-components23.js";
+import { Table as J } from "./fondue-components21.js";
+import { Tabs as M } from "./fondue-components22.js";
+import { TextInput as O } from "./fondue-components23.js";
+import { Tooltip as R } from "./fondue-components24.js";
 export {
   t as Box,
   x as Button,
   f as Checkbox,
-  l as ColorPicker,
-  a as Dialog,
+  i as ColorPicker,
+  n as Dialog,
   d as Divider,
   b as Dropdown,
-  u as Flex,
-  C as Flyout,
-  T as Grid,
+  g as Flex,
+  B as Flyout,
+  D as Grid,
   k as Label,
   F as LoadingBar,
   s as ScrollArea,
@@ -39,8 +40,9 @@ export {
   P as Select,
   q as Slider,
   E as Switch,
-  J as Tabs,
-  M as TextInput,
-  O as Tooltip
+  J as Table,
+  M as Tabs,
+  O as TextInput,
+  R as Tooltip
 };
 //# 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,6 +1,6 @@
 import { jsx as n } from "react/jsx-runtime";
-import { propsToCssVariables as y } from "./fondue-components24.js";
-import m from "./fondue-components41.js";
+import { propsToCssVariables as y } from "./fondue-components25.js";
+import m from "./fondue-components42.js";
 const f = ({
   as: a = "div",
   "data-test-id": e = "fondue-flex",

package/dist/fondue-components11.js

@@ -2,12 +2,12 @@ import { jsx as a, jsxs as x } from "react/jsx-runtime";
 import { IconCross as C } from "@frontify/fondue-icons";
 import * as r from "@radix-ui/react-popover";
 import { forwardRef as s, useRef as b } from "react";
-import { usePreventDropdownOverflow as A } from "./fondue-components39.js";
-import { addAutoFocusAttribute as H, syncRefs as l, addShowFocusRing as P } from "./fondue-components36.js";
-import u from "./fondue-components42.js";
-const c = ({ children: t, ...o }) => /* @__PURE__ */ a(r.Root, { ...o, children: t });
-c.displayName = "Flyout.Root";
-const y = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger" }, d) => /* @__PURE__ */ a(
+import { usePreventDropdownOverflow as A } from "./fondue-components40.js";
+import { addAutoFocusAttribute as H, syncRefs as c, addShowFocusRing as P } from "./fondue-components37.js";
+import u from "./fondue-components43.js";
+const y = ({ children: t, ...o }) => /* @__PURE__ */ a(r.Root, { ...o, children: t });
+y.displayName = "Flyout.Root";
+const f = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...d }, n) => /* @__PURE__ */ a(
   r.Trigger,
   {
     onMouseDown: H,
@@ -15,39 +15,40 @@ const y = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-tr
     "data-auto-focus-trigger": !0,
     "data-test-id": e,
     asChild: t,
-    ref: d,
+    ref: n,
+    ...d,
     children: o
   }
 );
-y.displayName = "Flyout.Trigger";
-const f = ({
+f.displayName = "Flyout.Trigger";
+const m = ({
   align: t = "start",
   maxWidth: o = "360px",
   padding: e = "compact",
   rounded: d = "medium",
-  width: g = "fit-content",
+  width: n = "fit-content",
   shadow: N = "medium",
   "data-test-id": h = "fondue-flyout-content",
   children: R,
   ...v
-}, n) => {
+}, l) => {
   const i = b(null), { setMaxHeight: w } = A(i);
   return /* @__PURE__ */ a(r.Portal, { children: /* @__PURE__ */ a(
     r.Content,
     {
       style: {
         "--flyout-max-width": o,
-        "--flyout-width": g
+        "--flyout-width": n
       },
       ref: i,
       align: t,
       collisionPadding: 8,
       sideOffset: 8,
       onOpenAutoFocus: () => {
-        w(), l(i, n);
+        w(), c(i, l);
       },
       onCloseAutoFocus: () => {
-        l(i, n);
+        c(i, l);
       },
       className: u.root,
       "data-flyout-spacing": e,
@@ -60,31 +61,31 @@ const f = ({
     }
   ) });
 };
-f.displayName = "Flyout.Content";
-const m = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, d) => /* @__PURE__ */ x("div", { "data-test-id": e, ref: d, className: u.header, children: [
+m.displayName = "Flyout.Content";
+const p = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, d) => /* @__PURE__ */ x("div", { "data-test-id": e, ref: d, className: u.header, children: [
   /* @__PURE__ */ a("div", { children: o }),
   t && /* @__PURE__ */ a(r.Close, { role: "button", "data-test-id": `${e}-close`, className: u.close, children: /* @__PURE__ */ a(C, { size: 20 }) })
 ] });
-m.displayName = "Flyout.Header";
-const p = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: u.footer, children: t });
-p.displayName = "Flyout.Footer";
-const F = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: u.body, children: t });
-F.displayName = "Flyout.Body";
+p.displayName = "Flyout.Header";
+const F = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: u.footer, children: t });
+F.displayName = "Flyout.Footer";
+const g = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: u.body, children: t });
+g.displayName = "Flyout.Body";
 const z = {
-  Root: c,
-  Trigger: s(y),
-  Content: s(f),
-  Header: s(m),
-  Footer: s(p),
-  Body: s(F)
+  Root: y,
+  Trigger: s(f),
+  Content: s(m),
+  Header: s(p),
+  Footer: s(F),
+  Body: s(g)
 };
 export {
   z as Flyout,
-  F as FlyoutBody,
-  f as FlyoutContent,
-  p as FlyoutFooter,
-  m as FlyoutHeader,
-  c as FlyoutRoot,
-  y as FlyoutTrigger
+  g as FlyoutBody,
+  m as FlyoutContent,
+  F as FlyoutFooter,
+  p as FlyoutHeader,
+  y as FlyoutRoot,
+  f as FlyoutTrigger
 };
 //# sourceMappingURL=fondue-components11.js.map

package/dist/fondue-components11.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components11.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, useRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { addAutoFocusAttribute, addShowFocusRing, syncRefs } from '#/utilities/domUtilities';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the flyout\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger' }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef(null);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content\n                style={\n                    {\n                        '--flyout-max-width': maxWidth,\n                        '--flyout-width': width,\n                    } as CSSProperties\n                }\n                ref={localRef}\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                onOpenAutoFocus={() => {\n                    setMaxHeight();\n                    syncRefs(localRef, ref);\n                }}\n                onCloseAutoFocus={() => {\n                    syncRefs(localRef, ref);\n                }}\n                className={styles.root}\n                data-flyout-spacing={padding}\n                data-rounded={rounded}\n                data-shadow={shadow}\n                data-test-id={dataTestId}\n                onFocus={addShowFocusRing}\n                {...props}\n            >\n                {children}\n            </RadixPopover.Content>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header' }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className={styles.close}>\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body' }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} data-flyout-spacing=\"compact\" className={styles.body}>\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","localRef","useRef","setMaxHeight","usePreventDropdownOverflow","syncRefs","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":";;;;;;;AA6BO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAa,MAAb,EAAmB,GAAGD,GAAQ,UAAAD,GAAS;AAEnDD,EAAW,cAAc;AAYZ,MAAAI,IAAgB,CACzB,EAAE,SAAAC,IAAU,IAAM,UAAAJ,GAAU,gBAAgBK,IAAa,wBAAwB,GACjFC,MAGI,gBAAAC;AAAA,EAACL,EAAa;AAAA,EAAb;AAAA,IACG,aAAaM;AAAA,IACb,2BAAwB;AAAA,IACxB,2BAAuB;AAAA,IACvB,gBAAcH;AAAA,IACd,SAAAD;AAAA,IACA,KAAAE;AAAA,IAEC,UAAAN;AAAA,EAAA;AACL;AAGRG,EAAc,cAAc;AA0CrB,MAAMM,IAAgB,CACzB;AAAA,EACI,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,gBAAgBV,IAAa;AAAA,EAC7B,UAAAL;AAAA,EACA,GAAGC;AACP,GACAK,MACC;AACK,QAAAU,IAAWC,EAAO,IAAI,GAEtB,EAAE,cAAAC,EAAA,IAAiBC,EAA2BH,CAAQ;AAGxD,SAAA,gBAAAT,EAACL,EAAa,QAAb,EACG,UAAA,gBAAAK;AAAA,IAACL,EAAa;AAAA,IAAb;AAAA,MACG,OACI;AAAA,QACI,sBAAsBS;AAAA,QACtB,kBAAkBG;AAAA,MACtB;AAAA,MAEJ,KAAKE;AAAA,MACL,OAAAN;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,iBAAiB,MAAM;AACN,QAAAQ,EAAA,GACbE,EAASJ,GAAUV,CAAG;AAAA,MAC1B;AAAA,MACA,kBAAkB,MAAM;AACpB,QAAAc,EAASJ,GAAUV,CAAG;AAAA,MAC1B;AAAA,MACA,WAAWe,EAAO;AAAA,MAClB,uBAAqBT;AAAA,MACrB,gBAAcC;AAAA,MACd,eAAaE;AAAA,MACb,gBAAcV;AAAA,MACd,SAASiB;AAAA,MACR,GAAGrB;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA,GAET;AAER;AACAS,EAAc,cAAc;AAYf,MAAAc,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAAxB,GAAU,gBAAgBK,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWe,EAAO,QACvD,UAAA;AAAA,EAAA,gBAAAd,EAAC,SAAK,UAAAP,GAAS;AAAA,EACdwB,KACI,gBAAAjB,EAAAL,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGG,CAAU,UAAU,WAAWgB,EAAO,OACrF,4BAACI,GAAU,EAAA,MAAM,IAAI,EACzB,CAAA;AAAA,GAER;AAGRF,EAAa,cAAc;AAId,MAAAG,IAAe,CACxB,EAAE,UAAA1B,GAAU,gBAAgBK,IAAa,0BACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWe,EAAO,QACtD,UAAArB,GACL;AAGR0B,EAAa,cAAc;AAId,MAAAC,IAAa,CACtB,EAAE,UAAA3B,GAAU,gBAAgBK,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWe,EAAO,MACpF,UAAArB,EACL,CAAA;AAGR2B,EAAW,cAAc;AAElB,MAAMC,IAAS;AAAA,EAClB,MAAM7B;AAAA,EACN,SAAS8B,EAAkD1B,CAAa;AAAA,EACxE,SAAS0B,EAA+CpB,CAAa;AAAA,EACrE,QAAQoB,EAA8CN,CAAY;AAAA,EAClE,QAAQM,EAA8CH,CAAY;AAAA,EAClE,MAAMG,EAA4CF,CAAU;AAChE;"}
+{"version":3,"file":"fondue-components11.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, useRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { addAutoFocusAttribute, addShowFocusRing, syncRefs } from '#/utilities/domUtilities';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the flyout\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef(null);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content\n                style={\n                    {\n                        '--flyout-max-width': maxWidth,\n                        '--flyout-width': width,\n                    } as CSSProperties\n                }\n                ref={localRef}\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                onOpenAutoFocus={() => {\n                    setMaxHeight();\n                    syncRefs(localRef, ref);\n                }}\n                onCloseAutoFocus={() => {\n                    syncRefs(localRef, ref);\n                }}\n                className={styles.root}\n                data-flyout-spacing={padding}\n                data-rounded={rounded}\n                data-shadow={shadow}\n                data-test-id={dataTestId}\n                onFocus={addShowFocusRing}\n                {...props}\n            >\n                {children}\n            </RadixPopover.Content>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header' }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className={styles.close}>\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body' }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} data-flyout-spacing=\"compact\" className={styles.body}>\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","localRef","useRef","setMaxHeight","usePreventDropdownOverflow","syncRefs","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":";;;;;;;AA6BO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAa,MAAb,EAAmB,GAAGD,GAAQ,UAAAD,GAAS;AAEnDD,EAAW,cAAc;AAYlB,MAAMI,IAAgB,CACzB,EAAE,SAAAC,IAAU,IAAM,UAAAJ,GAAU,gBAAgBK,IAAa,yBAAyB,GAAGJ,EAAM,GAC3FK,MAGI,gBAAAC;AAAA,EAACL,EAAa;AAAA,EAAb;AAAA,IACG,aAAaM;AAAA,IACb,2BAAwB;AAAA,IACxB,2BAAuB;AAAA,IACvB,gBAAcH;AAAA,IACd,SAAAD;AAAA,IACA,KAAAE;AAAA,IACC,GAAGL;AAAA,IAEH,UAAAD;AAAA,EAAA;AACL;AAGRG,EAAc,cAAc;AA0CrB,MAAMM,IAAgB,CACzB;AAAA,EACI,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,gBAAgBV,IAAa;AAAA,EAC7B,UAAAL;AAAA,EACA,GAAGC;AACP,GACAK,MACC;AACK,QAAAU,IAAWC,EAAO,IAAI,GAEtB,EAAE,cAAAC,EAAA,IAAiBC,EAA2BH,CAAQ;AAGxD,SAAA,gBAAAT,EAACL,EAAa,QAAb,EACG,UAAA,gBAAAK;AAAA,IAACL,EAAa;AAAA,IAAb;AAAA,MACG,OACI;AAAA,QACI,sBAAsBS;AAAA,QACtB,kBAAkBG;AAAA,MACtB;AAAA,MAEJ,KAAKE;AAAA,MACL,OAAAN;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,iBAAiB,MAAM;AACN,QAAAQ,EAAA,GACbE,EAASJ,GAAUV,CAAG;AAAA,MAC1B;AAAA,MACA,kBAAkB,MAAM;AACpB,QAAAc,EAASJ,GAAUV,CAAG;AAAA,MAC1B;AAAA,MACA,WAAWe,EAAO;AAAA,MAClB,uBAAqBT;AAAA,MACrB,gBAAcC;AAAA,MACd,eAAaE;AAAA,MACb,gBAAcV;AAAA,MACd,SAASiB;AAAA,MACR,GAAGrB;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA,GAET;AAER;AACAS,EAAc,cAAc;AAYf,MAAAc,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAAxB,GAAU,gBAAgBK,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWe,EAAO,QACvD,UAAA;AAAA,EAAA,gBAAAd,EAAC,SAAK,UAAAP,GAAS;AAAA,EACdwB,KACI,gBAAAjB,EAAAL,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGG,CAAU,UAAU,WAAWgB,EAAO,OACrF,4BAACI,GAAU,EAAA,MAAM,IAAI,EACzB,CAAA;AAAA,GAER;AAGRF,EAAa,cAAc;AAId,MAAAG,IAAe,CACxB,EAAE,UAAA1B,GAAU,gBAAgBK,IAAa,0BACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWe,EAAO,QACtD,UAAArB,GACL;AAGR0B,EAAa,cAAc;AAId,MAAAC,IAAa,CACtB,EAAE,UAAA3B,GAAU,gBAAgBK,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWe,EAAO,MACpF,UAAArB,EACL,CAAA;AAGR2B,EAAW,cAAc;AAElB,MAAMC,IAAS;AAAA,EAClB,MAAM7B;AAAA,EACN,SAAS8B,EAAkD1B,CAAa;AAAA,EACxE,SAAS0B,EAA+CpB,CAAa;AAAA,EACrE,QAAQoB,EAA8CN,CAAY;AAAA,EAClE,QAAQM,EAA8CH,CAAY;AAAA,EAClE,MAAMG,EAA4CF,CAAU;AAChE;"}

package/dist/fondue-components12.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
-import { propsToCssVariables as y } from "./fondue-components24.js";
-import n from "./fondue-components43.js";
+import { propsToCssVariables as y } from "./fondue-components25.js";
+import n from "./fondue-components44.js";
 const f = ({
   as: a = "div",
   "data-test-id": i = "fondue-grid",

package/dist/fondue-components13.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import * as d from "@radix-ui/react-label";
 import { forwardRef as i } from "react";
-import { cn as n } from "./fondue-components26.js";
+import { cn as n } from "./fondue-components27.js";
 const s = ({ className: e, "data-test-id": a = "fondue-label", ...t }, r) => /* @__PURE__ */ o(
   d.Root,
   {

package/dist/fondue-components14.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-components44.js";
+import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components45.js";
 const p = m(
   ({
     value: a,

package/dist/fondue-components15.js

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

package/dist/fondue-components16.js

@@ -1,6 +1,6 @@
 import { jsx as b } from "react/jsx-runtime";
-import { propsToCssVariables as n } from "./fondue-components24.js";
-import c from "./fondue-components46.js";
+import { propsToCssVariables as n } from "./fondue-components25.js";
+import c from "./fondue-components47.js";
 const m = ({
   "data-test-id": a = "fondue-section",
   children: e,

package/dist/fondue-components17.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import * as i from "@radix-ui/react-toggle-group";
 import { forwardRef as n } from "react";
-import { useControllableState as N } from "./fondue-components47.js";
-import e from "./fondue-components48.js";
+import { useControllableState as N } from "./fondue-components48.js";
+import e from "./fondue-components49.js";
 const d = ({ children: a, value: o, defaultValue: s, onValueChange: p, ...m }, f) => {
   const [g, C] = N({
     prop: o,

package/dist/fondue-components18.js

@@ -4,12 +4,12 @@ import * as S from "@radix-ui/react-popover";
 import { Slot as H } from "@radix-ui/react-slot";
 import { useSelect as T } from "downshift";
 import { forwardRef as V, useRef as $, useState as A } from "react";
-import { ForwardedRefCombobox as q } from "./fondue-components49.js";
-import { ForwardedRefSelectItem as J, ForwardedRefSelectItemGroup as K } from "./fondue-components50.js";
-import { SelectMenu as L } from "./fondue-components51.js";
-import { ForwardedRefSelectSlot as Q } from "./fondue-components52.js";
-import a from "./fondue-components53.js";
-import { useSelectData as U } from "./fondue-components54.js";
+import { ForwardedRefCombobox as q } from "./fondue-components50.js";
+import { ForwardedRefSelectItem as J, ForwardedRefSelectItemGroup as K } from "./fondue-components51.js";
+import { SelectMenu as L } from "./fondue-components52.js";
+import { ForwardedRefSelectSlot as Q } from "./fondue-components53.js";
+import a from "./fondue-components54.js";
+import { useSelectData as U } from "./fondue-components55.js";
 const g = ({
   children: h,
   onSelect: i,

package/dist/fondue-components19.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-components55.js";
+import r from "./fondue-components56.js";
 const g = ({
   value: a,
   defaultValue: n = [0],

package/dist/fondue-components20.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-components26.js";
-import t from "./fondue-components56.js";
+import { cn as f } from "./fondue-components27.js";
+import t from "./fondue-components57.js";
 const n = ({
   value: a,
   defaultValue: i,

package/dist/fondue-components21.js

@@ -1,120 +1,139 @@
-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 * as d from "@radix-ui/react-tabs";
-import { useControllableState as O } from "./fondue-components47.js";
-import { Button as V } from "./fondue-components4.js";
-import { Dropdown as l } from "./fondue-components9.js";
-import { useTabTriggers as q } from "./fondue-components57.js";
-import r from "./fondue-components58.js";
-const b = x({
-  value: "",
-  disabled: !1
-}), w = x({
-  addTrigger: () => {
+import { jsx as n, jsxs as k } from "react/jsx-runtime";
+import { IconArrowUp as B, IconArrowDown as h, IconArrowBidirectional as A } from "@frontify/fondue-icons";
+import { forwardRef as u, useRef as y, useMemo as K } from "react";
+import { useSyncRefs as p } from "./fondue-components58.js";
+import { useTextTruncation as w } from "./fondue-components59.js";
+import o from "./fondue-components60.js";
+import { handleKeyDown as z } from "./fondue-components61.js";
+const N = u(
+  ({ layout: e = "auto", sticky: a, children: l, ...r }, t) => /* @__PURE__ */ n("div", { onKeyDown: z, role: "grid", tabIndex: -1, children: /* @__PURE__ */ n("table", { ref: t, className: o.table, "data-layout": e, "data-sticky": a, ...r, children: l }) })
+);
+N.displayName = "Table.Root";
+const g = u(({ children: e }, a) => /* @__PURE__ */ n("caption", { ref: a, className: o.caption, children: e }));
+g.displayName = "Table.Caption";
+const R = u(
+  ({ children: e, "aria-label": a, "aria-busy": l }, r) => /* @__PURE__ */ n("thead", { ref: r, className: o.header, "aria-label": a, "aria-busy": l, children: e })
+);
+R.displayName = "Table.Header";
+const C = u(
+  ({
+    noShrink: e = !1,
+    truncate: a = !1,
+    align: l = "left",
+    scope: r = "col",
+    sortTranslations: t,
+    sortDirection: d,
+    colSpan: c,
+    width: b,
+    onSortChange: i,
+    children: s
+  }, m) => {
+    const f = y(null);
+    p(f, m), w(f);
+    const x = K(() => typeof s == "string" ? d === "ascending" ? (t == null ? void 0 : t.sortDescending) ?? `Sort by ${s} descending` : (t == null ? void 0 : t.sortAscending) ?? `Sort by ${s} ascending` : d === "ascending" ? "Sort descending" : "Sort ascending", [s, d, t]), H = () => {
+      if (!i)
+        return;
+      i(d === void 0 || d === "descending" ? "ascending" : "descending");
+    };
+    return /* @__PURE__ */ n(
+      "th",
+      {
+        ref: f,
+        style: { width: b },
+        className: o.headerCell,
+        scope: r,
+        colSpan: c,
+        "data-align": l,
+        "data-truncate": a,
+        "data-no-shrink": e,
+        "data-sortable": !!i,
+        "aria-sort": i ? d || "none" : void 0,
+        children: i ? /* @__PURE__ */ k(
+          "button",
+          {
+            className: o.sortButton,
+            "aria-label": x,
+            "data-active": !!d,
+            onClick: H,
+            children: [
+              s,
+              d === "ascending" ? /* @__PURE__ */ n(B, { size: "12" }) : d === "descending" ? /* @__PURE__ */ n(h, { size: "12" }) : /* @__PURE__ */ n(A, { className: o.sortIndicator, size: "12" })
+            ]
+          }
+        ) : s
+      }
+    );
   }
-}), y = ({
-  children: t,
-  activeTab: o,
-  defaultActiveTab: s,
-  onActiveTabChange: n,
-  size: c = "medium",
-  ...m
-}, u) => {
-  var R;
-  const [f, v] = O({
-    prop: o,
-    defaultProp: s,
-    onChange: n
-  }), g = j(
-    (e) => {
-      v(e);
-    },
-    [v]
-  ), { triggerListRef: k, activeIndicatorRef: P, triggers: C, triggersOutOfView: h, addTrigger: S } = q({
-    activeTab: f
-  });
-  return /* @__PURE__ */ a(w.Provider, { value: { addTrigger: S }, children: /* @__PURE__ */ p(
-    d.Root,
-    {
-      ref: u,
-      className: r.root,
-      onValueChange: g,
-      value: f ?? ((R = C[0]) == null ? void 0 : R.value),
-      ...m,
-      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(
-            d.Trigger,
-            {
-              ...e.props,
-              key: e.value,
-              value: e.value,
-              disabled: e.disabled,
-              className: r.trigger,
-              ref: e.ref
-            },
-            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__ */ a(l.Content, { align: "end", "data-test-id": "overflow-items-dropdown-content", children: h.map((e) => /* @__PURE__ */ N(
-              l.Item,
-              {
-                ...e.props,
-                disabled: e.disabled,
-                onSelect: () => g(e.value),
-                key: e.value
-              },
-              e.element
-            )) })
-          ] }),
-          /* @__PURE__ */ a(
-            "span",
-            {
-              "data-test-id": "active-tab-indicator",
-              ref: P,
-              className: r.activeIndicator
-            }
-          )
-        ] }),
-        t
-      ]
-    }
-  ) });
-};
-y.displayName = "Tabs.Root";
-const z = ({ children: t, value: o, disabled: s }) => /* @__PURE__ */ a(b.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(() => {
-    m({
-      ref: u || s,
-      value: n ?? "",
-      disabled: c,
-      props: o,
-      element: t
-    });
-  }, []), null;
-};
-I.displayName = "Tabs.Trigger";
-const L = ({ children: t, ...o }, s) => {
-  const { value: n } = T(b);
-  return /* @__PURE__ */ a(d.Content, { ref: s, ...o, className: r.content, value: n ?? "", children: t });
-};
-L.displayName = "Tabs.Content";
-const Q = {
-  Root: i(y),
-  Tab: i(z),
-  Trigger: i(I),
-  Content: i(L)
+);
+C.displayName = "Table.HeaderCell";
+const v = u(
+  ({ children: e, "aria-busy": a }, l) => /* @__PURE__ */ n("tbody", { ref: l, className: o.body, "aria-busy": a, children: e })
+);
+v.displayName = "Table.Body";
+const I = u(
+  ({ disabled: e = !1, selected: a = !1, onClick: l, children: r, "aria-label": t, "data-test-id": d }, c) => {
+    const b = l !== void 0 && !e, i = () => {
+      e || l && l(a);
+    }, s = (m) => {
+      b && (m.key === "Enter" || m.key === " ") && (m.preventDefault(), i());
+    };
+    return /* @__PURE__ */ n(
+      "tr",
+      {
+        ref: c,
+        className: o.row,
+        tabIndex: 0,
+        role: b ? "button" : "row",
+        "data-disabled": e,
+        "data-interactive": b,
+        "data-selected": a,
+        "aria-disabled": e,
+        "aria-label": t,
+        "aria-selected": a,
+        onClick: b ? i : void 0,
+        onKeyDown: b ? s : void 0,
+        "data-test-id": d,
+        children: r
+      }
+    );
+  }
+);
+I.displayName = "Table.Row";
+const T = u(
+  ({ colSpan: e, truncate: a, align: l = "left", children: r, "aria-label": t }, d) => {
+    const c = y(null);
+    return p(c, d), w(c), /* @__PURE__ */ n(
+      "td",
+      {
+        ref: c,
+        className: o.rowCell,
+        colSpan: e,
+        "data-align": l,
+        "data-truncate": a,
+        "aria-label": t,
+        children: r
+      }
+    );
+  }
+);
+T.displayName = "Table.RowCell";
+const q = {
+  Root: N,
+  Caption: g,
+  Header: R,
+  HeaderCell: C,
+  Body: v,
+  Row: I,
+  RowCell: T
 };
 export {
-  Q as Tabs,
-  L as TabsContent,
-  y as TabsRoot,
-  z as TabsTab,
-  I as TabsTrigger
+  q as Table,
+  v as TableBody,
+  g as TableCaption,
+  R as TableHeader,
+  C as TableHeaderCell,
+  N as TableRoot,
+  I as TableRow,
+  T as TableRowCell
 };
 //# sourceMappingURL=fondue-components21.js.map