@seed-design/react 0.2.5 → 1.0.1

package/lib/components/RadioGroup/RadioGroup.cjs

@@ -14,6 +14,7 @@ const React = require('react');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const Icon = require('../private/Icon.cjs');
+const splitMultipleVariantsProps = require('../../utils/splitMultipleVariantsProps.cjs');
 
 const { ClassNamesProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(radio.radio);
 const {
@@ -25,9 +26,7 @@ const withStateProps = createWithStateProps.createWithStateProps([reactRadioGrou
 const RadioGroupRoot = reactRadioGroup.RadioGroup.Root;
 const RadioGroupItem = Object.assign(
   React.forwardRef(({ className, ...props }, ref) => {
-    const [radioVariantProps, __otherProps] = radio.radio.splitVariantProps(props);
-    const [radiomarkVariantProps] = radiomark.radiomark.splitVariantProps(props);
-    const [, otherProps] = radiomark.radiomark.splitVariantProps(__otherProps);
+    const [{ radio: radioVariantProps, radiomark: radiomarkVariantProps }, otherProps] = splitMultipleVariantsProps.splitMultipleVariantsProps(props, { radio: radio.radio, radiomark: radiomark.radiomark });
     const classNames = radio.radio(radioVariantProps);
     return /* @__PURE__ */ jsxRuntime.jsx(RadiomarkPropsProvider, { value: radiomarkVariantProps, children: /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
       reactRadioGroup.RadioGroup.Item,

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAE3F,OAAO,EACL,UAAU,IAAI,mBAAmB,EAElC,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAiB9E,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB,CAAC,SAAS;CAAG;AAE7E,eAAO,MAAM,cAAc,0HAA2B,CAAC;AAIvD,MAAM,WAAW,mBACf,SAAQ,iBAAiB,EACvB,qBAAqB,EACrB,mBAAmB,CAAC,SAAS;CAAG;AAEpC,eAAO,MAAM,cAAc;;CAwB1B,CAAC;AAIF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,sHAG/B,CAAC;AAIF,MAAM,WAAW,0BACf,SAAQ,qBAAqB,EAC3B,mBAAmB,CAAC,gBAAgB;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGQ,CAAC;AAI3C,MAAM,WAAW,4BAA6B,SAAQ,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IACtF;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,uBAAuB,wHA4BnC,CAAC;AAKF,MAAM,WAAW,8BAA+B,SAAQ,mBAAmB,CAAC,oBAAoB;CAAG;AAEnG,eAAO,MAAM,yBAAyB,uIAAsC,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAS,KAAK,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAE3F,OAAO,EACL,UAAU,IAAI,mBAAmB,EAElC,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAkB9E,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB,CAAC,SAAS;CAAG;AAE7E,eAAO,MAAM,cAAc,0HAA2B,CAAC;AAIvD,MAAM,WAAW,mBACf,SAAQ,iBAAiB,EACvB,qBAAqB,EACrB,mBAAmB,CAAC,SAAS;CAAG;AAEpC,eAAO,MAAM,cAAc;;CAsB1B,CAAC;AAIF,MAAM,WAAW,wBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,mBAAmB,sHAG/B,CAAC;AAIF,MAAM,WAAW,0BACf,SAAQ,qBAAqB,EAC3B,mBAAmB,CAAC,gBAAgB;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGQ,CAAC;AAI3C,MAAM,WAAW,4BAA6B,SAAQ,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IACtF;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,uBAAuB,wHA4BnC,CAAC;AAKF,MAAM,WAAW,8BAA+B,SAAQ,mBAAmB,CAAC,oBAAoB;CAAG;AAEnG,eAAO,MAAM,yBAAyB,uIAAsC,CAAC"}

package/lib/components/RadioGroup/RadioGroup.js

@@ -10,6 +10,7 @@ import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { InternalIcon } from '../private/Icon.js';
+import { splitMultipleVariantsProps } from '../../utils/splitMultipleVariantsProps.js';
 
 const { ClassNamesProvider, withContext } = createSlotRecipeContext(radio);
 const {
@@ -21,9 +22,7 @@ const withStateProps = createWithStateProps([useRadioGroupItemContext]);
 const RadioGroupRoot = RadioGroup.Root;
 const RadioGroupItem = Object.assign(
   forwardRef(({ className, ...props }, ref) => {
-    const [radioVariantProps, __otherProps] = radio.splitVariantProps(props);
-    const [radiomarkVariantProps] = radiomark.splitVariantProps(props);
-    const [, otherProps] = radiomark.splitVariantProps(__otherProps);
+    const [{ radio: radioVariantProps, radiomark: radiomarkVariantProps }, otherProps] = splitMultipleVariantsProps(props, { radio, radiomark });
     const classNames = radio(radioVariantProps);
     return /* @__PURE__ */ jsx(RadiomarkPropsProvider, { value: radiomarkVariantProps, children: /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
       RadioGroup.Item,

package/lib/components/Snackbar/Snackbar.cjs

@@ -24,6 +24,10 @@ const SnackbarRoot = withProvider(
   reactSnackbar.Snackbar.Root,
   "root"
 );
+const SnackbarContent = withContext(
+  reactPrimitive.Primitive.div,
+  "content"
+);
 const SnackbarMessage = withContext(
   reactPrimitive.Primitive.span,
   "message"
@@ -52,6 +56,7 @@ const SnackbarAvoidOverlap = reactSnackbar.Snackbar.AvoidOverlap;
 
 exports.SnackbarActionButton = SnackbarActionButton;
 exports.SnackbarAvoidOverlap = SnackbarAvoidOverlap;
+exports.SnackbarContent = SnackbarContent;
 exports.SnackbarHiddenCloseButton = SnackbarHiddenCloseButton;
 exports.SnackbarMessage = SnackbarMessage;
 exports.SnackbarPrefixIcon = SnackbarPrefixIcon;

package/lib/components/Snackbar/Snackbar.d.ts

@@ -12,9 +12,12 @@ export declare const SnackbarRegion: ForwardRefExoticComponent<SnackbarRegionPro
 export interface SnackbarRootProps extends SnackbarVariantProps, SnackbarPrimitive.RootProps {
 }
 export declare const SnackbarRoot: ForwardRefExoticComponent<SnackbarRootProps & RefAttributes<HTMLDivElement>>;
+export interface SnackbarContentProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const SnackbarContent: ForwardRefExoticComponent<SnackbarContentProps & RefAttributes<HTMLDivElement>>;
 export interface SnackbarMessageProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
 }
-export declare const SnackbarMessage: ForwardRefExoticComponent<SnackbarMessageProps & RefAttributes<HTMLDivElement>>;
+export declare const SnackbarMessage: ForwardRefExoticComponent<SnackbarMessageProps & RefAttributes<HTMLSpanElement>>;
 export interface SnackbarPrefixIconProps extends InternalIconProps {
 }
 export declare const SnackbarPrefixIcon: ForwardRefExoticComponent<SnackbarPrefixIconProps & RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAGxF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAI5E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAOvE,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB,CAAC,iBAAiB;CAAG;AAEzF,eAAO,MAAM,oBAAoB,qHAAiC,CAAC;AAInE,MAAM,WAAW,mBAAoB,SAAQ,oBAAoB,EAAE,iBAAiB,CAAC,WAAW;CAAG;AAEnG,eAAO,MAAM,cAAc,gHAE1B,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,EAAE,iBAAiB,CAAC,SAAS;CAAG;AAE/F,eAAO,MAAM,YAAY,8GAGxB,CAAC;AAIF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAIF,MAAM,WAAW,yBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CAAG;AAE9C,eAAO,MAAM,oBAAoB,yHAGhC,CAAC;AAIF,MAAM,WAAW,8BAA+B,SAAQ,iBAAiB,CAAC,gBAAgB;CAAG;AAE7F;;GAEG;AACH,eAAO,MAAM,yBAAyB,8HAYpC,CAAC;AAIH,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB,CAAC,aAAa;CAAG;AAEjF,eAAO,MAAM,gBAAgB,wEAA6B,CAAC;AAI3D,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB,CAAC,iBAAiB;CAAG;AAEzF,eAAO,MAAM,oBAAoB,oJAAiC,CAAC"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAGxF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAI5E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAOvE,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB,CAAC,iBAAiB;CAAG;AAEzF,eAAO,MAAM,oBAAoB,qHAAiC,CAAC;AAInE,MAAM,WAAW,mBAAoB,SAAQ,oBAAoB,EAAE,iBAAiB,CAAC,WAAW;CAAG;AAEnG,eAAO,MAAM,cAAc,gHAE1B,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,EAAE,iBAAiB,CAAC,SAAS;CAAG;AAE/F,eAAO,MAAM,YAAY,8GAGxB,CAAC;AAIF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,kHAG3B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAIF,MAAM,WAAW,yBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CAAG;AAE9C,eAAO,MAAM,oBAAoB,yHAGhC,CAAC;AAIF,MAAM,WAAW,8BAA+B,SAAQ,iBAAiB,CAAC,gBAAgB;CAAG;AAE7F;;GAEG;AACH,eAAO,MAAM,yBAAyB,8HAYpC,CAAC;AAIH,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB,CAAC,aAAa;CAAG;AAEjF,eAAO,MAAM,gBAAgB,wEAA6B,CAAC;AAI3D,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB,CAAC,iBAAiB;CAAG;AAEzF,eAAO,MAAM,oBAAoB,oJAAiC,CAAC"}

package/lib/components/Snackbar/Snackbar.js

@@ -20,6 +20,10 @@ const SnackbarRoot = withProvider(
   Snackbar.Root,
   "root"
 );
+const SnackbarContent = withContext(
+  Primitive.div,
+  "content"
+);
 const SnackbarMessage = withContext(
   Primitive.span,
   "message"
@@ -46,4 +50,4 @@ const SnackbarHiddenCloseButton = forwardRef((props, ref) => {
 const SnackbarRenderer = Snackbar.Renderer;
 const SnackbarAvoidOverlap = Snackbar.AvoidOverlap;
 
-export { SnackbarActionButton, SnackbarAvoidOverlap, SnackbarHiddenCloseButton, SnackbarMessage, SnackbarPrefixIcon, SnackbarRegion, SnackbarRenderer, SnackbarRoot, SnackbarRootProvider };
+export { SnackbarActionButton, SnackbarAvoidOverlap, SnackbarContent, SnackbarHiddenCloseButton, SnackbarMessage, SnackbarPrefixIcon, SnackbarRegion, SnackbarRenderer, SnackbarRoot, SnackbarRootProvider };

package/lib/components/Snackbar/Snackbar.namespace.cjs

@@ -8,6 +8,7 @@ const Snackbar = require('./Snackbar.cjs');
 
 exports.ActionButton = Snackbar.SnackbarActionButton;
 exports.AvoidOverlap = Snackbar.SnackbarAvoidOverlap;
+exports.Content = Snackbar.SnackbarContent;
 exports.HiddenCloseButton = Snackbar.SnackbarHiddenCloseButton;
 exports.Message = Snackbar.SnackbarMessage;
 exports.PrefixIcon = Snackbar.SnackbarPrefixIcon;

package/lib/components/Snackbar/Snackbar.namespace.d.ts

@@ -1,2 +1,2 @@
-export { SnackbarActionButton as ActionButton, SnackbarAvoidOverlap as AvoidOverlap, SnackbarHiddenCloseButton as HiddenCloseButton, SnackbarMessage as Message, SnackbarPrefixIcon as PrefixIcon, SnackbarRegion as Region, SnackbarRenderer as Renderer, SnackbarRoot as Root, SnackbarRootProvider as RootProvider, type SnackbarActionButtonProps as ActionButtonProps, type SnackbarAvoidOverlapProps as AvoidOverlapProps, type SnackbarHiddenCloseButtonProps as HiddenCloseButtonProps, type SnackbarMessageProps as MessageProps, type SnackbarPrefixIconProps as PrefixIconProps, type SnackbarRegionProps as RegionProps, type SnackbarRendererProps as RendererProps, type SnackbarRootProps as RootProps, type SnackbarRootProviderProps as RootProviderProps, } from './Snackbar';
+export { SnackbarActionButton as ActionButton, SnackbarAvoidOverlap as AvoidOverlap, SnackbarHiddenCloseButton as HiddenCloseButton, SnackbarMessage as Message, SnackbarContent as Content, SnackbarPrefixIcon as PrefixIcon, SnackbarRegion as Region, SnackbarRenderer as Renderer, SnackbarRoot as Root, SnackbarRootProvider as RootProvider, type SnackbarActionButtonProps as ActionButtonProps, type SnackbarAvoidOverlapProps as AvoidOverlapProps, type SnackbarHiddenCloseButtonProps as HiddenCloseButtonProps, type SnackbarMessageProps as MessageProps, type SnackbarContentProps as ContentProps, type SnackbarPrefixIconProps as PrefixIconProps, type SnackbarRegionProps as RegionProps, type SnackbarRendererProps as RendererProps, type SnackbarRootProps as RootProps, type SnackbarRootProviderProps as RootProviderProps, } from './Snackbar';
 //# sourceMappingURL=Snackbar.namespace.d.ts.map

package/lib/components/Snackbar/Snackbar.namespace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,IAAI,YAAY,EACpC,oBAAoB,IAAI,YAAY,EACpC,yBAAyB,IAAI,iBAAiB,EAC9C,eAAe,IAAI,OAAO,EAC1B,kBAAkB,IAAI,UAAU,EAChC,cAAc,IAAI,MAAM,EACxB,gBAAgB,IAAI,QAAQ,EAC5B,YAAY,IAAI,IAAI,EACpB,oBAAoB,IAAI,YAAY,EACpC,KAAK,yBAAyB,IAAI,iBAAiB,EACnD,KAAK,yBAAyB,IAAI,iBAAiB,EACnD,KAAK,8BAA8B,IAAI,sBAAsB,EAC7D,KAAK,oBAAoB,IAAI,YAAY,EACzC,KAAK,uBAAuB,IAAI,eAAe,EAC/C,KAAK,mBAAmB,IAAI,WAAW,EACvC,KAAK,qBAAqB,IAAI,aAAa,EAC3C,KAAK,iBAAiB,IAAI,SAAS,EACnC,KAAK,yBAAyB,IAAI,iBAAiB,GACpD,MAAM,YAAY,CAAC"}
+{"version":3,"file":"Snackbar.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,IAAI,YAAY,EACpC,oBAAoB,IAAI,YAAY,EACpC,yBAAyB,IAAI,iBAAiB,EAC9C,eAAe,IAAI,OAAO,EAC1B,eAAe,IAAI,OAAO,EAC1B,kBAAkB,IAAI,UAAU,EAChC,cAAc,IAAI,MAAM,EACxB,gBAAgB,IAAI,QAAQ,EAC5B,YAAY,IAAI,IAAI,EACpB,oBAAoB,IAAI,YAAY,EACpC,KAAK,yBAAyB,IAAI,iBAAiB,EACnD,KAAK,yBAAyB,IAAI,iBAAiB,EACnD,KAAK,8BAA8B,IAAI,sBAAsB,EAC7D,KAAK,oBAAoB,IAAI,YAAY,EACzC,KAAK,oBAAoB,IAAI,YAAY,EACzC,KAAK,uBAAuB,IAAI,eAAe,EAC/C,KAAK,mBAAmB,IAAI,WAAW,EACvC,KAAK,qBAAqB,IAAI,aAAa,EAC3C,KAAK,iBAAiB,IAAI,SAAS,EACnC,KAAK,yBAAyB,IAAI,iBAAiB,GACpD,MAAM,YAAY,CAAC"}

package/lib/components/Snackbar/Snackbar.namespace.js

@@ -1 +1 @@
-export { SnackbarActionButton as ActionButton, SnackbarAvoidOverlap as AvoidOverlap, SnackbarHiddenCloseButton as HiddenCloseButton, SnackbarMessage as Message, SnackbarPrefixIcon as PrefixIcon, SnackbarRegion as Region, SnackbarRenderer as Renderer, SnackbarRoot as Root, SnackbarRootProvider as RootProvider } from './Snackbar.js';
+export { SnackbarActionButton as ActionButton, SnackbarAvoidOverlap as AvoidOverlap, SnackbarContent as Content, SnackbarHiddenCloseButton as HiddenCloseButton, SnackbarMessage as Message, SnackbarPrefixIcon as PrefixIcon, SnackbarRegion as Region, SnackbarRenderer as Renderer, SnackbarRoot as Root, SnackbarRootProvider as RootProvider } from './Snackbar.js';

package/lib/components/Switch/Switch.cjs

@@ -6,36 +6,48 @@ 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 switchMark = require('@seed-design/css/recipes/switch-mark');
 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 splitMultipleVariantsProps = require('../../utils/splitMultipleVariantsProps.cjs');
 
 const { withContext, ClassNamesProvider } = createSlotRecipeContext.createSlotRecipeContext(_switch.switchStyle);
+const {
+  withContext: withControlContext,
+  PropsProvider: ControlPropsProvider,
+  withProvider: withControlProvider
+} = createSlotRecipeContext.createSlotRecipeContext(switchMark.switchMark);
 const withStateProps = createWithStateProps.createWithStateProps([reactSwitch.useSwitchContext]);
 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,
-      ...otherProps
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
+  ({ className, ...props }, ref) => {
+    const [{ switch: switchVariantProps, switchMark: switchMarkVariantProps }, otherProps] = splitMultipleVariantsProps.splitMultipleVariantsProps(
+      {
+        ...props,
+        // TODO: replace this mapping completely
+        size: props.size === "small" ? "16" : props.size === "medium" ? "32" : props.size
+      },
+      { switchMark: switchMark.switchMark, switch: _switch.switchStyle }
+    );
+    const classNames = _switch.switchStyle(switchVariantProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(ControlPropsProvider, { value: switchMarkVariantProps, children: /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
       reactSwitch.Switch.Root,
       {
         ref,
         className: clsx(classNames.root, className),
         ...otherProps
       }
-    ) });
+    ) }) });
   }
 );
-const SwitchControl = withContext(
+SwitchRoot.displayName = "SwitchRoot";
+const SwitchControl = withControlProvider(
   reactSwitch.Switch.Control,
-  "control"
+  "root"
 );
-const SwitchThumb = withContext(
+const SwitchThumb = withControlContext(
   reactSwitch.Switch.Thumb,
   "thumb"
 );

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

@@ -1,16 +1,17 @@
 import { Switch as SwitchPrimitive } from '@seed-design/react-switch';
 import { SwitchVariantProps } from '@seed-design/css/recipes/switch';
+import { SwitchMarkVariantProps } from '@seed-design/css/recipes/switch-mark';
 import { PrimitiveProps } from '@seed-design/react-primitive';
 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 {
+export interface SwitchRootProps extends Omit<SwitchVariantProps, "size">, Omit<SwitchMarkVariantProps, "size">, SwitchPrimitive.RootProps {
     size?: SwitchVariantProps["size"] | SwitchVariantDeprecatedSizeProps;
 }
 export declare const SwitchRoot: React.ForwardRefExoticComponent<SwitchRootProps & React.RefAttributes<HTMLLabelElement>>;
-export interface SwitchControlProps extends SwitchPrimitive.ControlProps {
+export interface SwitchControlProps extends SwitchMarkVariantProps, SwitchPrimitive.ControlProps {
 }
 export declare const SwitchControl: React.ForwardRefExoticComponent<SwitchControlProps & React.RefAttributes<HTMLDivElement>>;
 export interface SwitchThumbProps extends SwitchPrimitive.ThumbProps {

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;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,0FAkBtB,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"}
+{"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;AACvF,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAE/F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B;;GAEG;AACH,KAAK,gCAAgC,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,EACtC,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,EACpC,eAAe,CAAC,SAAS;IAC3B,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAAG,gCAAgC,CAAC;CACtE;AAED,eAAO,MAAM,UAAU,0FA0BtB,CAAC;AAKF,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB,EAAE,eAAe,CAAC,YAAY;CAAG;AAEnG,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

@@ -2,36 +2,48 @@
 import { jsx } from 'react/jsx-runtime';
 import { Switch, useSwitchContext } from '@seed-design/react-switch';
 import { switchStyle } from '@seed-design/css/recipes/switch';
+import { switchMark } from '@seed-design/css/recipes/switch-mark';
 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';
+import { splitMultipleVariantsProps } from '../../utils/splitMultipleVariantsProps.js';
 
 const { withContext, ClassNamesProvider } = createSlotRecipeContext(switchStyle);
+const {
+  withContext: withControlContext,
+  PropsProvider: ControlPropsProvider,
+  withProvider: withControlProvider
+} = createSlotRecipeContext(switchMark);
 const withStateProps = createWithStateProps([useSwitchContext]);
 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,
-      ...otherProps
-    });
-    return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
+  ({ className, ...props }, ref) => {
+    const [{ switch: switchVariantProps, switchMark: switchMarkVariantProps }, otherProps] = splitMultipleVariantsProps(
+      {
+        ...props,
+        // TODO: replace this mapping completely
+        size: props.size === "small" ? "16" : props.size === "medium" ? "32" : props.size
+      },
+      { switchMark, switch: switchStyle }
+    );
+    const classNames = switchStyle(switchVariantProps);
+    return /* @__PURE__ */ jsx(ControlPropsProvider, { value: switchMarkVariantProps, children: /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
       Switch.Root,
       {
         ref,
         className: clsx(classNames.root, className),
         ...otherProps
       }
-    ) });
+    ) }) });
   }
 );
-const SwitchControl = withContext(
+SwitchRoot.displayName = "SwitchRoot";
+const SwitchControl = withControlProvider(
   Switch.Control,
-  "control"
+  "root"
 );
-const SwitchThumb = withContext(
+const SwitchThumb = withControlContext(
   Switch.Thumb,
   "thumb"
 );

package/lib/components/index.cjs

@@ -14,7 +14,7 @@ const BottomSheet_namespace = require('./BottomSheet/BottomSheet.namespace.cjs')
 const Box = require('./Box/Box.cjs');
 const Callout = require('./Callout/Callout.cjs');
 const Callout_namespace = require('./Callout/Callout.namespace.cjs');
-const Celcius = require('./Celcius/Celcius.cjs');
+const Celsius = require('./Celsius/Celsius.cjs');
 const Checkbox = require('./Checkbox/Checkbox.cjs');
 const Checkbox_namespace = require('./Checkbox/Checkbox.namespace.cjs');
 const Chip = require('./Chip/Chip.cjs');
@@ -47,6 +47,7 @@ const InlineBanner = require('./InlineBanner/InlineBanner.cjs');
 const InlineBanner_namespace = require('./InlineBanner/InlineBanner.namespace.cjs');
 const LinkContent = require('./LinkContent/LinkContent.cjs');
 const List = require('./List/List.cjs');
+const ListHeader = require('./List/ListHeader.cjs');
 const List_namespace = require('./List/List.namespace.cjs');
 const LoadingIndicator = require('./LoadingIndicator/LoadingIndicator.cjs');
 const MannerTemp = require('./MannerTemp/MannerTemp.cjs');
@@ -132,7 +133,7 @@ exports.CalloutLink = Callout.CalloutLink;
 exports.CalloutRoot = Callout.CalloutRoot;
 exports.CalloutTitle = Callout.CalloutTitle;
 exports.Callout = Callout_namespace;
-exports.Celcius = Celcius.Celcius;
+exports.Celsius = Celsius.Celsius;
 exports.CheckboxControl = Checkbox.CheckboxControl;
 exports.CheckboxHiddenInput = Checkbox.CheckboxHiddenInput;
 exports.CheckboxIndicator = Checkbox.CheckboxIndicator;
@@ -224,6 +225,7 @@ exports.ListPrefix = List.ListPrefix;
 exports.ListRoot = List.ListRoot;
 exports.ListSuffix = List.ListSuffix;
 exports.ListTitle = List.ListTitle;
+exports.ListHeader = ListHeader.ListHeader;
 exports.List = List_namespace;
 exports.LoadingIndicator = LoadingIndicator.LoadingIndicator;
 exports.MannerTemp = MannerTemp.MannerTemp;

package/lib/components/index.d.ts

@@ -6,7 +6,7 @@ export * from './Badge';
 export * from './BottomSheet';
 export * from './Box';
 export * from './Callout';
-export * from './Celcius';
+export * from './Celsius';
 export * from './Checkbox';
 export * from './Chip';
 export * from './ChipTabs';

package/lib/components/index.js

@@ -14,7 +14,7 @@ export { Box } from './Box/Box.js';
 export { CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, CalloutRoot, CalloutTitle } from './Callout/Callout.js';
 import * as Callout_namespace from './Callout/Callout.namespace.js';
 export { Callout_namespace as Callout };
-export { Celcius } from './Celcius/Celcius.js';
+export { Celsius } from './Celsius/Celsius.js';
 export { CheckboxControl, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot } from './Checkbox/Checkbox.js';
 import * as Checkbox_namespace from './Checkbox/Checkbox.namespace.js';
 export { Checkbox_namespace as Checkbox };
@@ -56,6 +56,7 @@ import * as InlineBanner_namespace from './InlineBanner/InlineBanner.namespace.j
 export { InlineBanner_namespace as InlineBanner };
 export { LinkContent } from './LinkContent/LinkContent.js';
 export { ListContent, ListDetail, ListItem, ListPrefix, ListRoot, ListSuffix, ListTitle } from './List/List.js';
+export { ListHeader } from './List/ListHeader.js';
 import * as List_namespace from './List/List.namespace.js';
 export { List_namespace as List };
 export { LoadingIndicator } from './LoadingIndicator/LoadingIndicator.js';

package/lib/index.cjs

@@ -14,7 +14,7 @@ const BottomSheet_namespace = require('./components/BottomSheet/BottomSheet.name
 const Box = require('./components/Box/Box.cjs');
 const Callout = require('./components/Callout/Callout.cjs');
 const Callout_namespace = require('./components/Callout/Callout.namespace.cjs');
-const Celcius = require('./components/Celcius/Celcius.cjs');
+const Celsius = require('./components/Celsius/Celsius.cjs');
 const Checkbox = require('./components/Checkbox/Checkbox.cjs');
 const Checkbox_namespace = require('./components/Checkbox/Checkbox.namespace.cjs');
 const Chip = require('./components/Chip/Chip.cjs');
@@ -47,6 +47,7 @@ const InlineBanner = require('./components/InlineBanner/InlineBanner.cjs');
 const InlineBanner_namespace = require('./components/InlineBanner/InlineBanner.namespace.cjs');
 const LinkContent = require('./components/LinkContent/LinkContent.cjs');
 const List = require('./components/List/List.cjs');
+const ListHeader = require('./components/List/ListHeader.cjs');
 const List_namespace = require('./components/List/List.namespace.cjs');
 const LoadingIndicator = require('./components/LoadingIndicator/LoadingIndicator.cjs');
 const MannerTemp = require('./components/MannerTemp/MannerTemp.cjs');
@@ -132,7 +133,7 @@ exports.CalloutLink = Callout.CalloutLink;
 exports.CalloutRoot = Callout.CalloutRoot;
 exports.CalloutTitle = Callout.CalloutTitle;
 exports.Callout = Callout_namespace;
-exports.Celcius = Celcius.Celcius;
+exports.Celsius = Celsius.Celsius;
 exports.CheckboxControl = Checkbox.CheckboxControl;
 exports.CheckboxHiddenInput = Checkbox.CheckboxHiddenInput;
 exports.CheckboxIndicator = Checkbox.CheckboxIndicator;
@@ -224,6 +225,7 @@ exports.ListPrefix = List.ListPrefix;
 exports.ListRoot = List.ListRoot;
 exports.ListSuffix = List.ListSuffix;
 exports.ListTitle = List.ListTitle;
+exports.ListHeader = ListHeader.ListHeader;
 exports.List = List_namespace;
 exports.LoadingIndicator = LoadingIndicator.LoadingIndicator;
 exports.MannerTemp = MannerTemp.MannerTemp;

package/lib/index.js

@@ -14,7 +14,7 @@ export { Box } from './components/Box/Box.js';
 export { CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, CalloutRoot, CalloutTitle } from './components/Callout/Callout.js';
 import * as Callout_namespace from './components/Callout/Callout.namespace.js';
 export { Callout_namespace as Callout };
-export { Celcius } from './components/Celcius/Celcius.js';
+export { Celsius } from './components/Celsius/Celsius.js';
 export { CheckboxControl, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot } from './components/Checkbox/Checkbox.js';
 import * as Checkbox_namespace from './components/Checkbox/Checkbox.namespace.js';
 export { Checkbox_namespace as Checkbox };
@@ -56,6 +56,7 @@ import * as InlineBanner_namespace from './components/InlineBanner/InlineBanner.
 export { InlineBanner_namespace as InlineBanner };
 export { LinkContent } from './components/LinkContent/LinkContent.js';
 export { ListContent, ListDetail, ListItem, ListPrefix, ListRoot, ListSuffix, ListTitle } from './components/List/List.js';
+export { ListHeader } from './components/List/ListHeader.js';
 import * as List_namespace from './components/List/List.namespace.js';
 export { List_namespace as List };
 export { LoadingIndicator } from './components/LoadingIndicator/LoadingIndicator.js';

package/lib/utils/splitMultipleVariantsProps.cjs

@@ -0,0 +1,32 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+function splitMultipleVariantsProps(props, recipesMap) {
+  const multipleVariantsProps = {};
+  const extractedKeys = new Set();
+
+  for (const recipeKey in recipesMap) {
+    const recipe = recipesMap[recipeKey];
+
+    const [variantProps] = recipe.splitVariantProps(props);
+    multipleVariantsProps[recipeKey] = variantProps;
+
+    for (const variantPropKey in variantProps) {
+      extractedKeys.add(variantPropKey);
+    }
+  }
+
+  const remainingProps = {};
+
+  for (const propKey in props) {
+    if (extractedKeys.has(propKey)) continue;
+
+    remainingProps[propKey] = props[propKey];
+  }
+
+  return [multipleVariantsProps, remainingProps];
+}
+
+exports.splitMultipleVariantsProps = splitMultipleVariantsProps;

package/lib/utils/splitMultipleVariantsProps.d.ts

@@ -0,0 +1,21 @@
+type ExtractVariantProps<T> = T extends {
+  splitVariantProps: (...args: never[]) => [infer V, unknown];
+}
+  ? V
+  : never;
+
+type ExtractAllVariantKeys<R> = {
+  [K in keyof R]: ExtractVariantProps<R[K]> extends infer V
+    ? V extends Record<string, unknown>
+      ? keyof V
+      : never
+    : never;
+}[keyof R];
+
+export declare function splitMultipleVariantsProps<
+  R extends Record<string, { splitVariantProps: (...args: never[]) => unknown[] }>,
+  P,
+>(
+  props: P,
+  recipesMap: R,
+): [{ [K in keyof R]: ExtractVariantProps<R[K]> }, Omit<P, ExtractAllVariantKeys<R>>];

package/lib/utils/splitMultipleVariantsProps.js

@@ -0,0 +1,28 @@
+'use client';
+function splitMultipleVariantsProps(props, recipesMap) {
+  const multipleVariantsProps = {};
+  const extractedKeys = new Set();
+
+  for (const recipeKey in recipesMap) {
+    const recipe = recipesMap[recipeKey];
+
+    const [variantProps] = recipe.splitVariantProps(props);
+    multipleVariantsProps[recipeKey] = variantProps;
+
+    for (const variantPropKey in variantProps) {
+      extractedKeys.add(variantPropKey);
+    }
+  }
+
+  const remainingProps = {};
+
+  for (const propKey in props) {
+    if (extractedKeys.has(propKey)) continue;
+
+    remainingProps[propKey] = props[propKey];
+  }
+
+  return [multipleVariantsProps, remainingProps];
+}
+
+export { splitMultipleVariantsProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "0.2.5",
+  "version": "1.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,31 +39,31 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-use-controllable-state": "1.2.2",
     "@radix-ui/react-use-layout-effect": "^1.1.1",
-    "@seed-design/dom-utils": "0.0.2",
-    "@seed-design/react-avatar": "0.0.4",
-    "@seed-design/react-checkbox": "0.0.4",
-    "@seed-design/react-dialog": "0.0.5",
-    "@seed-design/react-popover": "0.0.8",
-    "@seed-design/react-portal": "0.0.2",
-    "@seed-design/react-primitive": "0.0.3",
-    "@seed-design/react-progress": "0.0.4",
-    "@seed-design/react-pull-to-refresh": "0.0.6",
-    "@seed-design/react-radio-group": "0.0.4",
-    "@seed-design/react-segmented-control": "0.0.5",
-    "@seed-design/react-snackbar": "0.0.7",
-    "@seed-design/react-switch": "0.0.4",
-    "@seed-design/react-tabs": "0.0.9",
-    "@seed-design/react-text-field": "0.0.4",
-    "@seed-design/react-toggle": "0.0.4",
+    "@seed-design/dom-utils": "1.0.0",
+    "@seed-design/react-avatar": "1.0.0",
+    "@seed-design/react-checkbox": "1.0.0",
+    "@seed-design/react-dialog": "1.0.0",
+    "@seed-design/react-popover": "1.0.0",
+    "@seed-design/react-portal": "1.0.0",
+    "@seed-design/react-primitive": "1.0.0",
+    "@seed-design/react-progress": "1.0.0",
+    "@seed-design/react-pull-to-refresh": "1.0.0",
+    "@seed-design/react-radio-group": "1.0.0",
+    "@seed-design/react-segmented-control": "1.0.0",
+    "@seed-design/react-snackbar": "1.0.0",
+    "@seed-design/react-switch": "1.0.0",
+    "@seed-design/react-tabs": "1.0.0",
+    "@seed-design/react-text-field": "1.0.0",
+    "@seed-design/react-toggle": "1.0.0",
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@seed-design/css": "0.2.5",
+    "@seed-design/css": "1.0.1",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "0.2.5",
+    "@seed-design/css": "1.0.1",
     "@vitejs/plugin-react": "^5.0.0",
     "ajv": "^8.17.1",
     "globby": "^14.1.0",

package/src/components/Celsius/Celsius.tsx

@@ -0,0 +1,9 @@
+import type * as React from "react";
+
+export interface CelsiusProps {
+  value: number;
+}
+
+export const Celsius: React.FC<CelsiusProps> = (props) => {
+  return `${props.value}°C`;
+};

package/src/components/Celsius/index.ts

@@ -0,0 +1,4 @@
+export {
+  Celsius,
+  type CelsiusProps,
+} from "./Celsius";

package/src/components/Checkbox/Checkbox.tsx

@@ -1,5 +1,6 @@
 import { checkbox, type CheckboxVariantProps } from "@seed-design/css/recipes/checkbox";
 import { checkmark, type CheckmarkVariantProps } from "@seed-design/css/recipes/checkmark";
+import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
 import { mergeProps } from "@seed-design/dom-utils";
 import { Checkbox as CheckboxPrimitive, useCheckboxContext } from "@seed-design/react-checkbox";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
@@ -33,21 +34,20 @@ export interface CheckboxRootProps
 
 export const CheckboxRoot = Object.assign(
   forwardRef<HTMLLabelElement, CheckboxRootProps>(({ className, ...props }, ref) => {
-    const normalizedProps = {
-      ...props,
-      // TODO: replace this mapping completely
-      weight:
-        props.weight === "stronger"
-          ? "bold"
-          : props.weight === "default"
-            ? "regular"
-            : props.weight,
-    };
-
-    const [checkboxVariantProps, __otherProps] = checkbox.splitVariantProps(normalizedProps);
-    const [checkmarkVariantProps] = checkmark.splitVariantProps(normalizedProps);
-
-    const [, otherProps] = checkmark.splitVariantProps(__otherProps);
+    const [{ checkbox: checkboxVariantProps, checkmark: checkmarkVariantProps }, otherProps] =
+      splitMultipleVariantsProps(
+        {
+          ...props,
+          // TODO: replace this mapping completely
+          weight:
+            props.weight === "stronger"
+              ? "bold"
+              : props.weight === "default"
+                ? "regular"
+                : props.weight,
+        },
+        { checkbox, checkmark },
+      );
 
     const classNames = checkbox(checkboxVariantProps);
 

package/src/components/List/List.tsx

@@ -9,11 +9,13 @@ import { VStack, type VStackProps } from "../Stack";
 import { useCheckboxContext } from "@seed-design/react-checkbox";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { useRadioGroupItemContext } from "@seed-design/react-radio-group";
+import { useSwitchContext } from "@seed-design/react-switch";
 
 const { withContext, withProvider } = createSlotRecipeContext(listItem);
-const withStateProps = createWithStateProps([useCheckboxContext, useRadioGroupItemContext], {
-  strict: false,
-});
+const withStateProps = createWithStateProps(
+  [useCheckboxContext, useRadioGroupItemContext, useSwitchContext],
+  { strict: false },
+);
 
 export interface ListRootProps extends VStackProps {}