@frontify/fondue-components 18.0.0 → 18.2.0

package/dist/fondue-components21.js

@@ -1,141 +1,58 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import { IconCaretDown as T, IconCheckMark as $, IconExclamationMarkTriangle as A } from "@frontify/fondue-icons";
-import * as g from "@radix-ui/react-popover";
-import { Slot as q } from "@radix-ui/react-slot";
-import { useSelect as J } from "downshift";
-import { forwardRef as K, useRef as L, useState as Q } from "react";
-import { ForwardedRefCombobox as U } from "./fondue-components59.js";
-import { ForwardedRefSelectItem as W, ForwardedRefSelectItemGroup as X } from "./fondue-components60.js";
-import { SelectMenu as Y } from "./fondue-components61.js";
-import { ForwardedRefSelectSlot as Z } from "./fondue-components62.js";
-import o from "./fondue-components63.js";
-import { useSelectData as _ } from "./fondue-components64.js";
-const S = ({
-  children: h,
-  onSelect: s,
-  value: b,
-  defaultValue: I,
-  placeholder: N = "",
-  status: n = "neutral",
-  disabled: m,
-  alignMenu: w = "start",
-  side: y = "bottom",
-  id: C,
-  showStringValue: R = !0,
-  "data-test-id": c = "fondue-select",
-  viewportCollisionPadding: x = "compact",
-  ...l
-}, F) => {
-  const { inputSlots: v, menuSlots: k, items: B, clearButton: u, getItemByValue: p } = _(h), M = p(I), P = p(b), i = L(!1), [G, f] = Q(!1), { getToggleButtonProps: O, getMenuProps: z, getItemProps: D, reset: V, selectedItem: r, isOpen: j, highlightedIndex: E } = J({
-    items: B,
-    defaultSelectedItem: M,
-    selectedItem: P,
-    toggleButtonId: C,
-    labelId: "aria-labelledby" in l ? l["aria-labelledby"] : void 0,
-    onIsOpenChange: () => {
-      f(!1);
-    },
-    onHighlightedIndexChange: () => {
-      f(!0);
-    },
-    onSelectedItemChange: ({ selectedItem: e }) => {
-      s == null || s((e == null ? void 0 : e.value) ?? null);
-    },
-    itemToString: (e) => e ? e.label : ""
-  }), H = r ? !R && r.children || r.label : N;
-  return /* @__PURE__ */ d(g.Root, { open: j, children: [
-    /* @__PURE__ */ a(
-      g.Anchor,
-      {
-        asChild: !0,
-        onMouseDown: (e) => {
-          i.current = !0, e.currentTarget.dataset.showFocusRing = "false";
-        },
-        onFocus: (e) => {
-          i.current || (e.target.dataset.showFocusRing = "true");
-        },
-        onBlur: (e) => {
-          e.target.dataset.showFocusRing = "false", i.current = !1;
-        },
-        children: /* @__PURE__ */ d(
-          "div",
-          {
-            className: o.root,
-            "data-status": n,
-            "data-disabled": m,
-            "data-empty": !r,
-            "data-test-id": c,
-            ...m ? {} : O({
-              "aria-label": "aria-label" in l ? l["aria-label"] : void 0,
-              ref: F
-            }),
-            children: [
-              /* @__PURE__ */ a("span", { className: o.selectedValue, children: H }),
-              v,
-              u && /* @__PURE__ */ a(
-                q,
-                {
-                  onClick: (e) => {
-                    e.stopPropagation(), V();
-                  },
-                  className: o.clear,
-                  children: u
-                }
-              ),
-              /* @__PURE__ */ d("div", { className: o.icons, children: [
-                /* @__PURE__ */ a(T, { size: 16, className: o.caret }),
-                n === "success" ? /* @__PURE__ */ a(
-                  $,
-                  {
-                    size: 16,
-                    className: o.iconSuccess,
-                    "data-test-id": `${c}-success-icon`
-                  }
-                ) : null,
-                n === "error" ? /* @__PURE__ */ a(
-                  A,
-                  {
-                    size: 16,
-                    className: o.iconError,
-                    "data-test-id": `${c}-error-icon`
-                  }
-                ) : null
-              ] })
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ a(
-      Y,
-      {
-        align: w,
-        side: y,
-        highlightedIndex: E,
-        getMenuProps: z,
-        getItemProps: D,
-        selectedItem: r,
-        hasInteractedSinceOpening: G,
-        viewportCollisionPadding: x,
-        children: k
-      }
-    )
-  ] });
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import * as n from "@radix-ui/react-toggle-group";
+import { forwardRef as i } from "react";
+import { useControllableState as N } from "./fondue-components60.js";
+import e from "./fondue-components61.js";
+const d = ({
+  children: a,
+  value: o,
+  defaultValue: s,
+  onValueChange: p,
+  hugWidth: f = !0,
+  ...m
+}, g) => {
+  const [C, u] = N({
+    prop: o,
+    defaultProp: s,
+    onChange: p
+  });
+  return /* @__PURE__ */ l(
+    n.Root,
+    {
+      ref: g,
+      ...m,
+      className: e.root,
+      onValueChange: (r) => {
+        r && u(r);
+      },
+      value: C,
+      type: "single",
+      asChild: !1,
+      "data-hug-width": f,
+      "aria-disabled": m.disabled,
+      children: [
+        a,
+        /* @__PURE__ */ t("div", { className: e.activeIndicator })
+      ]
+    }
+  );
+};
+d.displayName = "SegmentedControl.Root";
+const c = ({ children: a, ...o }, s) => /* @__PURE__ */ l(n.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 S = {
+  Root: i(d),
+  Item: i(c)
 };
-S.displayName = "Select";
-const ee = K(S), t = ee;
-t.displayName = "Select";
-t.Combobox = U;
-t.Combobox.displayName = "Select.Combobox";
-t.Item = W;
-t.Item.displayName = "Select.Item";
-t.Group = X;
-t.Group.displayName = "Select.Group";
-t.Slot = Z;
-t.Slot.displayName = "Select.Slot";
 export {
-  ee as ForwardedRefSelect,
-  t as Select,
-  S as SelectInput
+  S as SegmentedControl,
+  c as SegmentedControlItem,
+  d as SegmentedControlRoot
 };
 //# sourceMappingURL=fondue-components21.js.map

package/dist/fondue-components21.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components21.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 { type CommonAriaProps } from '#/helpers/aria';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } 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 data test id of the select component.\n     */\n    'data-test-id'?: string;\n    /**\n     * Id of the select component\n     */\n    id?: string;\n    /**\n     * The value of the select is shown as plan text when set to true, items child components are used if set to true\n     * @default true\n     */\n    showStringValue?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n} & CommonAriaProps;\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        id,\n        showStringValue = true,\n        'data-test-id': dataTestId = 'fondue-select',\n        viewportCollisionPadding = 'compact',\n        ...props\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            toggleButtonId: id,\n            labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\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    const displayedValue = selectedItem\n        ? (!showStringValue && selectedItem.children) || selectedItem.label\n        : placeholder;\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': 'aria-label' in props ? props['aria-label'] : undefined,\n                              ref: forwardedRef,\n                          }))}\n                >\n                    <span className={styles.selectedValue}>{displayedValue}</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                viewportCollisionPadding={viewportCollisionPadding}\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","id","showStringValue","dataTestId","viewportCollisionPadding","props","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","displayedValue","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-components21.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 ReactElement, type ReactNode } from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport styles from './styles/segmentedControl.module.scss';\n\nexport type SegmentedControlRootProps<TValue extends string = string> = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The default value of the segmented control\n     * Used for uncontrolled components\n     */\n    defaultValue: TValue;\n    /**\n     * The controlled value of the segmented control\n     */\n    value?: TValue;\n    /**\n     * Event handler called when the value changes\n     */\n    onValueChange?: (value: TValue) => void;\n    /**\n     * Disable the segmented control\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Specify if the segmented control should only take the width of its content\n     * @default true\n     */\n    hugWidth?: boolean;\n};\n\nexport const SegmentedControlRoot = <TValue extends string = string>(\n    {\n        children,\n        value: propsValue,\n        defaultValue,\n        onValueChange,\n        hugWidth = true,\n        ...rootProps\n    }: SegmentedControlRootProps<TValue>,\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 as TValue);\n                }\n            }}\n            value={value}\n            type=\"single\"\n            asChild={false}\n            data-hug-width={hugWidth}\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(SegmentedControlRoot) as <TValue extends string = string>(\n        props: SegmentedControlRootProps<TValue> & { ref?: ForwardedRef<HTMLDivElement> },\n    ) => ReactElement,\n    Item: forwardRef(SegmentedControlItem),\n};\n"],"names":["SegmentedControlRoot","children","propsValue","defaultValue","onValueChange","hugWidth","rootProps","ref","value","setValue","useControllableState","jsxs","ToggleGroupPrimitive","styles","jsx","SegmentedControlItem","itemProps","SegmentedControl","forwardRef"],"mappings":";;;;;AAqCO,MAAMA,IAAuB,CAChC;AAAA,EACI,UAAAC;AAAA,EACA,OAAOC;AAAA,EACP,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,GAAGC;AACP,GACAC,MACC;AACD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAqB;AAAA,IAC3C,MAAMR;AAAA,IACN,aAAaC;AAAA,IACb,UAAUC;AAAA,EAAA,CACb;AAGG,SAAA,gBAAAO;AAAA,IAACC,EAAqB;AAAA,IAArB;AAAA,MACG,KAAAL;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWO,EAAO;AAAA,MAClB,eAAe,CAACL,MAAU;AACtB,QAAIA,KACAC,EAASD,CAAe;AAAA,MAEhC;AAAA,MACA,OAAAA;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT,kBAAgBH;AAAA,MAChB,iBAAeC,EAAU;AAAA,MAExB,UAAA;AAAA,QAAAL;AAAA,QAEA,gBAAAa,EAAA,OAAA,EAAI,WAAWD,EAAO,gBAAiB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5C;AAER;AACAb,EAAqB,cAAc;AAO5B,MAAMe,IAAuB,CAChC,EAAE,UAAAd,GAAU,GAAGe,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,UAAAZ,GAAS;AAAA,IAGlD,gBAAAa,EAAA,QAAA,EAAK,WAAWD,EAAO,mBAAoB,UAAAZ,EAAS,CAAA;AAAA,EAAA,EACzD,CAAA;AAAA,EACJ,CAAA;AAEJc,EAAqB,cAAc;AAE5B,MAAME,IAAmB;AAAA,EAC5B,MAAMC,EAAWlB,CAAoB;AAAA,EAGrC,MAAMkB,EAAWH,CAAoB;AACzC;"}

package/dist/fondue-components22.js

@@ -1,58 +1,141 @@
-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-components65.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,
-    {
-      ref: l,
-      className: r.root,
-      value: a,
-      defaultValue: n,
-      onValueChange: i,
-      onValueCommit: m,
-      "data-test-id": c,
-      ...d,
-      children: [
-        /* @__PURE__ */ s(
-          e.Track,
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { IconCaretDown as T, IconCheckMark as $, IconExclamationMarkTriangle as A } from "@frontify/fondue-icons";
+import * as g from "@radix-ui/react-popover";
+import { Slot as q } from "@radix-ui/react-slot";
+import { useSelect as J } from "downshift";
+import { forwardRef as K, useRef as L, useState as Q } from "react";
+import { ForwardedRefCombobox as U } from "./fondue-components62.js";
+import { ForwardedRefSelectItem as W, ForwardedRefSelectItemGroup as X } from "./fondue-components63.js";
+import { SelectMenu as Y } from "./fondue-components64.js";
+import { ForwardedRefSelectSlot as Z } from "./fondue-components65.js";
+import o from "./fondue-components66.js";
+import { useSelectData as _ } from "./fondue-components67.js";
+const S = ({
+  children: h,
+  onSelect: s,
+  value: b,
+  defaultValue: I,
+  placeholder: N = "",
+  status: n = "neutral",
+  disabled: m,
+  alignMenu: w = "start",
+  side: y = "bottom",
+  id: C,
+  showStringValue: R = !0,
+  "data-test-id": c = "fondue-select",
+  viewportCollisionPadding: x = "compact",
+  ...l
+}, F) => {
+  const { inputSlots: v, menuSlots: k, items: B, clearButton: u, getItemByValue: p } = _(h), M = p(I), P = p(b), i = L(!1), [G, f] = Q(!1), { getToggleButtonProps: O, getMenuProps: z, getItemProps: D, reset: V, selectedItem: r, isOpen: j, highlightedIndex: E } = J({
+    items: B,
+    defaultSelectedItem: M,
+    selectedItem: P,
+    toggleButtonId: C,
+    labelId: "aria-labelledby" in l ? l["aria-labelledby"] : void 0,
+    onIsOpenChange: () => {
+      f(!1);
+    },
+    onHighlightedIndexChange: () => {
+      f(!0);
+    },
+    onSelectedItemChange: ({ selectedItem: e }) => {
+      s == null || s((e == null ? void 0 : e.value) ?? null);
+    },
+    itemToString: (e) => e ? e.label : ""
+  }), H = r ? !R && r.children || r.label : N;
+  return /* @__PURE__ */ d(g.Root, { open: j, children: [
+    /* @__PURE__ */ a(
+      g.Anchor,
+      {
+        asChild: !0,
+        onMouseDown: (e) => {
+          i.current = !0, e.currentTarget.dataset.showFocusRing = "false";
+        },
+        onFocus: (e) => {
+          i.current || (e.target.dataset.showFocusRing = "true");
+        },
+        onBlur: (e) => {
+          e.target.dataset.showFocusRing = "false", i.current = !1;
+        },
+        children: /* @__PURE__ */ d(
+          "div",
           {
-            onPointerDown: () => {
-              o.current && (o.current.dataset.showFocusRing = "false");
-            },
-            className: r.track,
-            children: /* @__PURE__ */ s(e.Range, { className: r.range })
+            className: o.root,
+            "data-status": n,
+            "data-disabled": m,
+            "data-empty": !r,
+            "data-test-id": c,
+            ...m ? {} : O({
+              "aria-label": "aria-label" in l ? l["aria-label"] : void 0,
+              ref: F
+            }),
+            children: [
+              /* @__PURE__ */ a("span", { className: o.selectedValue, children: H }),
+              v,
+              u && /* @__PURE__ */ a(
+                q,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation(), V();
+                  },
+                  className: o.clear,
+                  children: u
+                }
+              ),
+              /* @__PURE__ */ d("div", { className: o.icons, children: [
+                /* @__PURE__ */ a(T, { size: 16, className: o.caret }),
+                n === "success" ? /* @__PURE__ */ a(
+                  $,
+                  {
+                    size: 16,
+                    className: o.iconSuccess,
+                    "data-test-id": `${c}-success-icon`
+                  }
+                ) : null,
+                n === "error" ? /* @__PURE__ */ a(
+                  A,
+                  {
+                    size: 16,
+                    className: o.iconError,
+                    "data-test-id": `${c}-error-icon`
+                  }
+                ) : null
+              ] })
+            ]
           }
-        ),
-        (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
-        ))
-      ]
-    }
-  );
-}, p = h(g);
-p.displayName = "Slider";
+        )
+      }
+    ),
+    /* @__PURE__ */ a(
+      Y,
+      {
+        align: w,
+        side: y,
+        highlightedIndex: E,
+        getMenuProps: z,
+        getItemProps: D,
+        selectedItem: r,
+        hasInteractedSinceOpening: G,
+        viewportCollisionPadding: x,
+        children: k
+      }
+    )
+  ] });
+};
+S.displayName = "Select";
+const ee = K(S), t = ee;
+t.displayName = "Select";
+t.Combobox = U;
+t.Combobox.displayName = "Select.Combobox";
+t.Item = W;
+t.Item.displayName = "Select.Item";
+t.Group = X;
+t.Group.displayName = "Select.Group";
+t.Slot = Z;
+t.Slot.displayName = "Select.Slot";
 export {
-  p as Slider
+  ee as ForwardedRefSelect,
+  t as Select,
+  S as SelectInput
 };
 //# sourceMappingURL=fondue-components22.js.map

package/dist/fondue-components22.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components22.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-components22.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 { type CommonAriaProps } from '#/helpers/aria';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } 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 data test id of the select component.\n     */\n    'data-test-id'?: string;\n    /**\n     * Id of the select component\n     */\n    id?: string;\n    /**\n     * The value of the select is shown as plan text when set to true, items child components are used if set to true\n     * @default true\n     */\n    showStringValue?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n} & CommonAriaProps;\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        id,\n        showStringValue = true,\n        'data-test-id': dataTestId = 'fondue-select',\n        viewportCollisionPadding = 'compact',\n        ...props\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            toggleButtonId: id,\n            labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\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    const displayedValue = selectedItem\n        ? (!showStringValue && selectedItem.children) || selectedItem.label\n        : placeholder;\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': 'aria-label' in props ? props['aria-label'] : undefined,\n                              ref: forwardedRef,\n                          }))}\n                >\n                    <span className={styles.selectedValue}>{displayedValue}</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                viewportCollisionPadding={viewportCollisionPadding}\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","id","showStringValue","dataTestId","viewportCollisionPadding","props","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","displayedValue","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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"}

package/dist/fondue-components23.js

@@ -1,32 +1,58 @@
-import { jsx as e } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-switch";
-import { forwardRef as l } from "react";
-import { cn as f } from "./fondue-components33.js";
-import t from "./fondue-components66.js";
-const n = ({
+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-components68.js";
+const g = ({
   value: a,
-  defaultValue: i,
-  size: m = "medium",
-  onChange: r,
-  "data-test-id": c = "fondue-switch",
-  "aria-label": d = "Switch",
-  ...s
-}, h) => /* @__PURE__ */ e(
-  o.Root,
-  {
-    ref: h,
-    checked: a,
-    defaultChecked: i,
-    className: f([t.root, t[m]]),
-    onCheckedChange: r,
-    "aria-label": d,
-    "data-test-id": c,
-    ...s,
-    children: /* @__PURE__ */ e(o.Thumb, { className: t.thumb })
-  }
-), p = l(n);
-p.displayName = "Switch";
+  defaultValue: n = [0],
+  onChange: i,
+  onCommit: m,
+  "data-test-id": c = "fondue-slider",
+  ...d
+}, l) => {
+  const o = R(null);
+  return /* @__PURE__ */ f(
+    e.Root,
+    {
+      ref: l,
+      className: r.root,
+      value: a,
+      defaultValue: n,
+      onValueChange: i,
+      onValueCommit: m,
+      "data-test-id": c,
+      ...d,
+      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
+        ))
+      ]
+    }
+  );
+}, p = h(g);
+p.displayName = "Slider";
 export {
-  p as Switch
+  p as Slider
 };
 //# sourceMappingURL=fondue-components23.js.map

package/dist/fondue-components23.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components23.js","sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixSwitch from '@radix-ui/react-switch';\nimport { type FormEvent, type ForwardedRef, forwardRef } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/switch.module.scss';\n\ntype SwitchProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The size of the switch component.\n     * @default medium\n     */\n    size?: 'small' | 'medium' | 'large';\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     * @default false\n     */\n    value?: boolean;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     * @default false\n     */\n    defaultValue?: boolean;\n    /**\n     * Disables the select component.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Whether the switch is required.\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Callback function that is called when the switch is toggled.\n     * @param checked - The new checked state of the switch\n     */\n    onChange?: (checked: boolean) => void;\n    /**\n     * Event handler called when the checkbox is blurred\n     * @param event - The event object\n     */\n    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is focused\n     * @param event - The event object\n     */\n    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nconst SwitchComponent = (\n    {\n        value,\n        defaultValue,\n        size = 'medium',\n        onChange,\n        'data-test-id': dataTestId = 'fondue-switch',\n        'aria-label': ariaLabel = 'Switch',\n        ...props\n    }: SwitchProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <RadixSwitch.Root\n        ref={ref}\n        checked={value}\n        defaultChecked={defaultValue}\n        className={cn([styles.root, styles[size]])}\n        onCheckedChange={onChange}\n        aria-label={ariaLabel}\n        data-test-id={dataTestId}\n        {...props}\n    >\n        <RadixSwitch.Thumb className={styles.thumb} />\n    </RadixSwitch.Root>\n);\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(SwitchComponent);\nSwitch.displayName = 'Switch';\n"],"names":["SwitchComponent","value","defaultValue","size","onChange","dataTestId","ariaLabel","props","ref","jsx","RadixSwitch","cn","styles","Switch","forwardRef"],"mappings":";;;;;AAwDA,MAAMA,IAAkB,CACpB;AAAA,EACI,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,cAAcC,IAAY;AAAA,EAC1B,GAAGC;AACP,GACAC,MAEA,gBAAAC;AAAA,EAACC,EAAY;AAAA,EAAZ;AAAA,IACG,KAAAF;AAAA,IACA,SAASP;AAAA,IACT,gBAAgBC;AAAA,IAChB,WAAWS,EAAG,CAACC,EAAO,MAAMA,EAAOT,CAAI,CAAC,CAAC;AAAA,IACzC,iBAAiBC;AAAA,IACjB,cAAYE;AAAA,IACZ,gBAAcD;AAAA,IACb,GAAGE;AAAA,IAEJ,4BAACG,EAAY,OAAZ,EAAkB,WAAWE,EAAO,MAAO,CAAA;AAAA,EAAA;AAChD,GAGSC,IAASC,EAA2Cd,CAAe;AAChFa,EAAO,cAAc;"}
+{"version":3,"file":"fondue-components23.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;"}