@frontify/fondue-components 1.5.3 → 2.0.0

package/dist/fondue-components15.js

@@ -1,5 +1,5 @@
-import { extendTailwindMerge as e } from "./fondue-components36.js";
-import { tv as o } from "./fondue-components37.js";
+import { extendTailwindMerge as e } from "tailwind-merge";
+import { tv as o } from "tailwind-variants";
 const r = e({
   prefix: "tw-",
   extend: {

package/dist/fondue-components22.js

@@ -1,20 +1,20 @@
-const t = "_content_11ubj_5", n = "_subContent_11ubj_6", o = "_item_11ubj_16", s = "_subTrigger_11ubj_17", u = "_subMenuIndicator_11ubj_54", _ = "_group_11ubj_60", e = "_slot_11ubj_67", b = {
+const t = "_content_1e0pr_5", n = "_subContent_1e0pr_6", e = "_item_1e0pr_16", o = "_subTrigger_1e0pr_17", s = "_subMenuIndicator_1e0pr_54", _ = "_group_1e0pr_60", r = "_slot_1e0pr_67", u = {
   content: t,
   subContent: n,
-  item: o,
-  subTrigger: s,
-  subMenuIndicator: u,
+  item: e,
+  subTrigger: o,
+  subMenuIndicator: s,
   group: _,
-  slot: e
+  slot: r
 };
 export {
   t as content,
-  b as default,
+  u as default,
   _ as group,
-  o as item,
-  e as slot,
+  e as item,
+  r as slot,
   n as subContent,
-  u as subMenuIndicator,
-  s as subTrigger
+  s as subMenuIndicator,
+  o as subTrigger
 };
 //# sourceMappingURL=fondue-components22.js.map

package/dist/fondue-components29.js

@@ -3,7 +3,7 @@ import * as i from "@radix-ui/react-popover";
 import { Slot as u } from "@radix-ui/react-slot";
 import { isValidElement as f } from "react";
 import t from "./fondue-components31.js";
-import { recursiveMap as c, getSelectOptionValue as d } from "./fondue-components38.js";
+import { recursiveMap as c, getSelectOptionValue as d } from "./fondue-components36.js";
 const v = ({ highlightedIndex: l, getMenuProps: s, getItemProps: m, children: n, filterText: p }) => /* @__PURE__ */ r(i.Portal, { children: /* @__PURE__ */ r(
   i.Content,
   {

package/dist/fondue-components3.js

@@ -1,40 +1,43 @@
-import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { cn as c } from "./fondue-components15.js";
-import { buttonStyles as s } from "./fondue-components16.js";
-import { iconStyles as b } from "./fondue-components17.js";
-import { textStyles as l } from "./fondue-components18.js";
-const x = d(
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { cn as b } from "./fondue-components15.js";
+import { buttonStyles as x } from "./fondue-components16.js";
+import { iconStyles as S } from "./fondue-components17.js";
+import { textStyles as k } from "./fondue-components18.js";
+const y = r(
   ({
-    children: m,
-    type: r = "button",
-    style: o,
-    size: i = "medium",
+    children: f,
+    type: u = "button",
+    style: m,
+    size: d = "medium",
     "data-test-id": n = "fondue-button",
-    className: e = "",
-    onPress: a = () => {
+    className: c = "",
+    onPress: i = () => {
     },
     ...t
-  }, f) => /* @__PURE__ */ u(
+  }, e) => /* @__PURE__ */ l(
     "button",
     {
-      ref: f,
-      type: r,
+      ref: e,
+      type: u,
       "data-test-id": n,
-      className: c(
-        s({ size: i, style: o, ...t }),
-        l({ style: o, ...t }),
-        b({ style: o, ...t }),
-        e
+      className: b(
+        x({ size: d, style: m, ...t }),
+        k({ style: m, ...t }),
+        S({ style: m, ...t }),
+        c
       ),
-      onClick: a,
       ...t,
-      children: m
+      onClick: (o) => {
+        var a;
+        (a = t.onClick) == null || a.call(t, o), i == null || i(o);
+      },
+      children: f
     }
   )
 );
-x.displayName = "Button";
+y.displayName = "Button";
 export {
-  x as Button
+  y as Button
 };
 //# sourceMappingURL=fondue-components3.js.map

package/dist/fondue-components3.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components3.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type MouseEvent, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { buttonStyles } from './styles/buttonStyles';\nimport { iconStyles } from './styles/iconStyles';\nimport { textStyles } from './styles/textStyles';\n\ntype ButtonRounding = 'medium' | 'full';\n\ntype ButtonStyle = 'default' | 'positive' | 'negative' | 'danger' | 'loud';\n\ntype ButtonSize = 'small' | 'medium' | 'large';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\n\ntype ButtonEmphasis = 'default' | 'weak' | 'strong';\n\ntype ButtonAspect = 'default' | 'square';\n\nexport type ButtonProps = {\n    /**\n     * @default \"button\"\n     */\n    type?: ButtonType;\n    /**\n     * @default null\n     */\n    title?: string;\n    /**\n     * @default \"default\"\n     */\n    style?: ButtonStyle;\n    /**\n     * @default \"strong\"\n     */\n    emphasis?: ButtonEmphasis;\n    /**\n     * @default \"medium\"\n     */\n    size?: ButtonSize;\n    /**\n     * @default \"medium\"\n     */\n    rounding?: ButtonRounding;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * @default \"default\"\n     */\n    aspect?: ButtonAspect;\n    /**\n     * @default true\n     */\n    hugWidth?: boolean;\n    children?: ReactNode;\n    onPress?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    'aria-label'?: string;\n    'aria-describedby'?: string;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Button = forwardRef<HTMLButtonElement | null, ButtonProps>(\n    (\n        {\n            children,\n            type = 'button',\n            style,\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-button',\n            className = '',\n            onPress = () => {},\n            ...props\n        }: ButtonProps,\n        ref: ForwardedRef<HTMLButtonElement | null>,\n    ) => {\n        return (\n            <button\n                ref={ref}\n                type={type}\n                data-test-id={dataTestId}\n                className={cn(\n                    buttonStyles({ size, style, ...props }),\n                    textStyles({ style, ...props }),\n                    iconStyles({ style, ...props }),\n                    className,\n                )}\n                onClick={onPress}\n                {...props}\n            >\n                {children}\n            </button>\n        );\n    },\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","children","type","style","size","dataTestId","className","onPress","props","ref","jsx","cn","buttonStyles","textStyles","iconStyles"],"mappings":";;;;;;AAmEO,MAAMA,IAASC;AAAA,EAClB,CACI;AAAA,IACI,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU,MAAM;AAAA,IAAC;AAAA,IACjB,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,MAAAP;AAAA,MACA,gBAAcG;AAAA,MACd,WAAWM;AAAA,QACPC,EAAa,EAAE,MAAAR,GAAM,OAAAD,GAAO,GAAGK,GAAO;AAAA,QACtCK,EAAW,EAAE,OAAAV,GAAO,GAAGK,GAAO;AAAA,QAC9BM,EAAW,EAAE,OAAAX,GAAO,GAAGK,GAAO;AAAA,QAC9BF;AAAA,MACJ;AAAA,MACA,SAASC;AAAA,MACR,GAAGC;AAAA,MAEH,UAAAP;AAAA,IAAA;AAAA,EAAA;AAIjB;AAEAF,EAAO,cAAc;"}
+{"version":3,"file":"fondue-components3.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type MouseEvent, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { buttonStyles } from './styles/buttonStyles';\nimport { iconStyles } from './styles/iconStyles';\nimport { textStyles } from './styles/textStyles';\n\ntype ButtonRounding = 'medium' | 'full';\n\ntype ButtonStyle = 'default' | 'positive' | 'negative' | 'danger' | 'loud';\n\ntype ButtonSize = 'small' | 'medium' | 'large';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\n\ntype ButtonEmphasis = 'default' | 'weak' | 'strong';\n\ntype ButtonAspect = 'default' | 'square';\n\nexport type ButtonProps = {\n    /**\n     * @default \"button\"\n     */\n    type?: ButtonType;\n    /**\n     * @default null\n     */\n    title?: string;\n    /**\n     * @default \"default\"\n     */\n    style?: ButtonStyle;\n    /**\n     * @default \"strong\"\n     */\n    emphasis?: ButtonEmphasis;\n    /**\n     * @default \"medium\"\n     */\n    size?: ButtonSize;\n    /**\n     * @default \"medium\"\n     */\n    rounding?: ButtonRounding;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * @default \"default\"\n     */\n    aspect?: ButtonAspect;\n    /**\n     * @default true\n     */\n    hugWidth?: boolean;\n    children?: ReactNode;\n    onPress?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    'aria-label'?: string;\n    'aria-describedby'?: string;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Button = forwardRef<HTMLButtonElement | null, ButtonProps>(\n    (\n        {\n            children,\n            type = 'button',\n            style,\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-button',\n            className = '',\n            onPress = () => {},\n            ...props\n        }: ButtonProps,\n        ref: ForwardedRef<HTMLButtonElement | null>,\n    ) => {\n        return (\n            <button\n                ref={ref}\n                type={type}\n                data-test-id={dataTestId}\n                className={cn(\n                    buttonStyles({ size, style, ...props }),\n                    textStyles({ style, ...props }),\n                    iconStyles({ style, ...props }),\n                    className,\n                )}\n                {...props}\n                onClick={(event) => {\n                    // @ts-expect-error - Allows other components who use Button as a trigger to pass an action\n                    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n                    props.onClick?.(event);\n                    onPress?.(event);\n                }}\n            >\n                {children}\n            </button>\n        );\n    },\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","children","type","style","size","dataTestId","className","onPress","props","ref","jsx","cn","buttonStyles","textStyles","iconStyles","event","_a"],"mappings":";;;;;;AAmEO,MAAMA,IAASC;AAAA,EAClB,CACI;AAAA,IACI,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU,MAAM;AAAA,IAAC;AAAA,IACjB,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,MAAAP;AAAA,MACA,gBAAcG;AAAA,MACd,WAAWM;AAAA,QACPC,EAAa,EAAE,MAAAR,GAAM,OAAAD,GAAO,GAAGK,GAAO;AAAA,QACtCK,EAAW,EAAE,OAAAV,GAAO,GAAGK,GAAO;AAAA,QAC9BM,EAAW,EAAE,OAAAX,GAAO,GAAGK,GAAO;AAAA,QAC9BF;AAAA,MACJ;AAAA,MACC,GAAGE;AAAA,MACJ,SAAS,CAACO,MAAU;;AAGhB,SAAAC,IAAAR,EAAM,YAAN,QAAAQ,EAAA,KAAAR,GAAgBO,IAChBR,KAAA,QAAAA,EAAUQ;AAAA,MACd;AAAA,MAEC,UAAAd;AAAA,IAAA;AAAA,EAAA;AAIjB;AAEAF,EAAO,cAAc;"}

package/dist/fondue-components31.js

@@ -1,23 +1,23 @@
-const t = "_root_1j875_5", _ = "_input_1j875_57", o = "_slot_1j875_76", c = "_clear_1j875_125", n = "_caret_1j875_138", r = "_menu_1j875_158", s = "_portal_1j875_171", e = "_item_1j875_175", a = "_group_1j875_193", l = {
+const t = "_root_tfduh_5", _ = "_input_tfduh_59", o = "_slot_tfduh_78", u = "_clear_tfduh_127", c = "_caret_tfduh_140", n = "_menu_tfduh_160", r = "_portal_tfduh_173", s = "_item_tfduh_177", e = "_group_tfduh_195", a = {
   root: t,
   input: _,
   slot: o,
-  clear: c,
-  caret: n,
-  menu: r,
-  portal: s,
-  item: e,
-  group: a
+  clear: u,
+  caret: c,
+  menu: n,
+  portal: r,
+  item: s,
+  group: e
 };
 export {
-  n as caret,
-  c as clear,
-  l as default,
-  a as group,
+  c as caret,
+  u as clear,
+  a as default,
+  e as group,
   _ as input,
-  e as item,
-  r as menu,
-  s as portal,
+  s as item,
+  n as menu,
+  r as portal,
   t as root,
   o as slot
 };

package/dist/fondue-components32.js

@@ -3,7 +3,7 @@ import { IconCross as w } from "@frontify/fondue-icons";
 import { useState as x, useMemo as S, Children as f, isValidElement as u, cloneElement as B, useCallback as E } from "react";
 import { ForwardedRefSelectItem as I } from "./fondue-components28.js";
 import { ForwardedRefSelectSlot as c } from "./fondue-components30.js";
-import { getSelectOptionValue as v } from "./fondue-components38.js";
+import { getSelectOptionValue as v } from "./fondue-components36.js";
 const i = (s) => {
   const t = [];
   return f.forEach(s, (o) => {

package/dist/fondue-components33.js

@@ -1,21 +1,21 @@
-const o = "_root_1gp0a_5", t = "_input_1gp0a_53", s = "_slot_1gp0a_72", _ = "_iconSuccess_1gp0a_122", n = "_iconError_1gp0a_130", c = "_loadingStatus_1gp0a_138", a = "_spin_1gp0a_1", i = {
-  root: o,
-  input: t,
-  slot: s,
-  iconSuccess: _,
-  iconError: n,
+const s = "_root_1nsu5_5", n = "_input_1nsu5_55", o = "_slot_1nsu5_74", t = "_iconSuccess_1nsu5_124", _ = "_iconError_1nsu5_132", c = "_loadingStatus_1nsu5_140", u = "_spin_1nsu5_1", i = {
+  root: s,
+  input: n,
+  slot: o,
+  iconSuccess: t,
+  iconError: _,
   loadingStatus: c,
-  spin: a,
-  "tw-dark": "_tw-dark_1gp0a_170"
+  spin: u,
+  "tw-dark": "_tw-dark_1nsu5_172"
 };
 export {
   i as default,
-  n as iconError,
-  _ as iconSuccess,
-  t as input,
+  _ as iconError,
+  t as iconSuccess,
+  n as input,
   c as loadingStatus,
-  o as root,
-  s as slot,
-  a as spin
+  s as root,
+  o as slot,
+  u as spin
 };
 //# sourceMappingURL=fondue-components33.js.map

package/dist/fondue-components35.js

@@ -1,4 +1,4 @@
-const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue";
+const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
 export {
   t as FOCUS_OUTLINE
 };

package/dist/fondue-components35.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components35.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue';\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}
+{"version":3,"file":"fondue-components35.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}