@choco-vanille/ui 1.1.0 → 1.1.2

package/dist/components/actions/icon-button/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/actions/icon-button/IconButton.tsx"],"sourcesContent":["import { ICON_BUTTON_STYLES } from '@components/actions/icon-button/styles/IconButton.css.ts'\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport type { IconButtonProps } from '@components/actions/icon-button/types/IconButton.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\nimport { ICON_BUTTON_SIZE_TO_ICON_SIZE, ICON_BUTTON_SIZES } from '@components/actions/icon-button/constants'\r\n\r\nconst IconButton: FC<IconButtonProps> = ({\r\n    variant,\r\n    color,\r\n    size = ICON_BUTTON_SIZES.md,\r\n    className,\r\n    icon,\r\n    active,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = ICON_BUTTON_SIZE_TO_ICON_SIZE[size]\r\n\r\n    return (\r\n        <button\r\n            ref={ref}\r\n            data-active={active ? 'true' : undefined}\r\n            className={cn(ICON_BUTTON_STYLES.recipe({ variant, color, size }), className)}\r\n            {...props}\r\n        >\r\n            <Icon\r\n                icon={icon}\r\n                size={iconSize}\r\n                className={BUTTON_SHARED_STYLES.icon}\r\n            />\r\n        </button>\r\n    )\r\n}\r\n\r\nIconButton.displayName = 'IconButton'\r\n\r\nexport default IconButton\r\n"],"names":["IconButton","variant","color","size","ICON_BUTTON_SIZES","className","icon","active","ref","props","iconSize","ICON_BUTTON_SIZE_TO_ICON_SIZE","jsx","cn","ICON_BUTTON_STYLES","Icon","BUTTON_SHARED_STYLES"],"mappings":";;;;;;;AAQA,MAAMA,IAAkC,CAAC;AAAA,EACrC,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAOC,EAAkB;AAAA,EACzB,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAWC,EAA8BR,CAAI;AAEnD,SACI,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAJ;AAAA,MACA,eAAaD,IAAS,SAAS;AAAA,MAC/B,WAAWM,EAAGC,EAAmB,OAAO,EAAE,SAAAb,GAAS,OAAAC,GAAO,MAAAC,GAAM,GAAGE,CAAS;AAAA,MAC3E,GAAGI;AAAA,MAEJ,UAAA,gBAAAG;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,MAAAT;AAAA,UACA,MAAMI;AAAA,UACN,WAAWM,EAAqB;AAAA,QAAA;AAAA,MAAA;AAAA,IACpC;AAAA,EAAA;AAGZ;AAEAhB,EAAW,cAAc;"}

package/dist/components/actions/icon-button/constants/iconButtonSizes.const.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../../_shared/buttons/constants/buttonSizes.const.cjs"),S={xs:"xs",sm:_.BUTTON_SIZES.sm,md:_.BUTTON_SIZES.md,lg:_.BUTTON_SIZES.lg},T={xs:"xs",sm:"sm",md:"md",lg:"lg"};exports.ICON_BUTTON_SIZES=S;exports.ICON_BUTTON_SIZE_TO_ICON_SIZE=T;
+//# sourceMappingURL=iconButtonSizes.const.cjs.map

package/dist/components/actions/icon-button/constants/iconButtonSizes.const.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconButtonSizes.const.cjs","sources":["../../../../../src/components/actions/icon-button/constants/iconButtonSizes.const.ts"],"sourcesContent":["import type { IconButtonSize } from '@components/actions/icon-button/types/IconButton.types.ts'\r\nimport type { IconSize } from '@components/foundation/icon'\r\nimport { BUTTON_SIZES } from '@components/actions/_shared/buttons/constants'\r\n\r\nexport const ICON_BUTTON_SIZES = {\r\n    xs: 'xs',\r\n    sm: BUTTON_SIZES.sm,\r\n    md: BUTTON_SIZES.md,\r\n    lg: BUTTON_SIZES.lg,\r\n} as const\r\n\r\nexport const ICON_BUTTON_SIZES_ARRAY = Object.values(ICON_BUTTON_SIZES)\r\n\r\nexport const ICON_BUTTON_SIZE_TO_ICON_SIZE: Record<NonNullable<IconButtonSize>, IconSize> = {\r\n    xs: 'xs',\r\n    sm: 'sm',\r\n    md: 'md',\r\n    lg: 'lg',\r\n}\r\n"],"names":["ICON_BUTTON_SIZES","BUTTON_SIZES","ICON_BUTTON_SIZE_TO_ICON_SIZE"],"mappings":"yJAIaA,EAAoB,CAC7B,GAAI,KACJ,GAAIC,EAAAA,aAAa,GACjB,GAAIA,EAAAA,aAAa,GACjB,GAAIA,EAAAA,aAAa,EACrB,EAIaC,EAA+E,CACxF,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACR"}

package/dist/components/actions/icon-button/constants/iconButtonSizes.const.d.ts

@@ -0,0 +1,10 @@
+import { IconButtonSize } from '../types/IconButton.types.ts';
+import { IconSize } from '../../../foundation/icon';
+export declare const ICON_BUTTON_SIZES: {
+    readonly xs: "xs";
+    readonly sm: "sm";
+    readonly md: "md";
+    readonly lg: "lg";
+};
+export declare const ICON_BUTTON_SIZES_ARRAY: ("xs" | "sm" | "md" | "lg")[];
+export declare const ICON_BUTTON_SIZE_TO_ICON_SIZE: Record<NonNullable<IconButtonSize>, IconSize>;

package/dist/components/actions/icon-button/constants/iconButtonSizes.const.js

@@ -0,0 +1,17 @@
+import { BUTTON_SIZES as m } from "../../_shared/buttons/constants/buttonSizes.const.js";
+const _ = {
+  xs: "xs",
+  sm: m.sm,
+  md: m.md,
+  lg: m.lg
+}, I = {
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+  lg: "lg"
+};
+export {
+  _ as ICON_BUTTON_SIZES,
+  I as ICON_BUTTON_SIZE_TO_ICON_SIZE
+};
+//# sourceMappingURL=iconButtonSizes.const.js.map

package/dist/components/actions/icon-button/constants/iconButtonSizes.const.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconButtonSizes.const.js","sources":["../../../../../src/components/actions/icon-button/constants/iconButtonSizes.const.ts"],"sourcesContent":["import type { IconButtonSize } from '@components/actions/icon-button/types/IconButton.types.ts'\r\nimport type { IconSize } from '@components/foundation/icon'\r\nimport { BUTTON_SIZES } from '@components/actions/_shared/buttons/constants'\r\n\r\nexport const ICON_BUTTON_SIZES = {\r\n    xs: 'xs',\r\n    sm: BUTTON_SIZES.sm,\r\n    md: BUTTON_SIZES.md,\r\n    lg: BUTTON_SIZES.lg,\r\n} as const\r\n\r\nexport const ICON_BUTTON_SIZES_ARRAY = Object.values(ICON_BUTTON_SIZES)\r\n\r\nexport const ICON_BUTTON_SIZE_TO_ICON_SIZE: Record<NonNullable<IconButtonSize>, IconSize> = {\r\n    xs: 'xs',\r\n    sm: 'sm',\r\n    md: 'md',\r\n    lg: 'lg',\r\n}\r\n"],"names":["ICON_BUTTON_SIZES","BUTTON_SIZES","ICON_BUTTON_SIZE_TO_ICON_SIZE"],"mappings":";AAIO,MAAMA,IAAoB;AAAA,EAC7B,IAAI;AAAA,EACJ,IAAIC,EAAa;AAAA,EACjB,IAAIA,EAAa;AAAA,EACjB,IAAIA,EAAa;AACrB,GAIaC,IAA+E;AAAA,EACxF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;"}

package/dist/components/actions/icon-button/constants/index.d.ts

@@ -0,0 +1 @@
+export { ICON_BUTTON_SIZE_TO_ICON_SIZE, ICON_BUTTON_SIZES, ICON_BUTTON_SIZES_ARRAY } from './iconButtonSizes.const.ts';

package/dist/components/actions/icon-button/index.d.ts

@@ -0,0 +1,4 @@
+export { default as IconButton } from './IconButton.tsx';
+export { ICON_BUTTON_STYLES } from './styles/IconButton.css.ts';
+export type { IconButtonProps } from './types/IconButton.props.ts';
+export type { IconButtonVariant, IconButtonSize, IconButtonColor } from './types/IconButton.types.ts';

package/dist/components/actions/icon-button/styles/IconButton.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                                                             */;/* empty css                                */const o=require("@vanilla-extract/recipes/createRuntimeFn");var t={recipe:o.createRuntimeFn({defaultClassName:"_11odjt50",variantClassNames:{variant:{contained:"_11odjt51",outlined:"_11odjt52",ghost:"_11odjt53"},color:{primary:"_11odjt54",secondary:"_11odjt55",tertiary:"_11odjt56",destructive:"_11odjt57",success:"_11odjt58",warning:"_11odjt59",info:"_11odjt5a"},size:{xs:"_11odjt5b",sm:"_11odjt5c",md:"_11odjt5d",lg:"_11odjt5e"}},defaultVariants:{variant:"contained",color:"primary",size:"md"},compoundVariants:[[{variant:"contained",color:"primary"},"_11odjt5f"],[{variant:"contained",color:"secondary"},"_11odjt5g"],[{variant:"contained",color:"tertiary"},"_11odjt5h"],[{variant:"contained",color:"destructive"},"_11odjt5i"],[{variant:"contained",color:"success"},"_11odjt5j"],[{variant:"contained",color:"warning"},"_11odjt5k"],[{variant:"contained",color:"info"},"_11odjt5l"],[{variant:"outlined",color:"primary"},"_11odjt5m"],[{variant:"outlined",color:"secondary"},"_11odjt5n"],[{variant:"outlined",color:"tertiary"},"_11odjt5o"],[{variant:"outlined",color:"destructive"},"_11odjt5p"],[{variant:"outlined",color:"success"},"_11odjt5q"],[{variant:"outlined",color:"warning"},"_11odjt5r"],[{variant:"outlined",color:"info"},"_11odjt5s"],[{variant:"ghost",color:"primary"},"_11odjt5t"],[{variant:"ghost",color:"secondary"},"_11odjt5u"],[{variant:"ghost",color:"tertiary"},"_11odjt5v"],[{variant:"ghost",color:"destructive"},"_11odjt5w"],[{variant:"ghost",color:"success"},"_11odjt5x"],[{variant:"ghost",color:"warning"},"_11odjt5y"],[{variant:"ghost",color:"info"},"_11odjt5z"]]})};exports.ICON_BUTTON_STYLES=t;
+//# sourceMappingURL=IconButton.css.cjs.map

package/dist/components/actions/icon-button/styles/IconButton.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/actions/icon-button/styles/IconButton.css.d.ts

@@ -0,0 +1,42 @@
+import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+export declare const ICON_BUTTON_STYLES: {
+    recipe: RuntimeFn<{
+        variant: {
+            contained: {};
+            outlined: {
+                backgroundColor: "transparent";
+            };
+            ghost: {
+                backgroundColor: "transparent";
+            };
+        };
+        color: {
+            primary: {};
+            secondary: {};
+            tertiary: {};
+            destructive: {};
+            success: {};
+            warning: {};
+            info: {};
+        };
+        size: {
+            xs: {
+                height: "2rem";
+                width: "2rem";
+            };
+            sm: {
+                height: "2.25rem";
+                width: "2.25rem";
+            };
+            md: {
+                height: "2.5rem";
+                width: "2.5rem";
+            };
+            lg: {
+                height: "2.75rem";
+                width: "2.75rem";
+            };
+        };
+    }>;
+};
+export type IconButtonRecipeVariants = NonNullable<RecipeVariants<typeof ICON_BUTTON_STYLES.recipe>>;

package/dist/components/actions/icon-button/styles/IconButton.css.js

@@ -0,0 +1,9 @@
+/* empty css                                            */
+/* empty css                                                           */
+/* empty css                              */
+import { createRuntimeFn as o } from "@vanilla-extract/recipes/createRuntimeFn";
+var n = { recipe: o({ defaultClassName: "_11odjt50", variantClassNames: { variant: { contained: "_11odjt51", outlined: "_11odjt52", ghost: "_11odjt53" }, color: { primary: "_11odjt54", secondary: "_11odjt55", tertiary: "_11odjt56", destructive: "_11odjt57", success: "_11odjt58", warning: "_11odjt59", info: "_11odjt5a" }, size: { xs: "_11odjt5b", sm: "_11odjt5c", md: "_11odjt5d", lg: "_11odjt5e" } }, defaultVariants: { variant: "contained", color: "primary", size: "md" }, compoundVariants: [[{ variant: "contained", color: "primary" }, "_11odjt5f"], [{ variant: "contained", color: "secondary" }, "_11odjt5g"], [{ variant: "contained", color: "tertiary" }, "_11odjt5h"], [{ variant: "contained", color: "destructive" }, "_11odjt5i"], [{ variant: "contained", color: "success" }, "_11odjt5j"], [{ variant: "contained", color: "warning" }, "_11odjt5k"], [{ variant: "contained", color: "info" }, "_11odjt5l"], [{ variant: "outlined", color: "primary" }, "_11odjt5m"], [{ variant: "outlined", color: "secondary" }, "_11odjt5n"], [{ variant: "outlined", color: "tertiary" }, "_11odjt5o"], [{ variant: "outlined", color: "destructive" }, "_11odjt5p"], [{ variant: "outlined", color: "success" }, "_11odjt5q"], [{ variant: "outlined", color: "warning" }, "_11odjt5r"], [{ variant: "outlined", color: "info" }, "_11odjt5s"], [{ variant: "ghost", color: "primary" }, "_11odjt5t"], [{ variant: "ghost", color: "secondary" }, "_11odjt5u"], [{ variant: "ghost", color: "tertiary" }, "_11odjt5v"], [{ variant: "ghost", color: "destructive" }, "_11odjt5w"], [{ variant: "ghost", color: "success" }, "_11odjt5x"], [{ variant: "ghost", color: "warning" }, "_11odjt5y"], [{ variant: "ghost", color: "info" }, "_11odjt5z"]] }) };
+export {
+  n as ICON_BUTTON_STYLES
+};
+//# sourceMappingURL=IconButton.css.js.map

package/dist/components/actions/icon-button/styles/IconButton.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/components/actions/icon-button/types/IconButton.props.d.ts

@@ -0,0 +1,12 @@
+import { IconButtonRecipeVariants } from '../styles/IconButton.css.ts';
+import type * as React from 'react';
+export type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label' | 'color'> & IconButtonRecipeVariants & {
+    /** Ref forwarded to the underlying `<button>` element. */
+    ref?: React.Ref<HTMLButtonElement>;
+    /** Iconify icon name rendered inside the button. */
+    icon: string;
+    /** Accessible label for the button (used as aria-label). */
+    'aria-label': string;
+    /** Whether the button is in an active/pressed state, e.g. when it triggers an open menu. */
+    active?: boolean;
+};

package/dist/components/actions/icon-button/types/IconButton.types.d.ts

@@ -0,0 +1,8 @@
+import { ButtonVariantShared, ButtonColorShared } from '../../_shared/buttons/types';
+import { ICON_BUTTON_SIZES } from '../constants';
+/** Visual style variants for the IconButton component. */
+export type IconButtonVariant = ButtonVariantShared;
+/** Color variants for the IconButton component, mapped to theme colors. */
+export type IconButtonColor = ButtonColorShared;
+/** Size variants for the IconButton component. Adds `xs` on top of the sizes shared with Button. */
+export type IconButtonSize = (typeof ICON_BUTTON_SIZES)[keyof typeof ICON_BUTTON_SIZES];

package/dist/components/actions/index.d.ts

@@ -0,0 +1,5 @@
+export * from './button';
+export * from './icon-button';
+export * from './toggle-button';
+export * from './toggle-icon-button';
+export * from './toggle-button-group';

package/dist/components/actions/toggle-button/ToggleButton.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),E=require("@base-ui/react/toggle"),N=require("./styles/ToggleButton.css.cjs"),r=require("../_shared/buttons/styles/buttonShared.css.cjs"),B=require("../_shared/buttons/constants/index.cjs"),c=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const O=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const m=require("./constants/toggleButtonSizes.const.cjs"),x=require("../../../utils/cn.cjs"),d=require("../_shared/buttons/constants/buttonSizes.const.cjs"),u=({variant:T,color:S,size:o=d.BUTTON_SIZES.md,radius:_,className:g,label:s,startIcon:t,endIcon:n,ref:q,...a})=>{const i=B.buttonSizeToIconSize[o],l=m.TOGGLE_BUTTON_SIZE_TO_FONT_SIZE[o];return e.jsxs(E.Toggle,{ref:q,className:x.cn(N.TOGGLE_BUTTON_STYLES.recipe({variant:T,color:S,size:o,radius:_}),g),...a,children:[t&&e.jsx(c,{icon:t,size:i,className:r.BUTTON_SHARED_STYLES.icon}),s&&e.jsx(O,{as:"span",fontSize:l,fontWeight:"medium",children:s}),n&&e.jsx(c,{icon:n,size:i,className:r.BUTTON_SHARED_STYLES.icon})]})};u.displayName="ToggleButton";module.exports=u;
+//# sourceMappingURL=ToggleButton.cjs.map

package/dist/components/actions/toggle-button/ToggleButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.cjs","sources":["../../../../src/components/actions/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle'\r\n\r\nimport { TOGGLE_BUTTON_STYLES } from '@components/actions/toggle-button/styles/ToggleButton.css.ts'\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { BUTTON_SIZES } from '@components/actions/_shared/buttons/constants'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport type { ToggleButtonProps } from '@components/actions/toggle-button/types/ToggleButton.props.ts'\r\nimport { buttonSizeToIconSize, TOGGLE_BUTTON_SIZE_TO_FONT_SIZE } from '@components/actions/toggle-button/constants'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\n\r\nconst ToggleButton: FC<ToggleButtonProps> = ({\r\n    variant,\r\n    color,\r\n    size = BUTTON_SIZES.md,\r\n    radius,\r\n    className,\r\n    label,\r\n    startIcon,\r\n    endIcon,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = buttonSizeToIconSize[size]\r\n    const fontSize = TOGGLE_BUTTON_SIZE_TO_FONT_SIZE[size]\r\n\r\n    return (\r\n        <BaseToggle\r\n            ref={ref}\r\n            className={cn(TOGGLE_BUTTON_STYLES.recipe({ variant, color, size, radius }), className)}\r\n            {...props}\r\n        >\r\n            {startIcon && (\r\n                <Icon\r\n                    icon={startIcon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            )}\r\n            {label && (\r\n                <Typography\r\n                    as={'span'}\r\n                    fontSize={fontSize}\r\n                    fontWeight={'medium'}\r\n                >\r\n                    {label}\r\n                </Typography>\r\n            )}\r\n            {endIcon && (\r\n                <Icon\r\n                    icon={endIcon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            )}\r\n        </BaseToggle>\r\n    )\r\n}\r\n\r\nToggleButton.displayName = 'ToggleButton'\r\n\r\nexport default ToggleButton\r\n"],"names":["ToggleButton","variant","color","size","BUTTON_SIZES","radius","className","label","startIcon","endIcon","ref","props","iconSize","buttonSizeToIconSize","fontSize","TOGGLE_BUTTON_SIZE_TO_FONT_SIZE","jsxs","BaseToggle","cn","TOGGLE_BUTTON_STYLES","jsx","Icon","BUTTON_SHARED_STYLES","Typography"],"mappings":"8mBAYMA,EAAsC,CAAC,CACzC,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAOC,EAAAA,aAAa,GACpB,OAAAC,EACA,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,qBAAqBV,CAAI,EACpCW,EAAWC,EAAAA,gCAAgCZ,CAAI,EAErD,OACIa,EAAAA,KAACC,EAAAA,OAAA,CACG,IAAAP,EACA,UAAWQ,EAAAA,GAAGC,uBAAqB,OAAO,CAAE,QAAAlB,EAAS,MAAAC,EAAO,KAAAC,EAAM,OAAAE,EAAQ,EAAGC,CAAS,EACrF,GAAGK,EAEH,SAAA,CAAAH,GACGY,EAAAA,IAACC,EAAA,CACG,KAAMb,EACN,KAAMI,EACN,UAAWU,EAAAA,qBAAqB,IAAA,CAAA,EAGvCf,GACGa,EAAAA,IAACG,EAAA,CACG,GAAI,OACJ,SAAAT,EACA,WAAY,SAEX,SAAAP,CAAA,CAAA,EAGRE,GACGW,EAAAA,IAACC,EAAA,CACG,KAAMZ,EACN,KAAMG,EACN,UAAWU,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAAA,CAIhB,EAEAtB,EAAa,YAAc"}

package/dist/components/actions/toggle-button/ToggleButton.d.ts

@@ -0,0 +1,4 @@
+import { ToggleButtonProps } from './types/ToggleButton.props.ts';
+import { FC } from 'react';
+declare const ToggleButton: FC<ToggleButtonProps>;
+export default ToggleButton;

package/dist/components/actions/toggle-button/ToggleButton.js

@@ -0,0 +1,66 @@
+import { jsxs as N, jsx as m } from "react/jsx-runtime";
+import { Toggle as g } from "@base-ui/react/toggle";
+import { TOGGLE_BUTTON_STYLES as l } from "./styles/ToggleButton.css.js";
+import { BUTTON_SHARED_STYLES as e } from "../_shared/buttons/styles/buttonShared.css.js";
+import { buttonSizeToIconSize as E } from "../_shared/buttons/constants/index.js";
+import p from "../../foundation/icon/Icon.js";
+import "../../foundation/icon/styles/Icon.css.js";
+import O from "../../foundation/typography/Typography.js";
+import "../../foundation/typography/styles/Typography.css.js";
+import { TOGGLE_BUTTON_SIZE_TO_FONT_SIZE as u } from "./constants/toggleButtonSizes.const.js";
+import { cn as B } from "../../../utils/cn.js";
+import { BUTTON_SIZES as d } from "../_shared/buttons/constants/buttonSizes.const.js";
+const h = ({
+  variant: n,
+  color: c,
+  size: o = d.md,
+  radius: s,
+  className: f,
+  label: r,
+  startIcon: i,
+  endIcon: t,
+  ref: S,
+  ...a
+}) => {
+  const T = E[o], _ = u[o];
+  return /* @__PURE__ */ N(
+    g,
+    {
+      ref: S,
+      className: B(l.recipe({ variant: n, color: c, size: o, radius: s }), f),
+      ...a,
+      children: [
+        i && /* @__PURE__ */ m(
+          p,
+          {
+            icon: i,
+            size: T,
+            className: e.icon
+          }
+        ),
+        r && /* @__PURE__ */ m(
+          O,
+          {
+            as: "span",
+            fontSize: _,
+            fontWeight: "medium",
+            children: r
+          }
+        ),
+        t && /* @__PURE__ */ m(
+          p,
+          {
+            icon: t,
+            size: T,
+            className: e.icon
+          }
+        )
+      ]
+    }
+  );
+};
+h.displayName = "ToggleButton";
+export {
+  h as default
+};
+//# sourceMappingURL=ToggleButton.js.map

package/dist/components/actions/toggle-button/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","sources":["../../../../src/components/actions/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle'\r\n\r\nimport { TOGGLE_BUTTON_STYLES } from '@components/actions/toggle-button/styles/ToggleButton.css.ts'\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { BUTTON_SIZES } from '@components/actions/_shared/buttons/constants'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport type { ToggleButtonProps } from '@components/actions/toggle-button/types/ToggleButton.props.ts'\r\nimport { buttonSizeToIconSize, TOGGLE_BUTTON_SIZE_TO_FONT_SIZE } from '@components/actions/toggle-button/constants'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\n\r\nconst ToggleButton: FC<ToggleButtonProps> = ({\r\n    variant,\r\n    color,\r\n    size = BUTTON_SIZES.md,\r\n    radius,\r\n    className,\r\n    label,\r\n    startIcon,\r\n    endIcon,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = buttonSizeToIconSize[size]\r\n    const fontSize = TOGGLE_BUTTON_SIZE_TO_FONT_SIZE[size]\r\n\r\n    return (\r\n        <BaseToggle\r\n            ref={ref}\r\n            className={cn(TOGGLE_BUTTON_STYLES.recipe({ variant, color, size, radius }), className)}\r\n            {...props}\r\n        >\r\n            {startIcon && (\r\n                <Icon\r\n                    icon={startIcon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            )}\r\n            {label && (\r\n                <Typography\r\n                    as={'span'}\r\n                    fontSize={fontSize}\r\n                    fontWeight={'medium'}\r\n                >\r\n                    {label}\r\n                </Typography>\r\n            )}\r\n            {endIcon && (\r\n                <Icon\r\n                    icon={endIcon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            )}\r\n        </BaseToggle>\r\n    )\r\n}\r\n\r\nToggleButton.displayName = 'ToggleButton'\r\n\r\nexport default ToggleButton\r\n"],"names":["ToggleButton","variant","color","size","BUTTON_SIZES","radius","className","label","startIcon","endIcon","ref","props","iconSize","buttonSizeToIconSize","fontSize","TOGGLE_BUTTON_SIZE_TO_FONT_SIZE","jsxs","BaseToggle","cn","TOGGLE_BUTTON_STYLES","jsx","Icon","BUTTON_SHARED_STYLES","Typography"],"mappings":";;;;;;;;;;;;AAYA,MAAMA,IAAsC,CAAC;AAAA,EACzC,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAOC,EAAa;AAAA,EACpB,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAWC,EAAqBV,CAAI,GACpCW,IAAWC,EAAgCZ,CAAI;AAErD,SACI,gBAAAa;AAAA,IAACC;AAAAA,IAAA;AAAA,MACG,KAAAP;AAAA,MACA,WAAWQ,EAAGC,EAAqB,OAAO,EAAE,SAAAlB,GAAS,OAAAC,GAAO,MAAAC,GAAM,QAAAE,GAAQ,GAAGC,CAAS;AAAA,MACrF,GAAGK;AAAA,MAEH,UAAA;AAAA,QAAAH,KACG,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,MAAMb;AAAA,YACN,MAAMI;AAAA,YACN,WAAWU,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGvCf,KACG,gBAAAa;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,UAAAT;AAAA,YACA,YAAY;AAAA,YAEX,UAAAP;AAAA,UAAA;AAAA,QAAA;AAAA,QAGRE,KACG,gBAAAW;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,MAAMZ;AAAA,YACN,MAAMG;AAAA,YACN,WAAWU,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC;AAAA,IAAA;AAAA,EAAA;AAIhB;AAEAtB,EAAa,cAAc;"}

package/dist/components/actions/toggle-button/constants/index.d.ts

@@ -0,0 +1,2 @@
+export { buttonSizeToIconSize } from '../../_shared/buttons/constants';
+export { TOGGLE_BUTTON_SIZE_TO_FONT_SIZE } from './toggleButtonSizes.const.ts';

package/dist/components/actions/toggle-button/constants/toggleButtonSizes.const.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("../../_shared/buttons/constants/buttonSizes.const.cjs"),_={[T.BUTTON_SIZES.sm]:"sm",[T.BUTTON_SIZES.md]:"md",[T.BUTTON_SIZES.lg]:"lg"};exports.TOGGLE_BUTTON_SIZE_TO_FONT_SIZE=_;
+//# sourceMappingURL=toggleButtonSizes.const.cjs.map

package/dist/components/actions/toggle-button/constants/toggleButtonSizes.const.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggleButtonSizes.const.cjs","sources":["../../../../../src/components/actions/toggle-button/constants/toggleButtonSizes.const.ts"],"sourcesContent":["import type { ToggleButtonSize } from '@components/actions/toggle-button/types/ToggleButton.types.ts'\r\nimport { BUTTON_SIZES } from '@components/actions/_shared/buttons/constants'\r\nimport type { TypographySize } from '@components/foundation/typography'\r\n\r\nexport const TOGGLE_BUTTON_SIZE_TO_FONT_SIZE: Record<NonNullable<ToggleButtonSize>, TypographySize> = {\r\n    [BUTTON_SIZES.sm]: 'sm',\r\n    [BUTTON_SIZES.md]: 'md',\r\n    [BUTTON_SIZES.lg]: 'lg',\r\n}\r\n"],"names":["TOGGLE_BUTTON_SIZE_TO_FONT_SIZE","BUTTON_SIZES"],"mappings":"yJAIaA,EAAyF,CAClG,CAACC,EAAAA,aAAa,EAAE,EAAG,KACnB,CAACA,EAAAA,aAAa,EAAE,EAAG,KACnB,CAACA,EAAAA,aAAa,EAAE,EAAG,IACvB"}

package/dist/components/actions/toggle-button/constants/toggleButtonSizes.const.d.ts

@@ -0,0 +1,3 @@
+import { ToggleButtonSize } from '../types/ToggleButton.types.ts';
+import { TypographySize } from '../../../foundation/typography';
+export declare const TOGGLE_BUTTON_SIZE_TO_FONT_SIZE: Record<NonNullable<ToggleButtonSize>, TypographySize>;

package/dist/components/actions/toggle-button/constants/toggleButtonSizes.const.js

@@ -0,0 +1,10 @@
+import { BUTTON_SIZES as T } from "../../_shared/buttons/constants/buttonSizes.const.js";
+const _ = {
+  [T.sm]: "sm",
+  [T.md]: "md",
+  [T.lg]: "lg"
+};
+export {
+  _ as TOGGLE_BUTTON_SIZE_TO_FONT_SIZE
+};
+//# sourceMappingURL=toggleButtonSizes.const.js.map

package/dist/components/actions/toggle-button/constants/toggleButtonSizes.const.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggleButtonSizes.const.js","sources":["../../../../../src/components/actions/toggle-button/constants/toggleButtonSizes.const.ts"],"sourcesContent":["import type { ToggleButtonSize } from '@components/actions/toggle-button/types/ToggleButton.types.ts'\r\nimport { BUTTON_SIZES } from '@components/actions/_shared/buttons/constants'\r\nimport type { TypographySize } from '@components/foundation/typography'\r\n\r\nexport const TOGGLE_BUTTON_SIZE_TO_FONT_SIZE: Record<NonNullable<ToggleButtonSize>, TypographySize> = {\r\n    [BUTTON_SIZES.sm]: 'sm',\r\n    [BUTTON_SIZES.md]: 'md',\r\n    [BUTTON_SIZES.lg]: 'lg',\r\n}\r\n"],"names":["TOGGLE_BUTTON_SIZE_TO_FONT_SIZE","BUTTON_SIZES"],"mappings":";AAIO,MAAMA,IAAyF;AAAA,EAClG,CAACC,EAAa,EAAE,GAAG;AAAA,EACnB,CAACA,EAAa,EAAE,GAAG;AAAA,EACnB,CAACA,EAAa,EAAE,GAAG;AACvB;"}

package/dist/components/actions/toggle-button/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ToggleButton } from './ToggleButton.tsx';
+export { TOGGLE_BUTTON_STYLES } from './styles/ToggleButton.css.ts';
+export type { ToggleButtonProps } from './types/ToggleButton.props.ts';
+export type { ToggleButtonColor, ToggleButtonSize, ToggleButtonRadius, ToggleButtonVariant } from './types/ToggleButton.types.ts';

package/dist/components/actions/toggle-button/styles/ToggleButton.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                                                             */;/* empty css                                  */const d=require("@vanilla-extract/recipes/createRuntimeFn");var u={recipe:d.createRuntimeFn({defaultClassName:"u8dd4f0",variantClassNames:{variant:{outlined:"u8dd4f1",ghost:"u8dd4f2"},color:{primary:"u8dd4f3",secondary:"u8dd4f4",tertiary:"u8dd4f5",destructive:"u8dd4f6",success:"u8dd4f7",warning:"u8dd4f8",info:"u8dd4f9"},size:{sm:"u8dd4fa",md:"u8dd4fb",lg:"u8dd4fc"},radius:{none:"u8dd4fd",xs:"u8dd4fe",sm:"u8dd4ff",md:"u8dd4fg",lg:"u8dd4fh",xl:"u8dd4fi","2xl":"u8dd4fj",full:"u8dd4fk"}},defaultVariants:{variant:"outlined",color:"primary",size:"md",radius:"sm"},compoundVariants:[]})};exports.TOGGLE_BUTTON_STYLES=u;
+//# sourceMappingURL=ToggleButton.css.cjs.map

package/dist/components/actions/toggle-button/styles/ToggleButton.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/actions/toggle-button/styles/ToggleButton.css.d.ts

@@ -0,0 +1,217 @@
+import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+export declare const TOGGLE_BUTTON_STYLES: {
+    recipe: RuntimeFn<{
+        variant: {
+            outlined: {
+                borderColor: `var(--${string})`;
+            };
+            ghost: {
+                borderColor: "transparent";
+            };
+        };
+        color: {
+            primary: {
+                color: `var(--${string})`;
+                selectors: {
+                    '&:hover': {
+                        color: `var(--${string})`;
+                        backgroundColor: `var(--${string})`;
+                    };
+                    '&:active': {
+                        color: `var(--${string})`;
+                        backgroundColor: `var(--${string})`;
+                    };
+                    "&[data-pressed]": {
+                        backgroundColor: `var(--${string})`;
+                        color: `var(--${string})`;
+                    };
+                    "&[data-pressed]:hover": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                    "&[data-pressed]:active": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                };
+            };
+            secondary: {
+                color: `var(--${string})`;
+                selectors: {
+                    '&:hover': {
+                        color: `var(--${string})`;
+                        backgroundColor: `var(--${string})`;
+                    };
+                    '&:active': {
+                        color: `var(--${string})`;
+                        backgroundColor: `var(--${string})`;
+                    };
+                    "&[data-pressed]": {
+                        backgroundColor: `var(--${string})`;
+                        color: `var(--${string})`;
+                    };
+                    "&[data-pressed]:hover": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                    "&[data-pressed]:active": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                };
+            };
+            tertiary: {
+                color: `var(--${string})`;
+                selectors: {
+                    '&:hover': {
+                        color: `var(--${string})`;
+                        backgroundColor: `var(--${string})`;
+                    };
+                    '&:active': {
+                        color: `var(--${string})`;
+                        backgroundColor: `var(--${string})`;
+                    };
+                    "&[data-pressed]": {
+                        backgroundColor: `var(--${string})`;
+                        color: `var(--${string})`;
+                    };
+                    "&[data-pressed]:hover": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                    "&[data-pressed]:active": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                };
+            };
+            destructive: {
+                color: `var(--${string})`;
+                selectors: {
+                    '&:hover': {
+                        color: `var(--${string})`;
+                        backgroundColor: `var(--${string})`;
+                    };
+                    '&:active': {
+                        color: `var(--${string})`;
+                        backgroundColor: `var(--${string})`;
+                    };
+                    "&[data-pressed]": {
+                        backgroundColor: `var(--${string})`;
+                        color: `var(--${string})`;
+                    };
+                    "&[data-pressed]:hover": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                    "&[data-pressed]:active": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                };
+            };
+            success: {
+                color: `var(--${string})`;
+                selectors: {
+                    '&:hover': {
+                        color: `var(--${string})`;
+                        backgroundColor: `var(--${string})`;
+                    };
+                    '&:active': {
+                        color: `var(--${string})`;
+                        backgroundColor: `var(--${string})`;
+                    };
+                    "&[data-pressed]": {
+                        backgroundColor: `var(--${string})`;
+                        color: `var(--${string})`;
+                    };
+                    "&[data-pressed]:hover": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                    "&[data-pressed]:active": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                };
+            };
+            warning: {
+                color: `var(--${string})`;
+                selectors: {
+                    '&:hover': {
+                        color: `var(--${string})`;
+                        backgroundColor: `var(--${string})`;
+                    };
+                    '&:active': {
+                        color: `var(--${string})`;
+                        backgroundColor: `var(--${string})`;
+                    };
+                    "&[data-pressed]": {
+                        backgroundColor: `var(--${string})`;
+                        color: `var(--${string})`;
+                    };
+                    "&[data-pressed]:hover": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                    "&[data-pressed]:active": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                };
+            };
+            info: {
+                color: `var(--${string})`;
+                selectors: {
+                    '&:hover': {
+                        color: `var(--${string})`;
+                        backgroundColor: `var(--${string})`;
+                    };
+                    '&:active': {
+                        color: `var(--${string})`;
+                        backgroundColor: `var(--${string})`;
+                    };
+                    "&[data-pressed]": {
+                        backgroundColor: `var(--${string})`;
+                        color: `var(--${string})`;
+                    };
+                    "&[data-pressed]:hover": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                    "&[data-pressed]:active": {
+                        backgroundColor: `var(--${string})`;
+                    };
+                };
+            };
+        };
+        size: {
+            sm: {
+                height: "2.25rem";
+                paddingInline: `var(--${string})`;
+            };
+            md: {
+                height: "2.5rem";
+                paddingInline: `var(--${string})`;
+            };
+            lg: {
+                height: "2.75rem";
+                paddingInline: `var(--${string})`;
+            };
+        };
+        radius: {
+            none: {
+                borderRadius: "0";
+            };
+            xs: {
+                borderRadius: "0.25rem";
+            };
+            sm: {
+                borderRadius: "0.375rem";
+            };
+            md: {
+                borderRadius: "0.5rem";
+            };
+            lg: {
+                borderRadius: "0.625rem";
+            };
+            xl: {
+                borderRadius: "0.875rem";
+            };
+            '2xl': {
+                borderRadius: "1.25rem";
+            };
+            full: {
+                borderRadius: "9999px";
+            };
+        };
+    }>;
+};
+export type ToggleButtonRecipeVariants = NonNullable<RecipeVariants<typeof TOGGLE_BUTTON_STYLES.recipe>>;

package/dist/components/actions/toggle-button/styles/ToggleButton.css.js

@@ -0,0 +1,9 @@
+/* empty css                                            */
+/* empty css                                                           */
+/* empty css                                */
+import { createRuntimeFn as d } from "@vanilla-extract/recipes/createRuntimeFn";
+var i = { recipe: d({ defaultClassName: "u8dd4f0", variantClassNames: { variant: { outlined: "u8dd4f1", ghost: "u8dd4f2" }, color: { primary: "u8dd4f3", secondary: "u8dd4f4", tertiary: "u8dd4f5", destructive: "u8dd4f6", success: "u8dd4f7", warning: "u8dd4f8", info: "u8dd4f9" }, size: { sm: "u8dd4fa", md: "u8dd4fb", lg: "u8dd4fc" }, radius: { none: "u8dd4fd", xs: "u8dd4fe", sm: "u8dd4ff", md: "u8dd4fg", lg: "u8dd4fh", xl: "u8dd4fi", "2xl": "u8dd4fj", full: "u8dd4fk" } }, defaultVariants: { variant: "outlined", color: "primary", size: "md", radius: "sm" }, compoundVariants: [] }) };
+export {
+  i as TOGGLE_BUTTON_STYLES
+};
+//# sourceMappingURL=ToggleButton.css.js.map

package/dist/components/actions/toggle-button/styles/ToggleButton.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/components/actions/toggle-button/types/ToggleButton.props.d.ts

@@ -0,0 +1,13 @@
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleButtonRecipeVariants } from '../styles/ToggleButton.css.ts';
+import type * as React from 'react';
+export type ToggleButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'> & ToggleButtonRecipeVariants & Pick<Toggle.Props, 'pressed' | 'defaultPressed' | 'onPressedChange' | 'value' | 'disabled'> & {
+    /** Ref forwarded to the underlying `<button>` element. */
+    ref?: React.Ref<HTMLButtonElement>;
+    /** The text content rendered inside the toggle button. */
+    label?: string;
+    /** Iconify icon name rendered before the label. Size and color are derived from the toggle button state and size. */
+    startIcon?: string;
+    /** Iconify icon name rendered after the label. Size and color are derived from the toggle button state and size. */
+    endIcon?: string;
+};

package/dist/components/actions/toggle-button/types/ToggleButton.types.d.ts

@@ -0,0 +1,10 @@
+import { ButtonColorShared, ButtonSizeShared } from '../../_shared/buttons/types';
+import { Radius } from '../../../../theme/tokens/radii.ts';
+/** Color variants for the ToggleButton component, mapped to theme colors. */
+export type ToggleButtonColor = ButtonColorShared;
+/** Size variants for the ToggleButton component. */
+export type ToggleButtonSize = ButtonSizeShared;
+/** Border radius variants for the ToggleButton component. */
+export type ToggleButtonRadius = keyof Radius;
+/** Visual style variants for the ToggleButton component. */
+export type ToggleButtonVariant = 'ghost' | 'outlined';

package/dist/components/actions/toggle-button-group/ToggleButtonGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";const _=require("react/jsx-runtime"),I=require("react"),b=require("@base-ui/react/toggle-group"),j=require("./components/toggle-button-group-icon-item/ToggleButtonGroupIconItem.cjs"),B=require("./components/toggle-button-group-item/ToggleButtonGroupItem.cjs"),h=require("./styles/ToggleButtonGroup.css.cjs"),S=require("../../../theme/contract.css.cjs"),y=require("../../../utils/cn.cjs");function N(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const R=N(I),n=(({className:e,orientation:o="horizontal",backgroundColor:t,bordered:r=!0,requireSelection:a=!0,style:s,value:c,defaultValue:i,onValueChange:g,children:p,ref:f,...m})=>{const[T,G]=R.useState(i??c??[]),l=c!==void 0,d=l?c:T,q=(u,O)=>{a&&u.length===0||(l||G(u),g?.(u,O))};return _.jsx(b.ToggleGroup,{ref:f,className:y.cn(h.TOGGLE_BUTTON_GROUP_STYLES.recipe({orientation:o,bordered:r}),e),orientation:o,value:d,onValueChange:q,style:t?{...s,backgroundColor:S.vars.color[t]}:s,...m,children:p})});n.displayName="ToggleButtonGroup";n.Item=B;n.IconItem=j;module.exports=n;
+//# sourceMappingURL=ToggleButtonGroup.cjs.map

package/dist/components/actions/toggle-button-group/ToggleButtonGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroup.cjs","sources":["../../../../src/components/actions/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import * as React from 'react'\r\n\r\nimport {\r\n    ToggleGroup as BaseToggleGroup,\r\n    type ToggleGroup,\r\n} from '@base-ui/react/toggle-group'\r\n\r\nimport ToggleButtonGroupIconItem from '@components/actions/toggle-button-group/components/toggle-button-group-icon-item/ToggleButtonGroupIconItem.tsx'\r\nimport ToggleButtonGroupItem from '@components/actions/toggle-button-group/components/toggle-button-group-item/ToggleButtonGroupItem.tsx'\r\nimport { TOGGLE_BUTTON_GROUP_STYLES } from '@components/actions/toggle-button-group/styles/ToggleButtonGroup.css.ts'\r\nimport type { ToggleButtonGroupCompound } from '@components/actions/toggle-button-group/types/ToggleButtonGroupCompound.ts'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * A group of toggle buttons where one or many buttons can be pressed at a time.\r\n * Built on top of `@base-ui/react/toggle-group`.\r\n *\r\n * Use `ToggleButtonGroup.Item` for labelled options or `ToggleButtonGroup.IconItem`\r\n * for icon-only options so the styling is cohesive with the group container.\r\n *\r\n * @example\r\n * ```tsx\r\n * <ToggleButtonGroup value={value} onValueChange={setValue}>\r\n *   <ToggleButtonGroup.Item value=\"bold\" label=\"Bold\" />\r\n *   <ToggleButtonGroup.Item value=\"italic\" label=\"Italic\" />\r\n * </ToggleButtonGroup>\r\n * ```\r\n */\r\nconst ToggleButtonGroup = (({\r\n    className,\r\n    orientation = 'horizontal',\r\n    backgroundColor,\r\n    bordered = true,\r\n    requireSelection = true,\r\n    style,\r\n    value,\r\n    defaultValue,\r\n    onValueChange,\r\n    children,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const [internalValue, setInternalValue] = React.useState<readonly string[]>(\r\n        defaultValue ?? value ?? [],\r\n    )\r\n    const isControlled = value !== undefined\r\n    const currentValue = isControlled ? value : internalValue\r\n\r\n    const handleValueChange = (\r\n        newValue: string[],\r\n        eventDetails: ToggleGroup.ChangeEventDetails,\r\n    ) => {\r\n        if (requireSelection && newValue.length === 0) {\r\n            return\r\n        }\r\n        if (!isControlled) {\r\n            setInternalValue(newValue)\r\n        }\r\n        onValueChange?.(newValue, eventDetails)\r\n    }\r\n\r\n    return (\r\n        <BaseToggleGroup\r\n            ref={ref}\r\n            className={cn(\r\n                TOGGLE_BUTTON_GROUP_STYLES.recipe({ orientation, bordered }),\r\n                className,\r\n            )}\r\n            orientation={orientation}\r\n            value={currentValue}\r\n            onValueChange={handleValueChange}\r\n            style={\r\n                backgroundColor\r\n                    ? { ...style, backgroundColor: vars.color[backgroundColor] }\r\n                    : style\r\n            }\r\n            {...props}\r\n        >\r\n            {children}\r\n        </BaseToggleGroup>\r\n    )\r\n}) as ToggleButtonGroupCompound\r\n\r\nToggleButtonGroup.displayName = 'ToggleButtonGroup'\r\nToggleButtonGroup.Item = ToggleButtonGroupItem\r\nToggleButtonGroup.IconItem = ToggleButtonGroupIconItem\r\n\r\nexport default ToggleButtonGroup\r\n"],"names":["ToggleButtonGroup","className","orientation","backgroundColor","bordered","requireSelection","style","value","defaultValue","onValueChange","children","ref","props","internalValue","setInternalValue","React","isControlled","currentValue","handleValueChange","newValue","eventDetails","jsx","BaseToggleGroup","cn","TOGGLE_BUTTON_GROUP_STYLES","vars","ToggleButtonGroupItem","ToggleButtonGroupIconItem"],"mappings":"2qBA6BMA,GAAqB,CAAC,CACxB,UAAAC,EACA,YAAAC,EAAc,aACd,gBAAAC,EACA,SAAAC,EAAW,GACX,iBAAAC,EAAmB,GACnB,MAAAC,EACA,MAAAC,EACA,aAAAC,EACA,cAAAC,EACA,SAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,KAAM,CAACC,EAAeC,CAAgB,EAAIC,EAAM,SAC5CP,GAAgBD,GAAS,CAAA,CAAC,EAExBS,EAAeT,IAAU,OACzBU,EAAeD,EAAeT,EAAQM,EAEtCK,EAAoB,CACtBC,EACAC,IACC,CACGf,GAAoBc,EAAS,SAAW,IAGvCH,GACDF,EAAiBK,CAAQ,EAE7BV,IAAgBU,EAAUC,CAAY,EAC1C,EAEA,OACIC,EAAAA,IAACC,EAAAA,YAAA,CACG,IAAAX,EACA,UAAWY,EAAAA,GACPC,EAAAA,2BAA2B,OAAO,CAAE,YAAAtB,EAAa,SAAAE,EAAU,EAC3DH,CAAA,EAEJ,YAAAC,EACA,MAAOe,EACP,cAAeC,EACf,MACIf,EACM,CAAE,GAAGG,EAAO,gBAAiBmB,EAAAA,KAAK,MAAMtB,CAAe,CAAA,EACvDG,EAET,GAAGM,EAEH,SAAAF,CAAA,CAAA,CAGb,GAEAV,EAAkB,YAAc,oBAChCA,EAAkB,KAAO0B,EACzB1B,EAAkB,SAAW2B"}

package/dist/components/actions/toggle-button-group/ToggleButtonGroup.d.ts

@@ -0,0 +1,18 @@
+import { ToggleButtonGroupCompound } from './types/ToggleButtonGroupCompound.ts';
+/**
+ * A group of toggle buttons where one or many buttons can be pressed at a time.
+ * Built on top of `@base-ui/react/toggle-group`.
+ *
+ * Use `ToggleButtonGroup.Item` for labelled options or `ToggleButtonGroup.IconItem`
+ * for icon-only options so the styling is cohesive with the group container.
+ *
+ * @example
+ * ```tsx
+ * <ToggleButtonGroup value={value} onValueChange={setValue}>
+ *   <ToggleButtonGroup.Item value="bold" label="Bold" />
+ *   <ToggleButtonGroup.Item value="italic" label="Italic" />
+ * </ToggleButtonGroup>
+ * ```
+ */
+declare const ToggleButtonGroup: ToggleButtonGroupCompound;
+export default ToggleButtonGroup;