@seed-design/react 0.1.8 → 0.1.9

package/lib/components/SelectBox/CheckSelectBox.cjs

@@ -29,10 +29,10 @@ const CheckSelectBoxContent = withContext(
   "content"
 );
 const CheckSelectBoxLabel = withContext(
-  withStateProps(reactPrimitive.Primitive.span),
+  withStateProps(reactPrimitive.Primitive.div),
   "label"
 );
-const CheckSelectBoxDescription = withContext(withStateProps(reactPrimitive.Primitive.span), "description");
+const CheckSelectBoxDescription = withContext(withStateProps(reactPrimitive.Primitive.div), "description");
 const CheckSelectBoxControl = withContext(
   reactCheckbox.Checkbox.Control,
   "checkboxControl"

package/lib/components/SelectBox/CheckSelectBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckSelectBox.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/CheckSelectBox.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAsB,MAAM,6BAA6B,CAAC;AAChG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAK9E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAMvE,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C;;;GAGG;AACH,eAAO,MAAM,mBAAmB,qHAI/B,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB,CAAC,SAAS;CAAG;AAE/E,eAAO,MAAM,kBAAkB,sHAG9B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,sHAG/B,CAAC;AAEF,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,yBAAyB,4HAGU,CAAC;AAEjD,MAAM,WAAW,0BAA2B,SAAQ,iBAAiB,CAAC,YAAY;CAAG;AAErF,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,mHAG9B,CAAC;AAEF,MAAM,WAAW,8BAA+B,SAAQ,iBAAiB,CAAC,gBAAgB;CAAG;AAE7F,eAAO,MAAM,yBAAyB,iIAAgC,CAAC"}
+{"version":3,"file":"CheckSelectBox.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/CheckSelectBox.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAsB,MAAM,6BAA6B,CAAC;AAChG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAK9E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAMvE,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C;;;GAGG;AACH,eAAO,MAAM,mBAAmB,qHAI/B,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB,CAAC,SAAS;CAAG;AAE/E,eAAO,MAAM,kBAAkB,sHAG9B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,sHAG/B,CAAC;AAEF,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,yBAAyB,4HAGS,CAAC;AAEhD,MAAM,WAAW,0BAA2B,SAAQ,iBAAiB,CAAC,YAAY;CAAG;AAErF,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,mHAG9B,CAAC;AAEF,MAAM,WAAW,8BAA+B,SAAQ,iBAAiB,CAAC,gBAAgB;CAAG;AAE7F,eAAO,MAAM,yBAAyB,iIAAgC,CAAC"}

package/lib/components/SelectBox/CheckSelectBox.js

@@ -25,10 +25,10 @@ const CheckSelectBoxContent = withContext(
   "content"
 );
 const CheckSelectBoxLabel = withContext(
-  withStateProps(Primitive.span),
+  withStateProps(Primitive.div),
   "label"
 );
-const CheckSelectBoxDescription = withContext(withStateProps(Primitive.span), "description");
+const CheckSelectBoxDescription = withContext(withStateProps(Primitive.div), "description");
 const CheckSelectBoxControl = withContext(
   Checkbox.Control,
   "checkboxControl"

package/lib/components/SelectBox/RadioSelectBox.cjs

@@ -27,10 +27,10 @@ const RadioSelectBoxContent = withContext(
   "content"
 );
 const RadioSelectBoxLabel = withContext(
-  withStateProps(reactPrimitive.Primitive.span),
+  withStateProps(reactPrimitive.Primitive.div),
   "label"
 );
-const RadioSelectBoxDescription = withContext(withStateProps(reactPrimitive.Primitive.span), "description");
+const RadioSelectBoxDescription = withContext(withStateProps(reactPrimitive.Primitive.div), "description");
 const RadioSelectBoxControl = withContext(
   reactRadioGroup.RadioGroup.ItemControl,
   "radioControl"

package/lib/components/SelectBox/RadioSelectBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioSelectBox.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/RadioSelectBox.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EACL,UAAU,IAAI,mBAAmB,EAElC,MAAM,gCAAgC,CAAC;AAIxC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAMvE,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB,CAAC,SAAS;CAAG;AAEjF,eAAO,MAAM,kBAAkB,oHAE9B,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB,CAAC,SAAS;CAAG;AAEjF,eAAO,MAAM,kBAAkB,sHAG9B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,sHAG/B,CAAC;AAEF,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,yBAAyB,4HAGU,CAAC;AAEjD,MAAM,WAAW,0BAA2B,SAAQ,mBAAmB,CAAC,gBAAgB;CAAG;AAE3F,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,mHAG9B,CAAC;AAEF,MAAM,WAAW,8BAA+B,SAAQ,mBAAmB,CAAC,oBAAoB;CAAG;AAEnG,eAAO,MAAM,yBAAyB,uIAAsC,CAAC"}
+{"version":3,"file":"RadioSelectBox.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/RadioSelectBox.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EACL,UAAU,IAAI,mBAAmB,EAElC,MAAM,gCAAgC,CAAC;AAIxC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAMvE,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB,CAAC,SAAS;CAAG;AAEjF,eAAO,MAAM,kBAAkB,oHAE9B,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB,CAAC,SAAS;CAAG;AAEjF,eAAO,MAAM,kBAAkB,sHAG9B,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,sHAG/B,CAAC;AAEF,MAAM,WAAW,8BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,yBAAyB,4HAGS,CAAC;AAEhD,MAAM,WAAW,0BAA2B,SAAQ,mBAAmB,CAAC,gBAAgB;CAAG;AAE3F,eAAO,MAAM,qBAAqB,uHAGjC,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,mHAG9B,CAAC;AAEF,MAAM,WAAW,8BAA+B,SAAQ,mBAAmB,CAAC,oBAAoB;CAAG;AAEnG,eAAO,MAAM,yBAAyB,uIAAsC,CAAC"}

package/lib/components/SelectBox/RadioSelectBox.js

@@ -23,10 +23,10 @@ const RadioSelectBoxContent = withContext(
   "content"
 );
 const RadioSelectBoxLabel = withContext(
-  withStateProps(Primitive.span),
+  withStateProps(Primitive.div),
   "label"
 );
-const RadioSelectBoxDescription = withContext(withStateProps(Primitive.span), "description");
+const RadioSelectBoxDescription = withContext(withStateProps(Primitive.div), "description");
 const RadioSelectBoxControl = withContext(
   RadioGroup.ItemControl,
   "radioControl"

package/lib/components/Switch/Switch.cjs

@@ -3,17 +3,32 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const jsxRuntime = require('react/jsx-runtime');
 const reactSwitch = require('@seed-design/react-switch');
 const _switch = require('@seed-design/css/recipes/switch');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const reactPrimitive = require('@seed-design/react-primitive');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
+const React = require('react');
+const clsx = require('clsx');
 
-const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(_switch.switchStyle);
+const { withContext, ClassNamesProvider } = createSlotRecipeContext.createSlotRecipeContext(_switch.switchStyle);
 const withStateProps = createWithStateProps.createWithStateProps([reactSwitch.useSwitchContext]);
-const SwitchRoot = withProvider(
-  reactSwitch.Switch.Root,
-  "root"
+const SwitchRoot = React.forwardRef(
+  ({ size: propSize, className, ...otherProps }, ref) => {
+    const classNames = _switch.switchStyle({
+      // TODO: remove this mapping completely
+      size: propSize === "small" ? "16" : propSize === "medium" ? "32" : propSize
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactSwitch.Switch.Root,
+      {
+        ref,
+        className: clsx(classNames.root, className),
+        ...otherProps
+      }
+    ) });
+  }
 );
 const SwitchControl = withContext(
   reactSwitch.Switch.Control,

package/lib/components/Switch/Switch.d.ts

@@ -1,20 +1,26 @@
 import { Switch as SwitchPrimitive } from '@seed-design/react-switch';
 import { SwitchVariantProps } from '@seed-design/css/recipes/switch';
 import { PrimitiveProps } from '@seed-design/react-primitive';
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface SwitchRootProps extends SwitchVariantProps, SwitchPrimitive.RootProps {
+import { default as React } from 'react';
+/**
+ * @deprecated Use `16` or `32` instead of `small` or `medium`.
+ */
+type SwitchVariantDeprecatedSizeProps = "small" | "medium";
+export interface SwitchRootProps extends Omit<SwitchVariantProps, "size">, SwitchPrimitive.RootProps {
+    size?: SwitchVariantProps["size"] | SwitchVariantDeprecatedSizeProps;
 }
-export declare const SwitchRoot: ForwardRefExoticComponent<SwitchRootProps & RefAttributes<HTMLLabelElement>>;
+export declare const SwitchRoot: React.ForwardRefExoticComponent<SwitchRootProps & React.RefAttributes<HTMLLabelElement>>;
 export interface SwitchControlProps extends SwitchPrimitive.ControlProps {
 }
-export declare const SwitchControl: ForwardRefExoticComponent<SwitchControlProps & RefAttributes<HTMLDivElement>>;
+export declare const SwitchControl: React.ForwardRefExoticComponent<SwitchControlProps & React.RefAttributes<HTMLDivElement>>;
 export interface SwitchThumbProps extends SwitchPrimitive.ThumbProps {
 }
-export declare const SwitchThumb: ForwardRefExoticComponent<SwitchThumbProps & RefAttributes<HTMLDivElement>>;
+export declare const SwitchThumb: React.ForwardRefExoticComponent<SwitchThumbProps & React.RefAttributes<HTMLDivElement>>;
 export interface SwitchLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
 }
-export declare const SwitchLabel: ForwardRefExoticComponent<SwitchLabelProps & RefAttributes<HTMLSpanElement>>;
+export declare const SwitchLabel: React.ForwardRefExoticComponent<SwitchLabelProps & React.RefAttributes<HTMLSpanElement>>;
 export interface SwitchHiddenInputProps extends SwitchPrimitive.HiddenInputProps {
 }
-export declare const SwitchHiddenInput: ForwardRefExoticComponent<SwitchPrimitive.HiddenInputProps & RefAttributes<HTMLInputElement>>;
+export declare const SwitchHiddenInput: React.ForwardRefExoticComponent<SwitchPrimitive.HiddenInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};
 //# sourceMappingURL=Switch.d.ts.map

package/lib/components/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAoB,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAEvF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAQ9E,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,eAAe,CAAC,SAAS;CAAG;AAEzF,eAAO,MAAM,UAAU,8GAGtB,CAAC;AAIF,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,YAAY;CAAG;AAE3E,eAAO,MAAM,aAAa,+GAGzB,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,eAAe,CAAC,UAAU;CAAG;AAEvE,eAAO,MAAM,WAAW,6GAGvB,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAElG,eAAO,MAAM,WAAW,8GAGvB,CAAC;AAIF,MAAM,WAAW,sBAAuB,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAEnF,eAAO,MAAM,iBAAiB,+HAA8B,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAoB,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAEvF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B;;GAEG;AACH,KAAK,gCAAgC,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,EACtC,eAAe,CAAC,SAAS;IAC3B,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAAG,gCAAgC,CAAC;CACtE;AAED,eAAO,MAAM,UAAU,0FAiBtB,CAAC;AAaF,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,YAAY;CAAG;AAE3E,eAAO,MAAM,aAAa,2FAGzB,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,eAAe,CAAC,UAAU;CAAG;AAEvE,eAAO,MAAM,WAAW,yFAGvB,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAElG,eAAO,MAAM,WAAW,0FAGvB,CAAC;AAIF,MAAM,WAAW,sBAAuB,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAEnF,eAAO,MAAM,iBAAiB,2GAA8B,CAAC"}

package/lib/components/Switch/Switch.js

@@ -1,15 +1,30 @@
 'use client';
+import { jsx } from 'react/jsx-runtime';
 import { Switch, useSwitchContext } from '@seed-design/react-switch';
 import { switchStyle } from '@seed-design/css/recipes/switch';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { Primitive } from '@seed-design/react-primitive';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
+import React__default from 'react';
+import clsx from 'clsx';
 
-const { withProvider, withContext } = createSlotRecipeContext(switchStyle);
+const { withContext, ClassNamesProvider } = createSlotRecipeContext(switchStyle);
 const withStateProps = createWithStateProps([useSwitchContext]);
-const SwitchRoot = withProvider(
-  Switch.Root,
-  "root"
+const SwitchRoot = React__default.forwardRef(
+  ({ size: propSize, className, ...otherProps }, ref) => {
+    const classNames = switchStyle({
+      // TODO: remove this mapping completely
+      size: propSize === "small" ? "16" : propSize === "medium" ? "32" : propSize
+    });
+    return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
+      Switch.Root,
+      {
+        ref,
+        className: clsx(classNames.root, className),
+        ...otherProps
+      }
+    ) });
+  }
 );
 const SwitchControl = withContext(
   Switch.Control,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -58,12 +58,12 @@
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@seed-design/css": "0.1.8",
+    "@seed-design/css": "0.1.9",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "0.1.8",
+    "@seed-design/css": "0.1.9",
     "@vitejs/plugin-react": "^4.4.1",
     "ajv": "^8.17.1",
     "globby": "^14.1.0",

package/src/components/SelectBox/CheckSelectBox.tsx

@@ -47,7 +47,7 @@ export interface CheckSelectBoxLabelProps
     React.HTMLAttributes<HTMLSpanElement> {}
 
 export const CheckSelectBoxLabel = withContext<HTMLSpanElement, CheckSelectBoxLabelProps>(
-  withStateProps(Primitive.span),
+  withStateProps(Primitive.div),
   "label",
 );
 
@@ -58,7 +58,7 @@ export interface CheckSelectBoxDescriptionProps
 export const CheckSelectBoxDescription = withContext<
   HTMLSpanElement,
   CheckSelectBoxDescriptionProps
->(withStateProps(Primitive.span), "description");
+>(withStateProps(Primitive.div), "description");
 
 export interface CheckSelectBoxControlProps extends CheckboxPrimitive.ControlProps {}
 

package/src/components/SelectBox/RadioSelectBox.tsx

@@ -41,7 +41,7 @@ export interface RadioSelectBoxLabelProps
     React.HTMLAttributes<HTMLSpanElement> {}
 
 export const RadioSelectBoxLabel = withContext<HTMLSpanElement, RadioSelectBoxLabelProps>(
-  withStateProps(Primitive.span),
+  withStateProps(Primitive.div),
   "label",
 );
 
@@ -52,7 +52,7 @@ export interface RadioSelectBoxDescriptionProps
 export const RadioSelectBoxDescription = withContext<
   HTMLSpanElement,
   RadioSelectBoxDescriptionProps
->(withStateProps(Primitive.span), "description");
+>(withStateProps(Primitive.div), "description");
 
 export interface RadioSelectBoxControlProps extends RadioGroupPrimitive.ItemControlProps {}
 

package/src/components/Switch/Switch.tsx

@@ -3,19 +3,53 @@ import { switchStyle, type SwitchVariantProps } from "@seed-design/css/recipes/s
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import React from "react";
+import clsx from "clsx";
 
-const { withProvider, withContext } = createSlotRecipeContext(switchStyle);
+const { withContext, ClassNamesProvider } = createSlotRecipeContext(switchStyle);
 const withStateProps = createWithStateProps([useSwitchContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface SwitchRootProps extends SwitchVariantProps, SwitchPrimitive.RootProps {}
-
-export const SwitchRoot = withProvider<HTMLLabelElement, SwitchRootProps>(
-  SwitchPrimitive.Root,
-  "root",
+/**
+ * @deprecated Use `16` or `32` instead of `small` or `medium`.
+ */
+type SwitchVariantDeprecatedSizeProps = "small" | "medium";
+
+export interface SwitchRootProps
+  extends Omit<SwitchVariantProps, "size">,
+    SwitchPrimitive.RootProps {
+  size?: SwitchVariantProps["size"] | SwitchVariantDeprecatedSizeProps;
+}
+
+export const SwitchRoot = React.forwardRef<HTMLLabelElement, SwitchRootProps>(
+  ({ size: propSize, className, ...otherProps }, ref) => {
+    const classNames = switchStyle({
+      // TODO: remove this mapping completely
+      size: propSize === "small" ? "16" : propSize === "medium" ? "32" : propSize,
+    });
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <SwitchPrimitive.Root
+          ref={ref}
+          className={clsx(classNames.root, className)}
+          {...otherProps}
+        />
+      </ClassNamesProvider>
+    );
+  },
 );
 
+// XXX: use when the deprecated size props are removed
+
+// export interface SwitchRootProps extends SwitchVariantProps, SwitchPrimitive.RootProps {}
+
+// export const SwitchRoot = withProvider<HTMLLabelElement, SwitchRootProps>(
+//   SwitchPrimitive.Root,
+//   "root",
+// );
+
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface SwitchControlProps extends SwitchPrimitive.ControlProps {}