@frontify/fondue-components 3.1.0 → 3.2.0

package/dist/fondue-components5.js

@@ -1,85 +1,49 @@
-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-components20.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 = "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)
-};
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { IconMinus as m, IconCheckMark as h } from "@frontify/fondue-icons";
+import * as o from "@radix-ui/react-checkbox";
+import { forwardRef as k } from "react";
+import { cn as p } from "./fondue-components24.js";
+import { checkboxStyles as l, checkboxIndicatorStyles as w } from "./fondue-components28.js";
+const f = ({
+  className: a,
+  value: c,
+  onChange: i,
+  defaultValue: d,
+  "data-test-id": r = "fondue-checkbox",
+  ...e
+}, n) => /* @__PURE__ */ t(
+  o.Root,
+  {
+    ref: n,
+    checked: c,
+    defaultChecked: d,
+    className: p(l(e), a),
+    onClick: i,
+    "data-test-id": r,
+    ...e,
+    children: /* @__PURE__ */ s(o.Indicator, { className: w, children: [
+      /* @__PURE__ */ t(
+        m,
+        {
+          size: 16,
+          className: 'tw-hidden tw-opacity-0 group-data-[state="indeterminate"]:tw-block group-data-[state="indeterminate"]:tw-opacity-100 tw-transition-opacity',
+          "data-test-id": "icon-indeterminate"
+        }
+      ),
+      /* @__PURE__ */ t(
+        h,
+        {
+          size: 16,
+          className: 'tw-hidden tw-opacity-0 group-data-[state="checked"]:tw-block group-data-[state="checked"]:tw-opacity-100 tw-transition-opacity',
+          "data-test-id": "icon-checked"
+        }
+      )
+    ] })
+  }
+), x = k(f);
+x.displayName = "Checkbox";
 export {
-  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
+  x as Checkbox,
+  f as CheckboxComponent
 };
 //# sourceMappingURL=fondue-components5.js.map

package/dist/fondue-components5.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components5.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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"}
+{"version":3,"file":"fondue-components5.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconMinus } from '@frontify/fondue-icons';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { forwardRef, type FormEvent, type ForwardedRef } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { checkboxIndicatorStyles, checkboxStyles } from './styles/checkboxStyles';\n\nexport type CheckboxProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The default value of the checkbox\n     * Used for uncontrolled components\n     * @default false\n     */\n    defaultValue?: boolean | 'indeterminate';\n    /**\n     * The controlled value of the checkbox\n     * @default false\n     */\n    value?: boolean | 'indeterminate';\n    /**\n     * The size of the checkbox\n     * @default \"default\"\n     */\n    size?: 'default' | 'large';\n    /**\n     * The emphasis of the checkbox\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'weak';\n    /**\n     * Disable the checkbox\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the checkbox required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the checkbox read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    className?: string;\n    /**\n     * Event handler called when the checkbox value changes\n     */\n    onChange?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is blurred\n     */\n    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is focused\n     */\n    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n};\n\nexport const CheckboxComponent = (\n    {\n        className,\n        value,\n        onChange,\n        defaultValue,\n        'data-test-id': dataTestId = 'fondue-checkbox',\n        ...props\n    }: CheckboxProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <CheckboxPrimitive.Root\n            ref={ref}\n            checked={value}\n            defaultChecked={defaultValue}\n            className={cn(checkboxStyles(props), className)}\n            onClick={onChange}\n            data-test-id={dataTestId}\n            {...props}\n        >\n            <CheckboxPrimitive.Indicator className={checkboxIndicatorStyles}>\n                <IconMinus\n                    size={16}\n                    className='tw-hidden tw-opacity-0 group-data-[state=\"indeterminate\"]:tw-block group-data-[state=\"indeterminate\"]:tw-opacity-100 tw-transition-opacity'\n                    data-test-id=\"icon-indeterminate\"\n                />\n\n                <IconCheckMark\n                    size={16}\n                    className='tw-hidden tw-opacity-0 group-data-[state=\"checked\"]:tw-block group-data-[state=\"checked\"]:tw-opacity-100 tw-transition-opacity'\n                    data-test-id=\"icon-checked\"\n                />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n};\n\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'Checkbox';\n"],"names":["CheckboxComponent","className","value","onChange","defaultValue","dataTestId","props","ref","jsx","CheckboxPrimitive","cn","checkboxStyles","jsxs","checkboxIndicatorStyles","IconMinus","IconCheckMark","Checkbox","forwardRef"],"mappings":";;;;;;AAoEO,MAAMA,IAAoB,CAC7B;AAAA,EACI,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACG,KAAAF;AAAA,IACA,SAASL;AAAA,IACT,gBAAgBE;AAAA,IAChB,WAAWM,EAAGC,EAAeL,CAAK,GAAGL,CAAS;AAAA,IAC9C,SAASE;AAAA,IACT,gBAAcE;AAAA,IACb,GAAGC;AAAA,IAEJ,UAAC,gBAAAM,EAAAH,EAAkB,WAAlB,EAA4B,WAAWI,GACpC,UAAA;AAAA,MAAA,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAU;AAAA,UACV,gBAAa;AAAA,QAAA;AAAA,MACjB;AAAA,MAEA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAU;AAAA,UACV,gBAAa;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA,GACJ;AAAA,EAAA;AAAA,GAKCC,IAAWC,EAA6CjB,CAAiB;AACtFgB,EAAS,cAAc;"}

package/dist/fondue-components50.js

@@ -0,0 +1,46 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-popover";
+import { Slot as v } from "@radix-ui/react-slot";
+import { useRef as h, isValidElement as O } from "react";
+import { usePreventDropdownOverflow as S } from "./fondue-components36.js";
+import r from "./fondue-components52.js";
+import { recursiveMap as g, getSelectOptionValue as C } from "./fondue-components58.js";
+const M = ({ highlightedIndex: i, getMenuProps: l, getItemProps: m, children: p, filterText: u }) => {
+  const n = h(null), { setMaxHeight: f } = S(n), c = (e) => {
+    e.preventDefault(), f();
+  };
+  return /* @__PURE__ */ o(a.Portal, { children: /* @__PURE__ */ o(a.Content, { onOpenAutoFocus: c, className: r.portal, children: /* @__PURE__ */ o("ul", { className: r.menu, ...l(), ref: n, "data-test-id": "fondue-select-menu", children: g(
+    p,
+    (e, s) => {
+      if (((t) => (
+        // @ts-expect-error - We are explicitly checking for ref
+        O(t) && t.ref !== void 0
+      ))(e)) {
+        const t = m({
+          item: C(e.props),
+          index: s,
+          ...e.ref ? { ref: e.ref } : {}
+        });
+        return /* @__PURE__ */ o(
+          v,
+          {
+            className: r.item,
+            "data-highlighted": i === s,
+            onTouchStart: (d) => {
+              t.onClick && t.onClick(d);
+            },
+            ...t,
+            children: e
+          },
+          `${e.props.value}`
+        );
+      }
+    },
+    u
+  ).parsedChildren }) }) });
+};
+M.displayName = "Select.Menu";
+export {
+  M as SelectMenu
+};
+//# sourceMappingURL=fondue-components50.js.map

package/dist/fondue-components50.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components50.js","sources":["../src/components/Select/SelectMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type UseComboboxPropGetters, type UseSelectPropGetters } from 'downshift';\nimport { isValidElement, useRef, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\n\nimport { type SelectItemProps } from './SelectItem';\nimport styles from './styles/select.module.scss';\nimport { getSelectOptionValue, recursiveMap } from './utils';\n\nexport type SelectMenuProps = {\n    /**\n     * @internal\n     * The index of the highlighted item in the menu.\n     */\n    highlightedIndex: number;\n    /**\n     * @internal\n     * Callback function to retrieve the props for a menu element.\n     */\n    getMenuProps: UseSelectPropGetters<unknown>['getMenuProps'] | UseComboboxPropGetters<unknown>['getMenuProps'];\n    /**\n     * @internal\n     * Callback function to retrieve the props for a item element.\n     */\n    getItemProps: UseSelectPropGetters<unknown>['getItemProps'] | UseComboboxPropGetters<unknown>['getItemProps'];\n    /**\n     * @internal\n     * The children of the menu component. This can contain multiple `Select.Item` or `Select.Group` components.\n     */\n    children: ReactNode;\n    /**\n     * @internal\n     * The filter text shown in the combobox input element.\n     */\n    filterText?: string;\n};\n\nexport const SelectMenu = ({ highlightedIndex, getMenuProps, getItemProps, children, filterText }: SelectMenuProps) => {\n    const ref = useRef<HTMLUListElement | null>(null);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(ref);\n\n    const handleOnOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n        setMaxHeight();\n    };\n\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content onOpenAutoFocus={handleOnOpenAutoFocus} className={styles.portal}>\n                <ul className={styles.menu} {...getMenuProps()} ref={ref} data-test-id=\"fondue-select-menu\">\n                    {\n                        recursiveMap(\n                            children,\n                            (child, index) => {\n                                const isValid = <TProps,>(\n                                    child: ReactNode,\n                                ): child is ReactElement<TProps> & { ref: ForwardedRef<HTMLElement> } =>\n                                    // @ts-expect-error - We are explicitly checking for ref\n                                    isValidElement<TProps>(child) && child.ref !== undefined;\n\n                                if (isValid<SelectItemProps>(child)) {\n                                    const itemProps = getItemProps({\n                                        item: getSelectOptionValue(child.props),\n                                        index,\n                                        ...(child.ref ? { ref: child.ref } : {}),\n                                    });\n                                    return (\n                                        <RadixSlot\n                                            className={styles.item}\n                                            data-highlighted={highlightedIndex === index}\n                                            key={`${child.props.value}`}\n                                            // Workaround for the issue where the onClick event is not fired on touch devices because of portal usage\n                                            onTouchStart={(event) => {\n                                                if (itemProps.onClick) {\n                                                    itemProps.onClick(event as unknown as MouseEvent<HTMLElement>);\n                                                }\n                                            }}\n                                            {...itemProps}\n                                        >\n                                            {child}\n                                        </RadixSlot>\n                                    );\n                                }\n                            },\n                            filterText,\n                        ).parsedChildren\n                    }\n                </ul>\n            </RadixPopover.Content>\n        </RadixPopover.Portal>\n    );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","ref","useRef","setMaxHeight","usePreventDropdownOverflow","handleOnOpenAutoFocus","event","jsx","RadixPopover","styles","recursiveMap","child","index","isValidElement","itemProps","getSelectOptionValue","RadixSlot"],"mappings":";;;;;;;AAyCa,MAAAA,IAAa,CAAC,EAAE,kBAAAC,GAAkB,cAAAC,GAAc,cAAAC,GAAc,UAAAC,GAAU,YAAAC,QAAkC;AAC7G,QAAAC,IAAMC,EAAgC,IAAI,GAE1C,EAAE,cAAAC,EAAA,IAAiBC,EAA2BH,CAAG,GAEjDI,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAe,GACRH;EAAA;AAIb,SAAA,gBAAAI,EAACC,EAAa,QAAb,EACG,4BAACA,EAAa,SAAb,EAAqB,iBAAiBH,GAAuB,WAAWI,EAAO,QAC5E,UAAA,gBAAAF,EAAC,MAAG,EAAA,WAAWE,EAAO,MAAO,GAAGZ,EAAa,GAAG,KAAAI,GAAU,gBAAa,sBAE/D,UAAAS;AAAA,IACIX;AAAA,IACA,CAACY,GAAOC,MAAU;AAOV,WANY,CACZD;AAAAA;AAAAA,QAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,SAEtBA,CAAK,GAAG;AACjC,cAAMG,IAAYhB,EAAa;AAAA,UAC3B,MAAMiB,EAAqBJ,EAAM,KAAK;AAAA,UACtC,OAAAC;AAAA,UACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAC;AAAA,QAAA,CACzC;AAEG,eAAA,gBAAAJ;AAAA,UAACS;AAAAA,UAAA;AAAA,YACG,WAAWP,EAAO;AAAA,YAClB,oBAAkBb,MAAqBgB;AAAA,YAGvC,cAAc,CAACN,MAAU;AACrB,cAAIQ,EAAU,WACVA,EAAU,QAAQR,CAA2C;AAAA,YAErE;AAAA,YACC,GAAGQ;AAAA,YAEH,UAAAH;AAAA,UAAA;AAAA,UATI,GAAGA,EAAM,MAAM,KAAK;AAAA,QAAA;AAAA,MAYrC;AAAA,IACJ;AAAA,IACAX;AAAA,EACJ,EAAE,eAEV,CAAA,GACJ,EACJ,CAAA;AAER;AACAL,EAAW,cAAc;"}

package/dist/fondue-components51.js

@@ -0,0 +1,11 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import m from "./fondue-components52.js";
+const t = ({ children: e, name: o, "data-test-id": r = "fondue-select-slot", ...a }, s) => /* @__PURE__ */ l("div", { "data-test-id": r, ref: s, className: m.slot, "data-name": o, ...a, children: e });
+t.displayName = "Select.Slot";
+const S = d(t);
+export {
+  S as ForwardedRefSelectSlot,
+  t as SelectSlot
+};
+//# sourceMappingURL=fondue-components51.js.map

package/dist/fondue-components51.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components51.js","sources":["../src/components/Select/SelectSlot.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/select.module.scss';\n\nexport type SelectSlotProps = {\n    /**\n     * The children of the select slot. This can be a custom component.\n     */\n    children?: ReactNode;\n    /**\n     * The slot name that is used to determine the placement.\n     */\n    name: 'menu' | 'left' | 'right' | 'clear';\n    /**\n     * The data test id of the select slot.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-select-slot', ...props }: SelectSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={forwardedRef} className={styles.slot} data-name={name} {...props}>\n            {children}\n        </div>\n    );\n};\nSelectSlot.displayName = 'Select.Slot';\n\nexport const ForwardedRefSelectSlot = forwardRef<HTMLDivElement, SelectSlotProps>(SelectSlot);\n"],"names":["SelectSlot","children","name","dataTestId","props","forwardedRef","jsx","styles","ForwardedRefSelectSlot","forwardRef"],"mappings":";;;AAqBa,MAAAA,IAAa,CACtB,EAAE,UAAAC,GAAU,MAAAC,GAAM,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GAC9EC,MAGK,gBAAAC,EAAA,OAAA,EAAI,gBAAcH,GAAY,KAAKE,GAAc,WAAWE,EAAO,MAAM,aAAWL,GAAO,GAAGE,GAC1F,UAAAH,EACL,CAAA;AAGRD,EAAW,cAAc;AAEZ,MAAAQ,IAAyBC,EAA4CT,CAAU;"}

package/dist/fondue-components52.js

@@ -0,0 +1,30 @@
+const t = "_root_tjp5n_5", o = "_input_tjp5n_59", n = "_slot_tjp5n_78", _ = "_clear_tjp5n_127", c = "_icons_tjp5n_140", s = "_caret_tjp5n_146", r = "_iconSuccess_tjp5n_168", p = "_iconError_tjp5n_174", e = "_menu_tjp5n_180", i = "_portal_tjp5n_194", u = "_item_tjp5n_198", j = "_group_tjp5n_216", a = {
+  root: t,
+  input: o,
+  slot: n,
+  clear: _,
+  icons: c,
+  caret: s,
+  iconSuccess: r,
+  iconError: p,
+  menu: e,
+  portal: i,
+  item: u,
+  group: j
+};
+export {
+  s as caret,
+  _ as clear,
+  a as default,
+  j as group,
+  p as iconError,
+  r as iconSuccess,
+  c as icons,
+  o as input,
+  u as item,
+  e as menu,
+  i as portal,
+  t as root,
+  n as slot
+};
+//# sourceMappingURL=fondue-components52.js.map

package/dist/fondue-components52.js.map

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

package/dist/fondue-components53.js

@@ -0,0 +1,52 @@
+import { jsx as w } from "react/jsx-runtime";
+import { IconCross as x } from "@frontify/fondue-icons";
+import { useState as B, useMemo as i, Children as f, isValidElement as a, cloneElement as E, useCallback as v } from "react";
+import { ForwardedRefSelectItem as F } from "./fondue-components49.js";
+import { ForwardedRefSelectSlot as c } from "./fondue-components51.js";
+import { getSelectOptionValue as I } from "./fondue-components58.js";
+const S = (r) => {
+  const t = [];
+  return f.forEach(r, (o) => {
+    if (a(o) && o.type === F)
+      t.push(I(o.props));
+    else if (a(o) && o.props.children) {
+      const u = S(o.props.children);
+      for (const l of u)
+        t.push(l);
+    }
+  }), t;
+}, z = (r) => {
+  const [t, o] = B(""), { inputSlots: u, menuSlots: l, itemValues: p, clearButton: V } = i(() => {
+    const s = [], n = [];
+    let m;
+    f.toArray(r).some(
+      (e) => a(e) && e.type === c
+    ) ? f.forEach(r, (e) => {
+      a(e) && e.type === c && (e.props.name === "menu" ? n.push(e.props.children) : e.props.name === "left" || e.props.name === "right" ? s.push(e) : e.props.name === "clear" && (e.props.children ? m = e : m = E(e, { children: /* @__PURE__ */ w(x, { size: 16 }) })));
+    }) : n.push(r);
+    const g = S(n);
+    return { inputSlots: s, menuSlots: n, itemValues: g, clearButton: m };
+  }, [r]), y = i(
+    () => p.filter(
+      (s) => t === "" || s.label.toLowerCase().includes(t.toLowerCase())
+    ),
+    [p, t]
+  ), C = v(
+    (s) => s ? p.find((n) => n.value === s) : void 0,
+    [p]
+  );
+  return {
+    items: y,
+    menuSlots: l,
+    filterText: t,
+    inputSlots: u,
+    clearButton: V,
+    setFilterText: o,
+    getItemByValue: C
+  };
+};
+export {
+  S as getRecursiveOptionValues,
+  z as useSelectData
+};
+//# sourceMappingURL=fondue-components53.js.map

package/dist/fondue-components53.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components53.js","sources":["../src/components/Select/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { Children, cloneElement, isValidElement, useCallback, useMemo, useState, type ReactNode } from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\nimport { ForwardedRefSelectSlot, type SelectSlotProps } from './SelectSlot';\nimport { getSelectOptionValue } from './utils';\n\nexport type SelectItemType = {\n    value: string;\n    label: string;\n};\n\n/**\n * Recursively extracts option values from children.\n * This function traverses through the React component tree and collects all SelectItem values.\n *\n * @param {ReactNode} children - The React children to extract values from.\n * @returns {SelectItemType[]} An array of SelectItemType objects.\n *\n * @example\n * const options = (\n *   <SelectItem value=\"1\">Option 1</SelectItem>\n *   <SelectItem value=\"2\">Option 2</SelectItem>\n * );\n * const values = getRecursiveOptionValues(options);\n * // Returns: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]\n */\nexport const getRecursiveOptionValues = (children: ReactNode): { value: string; label: string }[] => {\n    const values: { value: string; label: string }[] = [];\n    Children.forEach(children, (child) => {\n        if (isValidElement<SelectItemProps>(child) && child.type === ForwardedRefSelectItem) {\n            values.push(getSelectOptionValue(child.props));\n        } else if (isValidElement<{ children: ReactNode }>(child) && child.props.children) {\n            const optionValues = getRecursiveOptionValues(child.props.children);\n            for (const optionValue of optionValues) {\n                values.push(optionValue);\n            }\n        }\n    });\n    return values;\n};\n\n/**\n * Custom hook for managing select data and filtering.\n *\n * @param {ReactNode} children - The React children to process, typically SelectItem components.\n * @returns {Object} An object containing the processed data.\n */\nexport const useSelectData = (children: ReactNode) => {\n    const [filterText, setFilterText] = useState('');\n    const { inputSlots, menuSlots, itemValues, clearButton } = useMemo(() => {\n        const inputSlots: ReactNode[] = [];\n        const menuSlots: ReactNode[] = [];\n        let clearButton: ReactNode;\n\n        const hasSlots = Children.toArray(children).some(\n            (child) => isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot,\n        );\n\n        if (hasSlots) {\n            Children.forEach(children, (child) => {\n                if (isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot) {\n                    if (child.props.name === 'menu') {\n                        menuSlots.push(child.props.children);\n                    } else if (child.props.name === 'left' || child.props.name === 'right') {\n                        inputSlots.push(child);\n                    } else if (child.props.name === 'clear') {\n                        if (child.props.children) {\n                            clearButton = child;\n                        } else {\n                            clearButton = cloneElement(child, { children: <IconCross size={16} /> });\n                        }\n                    }\n                }\n            });\n        } else {\n            menuSlots.push(children);\n        }\n\n        const itemValues = getRecursiveOptionValues(menuSlots);\n\n        return { inputSlots, menuSlots, itemValues, clearButton };\n    }, [children]);\n\n    const items = useMemo(\n        () =>\n            itemValues.filter(\n                (item) => filterText === '' || item.label.toLowerCase().includes(filterText.toLowerCase()),\n            ),\n        [itemValues, filterText],\n    );\n\n    const getItemByValue = useCallback(\n        (value?: string) => (value ? itemValues.find((item) => item.value === value) : undefined),\n        [itemValues],\n    );\n\n    return {\n        items,\n        menuSlots,\n        filterText,\n        inputSlots,\n        clearButton,\n        setFilterText,\n        getItemByValue,\n    };\n};\n"],"names":["getRecursiveOptionValues","children","values","Children","child","isValidElement","ForwardedRefSelectItem","getSelectOptionValue","optionValues","optionValue","useSelectData","filterText","setFilterText","useState","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","IconCross","items","item","getItemByValue","useCallback","value"],"mappings":";;;;;;AA6Ba,MAAAA,IAA2B,CAACC,MAA4D;AACjG,QAAMC,IAA6C,CAAA;AAC1C,SAAAC,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,QAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASE;AACzD,MAAAJ,EAAO,KAAKK,EAAqBH,EAAM,KAAK,CAAC;AAAA,aACtCC,EAAwCD,CAAK,KAAKA,EAAM,MAAM,UAAU;AAC/E,YAAMI,IAAeR,EAAyBI,EAAM,MAAM,QAAQ;AAClE,iBAAWK,KAAeD;AACtB,QAAAN,EAAO,KAAKO,CAAW;AAAA,IAE/B;AAAA,EAAA,CACH,GACMP;AACX,GAQaQ,IAAgB,CAACT,MAAwB;AAClD,QAAM,CAACU,GAAYC,CAAa,IAAIC,EAAS,EAAE,GACzC,EAAE,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAQ,MAAM;AACrE,UAAMJ,IAA0B,CAAA,GAC1BC,IAAyB,CAAA;AAC3BE,QAAAA;AAMJ,IAJiBd,EAAS,QAAQF,CAAQ,EAAE;AAAA,MACxC,CAACG,MAAUC,EAAgCD,CAAK,KAAKA,EAAM,SAASe;AAAA,IAAA,IAI3DhB,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,MAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASe,MACrDf,EAAM,MAAM,SAAS,SACrBW,EAAU,KAAKX,EAAM,MAAM,QAAQ,IAC5BA,EAAM,MAAM,SAAS,UAAUA,EAAM,MAAM,SAAS,UAC3DU,EAAW,KAAKV,CAAK,IACdA,EAAM,MAAM,SAAS,YACxBA,EAAM,MAAM,WACZa,IAAcb,IAEda,IAAcG,EAAahB,GAAO,EAAE,4BAAWiB,GAAU,EAAA,MAAM,GAAI,CAAA,EAAI,CAAA;AAAA,IAGnF,CACH,IAEDN,EAAU,KAAKd,CAAQ;AAGrBe,UAAAA,IAAahB,EAAyBe,CAAS;AAE9C,WAAA,EAAE,YAAAD,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC;EAAY,GACzD,CAAChB,CAAQ,CAAC,GAEPqB,IAAQJ;AAAA,IACV,MACIF,EAAW;AAAA,MACP,CAACO,MAASZ,MAAe,MAAMY,EAAK,MAAM,YAAA,EAAc,SAASZ,EAAW,aAAa;AAAA,IAC7F;AAAA,IACJ,CAACK,GAAYL,CAAU;AAAA,EAAA,GAGrBa,IAAiBC;AAAA,IACnB,CAACC,MAAoBA,IAAQV,EAAW,KAAK,CAACO,MAASA,EAAK,UAAUG,CAAK,IAAI;AAAA,IAC/E,CAACV,CAAU;AAAA,EAAA;AAGR,SAAA;AAAA,IACH,OAAAM;AAAA,IACA,WAAAP;AAAA,IACA,YAAAJ;AAAA,IACA,YAAAG;AAAA,IACA,aAAAG;AAAA,IACA,eAAAL;AAAA,IACA,gBAAAY;AAAA,EAAA;AAER;"}

package/dist/fondue-components54.js

@@ -0,0 +1,21 @@
+const s = "_root_zfs0q_5", o = "_input_zfs0q_52", t = "_slot_zfs0q_71", _ = "_iconSuccess_zfs0q_121", n = "_iconError_zfs0q_129", c = "_loadingStatus_zfs0q_137", i = "_spin_zfs0q_1", r = {
+  root: s,
+  input: o,
+  slot: t,
+  iconSuccess: _,
+  iconError: n,
+  loadingStatus: c,
+  spin: i,
+  "tw-dark": "_tw-dark_zfs0q_169"
+};
+export {
+  r as default,
+  n as iconError,
+  _ as iconSuccess,
+  o as input,
+  c as loadingStatus,
+  s as root,
+  t as slot,
+  i as spin
+};
+//# sourceMappingURL=fondue-components54.js.map

package/dist/fondue-components54.js.map

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

package/dist/fondue-components55.js

@@ -0,0 +1,10 @@
+const o = "_root_3kc21_4", r = "_arrow_3kc21_20", t = {
+  root: o,
+  arrow: r
+};
+export {
+  r as arrow,
+  t as default,
+  o as root
+};
+//# sourceMappingURL=fondue-components55.js.map

package/dist/fondue-components55.js.map

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

package/dist/fondue-components56.js

@@ -0,0 +1,5 @@
+const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
+export {
+  t as FOCUS_OUTLINE
+};
+//# sourceMappingURL=fondue-components56.js.map

package/dist/fondue-components56.js.map

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

package/dist/fondue-components57.js

@@ -0,0 +1,14 @@
+const o = "_root_6hy5w_5", c = "_colorName_6hy5w_53", t = "_colorIndicator_6hy5w_57", r = "_caret_6hy5w_63", _ = {
+  root: o,
+  colorName: c,
+  colorIndicator: t,
+  caret: r
+};
+export {
+  r as caret,
+  t as colorIndicator,
+  c as colorName,
+  _ as default,
+  o as root
+};
+//# sourceMappingURL=fondue-components57.js.map

package/dist/fondue-components57.js.map

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

package/dist/fondue-components58.js

@@ -0,0 +1,42 @@
+import { Children as a, isValidElement as u, cloneElement as f } from "react";
+import { ForwardedRefSelectItem as E } from "./fondue-components49.js";
+const g = ({
+  children: r,
+  value: o,
+  label: s
+}) => r && typeof r == "string" ? {
+  value: o || r,
+  label: s || r
+} : {
+  value: o || "",
+  label: s || o || ""
+}, w = (r, o) => u(r) && r.type === o, y = (r, o, s, p = 0) => {
+  const n = [];
+  let t = 0;
+  return a.forEach(r, (e) => {
+    if (w(e, E) && u(e))
+      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(o(e, p + t)), t++);
+    else if (u(e) && (e != null && e.props.children)) {
+      const { parsedChildren: m, subElementCount: C } = y(
+        e.props.children,
+        o,
+        "",
+        p + t
+      );
+      e = f(e, {
+        children: m,
+        key: `group-${p + t}`
+      }), n.push(e), t += C;
+    } else
+      n.push(e);
+  }), {
+    parsedChildren: n,
+    subElementCount: t
+  };
+};
+export {
+  g as getSelectOptionValue,
+  w as isReactLeaf,
+  y as recursiveMap
+};
+//# sourceMappingURL=fondue-components58.js.map

package/dist/fondue-components58.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components58.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n    };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n    isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n            if (\n                getSelectOptionValue(child.props)\n                    .label.toLowerCase()\n                    .includes(filterText?.toLowerCase() || '')\n            ) {\n                resultingChildren.push(callback(child, nextIndex + itemCounter));\n                itemCounter++;\n            }\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAIQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAAA,IAIxB;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AAAA,GAmB3BE,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAA;AACvC,MAAIC,IAAc;AACT,SAAAC,EAAA,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAC1E,YAAA,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAAA;AAEhB,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GACbQ,KAAAI;AAAA,IAAA;AAEf,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAChC,CACH,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EAAA;AAEzB;"}

package/dist/fondue-components6.js

@@ -1,33 +1,51 @@
-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-components15.js";
-import { dividerStyles as n } from "./fondue-components21.js";
-const r = ({
-  "data-test-id": o = "fondue-divider",
-  direction: t = "horizontal",
-  className: i,
-  variant: e,
-  ...d
-}, a) => /* @__PURE__ */ m(
-  s.Root,
-  {
-    ref: a,
-    className: f(
-      n({
-        direction: t,
-        variant: e,
-        ...d
-      }),
-      i
-    ),
-    "data-test-id": o
-  }
-);
-r.displayName = "Divider";
-const u = p(r);
+import { jsx as i } from "react/jsx-runtime";
+import { Slot as u } from "@radix-ui/react-slot";
+import { forwardRef as k, useState as R, Children as P } from "react";
+import { ForwardedRefColorGradientInput as F } from "./fondue-components29.js";
+import { ForwardedRefColorPickerInput as y } from "./fondue-components30.js";
+import { ForwardedRefColorValueInput as N } from "./fondue-components31.js";
+import I from "./fondue-components32.js";
+import { getColorWithName as d, DEFAULT_COLOR as w, DEFAULT_FORMAT as h } from "./fondue-components33.js";
+const m = ({
+  children: t,
+  currentColor: o = w,
+  onColorChange: a = () => {
+  },
+  defaultFormat: p = h,
+  "data-test-id": s = "color-picker-input",
+  ...c
+}, n) => {
+  const [l, C] = R(p);
+  return /* @__PURE__ */ i("div", { className: I.root, "data-picker-type": "custom-color", "data-test-id": s, ref: n, children: P.map(t, (f) => /* @__PURE__ */ i(
+    G,
+    {
+      ...c,
+      onColorChange: (r) => {
+        a(d(r, l));
+      },
+      currentColor: o,
+      currentFormat: l,
+      setCurrentFormat: (r) => {
+        C(r), a(d(o, r));
+      },
+      children: f
+    }
+  )) });
+};
+m.displayName = "ColorPicker";
+const G = ({ children: t, ...o }) => /* @__PURE__ */ i(u, { ...o, children: t }), V = k(m), e = {
+  Root: V,
+  Values: N,
+  Gradient: F,
+  Input: y
+};
+e.Root.displayName = "ColorPicker.Root";
+e.Values.displayName = "ColorPicker.Values";
+e.Gradient.displayName = "ColorPicker.Gradient";
+e.Input.displayName = "ColorPicker.Input";
 export {
-  u as Divider,
-  r as DividerComponent
+  e as ColorPicker,
+  m as ColorPickerRoot,
+  V as ForwardedRefColorPicker
 };
 //# sourceMappingURL=fondue-components6.js.map

package/dist/fondue-components6.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components6.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;"}
+{"version":3,"file":"fondue-components6.js","sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { Children, forwardRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ForwardedRefColorGradientInput } from './ColorGradientInput';\nimport { ForwardedRefColorPickerInput } from './ColorPickerInput';\nimport { ForwardedRefColorValueInput } from './ColorValueInput';\nimport styles from './styles/customColorPicker.module.scss';\nimport { type ColorFormat, type RgbaColor } from './types';\nimport { DEFAULT_COLOR, DEFAULT_FORMAT, getColorWithName } from './utils';\n\ntype ColorPickerProps = {\n    /**\n     * The children of the color picker component. This can contain multiple `ColorPicker.Values` or `ColorPicker.Gradient` components.\n     */\n    children?: ReactNode;\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * Event handler called when the color changes\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * The default format to use for the color input\n     * @default \"HEX\"\n     */\n    defaultFormat?: ColorFormat;\n    /**\n     * The test id of the color picker\n     */\n    'data-test-id'?: string;\n};\n\nexport const ColorPickerRoot = (\n    {\n        children,\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        defaultFormat = DEFAULT_FORMAT,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const [currentFormat, setCurrentFormat] = useState<ColorFormat>(defaultFormat);\n\n    return (\n        <div className={styles.root} data-picker-type=\"custom-color\" data-test-id={dataTestId} ref={forwardedRef}>\n            {Children.map(children, (child) => (\n                <ColorPickerSlot\n                    {...props}\n                    onColorChange={(color: RgbaColor) => {\n                        onColorChange(getColorWithName(color, currentFormat));\n                    }}\n                    currentColor={currentColor}\n                    currentFormat={currentFormat}\n                    setCurrentFormat={(currentFormat: ColorFormat) => {\n                        setCurrentFormat(currentFormat);\n                        onColorChange(getColorWithName(currentColor, currentFormat));\n                    }}\n                >\n                    {child}\n                </ColorPickerSlot>\n            ))}\n        </div>\n    );\n};\nColorPickerRoot.displayName = 'ColorPicker';\n\ntype ColorPickerSlotProps = ColorPickerProps & {\n    currentFormat?: ColorFormat;\n    setCurrentFormat?: (format: ColorFormat) => void;\n};\nconst ColorPickerSlot = ({ children, ...props }: ColorPickerSlotProps) => <RadixSlot {...props}>{children}</RadixSlot>;\n\nexport const ForwardedRefColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(ColorPickerRoot);\n\nexport const ColorPicker = {\n    Root: ForwardedRefColorPicker,\n    Values: ForwardedRefColorValueInput,\n    Gradient: ForwardedRefColorGradientInput,\n    Input: ForwardedRefColorPickerInput,\n};\n\nColorPicker.Root.displayName = 'ColorPicker.Root';\nColorPicker.Values.displayName = 'ColorPicker.Values';\nColorPicker.Gradient.displayName = 'ColorPicker.Gradient';\nColorPicker.Input.displayName = 'ColorPicker.Input';\n"],"names":["ColorPickerRoot","children","currentColor","DEFAULT_COLOR","onColorChange","defaultFormat","DEFAULT_FORMAT","dataTestId","props","forwardedRef","currentFormat","setCurrentFormat","useState","jsx","styles","Children","child","ColorPickerSlot","color","getColorWithName","RadixSlot","ForwardedRefColorPicker","forwardRef","ColorPicker","ForwardedRefColorValueInput","ForwardedRefColorGradientInput","ForwardedRefColorPickerInput"],"mappings":";;;;;;;;AAoCO,MAAMA,IAAkB,CAC3B;AAAA,EACI,UAAAC;AAAA,EACA,cAAAC,IAAeC;AAAA,EACf,eAAAC,IAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,eAAAC,IAAgBC;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACD,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAsBP,CAAa;AAE7E,SACK,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,MAAM,oBAAiB,gBAAe,gBAAcP,GAAY,KAAKE,GACvF,UAAAM,EAAS,IAAId,GAAU,CAACe,MACrB,gBAAAH;AAAA,IAACI;AAAA,IAAA;AAAA,MACI,GAAGT;AAAA,MACJ,eAAe,CAACU,MAAqB;AACnB,QAAAd,EAAAe,EAAiBD,GAAOR,CAAa,CAAC;AAAA,MACxD;AAAA,MACA,cAAAR;AAAA,MACA,eAAAQ;AAAA,MACA,kBAAkB,CAACA,MAA+B;AAC9C,QAAAC,EAAiBD,CAAa,GAChBN,EAAAe,EAAiBjB,GAAcQ,CAAa,CAAC;AAAA,MAC/D;AAAA,MAEC,UAAAM;AAAA,IAAA;AAAA,EAER,CAAA,EACL,CAAA;AAER;AACAhB,EAAgB,cAAc;AAM9B,MAAMiB,IAAkB,CAAC,EAAE,UAAAhB,GAAU,GAAGO,EAAM,MAA6B,gBAAAK,EAAAO,GAAA,EAAW,GAAGZ,GAAQ,UAAAP,EAAS,CAAA,GAE7FoB,IAA0BC,EAA6CtB,CAAe,GAEtFuB,IAAc;AAAA,EACvB,MAAMF;AAAA,EACN,QAAQG;AAAA,EACR,UAAUC;AAAA,EACV,OAAOC;AACX;AAEAH,EAAY,KAAK,cAAc;AAC/BA,EAAY,OAAO,cAAc;AACjCA,EAAY,SAAS,cAAc;AACnCA,EAAY,MAAM,cAAc;"}