@frontify/fondue-components 18.1.0 → 19.0.0

package/dist/fondue-components10.js

@@ -1,33 +1,39 @@
-import { jsx as d } from "react/jsx-runtime";
-import * as m from "@radix-ui/react-separator";
-import { forwardRef as s } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import * as n from "@radix-ui/react-separator";
+import { forwardRef as p } from "react";
 import { cn as f } from "./fondue-components36.js";
-import { dividerStyles as p } from "./fondue-components49.js";
-const n = s(
+import { dividerStyles as l } from "./fondue-components49.js";
+const c = p(
   ({
-    "data-test-id": r = "fondue-divider",
-    direction: o = "horizontal",
-    className: t,
-    variant: i,
-    ...e
-  }, a) => /* @__PURE__ */ d(
-    m.Root,
-    {
-      ref: a,
-      className: f(
-        p({
-          direction: o,
-          variant: i,
-          ...e
-        }),
-        t
-      ),
-      "data-test-id": r
-    }
-  )
+    "data-test-id": o = "fondue-divider",
+    direction: t = "horizontal",
+    className: i,
+    variant: e,
+    as: d = "div",
+    ...a
+  }, m) => {
+    const s = d;
+    return /* @__PURE__ */ r(
+      n.Root,
+      {
+        ref: m,
+        className: f(
+          l({
+            direction: t,
+            variant: e,
+            ...a
+          }),
+          i
+        ),
+        "data-test-id": o,
+        asChild: !0,
+        children: /* @__PURE__ */ r(s, {})
+      }
+    );
+  }
 );
-n.displayName = "Divider";
+c.displayName = "Divider";
 export {
-  n as Divider
+  c as Divider
 };
 //# sourceMappingURL=fondue-components10.js.map

package/dist/fondue-components10.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components10.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { dividerStyles } from './styles/dividerStyles';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    variant?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n    (\n        {\n            'data-test-id': dataTestId = 'fondue-divider',\n            direction = 'horizontal',\n            className,\n            variant,\n            ...props\n        }: DividerProps,\n        ref: ForwardedRef<HTMLDivElement | null>,\n    ): ReactElement => {\n        return (\n            <Separator.Root\n                ref={ref}\n                className={cn(\n                    dividerStyles({\n                        direction,\n                        variant,\n                        ...props,\n                    }),\n                    className,\n                )}\n                data-test-id={dataTestId}\n            />\n        );\n    },\n);\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","forwardRef","dataTestId","direction","className","variant","props","ref","jsx","Separator","cn","dividerStyles"],"mappings":";;;;;AAuCO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACG,KAAAF;AAAA,MACA,WAAWG;AAAA,QACPC,EAAc;AAAA,UACV,WAAAR;AAAA,UACA,SAAAE;AAAA,UACA,GAAGC;AAAA,QAAA,CACN;AAAA,QACDF;AAAA,MACJ;AAAA,MACA,gBAAcF;AAAA,IAAA;AAAA,EAClB;AAGZ;AAEAF,EAAQ,cAAc;"}
+{"version":3,"file":"fondue-components10.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { dividerStyles } from './styles/dividerStyles';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    variant?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    /**\n     * The html element to be used\n     * @default \"div\"\n     */\n    as?: 'div' | 'li';\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n    (\n        {\n            'data-test-id': dataTestId = 'fondue-divider',\n            direction = 'horizontal',\n            className,\n            variant,\n            as = 'div',\n            ...props\n        }: DividerProps,\n        ref: ForwardedRef<HTMLDivElement | null>,\n    ): ReactElement => {\n        const Component = as;\n\n        return (\n            <Separator.Root\n                ref={ref}\n                className={cn(\n                    dividerStyles({\n                        direction,\n                        variant,\n                        ...props,\n                    }),\n                    className,\n                )}\n                data-test-id={dataTestId}\n                asChild\n            >\n                <Component />\n            </Separator.Root>\n        );\n    },\n);\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","forwardRef","dataTestId","direction","className","variant","as","props","ref","Component","jsx","Separator","cn","dividerStyles"],"mappings":";;;;;AA4CO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,IAAAC,IAAK;AAAA,IACL,GAAGC;AAAA,KAEPC,MACe;AACf,UAAMC,IAAYH;AAGd,WAAA,gBAAAI;AAAA,MAACC,EAAU;AAAA,MAAV;AAAA,QACG,KAAAH;AAAA,QACA,WAAWI;AAAA,UACPC,EAAc;AAAA,YACV,WAAAV;AAAA,YACA,SAAAE;AAAA,YACA,GAAGE;AAAA,UAAA,CACN;AAAA,UACDH;AAAA,QACJ;AAAA,QACA,gBAAcF;AAAA,QACd,SAAO;AAAA,QAEP,4BAACO,GAAU,CAAA,CAAA;AAAA,MAAA;AAAA,IACf;AAAA,EAAA;AAGZ;AAEAT,EAAQ,cAAc;"}

package/dist/fondue-components53.js

@@ -1,18 +1,18 @@
-const o = "_root_xgv97_6", e = "_overlay_xgv97_51", _ = "_header_xgv97_67", t = "_body_xgv97_88", r = "_footer_xgv97_113", s = "_close_xgv97_134", c = {
+const o = "_root_hstbt_6", t = "_overlay_hstbt_51", s = "_header_hstbt_68", e = "_body_hstbt_89", _ = "_footer_hstbt_114", r = "_close_hstbt_135", c = {
   root: o,
-  overlay: e,
-  header: _,
-  body: t,
-  footer: r,
-  close: s
+  overlay: t,
+  header: s,
+  body: e,
+  footer: _,
+  close: r
 };
 export {
-  t as body,
-  s as close,
+  e as body,
+  r as close,
   c as default,
-  r as footer,
-  _ as header,
-  e as overlay,
+  _ as footer,
+  s as header,
+  t as overlay,
   o as root
 };
 //# sourceMappingURL=fondue-components53.js.map

package/dist/fondue-components63.js

@@ -1,19 +1,22 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import { IconCheckMark as l } from "@frontify/fondue-icons";
-import { forwardRef as c } from "react";
-import o from "./fondue-components66.js";
-const d = ({ "data-test-id": t = "fondue-select-item", ...e }, r) => /* @__PURE__ */ i("li", { "data-test-id": t, ref: r, ...e, children: [
-  /* @__PURE__ */ a("div", { className: o.itemValue, children: e.children }),
-  /* @__PURE__ */ a(l, { className: o.checkmarkIcon })
+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-components66.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 })
 ] });
-d.displayName = "Select.Item";
-const I = c(d), m = ({ children: t, groupId: e, "data-test-id": r = "fondue-select-item-group" }, s) => /* @__PURE__ */ a("div", { "data-test-id": r, className: o.group, ref: s, children: t }, e);
-m.displayName = "Select.Group";
-const S = c(m);
+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 {
   I as ForwardedRefSelectItem,
-  S as ForwardedRefSelectItemGroup,
-  d as SelectItem,
-  m as SelectItemGroup
+  N as ForwardedRefSelectItemGroup,
+  o as SelectItem,
+  s as SelectItemGroup
 };
 //# sourceMappingURL=fondue-components63.js.map

package/dist/fondue-components63.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components63.js","sources":["../src/components/Select/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 data test id of the select item group.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectItemGroup = (\n    { children, groupId, '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            {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","ForwardedRefSelectItemGroup"],"mappings":";;;;AAiCa,MAAAA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GAC9DC,wBAGK,MAAG,EAAA,gBAAcF,GAAY,KAAKE,GAAe,GAAGD,GACjD,UAAA;AAAA,EAAA,gBAAAE,EAAC,OAAI,EAAA,WAAWC,EAAO,WAAY,YAAM,UAAS;AAAA,EACjD,gBAAAD,EAAAE,GAAA,EAAc,WAAWD,EAAO,cAAe,CAAA;AAAA,GACpD;AAGRL,EAAW,cAAc;AAEZ,MAAAO,IAAyBC,EAA2CR,CAAU,GAiB9ES,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,gBAAgBV,IAAa,2BAA2B,GAC7EE,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcH,GAAY,WAAWI,EAAO,OAAO,KAAKF,GACxD,UAAAO,EAAA,GAD2EC,CAEhF;AAGRF,EAAgB,cAAc;AAEjB,MAAAG,IAA8BJ,EAAiDC,CAAe;"}
+{"version":3,"file":"fondue-components63.js","sources":["../src/components/Select/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":";;;;AAiCa,MAAAA,IAAa,CACtB,EAAE,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GAC9DC,wBAGK,MAAG,EAAA,gBAAcF,GAAY,KAAKE,GAAe,GAAGD,GACjD,UAAA;AAAA,EAAA,gBAAAE,EAAC,OAAI,EAAA,WAAWC,EAAO,WAAY,YAAM,UAAS;AAAA,EACjD,gBAAAD,EAAAE,GAAA,EAAc,WAAWD,EAAO,cAAe,CAAA;AAAA,GACpD;AAGRL,EAAW,cAAc;AAEZ,MAAAO,IAAyBC,EAA2CR,CAAU,GAqB9ES,IAAkB,CAC3B,EAAE,UAAAC,GAAU,SAAAC,GAAS,SAAAC,GAAS,gBAAgBX,IAAa,2BAA2B,GACtFE,MAGI,gBAAAU,EAAC,SAAI,gBAAcZ,GAAY,WAAWI,EAAO,OAAO,KAAKF,GACxD,UAAA;AAAA,EACGS,IAAA,gBAAAR,EAAC,SAAI,WAAWC,EAAO,cACnB,UAAC,gBAAAD,EAAA,QAAA,EAAM,UAAQQ,EAAA,CAAA,EAAA,CACnB,IACA;AAAA,EACHF;AAAA,EAAA,GAN2EC,CAOhF;AAGRF,EAAgB,cAAc;AAEjB,MAAAK,IAA8BN,EAAiDC,CAAe;"}

package/dist/fondue-components66.js

@@ -1,36 +1,38 @@
-const c = "_root_9n1pi_7", n = "_selectedValue_9n1pi_69", o = "_input_9n1pi_87", _ = "_slot_9n1pi_113", t = "_clear_9n1pi_165", e = "_icons_9n1pi_178", s = "_caret_9n1pi_184", i = "_iconSuccess_9n1pi_212", r = "_iconError_9n1pi_218", p = "_menu_9n1pi_224", a = "_portal_9n1pi_247", l = "_item_9n1pi_263", u = "_checkmarkIcon_9n1pi_304", m = "_itemValue_9n1pi_311", k = "_group_9n1pi_325", V = {
-  root: c,
-  selectedValue: n,
-  input: o,
-  slot: _,
-  clear: t,
-  icons: e,
+const o = "_root_174md_7", c = "_selectedValue_174md_69", _ = "_input_174md_87", t = "_slot_174md_113", e = "_clear_174md_165", n = "_icons_174md_178", s = "_caret_174md_184", r = "_iconSuccess_174md_212", m = "_iconError_174md_218", a = "_menu_174md_224", d = "_portal_174md_247", u = "_item_174md_263", i = "_checkmarkIcon_174md_304", l = "_itemValue_174md_311", p = "_group_174md_325", g = "_groupHeading_174md_336", k = {
+  root: o,
+  selectedValue: c,
+  input: _,
+  slot: t,
+  clear: e,
+  icons: n,
   caret: s,
-  iconSuccess: i,
-  iconError: r,
-  menu: p,
-  portal: a,
-  item: l,
-  checkmarkIcon: u,
-  itemValue: m,
-  group: k
+  iconSuccess: r,
+  iconError: m,
+  menu: a,
+  portal: d,
+  item: u,
+  checkmarkIcon: i,
+  itemValue: l,
+  group: p,
+  groupHeading: g
 };
 export {
   s as caret,
-  u as checkmarkIcon,
-  t as clear,
-  V as default,
-  k as group,
-  r as iconError,
-  i as iconSuccess,
-  e as icons,
-  o as input,
-  l as item,
-  m as itemValue,
-  p as menu,
-  a as portal,
-  c as root,
-  n as selectedValue,
-  _ as slot
+  i as checkmarkIcon,
+  e as clear,
+  k as default,
+  p as group,
+  g as groupHeading,
+  m as iconError,
+  r as iconSuccess,
+  n as icons,
+  _ as input,
+  u as item,
+  l as itemValue,
+  a as menu,
+  d as portal,
+  o as root,
+  c as selectedValue,
+  t as slot
 };
 //# sourceMappingURL=fondue-components66.js.map

package/dist/fondue-components66.js.map

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

package/dist/index.d.ts

@@ -638,6 +638,11 @@ declare type DividerProps = {
      * @default "horizontal"
      */
     direction?: DividerDirection;
+    /**
+     * The html element to be used
+     * @default "div"
+     */
+    as?: 'div' | 'li';
     'data-test-id'?: string;
     className?: string;
 };
@@ -1494,6 +1499,10 @@ declare type SelectItemGroupProps = {
      * The internal group ID of the select item group.
      */
     groupId: string;
+    /**
+     * The groups heading
+     */
+    heading?: string;
     /**
      * The data test id of the select item group.
      */