@traefik-labs/faency 12.0.7 → 12.0.9

package/README.md

@@ -2,7 +2,7 @@
 
 This is the React component library and design system for [Traefik Labs](https://traefik.io).
 
-Built with React, Typescript, [Stitches](https://github.com/modulz/stitches) and [Radix UI Primitives](https://radix-ui.com/primitives/docs/overview/introduction).
+Built with React, Typescript, [Stitches](https://github.com/modulz/stitches), [vanilla-extract](https://vanilla-extract.style/) (migration in progress), and [Radix UI Primitives](https://radix-ui.com/primitives/docs/overview/introduction).
 
 ## Demo (Storybook)
 
@@ -46,9 +46,9 @@ const Container = styled(Flex, {
 const MyComponent = () => <Container>{children}</Container>;
 ```
 
-#### Using Vanilla Extract Components (New - Recommended)
+#### Using Vanilla Extract Components (Migration in Progress)
 
-For better performance with static CSS, use the new Vanilla Extract components:
+For better performance with static CSS, you can use the new Vanilla Extract components (many components are available, more being migrated).
 
 1. Import the CSS file in your app's entry point:
 
@@ -57,6 +57,7 @@ import '@traefik-labs/faency/dist/style.css';
 ```
 
 2. Wrap your app with the VanillaExtractThemeProvider:
+Wrap your app with the VanillaExtractThemeProvider:
 
 ```jsx
 import { VanillaExtractThemeProvider } from '@traefik-labs/faency';
@@ -71,11 +72,11 @@ const App = () => (
 );
 ```
 
-> **Note**: Vanilla Extract components use static CSS generated at build time, providing better performance than runtime CSS-in-JS. Components with the `Vanilla` suffix (e.g., `BadgeVanilla`, `BoxVanilla`) require the CSS import above.
+> **Note**: Vanilla Extract components use static CSS generated at build time, providing better performance than runtime CSS-in-JS. CSS is automatically included when you import components - no separate CSS import needed. Components with the `Vanilla` suffix (e.g., `BadgeVanilla`, `BoxVanilla`) are available. Not all components have Vanilla Extract versions yet - check the component documentation or use the Stitches version if a Vanilla version is not available.
 
 ## How to contribute
 
-- Make sure you have Node 18+, or if you prefer, you can work in a Docker container:
+- Make sure you have Node 20+, or if you prefer, you can work in a Docker container:
 
 ```sh
 docker run -it -v $(pwd):/usr/local/src/ -w /usr/local/src/ -p 3000:3000 node:latest bash

package/dist/components/AccessibleIcon/AccessibleIcon.vanilla.cjs

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const AccessibleIconPrimitive = require("@radix-ui/react-accessible-icon");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const AccessibleIconPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AccessibleIconPrimitive);
+const AccessibleIconVanilla = AccessibleIconPrimitive__namespace.Root;
+exports.AccessibleIconVanilla = AccessibleIconVanilla;
+//# sourceMappingURL=AccessibleIcon.vanilla.cjs.map

package/dist/components/AccessibleIcon/AccessibleIcon.vanilla.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessibleIcon.vanilla.cjs","sources":["../../../components/AccessibleIcon/AccessibleIcon.vanilla.tsx"],"sourcesContent":["import * as AccessibleIconPrimitive from '@radix-ui/react-accessible-icon';\n\nexport const AccessibleIconVanilla = AccessibleIconPrimitive.Root;\n"],"names":["AccessibleIconPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;AAEO,MAAM,wBAAwBA,mCAAwB;;"}

package/dist/components/AccessibleIcon/AccessibleIcon.vanilla.js

@@ -0,0 +1,6 @@
+import * as AccessibleIconPrimitive from "@radix-ui/react-accessible-icon";
+const AccessibleIconVanilla = AccessibleIconPrimitive.Root;
+export {
+  AccessibleIconVanilla
+};
+//# sourceMappingURL=AccessibleIcon.vanilla.js.map

package/dist/components/AccessibleIcon/AccessibleIcon.vanilla.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessibleIcon.vanilla.js","sources":["../../../components/AccessibleIcon/AccessibleIcon.vanilla.tsx"],"sourcesContent":["import * as AccessibleIconPrimitive from '@radix-ui/react-accessible-icon';\n\nexport const AccessibleIconVanilla = AccessibleIconPrimitive.Root;\n"],"names":[],"mappings":";AAEO,MAAM,wBAAwB,wBAAwB;"}

package/dist/components/Avatar/Avatar.vanilla.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const AvatarPrimitive = require("@radix-ui/react-avatar");
+const React = require("react");
+const Box_vanilla = require("../Box/Box.vanilla.cjs");
+const Avatar_vanilla_css = require("./Avatar.vanilla.css.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const AvatarPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(AvatarPrimitive);
+const AvatarVanillaComponent = React.forwardRef(({ alt, src, fallback, size, variant, shape, css, style, ...props }, ref) => {
+  const recipeClass = Avatar_vanilla_css.avatarRecipe({ size, variant, shape });
+  const fallbackRecipeClass = Avatar_vanilla_css.avatarFallbackRecipe({ size });
+  const wrapperCss = {
+    ...css,
+    position: "relative",
+    height: "fit-content",
+    width: "fit-content"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Box_vanilla.BoxVanilla, { css: wrapperCss, style, children: /* @__PURE__ */ jsxRuntime.jsxs(AvatarPrimitive__namespace.Root, { ref, className: recipeClass, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AvatarPrimitive__namespace.Image, { className: Avatar_vanilla_css.avatarImage, alt, src }),
+    /* @__PURE__ */ jsxRuntime.jsx(AvatarPrimitive__namespace.Fallback, { className: fallbackRecipeClass, children: fallback })
+  ] }) });
+});
+AvatarVanillaComponent.displayName = "AvatarVanilla";
+const AvatarVanilla = AvatarVanillaComponent;
+exports.AvatarVanilla = AvatarVanilla;
+//# sourceMappingURL=Avatar.vanilla.cjs.map

package/dist/components/Avatar/Avatar.vanilla.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.vanilla.cjs","sources":["../../../components/Avatar/Avatar.vanilla.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React, { forwardRef } from 'react';\n\nimport { CSSProps } from '../../styles/cssProps';\nimport { BoxVanilla } from '../Box/Box.vanilla';\nimport { avatarFallbackRecipe, avatarImage, avatarRecipe } from './Avatar.vanilla.css';\n\ntype AvatarRecipeVariants = NonNullable<RecipeVariants<typeof avatarRecipe>>;\n\ninterface AvatarOwnProps extends AvatarRecipeVariants, CSSProps {\n  alt?: string;\n  src?: string;\n  fallback?: React.ReactNode;\n}\n\nexport type AvatarVanillaProps = Omit<\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n  keyof AvatarOwnProps\n> &\n  AvatarOwnProps;\n\nconst AvatarVanillaComponent = forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarVanillaProps\n>(({ alt, src, fallback, size, variant, shape, css, style, ...props }, ref) => {\n  const recipeClass = avatarRecipe({ size, variant, shape });\n  const fallbackRecipeClass = avatarFallbackRecipe({ size });\n\n  // This CSS will be processed by the Box component\n  const wrapperCss = {\n    ...css,\n    position: 'relative' as const,\n    height: 'fit-content' as const,\n    width: 'fit-content' as const,\n  };\n\n  return (\n    <BoxVanilla css={wrapperCss} style={style}>\n      <AvatarPrimitive.Root ref={ref} className={recipeClass} {...props}>\n        <AvatarPrimitive.Image className={avatarImage} alt={alt} src={src} />\n        <AvatarPrimitive.Fallback className={fallbackRecipeClass}>\n          {fallback}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n    </BoxVanilla>\n  );\n});\n\nAvatarVanillaComponent.displayName = 'AvatarVanilla';\n\nexport const AvatarVanilla = AvatarVanillaComponent;\n"],"names":["forwardRef","avatarRecipe","avatarFallbackRecipe","jsx","BoxVanilla","jsxs","AvatarPrimitive","avatarImage"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,yBAAyBA,MAAAA,WAG7B,CAAC,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,OAAO,GAAG,MAAA,GAAS,QAAQ;AAC7E,QAAM,cAAcC,mBAAAA,aAAa,EAAE,MAAM,SAAS,OAAO;AACzD,QAAM,sBAAsBC,mBAAAA,qBAAqB,EAAE,MAAM;AAGzD,QAAM,aAAa;AAAA,IACjB,GAAG;AAAA,IACH,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAGT,SACEC,2BAAAA,IAACC,YAAAA,YAAA,EAAW,KAAK,YAAY,OAC3B,UAAAC,2BAAAA,KAACC,2BAAgB,MAAhB,EAAqB,KAAU,WAAW,aAAc,GAAG,OAC1D,UAAA;AAAA,IAAAH,2BAAAA,IAACG,2BAAgB,OAAhB,EAAsB,WAAWC,gCAAa,KAAU,KAAU;AAAA,mCAClED,2BAAgB,UAAhB,EAAyB,WAAW,qBAClC,UAAA,SAAA,CACH;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ,CAAC;AAED,uBAAuB,cAAc;AAE9B,MAAM,gBAAgB;;"}

package/dist/components/Avatar/Avatar.vanilla.css.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                    */
+const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
+var avatarRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_7on54e1 _7on54e0", variantClassNames: { size: { "1": "_7on54e2", "2": "_7on54e3", "3": "_7on54e4", "4": "_7on54e5", "5": "_7on54e6", "6": "_7on54e7" }, variant: { gray: "_7on54e8", red: "_7on54e9", purple: "_7on54ea", blue: "_7on54eb", green: "_7on54ec", orange: "_7on54ed" }, shape: { square: "_7on54ee", circle: "_7on54ef" } }, defaultVariants: { size: "2", variant: "gray", shape: "circle" }, compoundVariants: [] });
+var avatarImage = "_7on54eg";
+var avatarFallbackRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_7on54ei _7on54eh", variantClassNames: { size: { "1": "_7on54ej", "2": "_7on54ek", "3": "_7on54el", "4": "_7on54em", "5": "_7on54en", "6": "_7on54eo" } }, defaultVariants: { size: "2" }, compoundVariants: [] });
+exports.avatarFallbackRecipe = avatarFallbackRecipe;
+exports.avatarImage = avatarImage;
+exports.avatarRecipe = avatarRecipe;
+//# sourceMappingURL=Avatar.vanilla.css.cjs.map

package/dist/components/Avatar/Avatar.vanilla.css.cjs.map

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

package/dist/components/Avatar/Avatar.vanilla.css.js

@@ -0,0 +1,11 @@
+/* empty css                                  */
+import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+var avatarRecipe = createRuntimeFn({ defaultClassName: "_7on54e1 _7on54e0", variantClassNames: { size: { "1": "_7on54e2", "2": "_7on54e3", "3": "_7on54e4", "4": "_7on54e5", "5": "_7on54e6", "6": "_7on54e7" }, variant: { gray: "_7on54e8", red: "_7on54e9", purple: "_7on54ea", blue: "_7on54eb", green: "_7on54ec", orange: "_7on54ed" }, shape: { square: "_7on54ee", circle: "_7on54ef" } }, defaultVariants: { size: "2", variant: "gray", shape: "circle" }, compoundVariants: [] });
+var avatarImage = "_7on54eg";
+var avatarFallbackRecipe = createRuntimeFn({ defaultClassName: "_7on54ei _7on54eh", variantClassNames: { size: { "1": "_7on54ej", "2": "_7on54ek", "3": "_7on54el", "4": "_7on54em", "5": "_7on54en", "6": "_7on54eo" } }, defaultVariants: { size: "2" }, compoundVariants: [] });
+export {
+  avatarFallbackRecipe,
+  avatarImage,
+  avatarRecipe
+};
+//# sourceMappingURL=Avatar.vanilla.css.js.map

package/dist/components/Avatar/Avatar.vanilla.css.js.map

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

package/dist/components/Avatar/Avatar.vanilla.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { forwardRef } from "react";
+import { BoxVanilla } from "../Box/Box.vanilla.js";
+import { avatarRecipe, avatarFallbackRecipe, avatarImage } from "./Avatar.vanilla.css.js";
+const AvatarVanillaComponent = forwardRef(({ alt, src, fallback, size, variant, shape, css, style, ...props }, ref) => {
+  const recipeClass = avatarRecipe({ size, variant, shape });
+  const fallbackRecipeClass = avatarFallbackRecipe({ size });
+  const wrapperCss = {
+    ...css,
+    position: "relative",
+    height: "fit-content",
+    width: "fit-content"
+  };
+  return /* @__PURE__ */ jsx(BoxVanilla, { css: wrapperCss, style, children: /* @__PURE__ */ jsxs(AvatarPrimitive.Root, { ref, className: recipeClass, ...props, children: [
+    /* @__PURE__ */ jsx(AvatarPrimitive.Image, { className: avatarImage, alt, src }),
+    /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { className: fallbackRecipeClass, children: fallback })
+  ] }) });
+});
+AvatarVanillaComponent.displayName = "AvatarVanilla";
+const AvatarVanilla = AvatarVanillaComponent;
+export {
+  AvatarVanilla
+};
+//# sourceMappingURL=Avatar.vanilla.js.map

package/dist/components/Avatar/Avatar.vanilla.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.vanilla.js","sources":["../../../components/Avatar/Avatar.vanilla.tsx"],"sourcesContent":["import * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport React, { forwardRef } from 'react';\n\nimport { CSSProps } from '../../styles/cssProps';\nimport { BoxVanilla } from '../Box/Box.vanilla';\nimport { avatarFallbackRecipe, avatarImage, avatarRecipe } from './Avatar.vanilla.css';\n\ntype AvatarRecipeVariants = NonNullable<RecipeVariants<typeof avatarRecipe>>;\n\ninterface AvatarOwnProps extends AvatarRecipeVariants, CSSProps {\n  alt?: string;\n  src?: string;\n  fallback?: React.ReactNode;\n}\n\nexport type AvatarVanillaProps = Omit<\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n  keyof AvatarOwnProps\n> &\n  AvatarOwnProps;\n\nconst AvatarVanillaComponent = forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarVanillaProps\n>(({ alt, src, fallback, size, variant, shape, css, style, ...props }, ref) => {\n  const recipeClass = avatarRecipe({ size, variant, shape });\n  const fallbackRecipeClass = avatarFallbackRecipe({ size });\n\n  // This CSS will be processed by the Box component\n  const wrapperCss = {\n    ...css,\n    position: 'relative' as const,\n    height: 'fit-content' as const,\n    width: 'fit-content' as const,\n  };\n\n  return (\n    <BoxVanilla css={wrapperCss} style={style}>\n      <AvatarPrimitive.Root ref={ref} className={recipeClass} {...props}>\n        <AvatarPrimitive.Image className={avatarImage} alt={alt} src={src} />\n        <AvatarPrimitive.Fallback className={fallbackRecipeClass}>\n          {fallback}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n    </BoxVanilla>\n  );\n});\n\nAvatarVanillaComponent.displayName = 'AvatarVanilla';\n\nexport const AvatarVanilla = AvatarVanillaComponent;\n"],"names":[],"mappings":";;;;;AAsBA,MAAM,yBAAyB,WAG7B,CAAC,EAAE,KAAK,KAAK,UAAU,MAAM,SAAS,OAAO,KAAK,OAAO,GAAG,MAAA,GAAS,QAAQ;AAC7E,QAAM,cAAc,aAAa,EAAE,MAAM,SAAS,OAAO;AACzD,QAAM,sBAAsB,qBAAqB,EAAE,MAAM;AAGzD,QAAM,aAAa;AAAA,IACjB,GAAG;AAAA,IACH,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAGT,SACE,oBAAC,YAAA,EAAW,KAAK,YAAY,OAC3B,UAAA,qBAAC,gBAAgB,MAAhB,EAAqB,KAAU,WAAW,aAAc,GAAG,OAC1D,UAAA;AAAA,IAAA,oBAAC,gBAAgB,OAAhB,EAAsB,WAAW,aAAa,KAAU,KAAU;AAAA,wBAClE,gBAAgB,UAAhB,EAAyB,WAAW,qBAClC,UAAA,SAAA,CACH;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ,CAAC;AAED,uBAAuB,cAAc;AAE9B,MAAM,gBAAgB;"}

package/dist/components/Bubble/Bubble.vanilla.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const dynamic = require("@vanilla-extract/dynamic");
+const React = require("react");
+const cssProps = require("../../styles/cssProps.cjs");
+const themeContext = require("../../styles/themeContext.cjs");
+const Bubble_vanilla_css = require("./Bubble.vanilla.css.cjs");
+const BubbleVanillaComponentImpl = React.forwardRef(
+  ({ as, className, css, style, size, variant, noAnimation, ...props }, ref) => {
+    const Component = as || "div";
+    const { colors } = themeContext.useVanillaExtractTheme();
+    const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
+    const mergedStyles = {
+      ...cssStyles,
+      ...style,
+      ...dynamic.assignInlineVars(vars)
+    };
+    const recipeClass = Bubble_vanilla_css.bubbleRecipe({ size, variant, noAnimation });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: `${recipeClass} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props
+      }
+    );
+  }
+);
+BubbleVanillaComponentImpl.displayName = "BubbleVanilla";
+const BubbleVanilla = BubbleVanillaComponentImpl;
+exports.BubbleVanilla = BubbleVanilla;
+//# sourceMappingURL=Bubble.vanilla.cjs.map

package/dist/components/Bubble/Bubble.vanilla.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bubble.vanilla.cjs","sources":["../../../components/Bubble/Bubble.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { bubbleRecipe } from './Bubble.vanilla.css';\n\ntype BubbleRecipeVariants = NonNullable<RecipeVariants<typeof bubbleRecipe>>;\n\ninterface BubbleOwnProps extends BubbleRecipeVariants, CSSProps {}\n\nexport type BubbleVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  BubbleOwnProps\n>;\n\ntype BubbleVanillaComponent = PolymorphicComponent<'div', BubbleVanillaProps<ElementType>>;\n\nconst BubbleVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, size, variant, noAnimation, ...props }: BubbleVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = bubbleRecipe({ size, variant, noAnimation });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nBubbleVanillaComponentImpl.displayName = 'BubbleVanilla';\n\nexport const BubbleVanilla = BubbleVanillaComponentImpl as BubbleVanillaComponent;\n"],"names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","bubbleRecipe","jsx"],"mappings":";;;;;;;;AAwBA,MAAM,6BAA6BA,MAAAA;AAAAA,EACjC,CACE,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,aAAa,GAAG,MAAA,GAC5D,QACG;AACH,UAAM,YAAY,MAAM;AAExB,UAAM,EAAE,OAAA,IAAWC,oCAAA;AAEnB,UAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAE7D,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAGC,QAAAA,iBAAiB,IAAI;AAAA,IAAA;AAG1B,UAAM,cAAcC,mBAAAA,aAAa,EAAE,MAAM,SAAS,aAAa;AAE/D,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,2BAA2B,cAAc;AAElC,MAAM,gBAAgB;;"}

package/dist/components/Bubble/Bubble.vanilla.css.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                    */
+const createRuntimeFn62c9670f_esm = require("../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs");
+var bubbleRecipe = createRuntimeFn62c9670f_esm.c({ defaultClassName: "_1fnlquw2 _1fnlquw1", variantClassNames: { variant: { red: "_1fnlquw3", green: "_1fnlquw4", orange: "_1fnlquw5", blue: "_1fnlquw6", yellow: "_1fnlquw7", purple: "_1fnlquw8", gray: "_1fnlquw9" }, size: { "x-small": "_1fnlquwa", small: "_1fnlquwb", medium: "_1fnlquwc", large: "_1fnlquwd", "x-large": "_1fnlquwe" }, noAnimation: { true: "_1fnlquwf" } }, defaultVariants: { size: "small", noAnimation: false }, compoundVariants: [] });
+exports.bubbleRecipe = bubbleRecipe;
+//# sourceMappingURL=Bubble.vanilla.css.cjs.map

package/dist/components/Bubble/Bubble.vanilla.css.cjs.map

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

package/dist/components/Bubble/Bubble.vanilla.css.js

@@ -0,0 +1,7 @@
+/* empty css                                  */
+import { c as createRuntimeFn } from "../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";
+var bubbleRecipe = createRuntimeFn({ defaultClassName: "_1fnlquw2 _1fnlquw1", variantClassNames: { variant: { red: "_1fnlquw3", green: "_1fnlquw4", orange: "_1fnlquw5", blue: "_1fnlquw6", yellow: "_1fnlquw7", purple: "_1fnlquw8", gray: "_1fnlquw9" }, size: { "x-small": "_1fnlquwa", small: "_1fnlquwb", medium: "_1fnlquwc", large: "_1fnlquwd", "x-large": "_1fnlquwe" }, noAnimation: { true: "_1fnlquwf" } }, defaultVariants: { size: "small", noAnimation: false }, compoundVariants: [] });
+export {
+  bubbleRecipe
+};
+//# sourceMappingURL=Bubble.vanilla.css.js.map

package/dist/components/Bubble/Bubble.vanilla.css.js.map

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

package/dist/components/Bubble/Bubble.vanilla.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { forwardRef } from "react";
+import { processCSSProp } from "../../styles/cssProps.js";
+import { useVanillaExtractTheme } from "../../styles/themeContext.js";
+import { bubbleRecipe } from "./Bubble.vanilla.css.js";
+const BubbleVanillaComponentImpl = forwardRef(
+  ({ as, className, css, style, size, variant, noAnimation, ...props }, ref) => {
+    const Component = as || "div";
+    const { colors } = useVanillaExtractTheme();
+    const { style: cssStyles, vars } = processCSSProp(css, colors);
+    const mergedStyles = {
+      ...cssStyles,
+      ...style,
+      ...assignInlineVars(vars)
+    };
+    const recipeClass = bubbleRecipe({ size, variant, noAnimation });
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: `${recipeClass} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props
+      }
+    );
+  }
+);
+BubbleVanillaComponentImpl.displayName = "BubbleVanilla";
+const BubbleVanilla = BubbleVanillaComponentImpl;
+export {
+  BubbleVanilla
+};
+//# sourceMappingURL=Bubble.vanilla.js.map

package/dist/components/Bubble/Bubble.vanilla.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bubble.vanilla.js","sources":["../../../components/Bubble/Bubble.vanilla.tsx"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { RecipeVariants } from '@vanilla-extract/recipes';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { bubbleRecipe } from './Bubble.vanilla.css';\n\ntype BubbleRecipeVariants = NonNullable<RecipeVariants<typeof bubbleRecipe>>;\n\ninterface BubbleOwnProps extends BubbleRecipeVariants, CSSProps {}\n\nexport type BubbleVanillaProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  BubbleOwnProps\n>;\n\ntype BubbleVanillaComponent = PolymorphicComponent<'div', BubbleVanillaProps<ElementType>>;\n\nconst BubbleVanillaComponentImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, size, variant, noAnimation, ...props }: BubbleVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = as || 'div';\n\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    const recipeClass = bubbleRecipe({ size, variant, noAnimation });\n\n    return (\n      <Component\n        ref={ref}\n        className={`${recipeClass} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...props}\n      />\n    );\n  },\n);\n\nBubbleVanillaComponentImpl.displayName = 'BubbleVanilla';\n\nexport const BubbleVanilla = BubbleVanillaComponentImpl as BubbleVanillaComponent;\n"],"names":[],"mappings":";;;;;;AAwBA,MAAM,6BAA6B;AAAA,EACjC,CACE,EAAE,IAAI,WAAW,KAAK,OAAO,MAAM,SAAS,aAAa,GAAG,MAAA,GAC5D,QACG;AACH,UAAM,YAAY,MAAM;AAExB,UAAM,EAAE,OAAA,IAAW,uBAAA;AAEnB,UAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAE7D,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG,iBAAiB,IAAI;AAAA,IAAA;AAG1B,UAAM,cAAc,aAAa,EAAE,MAAM,SAAS,aAAa;AAE/D,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,WAAW,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QAC/C,OAAO;AAAA,QACN,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,2BAA2B,cAAc;AAElC,MAAM,gBAAgB;"}

package/dist/components/ButtonSwitch/ButtonSwitch.vanilla.cjs

@@ -24,44 +24,80 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const ToggleGroupPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(ToggleGroupPrimitive);
-const ButtonSwitchContainerVanilla = React.forwardRef(({ className, css, style, ...props }, ref) => {
-  const { colors } = themeContext.useVanillaExtractTheme();
-  const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
-  const mergedStyles = {
-    ...cssStyles,
-    ...style,
-    ...dynamic.assignInlineVars(vars)
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ToggleGroupPrimitive__namespace.Root,
-    {
-      ref,
-      className: `${ButtonSwitch_vanilla_css.buttonSwitchContainer} ${className || ""}`.trim(),
-      style: mergedStyles,
-      ...props
+const ButtonSwitchContainerVanillaImpl = React.forwardRef(
+  ({ as, className, css, style, children, ...props }, ref) => {
+    const Component = as || "div";
+    const { colors } = themeContext.useVanillaExtractTheme();
+    const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
+    const mergedStyles = {
+      ...cssStyles,
+      ...style,
+      ...dynamic.assignInlineVars(vars)
+    };
+    if (as) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Component,
+        {
+          ref,
+          className: `${ButtonSwitch_vanilla_css.buttonSwitchContainer} ${className || ""}`.trim(),
+          style: mergedStyles,
+          role: "group",
+          ...props,
+          children
+        }
+      );
     }
-  );
-});
-ButtonSwitchContainerVanilla.displayName = "ButtonSwitchContainerVanilla";
-const ButtonSwitchItemVanilla = React.forwardRef(({ className, css, style, ...props }, ref) => {
-  const { colors } = themeContext.useVanillaExtractTheme();
-  const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
-  const mergedStyles = {
-    ...cssStyles,
-    ...style,
-    ...dynamic.assignInlineVars(vars)
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ToggleGroupPrimitive__namespace.Item,
-    {
-      ref,
-      className: `${ButtonSwitch_vanilla_css.buttonSwitchItem} ${className || ""}`.trim(),
-      style: mergedStyles,
-      ...props
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ToggleGroupPrimitive__namespace.Root,
+      {
+        ref,
+        className: `${ButtonSwitch_vanilla_css.buttonSwitchContainer} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props,
+        children
+      }
+    );
+  }
+);
+ButtonSwitchContainerVanillaImpl.displayName = "ButtonSwitchContainerVanilla";
+const ButtonSwitchContainerVanilla = ButtonSwitchContainerVanillaImpl;
+const ButtonSwitchItemVanillaImpl = React.forwardRef(
+  ({ as, className, css, style, children, ...props }, ref) => {
+    const Component = as || "button";
+    const { colors } = themeContext.useVanillaExtractTheme();
+    const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
+    const mergedStyles = {
+      ...cssStyles,
+      ...style,
+      ...dynamic.assignInlineVars(vars)
+    };
+    if (as) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Component,
+        {
+          ref,
+          className: `${ButtonSwitch_vanilla_css.buttonSwitchItem} ${className || ""}`.trim(),
+          style: mergedStyles,
+          role: "radio",
+          ...props,
+          children
+        }
+      );
     }
-  );
-});
-ButtonSwitchItemVanilla.displayName = "ButtonSwitchItemVanilla";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ToggleGroupPrimitive__namespace.Item,
+      {
+        ref,
+        className: `${ButtonSwitch_vanilla_css.buttonSwitchItem} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props,
+        children
+      }
+    );
+  }
+);
+ButtonSwitchItemVanillaImpl.displayName = "ButtonSwitchItemVanilla";
+const ButtonSwitchItemVanilla = ButtonSwitchItemVanillaImpl;
 exports.ButtonSwitchContainerVanilla = ButtonSwitchContainerVanilla;
 exports.ButtonSwitchItemVanilla = ButtonSwitchItemVanilla;
 //# sourceMappingURL=ButtonSwitch.vanilla.cjs.map

package/dist/components/ButtonSwitch/ButtonSwitch.vanilla.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonSwitch.vanilla.cjs","sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ntype ButtonSwitchContainerVanillaProps = (\n  | ToggleGroupPrimitive.ToggleGroupSingleProps\n  | ToggleGroupPrimitive.ToggleGroupMultipleProps\n) &\n  CSSProps;\n\nexport const ButtonSwitchContainerVanilla = forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  ButtonSwitchContainerVanillaProps\n>(({ className, css, style, ...props }, ref) => {\n  const { colors } = useVanillaExtractTheme();\n\n  const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n  const mergedStyles = {\n    ...cssStyles,\n    ...style,\n    ...assignInlineVars(vars),\n  };\n\n  return (\n    <ToggleGroupPrimitive.Root\n      ref={ref}\n      className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n      style={mergedStyles}\n      {...props}\n    />\n  );\n});\n\nButtonSwitchContainerVanilla.displayName = 'ButtonSwitchContainerVanilla';\n\n// Item Component\ntype ButtonSwitchItemVanillaProps = Omit<ToggleGroupPrimitive.ToggleGroupItemProps, 'css'> &\n  CSSProps;\n\nexport const ButtonSwitchItemVanilla = forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  ButtonSwitchItemVanillaProps\n>(({ className, css, style, ...props }, ref) => {\n  const { colors } = useVanillaExtractTheme();\n\n  const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n  const mergedStyles = {\n    ...cssStyles,\n    ...style,\n    ...assignInlineVars(vars),\n  };\n\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={`${buttonSwitchItem} ${className || ''}`.trim()}\n      style={mergedStyles}\n      {...props}\n    />\n  );\n});\n\nButtonSwitchItemVanilla.displayName = 'ButtonSwitchItemVanilla';\n"],"names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","jsx","ToggleGroupPrimitive","buttonSwitchContainer","buttonSwitchItem"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,+BAA+BA,MAAAA,WAG1C,CAAC,EAAE,WAAW,KAAK,OAAO,GAAG,MAAA,GAAS,QAAQ;AAC9C,QAAM,EAAE,OAAA,IAAWC,oCAAA;AAEnB,QAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAE7D,QAAM,eAAe;AAAA,IACnB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAGC,QAAAA,iBAAiB,IAAI;AAAA,EAAA;AAG1B,SACEC,2BAAAA;AAAAA,IAACC,gCAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,WAAW,GAAGC,8CAAqB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,MACzD,OAAO;AAAA,MACN,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAED,6BAA6B,cAAc;AAMpC,MAAM,0BAA0BN,MAAAA,WAGrC,CAAC,EAAE,WAAW,KAAK,OAAO,GAAG,MAAA,GAAS,QAAQ;AAC9C,QAAM,EAAE,OAAA,IAAWC,oCAAA;AAEnB,QAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAE7D,QAAM,eAAe;AAAA,IACnB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAGC,QAAAA,iBAAiB,IAAI;AAAA,EAAA;AAG1B,SACEC,2BAAAA;AAAAA,IAACC,gCAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,WAAW,GAAGE,yCAAgB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,MACpD,OAAO;AAAA,MACN,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAED,wBAAwB,cAAc;;;"}
+{"version":3,"file":"ButtonSwitch.vanilla.cjs","sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ninterface ButtonSwitchContainerOwnProps extends CSSProps {\n  type?: 'single' | 'multiple';\n  value?: string | string[];\n  defaultValue?: string | string[];\n  onValueChange?: (value: any) => void;\n  disabled?: boolean;\n  rovingFocus?: boolean;\n  loop?: boolean;\n  orientation?: 'horizontal' | 'vertical';\n  dir?: 'ltr' | 'rtl';\n}\n\nexport type ButtonSwitchContainerVanillaProps<C extends ElementType = 'div'> =\n  PolymorphicComponentProps<C, ButtonSwitchContainerOwnProps>;\n\ntype ButtonSwitchContainerVanillaComponent = PolymorphicComponent<\n  'div',\n  ButtonSwitchContainerVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchContainerVanillaImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, children, ...props }: ButtonSwitchContainerVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = (as || 'div') as any;\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    if (as) {\n      return (\n        <Component\n          ref={ref}\n          className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n          style={mergedStyles}\n          role=\"group\"\n          {...props}\n        >\n          {children}\n        </Component>\n      );\n    }\n\n    return (\n      <ToggleGroupPrimitive.Root\n        ref={ref as any}\n        className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...(props as any)}\n      >\n        {children}\n      </ToggleGroupPrimitive.Root>\n    );\n  },\n);\n\nButtonSwitchContainerVanillaImpl.displayName = 'ButtonSwitchContainerVanilla';\n\nexport const ButtonSwitchContainerVanilla =\n  ButtonSwitchContainerVanillaImpl as ButtonSwitchContainerVanillaComponent;\n\n// Item Component\ninterface ButtonSwitchItemOwnProps extends CSSProps {\n  value: string;\n  disabled?: boolean;\n}\n\nexport type ButtonSwitchItemVanillaProps<C extends ElementType = 'button'> =\n  PolymorphicComponentProps<C, ButtonSwitchItemOwnProps>;\n\ntype ButtonSwitchItemVanillaComponent = PolymorphicComponent<\n  'button',\n  ButtonSwitchItemVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchItemVanillaImpl = forwardRef(\n  <C extends ElementType = 'button'>(\n    { as, className, css, style, children, ...props }: ButtonSwitchItemVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = (as || 'button') as any;\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    if (as) {\n      return (\n        <Component\n          ref={ref}\n          className={`${buttonSwitchItem} ${className || ''}`.trim()}\n          style={mergedStyles}\n          role=\"radio\"\n          {...props}\n        >\n          {children}\n        </Component>\n      );\n    }\n\n    return (\n      <ToggleGroupPrimitive.Item\n        ref={ref as any}\n        className={`${buttonSwitchItem} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...(props as any)}\n      >\n        {children}\n      </ToggleGroupPrimitive.Item>\n    );\n  },\n);\n\nButtonSwitchItemVanillaImpl.displayName = 'ButtonSwitchItemVanilla';\n\nexport const ButtonSwitchItemVanilla =\n  ButtonSwitchItemVanillaImpl as ButtonSwitchItemVanillaComponent;\n"],"names":["forwardRef","useVanillaExtractTheme","processCSSProp","assignInlineVars","jsx","buttonSwitchContainer","ToggleGroupPrimitive","buttonSwitchItem"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAM,mCAAmCA,MAAAA;AAAAA,EACvC,CACE,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,MAAA,GAC1C,QACG;AACH,UAAM,YAAa,MAAM;AACzB,UAAM,EAAE,OAAA,IAAWC,oCAAA;AAEnB,UAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAE7D,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAGC,QAAAA,iBAAiB,IAAI;AAAA,IAAA;AAG1B,QAAI,IAAI;AACN,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAGC,8CAAqB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,UACzD,OAAO;AAAA,UACP,MAAK;AAAA,UACJ,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAEA,WACED,2BAAAA;AAAAA,MAACE,gCAAqB;AAAA,MAArB;AAAA,QACC;AAAA,QACA,WAAW,GAAGD,8CAAqB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QACzD,OAAO;AAAA,QACN,GAAI;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,iCAAiC,cAAc;AAExC,MAAM,+BACX;AAgBF,MAAM,8BAA8BL,MAAAA;AAAAA,EAClC,CACE,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,MAAA,GAC1C,QACG;AACH,UAAM,YAAa,MAAM;AACzB,UAAM,EAAE,OAAA,IAAWC,oCAAA;AAEnB,UAAM,EAAE,OAAO,WAAW,SAASC,SAAAA,eAAe,KAAK,MAAM;AAE7D,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAGC,QAAAA,iBAAiB,IAAI;AAAA,IAAA;AAG1B,QAAI,IAAI;AACN,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAGG,yCAAgB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,UACpD,OAAO;AAAA,UACP,MAAK;AAAA,UACJ,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAEA,WACEH,2BAAAA;AAAAA,MAACE,gCAAqB;AAAA,MAArB;AAAA,QACC;AAAA,QACA,WAAW,GAAGC,yCAAgB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QACpD,OAAO;AAAA,QACN,GAAI;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,4BAA4B,cAAc;AAEnC,MAAM,0BACX;;;"}

package/dist/components/ButtonSwitch/ButtonSwitch.vanilla.js

@@ -5,44 +5,80 @@ import { forwardRef } from "react";
 import { processCSSProp } from "../../styles/cssProps.js";
 import { useVanillaExtractTheme } from "../../styles/themeContext.js";
 import { buttonSwitchContainer, buttonSwitchItem } from "./ButtonSwitch.vanilla.css.js";
-const ButtonSwitchContainerVanilla = forwardRef(({ className, css, style, ...props }, ref) => {
-  const { colors } = useVanillaExtractTheme();
-  const { style: cssStyles, vars } = processCSSProp(css, colors);
-  const mergedStyles = {
-    ...cssStyles,
-    ...style,
-    ...assignInlineVars(vars)
-  };
-  return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Root,
-    {
-      ref,
-      className: `${buttonSwitchContainer} ${className || ""}`.trim(),
-      style: mergedStyles,
-      ...props
+const ButtonSwitchContainerVanillaImpl = forwardRef(
+  ({ as, className, css, style, children, ...props }, ref) => {
+    const Component = as || "div";
+    const { colors } = useVanillaExtractTheme();
+    const { style: cssStyles, vars } = processCSSProp(css, colors);
+    const mergedStyles = {
+      ...cssStyles,
+      ...style,
+      ...assignInlineVars(vars)
+    };
+    if (as) {
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ref,
+          className: `${buttonSwitchContainer} ${className || ""}`.trim(),
+          style: mergedStyles,
+          role: "group",
+          ...props,
+          children
+        }
+      );
     }
-  );
-});
-ButtonSwitchContainerVanilla.displayName = "ButtonSwitchContainerVanilla";
-const ButtonSwitchItemVanilla = forwardRef(({ className, css, style, ...props }, ref) => {
-  const { colors } = useVanillaExtractTheme();
-  const { style: cssStyles, vars } = processCSSProp(css, colors);
-  const mergedStyles = {
-    ...cssStyles,
-    ...style,
-    ...assignInlineVars(vars)
-  };
-  return /* @__PURE__ */ jsx(
-    ToggleGroupPrimitive.Item,
-    {
-      ref,
-      className: `${buttonSwitchItem} ${className || ""}`.trim(),
-      style: mergedStyles,
-      ...props
+    return /* @__PURE__ */ jsx(
+      ToggleGroupPrimitive.Root,
+      {
+        ref,
+        className: `${buttonSwitchContainer} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props,
+        children
+      }
+    );
+  }
+);
+ButtonSwitchContainerVanillaImpl.displayName = "ButtonSwitchContainerVanilla";
+const ButtonSwitchContainerVanilla = ButtonSwitchContainerVanillaImpl;
+const ButtonSwitchItemVanillaImpl = forwardRef(
+  ({ as, className, css, style, children, ...props }, ref) => {
+    const Component = as || "button";
+    const { colors } = useVanillaExtractTheme();
+    const { style: cssStyles, vars } = processCSSProp(css, colors);
+    const mergedStyles = {
+      ...cssStyles,
+      ...style,
+      ...assignInlineVars(vars)
+    };
+    if (as) {
+      return /* @__PURE__ */ jsx(
+        Component,
+        {
+          ref,
+          className: `${buttonSwitchItem} ${className || ""}`.trim(),
+          style: mergedStyles,
+          role: "radio",
+          ...props,
+          children
+        }
+      );
     }
-  );
-});
-ButtonSwitchItemVanilla.displayName = "ButtonSwitchItemVanilla";
+    return /* @__PURE__ */ jsx(
+      ToggleGroupPrimitive.Item,
+      {
+        ref,
+        className: `${buttonSwitchItem} ${className || ""}`.trim(),
+        style: mergedStyles,
+        ...props,
+        children
+      }
+    );
+  }
+);
+ButtonSwitchItemVanillaImpl.displayName = "ButtonSwitchItemVanilla";
+const ButtonSwitchItemVanilla = ButtonSwitchItemVanillaImpl;
 export {
   ButtonSwitchContainerVanilla,
   ButtonSwitchItemVanilla

package/dist/components/ButtonSwitch/ButtonSwitch.vanilla.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonSwitch.vanilla.js","sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ntype ButtonSwitchContainerVanillaProps = (\n  | ToggleGroupPrimitive.ToggleGroupSingleProps\n  | ToggleGroupPrimitive.ToggleGroupMultipleProps\n) &\n  CSSProps;\n\nexport const ButtonSwitchContainerVanilla = forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n  ButtonSwitchContainerVanillaProps\n>(({ className, css, style, ...props }, ref) => {\n  const { colors } = useVanillaExtractTheme();\n\n  const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n  const mergedStyles = {\n    ...cssStyles,\n    ...style,\n    ...assignInlineVars(vars),\n  };\n\n  return (\n    <ToggleGroupPrimitive.Root\n      ref={ref}\n      className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n      style={mergedStyles}\n      {...props}\n    />\n  );\n});\n\nButtonSwitchContainerVanilla.displayName = 'ButtonSwitchContainerVanilla';\n\n// Item Component\ntype ButtonSwitchItemVanillaProps = Omit<ToggleGroupPrimitive.ToggleGroupItemProps, 'css'> &\n  CSSProps;\n\nexport const ButtonSwitchItemVanilla = forwardRef<\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n  ButtonSwitchItemVanillaProps\n>(({ className, css, style, ...props }, ref) => {\n  const { colors } = useVanillaExtractTheme();\n\n  const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n  const mergedStyles = {\n    ...cssStyles,\n    ...style,\n    ...assignInlineVars(vars),\n  };\n\n  return (\n    <ToggleGroupPrimitive.Item\n      ref={ref}\n      className={`${buttonSwitchItem} ${className || ''}`.trim()}\n      style={mergedStyles}\n      {...props}\n    />\n  );\n});\n\nButtonSwitchItemVanilla.displayName = 'ButtonSwitchItemVanilla';\n"],"names":[],"mappings":";;;;;;;AAeO,MAAM,+BAA+B,WAG1C,CAAC,EAAE,WAAW,KAAK,OAAO,GAAG,MAAA,GAAS,QAAQ;AAC9C,QAAM,EAAE,OAAA,IAAW,uBAAA;AAEnB,QAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAE7D,QAAM,eAAe;AAAA,IACnB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG,iBAAiB,IAAI;AAAA,EAAA;AAG1B,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,WAAW,GAAG,qBAAqB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,MACzD,OAAO;AAAA,MACN,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAED,6BAA6B,cAAc;AAMpC,MAAM,0BAA0B,WAGrC,CAAC,EAAE,WAAW,KAAK,OAAO,GAAG,MAAA,GAAS,QAAQ;AAC9C,QAAM,EAAE,OAAA,IAAW,uBAAA;AAEnB,QAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAE7D,QAAM,eAAe;AAAA,IACnB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG,iBAAiB,IAAI;AAAA,EAAA;AAG1B,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,WAAW,GAAG,gBAAgB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,MACpD,OAAO;AAAA,MACN,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AAED,wBAAwB,cAAc;"}
+{"version":3,"file":"ButtonSwitch.vanilla.js","sources":["../../../components/ButtonSwitch/ButtonSwitch.vanilla.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { ElementType, forwardRef } from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport {\n  PolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n} from '../../styles/polymorphic';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { buttonSwitchContainer, buttonSwitchItem } from './ButtonSwitch.vanilla.css';\n\n// Container Component\ninterface ButtonSwitchContainerOwnProps extends CSSProps {\n  type?: 'single' | 'multiple';\n  value?: string | string[];\n  defaultValue?: string | string[];\n  onValueChange?: (value: any) => void;\n  disabled?: boolean;\n  rovingFocus?: boolean;\n  loop?: boolean;\n  orientation?: 'horizontal' | 'vertical';\n  dir?: 'ltr' | 'rtl';\n}\n\nexport type ButtonSwitchContainerVanillaProps<C extends ElementType = 'div'> =\n  PolymorphicComponentProps<C, ButtonSwitchContainerOwnProps>;\n\ntype ButtonSwitchContainerVanillaComponent = PolymorphicComponent<\n  'div',\n  ButtonSwitchContainerVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchContainerVanillaImpl = forwardRef(\n  <C extends ElementType = 'div'>(\n    { as, className, css, style, children, ...props }: ButtonSwitchContainerVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = (as || 'div') as any;\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    if (as) {\n      return (\n        <Component\n          ref={ref}\n          className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n          style={mergedStyles}\n          role=\"group\"\n          {...props}\n        >\n          {children}\n        </Component>\n      );\n    }\n\n    return (\n      <ToggleGroupPrimitive.Root\n        ref={ref as any}\n        className={`${buttonSwitchContainer} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...(props as any)}\n      >\n        {children}\n      </ToggleGroupPrimitive.Root>\n    );\n  },\n);\n\nButtonSwitchContainerVanillaImpl.displayName = 'ButtonSwitchContainerVanilla';\n\nexport const ButtonSwitchContainerVanilla =\n  ButtonSwitchContainerVanillaImpl as ButtonSwitchContainerVanillaComponent;\n\n// Item Component\ninterface ButtonSwitchItemOwnProps extends CSSProps {\n  value: string;\n  disabled?: boolean;\n}\n\nexport type ButtonSwitchItemVanillaProps<C extends ElementType = 'button'> =\n  PolymorphicComponentProps<C, ButtonSwitchItemOwnProps>;\n\ntype ButtonSwitchItemVanillaComponent = PolymorphicComponent<\n  'button',\n  ButtonSwitchItemVanillaProps<ElementType>\n>;\n\nconst ButtonSwitchItemVanillaImpl = forwardRef(\n  <C extends ElementType = 'button'>(\n    { as, className, css, style, children, ...props }: ButtonSwitchItemVanillaProps<C>,\n    ref?: PolymorphicRef<C>,\n  ) => {\n    const Component = (as || 'button') as any;\n    const { colors } = useVanillaExtractTheme();\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n\n    const mergedStyles = {\n      ...cssStyles,\n      ...style,\n      ...assignInlineVars(vars),\n    };\n\n    if (as) {\n      return (\n        <Component\n          ref={ref}\n          className={`${buttonSwitchItem} ${className || ''}`.trim()}\n          style={mergedStyles}\n          role=\"radio\"\n          {...props}\n        >\n          {children}\n        </Component>\n      );\n    }\n\n    return (\n      <ToggleGroupPrimitive.Item\n        ref={ref as any}\n        className={`${buttonSwitchItem} ${className || ''}`.trim()}\n        style={mergedStyles}\n        {...(props as any)}\n      >\n        {children}\n      </ToggleGroupPrimitive.Item>\n    );\n  },\n);\n\nButtonSwitchItemVanillaImpl.displayName = 'ButtonSwitchItemVanilla';\n\nexport const ButtonSwitchItemVanilla =\n  ButtonSwitchItemVanillaImpl as ButtonSwitchItemVanillaComponent;\n"],"names":[],"mappings":";;;;;;;AAkCA,MAAM,mCAAmC;AAAA,EACvC,CACE,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,MAAA,GAC1C,QACG;AACH,UAAM,YAAa,MAAM;AACzB,UAAM,EAAE,OAAA,IAAW,uBAAA;AAEnB,UAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAE7D,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG,iBAAiB,IAAI;AAAA,IAAA;AAG1B,QAAI,IAAI;AACN,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,qBAAqB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,UACzD,OAAO;AAAA,UACP,MAAK;AAAA,UACJ,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAEA,WACE;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC;AAAA,QACA,WAAW,GAAG,qBAAqB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QACzD,OAAO;AAAA,QACN,GAAI;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,iCAAiC,cAAc;AAExC,MAAM,+BACX;AAgBF,MAAM,8BAA8B;AAAA,EAClC,CACE,EAAE,IAAI,WAAW,KAAK,OAAO,UAAU,GAAG,MAAA,GAC1C,QACG;AACH,UAAM,YAAa,MAAM;AACzB,UAAM,EAAE,OAAA,IAAW,uBAAA;AAEnB,UAAM,EAAE,OAAO,WAAW,SAAS,eAAe,KAAK,MAAM;AAE7D,UAAM,eAAe;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG,iBAAiB,IAAI;AAAA,IAAA;AAG1B,QAAI,IAAI;AACN,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,gBAAgB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,UACpD,OAAO;AAAA,UACP,MAAK;AAAA,UACJ,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAEA,WACE;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC;AAAA,QACA,WAAW,GAAG,gBAAgB,IAAI,aAAa,EAAE,GAAG,KAAA;AAAA,QACpD,OAAO;AAAA,QACN,GAAI;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,4BAA4B,cAAc;AAEnC,MAAM,0BACX;"}