@frontify/fondue-components 12.0.0 → 13.0.0

package/dist/fondue-components17.js

@@ -1,50 +1,69 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import * as i from "@radix-ui/react-toggle-group";
-import { forwardRef as n } from "react";
-import { useControllableState as N } from "./fondue-components49.js";
-import e from "./fondue-components50.js";
-const d = ({ children: a, value: o, defaultValue: s, onValueChange: p, ...m }, f) => {
-  const [g, C] = N({
-    prop: o,
-    defaultProp: s,
-    onChange: p
-  });
-  return /* @__PURE__ */ l(
-    i.Root,
-    {
-      ref: f,
-      ...m,
-      className: e.root,
-      onValueChange: (r) => {
-        r && C(r);
-      },
-      value: g,
-      type: "single",
-      asChild: !1,
-      "aria-disabled": m.disabled,
-      children: [
-        a,
-        /* @__PURE__ */ t("div", { className: e.activeIndicator })
-      ]
-    }
-  );
-};
-d.displayName = "SegmentedControl.Root";
-const c = ({ children: a, ...o }, s) => /* @__PURE__ */ l(i.Item, { ref: s, ...o, className: e.item, asChild: !1, children: [
-  /* @__PURE__ */ t("span", { className: e.separator }),
-  /* @__PURE__ */ l("span", { className: e.itemLabel, children: [
-    /* @__PURE__ */ t("span", { className: e.itemLabelActive, children: a }),
-    /* @__PURE__ */ t("span", { className: e.itemLabelInactive, children: a })
-  ] })
-] });
-c.displayName = "SegmentedControl.Item";
-const I = {
-  Root: n(d),
-  Item: n(c)
-};
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-scroll-area";
+import { forwardRef as b } from "react";
+import a from "./fondue-components52.js";
+const h = ({
+  type: t,
+  maxHeight: e = "100%",
+  maxWidth: s = "100%",
+  showShadow: c = !1,
+  children: i,
+  "data-test-id": r = "fondue-scroll-area"
+}, m) => /* @__PURE__ */ n(
+  o.Root,
+  {
+    type: t,
+    className: a.root,
+    style: { maxWidth: s },
+    "data-test-id": r,
+    ref: m,
+    children: [
+      /* @__PURE__ */ l(
+        o.Viewport,
+        {
+          className: a.viewport,
+          style: { maxHeight: e },
+          "data-test-id": `${r}-viewport`,
+          "data-show-shadow": c,
+          children: i
+        }
+      ),
+      /* @__PURE__ */ l(
+        o.Scrollbar,
+        {
+          className: a.scrollbar,
+          orientation: "vertical",
+          "data-test-id": `${r}-vertical-scrollbar`,
+          children: /* @__PURE__ */ l(
+            o.Thumb,
+            {
+              className: a.thumb,
+              "data-test-id": `${r}-vertical-scrollbar-thumb`
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ l(
+        o.Scrollbar,
+        {
+          className: a.scrollbar,
+          orientation: "horizontal",
+          "data-test-id": `${r}-horizontal-scrollbar`,
+          children: /* @__PURE__ */ l(
+            o.Thumb,
+            {
+              className: a.thumb,
+              "data-test-id": `${r}-horizontal-scrollbar-thumb`
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ l(o.Corner, { className: a.corner, "data-test-id": `${r}-corner` })
+    ]
+  }
+), d = b(h);
+d.displayName = "ScrollArea";
 export {
-  I as SegmentedControl,
-  c as SegmentedControlItem,
-  d as SegmentedControlRoot
+  d as ScrollArea
 };
 //# sourceMappingURL=fondue-components17.js.map

package/dist/fondue-components17.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components17.js","sources":["../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport styles from './styles/segmentedControl.module.scss';\n\nexport type SegmentedControlRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The default value of the segmented control\n     * Used for uncontrolled components\n     */\n    defaultValue: string;\n    /**\n     * The controlled value of the segmented control\n     */\n    value?: string;\n    /**\n     * Event handler called when the value changes\n     */\n    onValueChange?: (value: string) => void;\n    /**\n     * Disable the segmented control\n     * @default false\n     */\n    disabled?: boolean;\n};\n\nexport const SegmentedControlRoot = (\n    { children, value: propsValue, defaultValue, onValueChange, ...rootProps }: SegmentedControlRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [value, setValue] = useControllableState({\n        prop: propsValue,\n        defaultProp: defaultValue,\n        onChange: onValueChange,\n    });\n\n    return (\n        <ToggleGroupPrimitive.Root\n            ref={ref}\n            {...rootProps}\n            className={styles.root}\n            onValueChange={(value) => {\n                if (value) {\n                    setValue(value);\n                }\n            }}\n            value={value}\n            type=\"single\"\n            asChild={false}\n            aria-disabled={rootProps.disabled}\n        >\n            {children}\n            {/* Active indicator */}\n            <div className={styles.activeIndicator} />\n        </ToggleGroupPrimitive.Root>\n    );\n};\nSegmentedControlRoot.displayName = 'SegmentedControl.Root';\n\ntype SegmentedControlItemProps = {\n    children: ReactNode;\n    value: string;\n};\n\nexport const SegmentedControlItem = (\n    { children, ...itemProps }: SegmentedControlItemProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <ToggleGroupPrimitive.Item ref={ref} {...itemProps} className={styles.item} asChild={false}>\n        {/* Separator */}\n        <span className={styles.separator} />\n        <span className={styles.itemLabel}>\n            {/* Active children */}\n            <span className={styles.itemLabelActive}>{children}</span>\n\n            {/* Inactive children */}\n            <span className={styles.itemLabelInactive}>{children}</span>\n        </span>\n    </ToggleGroupPrimitive.Item>\n);\nSegmentedControlItem.displayName = 'SegmentedControl.Item';\n\nexport const SegmentedControl = {\n    Root: forwardRef<HTMLDivElement, SegmentedControlRootProps>(SegmentedControlRoot),\n    Item: forwardRef<HTMLButtonElement, SegmentedControlItemProps>(SegmentedControlItem),\n};\n"],"names":["SegmentedControlRoot","children","propsValue","defaultValue","onValueChange","rootProps","ref","value","setValue","useControllableState","jsxs","ToggleGroupPrimitive","styles","jsx","SegmentedControlItem","itemProps","SegmentedControl","forwardRef"],"mappings":";;;;;AAgCa,MAAAA,IAAuB,CAChC,EAAE,UAAAC,GAAU,OAAOC,GAAY,cAAAC,GAAc,eAAAC,GAAe,GAAGC,EAAU,GACzEC,MACC;AACD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAqB;AAAA,IAC3C,MAAMP;AAAA,IACN,aAAaC;AAAA,IACb,UAAUC;AAAA,EAAA,CACb;AAGG,SAAA,gBAAAM;AAAA,IAACC,EAAqB;AAAA,IAArB;AAAA,MACG,KAAAL;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWO,EAAO;AAAA,MAClB,eAAe,CAACL,MAAU;AACtB,QAAIA,KACAC,EAASD,CAAK;AAAA,MAEtB;AAAA,MACA,OAAAA;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT,iBAAeF,EAAU;AAAA,MAExB,UAAA;AAAA,QAAAJ;AAAA,QAEA,gBAAAY,EAAA,OAAA,EAAI,WAAWD,EAAO,gBAAiB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5C;AAER;AACAZ,EAAqB,cAAc;AAO5B,MAAMc,IAAuB,CAChC,EAAE,UAAAb,GAAU,GAAGc,EAAA,GACfT,MAEA,gBAAAI,EAACC,EAAqB,MAArB,EAA0B,KAAAL,GAAW,GAAGS,GAAW,WAAWH,EAAO,MAAM,SAAS,IAEjF,UAAA;AAAA,EAAC,gBAAAC,EAAA,QAAA,EAAK,WAAWD,EAAO,UAAW,CAAA;AAAA,EAClC,gBAAAF,EAAA,QAAA,EAAK,WAAWE,EAAO,WAEpB,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWD,EAAO,iBAAkB,UAAAX,GAAS;AAAA,IAGlD,gBAAAY,EAAA,QAAA,EAAK,WAAWD,EAAO,mBAAoB,UAAAX,EAAS,CAAA;AAAA,EAAA,EACzD,CAAA;AAAA,EACJ,CAAA;AAEJa,EAAqB,cAAc;AAE5B,MAAME,IAAmB;AAAA,EAC5B,MAAMC,EAAsDjB,CAAoB;AAAA,EAChF,MAAMiB,EAAyDH,CAAoB;AACvF;"}
+{"version":3,"file":"fondue-components17.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n    /**\n     * \"auto\" visible when content is overflowing on the corresponding orientation.\n     * \"always\" always visible regardless of whether the content is overflowing.\n     * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n     * \"hover\" when the user is hovering over the scroll area.\n     * @default 'hover'\n     */\n    type?: 'auto' | 'always' | 'scroll' | 'hover';\n    /**\n     * Maximum height of the scroll area\n     * @default '100%'\n     */\n    maxHeight?: string | number;\n    /**\n     * Minimum width of the scroll area\n     * @default '100%'\n     */\n    maxWidth?: string | number;\n    /**\n     * Determines if a inset shadow should be shown the edge of the component\n     */\n    showShadow?: boolean;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n    {\n        type,\n        maxHeight = '100%',\n        maxWidth = '100%',\n        showShadow = false,\n        children,\n        'data-test-id': dataTestId = 'fondue-scroll-area',\n    }: ScrollAreaProps,\n    ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n    return (\n        <RadixScrollArea.Root\n            type={type}\n            className={styles.root}\n            style={{ maxWidth }}\n            data-test-id={dataTestId}\n            ref={ref}\n        >\n            <RadixScrollArea.Viewport\n                className={styles.viewport}\n                style={{ maxHeight }}\n                data-test-id={`${dataTestId}-viewport`}\n                data-show-shadow={showShadow}\n            >\n                {children}\n            </RadixScrollArea.Viewport>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"vertical\"\n                data-test-id={`${dataTestId}-vertical-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"horizontal\"\n                data-test-id={`${dataTestId}-horizontal-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n        </RadixScrollArea.Root>\n    );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","showShadow","children","dataTestId","ref","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;AAkCA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACG,MAAAR;AAAA,IACA,WAAWS,EAAO;AAAA,IAClB,OAAO,EAAE,UAAAP,EAAS;AAAA,IAClB,gBAAcG;AAAA,IACd,KAAAC;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,OAAO,EAAE,WAAAR,EAAU;AAAA,UACnB,gBAAc,GAAGI,CAAU;AAAA,UAC3B,oBAAkBF;AAAA,UAEjB,UAAAC;AAAA,QAAA;AAAA,MACL;AAAA,MACA,gBAAAM;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGJ,CAAU,UAAW,CAAA;AAAA,IAAA;AAAA,EAAA;AAC5F,GAIKM,IAAaC,EAA4Cb,CAAmB;AACzFY,EAAW,cAAc;"}

package/dist/fondue-components18.js

@@ -1,135 +1,39 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { IconCaretDown as j, IconCheckMark as E, IconExclamationMarkTriangle as H } from "@frontify/fondue-icons";
-import * as g from "@radix-ui/react-popover";
-import { Slot as T } from "@radix-ui/react-slot";
-import { useSelect as V } from "downshift";
-import { forwardRef as $, useRef as A, useState as q } from "react";
-import { ForwardedRefCombobox as J } from "./fondue-components51.js";
-import { ForwardedRefSelectItem as K, ForwardedRefSelectItemGroup as L } from "./fondue-components52.js";
-import { SelectMenu as Q } from "./fondue-components53.js";
-import { ForwardedRefSelectSlot as U } from "./fondue-components54.js";
-import a from "./fondue-components55.js";
-import { useSelectData as W } from "./fondue-components56.js";
-const S = ({
-  children: h,
-  onSelect: s,
-  value: I,
-  defaultValue: b,
-  placeholder: N = "",
-  status: l = "neutral",
-  disabled: m,
-  alignMenu: C = "start",
-  side: w = "bottom",
-  "aria-label": x,
-  "data-test-id": c = "fondue-select"
-}, d) => {
-  const { inputSlots: R, menuSlots: y, items: F, clearButton: u, getItemByValue: p } = W(h), k = p(b), v = p(I), n = A(!1), [M, f] = q(!1), { getToggleButtonProps: P, getMenuProps: B, getItemProps: G, reset: O, selectedItem: r, isOpen: z, highlightedIndex: D } = V({
-    items: F,
-    defaultSelectedItem: k,
-    selectedItem: v,
-    onIsOpenChange: () => {
-      f(!1);
-    },
-    onHighlightedIndexChange: () => {
-      f(!0);
-    },
-    onSelectedItemChange: ({ selectedItem: e }) => {
-      s == null || s((e == null ? void 0 : e.value) ?? null);
-    },
-    itemToString: (e) => e ? e.label : ""
-  });
-  return /* @__PURE__ */ i(g.Root, { open: z, children: [
-    /* @__PURE__ */ o(
-      g.Anchor,
-      {
-        asChild: !0,
-        onMouseDown: (e) => {
-          n.current = !0, e.currentTarget.dataset.showFocusRing = "false";
-        },
-        onFocus: (e) => {
-          n.current || (e.target.dataset.showFocusRing = "true");
-        },
-        onBlur: (e) => {
-          e.target.dataset.showFocusRing = "false", n.current = !1;
-        },
-        children: /* @__PURE__ */ i(
-          "div",
-          {
-            className: a.root,
-            "data-status": l,
-            "data-disabled": m,
-            "data-empty": !r,
-            "data-test-id": c,
-            ...m ? {} : P({
-              "aria-label": x,
-              ...d ? { ref: d } : {}
-            }),
-            children: [
-              /* @__PURE__ */ o("span", { className: a.selectedValue, children: r ? r.label : N }),
-              R,
-              u && /* @__PURE__ */ o(
-                T,
-                {
-                  onClick: (e) => {
-                    e.stopPropagation(), O();
-                  },
-                  className: a.clear,
-                  children: u
-                }
-              ),
-              /* @__PURE__ */ i("div", { className: a.icons, children: [
-                /* @__PURE__ */ o(j, { size: 16, className: a.caret }),
-                l === "success" ? /* @__PURE__ */ o(
-                  E,
-                  {
-                    size: 16,
-                    className: a.iconSuccess,
-                    "data-test-id": `${c}-success-icon`
-                  }
-                ) : null,
-                l === "error" ? /* @__PURE__ */ o(
-                  H,
-                  {
-                    size: 16,
-                    className: a.iconError,
-                    "data-test-id": `${c}-error-icon`
-                  }
-                ) : null
-              ] })
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ o(
-      Q,
-      {
-        align: C,
-        side: w,
-        highlightedIndex: D,
-        getMenuProps: B,
-        getItemProps: G,
-        selectedItem: r,
-        hasInteractedSinceOpening: M,
-        children: y
-      }
-    )
-  ] });
-};
-S.displayName = "Select";
-const X = $(S), t = X;
-t.displayName = "Select";
-t.Combobox = J;
-t.Combobox.displayName = "Select.Combobox";
-t.Item = K;
-t.Item.displayName = "Select.Item";
-t.Group = L;
-t.Group.displayName = "Select.Group";
-t.Slot = U;
-t.Slot.displayName = "Select.Slot";
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { propsToCssVariables as c } from "./fondue-components29.js";
+import f from "./fondue-components53.js";
+const y = m(
+  ({
+    "data-test-id": a = "fondue-section",
+    children: e,
+    role: r,
+    "aria-label": i,
+    "aria-hidden": o,
+    "aria-describedby": d,
+    "aria-labelledby": s,
+    "aria-expanded": t,
+    "aria-haspopup": p,
+    ...l
+  }, b) => /* @__PURE__ */ n(
+    "section",
+    {
+      className: f.root,
+      "data-test-id": a,
+      style: c(l),
+      role: r,
+      "aria-label": i,
+      "aria-hidden": o,
+      "aria-describedby": d,
+      "aria-labelledby": s,
+      "aria-expanded": t,
+      "aria-haspopup": p,
+      ref: b,
+      children: e
+    }
+  )
+);
+y.displayName = "Section";
 export {
-  X as ForwardedRefSelect,
-  t as Select,
-  S as SelectInput
+  y as Section
 };
 //# sourceMappingURL=fondue-components18.js.map

package/dist/fondue-components18.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components18.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string | null;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the select component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the select component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * The aria label of the select component.\n     */\n    'aria-label'?: string;\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        alignMenu = 'start',\n        side = 'bottom',\n        'aria-label': ariaLabel,\n        'data-test-id': dataTestId = 'fondue-select',\n    }: SelectComponentProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const wasClicked = useRef(false);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n        useSelect({\n            items,\n            defaultSelectedItem: defaultItem,\n            selectedItem: activeItem,\n            onIsOpenChange: () => {\n                setHasInteractedSinceOpening(false);\n            },\n            onHighlightedIndexChange: () => {\n                setHasInteractedSinceOpening(true);\n            },\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect?.(selectedItem?.value ?? null);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor\n                asChild\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                }}\n            >\n                <div\n                    className={styles.root}\n                    data-status={status}\n                    data-disabled={disabled}\n                    data-empty={!selectedItem}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : getToggleButtonProps({\n                              'aria-label': ariaLabel,\n                              ...(forwardedRef ? { ref: forwardedRef } : {}),\n                          }))}\n                >\n                    <span className={styles.selectedValue}>{selectedItem ? selectedItem.label : placeholder}</span>\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <IconCaretDown size={16} className={styles.caret} />\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                side={side}\n                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectInput.displayName = 'Select';\n\nexport const ForwardedRefSelect = forwardRef<HTMLDivElement, SelectComponentProps>(SelectInput);\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectInput & {\n    Combobox: typeof ForwardedRefCombobox;\n    Item: typeof ForwardedRefSelectItem;\n    Group: typeof ForwardedRefSelectItemGroup;\n    Slot: typeof ForwardedRefSelectSlot;\n} = ForwardedRefSelect;\nSelect.displayName = 'Select';\nSelect.Combobox = ForwardedRefCombobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["SelectInput","children","onSelect","value","defaultValue","placeholder","status","disabled","alignMenu","side","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","jsxs","RadixPopover","jsx","mouseEvent","focusEvent","blurEvent","styles","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefSelect","forwardRef","Select","ForwardedRefCombobox","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":"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"}
+{"version":3,"file":"fondue-components18.js","sources":["../src/components/Section/Section.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/section.module.scss';\n\nexport type SectionProps = LayoutComponentProps & {\n    /**\n     * The display property.\n     * @default 'block'\n     */\n    display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Section = forwardRef<HTMLDivElement, SectionProps>(\n    (\n        {\n            'data-test-id': dataTestId = 'fondue-section',\n            children,\n            role,\n            'aria-label': ariaLabel,\n            'aria-hidden': ariaHidden,\n            'aria-describedby': ariaDescribedBy,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <section\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props)}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                ref={ref}\n            >\n                {children}\n            </section>\n        );\n    },\n);\nSection.displayName = 'Section';\n"],"names":["Section","forwardRef","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AAqBO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,CAAK;AAAA,MAChC,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EACL;AAGZ;AACAH,EAAQ,cAAc;"}

package/dist/fondue-components19.js

@@ -1,58 +1,50 @@
-import { jsxs as f, jsx as s } from "react/jsx-runtime";
-import * as e from "@radix-ui/react-slider";
-import { forwardRef as h, useRef as R } from "react";
-import r from "./fondue-components57.js";
-const g = ({
-  value: a,
-  defaultValue: n = [0],
-  onChange: i,
-  onCommit: m,
-  "data-test-id": c = "fondue-slider",
-  ...d
-}, l) => {
-  const o = R(null);
-  return /* @__PURE__ */ f(
-    e.Root,
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-toggle-group";
+import { forwardRef as n } from "react";
+import { useControllableState as N } from "./fondue-components54.js";
+import e from "./fondue-components55.js";
+const d = ({ children: a, value: o, defaultValue: s, onValueChange: p, ...m }, f) => {
+  const [g, C] = N({
+    prop: o,
+    defaultProp: s,
+    onChange: p
+  });
+  return /* @__PURE__ */ l(
+    i.Root,
     {
-      ref: l,
-      className: r.root,
-      value: a,
-      defaultValue: n,
-      onValueChange: i,
-      onValueCommit: m,
-      "data-test-id": c,
-      ...d,
+      ref: f,
+      ...m,
+      className: e.root,
+      onValueChange: (r) => {
+        r && C(r);
+      },
+      value: g,
+      type: "single",
+      asChild: !1,
+      "aria-disabled": m.disabled,
       children: [
-        /* @__PURE__ */ s(
-          e.Track,
-          {
-            onPointerDown: () => {
-              o.current && (o.current.dataset.showFocusRing = "false");
-            },
-            className: r.track,
-            children: /* @__PURE__ */ s(e.Range, { className: r.range })
-          }
-        ),
-        (a || n).map((w, u) => /* @__PURE__ */ s(
-          e.Thumb,
-          {
-            ref: o,
-            className: r.thumb,
-            onPointerDown: (t) => {
-              t.currentTarget.dataset.showFocusRing = "false";
-            },
-            onBlur: (t) => {
-              t.currentTarget.dataset.showFocusRing = "true";
-            }
-          },
-          u
-        ))
+        a,
+        /* @__PURE__ */ t("div", { className: e.activeIndicator })
       ]
     }
   );
-}, p = h(g);
-p.displayName = "Slider";
+};
+d.displayName = "SegmentedControl.Root";
+const c = ({ children: a, ...o }, s) => /* @__PURE__ */ l(i.Item, { ref: s, ...o, className: e.item, asChild: !1, children: [
+  /* @__PURE__ */ t("span", { className: e.separator }),
+  /* @__PURE__ */ l("span", { className: e.itemLabel, children: [
+    /* @__PURE__ */ t("span", { className: e.itemLabelActive, children: a }),
+    /* @__PURE__ */ t("span", { className: e.itemLabelInactive, children: a })
+  ] })
+] });
+c.displayName = "SegmentedControl.Item";
+const I = {
+  Root: n(d),
+  Item: n(c)
+};
 export {
-  p as Slider
+  I as SegmentedControl,
+  c as SegmentedControlItem,
+  d as SegmentedControlRoot
 };
 //# sourceMappingURL=fondue-components19.js.map

package/dist/fondue-components19.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components19.js","sources":["../src/components/Slider/Slider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixSlider from '@radix-ui/react-slider';\nimport { type ForwardedRef, forwardRef, useRef } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/slider.module.scss';\n\nexport type SliderProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The default value of the slider\n     * Used for uncontrolled components\n     * @default [0]\n     */\n    defaultValue?: number[];\n    /**\n     * The controlled value of the slider\n     * @default [0]\n     */\n    value?: number[];\n    /**\n     * Minimum value of the slider\n     * @default 0\n     */\n    min?: number;\n    /**\n     * Maximum value of the slider\n     * @default 100\n     */\n    max?: number;\n    /**\n     * The granularity with which the slider can step through values\n     * @default 1\n     */\n    step?: number;\n    /**\n     * The minimum steps between thumbs in a range slider\n     * @default 0\n     */\n    minStepsBetweenThumbs?: number;\n    /**\n     * Disable the slider\n     * @default false\n     */\n    disabled?: boolean;\n    onChange?: (value: number[]) => void;\n    onCommit?: (value: number[]) => void;\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nconst SliderComponent = (\n    {\n        value,\n        defaultValue = [0],\n        onChange,\n        onCommit,\n        'data-test-id': dataTestId = 'fondue-slider',\n        ...props\n    }: SliderProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    const sliderThumbRef = useRef<HTMLSpanElement | null>(null);\n    return (\n        <RadixSlider.Root\n            ref={ref}\n            className={styles.root}\n            value={value}\n            defaultValue={defaultValue}\n            onValueChange={onChange}\n            onValueCommit={onCommit}\n            data-test-id={dataTestId}\n            {...props}\n        >\n            <RadixSlider.Track\n                onPointerDown={() => {\n                    if (sliderThumbRef.current) {\n                        sliderThumbRef.current.dataset.showFocusRing = 'false';\n                    }\n                }}\n                className={styles.track}\n            >\n                <RadixSlider.Range className={styles.range} />\n            </RadixSlider.Track>\n            {(value || defaultValue).map((_, index) => (\n                <RadixSlider.Thumb\n                    ref={sliderThumbRef}\n                    className={styles.thumb}\n                    onPointerDown={(event) => {\n                        event.currentTarget.dataset.showFocusRing = 'false';\n                    }}\n                    onBlur={(event) => {\n                        event.currentTarget.dataset.showFocusRing = 'true';\n                    }}\n                    key={index}\n                />\n            ))}\n        </RadixSlider.Root>\n    );\n};\n\nexport const Slider = forwardRef<HTMLButtonElement, SliderProps>(SliderComponent);\nSlider.displayName = 'Slider';\n"],"names":["SliderComponent","value","defaultValue","onChange","onCommit","dataTestId","props","ref","sliderThumbRef","useRef","jsxs","RadixSlider","styles","jsx","_","index","event","Slider","forwardRef"],"mappings":";;;;AAqDA,MAAMA,IAAkB,CACpB;AAAA,EACI,OAAAC;AAAA,EACA,cAAAC,IAAe,CAAC,CAAC;AAAA,EACjB,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,IAAiBC,EAA+B,IAAI;AAEtD,SAAA,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACG,KAAAJ;AAAA,MACA,WAAWK,EAAO;AAAA,MAClB,OAAAX;AAAA,MACA,cAAAC;AAAA,MACA,eAAeC;AAAA,MACf,eAAeC;AAAA,MACf,gBAAcC;AAAA,MACb,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAACF,EAAY;AAAA,UAAZ;AAAA,YACG,eAAe,MAAM;AACjB,cAAIH,EAAe,YACAA,EAAA,QAAQ,QAAQ,gBAAgB;AAAA,YAEvD;AAAA,YACA,WAAWI,EAAO;AAAA,YAElB,4BAACD,EAAY,OAAZ,EAAkB,WAAWC,EAAO,MAAO,CAAA;AAAA,UAAA;AAAA,QAChD;AAAA,SACEX,KAASC,GAAc,IAAI,CAACY,GAAGC,MAC7B,gBAAAF;AAAA,UAACF,EAAY;AAAA,UAAZ;AAAA,YACG,KAAKH;AAAA,YACL,WAAWI,EAAO;AAAA,YAClB,eAAe,CAACI,MAAU;AAChB,cAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,YAChD;AAAA,YACA,QAAQ,CAACA,MAAU;AACT,cAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,YAAA;AAAA,UAChD;AAAA,UACKD;AAAA,QAEZ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACL;AAER,GAEaE,IAASC,EAA2ClB,CAAe;AAChFiB,EAAO,cAAc;"}
+{"version":3,"file":"fondue-components19.js","sources":["../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport styles from './styles/segmentedControl.module.scss';\n\nexport type SegmentedControlRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The default value of the segmented control\n     * Used for uncontrolled components\n     */\n    defaultValue: string;\n    /**\n     * The controlled value of the segmented control\n     */\n    value?: string;\n    /**\n     * Event handler called when the value changes\n     */\n    onValueChange?: (value: string) => void;\n    /**\n     * Disable the segmented control\n     * @default false\n     */\n    disabled?: boolean;\n};\n\nexport const SegmentedControlRoot = (\n    { children, value: propsValue, defaultValue, onValueChange, ...rootProps }: SegmentedControlRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [value, setValue] = useControllableState({\n        prop: propsValue,\n        defaultProp: defaultValue,\n        onChange: onValueChange,\n    });\n\n    return (\n        <ToggleGroupPrimitive.Root\n            ref={ref}\n            {...rootProps}\n            className={styles.root}\n            onValueChange={(value) => {\n                if (value) {\n                    setValue(value);\n                }\n            }}\n            value={value}\n            type=\"single\"\n            asChild={false}\n            aria-disabled={rootProps.disabled}\n        >\n            {children}\n            {/* Active indicator */}\n            <div className={styles.activeIndicator} />\n        </ToggleGroupPrimitive.Root>\n    );\n};\nSegmentedControlRoot.displayName = 'SegmentedControl.Root';\n\ntype SegmentedControlItemProps = {\n    children: ReactNode;\n    value: string;\n};\n\nexport const SegmentedControlItem = (\n    { children, ...itemProps }: SegmentedControlItemProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <ToggleGroupPrimitive.Item ref={ref} {...itemProps} className={styles.item} asChild={false}>\n        {/* Separator */}\n        <span className={styles.separator} />\n        <span className={styles.itemLabel}>\n            {/* Active children */}\n            <span className={styles.itemLabelActive}>{children}</span>\n\n            {/* Inactive children */}\n            <span className={styles.itemLabelInactive}>{children}</span>\n        </span>\n    </ToggleGroupPrimitive.Item>\n);\nSegmentedControlItem.displayName = 'SegmentedControl.Item';\n\nexport const SegmentedControl = {\n    Root: forwardRef<HTMLDivElement, SegmentedControlRootProps>(SegmentedControlRoot),\n    Item: forwardRef<HTMLButtonElement, SegmentedControlItemProps>(SegmentedControlItem),\n};\n"],"names":["SegmentedControlRoot","children","propsValue","defaultValue","onValueChange","rootProps","ref","value","setValue","useControllableState","jsxs","ToggleGroupPrimitive","styles","jsx","SegmentedControlItem","itemProps","SegmentedControl","forwardRef"],"mappings":";;;;;AAgCa,MAAAA,IAAuB,CAChC,EAAE,UAAAC,GAAU,OAAOC,GAAY,cAAAC,GAAc,eAAAC,GAAe,GAAGC,EAAU,GACzEC,MACC;AACD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAqB;AAAA,IAC3C,MAAMP;AAAA,IACN,aAAaC;AAAA,IACb,UAAUC;AAAA,EAAA,CACb;AAGG,SAAA,gBAAAM;AAAA,IAACC,EAAqB;AAAA,IAArB;AAAA,MACG,KAAAL;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWO,EAAO;AAAA,MAClB,eAAe,CAACL,MAAU;AACtB,QAAIA,KACAC,EAASD,CAAK;AAAA,MAEtB;AAAA,MACA,OAAAA;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT,iBAAeF,EAAU;AAAA,MAExB,UAAA;AAAA,QAAAJ;AAAA,QAEA,gBAAAY,EAAA,OAAA,EAAI,WAAWD,EAAO,gBAAiB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5C;AAER;AACAZ,EAAqB,cAAc;AAO5B,MAAMc,IAAuB,CAChC,EAAE,UAAAb,GAAU,GAAGc,EAAA,GACfT,MAEA,gBAAAI,EAACC,EAAqB,MAArB,EAA0B,KAAAL,GAAW,GAAGS,GAAW,WAAWH,EAAO,MAAM,SAAS,IAEjF,UAAA;AAAA,EAAC,gBAAAC,EAAA,QAAA,EAAK,WAAWD,EAAO,UAAW,CAAA;AAAA,EAClC,gBAAAF,EAAA,QAAA,EAAK,WAAWE,EAAO,WAEpB,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWD,EAAO,iBAAkB,UAAAX,GAAS;AAAA,IAGlD,gBAAAY,EAAA,QAAA,EAAK,WAAWD,EAAO,mBAAoB,UAAAX,EAAS,CAAA;AAAA,EAAA,EACzD,CAAA;AAAA,EACJ,CAAA;AAEJa,EAAqB,cAAc;AAE5B,MAAME,IAAmB;AAAA,EAC5B,MAAMC,EAAsDjB,CAAoB;AAAA,EAChF,MAAMiB,EAAyDH,CAAoB;AACvF;"}