@frontify/fondue-components 3.1.0 → 3.2.0

package/dist/fondue-components14.js

@@ -1,49 +1,42 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-tooltip";
-import { forwardRef as a } from "react";
-import { cn as T } from "./fondue-components15.js";
-import { tooltipContentStyles as f, tooltipArrowStyles as g } from "./fondue-components36.js";
-const d = ({ children: i, enterDelay: e = 700, open: r, onOpenChange: n }) => /* @__PURE__ */ t(o.Provider, { children: /* @__PURE__ */ t(o.Root, { delayDuration: e, open: r, onOpenChange: n, children: i }) });
-d.displayName = "Tooltip.Root";
-const s = ({ children: i, "data-test-id": e = "fondue-tooltip-content" }, r) => /* @__PURE__ */ t(o.Trigger, { "data-test-id": e, asChild: !0, ref: r, children: i });
-s.displayName = "Tooltip.Trigger";
-const p = ({
-  children: i,
-  className: e,
-  maxWidth: r,
-  "data-test-id": n = "fondue-tooltip-content",
-  ...l
-}, m) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ c(
-  o.Content,
-  {
-    "data-test-id": n,
-    className: T(
-      f({
-        ...l
-      }),
-      e
-    ),
-    style: { maxWidth: r },
-    collisionPadding: 16,
-    sideOffset: 8,
-    ref: m,
-    ...l,
-    children: [
-      i,
-      /* @__PURE__ */ t(o.Arrow, { asChild: !0, children: /* @__PURE__ */ t("div", { "aria-hidden": "true", className: g }) })
-    ]
-  }
-) });
-p.displayName = "Tooltip.Content";
-const R = {
-  Root: d,
-  Trigger: a(s),
-  Content: a(p)
-};
+import { jsx as i } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-progress";
+import { forwardRef as m } from "react";
+import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components42.js";
+const p = m(
+  ({
+    value: a,
+    max: r = 100,
+    rounded: d = !0,
+    variant: o = "default",
+    size: e = "medium",
+    "data-test-id": n = "fondue-loading-bar",
+    ...l
+  }, s) => /* @__PURE__ */ i(
+    t.Root,
+    {
+      ref: s,
+      "data-test-id": n,
+      className: g({ rounded: d, size: e, variant: 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({ variant: o, indeterminateState: a === null })
+        }
+      )
+    }
+  )
+);
+p.displayName = "LoadingBar";
 export {
-  R as Tooltip,
-  p as TooltipContent,
-  d as TooltipRoot,
-  s as TooltipTrigger
+  p as LoadingBar
 };
 //# sourceMappingURL=fondue-components14.js.map

package/dist/fondue-components14.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components14.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { tooltipArrowStyles, tooltipContentStyles } from './styles/tooltipStyles';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\nexport type TooltipTriggerProps = { children: ReactNode; 'data-test-id'?: string };\nexport type TooltipContentProps = {\n    /**\n     * @default spacious\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport const TooltipTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-tooltip-content' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger data-test-id={dataTestId} asChild ref={ref}>\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        ...props\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixTooltip.Portal>\n            <RadixTooltip.Content\n                data-test-id={dataTestId}\n                className={cn(\n                    tooltipContentStyles({\n                        ...props,\n                    }),\n                    className,\n                )}\n                style={{ maxWidth }}\n                collisionPadding={16}\n                sideOffset={8}\n                ref={ref}\n                {...props}\n            >\n                {children}\n\n                <RadixTooltip.Arrow asChild>\n                    <div aria-hidden=\"true\" className={tooltipArrowStyles} />\n                </RadixTooltip.Arrow>\n            </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","jsx","RadixTooltip","TooltipTrigger","dataTestId","ref","TooltipContent","className","maxWidth","props","jsxs","cn","tooltipContentStyles","tooltipArrowStyles","Tooltip","forwardRef"],"mappings":";;;;;AAyCa,MAAAA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,QAEvD,gBAAAC,EAAAC,EAAa,UAAb,EACG,UAAC,gBAAAD,EAAAC,EAAa,MAAb,EAAkB,eAAeJ,GAAY,MAAAC,GAAY,cAAAC,GACrD,UAAAH,GACL,EACJ,CAAA;AAGRD,EAAY,cAAc;AAEb,MAAAO,IAAiB,CAC1B,EAAE,UAAAN,GAAU,gBAAgBO,IAAa,4BACzCC,MAGI,gBAAAJ,EAACC,EAAa,SAAb,EAAqB,gBAAcE,GAAY,SAAO,IAAC,KAAAC,GACnD,UAAAR,EACL,CAAA;AAGRM,EAAe,cAAc;AAEtB,MAAMG,IAAiB,CAC1B;AAAA,EACI,UAAAT;AAAA,EACA,WAAAU;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,GAAGK;AACP,GACAJ,MAGI,gBAAAJ,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAQ;AAAA,EAACR,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcE;AAAA,IACd,WAAWO;AAAA,MACPC,EAAqB;AAAA,QACjB,GAAGH;AAAA,MAAA,CACN;AAAA,MACDF;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAAC,EAAS;AAAA,IAClB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,KAAAH;AAAA,IACC,GAAGI;AAAA,IAEH,UAAA;AAAA,MAAAZ;AAAA,MAEA,gBAAAI,EAAAC,EAAa,OAAb,EAAmB,SAAO,IACvB,UAAC,gBAAAD,EAAA,OAAA,EAAI,eAAY,QAAO,WAAWY,EAAA,CAAoB,EAC3D,CAAA;AAAA,IAAA;AAAA,EAAA;AAER,EAAA,CAAA;AAGRP,EAAe,cAAc;AAEtB,MAAMQ,IAAU;AAAA,EACnB,MAAMlB;AAAA,EACN,SAASmB,EAAmDZ,CAAc;AAAA,EAC1E,SAASY,EAAgDT,CAAc;AAC3E;"}
+{"version":3,"file":"fondue-components14.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    variant?: '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            variant = '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, variant })}\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({ variant, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","variant","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,SAAAC,IAAU;AAAA,IACV,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,SAAAD,GAAS;AAAA,MAC/D,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,SAAAR,GAAS,oBAAoBH,MAAU,MAAM;AAAA,QAAA;AAAA,MAC/E;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}

package/dist/fondue-components15.js

@@ -1,15 +1,9 @@
-import { extendTailwindMerge as e } from "tailwind-merge";
-import { tv as o } from "tailwind-variants";
-const r = e({
-  prefix: "tw-",
-  extend: {
-    classGroups: {
-      "font-size": ["text-body-x-small", "text-body-small", "text-body-medium", "text-body-large"]
-    }
-  }
-}), m = (...t) => r(...t), x = (t) => o(t);
+import { jsx as e } from "react/jsx-runtime";
+import { propsToCssVariables as r } from "./fondue-components22.js";
+import i from "./fondue-components43.js";
+const a = ({ "data-test-id": t = "fondue-section", children: o, ...s }) => /* @__PURE__ */ e("section", { className: i.root, "data-test-id": t, style: r(s), children: o });
+a.displayName = "Section";
 export {
-  m as cn,
-  x as sv
+  a as Section
 };
 //# sourceMappingURL=fondue-components15.js.map

package/dist/fondue-components15.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components15.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-components15.js","sources":["../src/components/Section/Section.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/section.module.scss';\n\nexport type SectionProps = LayoutComponentProps & {\n    /**\n     * The display property.\n     * @default 'block'\n     */\n    display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Section = ({ 'data-test-id': dataTestId = 'fondue-section', children, ...props }: SectionProps) => {\n    return (\n        <section className={styles.root} data-test-id={dataTestId} style={propsToCssVariables(props)}>\n            {children}\n        </section>\n    );\n};\nSection.displayName = 'Section';\n"],"names":["Section","dataTestId","children","props","jsx","styles","propsToCssVariables"],"mappings":";;;AAqBa,MAAAA,IAAU,CAAC,EAAE,gBAAgBC,IAAa,kBAAkB,UAAAC,GAAU,GAAGC,QAE9E,gBAAAC,EAAC,WAAQ,EAAA,WAAWC,EAAO,MAAM,gBAAcJ,GAAY,OAAOK,EAAoBH,CAAK,GACtF,UAAAD,EACL,CAAA;AAGRF,EAAQ,cAAc;"}

package/dist/fondue-components16.js

@@ -1,158 +1,50 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components37.js";
-import { sv as e } from "./fondue-components15.js";
-const o = 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 ${t}`,
-  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: ""
-    },
-    variant: {
-      default: "",
-      positive: "",
-      negative: "",
-      danger: "",
-      loud: ""
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-toggle-group";
+import { forwardRef as n } from "react";
+import { useControllableState as N } from "./fondue-components44.js";
+import e from "./fondue-components45.js";
+const d = ({ children: a, value: o, defaultValue: s, onValueChange: p, ...m }, f) => {
+  const [g, C] = N({
+    prop: o,
+    defaultProp: s,
+    onChange: p
+  });
+  return /* @__PURE__ */ l(
+    i.Root,
+    {
+      ref: f,
+      ...m,
+      className: e.root,
+      onValueChange: (r) => {
+        r && C(r);
+      },
+      value: g,
+      type: "single",
+      asChild: !1,
+      "aria-disabled": m.disabled,
+      children: [
+        a,
+        /* @__PURE__ */ t("div", { className: e.activeIndicator })
+      ]
     }
-  },
-  compoundVariants: [
-    {
-      disabled: !1,
-      variant: "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,
-      variant: "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,
-      variant: "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,
-      variant: "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,
-      variant: "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,
-      variant: "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,
-      variant: "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,
-      variant: "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,
-      variant: "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,
-      variant: "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,
-      variant: "danger",
-      emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "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,
-      variant: "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,
-      variant: "loud",
-      emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "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: {
-    variant: "default",
-    emphasis: "strong",
-    size: "medium",
-    rounding: "medium",
-    hugWidth: !0,
-    aspect: "default",
-    disabled: !1
-  }
-});
+  );
+};
+d.displayName = "SegmentedControl.Root";
+const c = ({ children: a, ...o }, s) => /* @__PURE__ */ l(i.Item, { ref: s, ...o, className: e.item, asChild: !1, children: [
+  /* @__PURE__ */ t("span", { className: e.separator }),
+  /* @__PURE__ */ l("span", { className: e.itemLabel, children: [
+    /* @__PURE__ */ t("span", { className: e.itemLabelActive, children: a }),
+    /* @__PURE__ */ t("span", { className: e.itemLabelInactive, children: a })
+  ] })
+] });
+c.displayName = "SegmentedControl.Item";
+const I = {
+  Root: n(d),
+  Item: n(c)
+};
 export {
-  o as buttonStyles
+  I as SegmentedControl,
+  c as SegmentedControlItem,
+  d as SegmentedControlRoot
 };
 //# sourceMappingURL=fondue-components16.js.map

package/dist/fondue-components16.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components16.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const buttonStyles = sv({\n    base:\n        '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        `${FOCUS_OUTLINE}`,\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        variant: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            variant: '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            variant: '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            variant: '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            variant: '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            variant: '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            variant: '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            variant: '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            variant: '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            variant: '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            variant: '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            variant: '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            variant: '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            variant: '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            variant: '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            variant: '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        variant: '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","FOCUS_OUTLINE"],"mappings":"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"}
+{"version":3,"file":"fondue-components16.js","sources":["../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport styles from './styles/segmentedControl.module.scss';\n\nexport type SegmentedControlRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The default value of the segmented control\n     * Used for uncontrolled components\n     */\n    defaultValue: string;\n    /**\n     * The controlled value of the segmented control\n     */\n    value?: string;\n    /**\n     * Event handler called when the value changes\n     */\n    onValueChange?: (value: string) => void;\n    /**\n     * Disable the segmented control\n     * @default false\n     */\n    disabled?: boolean;\n};\n\nexport const SegmentedControlRoot = (\n    { children, value: propsValue, defaultValue, onValueChange, ...rootProps }: SegmentedControlRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [value, setValue] = useControllableState({\n        prop: propsValue,\n        defaultProp: defaultValue,\n        onChange: onValueChange,\n    });\n\n    return (\n        <ToggleGroupPrimitive.Root\n            ref={ref}\n            {...rootProps}\n            className={styles.root}\n            onValueChange={(value) => {\n                if (value) {\n                    setValue(value);\n                }\n            }}\n            value={value}\n            type=\"single\"\n            asChild={false}\n            aria-disabled={rootProps.disabled}\n        >\n            {children}\n            {/* Active indicator */}\n            <div className={styles.activeIndicator} />\n        </ToggleGroupPrimitive.Root>\n    );\n};\nSegmentedControlRoot.displayName = 'SegmentedControl.Root';\n\ntype SegmentedControlItemProps = {\n    children: ReactNode;\n    value: string;\n};\n\nexport const SegmentedControlItem = (\n    { children, ...itemProps }: SegmentedControlItemProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <ToggleGroupPrimitive.Item ref={ref} {...itemProps} className={styles.item} asChild={false}>\n        {/* Separator */}\n        <span className={styles.separator} />\n        <span className={styles.itemLabel}>\n            {/* Active children */}\n            <span className={styles.itemLabelActive}>{children}</span>\n\n            {/* Inactive children */}\n            <span className={styles.itemLabelInactive}>{children}</span>\n        </span>\n    </ToggleGroupPrimitive.Item>\n);\nSegmentedControlItem.displayName = 'SegmentedControl.Item';\n\nexport const SegmentedControl = {\n    Root: forwardRef<HTMLDivElement, SegmentedControlRootProps>(SegmentedControlRoot),\n    Item: forwardRef<HTMLButtonElement, SegmentedControlItemProps>(SegmentedControlItem),\n};\n"],"names":["SegmentedControlRoot","children","propsValue","defaultValue","onValueChange","rootProps","ref","value","setValue","useControllableState","jsxs","ToggleGroupPrimitive","styles","jsx","SegmentedControlItem","itemProps","SegmentedControl","forwardRef"],"mappings":";;;;;AAgCa,MAAAA,IAAuB,CAChC,EAAE,UAAAC,GAAU,OAAOC,GAAY,cAAAC,GAAc,eAAAC,GAAe,GAAGC,EAAU,GACzEC,MACC;AACD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAqB;AAAA,IAC3C,MAAMP;AAAA,IACN,aAAaC;AAAA,IACb,UAAUC;AAAA,EAAA,CACb;AAGG,SAAA,gBAAAM;AAAA,IAACC,EAAqB;AAAA,IAArB;AAAA,MACG,KAAAL;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWO,EAAO;AAAA,MAClB,eAAe,CAACL,MAAU;AACtB,QAAIA,KACAC,EAASD,CAAK;AAAA,MAEtB;AAAA,MACA,OAAAA;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT,iBAAeF,EAAU;AAAA,MAExB,UAAA;AAAA,QAAAJ;AAAA,QAEA,gBAAAY,EAAA,OAAA,EAAI,WAAWD,EAAO,gBAAiB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;AACAZ,EAAqB,cAAc;AAO5B,MAAMc,IAAuB,CAChC,EAAE,UAAAb,GAAU,GAAGc,EAAA,GACfT,MAEA,gBAAAI,EAACC,EAAqB,MAArB,EAA0B,KAAAL,GAAW,GAAGS,GAAW,WAAWH,EAAO,MAAM,SAAS,IAEjF,UAAA;AAAA,EAAC,gBAAAC,EAAA,QAAA,EAAK,WAAWD,EAAO,UAAW,CAAA;AAAA,EAClC,gBAAAF,EAAA,QAAA,EAAK,WAAWE,EAAO,WAEpB,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWD,EAAO,iBAAkB,UAAAX,GAAS;AAAA,IAGlD,gBAAAY,EAAA,QAAA,EAAK,WAAWD,EAAO,mBAAoB,UAAAX,GAAS;AAAA,EAAA,GACzD;AAAA,GACJ;AAEJa,EAAqB,cAAc;AAE5B,MAAME,IAAmB;AAAA,EAC5B,MAAMC,EAAsDjB,CAAoB;AAAA,EAChF,MAAMiB,EAAyDH,CAAoB;AACvF;"}

package/dist/fondue-components17.js

@@ -1,121 +1,58 @@
-import { sv as t } from "./fondue-components15.js";
-const s = t({
-  variants: {
-    emphasis: {
-      default: "",
-      weak: "",
-      strong: ""
-    },
-    variant: {
-      default: "",
-      positive: "",
-      negative: "",
-      danger: "",
-      loud: ""
-    },
-    disabled: {
-      true: "tw-text-box-disabled-inverse"
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-slider";
+import { forwardRef as h, useRef as R } from "react";
+import r from "./fondue-components46.js";
+const g = ({
+  value: a,
+  defaultValue: n = [0],
+  onChange: i,
+  onCommit: m,
+  "data-test-id": c = "fondue-slider",
+  ...d
+}, l) => {
+  const o = R(null);
+  return /* @__PURE__ */ f(
+    e.Root,
+    {
+      ref: l,
+      className: r.root,
+      value: a,
+      defaultValue: n,
+      onValueChange: i,
+      onValueCommit: m,
+      "data-test-id": c,
+      ...d,
+      children: [
+        /* @__PURE__ */ s(
+          e.Track,
+          {
+            onPointerDown: () => {
+              o.current && (o.current.dataset.showFocusRing = "false");
+            },
+            className: r.track,
+            children: /* @__PURE__ */ s(e.Range, { className: r.range })
+          }
+        ),
+        (a || n).map((w, u) => /* @__PURE__ */ s(
+          e.Thumb,
+          {
+            ref: o,
+            className: r.thumb,
+            onPointerDown: (t) => {
+              t.currentTarget.dataset.showFocusRing = "false";
+            },
+            onBlur: (t) => {
+              t.currentTarget.dataset.showFocusRing = "true";
+            }
+          },
+          u
+        ))
+      ]
     }
-  },
-  compoundVariants: [
-    {
-      disabled: !1,
-      variant: "default",
-      emphasis: "default",
-      class: "[&_svg]:tw-text-button-icon group-hover:[&_svg]:tw-text-button-icon-hover group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "default",
-      emphasis: "weak",
-      class: "[&_svg]:tw-text-button-icon group-hover:[&_svg]:tw-text-button-icon-hover group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "default",
-      emphasis: "strong",
-      class: "[&_svg]:tw-text-button-strong-icon group-hover:[&_svg]:tw-text-button-strong-icon-hover group-active:[&_svg]:tw-text-button-strong-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "positive",
-      emphasis: "default",
-      class: "[&_svg]:tw-text-button-positive-icon group-hover:[&_svg]:tw-text-button-positive-icon-hover group-active:[&_svg]:tw-text-button-positive-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "positive",
-      emphasis: "weak",
-      class: "[&_svg]:tw-text-button-strong-positive-icon group-hover:[&_svg]:tw-text-button-strong-positive-icon-hovergroup-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "positive",
-      emphasis: "strong",
-      class: "[&_svg]:tw-text-button-strong-positive-icon group-hover:[&_svg]:tw-text-button-strong-positive-icon-hover group-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "negative",
-      emphasis: "default",
-      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "negative",
-      emphasis: "weak",
-      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "negative",
-      emphasis: "strong",
-      class: "[&_svg]:tw-text-button-strong-negative-icon group-hover:[&_svg]:tw-text-button-strong-negative-icon-hovergroup-active:[&_svg]:tw-text-button-strong-negative-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "danger",
-      emphasis: "default",
-      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "danger",
-      emphasis: "weak",
-      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "danger",
-      emphasis: "strong",
-      class: "[&_svg]:tw-text-button-danger-icon group-hover:[&_svg]:tw-text-button-danger-icon-hovergroup-active:[&_svg]:tw-text-button-danger-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "loud",
-      emphasis: "default",
-      class: "[&_svg]:tw-text-box-selected-inverse group-hover:[&_svg]:tw-text-box-selected-inverse-hovergroup-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "loud",
-      emphasis: "weak",
-      class: "[&_svg]:tw-text-box-selected-inverse group-hover:[&_svg]:tw-text-box-selected-inverse-hovergroup-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      variant: "loud",
-      emphasis: "strong",
-      class: "[&_svg]:tw-text-box-selected-strong-inverse group-hover:[&_svg]:tw-text-box-selected-strong-inversegroup-active:[&_svg]:tw-text-box-selected-strong-inverse [&_svg]:tw-leading-none"
-    }
-  ],
-  defaultVariants: {
-    emphasis: "strong",
-    variant: "default",
-    disabled: !1
-  }
-});
+  );
+}, p = h(g);
+p.displayName = "Slider";
 export {
-  s as iconStyles
+  p as Slider
 };
 //# sourceMappingURL=fondue-components17.js.map