@frontify/fondue-components 27.0.1 → 29.0.0

package/dist/fondue-components31.js

@@ -1,149 +1,103 @@
-import { jsxs as h, jsx as t, Fragment as b } from "react/jsx-runtime";
-import { IconPlus as j, IconCross as M } from "@frontify/fondue-icons";
-import { forwardRef as x, useState as P, Children as H, isValidElement as I } from "react";
-import s from "./fondue-components83.js";
-const S = x(
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import d from "./fondue-components97.js";
+const b = c(
   ({
-    "aria-label": e,
-    "data-test-id": n = "tag",
+    "aria-label": t,
+    "data-test-id": a = "split-button",
     children: o,
-    disabled: a = !1,
-    emphasis: c = "strong",
-    onAddClick: m,
-    onClick: u,
-    onDismiss: i,
-    size: p = "default",
-    title: l,
-    variant: y = "default"
-  }, v) => {
-    const [C, d] = P(!1);
-    let r = null;
-    const g = H.map(o, (f) => I(f) && f.type === N ? (r = f.props.children, null) : f), $ = {
-      "data-addable": !!m,
-      "data-component": "tag",
-      "data-disabled": a,
-      "data-dismissable": !!i,
-      "data-emphasis": c,
-      "data-size": p,
-      "data-variant": y,
-      className: s.root
-    };
-    return /* @__PURE__ */ h("div", { ...$, children: [
-      /* @__PURE__ */ t(
-        z,
-        {
-          ref: v,
-          "aria-label": e || l,
-          disabled: a,
-          hoverContent: r,
-          isHover: C,
-          onClick: u,
-          onMouseEnter: () => d(!0),
-          onMouseLeave: () => d(!1),
-          title: l,
-          "data-test-id": n,
-          children: g
-        }
-      ),
-      /* @__PURE__ */ t(
-        R,
-        {
-          "aria-label": e || l,
-          disabled: a,
-          onAddClick: m,
-          onDismiss: i
-        }
-      )
-    ] });
-  }
+    disabled: i = !1,
+    emphasis: e = "default",
+    size: n = "medium"
+  }, l) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: l,
+      role: "group",
+      "aria-label": t,
+      "data-test-id": a,
+      "data-component": "split-button",
+      "data-emphasis": e,
+      "data-size": n,
+      "data-disabled": i,
+      className: d.root,
+      children: o
+    }
+  )
 );
-S.displayName = "Tag";
-const z = x(
+b.displayName = "SplitButton.Root";
+const p = c(
   ({
-    "aria-label": e,
-    "data-test-id": n,
-    children: o,
-    disabled: a = !1,
-    hoverContent: c,
-    isHover: m = !1,
-    onClick: u,
-    onMouseEnter: i,
-    onMouseLeave: p,
-    title: l
-  }, y) => {
-    let v = 0;
-    const C = H.map(o, (r) => {
-      if (I(r) && r.type === T) {
-        const g = v++;
-        return /* @__PURE__ */ t("div", { className: s.secondaryContent, children: r.props.children }, `secondary-${g}`);
-      }
-      return r;
-    }), d = c ? /* @__PURE__ */ h("div", { "data-hover": m, children: [
-      /* @__PURE__ */ t("div", { children: c }),
-      /* @__PURE__ */ t("div", { children: C })
-    ] }) : C;
-    return u ? /* @__PURE__ */ t(
-      "button",
-      {
-        ref: y,
-        type: "button",
-        "aria-label": e,
-        title: l,
-        className: s.mainContent,
-        onClick: a ? void 0 : u,
-        onMouseEnter: i,
-        onMouseLeave: p,
-        disabled: a,
-        "data-test-id": n,
-        children: d
-      }
-    ) : /* @__PURE__ */ t(
-      "div",
-      {
-        ref: y,
-        className: s.mainContent,
-        onMouseEnter: i,
-        onMouseLeave: p,
-        "data-test-id": n,
-        children: d
-      }
-    );
-  }
-);
-z.displayName = "TagMainContent";
-const R = ({ "aria-label": e, disabled: n, onAddClick: o, onDismiss: a }) => /* @__PURE__ */ h(b, { children: [
-  o && /* @__PURE__ */ t(
+    "aria-label": t,
+    "aria-describedby": a,
+    "data-test-id": o = "split-button-content",
+    children: i,
+    disabled: e = !1,
+    onPress: n,
+    title: l,
+    type: r = "button"
+  }, u) => /* @__PURE__ */ s(
     "button",
     {
-      type: "button",
-      "aria-label": `Add ${e || ""}`,
-      className: s.actionButton,
-      disabled: n,
-      onClick: o,
-      children: /* @__PURE__ */ t(j, { size: "16" })
+      ref: u,
+      type: r,
+      disabled: e,
+      "aria-label": t,
+      "aria-describedby": a,
+      title: l,
+      "data-test-id": o,
+      className: d.content,
+      onClick: n,
+      children: i
     }
-  ),
-  a && /* @__PURE__ */ t(
+  )
+);
+p.displayName = "SplitButton.Content";
+const m = ({
+  "aria-label": t,
+  "data-test-id": a = "split-button-action",
+  rotateIcon: o = !0,
+  children: i
+}) => /* @__PURE__ */ s("div", { "aria-label": t, "data-test-id": a, "data-rotate-icon": o, className: d.action, children: i });
+m.displayName = "SplitButton.Action";
+const B = c(
+  ({
+    "aria-label": t,
+    "aria-describedby": a,
+    "data-test-id": o = "split-button-action-button",
+    children: i,
+    disabled: e = !1,
+    title: n,
+    type: l = "button",
+    ...r
+  }, u) => /* @__PURE__ */ s(
     "button",
     {
-      type: "button",
-      "aria-label": `Dismiss ${e || ""}`,
-      className: s.actionButton,
-      disabled: n,
-      onClick: a,
-      children: /* @__PURE__ */ t(M, { size: "16" })
+      ref: u,
+      type: l,
+      disabled: e,
+      "aria-label": t,
+      "aria-describedby": a,
+      title: n,
+      "data-test-id": o,
+      className: d.actionButton,
+      ...r,
+      children: i
     }
   )
-] }), N = ({ children: e }) => /* @__PURE__ */ t(b, { children: e });
-N.displayName = "Tag.HoverContent";
-const T = ({ children: e }) => /* @__PURE__ */ t(b, { children: e });
-T.displayName = "Tag.SecondaryContent";
-const B = S;
-B.HoverContent = N;
-B.SecondaryContent = T;
+);
+B.displayName = "SplitButton.ActionButton";
+const N = {
+  Root: b,
+  Content: p,
+  Action: m,
+  ActionButton: B
+};
 export {
-  B as Tag,
-  N as TagHoverContent,
-  T as TagSecondaryContent
+  N as SplitButton,
+  m as SplitButtonAction,
+  B as SplitButtonActionButton,
+  p as SplitButtonContent,
+  b as SplitButtonRoot
 };
 //# sourceMappingURL=fondue-components31.js.map

package/dist/fondue-components31.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components31.js","sources":["../src/components/Tag/Tag.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross, IconPlus } from '@frontify/fondue-icons';\nimport { Children, forwardRef, isValidElement, useState, type MouseEvent, type ReactNode } from 'react';\n\nimport styles from './styles/tag.module.scss';\n\ntype TagStyle = 'default' | 'highlight';\n\ntype TagEmphasis = 'strong' | 'weak';\n\ntype TagSize = 'default' | 'small';\n\ntype TagProps = {\n    /**\n     * @default 'strong'\n     */\n    emphasis?: TagEmphasis;\n    /**\n     * @default 'default'\n     */\n    variant?: TagStyle;\n    /**\n     * @default 'default'\n     */\n    size?: TagSize;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler - when provided, the Tag renders as a button element\n     */\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on dismiss - providing this will show the dismiss button\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on add click - providing this will show the add button\n     */\n    onAddClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    title?: string;\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nexport type TagPropsWithClick = Omit<TagProps, 'onClick'> & {\n    onClick: (event?: MouseEvent<HTMLButtonElement>) => void;\n};\n\nexport type TagPropsWithoutClick = Omit<TagProps, 'onClick'> & {\n    onClick?: undefined;\n};\n\nexport type TagHoverContentProps = {\n    children: ReactNode;\n};\n\nexport type TagSecondaryContentProps = {\n    children: ReactNode;\n};\n\nconst TagRoot = forwardRef<HTMLButtonElement | HTMLDivElement, TagProps>(\n    (\n        {\n            'aria-label': ariaLabel,\n            'data-test-id': dataTestId = 'tag',\n            children,\n            disabled = false,\n            emphasis = 'strong',\n            onAddClick,\n            onClick,\n            onDismiss,\n            size = 'default',\n            title,\n            variant = 'default',\n        },\n        ref,\n    ) => {\n        const [isHover, setIsHover] = useState(false);\n\n        // Extract hover content from slots\n        let extractedHoverContent: ReactNode = null;\n        const processedChildren = Children.map(children, (child) => {\n            if (isValidElement(child) && child.type === TagHoverContent) {\n                // eslint-disable-next-line react-hooks/immutability\n                extractedHoverContent = child.props.children;\n                return null;\n            }\n            return child;\n        });\n\n        const commonProps = {\n            'data-addable': !!onAddClick,\n            'data-component': 'tag',\n            'data-disabled': disabled,\n            'data-dismissable': !!onDismiss,\n            'data-emphasis': emphasis,\n            'data-size': size,\n            'data-variant': variant,\n            className: styles.root,\n        };\n\n        return (\n            <div {...commonProps}>\n                <TagMainContent\n                    ref={ref}\n                    aria-label={ariaLabel || title}\n                    disabled={disabled}\n                    hoverContent={extractedHoverContent}\n                    isHover={isHover}\n                    onClick={onClick}\n                    onMouseEnter={() => setIsHover(true)}\n                    onMouseLeave={() => setIsHover(false)}\n                    title={title}\n                    data-test-id={dataTestId}\n                >\n                    {processedChildren}\n                </TagMainContent>\n                <TagActionButtons\n                    aria-label={ariaLabel || title}\n                    disabled={disabled}\n                    onAddClick={onAddClick}\n                    onDismiss={onDismiss}\n                />\n            </div>\n        );\n    },\n);\nTagRoot.displayName = 'Tag';\n\ntype TagMainContentProps = {\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n    disabled?: boolean;\n    hoverContent?: ReactNode;\n    isHover?: boolean;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    title?: string;\n};\n\nconst TagMainContent = forwardRef<HTMLButtonElement | HTMLDivElement, TagMainContentProps>(\n    (\n        {\n            'aria-label': ariaLabel,\n            'data-test-id': dataTestId,\n            children,\n            disabled = false,\n            hoverContent,\n            isHover = false,\n            onClick,\n            onMouseEnter,\n            onMouseLeave,\n            title,\n        },\n        ref,\n    ) => {\n        // Process children to handle secondary content slots in their natural position\n        let secondaryIndex = 0;\n        const processedChildren = Children.map(children, (child) => {\n            if (isValidElement(child) && child.type === TagSecondaryContent) {\n                const currentIndex = secondaryIndex++;\n                return (\n                    <div className={styles.secondaryContent} key={`secondary-${currentIndex}`}>\n                        {/* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access */}\n                        {child.props.children}\n                    </div>\n                );\n            }\n            return child;\n        });\n\n        const content = hoverContent ? (\n            <div data-hover={isHover}>\n                <div>{hoverContent}</div>\n                <div>{processedChildren}</div>\n            </div>\n        ) : (\n            processedChildren\n        );\n\n        if (onClick) {\n            return (\n                <button\n                    ref={ref as React.Ref<HTMLButtonElement>}\n                    type=\"button\"\n                    aria-label={ariaLabel}\n                    title={title}\n                    className={styles.mainContent}\n                    onClick={disabled ? undefined : onClick}\n                    onMouseEnter={onMouseEnter}\n                    onMouseLeave={onMouseLeave}\n                    disabled={disabled}\n                    data-test-id={dataTestId}\n                >\n                    {content}\n                </button>\n            );\n        }\n\n        return (\n            <div\n                ref={ref as React.Ref<HTMLDivElement>}\n                className={styles.mainContent}\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                data-test-id={dataTestId}\n            >\n                {content}\n            </div>\n        );\n    },\n);\nTagMainContent.displayName = 'TagMainContent';\n\ntype TagActionButtonsProps = {\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler on dismiss\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on add click\n     */\n    onAddClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    'aria-label'?: string;\n};\n\nconst TagActionButtons = ({ 'aria-label': ariaLabel, disabled, onAddClick, onDismiss }: TagActionButtonsProps) => {\n    return (\n        <>\n            {onAddClick && (\n                <button\n                    type=\"button\"\n                    aria-label={`Add ${ariaLabel || ''}`}\n                    className={styles.actionButton}\n                    disabled={disabled}\n                    onClick={onAddClick}\n                >\n                    <IconPlus size=\"16\" />\n                </button>\n            )}\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    aria-label={`Dismiss ${ariaLabel || ''}`}\n                    className={styles.actionButton}\n                    disabled={disabled}\n                    onClick={onDismiss}\n                >\n                    <IconCross size=\"16\" />\n                </button>\n            )}\n        </>\n    );\n};\n\nexport const TagHoverContent = ({ children }: TagHoverContentProps) => {\n    return <>{children}</>;\n};\nTagHoverContent.displayName = 'Tag.HoverContent';\n\nexport const TagSecondaryContent = ({ children }: TagSecondaryContentProps) => {\n    return <>{children}</>;\n};\nTagSecondaryContent.displayName = 'Tag.SecondaryContent';\n\n/**\n * TagComponent interface with function overloads for conditional ref typing.\n *\n * The overload order matters for TypeScript's type inference:\n * - TypeScript uses the FIRST matching overload when inferring types in generic contexts\n *   (e.g., Storybook's StoryObj<typeof Tag>)\n * - By placing TagPropsWithoutClick first, generic inference defaults to HTMLDivElement\n * - When onClick is explicitly provided, TypeScript matches the second overload,\n *   correctly inferring HTMLButtonElement for the ref\n */\ntype TagComponent = {\n    (props: TagPropsWithoutClick & React.RefAttributes<HTMLDivElement>): React.ReactNode;\n    (props: TagPropsWithClick & React.RefAttributes<HTMLButtonElement>): React.ReactNode;\n    displayName?: string;\n    HoverContent: typeof TagHoverContent;\n    SecondaryContent: typeof TagSecondaryContent;\n};\n\nexport const Tag: TagComponent = TagRoot as unknown as TagComponent;\nTag.HoverContent = TagHoverContent;\nTag.SecondaryContent = TagSecondaryContent;\n"],"names":["TagRoot","forwardRef","ariaLabel","dataTestId","children","disabled","emphasis","onAddClick","onClick","onDismiss","size","title","variant","ref","isHover","setIsHover","useState","extractedHoverContent","processedChildren","Children","child","isValidElement","TagHoverContent","commonProps","styles","jsxs","jsx","TagMainContent","TagActionButtons","hoverContent","onMouseEnter","onMouseLeave","secondaryIndex","TagSecondaryContent","currentIndex","content","Fragment","IconPlus","IconCross","Tag"],"mappings":"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"}
+{"version":3,"file":"fondue-components31.js","sources":["../src/components/SplitButton/SplitButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type MouseEvent, type ReactNode } from 'react';\n\nimport styles from './styles/splitButton.module.scss';\n\ntype ButtonSize = 'small' | 'medium' | 'large';\n\ntype ButtonEmphasis = 'default' | 'weak' | 'strong';\n\nexport type SplitButtonProps = {\n    /**\n     * @default 'default'\n     */\n    emphasis?: ButtonEmphasis;\n    /**\n     * @default 'medium'\n     */\n    size?: ButtonSize;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Accessible label for the button group\n     */\n    'aria-label'?: string;\n    /**\n     * Test ID for the root element\n     */\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nexport type SplitButtonContentProps = {\n    /**\n     * Button type\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset';\n    /**\n     * Whether the button is disabled\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler\n     */\n    onPress?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Accessible label\n     */\n    'aria-label'?: string;\n    /**\n     * Accessible description\n     */\n    'aria-describedby'?: string;\n    /**\n     * Test ID for the content section\n     */\n    'data-test-id'?: string;\n    /**\n     * Button title\n     */\n    title?: string;\n    children: ReactNode;\n};\n\nexport type SplitButtonActionProps = {\n    /**\n     * Accessible label\n     */\n    'aria-label'?: string;\n    /**\n     * Test ID for the action slot\n     */\n    'data-test-id'?: string;\n    /**\n     * Whether to rotate the icon 180 degrees when active (typically for caret icons)\n     * @default true\n     */\n    rotateIcon?: boolean;\n    children: ReactNode;\n};\n\nexport type SplitButtonActionButtonProps = {\n    /**\n     * Button type\n     * @default 'button'\n     */\n    type?: 'button' | 'submit' | 'reset';\n    /**\n     * Whether the button is disabled\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Accessible label\n     */\n    'aria-label'?: string;\n    /**\n     * Accessible description\n     */\n    'aria-describedby'?: string;\n    /**\n     * Test ID for the action button\n     */\n    'data-test-id'?: string;\n    /**\n     * Button title\n     */\n    title?: string;\n    children: ReactNode;\n};\n\nexport const SplitButtonRoot = forwardRef<HTMLDivElement, SplitButtonProps>(\n    (\n        {\n            'aria-label': ariaLabel,\n            'data-test-id': dataTestId = 'split-button',\n            children,\n            disabled = false,\n            emphasis = 'default',\n            size = 'medium',\n        }: SplitButtonProps,\n        ref: ForwardedRef<HTMLDivElement>,\n    ) => {\n        return (\n            <div\n                ref={ref}\n                role=\"group\"\n                aria-label={ariaLabel}\n                data-test-id={dataTestId}\n                data-component=\"split-button\"\n                data-emphasis={emphasis}\n                data-size={size}\n                data-disabled={disabled}\n                className={styles.root}\n            >\n                {children}\n            </div>\n        );\n    },\n);\nSplitButtonRoot.displayName = 'SplitButton.Root';\n\nexport const SplitButtonContent = forwardRef<HTMLButtonElement, SplitButtonContentProps>(\n    (\n        {\n            'aria-label': ariaLabel,\n            'aria-describedby': ariaDescribedby,\n            'data-test-id': dataTestId = 'split-button-content',\n            children,\n            disabled = false,\n            onPress,\n            title,\n            type = 'button',\n        }: SplitButtonContentProps,\n        ref: ForwardedRef<HTMLButtonElement>,\n    ) => {\n        return (\n            <button\n                ref={ref}\n                type={type}\n                disabled={disabled}\n                aria-label={ariaLabel}\n                aria-describedby={ariaDescribedby}\n                title={title}\n                data-test-id={dataTestId}\n                className={styles.content}\n                onClick={onPress}\n            >\n                {children}\n            </button>\n        );\n    },\n);\nSplitButtonContent.displayName = 'SplitButton.Content';\n\nexport const SplitButtonAction = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'split-button-action',\n    rotateIcon = true,\n    children,\n}: SplitButtonActionProps) => {\n    return (\n        <div aria-label={ariaLabel} data-test-id={dataTestId} data-rotate-icon={rotateIcon} className={styles.action}>\n            {children}\n        </div>\n    );\n};\nSplitButtonAction.displayName = 'SplitButton.Action';\n\nexport const SplitButtonActionButton = forwardRef<HTMLButtonElement, SplitButtonActionButtonProps>(\n    (\n        {\n            'aria-label': ariaLabel,\n            'aria-describedby': ariaDescribedby,\n            'data-test-id': dataTestId = 'split-button-action-button',\n            children,\n            disabled = false,\n            title,\n            type = 'button',\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <button\n                ref={ref}\n                type={type}\n                disabled={disabled}\n                aria-label={ariaLabel}\n                aria-describedby={ariaDescribedby}\n                title={title}\n                data-test-id={dataTestId}\n                className={styles.actionButton}\n                {...props}\n            >\n                {children}\n            </button>\n        );\n    },\n);\nSplitButtonActionButton.displayName = 'SplitButton.ActionButton';\n\nexport const SplitButton = {\n    Root: SplitButtonRoot,\n    Content: SplitButtonContent,\n    Action: SplitButtonAction,\n    ActionButton: SplitButtonActionButton,\n};\n"],"names":["SplitButtonRoot","forwardRef","ariaLabel","dataTestId","children","disabled","emphasis","size","ref","jsx","styles","SplitButtonContent","ariaDescribedby","onPress","title","type","SplitButtonAction","rotateIcon","SplitButtonActionButton","props","SplitButton"],"mappings":";;;AAmHO,MAAMA,IAAkBC;AAAA,EAC3B,CACI;AAAA,IACI,cAAcC;AAAA,IACd,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,EAAA,GAEXC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,MAAK;AAAA,MACL,cAAYN;AAAA,MACZ,gBAAcC;AAAA,MACd,kBAAe;AAAA,MACf,iBAAeG;AAAA,MACf,aAAWC;AAAA,MACX,iBAAeF;AAAA,MACf,WAAWK,EAAO;AAAA,MAEjB,UAAAN;AAAA,IAAA;AAAA,EAAA;AAIjB;AACAJ,EAAgB,cAAc;AAEvB,MAAMW,IAAqBV;AAAA,EAC9B,CACI;AAAA,IACI,cAAcC;AAAA,IACd,oBAAoBU;AAAA,IACpB,gBAAgBT,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAQ;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,EAAA,GAEXP,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,MAAAO;AAAA,MACA,UAAAV;AAAA,MACA,cAAYH;AAAA,MACZ,oBAAkBU;AAAA,MAClB,OAAAE;AAAA,MACA,gBAAcX;AAAA,MACd,WAAWO,EAAO;AAAA,MAClB,SAASG;AAAA,MAER,UAAAT;AAAA,IAAA;AAAA,EAAA;AAIjB;AACAO,EAAmB,cAAc;AAE1B,MAAMK,IAAoB,CAAC;AAAA,EAC9B,cAAcd;AAAA,EACd,gBAAgBC,IAAa;AAAA,EAC7B,YAAAc,IAAa;AAAA,EACb,UAAAb;AACJ,MAEQ,gBAAAK,EAAC,OAAA,EAAI,cAAYP,GAAW,gBAAcC,GAAY,oBAAkBc,GAAY,WAAWP,EAAO,QACjG,UAAAN,EAAA,CACL;AAGRY,EAAkB,cAAc;AAEzB,MAAME,IAA0BjB;AAAA,EACnC,CACI;AAAA,IACI,cAAcC;AAAA,IACd,oBAAoBU;AAAA,IACpB,gBAAgBT,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,OAAAS;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGI;AAAA,EAAA,GAEPX,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,MAAAO;AAAA,MACA,UAAAV;AAAA,MACA,cAAYH;AAAA,MACZ,oBAAkBU;AAAA,MAClB,OAAAE;AAAA,MACA,gBAAcX;AAAA,MACd,WAAWO,EAAO;AAAA,MACjB,GAAGS;AAAA,MAEH,UAAAf;AAAA,IAAA;AAAA,EAAA;AAIjB;AACAc,EAAwB,cAAc;AAE/B,MAAME,IAAc;AAAA,EACvB,MAAMpB;AAAA,EACN,SAASW;AAAA,EACT,QAAQK;AAAA,EACR,cAAcE;AAClB;"}

package/dist/fondue-components32.js

@@ -1,136 +1,36 @@
-import { jsx as a, jsxs as b } from "react/jsx-runtime";
-import { createContext as E, forwardRef as d, useContext as f, useRef as y, useEffect as F, useMemo as I, useCallback as H, createElement as z } from "react";
-import { IconDotsHorizontal as M } from "@frontify/fondue-icons";
-import * as m from "@radix-ui/react-tabs";
-import { useControllableState as W } from "./fondue-components69.js";
-import { Button as G } from "./fondue-components6.js";
-import { Dropdown as c } from "./fondue-components11.js";
-import { useFondueTheme as J } from "./fondue-components36.js";
-import { useTabTriggers as K } from "./fondue-components84.js";
-import n from "./fondue-components85.js";
-const u = E({
-  value: "",
-  disabled: !1
-});
-u.displayName = "TabConfigContext";
-const v = E({
-  addTrigger: () => {
-  }
-});
-v.displayName = "TabTriggerContext";
-const L = ({
-  padding: t = "compact",
-  activeTab: o,
-  defaultActiveTab: s,
+import { jsx as t } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-switch";
+import { forwardRef as n } from "react";
+import { useTranslation as f } from "./fondue-components42.js";
+import e from "./fondue-components98.js";
+const p = ({
+  value: o,
+  defaultValue: i,
   size: r = "medium",
-  onActiveTabChange: p,
-  children: T,
-  variant: i = "default",
-  withDivider: l = !1,
-  ...D
-}, P) => {
-  var w;
-  const { dir: j } = J(), [g, C] = W({
-    prop: o,
-    defaultProp: s,
-    onChange: p
-  }), h = H(
-    (e) => {
-      C(e);
-    },
-    [C]
-  ), { triggerListRef: A, activeIndicatorRef: O, triggers: x, triggersOutOfView: N, addTrigger: R } = K({
-    activeTab: g
-  }), q = I(() => ({ addTrigger: R }), [R]), B = i === "pill" && l;
-  return /* @__PURE__ */ a(v.Provider, { value: q, children: /* @__PURE__ */ b(
-    m.Root,
+  onChange: m,
+  "data-test-id": s = "fondue-switch",
+  "aria-label": c,
+  ...d
+}, h) => {
+  const { t: l } = f();
+  return /* @__PURE__ */ t(
+    a.Root,
     {
-      ref: P,
-      dir: j,
-      className: n.root,
-      onValueChange: h,
-      value: g ?? ((w = x[0]) == null ? void 0 : w.value),
-      "data-tabs-content-padding": t,
-      "data-tabs-variant": i,
-      "data-tabs-with-divider": B,
-      ...D,
-      children: [
-        /* @__PURE__ */ b("div", { className: n.triggerListWrapper, children: [
-          /* @__PURE__ */ a(m.List, { ref: A, "data-size": r, className: n.triggerList, children: x.map((e) => /* @__PURE__ */ z(
-            m.Trigger,
-            {
-              ...e.props,
-              key: e.value,
-              value: e.value,
-              disabled: e.disabled,
-              className: n.trigger,
-              ref: e.ref
-            },
-            e.element
-          )) }),
-          /* @__PURE__ */ b(c.Root, { children: [
-            N.length > 0 && /* @__PURE__ */ a(c.Trigger, { "data-test-id": "overflow-items-dropdown-trigger", children: /* @__PURE__ */ a(G, { emphasis: "default", aspect: "square", size: "small", children: /* @__PURE__ */ a(M, { size: 16 }) }) }),
-            /* @__PURE__ */ a(c.Content, { align: "end", "data-test-id": "overflow-items-dropdown-content", children: N.map((e) => /* @__PURE__ */ z(
-              c.Item,
-              {
-                ...e.props,
-                disabled: e.disabled,
-                onSelect: () => h(e.value),
-                key: e.value
-              },
-              e.element
-            )) })
-          ] }),
-          /* @__PURE__ */ a(
-            "span",
-            {
-              "data-test-id": "active-tab-indicator",
-              ref: O,
-              className: n.activeIndicator
-            }
-          )
-        ] }),
-        T
-      ]
+      ref: h,
+      checked: o,
+      defaultChecked: i,
+      className: e.root,
+      onCheckedChange: m,
+      "aria-label": c ?? l("Switch_defaultLabel"),
+      "data-test-id": s,
+      "data-size": r,
+      ...d,
+      children: /* @__PURE__ */ t(a.Thumb, { className: e.thumb })
     }
-  ) });
-};
-L.displayName = "Tabs.Root";
-const S = ({ children: t, value: o, disabled: s }) => {
-  const r = I(() => ({ value: o, disabled: s }), [o, s]);
-  return /* @__PURE__ */ a(u.Provider, { value: r, children: t });
-};
-S.displayName = "Tabs.Tab";
-const V = ({ children: t, ...o }, s) => {
-  const { value: r, disabled: p } = f(u), { addTrigger: T } = f(v), i = y(null), l = y();
-  return F(() => {
-    T({
-      ref: i || s,
-      value: r ?? "",
-      disabled: p,
-      props: o,
-      element: t,
-      previousElement: l.current
-    }), l.current = t;
-  }, [t]), null;
-};
-V.displayName = "Tabs.Trigger";
-const k = ({ children: t, ...o }, s) => {
-  const { value: r } = f(u);
-  return /* @__PURE__ */ a(m.Content, { ref: s, ...o, className: n.content, value: r ?? "", children: t });
-};
-k.displayName = "Tabs.Content";
-const ae = {
-  Root: d(L),
-  Tab: d(S),
-  Trigger: d(V),
-  Content: d(k)
-};
+  );
+}, u = n(p);
+u.displayName = "Switch";
 export {
-  ae as Tabs,
-  k as TabsContent,
-  L as TabsRoot,
-  S as TabsTab,
-  V as TabsTrigger
+  u as Switch
 };
 //# sourceMappingURL=fondue-components32.js.map

package/dist/fondue-components32.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components32.js","sources":["../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconDotsHorizontal } from '@frontify/fondue-icons';\nimport * as RadixTabs from '@radix-ui/react-tabs';\nimport {\n    createContext,\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport { Button } from '../Button/Button';\nimport { Dropdown } from '../Dropdown/Dropdown';\nimport { useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { useTabTriggers } from './hooks/useTabTriggers';\nimport styles from './styles/tabs.module.scss';\nimport { type TabTrigger } from './types';\n\nexport type TabsRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The default active tab\n     * Used for uncontrolled components\n     */\n    defaultActiveTab?: string;\n    /**\n     * The controlled value of the active tab\n     */\n    activeTab?: string;\n    /**\n     * The height of the tabs\n     * @default 'medium'\n     */\n    size?: 'medium' | 'large';\n    /**\n     * Event handler called when the active tab changes\n     */\n    onActiveTabChange?: (value: string) => void;\n    /**\n     * Select the used variant\n     * @default 'default'\n     */\n    variant?: 'default' | 'pill';\n    /**\n     * Add a divider line below the tabs\n     * Only available when variant is 'pill'\n     * Useful for tabs placed inside Dialog content\n     * @default false\n     */\n    withDivider?: boolean;\n};\n\nconst TabConfigContext = createContext<{\n    value: string;\n    disabled?: boolean;\n}>({\n    value: '',\n    disabled: false,\n});\nTabConfigContext.displayName = 'TabConfigContext';\n\nconst TabTriggerContext = createContext<{\n    addTrigger: (trigger: TabTrigger) => void;\n}>({\n    addTrigger: () => {},\n});\nTabTriggerContext.displayName = 'TabTriggerContext';\n\nexport const TabsRoot = (\n    {\n        padding = 'compact',\n        activeTab: propsActiveTab,\n        defaultActiveTab,\n        size = 'medium',\n        onActiveTabChange,\n        children,\n        variant = 'default',\n        withDivider = false,\n        ...props\n    }: TabsRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { dir } = useFondueTheme();\n\n    const [activeTab, setActiveTab] = useControllableState({\n        prop: propsActiveTab,\n        defaultProp: defaultActiveTab,\n        onChange: onActiveTabChange,\n    });\n\n    const handleSetActiveTab = useCallback(\n        (value: string) => {\n            setActiveTab(value);\n        },\n        [setActiveTab],\n    );\n\n    const { triggerListRef, activeIndicatorRef, triggers, triggersOutOfView, addTrigger } = useTabTriggers({\n        activeTab,\n    });\n\n    const contextValue = useMemo(() => ({ addTrigger }), [addTrigger]);\n\n    // Only apply withDivider when variant is 'pill'\n    const shouldShowDivider = variant === 'pill' && withDivider;\n\n    return (\n        <TabTriggerContext.Provider value={contextValue}>\n            <RadixTabs.Root\n                ref={ref}\n                dir={dir}\n                className={styles.root}\n                onValueChange={handleSetActiveTab}\n                value={activeTab ?? triggers[0]?.value}\n                data-tabs-content-padding={padding}\n                data-tabs-variant={variant}\n                data-tabs-with-divider={shouldShowDivider}\n                {...props}\n            >\n                <div className={styles.triggerListWrapper}>\n                    <RadixTabs.List ref={triggerListRef} data-size={size} className={styles.triggerList}>\n                        {triggers.map((trigger) => (\n                            <RadixTabs.Trigger\n                                {...trigger.props}\n                                key={trigger.value}\n                                value={trigger.value}\n                                disabled={trigger.disabled}\n                                className={styles.trigger}\n                                ref={trigger.ref}\n                            >\n                                {trigger.element}\n                            </RadixTabs.Trigger>\n                        ))}\n                    </RadixTabs.List>\n                    <Dropdown.Root>\n                        {triggersOutOfView.length > 0 && (\n                            <Dropdown.Trigger data-test-id=\"overflow-items-dropdown-trigger\">\n                                <Button emphasis=\"default\" aspect=\"square\" size=\"small\">\n                                    <IconDotsHorizontal size={16} />\n                                </Button>\n                            </Dropdown.Trigger>\n                        )}\n                        <Dropdown.Content align=\"end\" data-test-id=\"overflow-items-dropdown-content\">\n                            {triggersOutOfView.map((trigger) => (\n                                <Dropdown.Item\n                                    {...trigger.props}\n                                    disabled={trigger.disabled}\n                                    onSelect={() => handleSetActiveTab(trigger.value)}\n                                    key={trigger.value}\n                                >\n                                    {trigger.element}\n                                </Dropdown.Item>\n                            ))}\n                        </Dropdown.Content>\n                    </Dropdown.Root>\n                    <span\n                        data-test-id=\"active-tab-indicator\"\n                        ref={activeIndicatorRef}\n                        className={styles.activeIndicator}\n                    />\n                </div>\n                {children}\n            </RadixTabs.Root>\n        </TabTriggerContext.Provider>\n    );\n};\nTabsRoot.displayName = 'Tabs.Root';\n\ntype TabsTabProps = {\n    children: ReactNode;\n    value: string;\n    disabled?: boolean;\n};\n\nexport const TabsTab = ({ children, value, disabled }: TabsTabProps) => {\n    const contextValue = useMemo(() => ({ value, disabled }), [value, disabled]);\n\n    return <TabConfigContext.Provider value={contextValue}>{children}</TabConfigContext.Provider>;\n};\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabsTriggerProps = {\n    children: ReactNode;\n};\n\nexport const TabsTrigger = ({ children, ...props }: TabsTriggerProps, ref: ForwardedRef<HTMLButtonElement>) => {\n    const { value, disabled } = useContext(TabConfigContext);\n\n    const { addTrigger } = useContext(TabTriggerContext);\n\n    const localRef = useRef<HTMLButtonElement>(null);\n    const previousElement = useRef<ReactNode>();\n\n    useEffect(() => {\n        addTrigger({\n            ref: localRef || ref,\n            value: value ?? '',\n            disabled,\n            props,\n            element: children,\n            previousElement: previousElement.current,\n        });\n        previousElement.current = children;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [children]);\n\n    return null;\n};\nTabsTrigger.displayName = 'Tabs.Trigger';\n\ntype TabsContentProps = {\n    children: ReactNode;\n    asChild?: boolean;\n};\n\nexport const TabsContent = ({ children, ...itemProps }: TabsContentProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const { value } = useContext(TabConfigContext);\n\n    return (\n        <RadixTabs.Content ref={ref} {...itemProps} className={styles.content} value={value ?? ''}>\n            {children}\n        </RadixTabs.Content>\n    );\n};\nTabsContent.displayName = 'Tabs.Content';\n\nexport const Tabs = {\n    Root: forwardRef<HTMLDivElement, TabsRootProps>(TabsRoot),\n    Tab: forwardRef<HTMLDivElement, TabsTabProps>(TabsTab),\n    Trigger: forwardRef<HTMLButtonElement, TabsTriggerProps>(TabsTrigger),\n    Content: forwardRef<HTMLDivElement, TabsContentProps>(TabsContent),\n};\n"],"names":["TabConfigContext","createContext","TabTriggerContext","TabsRoot","padding","propsActiveTab","defaultActiveTab","size","onActiveTabChange","children","variant","withDivider","props","ref","dir","useFondueTheme","activeTab","setActiveTab","useControllableState","handleSetActiveTab","useCallback","value","triggerListRef","activeIndicatorRef","triggers","triggersOutOfView","addTrigger","useTabTriggers","contextValue","useMemo","shouldShowDivider","jsx","jsxs","RadixTabs","styles","_a","trigger","createElement","Dropdown","Button","IconDotsHorizontal","TabsTab","disabled","TabsTrigger","useContext","localRef","useRef","previousElement","useEffect","TabsContent","itemProps","Tabs","forwardRef"],"mappings":";;;;;;;;;;AAkEA,MAAMA,IAAmBC,EAGtB;AAAA,EACC,OAAO;AAAA,EACP,UAAU;AACd,CAAC;AACDD,EAAiB,cAAc;AAE/B,MAAME,IAAoBD,EAEvB;AAAA,EACC,YAAY,MAAM;AAAA,EAAC;AACvB,CAAC;AACDC,EAAkB,cAAc;AAEzB,MAAMC,IAAW,CACpB;AAAA,EACI,SAAAC,IAAU;AAAA,EACV,WAAWC;AAAA,EACX,kBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAAA,EACd,GAAGC;AACP,GACAC,MACC;;AACD,QAAM,EAAE,KAAAC,EAAA,IAAQC,EAAA,GAEV,CAACC,GAAWC,CAAY,IAAIC,EAAqB;AAAA,IACnD,MAAMb;AAAA,IACN,aAAaC;AAAA,IACb,UAAUE;AAAA,EAAA,CACb,GAEKW,IAAqBC;AAAA,IACvB,CAACC,MAAkB;AACf,MAAAJ,EAAaI,CAAK;AAAA,IACtB;AAAA,IACA,CAACJ,CAAY;AAAA,EAAA,GAGX,EAAE,gBAAAK,GAAgB,oBAAAC,GAAoB,UAAAC,GAAU,mBAAAC,GAAmB,YAAAC,EAAA,IAAeC,EAAe;AAAA,IACnG,WAAAX;AAAA,EAAA,CACH,GAEKY,IAAeC,EAAQ,OAAO,EAAE,YAAAH,MAAe,CAACA,CAAU,CAAC,GAG3DI,IAAoBpB,MAAY,UAAUC;AAEhD,SACI,gBAAAoB,EAAC7B,EAAkB,UAAlB,EAA2B,OAAO0B,GAC/B,UAAA,gBAAAI;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACG,KAAApB;AAAA,MACA,KAAAC;AAAA,MACA,WAAWoB,EAAO;AAAA,MAClB,eAAef;AAAA,MACf,OAAOH,OAAamB,IAAAX,EAAS,CAAC,MAAV,gBAAAW,EAAa;AAAA,MACjC,6BAA2B/B;AAAA,MAC3B,qBAAmBM;AAAA,MACnB,0BAAwBoB;AAAA,MACvB,GAAGlB;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAoB,EAAC,OAAA,EAAI,WAAWE,EAAO,oBACnB,UAAA;AAAA,UAAA,gBAAAH,EAACE,EAAU,MAAV,EAAe,KAAKX,GAAgB,aAAWf,GAAM,WAAW2B,EAAO,aACnE,UAAAV,EAAS,IAAI,CAACY,MACX,gBAAAC;AAAA,YAACJ,EAAU;AAAA,YAAV;AAAA,cACI,GAAGG,EAAQ;AAAA,cACZ,KAAKA,EAAQ;AAAA,cACb,OAAOA,EAAQ;AAAA,cACf,UAAUA,EAAQ;AAAA,cAClB,WAAWF,EAAO;AAAA,cAClB,KAAKE,EAAQ;AAAA,YAAA;AAAA,YAEZA,EAAQ;AAAA,UAAA,CAEhB,GACL;AAAA,UACA,gBAAAJ,EAACM,EAAS,MAAT,EACI,UAAA;AAAA,YAAAb,EAAkB,SAAS,KACxB,gBAAAM,EAACO,EAAS,SAAT,EAAiB,gBAAa,mCAC3B,UAAA,gBAAAP,EAACQ,GAAA,EAAO,UAAS,WAAU,QAAO,UAAS,MAAK,SAC5C,4BAACC,GAAA,EAAmB,MAAM,IAAI,EAAA,CAClC,EAAA,CACJ;AAAA,YAEJ,gBAAAT,EAACO,EAAS,SAAT,EAAiB,OAAM,OAAM,gBAAa,mCACtC,UAAAb,EAAkB,IAAI,CAACW,MACpB,gBAAAC;AAAA,cAACC,EAAS;AAAA,cAAT;AAAA,gBACI,GAAGF,EAAQ;AAAA,gBACZ,UAAUA,EAAQ;AAAA,gBAClB,UAAU,MAAMjB,EAAmBiB,EAAQ,KAAK;AAAA,gBAChD,KAAKA,EAAQ;AAAA,cAAA;AAAA,cAEZA,EAAQ;AAAA,YAAA,CAEhB,EAAA,CACL;AAAA,UAAA,GACJ;AAAA,UACA,gBAAAL;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAa;AAAA,cACb,KAAKR;AAAA,cACL,WAAWW,EAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QACtB,GACJ;AAAA,QACCzB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAET;AAER;AACAN,EAAS,cAAc;AAQhB,MAAMsC,IAAU,CAAC,EAAE,UAAAhC,GAAU,OAAAY,GAAO,UAAAqB,QAA6B;AACpE,QAAMd,IAAeC,EAAQ,OAAO,EAAE,OAAAR,GAAO,UAAAqB,MAAa,CAACrB,GAAOqB,CAAQ,CAAC;AAE3E,2BAAQ1C,EAAiB,UAAjB,EAA0B,OAAO4B,GAAe,UAAAnB,GAAS;AACrE;AACAgC,EAAQ,cAAc;AAMf,MAAME,IAAc,CAAC,EAAE,UAAAlC,GAAU,GAAGG,EAAA,GAA2BC,MAAyC;AAC3G,QAAM,EAAE,OAAAQ,GAAO,UAAAqB,MAAaE,EAAW5C,CAAgB,GAEjD,EAAE,YAAA0B,EAAA,IAAekB,EAAW1C,CAAiB,GAE7C2C,IAAWC,EAA0B,IAAI,GACzCC,IAAkBD,EAAA;AAExB,SAAAE,EAAU,MAAM;AACZ,IAAAtB,EAAW;AAAA,MACP,KAAKmB,KAAYhC;AAAA,MACjB,OAAOQ,KAAS;AAAA,MAChB,UAAAqB;AAAA,MACA,OAAA9B;AAAA,MACA,SAASH;AAAA,MACT,iBAAiBsC,EAAgB;AAAA,IAAA,CACpC,GACDA,EAAgB,UAAUtC;AAAA,EAE9B,GAAG,CAACA,CAAQ,CAAC,GAEN;AACX;AACAkC,EAAY,cAAc;AAOnB,MAAMM,IAAc,CAAC,EAAE,UAAAxC,GAAU,GAAGyC,EAAA,GAA+BrC,MAAsC;AAC5G,QAAM,EAAE,OAAAQ,EAAA,IAAUuB,EAAW5C,CAAgB;AAE7C,SACI,gBAAA+B,EAACE,EAAU,SAAV,EAAkB,KAAApB,GAAW,GAAGqC,GAAW,WAAWhB,EAAO,SAAS,OAAOb,KAAS,IAClF,UAAAZ,EAAA,CACL;AAER;AACAwC,EAAY,cAAc;AAEnB,MAAME,KAAO;AAAA,EAChB,MAAMC,EAA0CjD,CAAQ;AAAA,EACxD,KAAKiD,EAAyCX,CAAO;AAAA,EACrD,SAASW,EAAgDT,CAAW;AAAA,EACpE,SAASS,EAA6CH,CAAW;AACrE;"}
+{"version":3,"file":"fondue-components32.js","sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixSwitch from '@radix-ui/react-switch';\nimport { type FormEvent, type ForwardedRef, forwardRef } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/switch.module.scss';\n\ntype SwitchProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The size of the switch component.\n     * @default medium\n     */\n    size?: 'small' | 'medium' | 'large';\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     * @default false\n     */\n    value?: boolean;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     * @default false\n     */\n    defaultValue?: boolean;\n    /**\n     * Disables the select component.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Whether the switch is required.\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Callback function that is called when the switch is toggled.\n     * @param checked - The new checked state of the switch\n     */\n    onChange?: (checked: boolean) => void;\n    /**\n     * Event handler called when the checkbox is blurred\n     * @param event - The event object\n     */\n    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is focused\n     * @param event - The event object\n     */\n    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nconst SwitchComponent = (\n    {\n        value,\n        defaultValue,\n        size = 'medium',\n        onChange,\n        'data-test-id': dataTestId = 'fondue-switch',\n        'aria-label': ariaLabel,\n        ...props\n    }: SwitchProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    const { t } = useTranslation();\n\n    return (\n        <RadixSwitch.Root\n            ref={ref}\n            checked={value}\n            defaultChecked={defaultValue}\n            className={styles.root}\n            onCheckedChange={onChange}\n            aria-label={ariaLabel ?? t('Switch_defaultLabel')}\n            data-test-id={dataTestId}\n            data-size={size}\n            {...props}\n        >\n            <RadixSwitch.Thumb className={styles.thumb} />\n        </RadixSwitch.Root>\n    );\n};\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(SwitchComponent);\nSwitch.displayName = 'Switch';\n"],"names":["SwitchComponent","value","defaultValue","size","onChange","dataTestId","ariaLabel","props","ref","t","useTranslation","jsx","RadixSwitch","styles","Switch","forwardRef"],"mappings":";;;;;AAwDA,MAAMA,IAAkB,CACpB;AAAA,EACI,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,cAAcC;AAAA,EACd,GAAGC;AACP,GACAC,MACC;AACD,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,SACI,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACG,KAAAJ;AAAA,MACA,SAASP;AAAA,MACT,gBAAgBC;AAAA,MAChB,WAAWW,EAAO;AAAA,MAClB,iBAAiBT;AAAA,MACjB,cAAYE,KAAaG,EAAE,qBAAqB;AAAA,MAChD,gBAAcJ;AAAA,MACd,aAAWF;AAAA,MACV,GAAGI;AAAA,MAEJ,4BAACK,EAAY,OAAZ,EAAkB,WAAWC,EAAO,MAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGxD,GAEaC,IAASC,EAA2Cf,CAAe;AAChFc,EAAO,cAAc;"}