@frontify/fondue-components 3.0.3 → 3.2.0

package/dist/fondue-components7.js

@@ -1,88 +1,85 @@
-import { jsx as r, jsxs as N } from "react/jsx-runtime";
-import { IconCaretRight as R } from "@frontify/fondue-icons";
-import * as e from "@radix-ui/react-dropdown-menu";
-import { forwardRef as a } from "react";
-import n from "./fondue-components22.js";
-const i = ({
-  children: o,
-  open: t,
-  onOpenChange: d,
-  "data-test-id": s = "fondue-dropdown"
-}) => /* @__PURE__ */ r(e.Root, { open: t, onOpenChange: d, "data-test-id": s, children: o });
-i.displayName = "Dropdown.Root";
-const p = ({ children: o, "data-test-id": t = "fondue-dropdown-trigger" }, d) => /* @__PURE__ */ r(e.Trigger, { asChild: !0, "data-test-id": t, ref: d, children: o });
-p.displayName = "Dropdown.Trigger";
-const u = ({ children: o, "data-test-id": t = "fondue-dropdown-content" }, d) => /* @__PURE__ */ r(e.Portal, { children: /* @__PURE__ */ r(
-  e.Content,
-  {
-    align: "start",
-    collisionPadding: 8,
-    sideOffset: 8,
-    className: n.content,
-    "data-test-id": t,
-    ref: d,
-    children: o
-  }
-) });
-u.displayName = "Dropdown.Content";
-const w = ({ children: o, "data-test-id": t = "fondue-dropdown-group" }, d) => /* @__PURE__ */ r(e.Group, { className: n.group, "data-test-id": t, ref: d, children: o });
-w.displayName = "Dropdown.Group";
-const m = ({
-  children: o,
-  "data-test-id": t = "fondue-dropdown-submenu"
-}) => /* @__PURE__ */ r(e.Sub, { "data-test-id": t, children: o });
-m.displayName = "Dropdown.SubMenu";
-const c = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, d) => /* @__PURE__ */ N(e.SubTrigger, { className: n.subTrigger, "data-test-id": t, ref: d, children: [
-  o,
-  /* @__PURE__ */ r(R, { className: n.subMenuIndicator, size: 16 })
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { IconCross as w } from "@frontify/fondue-icons";
+import * as i from "@radix-ui/react-dialog";
+import { forwardRef as d } from "react";
+import l from "./fondue-components34.js";
+const n = ({ children: t, ...a }) => /* @__PURE__ */ o(i.Root, { ...a, children: t });
+n.displayName = "Dialog.Root";
+const g = ({ children: t, "data-test-id": a = "fondue-dialog-trigger" }, e) => /* @__PURE__ */ o(i.Trigger, { "data-test-id": a, asChild: !0, ref: e, children: t });
+g.displayName = "Dialog.Trigger";
+const c = ({
+  maxWidth: t = "800px",
+  minWidth: a = "400px",
+  minHeight: e = "200px",
+  padding: r = "compact",
+  verticalAlign: C = "center",
+  "data-test-id": h = "fondue-dialog-content",
+  showUnderlay: v = !1,
+  children: x,
+  rounded: T = !0,
+  ...R
+}, b) => /* @__PURE__ */ s(i.Portal, { children: [
+  /* @__PURE__ */ o(i.Overlay, { "data-visible": v, className: l.underlay }),
+  /* @__PURE__ */ o(
+    i.Content,
+    {
+      style: {
+        "--dialog-max-width": t,
+        "--dialog-min-width": a,
+        "--dialog-min-height": e
+      },
+      ref: b,
+      className: l.content,
+      "data-dialog-rounded": T,
+      "data-dialog-spacing": r,
+      "data-test-id": h,
+      "data-dialog-vertical-align": C,
+      ...R,
+      children: x
+    }
+  )
 ] });
-c.displayName = "Dropdown.SubTrigger";
-const g = ({ children: o, "data-test-id": t = "fondue-dropdown-subcontent" }, d) => /* @__PURE__ */ r(e.Portal, { children: /* @__PURE__ */ r(e.SubContent, { className: n.subContent, "data-test-id": t, ref: d, children: o }) });
-g.displayName = "Dropdown.SubContent";
-const l = ({
-  children: o,
-  disabled: t,
-  textValue: d,
-  onSelect: s,
-  "data-test-id": f = "fondue-dropdown-subtrigger",
-  ...b
-}, S) => /* @__PURE__ */ r(
-  e.Item,
-  {
-    onSelect: s,
-    className: n.item,
-    textValue: d,
-    "data-test-id": f,
-    ref: S,
-    disabled: t,
-    ...b,
-    children: o
-  }
-);
-l.displayName = "Dropdown.Item";
-const D = ({ children: o, name: t, "data-test-id": d = "fondue-dropdown-slot" }, s) => /* @__PURE__ */ r("div", { "data-name": t, className: n.slot, "data-test-id": d, ref: s, children: o });
-D.displayName = "Dropdown.Slot";
-const C = a(p), T = a(u), y = a(w), F = a(c), I = a(g), h = a(l), G = a(D), v = {
-  Root: i,
-  Trigger: C,
-  Content: T,
-  Group: y,
-  SubMenu: m,
-  SubTrigger: F,
-  SubContent: I,
-  Item: h,
-  Slot: G
+c.displayName = "Dialog.Content";
+const m = ({ children: t, showCloseButton: a = !0, "data-test-id": e = "fondue-dialog-header" }, r) => /* @__PURE__ */ s("div", { "data-test-id": e, ref: r, className: l.header, "data-dialog-layout-component": !0, children: [
+  /* @__PURE__ */ o("div", { children: t }),
+  a && /* @__PURE__ */ o(i.Close, { role: "button", "data-test-id": `${e}-close`, className: "tw-cursor-pointer", children: /* @__PURE__ */ o(w, { size: 20 }) })
+] });
+m.displayName = "Dialog.Header";
+const u = ({ children: t, "data-test-id": a = "fondue-dialog-footer" }, e) => /* @__PURE__ */ o("div", { "data-test-id": a, ref: e, className: l.footer, "data-dialog-layout-component": !0, children: t });
+u.displayName = "Dialog.Footer";
+const p = ({ children: t, "data-test-id": a = "fondue-dialog-body" }, e) => /* @__PURE__ */ o("div", { "data-test-id": a, ref: e, className: l.body, "data-dialog-layout-component": !0, children: t });
+p.displayName = "Dialog.Body";
+const D = ({ children: t, "data-test-id": a = "fondue-dialog-side-content" }, e) => /* @__PURE__ */ o("div", { "data-test-id": a, ref: e, className: l.sideContent, "data-dialog-layout-component": !0, children: t });
+D.displayName = "Dialog.SideContent";
+const y = ({ children: t }) => /* @__PURE__ */ o(i.Close, { asChild: !0, children: t });
+y.displayName = "Dialog.Close";
+const N = ({ children: t, asChild: a }) => /* @__PURE__ */ o(i.Title, { asChild: a, children: t });
+N.displayName = "Dialog.Title";
+const f = ({ children: t, asChild: a }) => /* @__PURE__ */ o(i.Description, { asChild: a, children: t });
+f.displayName = "Dialog.Description";
+const j = {
+  Root: n,
+  Title: N,
+  Description: f,
+  Close: y,
+  Trigger: d(g),
+  Content: d(c),
+  Header: d(m),
+  Footer: d(u),
+  Body: d(p),
+  SideContent: d(D)
 };
 export {
-  v as Dropdown,
-  u as DropdownContent,
-  w as DropdownGroup,
-  l as DropdownItem,
-  i as DropdownRoot,
-  D as DropdownSlot,
-  g as DropdownSubContent,
-  m as DropdownSubMenu,
-  c as DropdownSubTrigger,
-  p as DropdownTrigger
+  j as Dialog,
+  p as DialogBody,
+  y as DialogClose,
+  c as DialogContent,
+  f as DialogDescription,
+  u as DialogFooter,
+  m as DialogHeader,
+  n as DialogRoot,
+  D as DialogSideContent,
+  N as DialogTitle,
+  g as DialogTrigger
 };
 //# sourceMappingURL=fondue-components7.js.map

package/dist/fondue-components7.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components7.js","sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight } from '@frontify/fondue-icons';\nimport * as RadixDropdown from '@radix-ui/react-dropdown-menu';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * Controls the open state of the dropdown.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the dropdown changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} onOpenChange={onOpenChange} data-test-id={dataTestId}>\n            {children}\n        </RadixDropdown.Root>\n    );\n};\nDropdownRoot.displayName = 'Dropdown.Root';\n\nexport type DropdownTriggerProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-trigger' }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild data-test-id={dataTestId} ref={ref}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\nexport type DropdownContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-content' }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.Content\n                align=\"start\"\n                collisionPadding={8}\n                sideOffset={8}\n                className={styles.content}\n                data-test-id={dataTestId}\n                ref={ref}\n            >\n                {children}\n            </RadixDropdown.Content>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownContent.displayName = 'Dropdown.Content';\n\nexport type DropdownGroupProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </RadixDropdown.Group>\n    );\n};\nDropdownGroup.displayName = 'Dropdown.Group';\n\nexport type DropdownSubMenuProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubMenu = ({\n    children,\n    'data-test-id': dataTestId = 'fondue-dropdown-submenu',\n}: DropdownSubMenuProps) => {\n    return <RadixDropdown.Sub data-test-id={dataTestId}>{children}</RadixDropdown.Sub>;\n};\nDropdownSubMenu.displayName = 'Dropdown.SubMenu';\n\nexport type DropdownSubTriggerProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subtrigger' }: DropdownSubTriggerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.SubTrigger className={styles.subTrigger} data-test-id={dataTestId} ref={ref}>\n            {children}\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subcontent' }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.SubContent className={styles.subContent} data-test-id={dataTestId} ref={ref}>\n                {children}\n            </RadixDropdown.SubContent>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownSubContent.displayName = 'Dropdown.SubContent';\n\nexport type DropdownItemProps = {\n    children: ReactNode;\n    /**\n     * Disables the item.\n     */\n    disabled?: boolean;\n    /**\n     * The text value of the item that is passed to the onSelect callback.\n     */\n    textValue?: string;\n    /**\n     * Callback that is called when the item is selected.\n     */\n    onSelect: (event: Event) => void;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            ref={ref}\n            disabled={disabled}\n            {...props}\n        >\n            {children}\n        </RadixDropdown.Item>\n    );\n};\nDropdownItem.displayName = 'Dropdown.Item';\n\nexport type DropdownSlotProps = { children: ReactNode; name?: 'left' | 'right'; 'data-test-id'?: string };\n\nexport const DropdownSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-dropdown-slot' }: DropdownSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.slot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nDropdownSlot.displayName = 'Dropdown.Slot';\n\nconst ForwardedRefDropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(DropdownTrigger);\nconst ForwardedRefDropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>(DropdownContent);\nconst ForwardedRefDropdownGroup = forwardRef<HTMLDivElement, DropdownGroupProps>(DropdownGroup);\nconst ForwardedRefDropdownSubTrigger = forwardRef<HTMLDivElement, DropdownSubTriggerProps>(DropdownSubTrigger);\nconst ForwardedRefDropdownSubContent = forwardRef<HTMLDivElement, DropdownSubContentProps>(DropdownSubContent);\nconst ForwardedRefDropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(DropdownItem);\nconst ForwardedRefDropdownSlot = forwardRef<HTMLDivElement, DropdownSlotProps>(DropdownSlot);\n\nexport const Dropdown = {\n    Root: DropdownRoot,\n    Trigger: ForwardedRefDropdownTrigger,\n    Content: ForwardedRefDropdownContent,\n    Group: ForwardedRefDropdownGroup,\n    SubMenu: DropdownSubMenu,\n    SubTrigger: ForwardedRefDropdownSubTrigger,\n    SubContent: ForwardedRefDropdownSubContent,\n    Item: ForwardedRefDropdownItem,\n    Slot: ForwardedRefDropdownSlot,\n};\n"],"names":["DropdownRoot","children","open","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","ref","DropdownContent","styles","DropdownGroup","DropdownSubMenu","DropdownSubTrigger","jsxs","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","props","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":";;;;;AAqBO,MAAMA,IAAe,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAEQ,gBAAAC,EAACC,EAAc,MAAd,EAAmB,MAAAJ,GAAY,cAAAC,GAA4B,gBAAcC,GACrE,UAAAH,EACL,CAAA;AAGRD,EAAa,cAAc;AAId,MAAAO,IAAkB,CAC3B,EAAE,UAAAN,GAAU,gBAAgBG,IAAa,6BACzCI,MAGI,gBAAAH,EAACC,EAAc,SAAd,EAAsB,SAAO,IAAC,gBAAcF,GAAY,KAAAI,GACpD,UAAAP,EACL,CAAA;AAGRM,EAAgB,cAAc;AAIjB,MAAAE,IAAkB,CAC3B,EAAE,UAAAR,GAAU,gBAAgBG,IAAa,6BACzCI,MAGI,gBAAAH,EAACC,EAAc,QAAd,EACG,UAAA,gBAAAD;AAAA,EAACC,EAAc;AAAA,EAAd;AAAA,IACG,OAAM;AAAA,IACN,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,WAAWI,EAAO;AAAA,IAClB,gBAAcN;AAAA,IACd,KAAAI;AAAA,IAEC,UAAAP;AAAA,EAAA;AAET,EAAA,CAAA;AAGRQ,EAAgB,cAAc;AAIjB,MAAAE,IAAgB,CACzB,EAAE,UAAAV,GAAU,gBAAgBG,IAAa,2BACzCI,MAGI,gBAAAH,EAACC,EAAc,OAAd,EAAoB,WAAWI,EAAO,OAAO,gBAAcN,GAAY,KAAAI,GACnE,UAAAP,EACL,CAAA;AAGRU,EAAc,cAAc;AAIrB,MAAMC,IAAkB,CAAC;AAAA,EAC5B,UAAAX;AAAA,EACA,gBAAgBG,IAAa;AACjC,wBACYE,EAAc,KAAd,EAAkB,gBAAcF,GAAa,UAAAH,EAAS,CAAA;AAElEW,EAAgB,cAAc;AAIjB,MAAAC,IAAqB,CAC9B,EAAE,UAAAZ,GAAU,gBAAgBG,IAAa,gCACzCI,MAGI,gBAAAM,EAACR,EAAc,YAAd,EAAyB,WAAWI,EAAO,YAAY,gBAAcN,GAAY,KAAAI,GAC7E,UAAA;AAAA,EAAAP;AAAA,oBACAc,GAAe,EAAA,WAAWL,EAAO,kBAAkB,MAAM,IAAI;AAClE,EAAA,CAAA;AAGRG,EAAmB,cAAc;AAIpB,MAAAG,IAAqB,CAC9B,EAAE,UAAAf,GAAU,gBAAgBG,IAAa,gCACzCI,MAGK,gBAAAH,EAAAC,EAAc,QAAd,EACG,4BAACA,EAAc,YAAd,EAAyB,WAAWI,EAAO,YAAY,gBAAcN,GAAY,KAAAI,GAC7E,UAAAP,GACL,EACJ,CAAA;AAGRe,EAAmB,cAAc;AAmB1B,MAAMC,IAAe,CACxB;AAAA,EACI,UAAAhB;AAAA,EACA,UAAAiB;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBhB,IAAa;AAAA,EAC7B,GAAGiB;AACP,GACAb,MAGI,gBAAAH;AAAA,EAACC,EAAc;AAAA,EAAd;AAAA,IACG,UAAAc;AAAA,IACA,WAAWV,EAAO;AAAA,IAClB,WAAAS;AAAA,IACA,gBAAcf;AAAA,IACd,KAAAI;AAAA,IACA,UAAAU;AAAA,IACC,GAAGG;AAAA,IAEH,UAAApB;AAAA,EAAA;AAAA;AAIbgB,EAAa,cAAc;AAId,MAAAK,IAAe,CACxB,EAAE,UAAArB,GAAU,MAAAsB,GAAM,gBAAgBnB,IAAa,uBAAuB,GACtEI,MAGI,gBAAAH,EAAC,OAAI,EAAA,aAAWkB,GAAM,WAAWb,EAAO,MAAM,gBAAcN,GAAY,KAAAI,GACnE,UAAAP,EACL,CAAA;AAGRqB,EAAa,cAAc;AAE3B,MAAME,IAA8BC,EAAoDlB,CAAe,GACjGmB,IAA8BD,EAAiDhB,CAAe,GAC9FkB,IAA4BF,EAA+Cd,CAAa,GACxFiB,IAAiCH,EAAoDZ,CAAkB,GACvGgB,IAAiCJ,EAAoDT,CAAkB,GACvGc,IAA2BL,EAA8CR,CAAY,GACrFc,IAA2BN,EAA8CH,CAAY,GAE9EU,IAAW;AAAA,EACpB,MAAMhC;AAAA,EACN,SAASwB;AAAA,EACT,SAASE;AAAA,EACT,OAAOC;AAAA,EACP,SAASf;AAAA,EACT,YAAYgB;AAAA,EACZ,YAAYC;AAAA,EACZ,MAAMC;AAAA,EACN,MAAMC;AACV;"}
+{"version":3,"file":"fondue-components7.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\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 dialog\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 type DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The vertical alignment of the divider\n     * @default \"center\"\n     */\n    verticalAlign?: 'top' | 'center';\n\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a maximum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default true\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n    return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-trigger' }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.Trigger data-test-id={dataTestId} asChild ref={ref}>\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        children,\n        rounded = true,\n        ...props\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDialog.Portal>\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay} />\n            <RadixDialog.Content\n                style={\n                    {\n                        '--dialog-max-width': maxWidth,\n                        '--dialog-min-width': minWidth,\n                        '--dialog-min-height': minHeight,\n                    } as CSSProperties\n                }\n                ref={ref}\n                className={styles.content}\n                data-dialog-rounded={rounded}\n                data-dialog-spacing={padding}\n                data-test-id={dataTestId}\n                data-dialog-vertical-align={verticalAlign}\n                {...props}\n            >\n                {children}\n            </RadixDialog.Content>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    { children, showCloseButton = true, 'data-test-id': dataTestId = 'fondue-dialog-header' }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header} data-dialog-layout-component>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close role=\"button\" data-test-id={`${dataTestId}-close`} className=\"tw-cursor-pointer\">\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.body} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogRoot","children","props","RadixDialog","DialogTrigger","dataTestId","ref","jsx","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","showUnderlay","rounded","jsxs","styles","DialogHeader","showCloseButton","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","asChild","DialogDescription","Dialog","forwardRef"],"mappings":"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"}

package/dist/fondue-components8.js

@@ -1,61 +1,33 @@
-import { jsx as a, jsxs as F } from "react/jsx-runtime";
-import { IconCross as g } from "@frontify/fondue-icons";
-import * as r from "@radix-ui/react-popover";
-import { forwardRef as d } from "react";
-import { flyoutContentStyles as N, flyoutHeaderStyles as C, flyoutFooterStyles as h, flyoutBodyStyles as x } from "./fondue-components23.js";
-const i = ({ children: t, ...o }) => /* @__PURE__ */ a(r.Root, { ...o, children: t });
-i.displayName = "Flyout.Root";
-const y = ({ children: t, "data-test-id": o = "fondue-flyout-trigger" }, e) => /* @__PURE__ */ a(r.Trigger, { "data-test-id": o, asChild: !0, ref: e, children: t });
-y.displayName = "Flyout.Trigger";
-const n = ({
-  align: t = "start",
-  maxWidth: o = "360px",
-  padding: e = "compact",
-  "data-test-id": s = "fondue-flyout-content",
-  children: m,
-  ...l
-}, p) => /* @__PURE__ */ a(r.Portal, { children: /* @__PURE__ */ a(
-  r.Content,
+import { jsx as m } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-separator";
+import { forwardRef as p } from "react";
+import { cn as f } from "./fondue-components24.js";
+import { dividerStyles as n } from "./fondue-components35.js";
+const r = ({
+  "data-test-id": o = "fondue-divider",
+  direction: t = "horizontal",
+  className: i,
+  variant: e,
+  ...d
+}, a) => /* @__PURE__ */ m(
+  s.Root,
   {
-    style: {
-      "--flyout-max-width": o
-    },
-    ref: p,
-    align: t,
-    collisionPadding: 8,
-    sideOffset: 8,
-    className: N({ ...l }),
-    "data-flyout-spacing": e,
-    "data-test-id": s,
-    ...l,
-    children: m
+    ref: a,
+    className: f(
+      n({
+        direction: t,
+        variant: e,
+        ...d
+      }),
+      i
+    ),
+    "data-test-id": o
   }
-) });
-n.displayName = "Flyout.Content";
-const u = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, s) => /* @__PURE__ */ F("div", { "data-test-id": e, ref: s, className: C, children: [
-  /* @__PURE__ */ a("div", { children: o }),
-  t && /* @__PURE__ */ a(r.Close, { role: "button", "data-test-id": `${e}-close`, className: "tw-cursor-pointer", children: /* @__PURE__ */ a(g, { size: 20 }) })
-] });
-u.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: h, children: t });
-f.displayName = "Flyout.Footer";
-const c = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: x, children: t });
-c.displayName = "Flyout.Body";
-const S = {
-  Root: i,
-  Trigger: d(y),
-  Content: d(n),
-  Header: d(u),
-  Footer: d(f),
-  Body: d(c)
-};
+);
+r.displayName = "Divider";
+const u = p(r);
 export {
-  S as Flyout,
-  c as FlyoutBody,
-  n as FlyoutContent,
-  f as FlyoutFooter,
-  u as FlyoutHeader,
-  i as FlyoutRoot,
-  y as FlyoutTrigger
+  u as Divider,
+  r as DividerComponent
 };
 //# sourceMappingURL=fondue-components8.js.map

package/dist/fondue-components8.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components8.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, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { flyoutBodyStyles, flyoutContentStyles, flyoutFooterStyles, flyoutHeaderStyles } from './styles/flyoutStyles';\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 type FlyoutContentProps = {\n    /**\n     * Add rounded corners to the flyout\n     * @default true\n     */\n    rounded?: boolean;\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?: 'compact' | 'comfortable' | 'spacious';\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 type FlyoutTriggerProps = { children?: ReactNode; 'data-test-id'?: string };\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 type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type FlyoutBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport const FlyoutTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-trigger' }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger data-test-id={dataTestId} asChild ref={ref}>\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content\n                style={\n                    {\n                        '--flyout-max-width': maxWidth,\n                    } as CSSProperties\n                }\n                ref={ref}\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                className={flyoutContentStyles({ ...props })}\n                data-flyout-spacing={padding}\n                data-test-id={dataTestId}\n                {...props}\n            >\n                {children}\n            </RadixPopover.Content>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\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={flyoutHeaderStyles}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className=\"tw-cursor-pointer\">\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\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={flyoutFooterStyles}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\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={flyoutBodyStyles}>\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","dataTestId","ref","jsx","FlyoutContent","align","maxWidth","padding","flyoutContentStyles","FlyoutHeader","showCloseButton","flyoutHeaderStyles","IconCross","FlyoutFooter","flyoutFooterStyles","FlyoutBody","flyoutBodyStyles","Flyout","forwardRef"],"mappings":";;;;;AAwEO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAa,MAAb,EAAmB,GAAGD,GAAQ,UAAAD,EAAS,CAAA;AAEnDD,EAAW,cAAc;AAEZ,MAAAI,IAAgB,CACzB,EAAE,UAAAH,GAAU,gBAAgBI,IAAa,2BACzCC,MAGI,gBAAAC,EAACJ,EAAa,SAAb,EAAqB,gBAAcE,GAAY,SAAO,IAAC,KAAAC,GACnD,UAAAL,EACL,CAAA;AAGRG,EAAc,cAAc;AAErB,MAAMI,IAAgB,CACzB;AAAA,EACI,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,gBAAgBN,IAAa;AAAA,EAC7B,UAAAJ;AAAA,EACA,GAAGC;AACP,GACAI,MAGI,gBAAAC,EAACJ,EAAa,QAAb,EACG,UAAA,gBAAAI;AAAA,EAACJ,EAAa;AAAA,EAAb;AAAA,IACG,OACI;AAAA,MACI,sBAAsBO;AAAA,IAC1B;AAAA,IAEJ,KAAAJ;AAAA,IACA,OAAAG;AAAA,IACA,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,WAAWG,EAAoB,EAAE,GAAGV,GAAO;AAAA,IAC3C,uBAAqBS;AAAA,IACrB,gBAAcN;AAAA,IACb,GAAGH;AAAA,IAEH,UAAAD;AAAA,EAAA;AAET,EAAA,CAAA;AAGRO,EAAc,cAAc;AAEf,MAAAK,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAAb,GAAU,gBAAgBI,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWS,GAChD,UAAA;AAAA,EAAA,gBAAAR,EAAC,SAAK,UAAAN,GAAS;AAAA,EACda,KACI,gBAAAP,EAAAJ,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGE,CAAU,UAAU,WAAU,qBAC7E,4BAACW,GAAU,EAAA,MAAM,GAAI,CAAA,GACzB;AAER,EAAA,CAAA;AAGRH,EAAa,cAAc;AAEd,MAAAI,IAAe,CACxB,EAAE,UAAAhB,GAAU,gBAAgBI,IAAa,0BACzCC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWY,GAC/C,UAAAjB,EACL,CAAA;AAGRgB,EAAa,cAAc;AAEd,MAAAE,IAAa,CACtB,EAAE,UAAAlB,GAAU,gBAAgBI,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWc,GAC7E,UAAAnB,EACL,CAAA;AAGRkB,EAAW,cAAc;AAElB,MAAME,IAAS;AAAA,EAClB,MAAMrB;AAAA,EACN,SAASsB,EAAkDlB,CAAa;AAAA,EACxE,SAASkB,EAA+Cd,CAAa;AAAA,EACrE,QAAQc,EAA8CT,CAAY;AAAA,EAClE,QAAQS,EAA8CL,CAAY;AAAA,EAClE,MAAMK,EAA4CH,CAAU;AAChE;"}
+{"version":3,"file":"fondue-components8.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { dividerStyles } from './styles/dividerStyles';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    variant?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const DividerComponent = (\n    {\n        'data-test-id': dataTestId = 'fondue-divider',\n        direction = 'horizontal',\n        className,\n        variant,\n        ...props\n    }: DividerProps,\n    ref: ForwardedRef<HTMLDivElement | null>,\n): ReactElement => {\n    return (\n        <Separator.Root\n            ref={ref}\n            className={cn(\n                dividerStyles({\n                    direction,\n                    variant,\n                    ...props,\n                }),\n                className,\n            )}\n            data-test-id={dataTestId}\n        />\n    );\n};\n\nDividerComponent.displayName = 'Divider';\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(DividerComponent);\n"],"names":["DividerComponent","dataTestId","direction","className","variant","props","ref","jsx","Separator","cn","dividerStyles","Divider","forwardRef"],"mappings":";;;;;AAuCO,MAAMA,IAAmB,CAC5B;AAAA,EACI,gBAAgBC,IAAa;AAAA,EAC7B,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACP,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAU;AAAA,EAAV;AAAA,IACG,KAAAF;AAAA,IACA,WAAWG;AAAA,MACPC,EAAc;AAAA,QACV,WAAAR;AAAA,QACA,SAAAE;AAAA,QACA,GAAGC;AAAA,MAAA,CACN;AAAA,MACDF;AAAA,IACJ;AAAA,IACA,gBAAcF;AAAA,EAAA;AAAA;AAK1BD,EAAiB,cAAc;AAElB,MAAAW,IAAUC,EAAyCZ,CAAgB;"}

package/dist/fondue-components9.js

@@ -1,27 +1,106 @@
-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-components15.js";
-const s = ({ className: e, "data-test-id": a = "fondue-label", ...t }, r) => /* @__PURE__ */ o(
-  d.Root,
+import { jsx as e, jsxs as T } from "react/jsx-runtime";
+import { IconCaretRight as F } from "@frontify/fondue-icons";
+import * as d from "@radix-ui/react-dropdown-menu";
+import { forwardRef as s, useRef as c } from "react";
+import { usePreventDropdownOverflow as I } from "./fondue-components36.js";
+import { syncRefs as l } from "./fondue-components37.js";
+import a from "./fondue-components38.js";
+const m = ({
+  children: o,
+  open: t,
+  onOpenChange: r,
+  "data-test-id": n = "fondue-dropdown"
+}) => /* @__PURE__ */ e(d.Root, { open: t, onOpenChange: r, "data-test-id": n, children: o });
+m.displayName = "Dropdown.Root";
+const f = ({ children: o, "data-test-id": t = "fondue-dropdown-trigger" }, r) => /* @__PURE__ */ e(d.Trigger, { asChild: !0, "data-test-id": t, ref: r, children: o });
+f.displayName = "Dropdown.Trigger";
+const g = ({
+  onOpen: o,
+  onClose: t,
+  side: r = "bottom",
+  children: n,
+  "data-test-id": u = "fondue-dropdown-content"
+}, p) => {
+  const i = c(null), w = c(!1), { setMaxHeight: y } = I(i);
+  return /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ e(
+    d.Content,
+    {
+      align: "start",
+      collisionPadding: 8,
+      sideOffset: 8,
+      side: r,
+      className: a.content,
+      "data-test-id": u,
+      ref: i,
+      onCloseAutoFocus: () => {
+        l(i, p), t && t(), w.current = !1;
+      },
+      onFocus: () => {
+        w.current || (y(), l(i, p), o && o(), w.current = !0);
+      },
+      children: n
+    }
+  ) });
+};
+g.displayName = "Dropdown.Content";
+const D = ({ children: o, "data-test-id": t = "fondue-dropdown-group" }, r) => /* @__PURE__ */ e(d.Group, { className: a.group, "data-test-id": t, ref: r, children: o });
+D.displayName = "Dropdown.Group";
+const b = ({
+  children: o,
+  "data-test-id": t = "fondue-dropdown-submenu"
+}) => /* @__PURE__ */ e(d.Sub, { "data-test-id": t, children: o });
+b.displayName = "Dropdown.SubMenu";
+const S = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, r) => /* @__PURE__ */ T(d.SubTrigger, { className: a.subTrigger, "data-test-id": t, ref: r, children: [
+  o,
+  /* @__PURE__ */ e(F, { className: a.subMenuIndicator, size: 16 })
+] });
+S.displayName = "Dropdown.SubTrigger";
+const R = ({ children: o, "data-test-id": t = "fondue-dropdown-subcontent" }, r) => /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ e(d.SubContent, { className: a.subContent, "data-test-id": t, ref: r, children: o }) });
+R.displayName = "Dropdown.SubContent";
+const N = ({
+  children: o,
+  disabled: t,
+  textValue: r,
+  onSelect: n,
+  "data-test-id": u = "fondue-dropdown-subtrigger",
+  ...p
+}, i) => /* @__PURE__ */ e(
+  d.Item,
   {
-    ref: r,
-    "data-required": t.required,
-    className: n(
-      'tw-group tw-flex tw-gap-1 tw-font-sans tw-font-normal peer-data-[state="checked"]:tw-font-medium peer-data-[state="indeterminate"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',
-      // Disabled state if siblings has disabled state
-      "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-sans after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',
-      e
-    ),
-    "data-test-id": a,
-    ...t
+    onSelect: n,
+    className: a.item,
+    textValue: r,
+    "data-test-id": u,
+    ref: i,
+    disabled: t,
+    ...p,
+    children: o
   }
-), w = i(s);
-w.displayName = "Label";
+);
+N.displayName = "Dropdown.Item";
+const C = ({ children: o, name: t, "data-test-id": r = "fondue-dropdown-slot" }, n) => /* @__PURE__ */ e("div", { "data-name": t, className: a.slot, "data-test-id": r, ref: n, children: o });
+C.displayName = "Dropdown.Slot";
+const h = s(f), x = s(g), G = s(D), M = s(S), P = s(R), v = s(N), j = s(C), B = {
+  Root: m,
+  Trigger: h,
+  Content: x,
+  Group: G,
+  SubMenu: b,
+  SubTrigger: M,
+  SubContent: P,
+  Item: v,
+  Slot: j
+};
 export {
-  w as Label,
-  s as LabelComponent
+  B as Dropdown,
+  g as DropdownContent,
+  D as DropdownGroup,
+  N as DropdownItem,
+  m as DropdownRoot,
+  C as DropdownSlot,
+  R as DropdownSubContent,
+  b as DropdownSubMenu,
+  S as DropdownSubTrigger,
+  f as DropdownTrigger
 };
 //# sourceMappingURL=fondue-components9.js.map

package/dist/fondue-components9.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components9.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 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    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', ...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-flex tw-gap-1 tw-font-sans tw-font-normal peer-data-[state=\"checked\"]:tw-font-medium peer-data-[state=\"indeterminate\"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',\n                // Disabled state if siblings has disabled state\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-sans 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            {...props}\n        />\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","props","ref","jsx","LabelPrimitive","cn","Label","forwardRef"],"mappings":";;;;AAuBa,MAAAA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,GAAGC,EAAM,GACnEC,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,MACAN;AAAA,IACJ;AAAA,IACA,gBAAcC;AAAA,IACb,GAAGC;AAAA,EAAA;AAAA,GAKHK,IAAQC,EAAyCT,CAAc;AAC5EQ,EAAM,cAAc;"}
+{"version":3,"file":"fondue-components9.js","sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight } from '@frontify/fondue-icons';\nimport * as RadixDropdown from '@radix-ui/react-dropdown-menu';\nimport { forwardRef, useRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { syncRefs } from '#/utilities/domUtilities';\n\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * Controls the open state of the dropdown.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the dropdown changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} onOpenChange={onOpenChange} data-test-id={dataTestId}>\n            {children}\n        </RadixDropdown.Root>\n    );\n};\nDropdownRoot.displayName = 'Dropdown.Root';\n\nexport type DropdownTriggerProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-trigger' }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild data-test-id={dataTestId} ref={ref}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\nexport type DropdownContentProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    onOpen?: () => void;\n    onClose?: () => void;\n    /**\n     * Defines the preferred side of the dropdown. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const DropdownContent = (\n    {\n        onOpen,\n        onClose,\n        side = 'bottom',\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef(null);\n    const dropdownIsOpen = useRef(false);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.Content\n                align=\"start\"\n                collisionPadding={8}\n                sideOffset={8}\n                side={side}\n                className={styles.content}\n                data-test-id={dataTestId}\n                ref={localRef}\n                onCloseAutoFocus={() => {\n                    syncRefs(localRef, ref);\n                    onClose && onClose();\n                    dropdownIsOpen.current = false;\n                }}\n                onFocus={() => {\n                    if (!dropdownIsOpen.current) {\n                        setMaxHeight();\n                        syncRefs(localRef, ref);\n                        onOpen && onOpen();\n                        dropdownIsOpen.current = true;\n                    }\n                }}\n            >\n                {children}\n            </RadixDropdown.Content>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownContent.displayName = 'Dropdown.Content';\n\nexport type DropdownGroupProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </RadixDropdown.Group>\n    );\n};\nDropdownGroup.displayName = 'Dropdown.Group';\n\nexport type DropdownSubMenuProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubMenu = ({\n    children,\n    'data-test-id': dataTestId = 'fondue-dropdown-submenu',\n}: DropdownSubMenuProps) => {\n    return <RadixDropdown.Sub data-test-id={dataTestId}>{children}</RadixDropdown.Sub>;\n};\nDropdownSubMenu.displayName = 'Dropdown.SubMenu';\n\nexport type DropdownSubTriggerProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subtrigger' }: DropdownSubTriggerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.SubTrigger className={styles.subTrigger} data-test-id={dataTestId} ref={ref}>\n            {children}\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subcontent' }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.SubContent className={styles.subContent} data-test-id={dataTestId} ref={ref}>\n                {children}\n            </RadixDropdown.SubContent>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownSubContent.displayName = 'Dropdown.SubContent';\n\nexport type DropdownItemProps = {\n    children: ReactNode;\n    /**\n     * Disables the item.\n     */\n    disabled?: boolean;\n    /**\n     * The text value of the item that is passed to the onSelect callback.\n     */\n    textValue?: string;\n    /**\n     * Callback that is called when the item is selected.\n     */\n    onSelect?: (event: Event) => void;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            ref={ref}\n            disabled={disabled}\n            {...props}\n        >\n            {children}\n        </RadixDropdown.Item>\n    );\n};\nDropdownItem.displayName = 'Dropdown.Item';\n\nexport type DropdownSlotProps = { children: ReactNode; name?: 'left' | 'right'; 'data-test-id'?: string };\n\nexport const DropdownSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-dropdown-slot' }: DropdownSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.slot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nDropdownSlot.displayName = 'Dropdown.Slot';\n\nconst ForwardedRefDropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(DropdownTrigger);\nconst ForwardedRefDropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>(DropdownContent);\nconst ForwardedRefDropdownGroup = forwardRef<HTMLDivElement, DropdownGroupProps>(DropdownGroup);\nconst ForwardedRefDropdownSubTrigger = forwardRef<HTMLDivElement, DropdownSubTriggerProps>(DropdownSubTrigger);\nconst ForwardedRefDropdownSubContent = forwardRef<HTMLDivElement, DropdownSubContentProps>(DropdownSubContent);\nconst ForwardedRefDropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(DropdownItem);\nconst ForwardedRefDropdownSlot = forwardRef<HTMLDivElement, DropdownSlotProps>(DropdownSlot);\n\nexport const Dropdown = {\n    Root: DropdownRoot,\n    Trigger: ForwardedRefDropdownTrigger,\n    Content: ForwardedRefDropdownContent,\n    Group: ForwardedRefDropdownGroup,\n    SubMenu: DropdownSubMenu,\n    SubTrigger: ForwardedRefDropdownSubTrigger,\n    SubContent: ForwardedRefDropdownSubContent,\n    Item: ForwardedRefDropdownItem,\n    Slot: ForwardedRefDropdownSlot,\n};\n"],"names":["DropdownRoot","children","open","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","ref","DropdownContent","onOpen","onClose","side","localRef","useRef","dropdownIsOpen","setMaxHeight","usePreventDropdownOverflow","styles","syncRefs","DropdownGroup","DropdownSubMenu","DropdownSubTrigger","jsxs","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","props","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}