@choco-vanille/ui 1.1.2 → 1.2.0

package/README.md

@@ -57,7 +57,7 @@ export function Example() {
 |---|---|
 | **Foundation** | `Icon`, `Typography` |
 | **Layout** | `Box`, `Flex`, `Grid`, `Image`, `Separator`, `Form`, `Fieldset`, `Legend` |
-| **Actions** | `Button`, `IconButton`, `ToggleButton`, `ToggleIconButton`, `ToggleButtonGroup` |
+| **Actions** | `Button`, `IconButton`, `Toggle`, `ToggleGroup` |
 | **Forms** | `Autocomplete`, `Calendar`, `Checkbox`, `DatePicker`, `RadioGroup`, `Select`, `Switch`, `TextArea`, `TextField` |
 | **Data Display** | `Avatar`, `AvatarGroup`, `Badge`, `Table` |
 | **Surfaces** | `Accordion`, `Card`, `Collapsible` |
@@ -117,4 +117,3 @@ component that references it through `vars`.
 ## License
 
 [MIT](./LICENSE)
-

package/dist/components/actions/button/styles/Button.css.d.ts

@@ -1,4 +1,4 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import { RuntimeFn } from '@vanilla-extract/recipes';
 export declare const BUTTON_STYLES: {
     recipe: RuntimeFn<{
         variant: {
@@ -35,4 +35,3 @@ export declare const BUTTON_STYLES: {
         };
     }>;
 };
-export type ButtonRecipeVariants = NonNullable<RecipeVariants<typeof BUTTON_STYLES.recipe>>;

package/dist/components/actions/button/types/Button.props.d.ts

@@ -1,6 +1,12 @@
-import { ButtonRecipeVariants } from '../styles/Button.css.ts';
+import { ButtonColor, ButtonSize, ButtonVariant } from './Button.types.ts';
 import type * as React from 'react';
-export type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'> & ButtonRecipeVariants & {
+export type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'> & {
+    /** Visual style variant of the button. */
+    variant?: ButtonVariant;
+    /** Theme color of the button. */
+    color?: ButtonColor;
+    /** Button size. Defaults to `md`. */
+    size?: ButtonSize;
     /** Ref forwarded to the underlying `<button>` element. */
     ref?: React.Ref<HTMLButtonElement>;
     /** The text content rendered inside the button via the Typography component. */

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

@@ -0,0 +1,18 @@
+export declare const ICON_BUTTON_SIZE_VARIANTS: {
+    readonly xs: {
+        readonly height: "2rem";
+        readonly width: "2rem";
+    };
+    readonly sm: {
+        readonly height: "2.25rem";
+        readonly width: "2.25rem";
+    };
+    readonly md: {
+        readonly height: "2.5rem";
+        readonly width: "2.5rem";
+    };
+    readonly lg: {
+        readonly height: "2.75rem";
+        readonly width: "2.75rem";
+    };
+};

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

@@ -1,2 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../../_shared/buttons/constants/buttonSizes.const.cjs"),O={md:_.BUTTON_SIZES.md},I={xs:"xs",sm:"sm",md:"md",lg:"lg"};exports.ICON_BUTTON_SIZES=O;exports.ICON_BUTTON_SIZE_TO_ICON_SIZE=I;
 //# sourceMappingURL=iconButtonSizes.const.cjs.map

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

@@ -1 +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"}
+{"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,CAG7B,GAAIC,EAAAA,aAAa,EAErB,EAIaC,EAA+E,CACxF,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACR"}

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

@@ -1,17 +1,14 @@
 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 = {
+const I = {
+  md: m.md
+}, O = {
   xs: "xs",
   sm: "sm",
   md: "md",
   lg: "lg"
 };
 export {
-  _ as ICON_BUTTON_SIZES,
-  I as ICON_BUTTON_SIZE_TO_ICON_SIZE
+  I as ICON_BUTTON_SIZES,
+  O as ICON_BUTTON_SIZE_TO_ICON_SIZE
 };
 //# sourceMappingURL=iconButtonSizes.const.js.map

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

@@ -1 +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;"}
+{"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,EAG7B,IAAIC,EAAa;AAErB,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

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

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

@@ -20,21 +20,21 @@ export declare const ICON_BUTTON_STYLES: {
             info: {};
         };
         size: {
-            xs: {
-                height: "2rem";
-                width: "2rem";
+            readonly xs: {
+                readonly height: "2rem";
+                readonly width: "2rem";
             };
-            sm: {
-                height: "2.25rem";
-                width: "2.25rem";
+            readonly sm: {
+                readonly height: "2.25rem";
+                readonly width: "2.25rem";
             };
-            md: {
-                height: "2.5rem";
-                width: "2.5rem";
+            readonly md: {
+                readonly height: "2.5rem";
+                readonly width: "2.5rem";
             };
-            lg: {
-                height: "2.75rem";
-                width: "2.75rem";
+            readonly lg: {
+                readonly height: "2.75rem";
+                readonly width: "2.75rem";
             };
         };
     }>;

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

@@ -1,6 +1,10 @@
-import { IconButtonRecipeVariants } from '../styles/IconButton.css.ts';
+import { IconButtonColor, IconButtonSize, IconButtonVariant } from './IconButton.types.ts';
 import type * as React from 'react';
-export type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label' | 'color'> & IconButtonRecipeVariants & {
+export type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label' | 'color'> & {
+    variant?: IconButtonVariant;
+    color?: IconButtonColor;
+    /** Button size. Defaults to `md`. */
+    size?: IconButtonSize;
     /** Ref forwarded to the underlying `<button>` element. */
     ref?: React.Ref<HTMLButtonElement>;
     /** Iconify icon name rendered inside the button. */

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

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

package/dist/components/actions/toggle/Toggle.cjs

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

package/dist/components/actions/toggle/Toggle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.cjs","sources":["../../../../src/components/actions/toggle/Toggle.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle'\r\n\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { buttonSizeToIconSize } from '@components/actions/_shared/buttons/constants'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { TOGGLE_SIZE_TO_FONT_SIZE } from '@components/actions/toggle/constants/toggleSizes.const.ts'\r\nimport { TOGGLE_STYLES } from '@components/actions/toggle/styles/Toggle.css.ts'\r\nimport type { ToggleProps } from '@components/actions/toggle/types/Toggle.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\n\r\nconst Toggle: FC<ToggleProps> = ({\r\n    variant,\r\n    color,\r\n    size = 'md',\r\n    radius,\r\n    className,\r\n    label,\r\n    icon,\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_SIZE_TO_FONT_SIZE[size]\r\n\r\n    return (\r\n        <BaseToggle\r\n            ref={ref}\r\n            data-icon-only={icon ? '' : undefined}\r\n            className={cn(TOGGLE_STYLES.recipe({ variant, color, size, radius }), className)}\r\n            {...props}\r\n        >\r\n            {icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : (\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                    <Typography\r\n                        as={'span'}\r\n                        fontSize={fontSize}\r\n                        fontWeight={'medium'}\r\n                    >\r\n                        {label}\r\n                    </Typography>\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                </>\r\n            )}\r\n        </BaseToggle>\r\n    )\r\n}\r\n\r\nToggle.displayName = 'Toggle'\r\n\r\nexport default Toggle\r\n"],"names":["Toggle","variant","color","size","radius","className","label","icon","startIcon","endIcon","ref","props","iconSize","buttonSizeToIconSize","fontSize","TOGGLE_SIZE_TO_FONT_SIZE","jsx","BaseToggle","cn","TOGGLE_STYLES","Icon","BUTTON_SHARED_STYLES","jsxs","Fragment","Typography"],"mappings":"kiBAYMA,EAA0B,CAAC,CAC7B,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,KACP,OAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,qBAAqBV,CAAI,EACpCW,EAAWC,EAAAA,yBAAyBZ,CAAI,EAE9C,OACIa,EAAAA,IAACC,EAAAA,OAAA,CACG,IAAAP,EACA,iBAAgBH,EAAO,GAAK,OAC5B,UAAWW,EAAAA,GAAGC,gBAAc,OAAO,CAAE,QAAAlB,EAAS,MAAAC,EAAO,KAAAC,EAAM,OAAAC,EAAQ,EAAGC,CAAS,EAC9E,GAAGM,EAEH,SAAAJ,EACGS,EAAAA,IAACI,EAAA,CACG,KAAAb,EACA,KAAMK,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,EAGpCC,EAAAA,KAAAC,WAAA,CACK,SAAA,CAAAf,GACGQ,EAAAA,IAACI,EAAA,CACG,KAAMZ,EACN,KAAMI,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,EAGxCL,EAAAA,IAACQ,EAAA,CACG,GAAI,OACJ,SAAAV,EACA,WAAY,SAEX,SAAAR,CAAA,CAAA,EAEJG,GACGO,EAAAA,IAACI,EAAA,CACG,KAAMX,EACN,KAAMG,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAER,CAAA,CAAA,CAIhB,EAEArB,EAAO,YAAc"}

package/dist/components/actions/toggle/Toggle.d.ts

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

package/dist/components/actions/toggle/Toggle.js

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

package/dist/components/actions/toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sources":["../../../../src/components/actions/toggle/Toggle.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle'\r\n\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { buttonSizeToIconSize } from '@components/actions/_shared/buttons/constants'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { TOGGLE_SIZE_TO_FONT_SIZE } from '@components/actions/toggle/constants/toggleSizes.const.ts'\r\nimport { TOGGLE_STYLES } from '@components/actions/toggle/styles/Toggle.css.ts'\r\nimport type { ToggleProps } from '@components/actions/toggle/types/Toggle.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\n\r\nconst Toggle: FC<ToggleProps> = ({\r\n    variant,\r\n    color,\r\n    size = 'md',\r\n    radius,\r\n    className,\r\n    label,\r\n    icon,\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_SIZE_TO_FONT_SIZE[size]\r\n\r\n    return (\r\n        <BaseToggle\r\n            ref={ref}\r\n            data-icon-only={icon ? '' : undefined}\r\n            className={cn(TOGGLE_STYLES.recipe({ variant, color, size, radius }), className)}\r\n            {...props}\r\n        >\r\n            {icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : (\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                    <Typography\r\n                        as={'span'}\r\n                        fontSize={fontSize}\r\n                        fontWeight={'medium'}\r\n                    >\r\n                        {label}\r\n                    </Typography>\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                </>\r\n            )}\r\n        </BaseToggle>\r\n    )\r\n}\r\n\r\nToggle.displayName = 'Toggle'\r\n\r\nexport default Toggle\r\n"],"names":["Toggle","variant","color","size","radius","className","label","icon","startIcon","endIcon","ref","props","iconSize","buttonSizeToIconSize","fontSize","TOGGLE_SIZE_TO_FONT_SIZE","jsx","BaseToggle","cn","TOGGLE_STYLES","Icon","BUTTON_SHARED_STYLES","jsxs","Fragment","Typography"],"mappings":";;;;;;;;;;;AAYA,MAAMA,IAA0B,CAAC;AAAA,EAC7B,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAWC,EAAqBV,CAAI,GACpCW,IAAWC,EAAyBZ,CAAI;AAE9C,SACI,gBAAAa;AAAA,IAACC;AAAAA,IAAA;AAAA,MACG,KAAAP;AAAA,MACA,kBAAgBH,IAAO,KAAK;AAAA,MAC5B,WAAWW,EAAGC,EAAc,OAAO,EAAE,SAAAlB,GAAS,OAAAC,GAAO,MAAAC,GAAM,QAAAC,GAAQ,GAAGC,CAAS;AAAA,MAC9E,GAAGM;AAAA,MAEH,UAAAJ,IACG,gBAAAS;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,MAAAb;AAAA,UACA,MAAMK;AAAA,UACN,WAAWS,EAAqB;AAAA,QAAA;AAAA,MAAA,IAGpC,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAf,KACG,gBAAAQ;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,MAAMZ;AAAA,YACN,MAAMI;AAAA,YACN,WAAWS,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxC,gBAAAL;AAAA,UAACQ;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,UAAAV;AAAA,YACA,YAAY;AAAA,YAEX,UAAAR;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJG,KACG,gBAAAO;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,MAAMX;AAAA,YACN,MAAMG;AAAA,YACN,WAAWS,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC,EAAA,CAER;AAAA,IAAA;AAAA,EAAA;AAIhB;AAEArB,EAAO,cAAc;"}

package/dist/components/actions/toggle/constants/toggleSizes.const.cjs

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

package/dist/components/actions/toggle/constants/toggleSizes.const.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggleSizes.const.cjs","sources":["../../../../../src/components/actions/toggle/constants/toggleSizes.const.ts"],"sourcesContent":["import { BUTTON_SIZES } from '@components/actions/_shared/buttons/constants'\r\nimport type { TypographySize } from '@components/foundation/typography'\r\n\r\nexport const TOGGLE_SIZE_TO_FONT_SIZE: Record<keyof typeof BUTTON_SIZES, 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_SIZE_TO_FONT_SIZE","BUTTON_SIZES"],"mappings":"yJAGaA,EAA8E,CACvF,CAACC,EAAAA,aAAa,EAAE,EAAG,KACnB,CAACA,EAAAA,aAAa,EAAE,EAAG,KACnB,CAACA,EAAAA,aAAa,EAAE,EAAG,IACvB"}

package/dist/components/actions/toggle/constants/toggleSizes.const.d.ts

@@ -0,0 +1,3 @@
+import { BUTTON_SIZES } from '../../_shared/buttons/constants';
+import { TypographySize } from '../../../foundation/typography';
+export declare const TOGGLE_SIZE_TO_FONT_SIZE: Record<keyof typeof BUTTON_SIZES, TypographySize>;

package/dist/components/actions/toggle/constants/toggleSizes.const.js

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

package/dist/components/actions/toggle/constants/toggleSizes.const.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggleSizes.const.js","sources":["../../../../../src/components/actions/toggle/constants/toggleSizes.const.ts"],"sourcesContent":["import { BUTTON_SIZES } from '@components/actions/_shared/buttons/constants'\r\nimport type { TypographySize } from '@components/foundation/typography'\r\n\r\nexport const TOGGLE_SIZE_TO_FONT_SIZE: Record<keyof typeof BUTTON_SIZES, 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_SIZE_TO_FONT_SIZE","BUTTON_SIZES"],"mappings":";AAGO,MAAMA,IAA8E;AAAA,EACvF,CAACC,EAAa,EAAE,GAAG;AAAA,EACnB,CAACA,EAAa,EAAE,GAAG;AAAA,EACnB,CAACA,EAAa,EAAE,GAAG;AACvB;"}

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

@@ -0,0 +1,4 @@
+export { default as Toggle } from './Toggle.tsx';
+export { TOGGLE_STYLES } from './styles/Toggle.css.ts';
+export type { ToggleProps } from './types/Toggle.props.ts';
+export type { ToggleColor, ToggleContent, ToggleIconContent, ToggleLabelContent, ToggleRadius, ToggleSize, ToggleVariant, } from './types/Toggle.types.ts';

package/dist/components/actions/toggle/styles/Toggle.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                                                             */;/* empty css                            */const a=require("@vanilla-extract/recipes/createRuntimeFn");var i={recipe:a.createRuntimeFn({defaultClassName:"_1lqapti0",variantClassNames:{variant:{outlined:"_1lqapti1",ghost:"_1lqapti2"},color:{primary:"_1lqapti3",secondary:"_1lqapti4",tertiary:"_1lqapti5",destructive:"_1lqapti6",success:"_1lqapti7",warning:"_1lqapti8",info:"_1lqapti9"},size:{sm:"_1lqaptia",md:"_1lqaptib",lg:"_1lqaptic"},radius:{none:"_1lqaptid",xs:"_1lqaptie",sm:"_1lqaptif",md:"_1lqaptig",lg:"_1lqaptih",xl:"_1lqaptii","2xl":"_1lqaptij",full:"_1lqaptik"}},defaultVariants:{variant:"outlined",color:"primary",size:"md",radius:"sm"},compoundVariants:[]})};exports.TOGGLE_STYLES=i;
+//# sourceMappingURL=Toggle.css.cjs.map

package/dist/components/actions/toggle/styles/Toggle.css.cjs.map

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

package/dist/components/actions/{toggle-button/styles/ToggleButton.css.d.ts → toggle/styles/Toggle.css.d.ts}

@@ -1,5 +1,5 @@
-import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
-export declare const TOGGLE_BUTTON_STYLES: {
+import { RuntimeFn } from '@vanilla-extract/recipes';
+export declare const TOGGLE_STYLES: {
     recipe: RuntimeFn<{
         variant: {
             outlined: {
@@ -214,4 +214,3 @@ export declare const TOGGLE_BUTTON_STYLES: {
         };
     }>;
 };
-export type ToggleButtonRecipeVariants = NonNullable<RecipeVariants<typeof TOGGLE_BUTTON_STYLES.recipe>>;

package/dist/components/actions/toggle/styles/Toggle.css.js

@@ -0,0 +1,9 @@
+/* empty css                                            */
+/* empty css                                                           */
+/* empty css                          */
+import { createRuntimeFn as a } from "@vanilla-extract/recipes/createRuntimeFn";
+var r = { recipe: a({ defaultClassName: "_1lqapti0", variantClassNames: { variant: { outlined: "_1lqapti1", ghost: "_1lqapti2" }, color: { primary: "_1lqapti3", secondary: "_1lqapti4", tertiary: "_1lqapti5", destructive: "_1lqapti6", success: "_1lqapti7", warning: "_1lqapti8", info: "_1lqapti9" }, size: { sm: "_1lqaptia", md: "_1lqaptib", lg: "_1lqaptic" }, radius: { none: "_1lqaptid", xs: "_1lqaptie", sm: "_1lqaptif", md: "_1lqaptig", lg: "_1lqaptih", xl: "_1lqaptii", "2xl": "_1lqaptij", full: "_1lqaptik" } }, defaultVariants: { variant: "outlined", color: "primary", size: "md", radius: "sm" }, compoundVariants: [] }) };
+export {
+  r as TOGGLE_STYLES
+};
+//# sourceMappingURL=Toggle.css.js.map

package/dist/components/actions/toggle/styles/Toggle.css.js.map

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

package/dist/components/actions/toggle/types/Toggle.props.d.ts

@@ -0,0 +1,11 @@
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { ToggleColor, ToggleContent, ToggleRadius, ToggleSize, ToggleVariant } from './Toggle.types.ts';
+import type * as React from 'react';
+export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'> & ToggleContent & {
+    variant?: ToggleVariant;
+    color?: ToggleColor;
+    /** Toggle size. Defaults to `md`. */
+    size?: ToggleSize;
+    radius?: ToggleRadius;
+    ref?: React.Ref<HTMLButtonElement>;
+} & Pick<BaseToggle.Props, 'pressed' | 'defaultPressed' | 'onPressedChange' | 'value' | 'disabled'>;

package/dist/components/actions/toggle/types/Toggle.types.d.ts

@@ -0,0 +1,21 @@
+import { ButtonColorShared, ButtonSizeShared } from '../../_shared/buttons/types';
+import { Radius } from '../../../../theme/tokens/radii.ts';
+export type ToggleVariant = 'ghost' | 'outlined';
+export type ToggleColor = ButtonColorShared;
+export type ToggleSize = ButtonSizeShared;
+export type ToggleRadius = keyof Radius;
+export type ToggleLabelContent = {
+    label: string;
+    icon?: never;
+    'aria-label'?: string;
+    startIcon?: string;
+    endIcon?: string;
+};
+export type ToggleIconContent = {
+    label?: never;
+    icon: string;
+    'aria-label': string;
+    startIcon?: never;
+    endIcon?: never;
+};
+export type ToggleContent = ToggleLabelContent | ToggleIconContent;

package/dist/components/actions/toggle-group/ToggleGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";const c=require("react/jsx-runtime"),g=require("@base-ui/react/toggle-group"),t=require("./components/toggle-group-item/ToggleGroupItem.cjs"),l=require("./styles/ToggleGroup.css.cjs"),p=require("../../../utils/cn.cjs"),e=(({className:r,orientation:o="horizontal",children:s,...u})=>c.jsx(g.ToggleGroup,{className:p.cn(l.TOGGLE_GROUP_STYLES.recipe({orientation:o}),r),orientation:o,...u,children:s}));e.displayName="ToggleGroup";e.Item=t;module.exports=e;
+//# sourceMappingURL=ToggleGroup.cjs.map

package/dist/components/actions/toggle-group/ToggleGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.cjs","sources":["../../../../src/components/actions/toggle-group/ToggleGroup.tsx"],"sourcesContent":["import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group'\r\n\r\nimport ToggleGroupItem from '@components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.tsx'\r\nimport { TOGGLE_GROUP_STYLES } from '@components/actions/toggle-group/styles/ToggleGroup.css.ts'\r\nimport type { ToggleGroupCompound } from '@components/actions/toggle-group/types/ToggleGroupCompound.ts'\r\nimport type { ToggleGroupProps } from '@components/actions/toggle-group/types/ToggleGroup.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * A coordinated set of toggle buttons.\r\n *\r\n * Use `ToggleGroup.Item` for each option. Base UI manages the selected values,\r\n * roving focus, keyboard navigation, and controlled/uncontrolled behavior.\r\n * The group selects one item by default; pass `multiple` to allow several\r\n * selected items.\r\n *\r\n * @example\r\n * ```tsx\r\n * <ToggleGroup defaultValue={['bold']}>\r\n *     <ToggleGroup.Item value=\"bold\" label=\"Bold\" />\r\n *     <ToggleGroup.Item value=\"italic\" label=\"Italic\" />\r\n * </ToggleGroup>\r\n * ```\r\n */\r\nconst ToggleGroup = (({ className, orientation = 'horizontal', children, ...props }: ToggleGroupProps) => (\r\n    <BaseToggleGroup\r\n        className={cn(TOGGLE_GROUP_STYLES.recipe({ orientation }), className)}\r\n        orientation={orientation}\r\n        {...props}\r\n    >\r\n        {children}\r\n    </BaseToggleGroup>\r\n)) as ToggleGroupCompound\r\n\r\nToggleGroup.displayName = 'ToggleGroup'\r\nToggleGroup.Item = ToggleGroupItem\r\n\r\nexport default ToggleGroup\r\n"],"names":["ToggleGroup","className","orientation","children","props","jsx","BaseToggleGroup","cn","TOGGLE_GROUP_STYLES","ToggleGroupItem"],"mappings":"wOAwBMA,GAAe,CAAC,CAAE,UAAAC,EAAW,YAAAC,EAAc,aAAc,SAAAC,EAAU,GAAGC,CAAA,IACxEC,EAAAA,IAACC,EAAAA,YAAA,CACG,UAAWC,EAAAA,GAAGC,sBAAoB,OAAO,CAAE,YAAAN,CAAA,CAAa,EAAGD,CAAS,EACpE,YAAAC,EACC,GAAGE,EAEH,SAAAD,CAAA,CACL,GAGJH,EAAY,YAAc,cAC1BA,EAAY,KAAOS"}

package/dist/components/actions/toggle-group/ToggleGroup.d.ts

@@ -0,0 +1,19 @@
+import { ToggleGroupCompound } from './types/ToggleGroupCompound.ts';
+/**
+ * A coordinated set of toggle buttons.
+ *
+ * Use `ToggleGroup.Item` for each option. Base UI manages the selected values,
+ * roving focus, keyboard navigation, and controlled/uncontrolled behavior.
+ * The group selects one item by default; pass `multiple` to allow several
+ * selected items.
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroup defaultValue={['bold']}>
+ *     <ToggleGroup.Item value="bold" label="Bold" />
+ *     <ToggleGroup.Item value="italic" label="Italic" />
+ * </ToggleGroup>
+ * ```
+ */
+declare const ToggleGroup: ToggleGroupCompound;
+export default ToggleGroup;

package/dist/components/actions/toggle-group/ToggleGroup.js

@@ -0,0 +1,20 @@
+import { jsx as g } from "react/jsx-runtime";
+import { ToggleGroup as l } from "@base-ui/react/toggle-group";
+import t from "./components/toggle-group-item/ToggleGroupItem.js";
+import { TOGGLE_GROUP_STYLES as G } from "./styles/ToggleGroup.css.js";
+import { cn as a } from "../../../utils/cn.js";
+const r = (({ className: m, orientation: o = "horizontal", children: p, ...e }) => /* @__PURE__ */ g(
+  l,
+  {
+    className: a(G.recipe({ orientation: o }), m),
+    orientation: o,
+    ...e,
+    children: p
+  }
+));
+r.displayName = "ToggleGroup";
+r.Item = t;
+export {
+  r as default
+};
+//# sourceMappingURL=ToggleGroup.js.map

package/dist/components/actions/toggle-group/ToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.js","sources":["../../../../src/components/actions/toggle-group/ToggleGroup.tsx"],"sourcesContent":["import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group'\r\n\r\nimport ToggleGroupItem from '@components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.tsx'\r\nimport { TOGGLE_GROUP_STYLES } from '@components/actions/toggle-group/styles/ToggleGroup.css.ts'\r\nimport type { ToggleGroupCompound } from '@components/actions/toggle-group/types/ToggleGroupCompound.ts'\r\nimport type { ToggleGroupProps } from '@components/actions/toggle-group/types/ToggleGroup.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * A coordinated set of toggle buttons.\r\n *\r\n * Use `ToggleGroup.Item` for each option. Base UI manages the selected values,\r\n * roving focus, keyboard navigation, and controlled/uncontrolled behavior.\r\n * The group selects one item by default; pass `multiple` to allow several\r\n * selected items.\r\n *\r\n * @example\r\n * ```tsx\r\n * <ToggleGroup defaultValue={['bold']}>\r\n *     <ToggleGroup.Item value=\"bold\" label=\"Bold\" />\r\n *     <ToggleGroup.Item value=\"italic\" label=\"Italic\" />\r\n * </ToggleGroup>\r\n * ```\r\n */\r\nconst ToggleGroup = (({ className, orientation = 'horizontal', children, ...props }: ToggleGroupProps) => (\r\n    <BaseToggleGroup\r\n        className={cn(TOGGLE_GROUP_STYLES.recipe({ orientation }), className)}\r\n        orientation={orientation}\r\n        {...props}\r\n    >\r\n        {children}\r\n    </BaseToggleGroup>\r\n)) as ToggleGroupCompound\r\n\r\nToggleGroup.displayName = 'ToggleGroup'\r\nToggleGroup.Item = ToggleGroupItem\r\n\r\nexport default ToggleGroup\r\n"],"names":["ToggleGroup","className","orientation","children","props","jsx","BaseToggleGroup","cn","TOGGLE_GROUP_STYLES","ToggleGroupItem"],"mappings":";;;;;AAwBA,MAAMA,KAAe,CAAC,EAAE,WAAAC,GAAW,aAAAC,IAAc,cAAc,UAAAC,GAAU,GAAGC,EAAA,MACxE,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACG,WAAWC,EAAGC,EAAoB,OAAO,EAAE,aAAAN,EAAA,CAAa,GAAGD,CAAS;AAAA,IACpE,aAAAC;AAAA,IACC,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AACL;AAGJH,EAAY,cAAc;AAC1BA,EAAY,OAAOS;"}

package/dist/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.cjs

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

package/dist/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupItem.cjs","sources":["../../../../../../src/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle'\r\n\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { buttonSizeToIconSize } from '@components/actions/_shared/buttons/constants'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { TOGGLE_SIZE_TO_FONT_SIZE } from '@components/actions/toggle/constants/toggleSizes.const.ts'\r\nimport { TOGGLE_STYLES } from '@components/actions/toggle/styles/Toggle.css.ts'\r\nimport type { ToggleGroupItemProps } from '@components/actions/toggle-group/components/toggle-group-item/types/ToggleGroupItem.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\n\r\nconst ToggleGroupItem: FC<ToggleGroupItemProps> = ({\r\n    variant,\r\n    color,\r\n    size = 'md',\r\n    radius,\r\n    className,\r\n    label,\r\n    icon,\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_SIZE_TO_FONT_SIZE[size]\r\n\r\n    return (\r\n        <BaseToggle\r\n            ref={ref}\r\n            data-icon-only={icon ? '' : undefined}\r\n            className={cn(TOGGLE_STYLES.recipe({ variant, color, size, radius }), className)}\r\n            {...props}\r\n        >\r\n            {icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : (\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                    <Typography\r\n                        as={'span'}\r\n                        fontSize={fontSize}\r\n                        fontWeight={'medium'}\r\n                    >\r\n                        {label}\r\n                    </Typography>\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                </>\r\n            )}\r\n        </BaseToggle>\r\n    )\r\n}\r\n\r\nToggleGroupItem.displayName = 'ToggleGroup.Item'\r\n\r\nexport default ToggleGroupItem\r\n"],"names":["ToggleGroupItem","variant","color","size","radius","className","label","icon","startIcon","endIcon","ref","props","iconSize","buttonSizeToIconSize","fontSize","TOGGLE_SIZE_TO_FONT_SIZE","jsx","BaseToggle","cn","TOGGLE_STYLES","Icon","BUTTON_SHARED_STYLES","jsxs","Fragment","Typography"],"mappings":"wmBAYMA,EAA4C,CAAC,CAC/C,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,KACP,OAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,qBAAqBV,CAAI,EACpCW,EAAWC,EAAAA,yBAAyBZ,CAAI,EAE9C,OACIa,EAAAA,IAACC,EAAAA,OAAA,CACG,IAAAP,EACA,iBAAgBH,EAAO,GAAK,OAC5B,UAAWW,EAAAA,GAAGC,gBAAc,OAAO,CAAE,QAAAlB,EAAS,MAAAC,EAAO,KAAAC,EAAM,OAAAC,EAAQ,EAAGC,CAAS,EAC9E,GAAGM,EAEH,SAAAJ,EACGS,EAAAA,IAACI,EAAA,CACG,KAAAb,EACA,KAAMK,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,EAGpCC,EAAAA,KAAAC,WAAA,CACK,SAAA,CAAAf,GACGQ,EAAAA,IAACI,EAAA,CACG,KAAMZ,EACN,KAAMI,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,EAGxCL,EAAAA,IAACQ,EAAA,CACG,GAAI,OACJ,SAAAV,EACA,WAAY,SAEX,SAAAR,CAAA,CAAA,EAEJG,GACGO,EAAAA,IAACI,EAAA,CACG,KAAMX,EACN,KAAMG,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAER,CAAA,CAAA,CAIhB,EAEArB,EAAgB,YAAc"}

package/dist/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.d.ts

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

package/dist/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.js

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

package/dist/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupItem.js","sources":["../../../../../../src/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle'\r\n\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { buttonSizeToIconSize } from '@components/actions/_shared/buttons/constants'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { TOGGLE_SIZE_TO_FONT_SIZE } from '@components/actions/toggle/constants/toggleSizes.const.ts'\r\nimport { TOGGLE_STYLES } from '@components/actions/toggle/styles/Toggle.css.ts'\r\nimport type { ToggleGroupItemProps } from '@components/actions/toggle-group/components/toggle-group-item/types/ToggleGroupItem.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\n\r\nconst ToggleGroupItem: FC<ToggleGroupItemProps> = ({\r\n    variant,\r\n    color,\r\n    size = 'md',\r\n    radius,\r\n    className,\r\n    label,\r\n    icon,\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_SIZE_TO_FONT_SIZE[size]\r\n\r\n    return (\r\n        <BaseToggle\r\n            ref={ref}\r\n            data-icon-only={icon ? '' : undefined}\r\n            className={cn(TOGGLE_STYLES.recipe({ variant, color, size, radius }), className)}\r\n            {...props}\r\n        >\r\n            {icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : (\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                    <Typography\r\n                        as={'span'}\r\n                        fontSize={fontSize}\r\n                        fontWeight={'medium'}\r\n                    >\r\n                        {label}\r\n                    </Typography>\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                </>\r\n            )}\r\n        </BaseToggle>\r\n    )\r\n}\r\n\r\nToggleGroupItem.displayName = 'ToggleGroup.Item'\r\n\r\nexport default ToggleGroupItem\r\n"],"names":["ToggleGroupItem","variant","color","size","radius","className","label","icon","startIcon","endIcon","ref","props","iconSize","buttonSizeToIconSize","fontSize","TOGGLE_SIZE_TO_FONT_SIZE","jsx","BaseToggle","cn","TOGGLE_STYLES","Icon","BUTTON_SHARED_STYLES","jsxs","Fragment","Typography"],"mappings":";;;;;;;;;;;AAYA,MAAMA,IAA4C,CAAC;AAAA,EAC/C,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAWC,EAAqBV,CAAI,GACpCW,IAAWC,EAAyBZ,CAAI;AAE9C,SACI,gBAAAa;AAAA,IAACC;AAAAA,IAAA;AAAA,MACG,KAAAP;AAAA,MACA,kBAAgBH,IAAO,KAAK;AAAA,MAC5B,WAAWW,EAAGC,EAAc,OAAO,EAAE,SAAAlB,GAAS,OAAAC,GAAO,MAAAC,GAAM,QAAAC,GAAQ,GAAGC,CAAS;AAAA,MAC9E,GAAGM;AAAA,MAEH,UAAAJ,IACG,gBAAAS;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,MAAAb;AAAA,UACA,MAAMK;AAAA,UACN,WAAWS,EAAqB;AAAA,QAAA;AAAA,MAAA,IAGpC,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAf,KACG,gBAAAQ;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,MAAMZ;AAAA,YACN,MAAMI;AAAA,YACN,WAAWS,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxC,gBAAAL;AAAA,UAACQ;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,UAAAV;AAAA,YACA,YAAY;AAAA,YAEX,UAAAR;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJG,KACG,gBAAAO;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,MAAMX;AAAA,YACN,MAAMG;AAAA,YACN,WAAWS,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC,EAAA,CAER;AAAA,IAAA;AAAA,EAAA;AAIhB;AAEArB,EAAgB,cAAc;"}

package/dist/components/actions/toggle-group/components/toggle-group-item/types/ToggleGroupItem.props.d.ts

@@ -0,0 +1,11 @@
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { ToggleColor, ToggleContent, ToggleRadius, ToggleSize, ToggleVariant } from '../../../../toggle/types/Toggle.types.ts';
+import type * as React from 'react';
+export type ToggleGroupItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'> & ToggleContent & {
+    value: string;
+    variant?: ToggleVariant;
+    color?: ToggleColor;
+    size?: ToggleSize;
+    radius?: ToggleRadius;
+    ref?: React.Ref<HTMLButtonElement>;
+} & Pick<BaseToggle.Props, 'disabled'>;

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

@@ -0,0 +1,4 @@
+export { default as ToggleGroup } from './ToggleGroup.tsx';
+export { TOGGLE_GROUP_STYLES } from './styles/ToggleGroup.css.ts';
+export type { ToggleGroupProps } from './types/ToggleGroup.props.ts';
+export type { ToggleGroupItemProps } from './components/toggle-group-item/types/ToggleGroupItem.props.ts';

package/dist/components/actions/toggle-group/styles/ToggleGroup.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                                 */const e=require("@vanilla-extract/recipes/createRuntimeFn");var t={recipe:e.createRuntimeFn({defaultClassName:"_40ge150",variantClassNames:{orientation:{horizontal:"_40ge151",vertical:"_40ge152"}},defaultVariants:{orientation:"horizontal"},compoundVariants:[]})};exports.TOGGLE_GROUP_STYLES=t;
+//# sourceMappingURL=ToggleGroup.css.cjs.map

package/dist/components/actions/toggle-group/styles/ToggleGroup.css.cjs.map

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

package/dist/components/actions/toggle-group/styles/ToggleGroup.css.d.ts

@@ -0,0 +1,14 @@
+import { RuntimeFn } from '@vanilla-extract/recipes';
+export declare const TOGGLE_GROUP_STYLES: {
+    recipe: RuntimeFn<{
+        orientation: {
+            horizontal: {
+                flexDirection: "row";
+            };
+            vertical: {
+                flexDirection: "column";
+                alignItems: "stretch";
+            };
+        };
+    }>;
+};