@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/button/Button.js

@@ -1,132 +1,103 @@
-import { jsxs as E, jsx as k } from "react/jsx-runtime";
-import { forwardRef as $, useState as S, useRef as w } from "react";
-import { noop as B } from "es-toolkit/function";
-import F from "../../utils/classNames.js";
-import { createButtonRipple as L } from "../../utils/buttonEffect.js";
-import G from "../../hooks/useMergeRefs.js";
-import { getAutoTrackingAttributes as z } from "../../utils/analytics/autoTracking.js";
-const W = {
-  DEFAULT: "default",
-  UNSTYLED: "unstyled",
-  PRIMARY: "primary",
-  SECONDARY: "secondary",
-  INFO: "info",
-  WARNING: "warning",
-  DANGER: "danger",
-  SUCCESS: "success",
-  MUTED: "muted",
-  MUTED_FILLED: "muted-filled"
-}, s = {
-  VARIANT_LINK: "link",
-  VARIANT_LINK_INLINE: "link-inline",
-  VARIANT_OUTLINE: "outline",
-  VARIANT_ACTION: "action"
-}, X = {
-  XS: "xs",
-  SM: "sm",
-  MD: "md",
-  LG: "lg"
-}, u = $((_, h) => {
-  const {
-    as: a = "button",
-    active: e = !1,
-    disabled: n = !1,
-    asToggle: f = !1,
-    onClick: l = B,
-    bsStyle: C = "default",
-    bsSize: b,
-    variant: i,
-    iconOnly: v = !1,
-    iconName: o,
-    iconRight: y = !1,
-    multiline: O = !1,
-    block: D = !1,
-    hoverScale: M = !1,
-    className: V = "",
-    noRippleEffect: N = !1,
-    autoTrackingKey: U,
-    type: x = "button",
-    tabIndex: A = 0,
-    children: m,
-    ...r
-  } = _, I = z({
-    autoTrackingKey: U,
-    props: r,
-    source: "button"
-  }), [g, d] = S(e), T = w(null), p = G(T, h), [P, j] = S(e);
-  e !== P && (d(e), j(e));
-  const K = (t) => {
-    if (N || L(t.nativeEvent, t.currentTarget), f) {
-      const c = !g;
-      d(c), c && T.current?.blur(), l(c);
-    } else
-      l(t);
-  }, Y = (t) => {
-    if (n) {
-      t.preventDefault();
-      return;
-    }
-    N || L(t.nativeEvent, t.currentTarget), l(t);
-  }, R = F(
-    "btn",
-    `btn-${C}`,
-    i === s.VARIANT_LINK && "btn-link",
-    i === s.VARIANT_LINK_INLINE && "btn-link btn-link-inline",
-    i === s.VARIANT_OUTLINE && "btn-outline",
-    i === s.VARIANT_ACTION && "btn-action",
-    b && `btn-${b}`,
-    f && "btn-toggle",
-    g && "active",
-    v && "btn-icon-only",
-    y && "btn-icon-right",
-    O && "btn-multiline",
-    D && "btn-block",
-    M && "hover-scale",
-    a === "a" && "gap-0",
-    a === "a" && n && "disabled",
-    "btn-component",
-    V
-  );
-  return a === "a" ? /* @__PURE__ */ E(
-    "a",
-    {
-      ref: p,
-      ...r,
-      ...I,
-      className: R,
-      onClick: Y,
-      "aria-disabled": n || void 0,
-      tabIndex: n ? -1 : A,
-      children: [
-        o && /* @__PURE__ */ k("span", { className: `rioglyph ${o}` }),
-        m
-      ]
-    }
-  ) : /* @__PURE__ */ E(
-    "button",
-    {
-      ref: p,
-      type: x,
-      ...r,
-      ...I,
-      className: R,
-      onClick: K,
-      disabled: n,
-      tabIndex: A,
-      children: [
-        o && /* @__PURE__ */ k("span", { className: `rioglyph ${o}` }),
-        m
-      ]
-    }
-  );
+import e from "../../utils/classNames.js";
+import { createButtonRipple as t } from "../../utils/buttonEffect.js";
+import { getAutoTrackingAttributes as n } from "../../utils/analytics/autoTracking.js";
+import r from "../tooltip/SimpleTooltip.js";
+import i from "../icon/Icon.js";
+import { forwardRef as a, useState as o } from "react";
+import { noop as s } from "es-toolkit/function";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/button/Button.tsx
+var u = {
+	DEFAULT: "default",
+	UNSTYLED: "unstyled",
+	PRIMARY: "primary",
+	SECONDARY: "secondary",
+	INFO: "info",
+	WARNING: "warning",
+	DANGER: "danger",
+	SUCCESS: "success",
+	MUTED: "muted",
+	MUTED_FILLED: "muted-filled"
+}, d = {
+	VARIANT_LINK: "link",
+	VARIANT_LINK_INLINE: "link-inline",
+	VARIANT_OUTLINE: "outline",
+	VARIANT_ACTION: "action"
+}, f = {
+	XS: "xs",
+	SM: "sm",
+	MD: "md",
+	LG: "lg"
+}, p = a((a, u) => {
+	let { as: f = "button", active: p = !1, disabled: m = !1, asToggle: h = !1, onClick: g = s, bsStyle: _ = "default", bsSize: v, variant: y, iconOnly: b = !1, iconName: x, hoverIconName: S, icon: C, hoverIcon: w, iconRight: T = !1, multiline: E = !1, block: D = !1, hoverScale: O = !1, className: k = "", tooltip: A, noRippleEffect: j = !1, autoTrackingKey: M, type: N = "button", tabIndex: P = 0, children: F, "aria-label": I, title: L, ...R } = a, z = n({
+		autoTrackingKey: M,
+		props: R,
+		source: "button"
+	}), [B, V] = o(p), [H, U] = o(!1), W = H && (S ?? w) ? S ?? w : x ?? C, G = S || w ? {
+		onMouseEnter: (e) => {
+			U(!0);
+			let t = R.onMouseEnter;
+			t?.(e);
+		},
+		onMouseLeave: (e) => {
+			U(!1);
+			let t = R.onMouseLeave;
+			t?.(e);
+		}
+	} : {}, [K, q] = o(p);
+	p !== K && (V(p), q(p));
+	let J = (e) => {
+		if (j || t(e.nativeEvent, e.currentTarget), h) {
+			let t = !B;
+			V(t), t && e.currentTarget.blur(), g(t);
+		} else g(e);
+	}, Y = (e) => {
+		if (m) {
+			e.preventDefault();
+			return;
+		}
+		j || t(e.nativeEvent, e.currentTarget), g(e);
+	}, X = e("btn", `btn-${_}`, y === d.VARIANT_LINK && "btn-link", y === d.VARIANT_LINK_INLINE && "btn-link btn-link-inline", y === d.VARIANT_OUTLINE && "btn-outline", y === d.VARIANT_ACTION && "btn-action", v && `btn-${v}`, h && "btn-toggle", B && "active", b && "btn-icon-only", T && "btn-icon-right", E && "btn-multiline", D && "btn-block", O && "hover-scale", f === "a" && "gap-0", f === "a" && m && "disabled", "btn-component", k), Z = A != null && A !== !1, Q = f === "a" ? /* @__PURE__ */ l("a", {
+		ref: u,
+		...R,
+		...z,
+		className: X,
+		onClick: Y,
+		"aria-label": I,
+		"aria-disabled": m || void 0,
+		tabIndex: m ? -1 : P,
+		title: Z ? void 0 : L,
+		...G,
+		children: [W && /* @__PURE__ */ c(i, { iconName: W }), F]
+	}) : /* @__PURE__ */ l("button", {
+		ref: u,
+		type: N,
+		...R,
+		...z,
+		className: X,
+		onClick: J,
+		disabled: m,
+		tabIndex: P,
+		"aria-label": I,
+		title: Z ? void 0 : L,
+		...G,
+		children: [W && /* @__PURE__ */ c(i, { iconName: W }), F]
+	});
+	return Z ? /* @__PURE__ */ c(r, {
+		content: A,
+		delay: {
+			show: 250,
+			hide: 0
+		},
+		className: "max-width-200",
+		children: m && f !== "a" ? /* @__PURE__ */ c("span", {
+			className: e(D ? "display-block" : "display-inline-flex"),
+			children: Q
+		}) : Q
+	}) : Q;
 });
-Object.assign(u, W);
-Object.assign(u, s);
-Object.assign(u, X);
-export {
-  X as SIZES_MAP,
-  W as STYLES_MAP,
-  s as VARIANTS_MAP,
-  u as default
-};
-//# sourceMappingURL=Button.js.map
+Object.assign(p, u), Object.assign(p, d), Object.assign(p, f);
+//#endregion
+export { f as SIZES_MAP, u as STYLES_MAP, d as VARIANTS_MAP, p as default };
+
+//# sourceMappingURL=Button.js.map

package/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type HTMLProps,\n    type PropsWithChildren,\n    type RefAttributes,\n    useRef,\n    useState,\n} from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { createButtonRipple } from '../../utils/buttonEffect';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport { getAutoTrackingAttributes } from '../../utils/analytics/autoTracking';\n\nexport const STYLES_MAP = {\n    DEFAULT: 'default',\n    UNSTYLED: 'unstyled',\n    PRIMARY: 'primary',\n    SECONDARY: 'secondary',\n    INFO: 'info',\n    WARNING: 'warning',\n    DANGER: 'danger',\n    SUCCESS: 'success',\n    MUTED: 'muted',\n    MUTED_FILLED: 'muted-filled',\n} as const;\n\n// export for convenient usage on client side\nexport type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;\n\nexport const VARIANTS_MAP = {\n    VARIANT_LINK: 'link',\n    VARIANT_LINK_INLINE: 'link-inline',\n    VARIANT_OUTLINE: 'outline',\n    VARIANT_ACTION: 'action',\n} as const;\n\nexport type BUTTON_VARIANT = ObjectValues<typeof VARIANTS_MAP>;\n\nexport const SIZES_MAP = {\n    XS: 'xs',\n    SM: 'sm',\n    MD: 'md',\n    LG: 'lg',\n} as const;\n\nexport type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;\n\n/*\n *  ATTENTION: We're typing the onClick handler based on the value of `asToggle`.\n *\n *  It does not fully work here inside of this file, though. Therefore, we have to apply some explicit casts below.\n *  In code _using_ the Button component, however, the parameter type of the onClick handler must either be a boolean or\n *  a React.MouseEvent, respectively.\n */\n\ntype RegularButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle?: false;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param event The MouseEvent that triggered the click.\n     */\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n};\n\ntype ToggleButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle: true;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\ntype BaseButtonProps = {\n    /**\n     * Whether the button should be disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Set the button toggled. Should be used in combination with \"asToggle\" prop.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Use when the content of the button is an icon only to adapt the button spacing accordingly.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Adds right side spacing for an icon. This should be used when having navigation buttons\n     * that use an icon on the right side.\n     *\n     * @default false\n     */\n    iconRight?: boolean;\n\n    /**\n     * Optional RIOglyph icon class name that comes in handy for icon-only buttons without adding\n     * a separate icon span.\n     *\n     * Use only exact existing `rioglyph-*` classes from the generated UIKIT icon contract,\n     * for example `rioglyph-download`. Do not compose or guess semantic icon names; an unknown\n     * icon class renders as a filled rectangle.\n     */\n    iconName?: string;\n\n    /**\n     * Defines whether the button text break into multiple lines when the button space exceeds.\n     *\n     * Multiline buttons should be used as exception only.\n     *\n     * @default false\n     */\n    multiline?: boolean;\n\n    /**\n     * Defines whether the button takes up the full width of the parent element.\n     *\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * Enables a subtle scale animation when the button is hovered.\n     *\n     * @default false\n     */\n    hoverScale?: boolean;\n\n    /**\n     * Sets the button style.\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Sets the button size.\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Sets the button variant.\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Whether the \"ripple\" effect should be suppressed on this button.\n     */\n    noRippleEffect?: boolean;\n\n    /**\n     * Optional key used to generate automatic GA tracking attributes when no explicit\n     * tracking attributes are provided.\n     *\n     * Resulting label format: `button::<autoTrackingKey>`.\n     */\n    autoTrackingKey?: string;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the button element.\n     */\n    className?: string;\n};\n\ntype NativeButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a native button element.\n         *\n         * @default 'button'\n         */\n        as?: 'button';\n\n        /**\n         * Defines the native button type.\n         *\n         * The Button component renders a native `<button>` with `type=\"button\"` by default.\n         * Only set `type=\"submit\"` when the button should submit a form. Do not add\n         * `type=\"button\"` defensively unless local code style requires explicit defaults.\n         *\n         * @default 'button'\n         */\n        type?: 'button' | 'submit';\n    } & (RegularButton | ToggleButton);\n\ntype LinkButtonProps = Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a link element.\n         */\n        as: 'a';\n\n        /**\n         * Native button type is not supported when using `as=\"a\"`.\n         */\n        type?: never;\n\n        /**\n         * Defines the destination URL for the link button.\n         */\n        href: string;\n\n        /**\n         * Toggle behavior is not supported when using `as=\"a\"`.\n         *\n         * @default false\n         */\n        asToggle?: false;\n\n        /**\n         * Callback function triggered when clicking the link.\n         *\n         * @param event The MouseEvent that triggered the click.\n         */\n        onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;\n    };\n\nexport type ButtonProps = NativeButtonProps | LinkButtonProps;\n\ntype Props = PropsWithChildren<ButtonProps>;\n\n// Define statics to be used as \"Button.PRIMARY\"\ntype ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {\n    DEFAULT: 'default';\n    UNSTYLED: 'unstyled';\n    PRIMARY: 'primary';\n    SECONDARY: 'secondary';\n    INFO: 'info';\n    WARNING: 'warning';\n    DANGER: 'danger';\n    SUCCESS: 'success';\n    MUTED: 'muted';\n    MUTED_FILLED: 'muted-filled';\n\n    VARIANT_LINK: 'link';\n    VARIANT_LINK_INLINE: 'link-inline';\n    VARIANT_OUTLINE: 'outline';\n    VARIANT_ACTION: 'action';\n\n    XS: 'xs';\n    SM: 'sm';\n    MD: 'md';\n    LG: 'lg';\n};\n\nconst Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {\n    const {\n        as = 'button',\n        active = false,\n        disabled = false,\n        asToggle = false,\n        onClick = noop,\n        bsStyle = 'default',\n        bsSize,\n        variant,\n        iconOnly = false,\n        iconName,\n        iconRight = false,\n        multiline = false,\n        block = false,\n        hoverScale = false,\n        className = '',\n        noRippleEffect = false,\n        autoTrackingKey,\n        type = 'button',\n        tabIndex = 0,\n        children,\n        ...remainingProps\n    } = props;\n\n    const autoTrackingAttributes = getAutoTrackingAttributes({\n        autoTrackingKey,\n        props: remainingProps as Record<string, unknown>,\n        source: 'button',\n    });\n\n    const [isToggled, setIsToggled] = useState(active);\n\n    const btnRef = useRef<HTMLButtonElement>(null);\n\n    const buttonRef = useMergeRefs(btnRef, ref);\n\n    // Update internal toggle state when used as controlled component and outside toggle state changes\n    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here\n    const [previousActive, setPreviousActive] = useState(active);\n    if (active !== previousActive) {\n        setIsToggled(active);\n        setPreviousActive(active);\n    }\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        if (asToggle) {\n            // Intercept click handler only for toggle button to update internal state and blur after click\n            const newIsToggled = !isToggled;\n            setIsToggled(newIsToggled);\n\n            if (newIsToggled) {\n                btnRef.current?.blur();\n            }\n\n            (onClick as (x: boolean) => void)(newIsToggled);\n        } else {\n            (onClick as (x: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)(event);\n        }\n    };\n\n    const handleLinkClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        (onClick as (x: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void)(event);\n    };\n\n    const buttonClassNames = classNames(\n        'btn',\n        `btn-${bsStyle}`,\n        variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link',\n        variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline',\n        variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline',\n        variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action',\n        bsSize && `btn-${bsSize}`,\n        asToggle && 'btn-toggle',\n        isToggled && 'active',\n        iconOnly && 'btn-icon-only',\n        iconRight && 'btn-icon-right',\n        multiline && 'btn-multiline',\n        block && 'btn-block',\n        hoverScale && 'hover-scale',\n        as === 'a' && 'gap-0',\n        as === 'a' && disabled && 'disabled',\n        'btn-component',\n        className\n    );\n\n    if (as === 'a') {\n        return (\n            <a\n                ref={buttonRef as React.Ref<HTMLAnchorElement>}\n                {...(remainingProps as Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n                {...autoTrackingAttributes}\n                className={buttonClassNames}\n                onClick={handleLinkClick}\n                aria-disabled={disabled || undefined}\n                tabIndex={disabled ? -1 : tabIndex}\n            >\n                {iconName && <span className={`rioglyph ${iconName}`} />}\n                {children}\n            </a>\n        );\n    }\n\n    return (\n        <button\n            ref={buttonRef}\n            type={type}\n            {...(remainingProps as Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n            {...autoTrackingAttributes}\n            className={buttonClassNames}\n            onClick={handleButtonClick}\n            disabled={disabled}\n            tabIndex={tabIndex}\n        >\n            {iconName && <span className={`rioglyph ${iconName}`} />}\n            {children}\n        </button>\n    );\n}) as ButtonType;\n\nObject.assign(Button, STYLES_MAP);\nObject.assign(Button, VARIANTS_MAP);\nObject.assign(Button, SIZES_MAP);\n\nexport default Button;\n"],"names":["STYLES_MAP","VARIANTS_MAP","SIZES_MAP","Button","forwardRef","props","ref","as","active","disabled","asToggle","onClick","noop","bsStyle","bsSize","variant","iconOnly","iconName","iconRight","multiline","block","hoverScale","className","noRippleEffect","autoTrackingKey","type","tabIndex","children","remainingProps","autoTrackingAttributes","getAutoTrackingAttributes","isToggled","setIsToggled","useState","btnRef","useRef","buttonRef","useMergeRefs","previousActive","setPreviousActive","handleButtonClick","event","createButtonRipple","newIsToggled","handleLinkClick","buttonClassNames","classNames","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type HTMLProps,\n    type PropsWithChildren,\n    type RefAttributes,\n    useState,\n} from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { createButtonRipple } from '../../utils/buttonEffect';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport { getAutoTrackingAttributes } from '../../utils/analytics/autoTracking';\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\nimport Icon, { type IconType } from '../icon/Icon';\n\nexport const STYLES_MAP = {\n    DEFAULT: 'default',\n    UNSTYLED: 'unstyled',\n    PRIMARY: 'primary',\n    SECONDARY: 'secondary',\n    INFO: 'info',\n    WARNING: 'warning',\n    DANGER: 'danger',\n    SUCCESS: 'success',\n    MUTED: 'muted',\n    MUTED_FILLED: 'muted-filled',\n} as const;\n\n// export for convenient usage on client side\nexport type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;\n\nexport const VARIANTS_MAP = {\n    VARIANT_LINK: 'link',\n    VARIANT_LINK_INLINE: 'link-inline',\n    VARIANT_OUTLINE: 'outline',\n    VARIANT_ACTION: 'action',\n} as const;\n\nexport type BUTTON_VARIANT = ObjectValues<typeof VARIANTS_MAP>;\n\nexport const SIZES_MAP = {\n    XS: 'xs',\n    SM: 'sm',\n    MD: 'md',\n    LG: 'lg',\n} as const;\n\nexport type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;\n\n/*\n *  ATTENTION: We're typing the onClick handler based on the value of `asToggle`.\n *\n *  It does not fully work here inside of this file, though. Therefore, we have to apply some explicit casts below.\n *  In code _using_ the Button component, however, the parameter type of the onClick handler must either be a boolean or\n *  a React.MouseEvent, respectively.\n */\n\ntype RegularButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle?: false;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param event The MouseEvent that triggered the click.\n     */\n    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n};\n\ntype ToggleButton = {\n    /**\n     * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.\n     *\n     * @default false\n     */\n    asToggle: true;\n\n    /**\n     * Callback function triggered when clicking the button.\n     *\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\ntype BaseButtonProps = {\n    /**\n     * Whether the button should be disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Set the button toggled. Should be used in combination with \"asToggle\" prop.\n     *\n     * @default false\n     */\n    active?: boolean;\n\n    /**\n     * Use when the content of the button is an icon only to adapt the button spacing accordingly.\n     *\n     * @default false\n     */\n    iconOnly?: boolean;\n\n    /**\n     * Adds right side spacing for an icon. This should be used when having navigation buttons\n     * that use an icon on the right side.\n     *\n     * @default false\n     */\n    iconRight?: boolean;\n\n    /**\n     * Optional UIKIT icon that comes in handy for icon-only buttons without adding a separate icon span.\n     *\n     * Prefer an unprefixed name such as `download`. Existing `icon-*` and legacy names remain supported.\n     */\n    iconName?: IconType;\n\n    /**\n     * Replaces the icon while the button is hovered.\n     */\n    hoverIconName?: IconType;\n\n    /**\n     * Legacy alias for `iconName`.\n     *\n     * @deprecated Use `iconName` instead.\n     */\n    icon?: IconType;\n\n    /**\n     * Legacy alias for `hoverIconName`.\n     *\n     * @deprecated Use `hoverIconName` instead.\n     */\n    hoverIcon?: IconType;\n\n    /**\n     * Defines whether the button text break into multiple lines when the button space exceeds.\n     *\n     * Multiline buttons should be used as exception only.\n     *\n     * @default false\n     */\n    multiline?: boolean;\n\n    /**\n     * Defines whether the button takes up the full width of the parent element.\n     *\n     * @default false\n     */\n    block?: boolean;\n\n    /**\n     * Enables a subtle scale animation when the button is hovered.\n     *\n     * @default false\n     */\n    hoverScale?: boolean;\n\n    /**\n     * Sets the button style.\n     * @default 'default'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Sets the button size.\n     */\n    bsSize?: BUTTON_SIZE;\n\n    /**\n     * Sets the button variant.\n     */\n    variant?: BUTTON_VARIANT;\n\n    /**\n     * Whether the \"ripple\" effect should be suppressed on this button.\n     */\n    noRippleEffect?: boolean;\n\n    /**\n     * Optional key used to generate automatic GA tracking attributes when no explicit\n     * tracking attributes are provided.\n     *\n     * Resulting label format: `button::<autoTrackingKey>`.\n     */\n    autoTrackingKey?: string;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Additional classes to be set on the button element.\n     */\n    className?: string;\n\n    /**\n     * Optional tooltip content rendered as a SimpleTooltip around the button.\n     *\n     * Pass a string for plain text, or a React element for translated text such as FormattedMessage.\n     * To customize tooltip behavior or styling, such as delay, placement, width or trigger, wrap the Button with\n     * SimpleTooltip instead.\n     *\n     * @example 'Open settings' or <FormattedMessage id='settings.open' />\n     *\n     */\n    tooltip?: React.ReactNode;\n};\n\ntype NativeButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a native button element.\n         *\n         * @default 'button'\n         */\n        as?: 'button';\n\n        /**\n         * Defines the native button type.\n         *\n         * The Button component renders a native `<button>` with `type=\"button\"` by default.\n         * Only set `type=\"submit\"` when the button should submit a form. Do not add\n         * `type=\"button\"` defensively unless local code style requires explicit defaults.\n         *\n         * @default 'button'\n         */\n        type?: 'button' | 'submit';\n    } & (RegularButton | ToggleButton);\n\ntype LinkButtonProps = Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'> &\n    BaseButtonProps & {\n        /**\n         * Defines this component as a link element.\n         */\n        as: 'a';\n\n        /**\n         * Native button type is not supported when using `as=\"a\"`.\n         */\n        type?: never;\n\n        /**\n         * Defines the destination URL for the link button.\n         */\n        href: string;\n\n        /**\n         * Toggle behavior is not supported when using `as=\"a\"`.\n         *\n         * @default false\n         */\n        asToggle?: false;\n\n        /**\n         * Callback function triggered when clicking the link.\n         *\n         * @param event The MouseEvent that triggered the click.\n         */\n        onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;\n    };\n\nexport type ButtonProps = NativeButtonProps | LinkButtonProps;\n\ntype Props = PropsWithChildren<ButtonProps>;\n\n// Define statics to be used as \"Button.PRIMARY\"\ntype ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {\n    DEFAULT: 'default';\n    UNSTYLED: 'unstyled';\n    PRIMARY: 'primary';\n    SECONDARY: 'secondary';\n    INFO: 'info';\n    WARNING: 'warning';\n    DANGER: 'danger';\n    SUCCESS: 'success';\n    MUTED: 'muted';\n    MUTED_FILLED: 'muted-filled';\n\n    VARIANT_LINK: 'link';\n    VARIANT_LINK_INLINE: 'link-inline';\n    VARIANT_OUTLINE: 'outline';\n    VARIANT_ACTION: 'action';\n\n    XS: 'xs';\n    SM: 'sm';\n    MD: 'md';\n    LG: 'lg';\n};\n\nconst Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {\n    const {\n        as = 'button',\n        active = false,\n        disabled = false,\n        asToggle = false,\n        onClick = noop,\n        bsStyle = 'default',\n        bsSize,\n        variant,\n        iconOnly = false,\n        iconName,\n        hoverIconName,\n        icon: legacyIcon,\n        hoverIcon: legacyHoverIcon,\n        iconRight = false,\n        multiline = false,\n        block = false,\n        hoverScale = false,\n        className = '',\n        tooltip,\n        noRippleEffect = false,\n        autoTrackingKey,\n        type = 'button',\n        tabIndex = 0,\n        children,\n        'aria-label': ariaLabel,\n        title,\n        ...remainingProps\n    } = props;\n\n    const autoTrackingAttributes = getAutoTrackingAttributes({\n        autoTrackingKey,\n        props: remainingProps as Record<string, unknown>,\n        source: 'button',\n    });\n\n    const [isToggled, setIsToggled] = useState(active);\n    const [isHovered, setIsHovered] = useState(false);\n    const buttonIcon =\n        isHovered && (hoverIconName ?? legacyHoverIcon) ? (hoverIconName ?? legacyHoverIcon) : (iconName ?? legacyIcon);\n\n    const handleMouseEnter: React.MouseEventHandler<HTMLElement> = event => {\n        setIsHovered(true);\n        const mouseEnterHandler = remainingProps.onMouseEnter as React.MouseEventHandler<HTMLElement> | undefined;\n        mouseEnterHandler?.(event);\n    };\n\n    const handleMouseLeave: React.MouseEventHandler<HTMLElement> = event => {\n        setIsHovered(false);\n        const mouseLeaveHandler = remainingProps.onMouseLeave as React.MouseEventHandler<HTMLElement> | undefined;\n        mouseLeaveHandler?.(event);\n    };\n\n    const hoverHandlers =\n        hoverIconName || legacyHoverIcon\n            ? {\n                  onMouseEnter: handleMouseEnter,\n                  onMouseLeave: handleMouseLeave,\n              }\n            : {};\n\n    // Update internal toggle state when used as controlled component and outside toggle state changes\n    // Note, using the usePrevious hook resulted in an endless loop, hence the useState here\n    const [previousActive, setPreviousActive] = useState(active);\n    if (active !== previousActive) {\n        setIsToggled(active);\n        setPreviousActive(active);\n    }\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        if (asToggle) {\n            // Intercept click handler only for toggle button to update internal state and blur after click\n            const newIsToggled = !isToggled;\n            setIsToggled(newIsToggled);\n\n            if (newIsToggled) {\n                event.currentTarget.blur();\n            }\n\n            (onClick as (x: boolean) => void)(newIsToggled);\n        } else {\n            (onClick as (x: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void)(event);\n        }\n    };\n\n    const handleLinkClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        if (!noRippleEffect) {\n            createButtonRipple(event.nativeEvent, event.currentTarget);\n        }\n\n        (onClick as (x: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void)(event);\n    };\n\n    const buttonClassNames = classNames(\n        'btn',\n        `btn-${bsStyle}`,\n        variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link',\n        variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline',\n        variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline',\n        variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action',\n        bsSize && `btn-${bsSize}`,\n        asToggle && 'btn-toggle',\n        isToggled && 'active',\n        iconOnly && 'btn-icon-only',\n        iconRight && 'btn-icon-right',\n        multiline && 'btn-multiline',\n        block && 'btn-block',\n        hoverScale && 'hover-scale',\n        as === 'a' && 'gap-0',\n        as === 'a' && disabled && 'disabled',\n        'btn-component',\n        className\n    );\n\n    const hasTooltip = tooltip !== undefined && tooltip !== null && tooltip !== false;\n\n    const buttonElement =\n        as === 'a' ? (\n            <a\n                ref={ref as React.Ref<HTMLAnchorElement>}\n                {...(remainingProps as Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n                {...autoTrackingAttributes}\n                className={buttonClassNames}\n                onClick={handleLinkClick}\n                aria-label={ariaLabel}\n                aria-disabled={disabled || undefined}\n                tabIndex={disabled ? -1 : tabIndex}\n                title={hasTooltip ? undefined : title}\n                {...hoverHandlers}\n            >\n                {buttonIcon && <Icon iconName={buttonIcon} />}\n                {children}\n            </a>\n        ) : (\n            <button\n                ref={ref}\n                type={type}\n                {...(remainingProps as Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'>)}\n                {...autoTrackingAttributes}\n                className={buttonClassNames}\n                onClick={handleButtonClick}\n                disabled={disabled}\n                tabIndex={tabIndex}\n                aria-label={ariaLabel}\n                title={hasTooltip ? undefined : title}\n                {...hoverHandlers}\n            >\n                {buttonIcon && <Icon iconName={buttonIcon} />}\n                {children}\n            </button>\n        );\n\n    if (!hasTooltip) {\n        return buttonElement;\n    }\n\n    const tooltipTargetElement =\n        disabled && as !== 'a' ? (\n            <span className={classNames(block ? 'display-block' : 'display-inline-flex')}>{buttonElement}</span>\n        ) : (\n            buttonElement\n        );\n\n    return (\n        <SimpleTooltip content={tooltip} delay={{ show: 250, hide: 0 }} className='max-width-200'>\n            {tooltipTargetElement}\n        </SimpleTooltip>\n    );\n}) as ButtonType;\n\nObject.assign(Button, STYLES_MAP);\nObject.assign(Button, VARIANTS_MAP);\nObject.assign(Button, SIZES_MAP);\n\nexport default Button;\n"],"mappings":"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"}

package/components/button/ButtonGroup.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps, PropsWithChildren } from 'react';
+export type ButtonGroupProps = ComponentProps<'div'> & {
+    /**
+     * Display buttons in a horizontal or vertical group.
+     *
+     * @default 'horizontal'
+     */
+    variant?: 'horizontal' | 'vertical';
+    /**
+     * Additional classes set to the outer element.
+     */
+    className?: string;
+};
+declare const ButtonGroup: (props: PropsWithChildren<ButtonGroupProps>) => import("react/jsx-runtime").JSX.Element;
+export default ButtonGroup;

package/components/button/ButtonGroup.js

@@ -0,0 +1,16 @@
+import e from "../../utils/classNames.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/button/ButtonGroup.tsx
+var n = (n) => {
+	let { className: r = "", variant: i = "horizontal", role: a = "group", children: o, ...s } = n;
+	return /* @__PURE__ */ t("div", {
+		...s,
+		role: a,
+		className: e(r, i === "vertical" ? "btn-group-vertical" : "btn-group"),
+		children: o
+	});
+};
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=ButtonGroup.js.map

package/components/button/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","names":[],"sources":["../../../src/components/button/ButtonGroup.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type ButtonGroupProps = ComponentProps<'div'> & {\n    /**\n     * Display buttons in a horizontal or vertical group.\n     *\n     * @default 'horizontal'\n     */\n    variant?: 'horizontal' | 'vertical';\n\n    /**\n     * Additional classes set to the outer element.\n     */\n    className?: string;\n};\n\nconst ButtonGroup = (props: PropsWithChildren<ButtonGroupProps>) => {\n    const { className = '', variant = 'horizontal', role = 'group', children, ...remainingProps } = props;\n\n    return (\n        <div\n            {...remainingProps}\n            role={role}\n            className={classNames(className, variant === 'vertical' ? 'btn-group-vertical' : 'btn-group')}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport default ButtonGroup;\n"],"mappings":";;;AAkBA,IAAM,KAAe,MAA+C;CAChE,IAAM,EAAE,eAAY,IAAI,aAAU,cAAc,UAAO,SAAS,aAAU,GAAG,MAAmB;CAEhG,OACI,kBAAC,OAAD;EACI,GAAI;EACE;EACN,WAAW,EAAW,GAAW,MAAY,aAAa,uBAAuB,WAAW;EAE3F;CACA,CAAA;AAEb"}

package/components/button/ButtonToolbar.js

@@ -1,17 +1,15 @@
-import { jsx as a } from "react/jsx-runtime";
-import c from "../../utils/classNames.js";
-const m = (e) => {
-  const { className: n = "", alignment: t, children: s, ...o } = e, r = c(
-    n,
-    "btn-toolbar",
-    t === "left" && "justify-content-start",
-    t === "right" && "justify-content-end",
-    t === "center" && "justify-content-center",
-    t === "space-between" && "justify-content-between"
-  );
-  return /* @__PURE__ */ a("div", { ...o, className: r, children: s });
+import e from "../../utils/classNames.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/button/ButtonToolbar.tsx
+var n = (n) => {
+	let { className: r = "", alignment: i, children: a, ...o } = n, s = e(r, "btn-toolbar", i === "left" && "justify-content-start", i === "right" && "justify-content-end", i === "center" && "justify-content-center", i === "space-between" && "justify-content-between");
+	return /* @__PURE__ */ t("div", {
+		...o,
+		className: s,
+		children: a
+	});
 };
-export {
-  m as default
-};
-//# sourceMappingURL=ButtonToolbar.js.map
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=ButtonToolbar.js.map

package/components/button/ButtonToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonToolbar.js","sources":["../../../src/components/button/ButtonToolbar.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type ButtonToolbarProps = ComponentProps<'div'> & {\n    /**\n     * Align buttons to a defined side or set them apart.\n     */\n    alignment?: 'left' | 'right' | 'center' | 'space-between';\n\n    /**\n     * Additional classes set to the outer element.\n     */\n    className?: string;\n};\n\nconst ButtonToolbar = (props: PropsWithChildren<ButtonToolbarProps>) => {\n    const { className = '', alignment, children, ...remainingProps } = props;\n\n    const classes = classNames(\n        className,\n        'btn-toolbar',\n        alignment === 'left' && 'justify-content-start',\n        alignment === 'right' && 'justify-content-end',\n        alignment === 'center' && 'justify-content-center',\n        alignment === 'space-between' && 'justify-content-between'\n    );\n\n    return (\n        <div {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n};\n\nexport default ButtonToolbar;\n"],"names":["ButtonToolbar","props","className","alignment","children","remainingProps","classes","classNames"],"mappings":";;AAgBA,MAAMA,IAAgB,CAACC,MAAiD;AACpE,QAAM,EAAE,WAAAC,IAAY,IAAI,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAmBJ,GAE7DK,IAAUC;AAAA,IACZL;AAAA,IACA;AAAA,IACAC,MAAc,UAAU;AAAA,IACxBA,MAAc,WAAW;AAAA,IACzBA,MAAc,YAAY;AAAA,IAC1BA,MAAc,mBAAmB;AAAA,EAAA;AAGrC,2BACK,OAAA,EAAK,GAAGE,GAAgB,WAAWC,GAC/B,UAAAF,GACL;AAER;"}
+{"version":3,"file":"ButtonToolbar.js","names":[],"sources":["../../../src/components/button/ButtonToolbar.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type ButtonToolbarProps = ComponentProps<'div'> & {\n    /**\n     * Align buttons to a defined side or set them apart.\n     */\n    alignment?: 'left' | 'right' | 'center' | 'space-between';\n\n    /**\n     * Additional classes set to the outer element.\n     */\n    className?: string;\n};\n\nconst ButtonToolbar = (props: PropsWithChildren<ButtonToolbarProps>) => {\n    const { className = '', alignment, children, ...remainingProps } = props;\n\n    const classes = classNames(\n        className,\n        'btn-toolbar',\n        alignment === 'left' && 'justify-content-start',\n        alignment === 'right' && 'justify-content-end',\n        alignment === 'center' && 'justify-content-center',\n        alignment === 'space-between' && 'justify-content-between'\n    );\n\n    return (\n        <div {...remainingProps} className={classes}>\n            {children}\n        </div>\n    );\n};\n\nexport default ButtonToolbar;\n"],"mappings":";;;AAgBA,IAAM,KAAiB,MAAiD;CACpE,IAAM,EAAE,eAAY,IAAI,cAAW,aAAU,GAAG,MAAmB,GAE7D,IAAU,EACZ,GACA,eACA,MAAc,UAAU,yBACxB,MAAc,WAAW,uBACzB,MAAc,YAAY,0BAC1B,MAAc,mBAAmB,yBACrC;CAEA,OACI,kBAAC,OAAD;EAAK,GAAI;EAAgB,WAAW;EAC/B;CACA,CAAA;AAEb"}

package/components/button/StepButton.js

@@ -1,10 +1,15 @@
-import { jsx as r } from "react/jsx-runtime";
 import e from "./Button.js";
-const p = (o) => {
-  const { direction: t = "next", ...n } = o;
-  return /* @__PURE__ */ r(e, { ...n, iconName: t === "next" ? "rioglyph-chevron-right" : "rioglyph-chevron-left", iconRight: t === "next" });
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/button/StepButton.tsx
+var n = (n) => {
+	let { direction: r = "next", ...i } = n, a = r === "next" ? "icon-chevron-right" : "icon-chevron-left";
+	return /* @__PURE__ */ t(e, {
+		...i,
+		iconName: a,
+		iconRight: r === "next"
+	});
 };
-export {
-  p as default
-};
-//# sourceMappingURL=StepButton.js.map
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=StepButton.js.map

package/components/button/StepButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepButton.js","sources":["../../../src/components/button/StepButton.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport Button, { type ButtonProps } from './Button';\n\nexport type StepButtonProps = ButtonProps & {\n    /**\n     * Defines the chevron icon for the respective direction.\n     *\n     * @default 'next'\n     */\n    direction?: 'next' | 'previous';\n};\n\nconst StepButton = (props: PropsWithChildren<StepButtonProps>) => {\n    const { direction = 'next', ...remainingProps } = props;\n\n    const iconName = direction === 'next' ? 'rioglyph-chevron-right' : 'rioglyph-chevron-left';\n\n    return <Button {...remainingProps} iconName={iconName} iconRight={direction === 'next'} />;\n};\n\nexport default StepButton;\n"],"names":["StepButton","props","direction","remainingProps","Button"],"mappings":";;AAaA,MAAMA,IAAa,CAACC,MAA8C;AAC9D,QAAM,EAAE,WAAAC,IAAY,QAAQ,GAAGC,MAAmBF;AAIlD,2BAAQG,GAAA,EAAQ,GAAGD,GAAgB,UAFlBD,MAAc,SAAS,2BAA2B,yBAEZ,WAAWA,MAAc,QAAQ;AAC5F;"}
+{"version":3,"file":"StepButton.js","names":[],"sources":["../../../src/components/button/StepButton.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport Button, { type ButtonProps } from './Button';\n\nexport type StepButtonProps = ButtonProps & {\n    /**\n     * Defines the chevron icon for the respective direction.\n     *\n     * @default 'next'\n     */\n    direction?: 'next' | 'previous';\n};\n\nconst StepButton = (props: PropsWithChildren<StepButtonProps>) => {\n    const { direction = 'next', ...remainingProps } = props;\n\n    const icon = direction === 'next' ? 'icon-chevron-right' : 'icon-chevron-left';\n\n    return <Button {...remainingProps} iconName={icon} iconRight={direction === 'next'} />;\n};\n\nexport default StepButton;\n"],"mappings":";;;AAaA,IAAM,KAAc,MAA8C;CAC9D,IAAM,EAAE,eAAY,QAAQ,GAAG,MAAmB,GAE5C,IAAO,MAAc,SAAS,uBAAuB;CAE3D,OAAO,kBAAC,GAAD;EAAQ,GAAI;EAAgB,UAAU;EAAM,WAAW,MAAc;CAAS,CAAA;AACzF"}

package/components/button/ToggleButton.js

@@ -1,7 +1,11 @@
+import e from "./Button.js";
 import { jsx as t } from "react/jsx-runtime";
-import r from "./Button.js";
-const m = (o) => /* @__PURE__ */ t(r, { ...o, asToggle: !0 });
-export {
-  m as default
-};
-//# sourceMappingURL=ToggleButton.js.map
+//#region src/components/button/ToggleButton.tsx
+var n = (n) => /* @__PURE__ */ t(e, {
+	...n,
+	asToggle: !0
+});
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=ToggleButton.js.map

package/components/button/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../../../src/components/button/ToggleButton.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport Button, { type ButtonProps } from './Button';\n\ntype NonLinkButtonProps = Exclude<ButtonProps, { as: 'a' }>;\n\nexport type ToggleButtonProps = Omit<NonLinkButtonProps, 'onClick' | 'asToggle'> & {\n    /**\n     * Callback function triggered when clicking the button.\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\nconst ToggleButton = (props: PropsWithChildren<ToggleButtonProps>) => <Button {...props} asToggle />;\n\nexport default ToggleButton;\n"],"names":["ToggleButton","props","jsx","Button"],"mappings":";;AAcA,MAAMA,IAAe,CAACC,MAAgD,gBAAAC,EAACC,KAAQ,GAAGF,GAAO,UAAQ,GAAA,CAAC;"}
+{"version":3,"file":"ToggleButton.js","names":[],"sources":["../../../src/components/button/ToggleButton.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport Button, { type ButtonProps } from './Button';\n\ntype NonLinkButtonProps = Exclude<ButtonProps, { as: 'a' }>;\n\nexport type ToggleButtonProps = Omit<NonLinkButtonProps, 'onClick' | 'asToggle'> & {\n    /**\n     * Callback function triggered when clicking the button.\n     * @param value The new value of the toggle button.\n     */\n    onClick?: (value: boolean) => void;\n};\n\nconst ToggleButton = (props: PropsWithChildren<ToggleButtonProps>) => <Button {...props} asToggle />;\n\nexport default ToggleButton;\n"],"mappings":";;;AAcA,IAAM,KAAgB,MAAgD,kBAAC,GAAD;CAAQ,GAAI;CAAO,UAAA;AAAU,CAAA"}