@frontify/fondue-components 1.2.3 → 1.3.0

package/dist/fondue-components4.js

@@ -1,56 +1,49 @@
-import { jsx as t } from "react/jsx-runtime";
-const l = {
-  noline: "tw-border-none",
-  dashed: "tw-border-dashed",
-  solid: "tw-border-solid",
-  dotted: "tw-border-dotted"
-}, d = {
-  small: 36,
-  medium: 60,
-  large: 96
-}, o = "fondue-divider", w = ({
-  vertical: a = !1,
-  style: r = "solid",
-  height: e = "small",
-  "data-test-id": i = o,
-  color: s = "#CCC"
-}) => a ? /* @__PURE__ */ t(
-  "div",
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { IconMinus as m, IconCheckMark as h } from "@frontify/fondue-icons";
+import * as o from "@radix-ui/react-checkbox";
+import { forwardRef as k } from "react";
+import { cn as p } from "./fondue-components13.js";
+import { checkboxStyles as l, checkboxIndicatorStyles as w } from "./fondue-components17.js";
+const f = ({
+  className: a,
+  value: c,
+  onChange: i,
+  defaultValue: d,
+  "data-test-id": r = "fondue-checkbox",
+  ...e
+}, n) => /* @__PURE__ */ t(
+  o.Root,
   {
-    "aria-hidden": "true",
-    className: "tw-flex tw-self-stretch tw-mt-0 tw-mb-0 tw-items-center tw-justify-center",
-    "data-test-id": i,
-    style: {
-      marginLeft: d[e] / 2,
-      marginRight: d[e] / 2
-    },
-    children: /* @__PURE__ */ t(
-      "div",
-      {
-        className: `tw-w-px tw-h-full tw-border-r tw-m-0 ${l[r]}`,
-        style: { borderRightColor: s },
-        "data-test-id": "fondue-divider-line"
-      }
-    )
+    ref: n,
+    checked: c,
+    defaultChecked: d,
+    className: p(l(e), a),
+    onClick: i,
+    "data-test-id": r,
+    ...e,
+    children: /* @__PURE__ */ s(o.Indicator, { className: w, children: [
+      /* @__PURE__ */ t(
+        m,
+        {
+          size: 16,
+          className: 'tw-hidden tw-opacity-0 group-data-[state="indeterminate"]:tw-block group-data-[state="indeterminate"]:tw-opacity-100 tw-transition-opacity',
+          "data-test-id": "icon-indeterminate"
+        }
+      ),
+      /* @__PURE__ */ t(
+        h,
+        {
+          size: 16,
+          className: 'tw-hidden tw-opacity-0 group-data-[state="checked"]:tw-block group-data-[state="checked"]:tw-opacity-100 tw-transition-opacity',
+          "data-test-id": "icon-checked"
+        }
+      )
+    ] })
   }
-) : /* @__PURE__ */ t(
-  "div",
-  {
-    "aria-hidden": "true",
-    className: "tw-flex tw-items-center tw-w-full",
-    style: { height: d[e] },
-    "data-test-id": i,
-    children: /* @__PURE__ */ t(
-      "hr",
-      {
-        className: `tw-border-t tw-m-0 tw-w-full ${l[r]}`,
-        style: { borderTopColor: s },
-        "data-test-id": "fondue-divider-line"
-      }
-    )
-  }
-);
+), x = k(f);
+x.displayName = "Checkbox";
 export {
-  w as Divider
+  x as Checkbox,
+  f as CheckboxComponent
 };
 //# sourceMappingURL=fondue-components4.js.map

package/dist/fondue-components4.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components4.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement } from 'react';\n\nexport type DividerStyle = 'noline' | 'dashed' | 'solid' | 'dotted';\n\nexport type DividerHeight = 'small' | 'medium' | 'large';\n\nexport type DividerProps = {\n    style?: DividerStyle;\n    height?: DividerHeight;\n    color?: string;\n    vertical?: boolean;\n    'data-test-id'?: string;\n};\n\nconst styleMap = {\n    noline: 'tw-border-none',\n    dashed: 'tw-border-dashed',\n    solid: 'tw-border-solid',\n    dotted: 'tw-border-dotted',\n};\n\nconst heightMap = {\n    small: 36,\n    medium: 60,\n    large: 96,\n};\n\nconst DIVIDER_TEST_ID = 'fondue-divider';\n\nexport const Divider = ({\n    vertical = false,\n    style = 'solid',\n    height = 'small',\n    'data-test-id': dataTestId = DIVIDER_TEST_ID,\n    color = '#CCC',\n}: DividerProps): ReactElement => {\n    return vertical ? (\n        <div\n            aria-hidden=\"true\"\n            className=\"tw-flex tw-self-stretch tw-mt-0 tw-mb-0 tw-items-center tw-justify-center\"\n            data-test-id={dataTestId}\n            style={{\n                marginLeft: heightMap[height] / 2,\n                marginRight: heightMap[height] / 2,\n            }}\n        >\n            <div\n                className={`tw-w-px tw-h-full tw-border-r tw-m-0 ${styleMap[style]}`}\n                style={{ borderRightColor: color }}\n                data-test-id=\"fondue-divider-line\"\n            />\n        </div>\n    ) : (\n        <div\n            aria-hidden=\"true\"\n            className=\"tw-flex tw-items-center tw-w-full\"\n            style={{ height: heightMap[height] }}\n            data-test-id={dataTestId}\n        >\n            <hr\n                className={`tw-border-t tw-m-0 tw-w-full ${styleMap[style]}`}\n                style={{ borderTopColor: color }}\n                data-test-id=\"fondue-divider-line\"\n            />\n        </div>\n    );\n};\n"],"names":["styleMap","heightMap","DIVIDER_TEST_ID","Divider","vertical","style","height","dataTestId","color","jsx"],"mappings":";AAgBA,MAAMA,IAAW;AAAA,EACb,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACZ,GAEMC,IAAY;AAAA,EACd,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAEMC,IAAkB,kBAEXC,IAAU,CAAC;AAAA,EACpB,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAaL;AAAA,EAC7B,OAAAM,IAAQ;AACZ,MACWJ,IACH,gBAAAK;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,WAAU;AAAA,IACV,gBAAcF;AAAA,IACd,OAAO;AAAA,MACH,YAAYN,EAAUK,CAAM,IAAI;AAAA,MAChC,aAAaL,EAAUK,CAAM,IAAI;AAAA,IACrC;AAAA,IAEA,UAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,wCAAwCT,EAASK,CAAK,CAAC;AAAA,QAClE,OAAO,EAAE,kBAAkBG,EAAM;AAAA,QACjC,gBAAa;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAAA,IAGJ,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,WAAU;AAAA,IACV,OAAO,EAAE,QAAQR,EAAUK,CAAM,EAAE;AAAA,IACnC,gBAAcC;AAAA,IAEd,UAAA,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,gCAAgCT,EAASK,CAAK,CAAC;AAAA,QAC1D,OAAO,EAAE,gBAAgBG,EAAM;AAAA,QAC/B,gBAAa;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"fondue-components4.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconMinus } from '@frontify/fondue-icons';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { type FormEvent, forwardRef, type ForwardedRef } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { checkboxIndicatorStyles, checkboxStyles } from './styles/checkboxStyles';\n\nexport type CheckboxProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The default value of the checkbox\n     * Used for uncontrolled components\n     * @default false\n     */\n    defaultValue?: boolean | 'indeterminate';\n    /**\n     * The controlled value of the checkbox\n     * @default false\n     */\n    value?: boolean | 'indeterminate';\n    /**\n     * The size of the checkbox\n     * @default \"default\"\n     */\n    size?: 'default' | 'large';\n    /**\n     * The emphasis of the checkbox\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'weak';\n    /**\n     * Disable the checkbox\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the checkbox required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the checkbox read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    className?: string;\n    /**\n     * Event handler called when the checkbox value changes\n     */\n    onChange?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is blurred\n     */\n    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is focused\n     */\n    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n};\n\nexport const CheckboxComponent = (\n    {\n        className,\n        value,\n        onChange,\n        defaultValue,\n        'data-test-id': dataTestId = 'fondue-checkbox',\n        ...props\n    }: CheckboxProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <CheckboxPrimitive.Root\n            ref={ref}\n            checked={value}\n            defaultChecked={defaultValue}\n            className={cn(checkboxStyles(props), className)}\n            onClick={onChange}\n            data-test-id={dataTestId}\n            {...props}\n        >\n            <CheckboxPrimitive.Indicator className={checkboxIndicatorStyles}>\n                <IconMinus\n                    size={16}\n                    className='tw-hidden tw-opacity-0 group-data-[state=\"indeterminate\"]:tw-block group-data-[state=\"indeterminate\"]:tw-opacity-100 tw-transition-opacity'\n                    data-test-id=\"icon-indeterminate\"\n                />\n\n                <IconCheckMark\n                    size={16}\n                    className='tw-hidden tw-opacity-0 group-data-[state=\"checked\"]:tw-block group-data-[state=\"checked\"]:tw-opacity-100 tw-transition-opacity'\n                    data-test-id=\"icon-checked\"\n                />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n};\n\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'Checkbox';\n"],"names":["CheckboxComponent","className","value","onChange","defaultValue","dataTestId","props","ref","jsx","CheckboxPrimitive","cn","checkboxStyles","jsxs","checkboxIndicatorStyles","IconMinus","IconCheckMark","Checkbox","forwardRef"],"mappings":";;;;;;AAoEO,MAAMA,IAAoB,CAC7B;AAAA,EACI,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACG,KAAAF;AAAA,IACA,SAASL;AAAA,IACT,gBAAgBE;AAAA,IAChB,WAAWM,EAAGC,EAAeL,CAAK,GAAGL,CAAS;AAAA,IAC9C,SAASE;AAAA,IACT,gBAAcE;AAAA,IACb,GAAGC;AAAA,IAEJ,UAAC,gBAAAM,EAAAH,EAAkB,WAAlB,EAA4B,WAAWI,GACpC,UAAA;AAAA,MAAA,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAU;AAAA,UACV,gBAAa;AAAA,QAAA;AAAA,MACjB;AAAA,MAEA,gBAAAN;AAAA,QAACO;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAU;AAAA,UACV,gBAAa;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA,GACJ;AAAA,EAAA;AAAA,GAKCC,IAAWC,EAA6CjB,CAAiB;AACtFgB,EAAS,cAAc;"}

package/dist/fondue-components5.js

@@ -1,38 +1,26 @@
-import { jsx as i } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-progress";
-import { forwardRef as l } from "react";
-import { loadingBarContainerStyles as f, loadingBarStyles as g } from "./fondue-components11.js";
-const p = l(
-  ({
-    value: a,
-    max: r = 100,
-    rounded: d = !0,
-    style: t = "default",
-    size: e = "medium",
-    "data-test-id": n = "fondue-loading-bar",
-    ...s
-  }, m) => /* @__PURE__ */ i(
-    o.Root,
-    {
-      ref: m,
-      "data-test-id": n,
-      className: f({ rounded: d, size: e, style: t }),
-      "aria-busy": a !== r,
-      value: a,
-      max: r,
-      style: a ? { "--loading-bar-value": `${a}%` } : {},
-      ...s,
-      children: /* @__PURE__ */ i(
-        o.Indicator,
-        {
-          className: g({ style: t, indeterminateState: a === null })
-        }
-      )
-    }
-  )
+import { jsx as a } from "react/jsx-runtime";
+import * as m from "@radix-ui/react-separator";
+import { forwardRef as s } from "react";
+import { cn as p } from "./fondue-components13.js";
+import { dividerStyles as f } from "./fondue-components18.js";
+const r = ({ "data-test-id": o = "fondue-divider", direction: t = "horizontal", className: i, ...e }, d) => /* @__PURE__ */ a(
+  m.Root,
+  {
+    ref: d,
+    className: p(
+      f({
+        direction: t,
+        ...e
+      }),
+      i
+    ),
+    "data-test-id": o
+  }
 );
-p.displayName = "LoadingBar";
+r.displayName = "Divider";
+const D = s(r);
 export {
-  p as LoadingBar
+  D as Divider,
+  r as DividerComponent
 };
 //# sourceMappingURL=fondue-components5.js.map

package/dist/fondue-components5.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components5.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { type CSSProperties, forwardRef, type ElementRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n    /**\n     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n     * @default null\n     */\n    value: number | null;\n    /**\n     * @default 100\n     */\n    max?: number;\n    /**\n     * @default 'fondue-loading-bar'\n     */\n    'data-test-id'?: string;\n    /**\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * @default 'default'\n     */\n    style?: 'default' | 'positive' | 'negative';\n    /**\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large' | 'x-large';\n    getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n    (\n        {\n            value,\n            max = 100,\n            rounded = true,\n            style = 'default',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-bar',\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <ProgressRadixPrimitive.Root\n                ref={ref}\n                data-test-id={dataTestId}\n                className={loadingBarContainerStyles({ rounded, size, style })}\n                aria-busy={value !== max}\n                value={value}\n                max={max}\n                style={value ? ({ '--loading-bar-value': `${value}%` } as CSSProperties) : {}}\n                {...props}\n            >\n                <ProgressRadixPrimitive.Indicator\n                    className={loadingBarStyles({ style, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","style","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AAoCO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,OAAAD,GAAO;AAAA,MAC7D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OAAOD,IAAS,EAAE,uBAAuB,GAAGA,CAAK,IAAA,IAA0B,CAAC;AAAA,MAC3E,GAAGM;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,OAAAR,GAAO,oBAAoBH,MAAU,MAAM;AAAA,QAAA;AAAA,MAC7E;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components5.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    style?: 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 DividerComponent = (\n    { 'data-test-id': dataTestId = 'fondue-divider', direction = 'horizontal', className, ...props }: DividerProps,\n    ref: ForwardedRef<HTMLDivElement | null>,\n): ReactElement => {\n    return (\n        <Separator.Root\n            ref={ref}\n            className={cn(\n                dividerStyles({\n                    direction,\n                    ...props,\n                }),\n                className,\n            )}\n            data-test-id={dataTestId}\n        />\n    );\n};\n\nDividerComponent.displayName = 'Divider';\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(DividerComponent);\n"],"names":["DividerComponent","dataTestId","direction","className","props","ref","jsx","Separator","cn","dividerStyles","Divider","forwardRef"],"mappings":";;;;;AAuCO,MAAMA,IAAmB,CAC5B,EAAE,gBAAgBC,IAAa,kBAAkB,WAAAC,IAAY,cAAc,WAAAC,GAAW,GAAGC,EAAM,GAC/FC,MAGI,gBAAAC;AAAA,EAACC,EAAU;AAAA,EAAV;AAAA,IACG,KAAAF;AAAA,IACA,WAAWG;AAAA,MACPC,EAAc;AAAA,QACV,WAAAP;AAAA,QACA,GAAGE;AAAA,MAAA,CACN;AAAA,MACDD;AAAA,IACJ;AAAA,IACA,gBAAcF;AAAA,EAAA;AAAA;AAK1BD,EAAiB,cAAc;AAElB,MAAAU,IAAUC,EAAyCX,CAAgB;"}

package/dist/fondue-components6.js

@@ -1,11 +1,61 @@
-import { cn as t } from "./fondue-components7.js";
-const i = "tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none", n = "focus-visible:tw-ring-4 focus-visible:tw-ring-blue focus-visible:tw-ring-offset-2 focus-visible:dark:tw-ring-offset-black focus-visible:tw-outline-none";
-t([i, "tw-ring-inset"]);
-t([n, "tw-ring-inset"]);
-const o = "focus-visible:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue";
+import { jsx as a, jsxs as F } from "react/jsx-runtime";
+import { IconCross as g } from "@frontify/fondue-icons";
+import * as r from "@radix-ui/react-popover";
+import { forwardRef as d } from "react";
+import { flyoutContentStyles as N, flyoutHeaderStyles as C, flyoutFooterStyles as h, flyoutBodyStyles as x } from "./fondue-components19.js";
+const i = ({ children: t, ...o }) => /* @__PURE__ */ a(r.Root, { ...o, children: t });
+i.displayName = "Flyout.Root";
+const y = ({ children: t, "data-test-id": o = "fondue-flyout-trigger" }, e) => /* @__PURE__ */ a(r.Trigger, { "data-test-id": o, asChild: !0, ref: e, children: t });
+y.displayName = "Flyout.Trigger";
+const n = ({
+  align: t = "start",
+  maxWidth: o = "360px",
+  padding: e = "compact",
+  "data-test-id": s = "fondue-flyout-content",
+  children: m,
+  ...l
+}, p) => /* @__PURE__ */ a(r.Portal, { children: /* @__PURE__ */ a(
+  r.Content,
+  {
+    style: {
+      "--flyout-max-width": o
+    },
+    ref: p,
+    align: t,
+    collisionPadding: 8,
+    sideOffset: 8,
+    className: N({ ...l }),
+    "data-flyout-spacing": e,
+    "data-test-id": s,
+    ...l,
+    children: m
+  }
+) });
+n.displayName = "Flyout.Content";
+const u = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, s) => /* @__PURE__ */ F("div", { "data-test-id": e, ref: s, className: C, children: [
+  /* @__PURE__ */ a("div", { children: o }),
+  t && /* @__PURE__ */ a(r.Close, { role: "button", "data-test-id": `${e}-close`, className: "tw-cursor-pointer", children: /* @__PURE__ */ a(g, { size: 20 }) })
+] });
+u.displayName = "Flyout.Header";
+const f = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: h, children: t });
+f.displayName = "Flyout.Footer";
+const c = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: x, children: t });
+c.displayName = "Flyout.Body";
+const S = {
+  Root: i,
+  Trigger: d(y),
+  Content: d(n),
+  Header: d(u),
+  Footer: d(f),
+  Body: d(c)
+};
 export {
-  o as FOCUS_OUTLINE,
-  i as FOCUS_STYLE,
-  n as FOCUS_VISIBLE_STYLE
+  S as Flyout,
+  c as FlyoutBody,
+  n as FlyoutContent,
+  f as FlyoutFooter,
+  u as FlyoutHeader,
+  i as FlyoutRoot,
+  y as FlyoutTrigger
 };
 //# sourceMappingURL=fondue-components6.js.map

package/dist/fondue-components6.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components6.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { cn } from './styleUtilities';\n\nexport const FOCUS_STYLE = 'tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none';\nexport const FOCUS_STYLE_NO_OFFSET = 'tw-ring-4 tw-ring-blue dark:tw-ring-offset-black tw-outline-none';\nexport const FOCUS_VISIBLE_STYLE =\n    'focus-visible:tw-ring-4 focus-visible:tw-ring-blue focus-visible:tw-ring-offset-2 focus-visible:dark:tw-ring-offset-black focus-visible:tw-outline-none';\nexport const FOCUS_STYLE_INSET = cn([FOCUS_STYLE, 'tw-ring-inset']);\nexport const FOCUS_VISIBLE_STYLE_INSET = cn([FOCUS_VISIBLE_STYLE, 'tw-ring-inset']);\nexport const FOCUS_WITHIN_STYLE =\n    'focus-within:tw-ring-4 focus-within:tw-ring-blue focus-within:tw-ring-offset-2 focus-within:dark:tw-ring-offset-black focus-within:tw-outline-none';\nexport const FOCUS_OUTLINE = 'focus-visible:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue';\n"],"names":["FOCUS_STYLE","FOCUS_VISIBLE_STYLE","cn","FOCUS_OUTLINE"],"mappings":";AAIO,MAAMA,IAAc,qFAEdC,IACT;AAC6BC,EAAG,CAACF,GAAa,eAAe,CAAC;AACzBE,EAAG,CAACD,GAAqB,eAAe,CAAC;AAG3E,MAAME,IAAgB;"}
+{"version":3,"file":"fondue-components6.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { flyoutBodyStyles, flyoutContentStyles, flyoutFooterStyles, flyoutHeaderStyles } from './styles/flyoutStyles';\n\nexport type FlyoutRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the flyout\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport type FlyoutContentProps = {\n    /**\n     * Add rounded corners to the flyout\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type FlyoutTriggerProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type FlyoutBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport const FlyoutTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-trigger' }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger data-test-id={dataTestId} asChild ref={ref}>\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content\n                style={\n                    {\n                        '--flyout-max-width': maxWidth,\n                    } as CSSProperties\n                }\n                ref={ref}\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                className={flyoutContentStyles({ ...props })}\n                data-flyout-spacing={padding}\n                data-test-id={dataTestId}\n                {...props}\n            >\n                {children}\n            </RadixPopover.Content>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header' }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={flyoutHeaderStyles}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className=\"tw-cursor-pointer\">\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={flyoutFooterStyles}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body' }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} data-flyout-spacing=\"compact\" className={flyoutBodyStyles}>\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","dataTestId","ref","jsx","FlyoutContent","align","maxWidth","padding","flyoutContentStyles","FlyoutHeader","showCloseButton","flyoutHeaderStyles","IconCross","FlyoutFooter","flyoutFooterStyles","FlyoutBody","flyoutBodyStyles","Flyout","forwardRef"],"mappings":";;;;;AAwEO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAa,MAAb,EAAmB,GAAGD,GAAQ,UAAAD,EAAS,CAAA;AAEnDD,EAAW,cAAc;AAEZ,MAAAI,IAAgB,CACzB,EAAE,UAAAH,GAAU,gBAAgBI,IAAa,2BACzCC,MAGI,gBAAAC,EAACJ,EAAa,SAAb,EAAqB,gBAAcE,GAAY,SAAO,IAAC,KAAAC,GACnD,UAAAL,EACL,CAAA;AAGRG,EAAc,cAAc;AAErB,MAAMI,IAAgB,CACzB;AAAA,EACI,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,gBAAgBN,IAAa;AAAA,EAC7B,UAAAJ;AAAA,EACA,GAAGC;AACP,GACAI,MAGI,gBAAAC,EAACJ,EAAa,QAAb,EACG,UAAA,gBAAAI;AAAA,EAACJ,EAAa;AAAA,EAAb;AAAA,IACG,OACI;AAAA,MACI,sBAAsBO;AAAA,IAC1B;AAAA,IAEJ,KAAAJ;AAAA,IACA,OAAAG;AAAA,IACA,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,WAAWG,EAAoB,EAAE,GAAGV,GAAO;AAAA,IAC3C,uBAAqBS;AAAA,IACrB,gBAAcN;AAAA,IACb,GAAGH;AAAA,IAEH,UAAAD;AAAA,EAAA;AAET,EAAA,CAAA;AAGRO,EAAc,cAAc;AAEf,MAAAK,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAAb,GAAU,gBAAgBI,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWS,GAChD,UAAA;AAAA,EAAA,gBAAAR,EAAC,SAAK,UAAAN,GAAS;AAAA,EACda,KACI,gBAAAP,EAAAJ,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGE,CAAU,UAAU,WAAU,qBAC7E,4BAACW,GAAU,EAAA,MAAM,GAAI,CAAA,GACzB;AAER,EAAA,CAAA;AAGRH,EAAa,cAAc;AAEd,MAAAI,IAAe,CACxB,EAAE,UAAAhB,GAAU,gBAAgBI,IAAa,0BACzCC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWY,GAC/C,UAAAjB,EACL,CAAA;AAGRgB,EAAa,cAAc;AAEd,MAAAE,IAAa,CACtB,EAAE,UAAAlB,GAAU,gBAAgBI,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWc,GAC7E,UAAAnB,EACL,CAAA;AAGRkB,EAAW,cAAc;AAElB,MAAME,IAAS;AAAA,EAClB,MAAMrB;AAAA,EACN,SAASsB,EAAkDlB,CAAa;AAAA,EACxE,SAASkB,EAA+Cd,CAAa;AAAA,EACrE,QAAQc,EAA8CT,CAAY;AAAA,EAClE,QAAQS,EAA8CL,CAAY;AAAA,EAClE,MAAMK,EAA4CH,CAAU;AAChE;"}

package/dist/fondue-components7.js

@@ -1,15 +1,27 @@
-import { extendTailwindMerge as e } from "./fondue-components12.js";
-import { tv as o } from "./fondue-components13.js";
-const r = e({
-  prefix: "tw-",
-  extend: {
-    classGroups: {
-      "font-size": ["text-body-x-small", "text-body-small", "text-body-medium", "text-body-large"]
-    }
+import { jsx as o } from "react/jsx-runtime";
+import * as d from "@radix-ui/react-label";
+import { forwardRef as i } from "react";
+import { cn as n } from "./fondue-components13.js";
+const s = ({ className: e, "data-test-id": a = "fondue-label", ...t }, r) => /* @__PURE__ */ o(
+  d.Root,
+  {
+    ref: r,
+    "data-required": t.required,
+    className: n(
+      'tw-group tw-flex tw-gap-1 tw-font-sans tw-font-normal peer-data-[state="checked"]:tw-font-medium peer-data-[state="indeterminate"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',
+      // Disabled state if siblings has disabled state
+      "has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed",
+      // Required asterisk
+      'after:tw-hidden data-[required="true"]:after:tw-flex after:tw-content-["*"] after:-tw-ml-1 after:tw-font-sans after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',
+      e
+    ),
+    "data-test-id": a,
+    ...t
   }
-}), m = (...t) => r(...t), x = (t) => o(t);
+), w = i(s);
+w.displayName = "Label";
 export {
-  m as cn,
-  x as sv
+  w as Label,
+  s as LabelComponent
 };
 //# sourceMappingURL=fondue-components7.js.map

package/dist/fondue-components7.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components7.js","sources":["../src/utilities/styleUtilities.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { extendTailwindMerge } from 'tailwind-merge';\nimport { tv, type TV } from 'tailwind-variants';\n\ntype ClassNameValue = ClassNameArray | string | null | undefined | 0 | false;\ntype ClassNameArray = ClassNameValue[];\n\nconst customTwMerge = extendTailwindMerge({\n    prefix: 'tw-',\n    extend: {\n        classGroups: {\n            'font-size': ['text-body-x-small', 'text-body-small', 'text-body-medium', 'text-body-large'],\n        },\n    },\n});\n\nexport const cn = (...classLists: ClassNameValue[]): string => {\n    return customTwMerge(...classLists);\n};\n\nexport const sv: TV = (variants) => {\n    return tv(variants);\n};\n"],"names":["customTwMerge","extendTailwindMerge","cn","classLists","sv","variants","tv"],"mappings":";;AAQA,MAAMA,IAAgBC,EAAoB;AAAA,EACtC,QAAQ;AAAA,EACR,QAAQ;AAAA,IACJ,aAAa;AAAA,MACT,aAAa,CAAC,qBAAqB,mBAAmB,oBAAoB,iBAAiB;AAAA,IAC/F;AAAA,EACJ;AACJ,CAAC,GAEYC,IAAK,IAAIC,MACXH,EAAc,GAAGG,CAAU,GAGzBC,IAAS,CAACC,MACZC,EAAGD,CAAQ;"}
+{"version":3,"file":"fondue-components7.js","sources":["../src/components/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nexport type LabelProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The id of the input element the label is associated with\n     */\n    htmlFor: string;\n    /**\n     * Add an asterisk to the label to indicate it is required\n     * @default false\n     */\n    required?: boolean;\n    className?: string;\n    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            className={cn(\n                'tw-group tw-flex tw-gap-1 tw-font-sans tw-font-normal peer-data-[state=\"checked\"]:tw-font-medium peer-data-[state=\"indeterminate\"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',\n                // Disabled state if siblings has disabled state\n                'has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed',\n                // Required asterisk\n                'after:tw-hidden data-[required=\"true\"]:after:tw-flex after:tw-content-[\"*\"] after:-tw-ml-1 after:tw-font-sans after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',\n                className,\n            )}\n            data-test-id={dataTestId}\n            {...props}\n        />\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","props","ref","jsx","LabelPrimitive","cn","Label","forwardRef"],"mappings":";;;;AAuBa,MAAAA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,GAAGC,EAAM,GACnEC,MAGI,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,KAAAF;AAAA,IACA,iBAAeD,EAAM;AAAA,IACrB,WAAWI;AAAA,MACP;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA,MACAN;AAAA,IACJ;AAAA,IACA,gBAAcC;AAAA,IACb,GAAGC;AAAA,EAAA;AAAA,GAKHK,IAAQC,EAAyCT,CAAc;AAC5EQ,EAAM,cAAc;"}

package/dist/fondue-components8.js

@@ -1,157 +1,42 @@
-import { sv as e } from "./fondue-components7.js";
-const s = e({
-  base: "tw-group tw-border tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium",
-  variants: {
-    disabled: {
-      true: "tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled"
-    },
-    rounding: {
-      medium: "tw-rounded",
-      full: "tw-rounded-full"
-    },
-    size: {
-      small: "tw-h-6 tw-text-body-small",
-      medium: "tw-h-9 tw-text-body-medium",
-      large: "tw-h-12 tw-text-body-large"
-    },
-    aspect: {
-      square: "tw-aspect-square tw-px-0",
-      default: ""
-    },
-    hugWidth: {
-      false: "tw-w-full"
-    },
-    emphasis: {
-      default: "",
-      weak: "",
-      strong: ""
-    },
-    style: {
-      default: "",
-      positive: "",
-      negative: "",
-      danger: "",
-      loud: ""
+import { jsx as i } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-progress";
+import { forwardRef as s } from "react";
+import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components20.js";
+const p = s(
+  ({
+    value: a,
+    max: r = 100,
+    rounded: d = !0,
+    style: o = "default",
+    size: e = "medium",
+    "data-test-id": n = "fondue-loading-bar",
+    ...l
+  }, m) => /* @__PURE__ */ i(
+    t.Root,
+    {
+      ref: m,
+      "data-test-id": n,
+      className: g({ rounded: d, size: e, style: o }),
+      "aria-busy": a !== r,
+      value: a,
+      max: r,
+      style: {
+        "--loading-bar-value": a,
+        "--loading-bar-max": r,
+        "--loading-bar-proportion": "calc(var(--loading-bar-value) / var(--loading-bar-max))"
+      },
+      ...l,
+      children: /* @__PURE__ */ i(
+        t.Indicator,
+        {
+          className: f({ style: o, indeterminateState: a === null })
+        }
+      )
     }
-  },
-  compoundVariants: [
-    {
-      disabled: !1,
-      style: "default",
-      emphasis: "default",
-      class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
-    },
-    {
-      disabled: !1,
-      style: "default",
-      emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-button-background-hover hover:tw-border-button-border active:tw-bg-button-background-pressed"
-    },
-    {
-      disabled: !1,
-      style: "default",
-      emphasis: "strong",
-      class: "tw-bg-button-strong-background tw-border-button-strong-border hover:tw-bg-button-strong-background-hover active:tw-bg-button-strong-background-pressed"
-    },
-    {
-      disabled: !1,
-      style: "positive",
-      emphasis: "default",
-      class: "tw-bg-button-positive-background tw-border-button-positive-border hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed"
-    },
-    {
-      disabled: !1,
-      style: "positive",
-      emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border active:tw-bg-button-positive-background-pressed"
-    },
-    {
-      disabled: !1,
-      style: "positive",
-      emphasis: "strong",
-      class: "tw-bg-button-strong-positive-background tw-border-button-strong-positive-border hover:tw-bg-button-strong-positive-background-hover active:tw-bg-button-strong-positive-background-pressed"
-    },
-    {
-      disabled: !1,
-      style: "negative",
-      emphasis: "default",
-      class: "tw-bg-button-negative-background tw-border-button-negative-border hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed"
-    },
-    {
-      disabled: !1,
-      style: "negative",
-      emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border active:tw-bg-button-negative-background-pressed"
-    },
-    {
-      disabled: !1,
-      style: "negative",
-      emphasis: "strong",
-      class: "tw-bg-button-strong-negative-background tw-border-button-strong-negative-border hover:tw-bg-button-strong-negative-background-hover active:tw-bg-button-strong-negative-background-pressed"
-    },
-    {
-      disabled: !1,
-      style: "danger",
-      emphasis: "default",
-      class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
-    },
-    {
-      disabled: !1,
-      style: "danger",
-      emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
-    },
-    {
-      disabled: !1,
-      style: "danger",
-      emphasis: "strong",
-      class: "tw-bg-button-danger-background tw-border-button-danger-border hover:tw-bg-button-danger-background-hover active:tw-bg-button-danger-background-pressed"
-    },
-    {
-      disabled: !1,
-      style: "loud",
-      emphasis: "default",
-      class: "tw-bg-box-selected tw-border-button-border hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed "
-    },
-    {
-      disabled: !1,
-      style: "loud",
-      emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
-    },
-    {
-      disabled: !1,
-      style: "loud",
-      emphasis: "strong",
-      class: "tw-bg-box-selected-strong tw-border-box-selected-strong hover:tw-bg-box-selected-strong-hover active:tw-bg-box-selected-strong-pressed "
-    },
-    {
-      aspect: "default",
-      size: "small",
-      class: "tw-px-2"
-    },
-    {
-      aspect: "default",
-      size: "medium",
-      class: "tw-px-4"
-    },
-    {
-      aspect: "default",
-      size: "large",
-      class: "tw-px-6"
-    }
-  ],
-  defaultVariants: {
-    style: "default",
-    emphasis: "strong",
-    size: "medium",
-    rounding: "medium",
-    hugWidth: !0,
-    aspect: "default",
-    disabled: !1
-  }
-});
+  )
+);
+p.displayName = "LoadingBar";
 export {
-  s as buttonStyles
+  p as LoadingBar
 };
 //# sourceMappingURL=fondue-components8.js.map

package/dist/fondue-components8.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components8.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const buttonStyles = sv({\n    base: 'tw-group tw-border tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium',\n    variants: {\n        disabled: {\n            true: 'tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled',\n        },\n        rounding: {\n            medium: 'tw-rounded',\n            full: 'tw-rounded-full',\n        },\n        size: {\n            small: 'tw-h-6 tw-text-body-small',\n            medium: 'tw-h-9 tw-text-body-medium',\n            large: 'tw-h-12 tw-text-body-large',\n        },\n        aspect: {\n            square: 'tw-aspect-square tw-px-0',\n            default: '',\n        },\n        hugWidth: {\n            false: 'tw-w-full',\n        },\n        emphasis: {\n            default: '',\n            weak: '',\n            strong: '',\n        },\n        style: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            style: 'default',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background tw-border-button-border ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'default',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-background-hover hover:tw-border-button-border ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'default',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-background tw-border-button-strong-border ' +\n                'hover:tw-bg-button-strong-background-hover ' +\n                'active:tw-bg-button-strong-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'positive',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-positive-background tw-border-button-positive-border ' +\n                'hover:tw-bg-button-positive-background-hover ' +\n                'active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'positive',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border ' +\n                'active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'positive',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-positive-background tw-border-button-strong-positive-border ' +\n                'hover:tw-bg-button-strong-positive-background-hover ' +\n                'active:tw-bg-button-strong-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'negative',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-negative-background tw-border-button-negative-border ' +\n                'hover:tw-bg-button-negative-background-hover ' +\n                'active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'negative',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border ' +\n                'active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'negative',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-negative-background tw-border-button-strong-negative-border ' +\n                'hover:tw-bg-button-strong-negative-background-hover ' +\n                'active:tw-bg-button-strong-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'danger',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background tw-border-button-border ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'danger',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'danger',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-danger-background tw-border-button-danger-border ' +\n                'hover:tw-bg-button-danger-background-hover ' +\n                'active:tw-bg-button-danger-background-pressed',\n        },\n        {\n            disabled: false,\n            style: 'loud',\n            emphasis: 'default',\n            class:\n                'tw-bg-box-selected tw-border-button-border ' +\n                'hover:tw-bg-box-selected-hover ' +\n                'active:tw-bg-box-selected-pressed ',\n        },\n        {\n            disabled: false,\n            style: 'loud',\n            emphasis: 'weak',\n            class: 'tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n        },\n        {\n            disabled: false,\n            style: 'loud',\n            emphasis: 'strong',\n            class:\n                'tw-bg-box-selected-strong tw-border-box-selected-strong ' +\n                'hover:tw-bg-box-selected-strong-hover ' +\n                'active:tw-bg-box-selected-strong-pressed ',\n        },\n        {\n            aspect: 'default',\n            size: 'small',\n            class: 'tw-px-2',\n        },\n        {\n            aspect: 'default',\n            size: 'medium',\n            class: 'tw-px-4',\n        },\n        {\n            aspect: 'default',\n            size: 'large',\n            class: 'tw-px-6',\n        },\n    ],\n    defaultVariants: {\n        style: 'default',\n        emphasis: 'strong',\n        size: 'medium',\n        rounding: 'medium',\n        hugWidth: true,\n        aspect: 'default',\n        disabled: false,\n    },\n});\n"],"names":["buttonStyles","sv"],"mappings":";AAIO,MAAMA,IAAeC,EAAG;AAAA,EAC3B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,UAAU;AAAA,MACN,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,MACJ,QAAQ;AAAA,MACR,SAAS;AAAA,IACb;AAAA,IACA,UAAU;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,OAAO;AAAA,IACP,UAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,UAAU;AAAA,EACd;AACJ,CAAC;"}
+{"version":3,"file":"fondue-components8.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { forwardRef, type CSSProperties, type ElementRef, type ForwardedRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n    /**\n     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n     * @default null\n     */\n    value: number | null;\n    /**\n     * The maximum value of the loading bar\n     * @default 100\n     */\n    max?: number;\n    /**\n     * @default 'fondue-loading-bar'\n     */\n    'data-test-id'?: string;\n    /**\n     * Add rounded corners to the loading bar\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * The style of the loading bar\n     * @default \"default\"\n     */\n    style?: 'default' | 'positive' | 'negative';\n    /**\n     * The size of the loading bar\n     * @default \"medium\"\n     */\n    size?: 'small' | 'medium' | 'large' | 'x-large';\n    /**\n     * The label of the loading bar for accessibility purposes\n     */\n    getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n    (\n        {\n            value,\n            max = 100,\n            rounded = true,\n            style = 'default',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-bar',\n            ...props\n        }: LoadingBarProps,\n        ref: ForwardedRef<ElementRef<typeof ProgressRadixPrimitive.Root>>,\n    ) => {\n        return (\n            <ProgressRadixPrimitive.Root\n                ref={ref}\n                data-test-id={dataTestId}\n                className={loadingBarContainerStyles({ rounded, size, style })}\n                aria-busy={value !== max}\n                value={value}\n                max={max}\n                style={\n                    {\n                        '--loading-bar-value': value,\n                        '--loading-bar-max': max,\n                        '--loading-bar-proportion': 'calc(var(--loading-bar-value) / var(--loading-bar-max))',\n                    } as CSSProperties\n                }\n                {...props}\n            >\n                <ProgressRadixPrimitive.Indicator\n                    className={loadingBarStyles({ style, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","style","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AA2CO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,OAAAD,GAAO;AAAA,MAC7D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OACI;AAAA,QACI,uBAAuBD;AAAA,QACvB,qBAAqBC;AAAA,QACrB,4BAA4B;AAAA,MAChC;AAAA,MAEH,GAAGK;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,OAAAR,GAAO,oBAAoBH,MAAU,MAAM;AAAA,QAAA;AAAA,MAC7E;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}