@choco-vanille/ui 1.1.2 → 1.3.0

package/README.md

@@ -38,14 +38,14 @@ import '@choco-vanille/ui/styles.css';
 Then use components:
 
 ```tsx
-import { Text } from '@choco-vanille/ui';
+import { Typography } from '@choco-vanille/ui';
 
 export function Example() {
   return (
     <>
-      <Text variant="h1">Hello world</Text>
-      <Text variant="muted">A typographic primitive.</Text>
-      <Text variant="code">@choco-vanille/ui</Text>
+      <Typography variant="h1">Hello world</Typography>
+      <Typography variant="muted">A typographic primitive.</Typography>
+      <Typography variant="code">@choco-vanille/ui</Typography>
     </>
   );
 }
@@ -56,14 +56,14 @@ export function Example() {
 | Category | Components |
 |---|---|
 | **Foundation** | `Icon`, `Typography` |
-| **Layout** | `Box`, `Flex`, `Grid`, `Image`, `Separator`, `Form`, `Fieldset`, `Legend` |
-| **Actions** | `Button`, `IconButton`, `ToggleButton`, `ToggleIconButton`, `ToggleButtonGroup` |
-| **Forms** | `Autocomplete`, `Calendar`, `Checkbox`, `DatePicker`, `RadioGroup`, `Select`, `Switch`, `TextArea`, `TextField` |
-| **Data Display** | `Avatar`, `AvatarGroup`, `Badge`, `Table` |
+| **Layout** | `Box`, `Flex`, `Grid`, `Inset`, `Image`, `Separator`, `Form`, `Fieldset`, `Legend` |
+| **Actions** | `Button`, `IconButton`, `Toggle`, `ToggleGroup` |
+| **Forms** | `Autocomplete`, `Calendar`, `Checkbox`, `CheckboxGroup`, `DatePicker`, `RadioGroup`, `RichTextEditor`, `Select`, `Slider`, `Switch`, `TextArea`, `TextField`, `NumberField` |
+| **Data Display** | `Avatar`, `AvatarGroup`, `Badge`, `RichTextRenderer`, `Table` |
 | **Surfaces** | `Accordion`, `Card`, `Collapsible` |
-| **Navigation** | `Tabs`, `Link` |
-| **Overlay** | `Tooltip`, `DropdownMenu`, `Popover`, `HoverCard`, `Dialog`, `Drawer` |
-| **Feedback** | `Skeleton`, `Callout`, `Toast`, `Progress` |
+| **Navigation** | `Tabs`, `Link`, `Pagination`, `Breadcrumbs`, `Stepper`, `StepIndicator` |
+| **Overlay** | `Tooltip`, `DropdownMenu`, `ContextMenu`, `Popover`, `HoverCard`, `Dialog`, `AlertDialog`, `Drawer`, `Panel`, `Command` |
+| **Feedback** | `Skeleton`, `Callout`, `Toast`, `Progress`, `EmptyState`, `Spinner` |
 | **Theme** | `ThemeProvider`, `useTheme` |
 
 ## Theming
@@ -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/IconButton.cjs

@@ -1,2 +1,2 @@
-"use strict";const t=require("react/jsx-runtime"),N=require("./styles/IconButton.css.cjs"),T=require("../_shared/buttons/styles/buttonShared.css.cjs"),a=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const O=require("../../../utils/cn.cjs"),n=require("./constants/iconButtonSizes.const.cjs"),c=({variant:s,color:o,size:e=n.ICON_BUTTON_SIZES.md,className:r,icon:i,active:u,ref:_,...S})=>{const I=n.ICON_BUTTON_SIZE_TO_ICON_SIZE[e];return t.jsx("button",{ref:_,"data-active":u?"true":void 0,className:O.cn(N.ICON_BUTTON_STYLES.recipe({variant:s,color:o,size:e}),r),...S,children:t.jsx(a,{icon:i,size:I,className:T.BUTTON_SHARED_STYLES.icon})})};c.displayName="IconButton";module.exports=c;
+"use strict";const t=require("react/jsx-runtime"),T=require("./styles/IconButton.css.cjs"),a=require("../_shared/buttons/styles/buttonShared.css.cjs"),O=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const B=require("../../../utils/cn.cjs"),n=require("./constants/iconButtonSizes.const.cjs"),c=({variant:s,color:o,size:e=n.ICON_BUTTON_SIZES.md,className:r,icon:i,children:u,active:_,ref:S,...I})=>{const N=n.ICON_BUTTON_SIZE_TO_ICON_SIZE[e];return t.jsx("button",{ref:S,className:B.cn(T.ICON_BUTTON_STYLES.recipe({variant:s,color:o,size:e}),r),...I,"data-active":_?"true":void 0,children:u??t.jsx(O,{icon:i,size:N,className:a.BUTTON_SHARED_STYLES.icon})})};c.displayName="IconButton";module.exports=c;
 //# sourceMappingURL=IconButton.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","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":"oVAQMA,EAAkC,CAAC,CACrC,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAOC,EAAAA,kBAAkB,GACzB,UAAAC,EACA,KAAAC,EACA,OAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,8BAA8BR,CAAI,EAEnD,OACIS,EAAAA,IAAC,SAAA,CACG,IAAAJ,EACA,cAAaD,EAAS,OAAS,OAC/B,UAAWM,EAAAA,GAAGC,EAAAA,mBAAmB,OAAO,CAAE,QAAAb,EAAS,MAAAC,EAAO,KAAAC,EAAM,EAAGE,CAAS,EAC3E,GAAGI,EAEJ,SAAAG,EAAAA,IAACG,EAAA,CACG,KAAAT,EACA,KAAMI,EACN,UAAWM,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAGZ,EAEAhB,EAAW,YAAc"}
+{"version":3,"file":"IconButton.cjs","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    children,\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            className={cn(ICON_BUTTON_STYLES.recipe({ variant, color, size }), className)}\r\n            {...props}\r\n            data-active={active ? 'true' : undefined}\r\n        >\r\n            {children ?? (\r\n                <Icon\r\n                    icon={icon as string}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\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","children","active","ref","props","iconSize","ICON_BUTTON_SIZE_TO_ICON_SIZE","jsx","cn","ICON_BUTTON_STYLES","Icon","BUTTON_SHARED_STYLES"],"mappings":"oVAQMA,EAAkC,CAAC,CACrC,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAOC,EAAAA,kBAAkB,GACzB,UAAAC,EACA,KAAAC,EACA,SAAAC,EACA,OAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,8BAA8BT,CAAI,EAEnD,OACIU,EAAAA,IAAC,SAAA,CACG,IAAAJ,EACA,UAAWK,EAAAA,GAAGC,EAAAA,mBAAmB,OAAO,CAAE,QAAAd,EAAS,MAAAC,EAAO,KAAAC,EAAM,EAAGE,CAAS,EAC3E,GAAGK,EACJ,cAAaF,EAAS,OAAS,OAE9B,SAAAD,GACGM,EAAAA,IAACG,EAAA,CACG,KAAAV,EACA,KAAMK,EACN,UAAWM,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAIhB,EAEAjB,EAAW,YAAc"}

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

@@ -1,41 +1,42 @@
 import { jsx as t } from "react/jsx-runtime";
-import { ICON_BUTTON_STYLES as T } from "./styles/IconButton.css.js";
-import { BUTTON_SHARED_STYLES as _ } from "../_shared/buttons/styles/buttonShared.css.js";
-import p from "../../foundation/icon/Icon.js";
+import { ICON_BUTTON_STYLES as _ } from "./styles/IconButton.css.js";
+import { BUTTON_SHARED_STYLES as p } from "../_shared/buttons/styles/buttonShared.css.js";
+import I from "../../foundation/icon/Icon.js";
 import "../../foundation/icon/styles/Icon.css.js";
-import { cn as I } from "../../../utils/cn.js";
-import { ICON_BUTTON_SIZE_TO_ICON_SIZE as S, ICON_BUTTON_SIZES as s } from "./constants/iconButtonSizes.const.js";
-const O = ({
+import { cn as S } from "../../../utils/cn.js";
+import { ICON_BUTTON_SIZE_TO_ICON_SIZE as s, ICON_BUTTON_SIZES as O } from "./constants/iconButtonSizes.const.js";
+const f = ({
   variant: r,
   color: m,
-  size: o = s.md,
+  size: o = O.md,
   className: i,
   icon: c,
-  active: n,
-  ref: e,
-  ...a
+  children: n,
+  active: e,
+  ref: a,
+  ...N
 }) => {
-  const N = S[o];
+  const T = s[o];
   return /* @__PURE__ */ t(
     "button",
     {
-      ref: e,
-      "data-active": n ? "true" : void 0,
-      className: I(T.recipe({ variant: r, color: m, size: o }), i),
-      ...a,
-      children: /* @__PURE__ */ t(
-        p,
+      ref: a,
+      className: S(_.recipe({ variant: r, color: m, size: o }), i),
+      ...N,
+      "data-active": e ? "true" : void 0,
+      children: n ?? /* @__PURE__ */ t(
+        I,
         {
           icon: c,
-          size: N,
-          className: _.icon
+          size: T,
+          className: p.icon
         }
       )
     }
   );
 };
-O.displayName = "IconButton";
+f.displayName = "IconButton";
 export {
-  O as default
+  f as default
 };
 //# sourceMappingURL=IconButton.js.map

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

@@ -1 +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;"}
+{"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    children,\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            className={cn(ICON_BUTTON_STYLES.recipe({ variant, color, size }), className)}\r\n            {...props}\r\n            data-active={active ? 'true' : undefined}\r\n        >\r\n            {children ?? (\r\n                <Icon\r\n                    icon={icon as string}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\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","children","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,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAWC,EAA8BT,CAAI;AAEnD,SACI,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAJ;AAAA,MACA,WAAWK,EAAGC,EAAmB,OAAO,EAAE,SAAAd,GAAS,OAAAC,GAAO,MAAAC,GAAM,GAAGE,CAAS;AAAA,MAC3E,GAAGK;AAAA,MACJ,eAAaF,IAAS,SAAS;AAAA,MAE9B,UAAAD,KACG,gBAAAM;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,MAAAV;AAAA,UACA,MAAMK;AAAA,UACN,WAAWM,EAAqB;AAAA,QAAA;AAAA,MAAA;AAAA,IACpC;AAAA,EAAA;AAIhB;AAEAjB,EAAW,cAAc;"}

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,10 +1,20 @@
-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 & {
-    /** Ref forwarded to the underlying `<button>` element. */
-    ref?: React.Ref<HTMLButtonElement>;
+export type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label' | 'color'> & ({
     /** Iconify icon name rendered inside the button. */
     icon: string;
+    children?: never;
+} | {
+    icon?: never;
+    /** Custom icon content rendered inside the button. */
+    children: React.ReactNode;
+}) & {
+    variant?: IconButtonVariant;
+    color?: IconButtonColor;
+    /** Button size. Defaults to `md`. */
+    size?: IconButtonSize;
+    /** Ref forwarded to the underlying `<button>` element. */
+    ref?: React.Ref<HTMLButtonElement>;
     /** 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. */

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"),d=require("@base-ui/react/toggle"),n=require("../_shared/buttons/styles/buttonShared.css.cjs"),x=require("../_shared/buttons/constants/index.cjs"),r=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const N=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const j=require("./constants/toggleSizes.const.cjs"),O=require("./styles/Toggle.css.cjs"),h=require("../../../utils/cn.cjs"),T=({variant:S,subtle:u,color:a,size:s="md",radius:g,className:l,label:_,icon:i,startIcon:c,endIcon:t,ref:q,...E})=>{const o=x.buttonSizeToIconSize[s],m=j.TOGGLE_SIZE_TO_FONT_SIZE[s];return e.jsx(d.Toggle,{ref:q,"data-icon-only":i?"":void 0,className:h.cn(O.TOGGLE_STYLES.recipe({variant:S,color:a,size:s,radius:g,subtle:u}),l),...E,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(N,{as:"span",fontSize:m,fontWeight:"medium",children:_}),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    subtle,\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, subtle }), 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","subtle","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,OAAAC,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,QAAAnB,EAAS,MAAAE,EAAO,KAAAC,EAAM,OAAAC,EAAQ,OAAAH,CAAA,CAAQ,EAAGI,CAAS,EACtF,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,EAEAtB,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,75 @@
+import { jsx as o, jsxs as E, Fragment as N } from "react/jsx-runtime";
+import { Toggle as _ } from "@base-ui/react/toggle";
+import { BUTTON_SHARED_STYLES as e } from "../_shared/buttons/styles/buttonShared.css.js";
+import { buttonSizeToIconSize as h } from "../_shared/buttons/constants/index.js";
+import t from "../../foundation/icon/Icon.js";
+import "../../foundation/icon/styles/Icon.css.js";
+import z from "../../foundation/typography/Typography.js";
+import "../../foundation/typography/styles/Typography.css.js";
+import { TOGGLE_SIZE_TO_FONT_SIZE as O } from "./constants/toggleSizes.const.js";
+import { TOGGLE_STYLES as u } from "./styles/Toggle.css.js";
+import { cn as y } from "../../../utils/cn.js";
+const G = ({
+  variant: n,
+  subtle: c,
+  color: p,
+  size: i = "md",
+  radius: l,
+  className: T,
+  label: f,
+  icon: m,
+  startIcon: s,
+  endIcon: a,
+  ref: g,
+  ...S
+}) => {
+  const r = h[i], d = O[i];
+  return /* @__PURE__ */ o(
+    _,
+    {
+      ref: g,
+      "data-icon-only": m ? "" : void 0,
+      className: y(u.recipe({ variant: n, color: p, size: i, radius: l, subtle: c }), T),
+      ...S,
+      children: m ? /* @__PURE__ */ o(
+        t,
+        {
+          icon: m,
+          size: r,
+          className: e.icon
+        }
+      ) : /* @__PURE__ */ E(N, { children: [
+        s && /* @__PURE__ */ o(
+          t,
+          {
+            icon: s,
+            size: r,
+            className: e.icon
+          }
+        ),
+        /* @__PURE__ */ o(
+          z,
+          {
+            as: "span",
+            fontSize: d,
+            fontWeight: "medium",
+            children: f
+          }
+        ),
+        a && /* @__PURE__ */ o(
+          t,
+          {
+            icon: a,
+            size: r,
+            className: e.icon
+          }
+        )
+      ] })
+    }
+  );
+};
+G.displayName = "Toggle";
+export {
+  G 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    subtle,\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, subtle }), 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","subtle","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,QAAAC;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,SAAAnB,GAAS,OAAAE,GAAO,MAAAC,GAAM,QAAAC,GAAQ,QAAAH,EAAA,CAAQ,GAAGI,CAAS;AAAA,MACtF,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;AAEAtB,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 t=require("@vanilla-extract/recipes/createRuntimeFn");var a={recipe:t.createRuntimeFn({defaultClassName:"_1lqapti0",variantClassNames:{variant:{outlined:"_1lqapti1",ghost:"_1lqapti2"},subtle:{true:"_1lqapti3",false:"_1lqapti4"},color:{primary:"_1lqapti5",secondary:"_1lqapti6",tertiary:"_1lqapti7",destructive:"_1lqapti8",success:"_1lqapti9",warning:"_1lqaptia",info:"_1lqaptib"},size:{sm:"_1lqaptic",md:"_1lqaptid",lg:"_1lqaptie"},radius:{none:"_1lqaptif",xs:"_1lqaptig",sm:"_1lqaptih",md:"_1lqaptii",lg:"_1lqaptij",xl:"_1lqaptik","2xl":"_1lqaptil",full:"_1lqaptim"}},defaultVariants:{variant:"outlined",color:"primary",size:"md",radius:"sm"},compoundVariants:[[{variant:"ghost",color:"primary",subtle:!0},"_1lqaptin"],[{variant:"outlined",color:"primary",subtle:!0},"_1lqaptio"],[{variant:"ghost",color:"secondary",subtle:!0},"_1lqaptip"],[{variant:"outlined",color:"secondary",subtle:!0},"_1lqaptiq"],[{variant:"ghost",color:"tertiary",subtle:!0},"_1lqaptir"],[{variant:"outlined",color:"tertiary",subtle:!0},"_1lqaptis"],[{variant:"ghost",color:"destructive",subtle:!0},"_1lqaptit"],[{variant:"outlined",color:"destructive",subtle:!0},"_1lqaptiu"],[{variant:"ghost",color:"success",subtle:!0},"_1lqaptiv"],[{variant:"outlined",color:"success",subtle:!0},"_1lqaptiw"],[{variant:"ghost",color:"warning",subtle:!0},"_1lqaptix"],[{variant:"outlined",color:"warning",subtle:!0},"_1lqaptiy"],[{variant:"ghost",color:"info",subtle:!0},"_1lqaptiz"],[{variant:"outlined",color:"info",subtle:!0},"_1lqapti10"]]})};exports.TOGGLE_STYLES=a;
+//# 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: {
@@ -9,6 +9,12 @@ export declare const TOGGLE_BUTTON_STYLES: {
                 borderColor: "transparent";
             };
         };
+        subtle: {
+            true: {
+                backgroundColor: "transparent";
+            };
+            false: {};
+        };
         color: {
             primary: {
                 color: `var(--${string})`;
@@ -214,4 +220,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 t } from "@vanilla-extract/recipes/createRuntimeFn";
+var e = { recipe: t({ defaultClassName: "_1lqapti0", variantClassNames: { variant: { outlined: "_1lqapti1", ghost: "_1lqapti2" }, subtle: { true: "_1lqapti3", false: "_1lqapti4" }, color: { primary: "_1lqapti5", secondary: "_1lqapti6", tertiary: "_1lqapti7", destructive: "_1lqapti8", success: "_1lqapti9", warning: "_1lqaptia", info: "_1lqaptib" }, size: { sm: "_1lqaptic", md: "_1lqaptid", lg: "_1lqaptie" }, radius: { none: "_1lqaptif", xs: "_1lqaptig", sm: "_1lqaptih", md: "_1lqaptii", lg: "_1lqaptij", xl: "_1lqaptik", "2xl": "_1lqaptil", full: "_1lqaptim" } }, defaultVariants: { variant: "outlined", color: "primary", size: "md", radius: "sm" }, compoundVariants: [[{ variant: "ghost", color: "primary", subtle: !0 }, "_1lqaptin"], [{ variant: "outlined", color: "primary", subtle: !0 }, "_1lqaptio"], [{ variant: "ghost", color: "secondary", subtle: !0 }, "_1lqaptip"], [{ variant: "outlined", color: "secondary", subtle: !0 }, "_1lqaptiq"], [{ variant: "ghost", color: "tertiary", subtle: !0 }, "_1lqaptir"], [{ variant: "outlined", color: "tertiary", subtle: !0 }, "_1lqaptis"], [{ variant: "ghost", color: "destructive", subtle: !0 }, "_1lqaptit"], [{ variant: "outlined", color: "destructive", subtle: !0 }, "_1lqaptiu"], [{ variant: "ghost", color: "success", subtle: !0 }, "_1lqaptiv"], [{ variant: "outlined", color: "success", subtle: !0 }, "_1lqaptiw"], [{ variant: "ghost", color: "warning", subtle: !0 }, "_1lqaptix"], [{ variant: "outlined", color: "warning", subtle: !0 }, "_1lqaptiy"], [{ variant: "ghost", color: "info", subtle: !0 }, "_1lqaptiz"], [{ variant: "outlined", color: "info", subtle: !0 }, "_1lqapti10"]] }) };
+export {
+  e 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,13 @@
+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;
+    /** Uses the low-emphasis appearance for the selected variant. */
+    subtle?: boolean;
+    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;