@frontify/fondue-components 29.1.0 → 29.2.0

package/dist/fondue-components93.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components93.js","sources":["../src/components/Select/SelectSingle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { SelectBase, type SelectSharedProps } from './components/SelectBase';\nimport { useSingleSelect } from './hooks/useSingleSelect';\n\nexport type SelectSingleProps = SelectSharedProps & {\n    /**\n     * The active value in the select component. This is used to control the select externally\n     */\n    value?: string | null;\n    /**\n     * Callback function that is called when an item is selected\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The default value of the select component. Used for uncontrolled usages\n     */\n    defaultValue?: string;\n};\n\nconst SelectSingleInput = (\n    { value, onSelect, defaultValue, ...rest }: SelectSingleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, selectItem, clear } = useSingleSelect(onSelect, value, defaultValue);\n\n    return (\n        <SelectBase\n            ref={ref}\n            multiple={false}\n            selectedItemValues={selectedItemValues}\n            onItemSelect={selectItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const SelectSingle = forwardRef<HTMLDivElement, SelectSingleProps>(SelectSingleInput);\nSelectSingle.displayName = 'Select';\n"],"names":["SelectSingleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","selectItem","clear","useSingleSelect","jsx","SelectBase","SelectSingle","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAoB,CACtB,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,YAAAC,GAAY,OAAAC,EAAA,IAAUC,EAAgBP,GAAUD,GAAOE,CAAY;AAE/F,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAU;AAAA,MACV,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAeC,EAA8Cb,CAAiB;AAC3FY,EAAa,cAAc;"}
+{"version":3,"file":"fondue-components93.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 [value, setValue] = useState<TValue | undefined>(defaultProp);\n    const prevValueRef = useRef(value);\n\n    useEffect(() => {\n        if (prevValueRef.current !== value) {\n            onChange?.(value as TValue);\n            prevValueRef.current = value;\n        }\n    }, [onChange, value]);\n\n    return [value, setValue] as const;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAC;AACtB,MAA0C;AACtC,QAAM,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,MAEpC;AACI,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAAA;AAG1D,SAAO,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAClH,QAAM,CAACK,GAAOG,CAAQ,IAAIG,EAA6BZ,CAAW,GAC5Da,IAAeC,EAAOR,CAAK;AAEjC,SAAAS,EAAU,MAAM;AACZ,IAAIF,EAAa,YAAYP,MACzBL,KAAA,QAAAA,EAAWK,IACXO,EAAa,UAAUP;AAAA,EAE/B,GAAG,CAACL,GAAUK,CAAK,CAAC,GAEb,CAACA,GAAOG,CAAQ;AAC3B;"}

package/dist/fondue-components94.js

@@ -1,22 +1,20 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { IconCheckMark as n } from "@frontify/fondue-icons";
-import { forwardRef as l } from "react";
-import a from "./fondue-components127.js";
-const o = ({ "data-test-id": c = "fondue-select-item", ...e }, t) => /* @__PURE__ */ d("li", { "data-test-id": c, ref: t, ...e, children: [
-  /* @__PURE__ */ r("div", { className: a.itemValue, children: e.children }),
-  /* @__PURE__ */ r(n, { className: a.checkmarkIcon })
-] });
-o.displayName = "Select.Item";
-const I = l(o), s = ({ children: c, groupId: e, heading: t, "data-test-id": i = "fondue-select-item-group" }, m) => /* @__PURE__ */ d("div", { "data-test-id": i, className: a.group, ref: m, children: [
-  t ? /* @__PURE__ */ r("div", { className: a.groupHeading, children: /* @__PURE__ */ r("span", { children: t }) }) : null,
-  c
-] }, e);
-s.displayName = "Select.Group";
-const N = l(s);
+const t = "_root_zjamu_5", e = "_item_zjamu_34", a = "_itemLabel_zjamu_59", i = "_itemLabelActive_zjamu_80", o = "_itemLabelInactive_zjamu_111", _ = "_activeIndicator_zjamu_141", c = "_separator_zjamu_267", m = {
+  root: t,
+  item: e,
+  itemLabel: a,
+  itemLabelActive: i,
+  itemLabelInactive: o,
+  activeIndicator: _,
+  separator: c
+};
 export {
-  I as ForwardedRefSelectItem,
-  N as ForwardedRefSelectItemGroup,
-  o as SelectItem,
-  s as SelectItemGroup
+  _ as activeIndicator,
+  m as default,
+  e as item,
+  a as itemLabel,
+  i as itemLabelActive,
+  o as itemLabelInactive,
+  t as root,
+  c as separator
 };
 //# sourceMappingURL=fondue-components94.js.map

package/dist/fondue-components94.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components94.js","sources":["../src/components/Select/components/SelectItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark } from '@frontify/fondue-icons';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from '../styles/select.module.scss';\n\nexport type SelectItemProps = {\n    /**\n     * The value of the select item.\n     */\n    value: string;\n    /**\n     * The data test id of the select item.\n     */\n    'data-test-id'?: string;\n} & (\n    | {\n          /**\n           * The label of the select item. Required when the child is not a string.\n           */\n          label: string;\n          /**\n           * The children of the select item. This can be a custom component or a string.\n           */\n          children?: ReactNode;\n      }\n    | {\n          label?: string;\n          children: string;\n      }\n);\n\nexport const SelectItem = (\n    { 'data-test-id': dataTestId = 'fondue-select-item', ...props }: SelectItemProps,\n    forwardedRef?: ForwardedRef<HTMLLIElement>,\n) => {\n    return (\n        <li data-test-id={dataTestId} ref={forwardedRef} {...props}>\n            <div className={styles.itemValue}>{props.children}</div>\n            <IconCheckMark className={styles.checkmarkIcon} />\n        </li>\n    );\n};\nSelectItem.displayName = 'Select.Item';\n\nexport const ForwardedRefSelectItem = forwardRef<HTMLLIElement, SelectItemProps>(SelectItem);\n\nexport type SelectItemGroupProps = {\n    /**\n     * The children of the select item group. This can contain multiple `Select.Item` components.\n     */\n    children: ReactNode;\n    /**\n     * The internal group ID of the select item group.\n     */\n    groupId: string;\n    /**\n     * The groups heading\n     */\n    heading?: string;\n    /**\n     * The data test id of the select item group.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectItemGroup = (\n    { children, groupId, heading, 'data-test-id': dataTestId = 'fondue-select-item-group' }: SelectItemGroupProps,\n    forwardedRef?: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} className={styles.group} ref={forwardedRef} key={groupId}>\n            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span>{heading}</span>\n                </div>\n            ) : null}\n            {children}\n        </div>\n    );\n};\nSelectItemGroup.displayName = 'Select.Group';\n\nexport const ForwardedRefSelectItemGroup = forwardRef<HTMLDivElement, SelectItemGroupProps>(SelectItemGroup);\n"],"names":["SelectItem","dataTestId","props","forwardedRef","jsx","styles","IconCheckMark","ForwardedRefSelectItem","forwardRef","SelectItemGroup","children","groupId","heading","jsxs","ForwardedRefSelectItemGroup"],"mappings":";;;;AAiCO,MAAMA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxDC,wBAGK,MAAA,EAAG,gBAAcF,GAAY,KAAKE,GAAe,GAAGD,GACjD,UAAA;AAAA,EAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAO,WAAY,YAAM,UAAS;AAAA,EAClD,gBAAAD,EAACE,GAAA,EAAc,WAAWD,EAAO,cAAA,CAAe;AAAA,GACpD;AAGRL,EAAW,cAAc;AAElB,MAAMO,IAAyBC,EAA2CR,CAAU,GAqB9ES,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,SAAAC,GAAS,gBAAgBX,IAAa,2BAAA,GAC3DE,MAGI,gBAAAU,EAAC,SAAI,gBAAcZ,GAAY,WAAWI,EAAO,OAAO,KAAKF,GACxD,UAAA;AAAA,EAAAS,IACG,gBAAAR,EAAC,SAAI,WAAWC,EAAO,cACnB,UAAA,gBAAAD,EAAC,QAAA,EAAM,UAAAQ,EAAA,CAAQ,EAAA,CACnB,IACA;AAAA,EACHF;AAAA,EAAA,GAN2EC,CAOhF;AAGRF,EAAgB,cAAc;AAEvB,MAAMK,IAA8BN,EAAiDC,CAAe;"}
+{"version":3,"file":"fondue-components94.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/fondue-components95.js

@@ -1,11 +1,23 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import m from "./fondue-components127.js";
-const t = ({ children: e, name: o, "data-test-id": r = "fondue-select-slot", ...a }, s) => /* @__PURE__ */ l("div", { "data-test-id": r, ref: s, className: m.slot, "data-name": o, ...a, children: e });
-t.displayName = "Select.Slot";
-const S = d(t);
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { ComboboxBase as c } from "./fondue-components130.js";
+import { useMultiselect as b } from "./fondue-components131.js";
+const a = ({ value: e, onSelect: o, defaultValue: t, ...l }, m) => {
+  const { selectedItemValues: r, toggleSelectedItem: p, clear: i } = b(o, e, t);
+  return /* @__PURE__ */ s(
+    c,
+    {
+      ref: m,
+      multiple: !0,
+      selectedItemValues: r,
+      onItemSelect: p,
+      onClear: i,
+      ...l
+    }
+  );
+}, n = u(a);
+n.displayName = "Select.Combobox.Multiple";
 export {
-  S as ForwardedRefSelectSlot,
-  t as SelectSlot
+  n as ComboboxMultiple
 };
 //# sourceMappingURL=fondue-components95.js.map

package/dist/fondue-components95.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components95.js","sources":["../src/components/Select/components/SelectSlot.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from '../styles/select.module.scss';\n\nexport type SelectSlotProps = {\n    /**\n     * The children of the select slot. This can be a custom component.\n     */\n    children?: ReactNode;\n    /**\n     * The slot name that is used to determine the placement.\n     */\n    name: 'menu' | 'left' | 'right' | 'clear';\n    /**\n     * The data test id of the select slot.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-select-slot', ...props }: SelectSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={forwardedRef} className={styles.slot} data-name={name} {...props}>\n            {children}\n        </div>\n    );\n};\nSelectSlot.displayName = 'Select.Slot';\n\nexport const ForwardedRefSelectSlot = forwardRef<HTMLDivElement, SelectSlotProps>(SelectSlot);\n"],"names":["SelectSlot","children","name","dataTestId","props","forwardedRef","jsx","styles","ForwardedRefSelectSlot","forwardRef"],"mappings":";;;AAqBO,MAAMA,IAAa,CACtB,EAAE,UAAAC,GAAU,MAAAC,GAAM,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxEC,MAGI,gBAAAC,EAAC,OAAA,EAAI,gBAAcH,GAAY,KAAKE,GAAc,WAAWE,EAAO,MAAM,aAAWL,GAAO,GAAGE,GAC1F,UAAAH,GACL;AAGRD,EAAW,cAAc;AAElB,MAAMQ,IAAyBC,EAA4CT,CAAU;"}
+{"version":3,"file":"fondue-components95.js","sources":["../src/components/Select/ComboboxMultiple.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { ComboboxBase, type ComboboxSharedProps } from './components/ComboboxBase';\nimport { useMultiselect } from './hooks/useMultiselect';\n\nexport type ComboboxMultipleProps = ComboboxSharedProps & {\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally\n     */\n    value?: string[] | null;\n    /**\n     * Callback function that is called when items are selected\n     */\n    onSelect?: (selectedValues: string[] | null) => void;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages\n     */\n    defaultValue?: string[];\n};\n\nconst ComboboxMultipleInput = (\n    { value, onSelect, defaultValue, ...rest }: ComboboxMultipleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, toggleSelectedItem, clear } = useMultiselect(onSelect, value, defaultValue);\n\n    return (\n        <ComboboxBase\n            ref={ref}\n            multiple\n            selectedItemValues={selectedItemValues}\n            onItemSelect={toggleSelectedItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const ComboboxMultiple = forwardRef<HTMLDivElement, ComboboxMultipleProps>(ComboboxMultipleInput);\nComboboxMultiple.displayName = 'Select.Combobox.Multiple';\n"],"names":["ComboboxMultipleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","toggleSelectedItem","clear","useMultiselect","jsx","ComboboxBase","ComboboxMultiple","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAwB,CAC1B,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,oBAAAC,GAAoB,OAAAC,EAAA,IAAUC,EAAeP,GAAUD,GAAOE,CAAY;AAEtG,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAQ;AAAA,MACR,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAmBC,EAAkDb,CAAqB;AACvGY,EAAiB,cAAc;"}

package/dist/fondue-components96.js

@@ -1,14 +1,23 @@
-const t = "_root_1x5sc_5", c = "_thumb_1x5sc_17", o = "_track_1x5sc_21", s = "_range_1x5sc_28", _ = {
-  root: t,
-  thumb: c,
-  track: o,
-  range: s
-};
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { ComboboxBase as a } from "./fondue-components130.js";
+import { useSingleSelect as b } from "./fondue-components132.js";
+const p = ({ value: e, onSelect: o, defaultValue: t, ...m }, l) => {
+  const { selectedItemValues: r, selectItem: s, clear: n } = b(o, e, t);
+  return /* @__PURE__ */ c(
+    a,
+    {
+      ref: l,
+      multiple: !1,
+      selectedItemValues: r,
+      onItemSelect: s,
+      onClear: n,
+      ...m
+    }
+  );
+}, f = i(p);
+f.displayName = "Select.Combobox";
 export {
-  _ as default,
-  s as range,
-  t as root,
-  c as thumb,
-  o as track
+  f as ComboboxSingle
 };
 //# sourceMappingURL=fondue-components96.js.map

package/dist/fondue-components96.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components96.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"fondue-components96.js","sources":["../src/components/Select/ComboboxSingle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { ComboboxBase, type ComboboxSharedProps } from './components/ComboboxBase';\nimport { useSingleSelect } from './hooks/useSingleSelect';\n\nexport type ComboboxSingleProps = ComboboxSharedProps & {\n    /**\n     * The active value in the combobox component. This is used to control the combobox externally\n     */\n    value?: string | null;\n    /**\n     * Callback function that is called when an item is selected\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The default value of the combobox component. Used for uncontrolled usages\n     */\n    defaultValue?: string;\n};\n\nconst ComboboxSingleInput = (\n    { value, onSelect, defaultValue, ...rest }: ComboboxSingleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, selectItem, clear } = useSingleSelect(onSelect, value, defaultValue);\n\n    return (\n        <ComboboxBase\n            ref={ref}\n            multiple={false}\n            selectedItemValues={selectedItemValues}\n            onItemSelect={selectItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const ComboboxSingle = forwardRef<HTMLDivElement, ComboboxSingleProps>(ComboboxSingleInput);\nComboboxSingle.displayName = 'Select.Combobox';\n"],"names":["ComboboxSingleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","selectItem","clear","useSingleSelect","jsx","ComboboxBase","ComboboxSingle","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAsB,CACxB,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,YAAAC,GAAY,OAAAC,EAAA,IAAUC,EAAgBP,GAAUD,GAAOE,CAAY;AAE/F,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAU;AAAA,MACV,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAiBC,EAAgDb,CAAmB;AACjGY,EAAe,cAAc;"}

package/dist/fondue-components97.js

@@ -1,14 +1,23 @@
-const t = "_root_gywoe_3", o = "_content_gywoe_18", n = "_action_gywoe_22", c = "_actionButton_gywoe_200", _ = {
-  root: t,
-  content: o,
-  action: n,
-  actionButton: c
-};
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { SelectBase as u } from "./fondue-components133.js";
+import { useMultiselect as a } from "./fondue-components131.js";
+const n = ({ value: e, onSelect: t, defaultValue: l, ...o }, r) => {
+  const { selectedItemValues: m, toggleSelectedItem: c, clear: i } = a(t, e, l);
+  return /* @__PURE__ */ p(
+    u,
+    {
+      ref: r,
+      multiple: !0,
+      selectedItemValues: m,
+      onItemSelect: c,
+      onClear: i,
+      ...o
+    }
+  );
+}, f = s(n);
+f.displayName = "Select.Multi";
 export {
-  n as action,
-  c as actionButton,
-  o as content,
-  _ as default,
-  t as root
+  f as SelectMultiple
 };
 //# sourceMappingURL=fondue-components97.js.map

package/dist/fondue-components97.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components97.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"fondue-components97.js","sources":["../src/components/Select/SelectMultiple.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { SelectBase, type SelectSharedProps } from './components/SelectBase';\nimport { useMultiselect } from './hooks/useMultiselect';\n\nexport type SelectMultipleProps = SelectSharedProps & {\n    /**\n     * The active value in the select component. This is used to control the select externally\n     */\n    value?: string[] | null;\n    /**\n     * Callback function that is called when items are selected\n     */\n    onSelect?: (selectedValues: string[] | null) => void;\n    /**\n     * The default value of the select component. Used for uncontrolled usages\n     */\n    defaultValue?: string[];\n};\n\nconst SelectMultipleInput = (\n    { value, onSelect, defaultValue, ...rest }: SelectMultipleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, toggleSelectedItem, clear } = useMultiselect(onSelect, value, defaultValue);\n\n    return (\n        <SelectBase\n            ref={ref}\n            multiple\n            selectedItemValues={selectedItemValues}\n            onItemSelect={toggleSelectedItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const SelectMultiple = forwardRef<HTMLDivElement, SelectMultipleProps>(SelectMultipleInput);\nSelectMultiple.displayName = 'Select.Multi';\n"],"names":["SelectMultipleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","toggleSelectedItem","clear","useMultiselect","jsx","SelectBase","SelectMultiple","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAsB,CACxB,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,oBAAAC,GAAoB,OAAAC,EAAA,IAAUC,EAAeP,GAAUD,GAAOE,CAAY;AAEtG,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAQ;AAAA,MACR,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAiBC,EAAgDb,CAAmB;AACjGY,EAAe,cAAc;"}

package/dist/fondue-components98.js

@@ -1,10 +1,23 @@
-const t = "_root_2ej9d_5", o = "_thumb_2ej9d_62", s = {
-  root: t,
-  thumb: o
-};
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { SelectBase as S } from "./fondue-components133.js";
+import { useSingleSelect as a } from "./fondue-components132.js";
+const p = ({ value: e, onSelect: t, defaultValue: l, ...o }, r) => {
+  const { selectedItemValues: m, selectItem: c, clear: s } = a(t, e, l);
+  return /* @__PURE__ */ n(
+    S,
+    {
+      ref: r,
+      multiple: !1,
+      selectedItemValues: m,
+      onItemSelect: c,
+      onClear: s,
+      ...o
+    }
+  );
+}, f = i(p);
+f.displayName = "Select";
 export {
-  s as default,
-  t as root,
-  o as thumb
+  f as SelectSingle
 };
 //# sourceMappingURL=fondue-components98.js.map

package/dist/fondue-components98.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components98.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"fondue-components98.js","sources":["../src/components/Select/SelectSingle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { SelectBase, type SelectSharedProps } from './components/SelectBase';\nimport { useSingleSelect } from './hooks/useSingleSelect';\n\nexport type SelectSingleProps = SelectSharedProps & {\n    /**\n     * The active value in the select component. This is used to control the select externally\n     */\n    value?: string | null;\n    /**\n     * Callback function that is called when an item is selected\n     */\n    onSelect?: (selectedValue: string | null) => void;\n    /**\n     * The default value of the select component. Used for uncontrolled usages\n     */\n    defaultValue?: string;\n};\n\nconst SelectSingleInput = (\n    { value, onSelect, defaultValue, ...rest }: SelectSingleProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { selectedItemValues, selectItem, clear } = useSingleSelect(onSelect, value, defaultValue);\n\n    return (\n        <SelectBase\n            ref={ref}\n            multiple={false}\n            selectedItemValues={selectedItemValues}\n            onItemSelect={selectItem}\n            onClear={clear}\n            {...rest}\n        />\n    );\n};\n\nexport const SelectSingle = forwardRef<HTMLDivElement, SelectSingleProps>(SelectSingleInput);\nSelectSingle.displayName = 'Select';\n"],"names":["SelectSingleInput","value","onSelect","defaultValue","rest","ref","selectedItemValues","selectItem","clear","useSingleSelect","jsx","SelectBase","SelectSingle","forwardRef"],"mappings":";;;;AAsBA,MAAMA,IAAoB,CACtB,EAAE,OAAAC,GAAO,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GACpCC,MACC;AACD,QAAM,EAAE,oBAAAC,GAAoB,YAAAC,GAAY,OAAAC,EAAA,IAAUC,EAAgBP,GAAUD,GAAOE,CAAY;AAE/F,SACI,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,UAAU;AAAA,MACV,oBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,SAASC;AAAA,MACR,GAAGJ;AAAA,IAAA;AAAA,EAAA;AAGhB,GAEaQ,IAAeC,EAA8Cb,CAAiB;AAC3FY,EAAa,cAAc;"}

package/dist/fondue-components99.js

@@ -1,16 +1,22 @@
-import { useEffect as c } from "react";
-const s = (t) => {
-  c(() => {
-    if (!t.current)
-      return;
-    const e = t.current, n = new ResizeObserver(() => {
-      const r = e.scrollWidth > e.clientWidth;
-      e.title = r && e.textContent || "";
-    });
-    return n.observe(e), () => n.disconnect();
-  }, [t]);
-};
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { IconCheckMark as n } from "@frontify/fondue-icons";
+import { forwardRef as l } from "react";
+import a from "./fondue-components134.js";
+const o = ({ "data-test-id": c = "fondue-select-item", ...e }, t) => /* @__PURE__ */ d("li", { "data-test-id": c, ref: t, ...e, children: [
+  /* @__PURE__ */ r("div", { className: a.itemValue, children: e.children }),
+  /* @__PURE__ */ r(n, { className: a.checkmarkIcon })
+] });
+o.displayName = "Select.Item";
+const I = l(o), s = ({ children: c, groupId: e, heading: t, "data-test-id": i = "fondue-select-item-group" }, m) => /* @__PURE__ */ d("div", { "data-test-id": i, className: a.group, ref: m, children: [
+  t ? /* @__PURE__ */ r("div", { className: a.groupHeading, children: /* @__PURE__ */ r("span", { children: t }) }) : null,
+  c
+] }, e);
+s.displayName = "Select.Group";
+const N = l(s);
 export {
-  s as useTextTruncation
+  I as ForwardedRefSelectItem,
+  N as ForwardedRefSelectItemGroup,
+  o as SelectItem,
+  s as SelectItemGroup
 };
 //# sourceMappingURL=fondue-components99.js.map

package/dist/fondue-components99.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components99.js","sources":["../src/hooks/useTextTruncation.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, type RefObject } from 'react';\n\n/**\n * A custom React hook that automatically manages text truncation and tooltips.\n * It observes the element's size and adds a title attribute with the full text\n * when the content is truncated.\n *\n * @param {RefObject<HTMLElement>} ref - Reference to the HTML element to observe for truncation.\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   const textRef = useRef<HTMLDivElement>(null);\n *   useTextTruncation(textRef);\n *\n *   return <div ref={textRef} className=\"truncate\">Long text content...</div>;\n * });\n * ```\n */\nexport const useTextTruncation = (ref: RefObject<HTMLElement>) => {\n    useEffect(() => {\n        if (!ref.current) {\n            return;\n        }\n\n        const element = ref.current;\n        const observer = new ResizeObserver(() => {\n            const isTruncated = element.scrollWidth > element.clientWidth;\n            element.title = isTruncated ? element.textContent || '' : '';\n        });\n\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, [ref]);\n};\n"],"names":["useTextTruncation","ref","useEffect","element","observer","isTruncated"],"mappings":";AAqBO,MAAMA,IAAoB,CAACC,MAAgC;AAC9D,EAAAC,EAAU,MAAM;AACZ,QAAI,CAACD,EAAI;AACL;AAGJ,UAAME,IAAUF,EAAI,SACdG,IAAW,IAAI,eAAe,MAAM;AACtC,YAAMC,IAAcF,EAAQ,cAAcA,EAAQ;AAClD,MAAAA,EAAQ,QAAQE,KAAcF,EAAQ,eAAe;AAAA,IACzD,CAAC;AAED,WAAAC,EAAS,QAAQD,CAAO,GACjB,MAAMC,EAAS,WAAA;AAAA,EAC1B,GAAG,CAACH,CAAG,CAAC;AACZ;"}
+{"version":3,"file":"fondue-components99.js","sources":["../src/components/Select/components/SelectItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark } from '@frontify/fondue-icons';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from '../styles/select.module.scss';\n\nexport type SelectItemProps = {\n    /**\n     * The value of the select item.\n     */\n    value: string;\n    /**\n     * The data test id of the select item.\n     */\n    'data-test-id'?: string;\n} & (\n    | {\n          /**\n           * The label of the select item. Required when the child is not a string.\n           */\n          label: string;\n          /**\n           * The children of the select item. This can be a custom component or a string.\n           */\n          children?: ReactNode;\n      }\n    | {\n          label?: string;\n          children: string;\n      }\n);\n\nexport const SelectItem = (\n    { 'data-test-id': dataTestId = 'fondue-select-item', ...props }: SelectItemProps,\n    forwardedRef?: ForwardedRef<HTMLLIElement>,\n) => {\n    return (\n        <li data-test-id={dataTestId} ref={forwardedRef} {...props}>\n            <div className={styles.itemValue}>{props.children}</div>\n            <IconCheckMark className={styles.checkmarkIcon} />\n        </li>\n    );\n};\nSelectItem.displayName = 'Select.Item';\n\nexport const ForwardedRefSelectItem = forwardRef<HTMLLIElement, SelectItemProps>(SelectItem);\n\nexport type SelectItemGroupProps = {\n    /**\n     * The children of the select item group. This can contain multiple `Select.Item` components.\n     */\n    children: ReactNode;\n    /**\n     * The internal group ID of the select item group.\n     */\n    groupId: string;\n    /**\n     * The groups heading\n     */\n    heading?: string;\n    /**\n     * The data test id of the select item group.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectItemGroup = (\n    { children, groupId, heading, 'data-test-id': dataTestId = 'fondue-select-item-group' }: SelectItemGroupProps,\n    forwardedRef?: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} className={styles.group} ref={forwardedRef} key={groupId}>\n            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span>{heading}</span>\n                </div>\n            ) : null}\n            {children}\n        </div>\n    );\n};\nSelectItemGroup.displayName = 'Select.Group';\n\nexport const ForwardedRefSelectItemGroup = forwardRef<HTMLDivElement, SelectItemGroupProps>(SelectItemGroup);\n"],"names":["SelectItem","dataTestId","props","forwardedRef","jsx","styles","IconCheckMark","ForwardedRefSelectItem","forwardRef","SelectItemGroup","children","groupId","heading","jsxs","ForwardedRefSelectItemGroup"],"mappings":";;;;AAiCO,MAAMA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAA,GACxDC,wBAGK,MAAA,EAAG,gBAAcF,GAAY,KAAKE,GAAe,GAAGD,GACjD,UAAA;AAAA,EAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAO,WAAY,YAAM,UAAS;AAAA,EAClD,gBAAAD,EAACE,GAAA,EAAc,WAAWD,EAAO,cAAA,CAAe;AAAA,GACpD;AAGRL,EAAW,cAAc;AAElB,MAAMO,IAAyBC,EAA2CR,CAAU,GAqB9ES,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,SAAAC,GAAS,gBAAgBX,IAAa,2BAAA,GAC3DE,MAGI,gBAAAU,EAAC,SAAI,gBAAcZ,GAAY,WAAWI,EAAO,OAAO,KAAKF,GACxD,UAAA;AAAA,EAAAS,IACG,gBAAAR,EAAC,SAAI,WAAWC,EAAO,cACnB,UAAA,gBAAAD,EAAC,QAAA,EAAM,UAAAQ,EAAA,CAAQ,EAAA,CACnB,IACA;AAAA,EACHF;AAAA,EAAA,GAN2EC,CAOhF;AAGRF,EAAgB,cAAc;AAEvB,MAAMK,IAA8BN,EAAiDC,CAAe;"}

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 import { AriaAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react';
 import { ChangeEvent } from 'react';
 import { ChangeEventHandler } from 'react';
 import { Context } from 'react';
 import { CSSProperties } from 'react';
 import { default as default_2 } from '@frontify/fondue-tokens/themes';
+import { DetailedHTMLProps } from 'react';
 import { FocusEvent as FocusEvent_2 } from 'react';
 import { FocusEventHandler } from 'react';
 import { FormEvent } from 'react';
@@ -165,7 +167,10 @@ declare type AtLeastOneAttr<T> = Partial<T> & {
 
 declare type AvailableTheme = keyof typeof default_2;
 
-export declare const Badge: ({ "aria-label": ariaLabel, "data-test-id": dataTestId, children, disabled, emphasis, onClick, onDismiss, size, status, title, variant, }: BadgeProps) => JSX_2.Element;
+export declare const Badge: {
+    ({ "aria-label": ariaLabel, "data-test-id": dataTestId, children, disabled, emphasis, onClick, onDismiss, size, status, title, variant, }: BadgeProps): JSX_2.Element;
+    displayName: string;
+};
 
 declare type BadgeEmphasis = 'strong' | 'weak';
 
@@ -299,6 +304,162 @@ declare type ButtonStyle = 'default' | 'positive' | 'negative' | 'danger' | 'lou
 
 declare type ButtonType = 'button' | 'submit' | 'reset';
 
+export declare const Card: {
+    Root: ForwardRefExoticComponent<CardRootProps & RefAttributes<HTMLDivElement>>;
+    Banner: ForwardRefExoticComponent<CardBannerProps & RefAttributes<HTMLDivElement>>;
+    BannerImage: ForwardRefExoticComponent<CardBannerImageProps & RefAttributes<HTMLImageElement>>;
+    BannerIcon: ForwardRefExoticComponent<CardBannerIconProps & RefAttributes<HTMLDivElement>>;
+    Badges: ForwardRefExoticComponent<CardBadgesProps & RefAttributes<HTMLDivElement>>;
+    ThumbnailImage: ForwardRefExoticComponent<CardThumbnailImageProps & RefAttributes<HTMLImageElement>>;
+    ThumbnailIcon: ForwardRefExoticComponent<CardThumbnailIconProps & RefAttributes<HTMLDivElement>>;
+    Title: ForwardRefExoticComponent<CardTitleProps & RefAttributes<HTMLDivElement>>;
+    Description: ForwardRefExoticComponent<CardDescriptionProps & RefAttributes<HTMLDivElement>>;
+    Action: ForwardRefExoticComponent<CardActionProps & RefAttributes<HTMLDivElement>>;
+    ActionButton: ForwardRefExoticComponent<    {
+    'data-test-id'?: string;
+    'aria-label'?: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    children?: ReactNode;
+    } & Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "children" | "onClick" | "ref" | "aria-label"> & RefAttributes<HTMLButtonElement>>;
+};
+
+declare type CardActionProps = {
+    'data-test-id'?: string;
+    children?: ReactNode;
+};
+
+declare type CardBadgesProps = {
+    'data-test-id'?: string;
+    children?: ReactNode;
+};
+
+declare type CardBannerFit = 'cover' | 'contain';
+
+declare type CardBannerIconProps = {
+    'data-test-id'?: string;
+    /**
+     * The color variant of the icon.
+     * @default 'default'
+     */
+    variant?: CardBannerIconVariant;
+    children?: ReactNode;
+};
+
+declare type CardBannerIconVariant = 'default' | 'primary' | 'warning' | 'error' | 'success';
+
+declare type CardBannerImageProps = {
+    'data-test-id'?: string;
+    /**
+     * The image source URL.
+     */
+    src: string;
+    /**
+     * Alternative text for the image.
+     * @default ''
+     */
+    alt?: string;
+    /**
+     * How the image should fit within its container.
+     * @default 'cover'
+     */
+    fit?: CardBannerFit;
+};
+
+declare type CardBannerProps = {
+    'data-test-id'?: string;
+    /**
+     * The height variant of the banner.
+     * @default 'large'
+     */
+    size?: CardBannerSize;
+    children?: ReactNode;
+};
+
+declare type CardBannerSize = 'small' | 'large';
+
+declare type CardDescriptionProps = {
+    'data-test-id'?: string;
+    children?: ReactNode;
+};
+
+declare type CardRootBaseProps = {
+    'data-test-id'?: string;
+    /**
+     * Called when the pointer enters the card.
+     */
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    /**
+     * Called when the pointer leaves the card.
+     */
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+    children?: ReactNode;
+};
+
+declare type CardRootInteractiveProps = {
+    /**
+     * Navigation URL. The overlay renders as an anchor (`<a>`),
+     * enabling native link behavior (middle-click, right-click "Open in new tab", SEO).
+     *
+     * When the card is not selected, clicking the surface navigates.
+     * When the card is selected and `onSelect` is provided, clicking the
+     * surface fires `onSelect` instead (e.g. to deselect).
+     */
+    href: string;
+    /**
+     * Accessible label for the card's clickable overlay.
+     */
+    'aria-label'?: string;
+    /**
+     * ID of the element that describes the card (e.g. a subtitle element).
+     */
+    'aria-describedby'?: string;
+};
+
+declare type CardRootProps = CardRootBaseProps & ((CardRootInteractiveProps & {
+    /**
+     * Selection callback for the card's checkbox.
+     * Also fires on the card surface when the card is selected.
+     */
+    onSelect: MouseEventHandler<HTMLElement>;
+    /**
+     * Whether the card is in a selected state.
+     * @default false
+     */
+    selected?: boolean;
+}) | (CardRootInteractiveProps & {
+    onSelect?: never;
+    selected?: never;
+}) | {
+    href?: never;
+    onSelect?: never;
+    selected?: never;
+    'aria-label'?: never;
+    'aria-describedby'?: never;
+});
+
+declare type CardThumbnailIconProps = {
+    'data-test-id'?: string;
+    children?: ReactNode;
+};
+
+declare type CardThumbnailImageProps = {
+    'data-test-id'?: string;
+    /**
+     * The thumbnail image source URL.
+     */
+    src: string;
+    /**
+     * Alternative text for the thumbnail image.
+     * @default ''
+     */
+    alt?: string;
+};
+
+declare type CardTitleProps = {
+    'data-test-id'?: string;
+    children?: ReactNode;
+};
+
 export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLButtonElement>>;
 
 declare type CheckboxProps = {
@@ -946,30 +1107,32 @@ declare type EditableTextProps = {
 
 declare const enUS: {
     translationStrings: {
-        ColorPicker_selectColor: string;
-        ColorPicker_selectFormat: string;
-        ColorPicker_hexValue: string;
-        ColorPicker_redChannel: string;
-        ColorPicker_greenChannel: string;
+        Badge_dismiss: string;
+        Card_deselect: string;
+        Card_select: string;
         ColorPicker_blueChannel: string;
+        ColorPicker_greenChannel: string;
+        ColorPicker_hexValue: string;
         ColorPicker_opacity: string;
+        ColorPicker_redChannel: string;
+        ColorPicker_selectColor: string;
+        ColorPicker_selectFormat: string;
         DatePicker_selectDate: string;
         Dialog_close: string;
         Flyout_close: string;
+        Notice_dismiss: string;
+        Select_additionalItemsSelected: string;
         Select_clear: string;
-        Select_toggleMenu: string;
         Select_error: string;
+        Select_multipleItemsSelected: string;
         Select_selectedCount: string;
         Select_singleItemSelected: string;
-        Select_multipleItemsSelected: string;
-        Select_additionalItemsSelected: string;
+        Select_toggleMenu: string;
         Switch_defaultLabel: string;
-        Table_sortByDescending: string;
+        Table_sortAscending: string;
         Table_sortByAscending: string;
+        Table_sortByDescending: string;
         Table_sortDescending: string;
-        Table_sortAscending: string;
-        Badge_dismiss: string;
-        Notice_dismiss: string;
     };
     dateLocale: Locale;
 };
@@ -1554,7 +1717,10 @@ declare type LoadingCircleProps = {
     'data-test-id'?: string;
 };
 
-export declare const Notice: ({ "aria-label": ariaLabel, "data-test-id": dataTestId, variant, emphasis, size, icon, action, onDismiss, className, children, }: NoticeProps) => JSX_2.Element;
+export declare const Notice: {
+    ({ "aria-label": ariaLabel, "data-test-id": dataTestId, variant, emphasis, size, icon, action, onDismiss, className, children, }: NoticeProps): JSX_2.Element;
+    displayName: string;
+};
 
 declare type NoticeEmphasis = 'default' | 'strong' | 'weak';