@frontify/fondue-components 3.0.2 → 3.1.0

package/dist/fondue-components10.js

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

package/dist/fondue-components11.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import * as r from "@radix-ui/react-toggle-group";
 import { forwardRef as m } from "react";
-import { useControllableState as S } from "./fondue-components25.js";
-import { segmentedControlRootStyles as f, segmentedControlActiveIndicatorStyles as I, segmentedControlItemStyles as y, segmentedControlItemSeparatorStyles as N, segmentedControlItemLabelStyles as u, segmentedControlItemLabelActiveStyles as b, segmentedControlItemLabelInactiveStyles as h } from "./fondue-components26.js";
+import { useControllableState as S } from "./fondue-components27.js";
+import { segmentedControlRootStyles as f, segmentedControlActiveIndicatorStyles as I, segmentedControlItemStyles as y, segmentedControlItemSeparatorStyles as N, segmentedControlItemLabelStyles as u, segmentedControlItemLabelActiveStyles as b, segmentedControlItemLabelInactiveStyles as h } from "./fondue-components28.js";
 const d = ({ children: e, value: o, defaultValue: s, onValueChange: c, ...a }, g) => {
   const [p, C] = S({
     prop: o,

package/dist/fondue-components12.js

@@ -4,12 +4,12 @@ import * as p from "@radix-ui/react-popover";
 import { Slot as j } from "@radix-ui/react-slot";
 import { useSelect as D } from "downshift";
 import { forwardRef as M } from "react";
-import { ForwardedRefCombobox as T } from "./fondue-components27.js";
-import { ForwardedRefSelectItem as k, ForwardedRefSelectItemGroup as z } from "./fondue-components28.js";
-import { SelectMenu as A } from "./fondue-components29.js";
-import { ForwardedRefSelectSlot as O } from "./fondue-components30.js";
-import r from "./fondue-components31.js";
-import { useSelectData as V } from "./fondue-components32.js";
+import { ForwardedRefCombobox as T } from "./fondue-components29.js";
+import { ForwardedRefSelectItem as k, ForwardedRefSelectItemGroup as z } from "./fondue-components30.js";
+import { SelectMenu as A } from "./fondue-components31.js";
+import { ForwardedRefSelectSlot as O } from "./fondue-components32.js";
+import r from "./fondue-components33.js";
+import { useSelectData as V } from "./fondue-components34.js";
 const n = ({
   children: S,
   onSelect: a,

package/dist/fondue-components13.js

@@ -2,7 +2,7 @@ import { jsxs as g, jsx as s } from "react/jsx-runtime";
 import { IconCheckMark as w, IconExclamationMarkTriangle as N } from "@frontify/fondue-icons";
 import { forwardRef as n, useRef as S } from "react";
 import { cn as m } from "./fondue-components15.js";
-import r from "./fondue-components33.js";
+import r from "./fondue-components35.js";
 const f = ({
   children: c,
   className: d,

package/dist/fondue-components14.js

@@ -2,7 +2,7 @@ import { jsx as t, jsxs as c } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-tooltip";
 import { forwardRef as a } from "react";
 import { cn as T } from "./fondue-components15.js";
-import { tooltipContentStyles as f, tooltipArrowStyles as g } from "./fondue-components34.js";
+import { tooltipContentStyles as f, tooltipArrowStyles as g } from "./fondue-components36.js";
 const d = ({ children: i, enterDelay: e = 700, open: r, onOpenChange: n }) => /* @__PURE__ */ t(o.Provider, { children: /* @__PURE__ */ t(o.Root, { delayDuration: e, open: r, onOpenChange: n, children: i }) });
 d.displayName = "Tooltip.Root";
 const s = ({ children: i, "data-test-id": e = "fondue-tooltip-content" }, r) => /* @__PURE__ */ t(o.Trigger, { "data-test-id": e, asChild: !0, ref: r, children: i });

package/dist/fondue-components14.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components14.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { tooltipArrowStyles, tooltipContentStyles } from './styles/tooltipStyles';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\nexport type TooltipTriggerProps = { children: ReactNode; 'data-test-id'?: string };\nexport type TooltipContentProps = {\n    /**\n     * @default spacious\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preffered side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport const TooltipTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-tooltip-content' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger data-test-id={dataTestId} asChild ref={ref}>\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        ...props\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixTooltip.Portal>\n            <RadixTooltip.Content\n                data-test-id={dataTestId}\n                className={cn(\n                    tooltipContentStyles({\n                        ...props,\n                    }),\n                    className,\n                )}\n                style={{ maxWidth }}\n                collisionPadding={16}\n                sideOffset={8}\n                ref={ref}\n                {...props}\n            >\n                {children}\n\n                <RadixTooltip.Arrow asChild>\n                    <div aria-hidden=\"true\" className={tooltipArrowStyles} />\n                </RadixTooltip.Arrow>\n            </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","jsx","RadixTooltip","TooltipTrigger","dataTestId","ref","TooltipContent","className","maxWidth","props","jsxs","cn","tooltipContentStyles","tooltipArrowStyles","Tooltip","forwardRef"],"mappings":";;;;;AAyCa,MAAAA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,QAEvD,gBAAAC,EAAAC,EAAa,UAAb,EACG,UAAC,gBAAAD,EAAAC,EAAa,MAAb,EAAkB,eAAeJ,GAAY,MAAAC,GAAY,cAAAC,GACrD,UAAAH,GACL,EACJ,CAAA;AAGRD,EAAY,cAAc;AAEb,MAAAO,IAAiB,CAC1B,EAAE,UAAAN,GAAU,gBAAgBO,IAAa,4BACzCC,MAGI,gBAAAJ,EAACC,EAAa,SAAb,EAAqB,gBAAcE,GAAY,SAAO,IAAC,KAAAC,GACnD,UAAAR,EACL,CAAA;AAGRM,EAAe,cAAc;AAEtB,MAAMG,IAAiB,CAC1B;AAAA,EACI,UAAAT;AAAA,EACA,WAAAU;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,GAAGK;AACP,GACAJ,MAGI,gBAAAJ,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAQ;AAAA,EAACR,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcE;AAAA,IACd,WAAWO;AAAA,MACPC,EAAqB;AAAA,QACjB,GAAGH;AAAA,MAAA,CACN;AAAA,MACDF;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAAC,EAAS;AAAA,IAClB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,KAAAH;AAAA,IACC,GAAGI;AAAA,IAEH,UAAA;AAAA,MAAAZ;AAAA,MAEA,gBAAAI,EAAAC,EAAa,OAAb,EAAmB,SAAO,IACvB,UAAC,gBAAAD,EAAA,OAAA,EAAI,eAAY,QAAO,WAAWY,EAAA,CAAoB,EAC3D,CAAA;AAAA,IAAA;AAAA,EAAA;AAER,EAAA,CAAA;AAGRP,EAAe,cAAc;AAEtB,MAAMQ,IAAU;AAAA,EACnB,MAAMlB;AAAA,EACN,SAASmB,EAAmDZ,CAAc;AAAA,EAC1E,SAASY,EAAgDT,CAAc;AAC3E;"}
+{"version":3,"file":"fondue-components14.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { tooltipArrowStyles, tooltipContentStyles } from './styles/tooltipStyles';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\nexport type TooltipTriggerProps = { children: ReactNode; 'data-test-id'?: string };\nexport type TooltipContentProps = {\n    /**\n     * @default spacious\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport const TooltipTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-tooltip-content' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger data-test-id={dataTestId} asChild ref={ref}>\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        ...props\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixTooltip.Portal>\n            <RadixTooltip.Content\n                data-test-id={dataTestId}\n                className={cn(\n                    tooltipContentStyles({\n                        ...props,\n                    }),\n                    className,\n                )}\n                style={{ maxWidth }}\n                collisionPadding={16}\n                sideOffset={8}\n                ref={ref}\n                {...props}\n            >\n                {children}\n\n                <RadixTooltip.Arrow asChild>\n                    <div aria-hidden=\"true\" className={tooltipArrowStyles} />\n                </RadixTooltip.Arrow>\n            </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","jsx","RadixTooltip","TooltipTrigger","dataTestId","ref","TooltipContent","className","maxWidth","props","jsxs","cn","tooltipContentStyles","tooltipArrowStyles","Tooltip","forwardRef"],"mappings":";;;;;AAyCa,MAAAA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,QAEvD,gBAAAC,EAAAC,EAAa,UAAb,EACG,UAAC,gBAAAD,EAAAC,EAAa,MAAb,EAAkB,eAAeJ,GAAY,MAAAC,GAAY,cAAAC,GACrD,UAAAH,GACL,EACJ,CAAA;AAGRD,EAAY,cAAc;AAEb,MAAAO,IAAiB,CAC1B,EAAE,UAAAN,GAAU,gBAAgBO,IAAa,4BACzCC,MAGI,gBAAAJ,EAACC,EAAa,SAAb,EAAqB,gBAAcE,GAAY,SAAO,IAAC,KAAAC,GACnD,UAAAR,EACL,CAAA;AAGRM,EAAe,cAAc;AAEtB,MAAMG,IAAiB,CAC1B;AAAA,EACI,UAAAT;AAAA,EACA,WAAAU;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,GAAGK;AACP,GACAJ,MAGI,gBAAAJ,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAQ;AAAA,EAACR,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcE;AAAA,IACd,WAAWO;AAAA,MACPC,EAAqB;AAAA,QACjB,GAAGH;AAAA,MAAA,CACN;AAAA,MACDF;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAAC,EAAS;AAAA,IAClB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,KAAAH;AAAA,IACC,GAAGI;AAAA,IAEH,UAAA;AAAA,MAAAZ;AAAA,MAEA,gBAAAI,EAAAC,EAAa,OAAb,EAAmB,SAAO,IACvB,UAAC,gBAAAD,EAAA,OAAA,EAAI,eAAY,QAAO,WAAWY,EAAA,CAAoB,EAC3D,CAAA;AAAA,IAAA;AAAA,EAAA;AAER,EAAA,CAAA;AAGRP,EAAe,cAAc;AAEtB,MAAMQ,IAAU;AAAA,EACnB,MAAMlB;AAAA,EACN,SAASmB,EAAmDZ,CAAc;AAAA,EAC1E,SAASY,EAAgDT,CAAc;AAC3E;"}

package/dist/fondue-components16.js

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

package/dist/fondue-components19.js

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

package/dist/fondue-components22.js

@@ -1,20 +1,18 @@
-const t = "_content_1e0pr_5", n = "_subContent_1e0pr_6", e = "_item_1e0pr_16", o = "_subTrigger_1e0pr_17", s = "_subMenuIndicator_1e0pr_54", _ = "_group_1e0pr_60", r = "_slot_1e0pr_67", u = {
-  content: t,
-  subContent: n,
-  item: e,
-  subTrigger: o,
-  subMenuIndicator: s,
-  group: _,
-  slot: r
-};
+import { useCallback as r, useLayoutEffect as n } from "react";
+import { isElementVisible as i, setMaxHeightToAvailableSpace as o } from "./fondue-components23.js";
+function u(t) {
+  const e = r(() => {
+    requestAnimationFrame(() => {
+      t.current && i(t.current) && o(t.current);
+    });
+  }, [t]);
+  return n(() => (e(), window.addEventListener("resize", e), () => {
+    window.removeEventListener("resize", e);
+  }), [e]), {
+    setMaxHeight: e
+  };
+}
 export {
-  t as content,
-  u as default,
-  _ as group,
-  e as item,
-  r as slot,
-  n as subContent,
-  s as subMenuIndicator,
-  o as subTrigger
+  u as usePreventDropdownOverflow
 };
 //# sourceMappingURL=fondue-components22.js.map

package/dist/fondue-components22.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components22.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"fondue-components22.js","sources":["../src/hooks/usePreventDropdownOverflow.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RefObject, useCallback, useLayoutEffect } from 'react';\n\nimport { isElementVisible, setMaxHeightToAvailableSpace } from '#/utilities/domUtilities';\n\n/**\n * Custom hook to dynamically adjust the maximum height of an HTMLElement\n * based on the window's resize events. This function provides an object\n * containing the `setMaxHeight` method to manually trigger\n * the maximum height adjustment if needed.\n *\n * ! Note: Components utilizing this hook should have tests in place to verify\n * ! that in each scenario, the height is correctly adjusted accodrding to the\n * ! requirements of the component and the viewport.\n *\n * @param {RefObject<HTMLElement | null>} ref - A reference to the HTMLElement.\n * @returns {Object} An object containing `setMaxHeight` method.\n */\nexport function usePreventDropdownOverflow(ref: RefObject<HTMLElement | null>) {\n    const setMaxHeight = useCallback(() => {\n        requestAnimationFrame(() => {\n            if (ref.current && isElementVisible(ref.current)) {\n                setMaxHeightToAvailableSpace(ref.current);\n            }\n        });\n    }, [ref]);\n\n    useLayoutEffect(() => {\n        setMaxHeight();\n        window.addEventListener('resize', setMaxHeight);\n        return () => {\n            window.removeEventListener('resize', setMaxHeight);\n        };\n    }, [setMaxHeight]);\n\n    return {\n        setMaxHeight,\n    };\n}\n"],"names":["usePreventDropdownOverflow","ref","setMaxHeight","useCallback","isElementVisible","setMaxHeightToAvailableSpace","useLayoutEffect"],"mappings":";;AAmBO,SAASA,EAA2BC,GAAoC;AACrE,QAAAC,IAAeC,EAAY,MAAM;AACnC,0BAAsB,MAAM;AACxB,MAAIF,EAAI,WAAWG,EAAiBH,EAAI,OAAO,KAC3CI,EAA6BJ,EAAI,OAAO;AAAA,IAC5C,CACH;AAAA,EAAA,GACF,CAACA,CAAG,CAAC;AAER,SAAAK,EAAgB,OACCJ,KACN,OAAA,iBAAiB,UAAUA,CAAY,GACvC,MAAM;AACF,WAAA,oBAAoB,UAAUA,CAAY;AAAA,EAAA,IAEtD,CAACA,CAAY,CAAC,GAEV;AAAA,IACH,cAAAA;AAAA,EAAA;AAER;"}

package/dist/fondue-components23.js

@@ -1,20 +1,22 @@
-import { sv as t } from "./fondue-components15.js";
-const a = t({
-  base: 'tw-block tw-bg-base tw-shadow-mid tw-border tw-border-line tw-w-full sm:tw-w-fit sm:tw-max-w-[--flyout-max-width] tw-group tw-mt-4 sm:tw-mt-0 [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:tw-p-2 [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:tw-w-screen [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:!tw-translate-x-0 [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:!tw-translate-y-0 before:tw-fixed tw-content-[""] before:tw-top-0 before:tw-left-0 before:tw-h-screen before:tw-w-screen before:tw-bg-black before:tw-opacity-30 before:tw-z-[-1] before:tw-pointer-events-none sm:before:tw-hidden',
-  variants: {
-    rounded: {
-      true: "tw-rounded",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    rounded: !0
-  }
-}), e = "tw-flex tw-justify-between tw-items-center tw-border-b tw-border-line tw-font-medium group-data-[flyout-spacing=compact]:tw-p-4 group-data-[flyout-spacing=comfortable]:tw-p-6 group-data-[flyout-spacing=spacious]:tw-p-10 ", r = "tw-flex tw-justify-end tw-gap-2 tw-border-t tw-border-line tw-font-medium group-data-[flyout-spacing=compact]:tw-p-4 group-data-[flyout-spacing=comfortable]:tw-p-6 group-data-[flyout-spacing=spacious]:tw-p-10 ", p = "tw-flex tw-flex-col tw-gap-4 group-data-[flyout-spacing=compact]:tw-px-4 group-data-[flyout-spacing=compact]:tw-py-2 group-data-[flyout-spacing=comfortable]:tw-px-6 group-data-[flyout-spacing=comfortable]:tw-py-4 group-data-[flyout-spacing=spacious]:tw-px-10 group-data-[flyout-spacing=spacious]:tw-py-6 ";
+const c = 8;
+function h(n) {
+  if (!window)
+    throw new Error("Window object not found, this method should be used in a browser environment");
+  n.style.maxHeight = "";
+  const { top: t, bottom: i } = n.getBoundingClientRect();
+  t - 8 < 0 ? n.style.maxHeight = `${i - 8}px` : i + 8 > window.innerHeight && (n.style.maxHeight = `${window.innerHeight - t - 8}px`);
+}
+function r(n) {
+  const t = n.getBoundingClientRect(), i = t.width > 0 && t.height > 0, e = window.getComputedStyle(n), o = e.display !== "none" && e.visibility !== "hidden" && parseFloat(e.opacity) !== 0, s = t.top < window.innerHeight && t.left < window.innerWidth && t.bottom > 0 && t.right > 0;
+  return i && o && s;
+}
+function H(n, t) {
+  t && (typeof t == "function" ? t(n.current) : t && "current" in t && (t.current = n.current));
+}
 export {
-  p as flyoutBodyStyles,
-  a as flyoutContentStyles,
-  r as flyoutFooterStyles,
-  e as flyoutHeaderStyles
+  c as MAX_HEIGHT_MARGIN,
+  r as isElementVisible,
+  h as setMaxHeightToAvailableSpace,
+  H as syncRefs
 };
 //# sourceMappingURL=fondue-components23.js.map

package/dist/fondue-components23.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components23.js","sources":["../src/components/Flyout/styles/flyoutStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const flyoutContentStyles = sv({\n    base:\n        'tw-block tw-bg-base tw-shadow-mid tw-border tw-border-line tw-w-full sm:tw-w-fit sm:tw-max-w-[--flyout-max-width] tw-group tw-mt-4 sm:tw-mt-0 ' +\n        // Mobile view flyout -> dialog responsiveness\n        '[body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:tw-p-2 [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:tw-w-screen [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:!tw-translate-x-0 [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:!tw-translate-y-0 ' +\n        // Responsive dialog background element\n        'before:tw-fixed tw-content-[\"\"] before:tw-top-0 before:tw-left-0 before:tw-h-screen before:tw-w-screen before:tw-bg-black before:tw-opacity-30 before:tw-z-[-1] before:tw-pointer-events-none sm:before:tw-hidden',\n    variants: {\n        rounded: {\n            true: 'tw-rounded',\n            false: '',\n        },\n    },\n    defaultVariants: {\n        rounded: true,\n    },\n});\n\nexport const flyoutHeaderStyles =\n    'tw-flex tw-justify-between tw-items-center tw-border-b tw-border-line tw-font-medium ' +\n    'group-data-[flyout-spacing=compact]:tw-p-4 ' +\n    'group-data-[flyout-spacing=comfortable]:tw-p-6 ' +\n    'group-data-[flyout-spacing=spacious]:tw-p-10 ';\n\nexport const flyoutFooterStyles =\n    'tw-flex tw-justify-end tw-gap-2 tw-border-t tw-border-line tw-font-medium ' +\n    'group-data-[flyout-spacing=compact]:tw-p-4 ' +\n    'group-data-[flyout-spacing=comfortable]:tw-p-6 ' +\n    'group-data-[flyout-spacing=spacious]:tw-p-10 ';\n\nexport const flyoutBodyStyles =\n    'tw-flex tw-flex-col tw-gap-4 ' +\n    'group-data-[flyout-spacing=compact]:tw-px-4 group-data-[flyout-spacing=compact]:tw-py-2 ' +\n    'group-data-[flyout-spacing=comfortable]:tw-px-6 group-data-[flyout-spacing=comfortable]:tw-py-4 ' +\n    'group-data-[flyout-spacing=spacious]:tw-px-10 group-data-[flyout-spacing=spacious]:tw-py-6 ';\n"],"names":["flyoutContentStyles","sv","flyoutHeaderStyles","flyoutFooterStyles","flyoutBodyStyles"],"mappings":";AAIO,MAAMA,IAAsBC,EAAG;AAAA,EAClC,MACI;AAAA,EAKJ,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,EACb;AACJ,CAAC,GAEYC,IACT,gOAKSC,IACT,qNAKSC,IACT;"}
+{"version":3,"file":"fondue-components23.js","sources":["../src/utilities/domUtilities.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, type RefObject } from 'react';\n\nexport const MAX_HEIGHT_MARGIN = 8;\n\n/**\n * Sets the maximum height for a dialog element based on its position on the viewport.\n * The function calculates the space below the dialog up to the bottom of the viewport window,\n * subtracting a default margin, and sets this value as the max-height style of the dialog.\n *\n * @param {HTMLElement} dialog - The dialog element whose maximum height is to be set.\n *\n * @example\n * // Suppose you have a dialog element with id 'my-dialog'.\n * const dialogElement = myDialogRef.current || document.getElementById('my-dialog');\n * // Setting its max height relative to its current position and the viewport's dimensions.\n * setMaxHeightToAvailableSpace(dialogElement);\n */\nexport function setMaxHeightToAvailableSpace(dialog: HTMLElement) {\n    if (!window) {\n        throw new Error('Window object not found, this method should be used in a browser environment');\n    }\n\n    dialog.style.maxHeight = '';\n\n    const { top, bottom } = dialog.getBoundingClientRect();\n    if (top - MAX_HEIGHT_MARGIN < 0) {\n        // if the dialog is overflowing to the top\n        dialog.style.maxHeight = `${bottom - MAX_HEIGHT_MARGIN}px`;\n    } else if (bottom + MAX_HEIGHT_MARGIN > window.innerHeight) {\n        // if the dialog is overflowing to the bottom\n        dialog.style.maxHeight = `${window.innerHeight - top - MAX_HEIGHT_MARGIN}px`;\n    }\n}\n\n/**\n * Checks if a specified HTML element is visible within the viewport.\n * Visibility is determined by several factors:\n * - The element must have non-zero dimensions.\n * - The element's computed style must not be `display: none`, `visibility: hidden`, or `opacity: 0`.\n * - The element must be within the bounds of the current viewport.\n *\n * @param {HTMLElement} element - The HTML element to check for visibility.\n * @returns {boolean} Returns true if the element is visible according to the criteria specified, otherwise returns false.\n */\nexport function isElementVisible(element: HTMLElement) {\n    const rect = element.getBoundingClientRect();\n    const hasSize = rect.width > 0 && rect.height > 0;\n\n    const style = window.getComputedStyle(element);\n    const isVisibleStyle = style.display !== 'none' && style.visibility !== 'hidden' && parseFloat(style.opacity) !== 0;\n\n    // Check if the element is within the viewport\n    const isInViewport =\n        rect.top < window.innerHeight && rect.left < window.innerWidth && rect.bottom > 0 && rect.right > 0;\n\n    return hasSize && isVisibleStyle && isInViewport;\n}\n\n/**\n * Assigns a local DOM ref to a forwarded ref.\n *\n * @param {RefObject<HTMLDivElement>} localRef - The local React reference to an HTMLDivElement.\n * @param {ForwardedRef<HTMLDivElement>} forwardedRef - The ref forwarded from a parent component.\n */\nexport function syncRefs(localRef: RefObject<HTMLDivElement>, forwardedRef: ForwardedRef<HTMLDivElement>) {\n    if (!forwardedRef) {\n        return;\n    }\n\n    if (typeof forwardedRef === 'function') {\n        forwardedRef(localRef.current);\n    } else if (forwardedRef && 'current' in forwardedRef) {\n        forwardedRef.current = localRef.current;\n    }\n}\n"],"names":["MAX_HEIGHT_MARGIN","setMaxHeightToAvailableSpace","dialog","top","bottom","isElementVisible","element","rect","hasSize","style","isVisibleStyle","isInViewport","syncRefs","localRef","forwardedRef"],"mappings":"AAIO,MAAMA,IAAoB;AAe1B,SAASC,EAA6BC,GAAqB;AAC9D,MAAI,CAAC;AACK,UAAA,IAAI,MAAM,8EAA8E;AAGlG,EAAAA,EAAO,MAAM,YAAY;AAEzB,QAAM,EAAE,KAAAC,GAAK,QAAAC,EAAO,IAAIF,EAAO,sBAAsB;AACjD,EAAAC,IAAM,IAAoB,IAE1BD,EAAO,MAAM,YAAY,GAAGE,IAAS,CAAiB,OAC/CA,IAAS,IAAoB,OAAO,gBAE3CF,EAAO,MAAM,YAAY,GAAG,OAAO,cAAcC,IAAM,CAAiB;AAEhF;AAYO,SAASE,EAAiBC,GAAsB;AAC7C,QAAAC,IAAOD,EAAQ,yBACfE,IAAUD,EAAK,QAAQ,KAAKA,EAAK,SAAS,GAE1CE,IAAQ,OAAO,iBAAiBH,CAAO,GACvCI,IAAiBD,EAAM,YAAY,UAAUA,EAAM,eAAe,YAAY,WAAWA,EAAM,OAAO,MAAM,GAG5GE,IACFJ,EAAK,MAAM,OAAO,eAAeA,EAAK,OAAO,OAAO,cAAcA,EAAK,SAAS,KAAKA,EAAK,QAAQ;AAEtG,SAAOC,KAAWE,KAAkBC;AACxC;AAQgB,SAAAC,EAASC,GAAqCC,GAA4C;AACtG,EAAKA,MAID,OAAOA,KAAiB,aACxBA,EAAaD,EAAS,OAAO,IACtBC,KAAgB,aAAaA,MACpCA,EAAa,UAAUD,EAAS;AAExC;"}

package/dist/fondue-components24.js

@@ -1,38 +1,20 @@
-import { sv as t } from "./fondue-components15.js";
-const i = t({
-  base: "tw-relative tw-w-full tw-overflow-hidden",
-  variants: {
-    rounded: {
-      true: "tw-rounded"
-    },
-    size: {
-      small: "tw-h-1",
-      medium: "tw-h-2",
-      large: "tw-h-3",
-      "x-large": "tw-h-4"
-    },
-    variant: {
-      default: "tw-bg-box-selected",
-      positive: "tw-bg-box-positive",
-      negative: "tw-bg-box-negative"
-    }
-  }
-}), a = t({
-  base: "tw-h-full tw-w-full",
-  variants: {
-    variant: {
-      default: "tw-bg-text-interactive",
-      positive: "tw-bg-text-positive",
-      negative: "tw-bg-text-negative"
-    },
-    indeterminateState: {
-      true: "tw-animate-loading-bar-infinite tw-origin-left-right",
-      false: "tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]"
-    }
-  }
-});
+const t = "_content_5bz3o_4", o = "_subContent_5bz3o_5", n = "_item_5bz3o_15", s = "_subTrigger_5bz3o_16", _ = "_subMenuIndicator_5bz3o_52", e = "_group_5bz3o_58", b = "_slot_5bz3o_65", u = {
+  content: t,
+  subContent: o,
+  item: n,
+  subTrigger: s,
+  subMenuIndicator: _,
+  group: e,
+  slot: b
+};
 export {
-  i as loadingBarContainerStyles,
-  a as loadingBarStyles
+  t as content,
+  u as default,
+  e as group,
+  n as item,
+  b as slot,
+  o as subContent,
+  _ as subMenuIndicator,
+  s as subTrigger
 };
 //# sourceMappingURL=fondue-components24.js.map

package/dist/fondue-components24.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components24.js","sources":["../src/components/LoadingBar/styles/loadingBarStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const loadingBarContainerStyles = sv({\n    base: 'tw-relative tw-w-full tw-overflow-hidden',\n    variants: {\n        rounded: {\n            true: 'tw-rounded',\n        },\n        size: {\n            small: 'tw-h-1',\n            medium: 'tw-h-2',\n            large: 'tw-h-3',\n            'x-large': 'tw-h-4',\n        },\n        variant: {\n            default: 'tw-bg-box-selected',\n            positive: 'tw-bg-box-positive',\n            negative: 'tw-bg-box-negative',\n        },\n    },\n});\n\nexport const loadingBarStyles = sv({\n    base: 'tw-h-full tw-w-full',\n    variants: {\n        variant: {\n            default: 'tw-bg-text-interactive',\n            positive: 'tw-bg-text-positive',\n            negative: 'tw-bg-text-negative',\n        },\n        indeterminateState: {\n            true: 'tw-animate-loading-bar-infinite tw-origin-left-right',\n            false: 'tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]',\n        },\n    },\n});\n"],"names":["loadingBarContainerStyles","sv","loadingBarStyles"],"mappings":";AAIO,MAAMA,IAA4BC,EAAG;AAAA,EACxC,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IACf;AAAA,IACA,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAAA,EACJ;AACJ,CAAC,GAEYC,IAAmBD,EAAG;AAAA,EAC/B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAAA,IACA,oBAAoB;AAAA,MAChB,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AACJ,CAAC;"}
+{"version":3,"file":"fondue-components24.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/fondue-components25.js

@@ -1,28 +1,20 @@
-import { useMemo as f, useCallback as d, useState as v, useRef as S, useEffect as m } from "react";
-const U = ({
-  prop: e,
-  defaultProp: n,
-  onChange: s = () => {
+import { sv as t } from "./fondue-components15.js";
+const a = t({
+  base: 'tw-block tw-bg-base tw-shadow-mid tw-border tw-border-line tw-w-full sm:tw-w-fit sm:tw-max-w-[--flyout-max-width] tw-group tw-mt-4 sm:tw-mt-0 [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:tw-p-2 [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:tw-w-screen [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:!tw-translate-x-0 [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:!tw-translate-y-0 before:tw-fixed tw-content-[""] before:tw-top-0 before:tw-left-0 before:tw-h-screen before:tw-w-screen before:tw-bg-black before:tw-opacity-30 before:tw-z-[-1] before:tw-pointer-events-none sm:before:tw-hidden',
+  variants: {
+    rounded: {
+      true: "tw-rounded",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    rounded: !0
   }
-}) => {
-  const [o, c] = b({ defaultProp: n, onChange: s }), t = e !== void 0, i = t ? e : o, r = f(() => s, [s]), a = d(
-    (l) => {
-      if (t) {
-        const u = typeof l == "function" ? l(e) : l;
-        u !== e && r(u);
-      } else
-        c(l);
-    },
-    [t, e, c, r]
-  );
-  return [i, a];
-}, b = ({ defaultProp: e, onChange: n }) => {
-  const s = v(e), [o] = s, c = S(o), t = f(() => n, [n]);
-  return m(() => {
-    c.current !== o && (t == null || t(o), c.current = o);
-  }, [o, c, t]), s;
-};
+}), e = "tw-flex tw-justify-between tw-items-center tw-border-b tw-border-line tw-font-medium group-data-[flyout-spacing=compact]:tw-p-4 group-data-[flyout-spacing=comfortable]:tw-p-6 group-data-[flyout-spacing=spacious]:tw-p-10 ", r = "tw-flex tw-justify-end tw-gap-2 tw-border-t tw-border-line tw-font-medium group-data-[flyout-spacing=compact]:tw-p-4 group-data-[flyout-spacing=comfortable]:tw-p-6 group-data-[flyout-spacing=spacious]:tw-p-10 ", p = "tw-flex tw-flex-col tw-gap-4 group-data-[flyout-spacing=compact]:tw-px-4 group-data-[flyout-spacing=compact]:tw-py-2 group-data-[flyout-spacing=comfortable]:tw-px-6 group-data-[flyout-spacing=comfortable]:tw-py-4 group-data-[flyout-spacing=spacious]:tw-px-10 group-data-[flyout-spacing=spacious]:tw-py-6 ";
 export {
-  U as useControllableState
+  p as flyoutBodyStyles,
+  a as flyoutContentStyles,
+  r as flyoutFooterStyles,
+  e as flyoutHeaderStyles
 };
 //# sourceMappingURL=fondue-components25.js.map

package/dist/fondue-components25.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components25.js","sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Dispatch, type SetStateAction, useCallback, useMemo, useState, useRef, useEffect } from 'react';\n\n// Radix UI handy hook for handling controlled and uncontrolled state\n// Source: https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx\n\ntype UseControllableStateParams<TValue> = {\n    prop?: TValue;\n    defaultProp?: TValue;\n    onChange?: (state: TValue) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nexport const useControllableState = <TValue>({\n    prop,\n    defaultProp,\n    onChange = () => {},\n}: UseControllableStateParams<TValue>) => {\n    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n    const isControlled = prop !== undefined;\n    const value = isControlled ? prop : uncontrolledProp;\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    const setValue: Dispatch<SetStateAction<TValue | undefined>> = useCallback(\n        (nextValue) => {\n            if (isControlled) {\n                const setter = nextValue as SetStateFn<TValue>;\n                const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n                if (value !== prop) {\n                    handleChange(value as TValue);\n                }\n            } else {\n                setUncontrolledProp(nextValue);\n            }\n        },\n        [isControlled, prop, setUncontrolledProp, handleChange],\n    );\n\n    return [value, setValue] as const;\n};\n\nconst useUncontrolledState = <TValue>({ defaultProp, onChange }: Omit<UseControllableStateParams<TValue>, 'prop'>) => {\n    const uncontrolledState = useState<TValue | undefined>(defaultProp);\n    const [value] = uncontrolledState;\n    const prevValueRef = useRef(value);\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    useEffect(() => {\n        if (prevValueRef.current !== value) {\n            handleChange?.(value as TValue);\n            prevValueRef.current = value;\n        }\n    }, [value, prevValueRef, handleChange]);\n\n    return uncontrolledState;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","uncontrolledState","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAC;AACtB,MAA0C;AAChC,QAAA,CAACC,GAAkBC,CAAmB,IAAIC,EAAqB,EAAE,aAAAJ,GAAa,UAAAC,GAAU,GACxFI,IAAeN,MAAS,QACxBO,IAAQD,IAAeN,IAAOG,GAC9BK,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC,GAEjDQ,IAAyDC;AAAA,IAC3D,CAACC,MAAc;AACX,UAAIN,GAAc;AAEd,cAAMC,IAAQ,OAAOK,KAAc,aADpBA,EACwCZ,CAAI,IAAIY;AAC/D,QAAIL,MAAUP,KACVQ,EAAaD,CAAe;AAAA,MAChC;AAEA,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAAA;AAGnD,SAAA,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAC5G,QAAAW,IAAoBC,EAA6Bb,CAAW,GAC5D,CAACM,CAAK,IAAIM,GACVE,IAAeC,EAAOT,CAAK,GAC3BC,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC;AAEvD,SAAAe,EAAU,MAAM;AACR,IAAAF,EAAa,YAAYR,MACzBC,KAAA,QAAAA,EAAeD,IACfQ,EAAa,UAAUR;AAAA,EAE5B,GAAA,CAACA,GAAOQ,GAAcP,CAAY,CAAC,GAE/BK;AACX;"}
+{"version":3,"file":"fondue-components25.js","sources":["../src/components/Flyout/styles/flyoutStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const flyoutContentStyles = sv({\n    base:\n        'tw-block tw-bg-base tw-shadow-mid tw-border tw-border-line tw-w-full sm:tw-w-fit sm:tw-max-w-[--flyout-max-width] tw-group tw-mt-4 sm:tw-mt-0 ' +\n        // Mobile view flyout -> dialog responsiveness\n        '[body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:tw-p-2 [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:tw-w-screen [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:!tw-translate-x-0 [body>[data-radix-popper-content-wrapper]:has(&)]:max-sm:!tw-translate-y-0 ' +\n        // Responsive dialog background element\n        'before:tw-fixed tw-content-[\"\"] before:tw-top-0 before:tw-left-0 before:tw-h-screen before:tw-w-screen before:tw-bg-black before:tw-opacity-30 before:tw-z-[-1] before:tw-pointer-events-none sm:before:tw-hidden',\n    variants: {\n        rounded: {\n            true: 'tw-rounded',\n            false: '',\n        },\n    },\n    defaultVariants: {\n        rounded: true,\n    },\n});\n\nexport const flyoutHeaderStyles =\n    'tw-flex tw-justify-between tw-items-center tw-border-b tw-border-line tw-font-medium ' +\n    'group-data-[flyout-spacing=compact]:tw-p-4 ' +\n    'group-data-[flyout-spacing=comfortable]:tw-p-6 ' +\n    'group-data-[flyout-spacing=spacious]:tw-p-10 ';\n\nexport const flyoutFooterStyles =\n    'tw-flex tw-justify-end tw-gap-2 tw-border-t tw-border-line tw-font-medium ' +\n    'group-data-[flyout-spacing=compact]:tw-p-4 ' +\n    'group-data-[flyout-spacing=comfortable]:tw-p-6 ' +\n    'group-data-[flyout-spacing=spacious]:tw-p-10 ';\n\nexport const flyoutBodyStyles =\n    'tw-flex tw-flex-col tw-gap-4 ' +\n    'group-data-[flyout-spacing=compact]:tw-px-4 group-data-[flyout-spacing=compact]:tw-py-2 ' +\n    'group-data-[flyout-spacing=comfortable]:tw-px-6 group-data-[flyout-spacing=comfortable]:tw-py-4 ' +\n    'group-data-[flyout-spacing=spacious]:tw-px-10 group-data-[flyout-spacing=spacious]:tw-py-6 ';\n"],"names":["flyoutContentStyles","sv","flyoutHeaderStyles","flyoutFooterStyles","flyoutBodyStyles"],"mappings":";AAIO,MAAMA,IAAsBC,EAAG;AAAA,EAClC,MACI;AAAA,EAKJ,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,EACb;AACJ,CAAC,GAEYC,IACT,gOAKSC,IACT,qNAKSC,IACT;"}

package/dist/fondue-components26.js

@@ -1,12 +1,38 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components35.js";
-const a = "tw-inline-grid tw-h-9 tw-grid-flow-col tw-auto-cols-[1fr] tw-items-stretch tw-bg-base-alt disabled:tw-bg-base-alt tw-border tw-border-line-strong tw-rounded tw-relative tw-min-w-max tw-font-sans tw-font-normal tw-text-center tw-isolate", n = `tw-peer tw-group tw-flex tw-items-stretch tw-justify-center tw-select-none first:tw-rounded-l-[calc(var(--radius)-var(--line-width))] [&:nth-last-child(2)]:tw-rounded-r-[calc(var(--radius)-var(--line-width))] ${t} focus-visible:tw-rounded-[calc(var(--radius)-var(--line-width))]`, o = "tw-hidden tw-absolute -tw-z-[1] tw-top-0 tw-left-0 tw-h-full tw-pointer-events-none tw-transition-transform before:tw-content-[''] before:tw-inset-0 before:tw-absolute before:tw-rounded-[calc(var(--radius)-var(--line-width))] before:tw-bg-white peer-disabled:before:tw-bg-box-disabled before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-xx-strong)] peer-disabled:before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-x-strong)] peer-data-[state=on]:tw-block [&:nth-child(2)]:tw-w-[calc(100%/1)] [&:nth-child(3)]:tw-w-[calc(100%/2)] [&:nth-child(4)]:tw-w-[calc(100%/3)] [&:nth-child(5)]:tw-w-[calc(100%/4)] [&:nth-child(6)]:tw-w-[calc(100%/5)] [&:nth-child(7)]:tw-w-[calc(100%/6)] [&:nth-child(8)]:tw-w-[calc(100%/7)] [&:nth-child(9)]:tw-w-[calc(100%/8)] [&:nth-child(10)]:tw-w-[calc(100%/9)] [&:nth-child(11)]:tw-w-[calc(100%/10)] peer-[[data-state=on]:nth-child(1)]:tw-translate-x-[0%] peer-[[data-state=on]:nth-child(2)]:tw-translate-x-[100%] peer-[[data-state=on]:nth-child(3)]:tw-translate-x-[200%] peer-[[data-state=on]:nth-child(4)]:tw-translate-x-[300%] peer-[[data-state=on]:nth-child(5)]:tw-translate-x-[400%] peer-[[data-state=on]:nth-child(6)]:tw-translate-x-[500%] peer-[[data-state=on]:nth-child(7)]:tw-translate-x-[600%] peer-[[data-state=on]:nth-child(8)]:tw-translate-x-[700%] peer-[[data-state=on]:nth-child(9)]:tw-translate-x-[800%] peer-[[data-state=on]:nth-child(10)]:tw-translate-x-[900%]", w = "-tw-z-[1] tw-min-w-px tw-w-px -tw-mx-[0.5px] tw-bg-line-strong tw-transition-opacity tw-ease-out group-first:tw-opacity-0 group-first:tw-ease-in group-data-[state=on]:tw-opacity-0 group-data-[state=on]:tw-ease-in group-focus-visible:tw-opacity-0 group-focus-visible:tw-ease-in [[data-state=on]_+_*_&]:tw-opacity-0 [[data-state=on]_+_*_&]:tw-ease-in group-focus-visible:tw-duration-0", r = "tw-flex tw-flex-grow tw-items-center tw-justify-center tw-rounded-[inherit] tw-px-4 tw-gap-2 tw-text-body-medium group-data-[state=off]:group-enabled:hover:tw-bg-[#00005506] [&_svg]:tw-shrink-0", i = "tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-medium tw-opacity-0 tw-ease-in group-data-[state=on]:tw-opacity-100 group-data-[state=on]:tw-ease-out", s = "tw-absolute tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-normal tw-opacity-100 tw-ease-out group-data-[state=on]:tw-opacity-0 group-data-[state=on]:tw-ease-in";
+import { sv as t } from "./fondue-components15.js";
+const i = t({
+  base: "tw-relative tw-w-full tw-overflow-hidden",
+  variants: {
+    rounded: {
+      true: "tw-rounded"
+    },
+    size: {
+      small: "tw-h-1",
+      medium: "tw-h-2",
+      large: "tw-h-3",
+      "x-large": "tw-h-4"
+    },
+    variant: {
+      default: "tw-bg-box-selected",
+      positive: "tw-bg-box-positive",
+      negative: "tw-bg-box-negative"
+    }
+  }
+}), a = t({
+  base: "tw-h-full tw-w-full",
+  variants: {
+    variant: {
+      default: "tw-bg-text-interactive",
+      positive: "tw-bg-text-positive",
+      negative: "tw-bg-text-negative"
+    },
+    indeterminateState: {
+      true: "tw-animate-loading-bar-infinite tw-origin-left-right",
+      false: "tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]"
+    }
+  }
+});
 export {
-  o as segmentedControlActiveIndicatorStyles,
-  i as segmentedControlItemLabelActiveStyles,
-  s as segmentedControlItemLabelInactiveStyles,
-  r as segmentedControlItemLabelStyles,
-  w as segmentedControlItemSeparatorStyles,
-  n as segmentedControlItemStyles,
-  a as segmentedControlRootStyles
+  i as loadingBarContainerStyles,
+  a as loadingBarStyles
 };
 //# sourceMappingURL=fondue-components26.js.map

package/dist/fondue-components26.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components26.js","sources":["../src/components/SegmentedControl/styles/segmentedControlStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\n\nexport const segmentedControlRootStyles =\n    'tw-inline-grid tw-h-9 tw-grid-flow-col tw-auto-cols-[1fr] tw-items-stretch tw-bg-base-alt disabled:tw-bg-base-alt ' +\n    'tw-border tw-border-line-strong tw-rounded tw-relative tw-min-w-max tw-font-sans tw-font-normal tw-text-center tw-isolate';\n\nexport const segmentedControlItemStyles =\n    'tw-peer tw-group tw-flex tw-items-stretch tw-justify-center tw-select-none ' +\n    // Apply border radius based on the index\n    'first:tw-rounded-l-[calc(var(--radius)-var(--line-width))] [&:nth-last-child(2)]:tw-rounded-r-[calc(var(--radius)-var(--line-width))] ' +\n    // Focus styles for keyboard navigation, custom rounding applied to match the active indicator\n    `${FOCUS_OUTLINE} focus-visible:tw-rounded-[calc(var(--radius)-var(--line-width))]`;\n\nexport const segmentedControlActiveIndicatorStyles =\n    'tw-hidden tw-absolute -tw-z-[1] tw-top-0 tw-left-0 tw-h-full tw-pointer-events-none tw-transition-transform ' +\n    // Outline of active item\n    \"before:tw-content-[''] before:tw-inset-0 before:tw-absolute before:tw-rounded-[calc(var(--radius)-var(--line-width))] before:tw-bg-white peer-disabled:before:tw-bg-box-disabled \" +\n    'before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-xx-strong)] peer-disabled:before:tw-shadow-[0_0_0_var(--line-width)_var(--line-color-x-strong)] ' +\n    // Show the active indicator when the state is on\n    'peer-data-[state=on]:tw-block ' +\n    // Used to animate the active indicator horizontally\n    '[&:nth-child(2)]:tw-w-[calc(100%/1)] [&:nth-child(3)]:tw-w-[calc(100%/2)] ' +\n    '[&:nth-child(4)]:tw-w-[calc(100%/3)] [&:nth-child(5)]:tw-w-[calc(100%/4)] ' +\n    '[&:nth-child(6)]:tw-w-[calc(100%/5)] [&:nth-child(7)]:tw-w-[calc(100%/6)] ' +\n    '[&:nth-child(8)]:tw-w-[calc(100%/7)] [&:nth-child(9)]:tw-w-[calc(100%/8)] ' +\n    '[&:nth-child(10)]:tw-w-[calc(100%/9)] [&:nth-child(11)]:tw-w-[calc(100%/10)] ' +\n    'peer-[[data-state=on]:nth-child(1)]:tw-translate-x-[0%] ' +\n    'peer-[[data-state=on]:nth-child(2)]:tw-translate-x-[100%] ' +\n    'peer-[[data-state=on]:nth-child(3)]:tw-translate-x-[200%] ' +\n    'peer-[[data-state=on]:nth-child(4)]:tw-translate-x-[300%] ' +\n    'peer-[[data-state=on]:nth-child(5)]:tw-translate-x-[400%] ' +\n    'peer-[[data-state=on]:nth-child(6)]:tw-translate-x-[500%] ' +\n    'peer-[[data-state=on]:nth-child(7)]:tw-translate-x-[600%] ' +\n    'peer-[[data-state=on]:nth-child(8)]:tw-translate-x-[700%] ' +\n    'peer-[[data-state=on]:nth-child(9)]:tw-translate-x-[800%] ' +\n    'peer-[[data-state=on]:nth-child(10)]:tw-translate-x-[900%]';\n\nexport const segmentedControlItemSeparatorStyles =\n    '-tw-z-[1] tw-min-w-px tw-w-px -tw-mx-[0.5px] tw-bg-line-strong tw-transition-opacity tw-ease-out ' +\n    // Hide the separator when the state is on to rely on the active item's border\n    'group-first:tw-opacity-0 group-first:tw-ease-in ' +\n    'group-data-[state=on]:tw-opacity-0 group-data-[state=on]:tw-ease-in ' +\n    'group-focus-visible:tw-opacity-0 group-focus-visible:tw-ease-in ' +\n    '[[data-state=on]_+_*_&]:tw-opacity-0 [[data-state=on]_+_*_&]:tw-ease-in ' +\n    // Remove transition is the control is focused\n    'group-focus-visible:tw-duration-0';\n\nexport const segmentedControlItemLabelStyles =\n    'tw-flex tw-flex-grow tw-items-center tw-justify-center tw-rounded-[inherit] tw-px-4 tw-gap-2 tw-text-body-medium ' +\n    // Hover on unselected items but not when disabled\n    'group-data-[state=off]:group-enabled:hover:tw-bg-[#00005506] ' +\n    // Prevent shrinking of icons\n    '[&_svg]:tw-shrink-0';\n\nexport const segmentedControlItemLabelActiveStyles =\n    'tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-medium ' +\n    'tw-opacity-0 tw-ease-in group-data-[state=on]:tw-opacity-100 ' +\n    'group-data-[state=on]:tw-ease-out';\n\nexport const segmentedControlItemLabelInactiveStyles =\n    'tw-absolute tw-inline-flex tw-gap-2 tw-items-center tw-justify-center tw-transition-opacity group-disabled:tw-text-box-disabled-inverse tw-font-normal ' +\n    'tw-opacity-100 tw-ease-out group-data-[state=on]:tw-opacity-0 ' +\n    'group-data-[state=on]:tw-ease-in';\n"],"names":["segmentedControlRootStyles","segmentedControlItemStyles","FOCUS_OUTLINE","segmentedControlActiveIndicatorStyles","segmentedControlItemSeparatorStyles","segmentedControlItemLabelStyles","segmentedControlItemLabelActiveStyles","segmentedControlItemLabelInactiveStyles"],"mappings":";AAIO,MAAMA,IACT,+OAGSC,IACT,oNAIGC,CAAa,qEAEPC,IACT,i5CAuBSC,IACT,kYASSC,IACT,qMAMSC,IACT,6OAISC,IACT;"}
+{"version":3,"file":"fondue-components26.js","sources":["../src/components/LoadingBar/styles/loadingBarStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const loadingBarContainerStyles = sv({\n    base: 'tw-relative tw-w-full tw-overflow-hidden',\n    variants: {\n        rounded: {\n            true: 'tw-rounded',\n        },\n        size: {\n            small: 'tw-h-1',\n            medium: 'tw-h-2',\n            large: 'tw-h-3',\n            'x-large': 'tw-h-4',\n        },\n        variant: {\n            default: 'tw-bg-box-selected',\n            positive: 'tw-bg-box-positive',\n            negative: 'tw-bg-box-negative',\n        },\n    },\n});\n\nexport const loadingBarStyles = sv({\n    base: 'tw-h-full tw-w-full',\n    variants: {\n        variant: {\n            default: 'tw-bg-text-interactive',\n            positive: 'tw-bg-text-positive',\n            negative: 'tw-bg-text-negative',\n        },\n        indeterminateState: {\n            true: 'tw-animate-loading-bar-infinite tw-origin-left-right',\n            false: 'tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]',\n        },\n    },\n});\n"],"names":["loadingBarContainerStyles","sv","loadingBarStyles"],"mappings":";AAIO,MAAMA,IAA4BC,EAAG;AAAA,EACxC,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IACf;AAAA,IACA,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAAA,EACJ;AACJ,CAAC,GAEYC,IAAmBD,EAAG;AAAA,EAC/B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAAA,IACA,oBAAoB;AAAA,MAChB,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AACJ,CAAC;"}

package/dist/fondue-components27.js

@@ -1,113 +1,28 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { IconCaretDown as L } from "@frontify/fondue-icons";
-import * as f from "@radix-ui/react-popover";
-import { Slot as z } from "@radix-ui/react-slot";
-import { useCombobox as A } from "downshift";
-import { forwardRef as H, useRef as O, useMemo as q } from "react";
-import { SelectMenu as G } from "./fondue-components29.js";
-import r from "./fondue-components31.js";
-import { useSelectData as J } from "./fondue-components32.js";
-const g = ({
-  children: h,
-  onSelect: l,
-  value: b,
-  defaultValue: x,
-  placeholder: I = "",
-  disabled: i,
-  "aria-label": C,
-  "data-test-id": w = "fondue-select-combobox"
-}, S) => {
-  const { inputSlots: R, menuSlots: B, items: a, filterText: F, clearButton: u, getItemByValue: c, setFilterText: P } = J(h), v = c(x), M = c(b), {
-    getInputProps: n,
-    getToggleButtonProps: N,
-    getMenuProps: T,
-    getItemProps: y,
-    reset: D,
-    isOpen: V,
-    highlightedIndex: j,
-    inputValue: s
-  } = A({
-    items: a,
-    onSelectedItemChange: ({ selectedItem: e }) => {
-      l && l(e.value);
+import { useMemo as f, useCallback as d, useState as v, useRef as S, useEffect as m } from "react";
+const U = ({
+  prop: e,
+  defaultProp: n,
+  onChange: s = () => {
+  }
+}) => {
+  const [o, c] = b({ defaultProp: n, onChange: s }), t = e !== void 0, i = t ? e : o, r = f(() => s, [s]), a = d(
+    (l) => {
+      if (t) {
+        const u = typeof l == "function" ? l(e) : l;
+        u !== e && r(u);
+      } else
+        c(l);
     },
-    selectedItem: M,
-    onInputValueChange: ({ inputValue: e }) => {
-      P(e);
-    },
-    defaultSelectedItem: v,
-    defaultHighlightedIndex: 0,
-    itemToString: (e) => e ? e.label : ""
-  }), o = O(!1), k = q(
-    () => s && !a.find((e) => e.label.toLowerCase().includes(s.toLowerCase())),
-    [s, a]
+    [t, e, c, r]
   );
-  return /* @__PURE__ */ p(f.Root, { open: V, children: [
-    /* @__PURE__ */ t(f.Anchor, { asChild: !0, children: /* @__PURE__ */ p("div", { ref: S, className: r.root, "data-error": k, children: [
-      /* @__PURE__ */ t(
-        "input",
-        {
-          onMouseDown: (e) => {
-            o.current = !0, e.currentTarget.dataset.showFocusRing = "false";
-          },
-          placeholder: I,
-          ...n({
-            "aria-label": C
-          }),
-          onFocus: (e) => {
-            o.current || (e.target.dataset.showFocusRing = "true");
-          },
-          onBlur: (e) => {
-            var m, d;
-            e.target.dataset.showFocusRing = "false", o.current = !1, n().onBlur && ((d = (m = n()).onBlur) == null || d.call(m, e));
-          },
-          className: r.input,
-          disabled: i,
-          "data-test-id": w
-        }
-      ),
-      R,
-      u && /* @__PURE__ */ t(
-        z,
-        {
-          onClick: (e) => {
-            e.stopPropagation(), D();
-          },
-          className: r.clear,
-          role: "button",
-          children: u
-        }
-      ),
-      /* @__PURE__ */ t(
-        "button",
-        {
-          type: "button",
-          onMouseDown: () => {
-            o.current = !0;
-          },
-          ...N(),
-          "aria-label": "toggle menu",
-          disabled: i,
-          children: /* @__PURE__ */ t(L, { size: 16, className: r.caret })
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ t(
-      G,
-      {
-        highlightedIndex: j,
-        filterText: F,
-        getMenuProps: T,
-        getItemProps: y,
-        children: B
-      }
-    )
-  ] });
+  return [i, a];
+}, b = ({ defaultProp: e, onChange: n }) => {
+  const s = v(e), [o] = s, c = S(o), t = f(() => n, [n]);
+  return m(() => {
+    c.current !== o && (t == null || t(o), c.current = o);
+  }, [o, c, t]), s;
 };
-g.displayName = "Select.Combobox";
-const $ = H(g);
 export {
-  $ as ForwardedRefCombobox,
-  g as SelectCombobox
+  U as useControllableState
 };
 //# sourceMappingURL=fondue-components27.js.map