diff --git a/packages/react/src/utils/createStyleContext.tsx b/packages/react/src/utils/createStyleContext.tsx
index 7f71ce7bc..8cccebcb9 100644
--- a/packages/react/src/utils/createStyleContext.tsx
+++ b/packages/react/src/utils/createStyleContext.tsx
@@ -2,12 +2,14 @@ import clsx from "clsx";
 import { createContext, forwardRef, useContext } from "react";
 
 type Recipe<
-  Props extends Record<string, string | undefined>,
+  Props extends Record<string, string | boolean | undefined>,
   Classnames extends Record<string, string>,
-> = (props?: Props) => Classnames;
+> = ((props?: Props) => Classnames) & {
+  splitVariantProps: <T extends Props>(props: T) => [Props, Omit<T, keyof Props>];
+};
 
 export function createStyleContext<
-  Props extends Record<string, string | undefined>,
+  Props extends Record<string, string | boolean | undefined>,
   Classnames extends Record<string, string>,
 >(recipe: Recipe<Props, Classnames>) {
   const ClassNamesContext = createContext<Classnames | null>(null);
@@ -50,14 +52,15 @@ export function createStyleContext<
 
     const StyledComponent = forwardRef<any, any>((innerProps, ref) => {
       const props = { ...(defaultProps ?? {}), ...useProps(), ...innerProps } as any; // TODO: use Props type instead of any after implementing splitRecipeProps()
-      const classNames = recipe(props); // TODO: classNames are generated on all props; we have to split recipeProps and others. should be resolved in qvism.
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const classNames = recipe(variantProps); // TODO: classNames are generated on all props; we have to split recipeProps and others. should be resolved in qvism.
       const className = classNames[slot as keyof typeof classNames];
 
       return (
         <ClassNamesProvider value={classNames}>
           {/* TODO: implement splitRecipeProps() method and spread splitted props */}
           {/* @ts-ignore */}
-          <Component ref={ref} {...props} className={clsx(className, props.className)} />
+          <Component ref={ref} {...otherProps} className={clsx(className, props.className)} />
         </ClassNamesProvider>
       );
     });
diff --git a/packages/recipe/lib/actionButton.d.ts b/packages/recipe/lib/actionButton.d.ts
index e72e1c53f..04d424d4d 100644
--- a/packages/recipe/lib/actionButton.d.ts
+++ b/packages/recipe/lib/actionButton.d.ts
@@ -1,4 +1,4 @@
-interface ActionButtonVariant {
+declare interface ActionButtonVariant {
   /**
   * @default brandSolid
   */
@@ -13,16 +13,20 @@ interface ActionButtonVariant {
   layout: "withText" | "iconOnly";
 }
 
-type ActionButtonVariantMap = {
+declare type ActionButtonVariantMap = {
   [key in keyof ActionButtonVariant]: Array<ActionButtonVariant[key]>;
 };
 
-export type ActionButtonVariantProps = Partial<ActionButtonVariant>;
+export declare type ActionButtonVariantProps = Partial<ActionButtonVariant>;
 
-export type ActionButtonSlotName = "root" | "label" | "icon" | "prefixIcon" | "suffixIcon" | "progressCircle";
+export declare type ActionButtonSlotName = "root" | "label" | "icon" | "prefixIcon" | "suffixIcon" | "progressCircle";
 
-export const actionButtonVariantMap: ActionButtonVariantMap;
+export declare const actionButtonVariantMap: ActionButtonVariantMap;
 
-export function actionButton(
+export declare const actionButton: ((
   props?: ActionButtonVariantProps,
-): Record<ActionButtonSlotName, string>;
\ No newline at end of file
+) => Record<ActionButtonSlotName, string>) & {
+  splitVariantProps: <T extends ActionButtonVariantProps>(
+    props: T,
+  ) => [ActionButtonVariantProps, Omit<T, keyof ActionButtonVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/actionButton.mjs b/packages/recipe/lib/actionButton.mjs
index 6ca53a03f..99ec9ae1d 100644
--- a/packages/recipe/lib/actionButton.mjs
+++ b/packages/recipe/lib/actionButton.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const actionButtonSlotNames = [
   [
@@ -101,4 +102,6 @@ export function actionButton(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(actionButton, { splitVariantProps: (props) => splitVariantProps(props, actionButtonVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/actionChip.d.ts b/packages/recipe/lib/actionChip.d.ts
index 4767b176a..622714819 100644
--- a/packages/recipe/lib/actionChip.d.ts
+++ b/packages/recipe/lib/actionChip.d.ts
@@ -1,4 +1,4 @@
-interface ActionChipVariant {
+declare interface ActionChipVariant {
   /**
   * @default medium
   */
@@ -9,16 +9,20 @@ interface ActionChipVariant {
   layout: "withText" | "iconOnly";
 }
 
-type ActionChipVariantMap = {
+declare type ActionChipVariantMap = {
   [key in keyof ActionChipVariant]: Array<ActionChipVariant[key]>;
 };
 
-export type ActionChipVariantProps = Partial<ActionChipVariant>;
+export declare type ActionChipVariantProps = Partial<ActionChipVariant>;
 
-export type ActionChipSlotName = "root" | "label" | "icon" | "prefixIcon" | "suffixIcon" | "count";
+export declare type ActionChipSlotName = "root" | "label" | "icon" | "prefixIcon" | "suffixIcon" | "count";
 
-export const actionChipVariantMap: ActionChipVariantMap;
+export declare const actionChipVariantMap: ActionChipVariantMap;
 
-export function actionChip(
+export declare const actionChip: ((
   props?: ActionChipVariantProps,
-): Record<ActionChipSlotName, string>;
\ No newline at end of file
+) => Record<ActionChipSlotName, string>) & {
+  splitVariantProps: <T extends ActionChipVariantProps>(
+    props: T,
+  ) => [ActionChipVariantProps, Omit<T, keyof ActionChipVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/actionChip.mjs b/packages/recipe/lib/actionChip.mjs
index 3a38bc980..efc01f610 100644
--- a/packages/recipe/lib/actionChip.mjs
+++ b/packages/recipe/lib/actionChip.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const actionChipSlotNames = [
   [
@@ -74,4 +75,6 @@ export function actionChip(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(actionChip, { splitVariantProps: (props) => splitVariantProps(props, actionChipVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/actionSheet.d.ts b/packages/recipe/lib/actionSheet.d.ts
index 4d4d80549..baa8ea527 100644
--- a/packages/recipe/lib/actionSheet.d.ts
+++ b/packages/recipe/lib/actionSheet.d.ts
@@ -1,17 +1,21 @@
-interface ActionSheetVariant {
+declare interface ActionSheetVariant {
   
 }
 
-type ActionSheetVariantMap = {
+declare type ActionSheetVariantMap = {
   [key in keyof ActionSheetVariant]: Array<ActionSheetVariant[key]>;
 };
 
-export type ActionSheetVariantProps = Partial<ActionSheetVariant>;
+export declare type ActionSheetVariantProps = Partial<ActionSheetVariant>;
 
-export type ActionSheetSlotName = "backdrop" | "container" | "content" | "list" | "group" | "footer";
+export declare type ActionSheetSlotName = "backdrop" | "container" | "content" | "list" | "group" | "footer";
 
-export const actionSheetVariantMap: ActionSheetVariantMap;
+export declare const actionSheetVariantMap: ActionSheetVariantMap;
 
-export function actionSheet(
+export declare const actionSheet: ((
   props?: ActionSheetVariantProps,
-): Record<ActionSheetSlotName, string>;
\ No newline at end of file
+) => Record<ActionSheetSlotName, string>) & {
+  splitVariantProps: <T extends ActionSheetVariantProps>(
+    props: T,
+  ) => [ActionSheetVariantProps, Omit<T, keyof ActionSheetVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/actionSheet.mjs b/packages/recipe/lib/actionSheet.mjs
index 0f03e69e7..a2bea81be 100644
--- a/packages/recipe/lib/actionSheet.mjs
+++ b/packages/recipe/lib/actionSheet.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const actionSheetSlotNames = [
   [
@@ -45,4 +46,6 @@ export function actionSheet(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(actionSheet, { splitVariantProps: (props) => splitVariantProps(props, actionSheetVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/actionSheetCloseButton.d.ts b/packages/recipe/lib/actionSheetCloseButton.d.ts
index 120e5a68d..271f8b330 100644
--- a/packages/recipe/lib/actionSheetCloseButton.d.ts
+++ b/packages/recipe/lib/actionSheetCloseButton.d.ts
@@ -1,17 +1,21 @@
-interface ActionSheetCloseButtonVariant {
+declare interface ActionSheetCloseButtonVariant {
   
 }
 
-type ActionSheetCloseButtonVariantMap = {
+declare type ActionSheetCloseButtonVariantMap = {
   [key in keyof ActionSheetCloseButtonVariant]: Array<ActionSheetCloseButtonVariant[key]>;
 };
 
-export type ActionSheetCloseButtonVariantProps = Partial<ActionSheetCloseButtonVariant>;
+export declare type ActionSheetCloseButtonVariantProps = Partial<ActionSheetCloseButtonVariant>;
 
-export type ActionSheetCloseButtonSlotName = "root" | "label";
+export declare type ActionSheetCloseButtonSlotName = "root" | "label";
 
-export const actionSheetCloseButtonVariantMap: ActionSheetCloseButtonVariantMap;
+export declare const actionSheetCloseButtonVariantMap: ActionSheetCloseButtonVariantMap;
 
-export function actionSheetCloseButton(
+export declare const actionSheetCloseButton: ((
   props?: ActionSheetCloseButtonVariantProps,
-): Record<ActionSheetCloseButtonSlotName, string>;
\ No newline at end of file
+) => Record<ActionSheetCloseButtonSlotName, string>) & {
+  splitVariantProps: <T extends ActionSheetCloseButtonVariantProps>(
+    props: T,
+  ) => [ActionSheetCloseButtonVariantProps, Omit<T, keyof ActionSheetCloseButtonVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/actionSheetCloseButton.mjs b/packages/recipe/lib/actionSheetCloseButton.mjs
index 0c8d9fbe3..e6a2f7244 100644
--- a/packages/recipe/lib/actionSheetCloseButton.mjs
+++ b/packages/recipe/lib/actionSheetCloseButton.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const actionSheetCloseButtonSlotNames = [
   [
@@ -29,4 +30,6 @@ export function actionSheetCloseButton(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(actionSheetCloseButton, { splitVariantProps: (props) => splitVariantProps(props, actionSheetCloseButtonVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/actionSheetItem.d.ts b/packages/recipe/lib/actionSheetItem.d.ts
index 727284445..8b18e86c7 100644
--- a/packages/recipe/lib/actionSheetItem.d.ts
+++ b/packages/recipe/lib/actionSheetItem.d.ts
@@ -1,20 +1,24 @@
-interface ActionSheetItemVariant {
+declare interface ActionSheetItemVariant {
   /**
   * @default neutral
   */
   tone: "neutral" | "danger";
 }
 
-type ActionSheetItemVariantMap = {
+declare type ActionSheetItemVariantMap = {
   [key in keyof ActionSheetItemVariant]: Array<ActionSheetItemVariant[key]>;
 };
 
-export type ActionSheetItemVariantProps = Partial<ActionSheetItemVariant>;
+export declare type ActionSheetItemVariantProps = Partial<ActionSheetItemVariant>;
 
-export type ActionSheetItemSlotName = "root" | "prefixIcon" | "label";
+export declare type ActionSheetItemSlotName = "root" | "prefixIcon" | "label";
 
-export const actionSheetItemVariantMap: ActionSheetItemVariantMap;
+export declare const actionSheetItemVariantMap: ActionSheetItemVariantMap;
 
-export function actionSheetItem(
+export declare const actionSheetItem: ((
   props?: ActionSheetItemVariantProps,
-): Record<ActionSheetItemSlotName, string>;
\ No newline at end of file
+) => Record<ActionSheetItemSlotName, string>) & {
+  splitVariantProps: <T extends ActionSheetItemVariantProps>(
+    props: T,
+  ) => [ActionSheetItemVariantProps, Omit<T, keyof ActionSheetItemVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/actionSheetItem.mjs b/packages/recipe/lib/actionSheetItem.mjs
index 90e1ea1f7..85fa35496 100644
--- a/packages/recipe/lib/actionSheetItem.mjs
+++ b/packages/recipe/lib/actionSheetItem.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const actionSheetItemSlotNames = [
   [
@@ -40,4 +41,6 @@ export function actionSheetItem(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(actionSheetItem, { splitVariantProps: (props) => splitVariantProps(props, actionSheetItemVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/avatar.d.ts b/packages/recipe/lib/avatar.d.ts
index 985ccef0f..f6f00a8ad 100644
--- a/packages/recipe/lib/avatar.d.ts
+++ b/packages/recipe/lib/avatar.d.ts
@@ -1,20 +1,24 @@
-interface AvatarVariant {
+declare interface AvatarVariant {
   /**
   * @default 48
   */
   size: "20" | "24" | "36" | "48" | "64" | "80" | "96";
 }
 
-type AvatarVariantMap = {
+declare type AvatarVariantMap = {
   [key in keyof AvatarVariant]: Array<AvatarVariant[key]>;
 };
 
-export type AvatarVariantProps = Partial<AvatarVariant>;
+export declare type AvatarVariantProps = Partial<AvatarVariant>;
 
-export type AvatarSlotName = "root" | "image" | "fallback" | "badge";
+export declare type AvatarSlotName = "root" | "image" | "fallback" | "badge";
 
-export const avatarVariantMap: AvatarVariantMap;
+export declare const avatarVariantMap: AvatarVariantMap;
 
-export function avatar(
+export declare const avatar: ((
   props?: AvatarVariantProps,
-): Record<AvatarSlotName, string>;
\ No newline at end of file
+) => Record<AvatarSlotName, string>) & {
+  splitVariantProps: <T extends AvatarVariantProps>(
+    props: T,
+  ) => [AvatarVariantProps, Omit<T, keyof AvatarVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/avatar.mjs b/packages/recipe/lib/avatar.mjs
index ba1de1c6b..be2c3b899 100644
--- a/packages/recipe/lib/avatar.mjs
+++ b/packages/recipe/lib/avatar.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const avatarSlotNames = [
   [
@@ -49,4 +50,6 @@ export function avatar(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(avatar, { splitVariantProps: (props) => splitVariantProps(props, avatarVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/avatarStack.d.ts b/packages/recipe/lib/avatarStack.d.ts
index 6828442b4..199317708 100644
--- a/packages/recipe/lib/avatarStack.d.ts
+++ b/packages/recipe/lib/avatarStack.d.ts
@@ -1,20 +1,24 @@
-interface AvatarStackVariant {
+declare interface AvatarStackVariant {
   /**
   * @default 48
   */
   size: "20" | "24" | "36" | "48" | "64";
 }
 
-type AvatarStackVariantMap = {
+declare type AvatarStackVariantMap = {
   [key in keyof AvatarStackVariant]: Array<AvatarStackVariant[key]>;
 };
 
-export type AvatarStackVariantProps = Partial<AvatarStackVariant>;
+export declare type AvatarStackVariantProps = Partial<AvatarStackVariant>;
 
-export type AvatarStackSlotName = "root" | "item";
+export declare type AvatarStackSlotName = "root" | "item";
 
-export const avatarStackVariantMap: AvatarStackVariantMap;
+export declare const avatarStackVariantMap: AvatarStackVariantMap;
 
-export function avatarStack(
+export declare const avatarStack: ((
   props?: AvatarStackVariantProps,
-): Record<AvatarStackSlotName, string>;
\ No newline at end of file
+) => Record<AvatarStackSlotName, string>) & {
+  splitVariantProps: <T extends AvatarStackVariantProps>(
+    props: T,
+  ) => [AvatarStackVariantProps, Omit<T, keyof AvatarStackVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/avatarStack.mjs b/packages/recipe/lib/avatarStack.mjs
index 81f052b22..142e8be41 100644
--- a/packages/recipe/lib/avatarStack.mjs
+++ b/packages/recipe/lib/avatarStack.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const avatarStackSlotNames = [
   [
@@ -39,4 +40,6 @@ export function avatarStack(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(avatarStack, { splitVariantProps: (props) => splitVariantProps(props, avatarStackVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/badge.d.ts b/packages/recipe/lib/badge.d.ts
index 8524c0985..f0c909d7b 100644
--- a/packages/recipe/lib/badge.d.ts
+++ b/packages/recipe/lib/badge.d.ts
@@ -1,4 +1,4 @@
-interface BadgeVariant {
+declare interface BadgeVariant {
   /**
   * @default medium
   */
@@ -17,16 +17,20 @@ interface BadgeVariant {
   tone: "neutral" | "brand" | "informative" | "positive" | "danger";
 }
 
-type BadgeVariantMap = {
+declare type BadgeVariantMap = {
   [key in keyof BadgeVariant]: Array<BadgeVariant[key]>;
 };
 
-export type BadgeVariantProps = Partial<BadgeVariant>;
+export declare type BadgeVariantProps = Partial<BadgeVariant>;
 
-export type BadgeSlotName = "root" | "label";
+export declare type BadgeSlotName = "root" | "label";
 
-export const badgeVariantMap: BadgeVariantMap;
+export declare const badgeVariantMap: BadgeVariantMap;
 
-export function badge(
+export declare const badge: ((
   props?: BadgeVariantProps,
-): Record<BadgeSlotName, string>;
\ No newline at end of file
+) => Record<BadgeSlotName, string>) & {
+  splitVariantProps: <T extends BadgeVariantProps>(
+    props: T,
+  ) => [BadgeVariantProps, Omit<T, keyof BadgeVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/badge.mjs b/packages/recipe/lib/badge.mjs
index 8b7ed3412..e8dd1ab9c 100644
--- a/packages/recipe/lib/badge.mjs
+++ b/packages/recipe/lib/badge.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const badgeSlotNames = [
   [
@@ -124,4 +125,6 @@ export function badge(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(badge, { splitVariantProps: (props) => splitVariantProps(props, badgeVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/bottomSheet.d.ts b/packages/recipe/lib/bottomSheet.d.ts
index b13320545..1d16b7f2f 100644
--- a/packages/recipe/lib/bottomSheet.d.ts
+++ b/packages/recipe/lib/bottomSheet.d.ts
@@ -1,17 +1,21 @@
-interface BottomSheetVariant {
+declare interface BottomSheetVariant {
   
 }
 
-type BottomSheetVariantMap = {
+declare type BottomSheetVariantMap = {
   [key in keyof BottomSheetVariant]: Array<BottomSheetVariant[key]>;
 };
 
-export type BottomSheetVariantProps = Partial<BottomSheetVariant>;
+export declare type BottomSheetVariantProps = Partial<BottomSheetVariant>;
 
-export type BottomSheetSlotName = "backdrop" | "container" | "content" | "header" | "footer" | "title" | "description" | "closeButton" | "closeIcon";
+export declare type BottomSheetSlotName = "backdrop" | "container" | "content" | "header" | "footer" | "title" | "description" | "closeButton" | "closeIcon";
 
-export const bottomSheetVariantMap: BottomSheetVariantMap;
+export declare const bottomSheetVariantMap: BottomSheetVariantMap;
 
-export function bottomSheet(
+export declare const bottomSheet: ((
   props?: BottomSheetVariantProps,
-): Record<BottomSheetSlotName, string>;
\ No newline at end of file
+) => Record<BottomSheetSlotName, string>) & {
+  splitVariantProps: <T extends BottomSheetVariantProps>(
+    props: T,
+  ) => [BottomSheetVariantProps, Omit<T, keyof BottomSheetVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/bottomSheet.mjs b/packages/recipe/lib/bottomSheet.mjs
index c41061d17..d86b5dfd9 100644
--- a/packages/recipe/lib/bottomSheet.mjs
+++ b/packages/recipe/lib/bottomSheet.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const bottomSheetSlotNames = [
   [
@@ -57,4 +58,6 @@ export function bottomSheet(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(bottomSheet, { splitVariantProps: (props) => splitVariantProps(props, bottomSheetVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/callout.d.ts b/packages/recipe/lib/callout.d.ts
index 64a35001a..a2b247afd 100644
--- a/packages/recipe/lib/callout.d.ts
+++ b/packages/recipe/lib/callout.d.ts
@@ -1,20 +1,24 @@
-interface CalloutVariant {
+declare interface CalloutVariant {
   /**
   * @default neutral
   */
   variant: "neutral" | "informative" | "warning" | "danger" | "magic";
 }
 
-type CalloutVariantMap = {
+declare type CalloutVariantMap = {
   [key in keyof CalloutVariant]: Array<CalloutVariant[key]>;
 };
 
-export type CalloutVariantProps = Partial<CalloutVariant>;
+export declare type CalloutVariantProps = Partial<CalloutVariant>;
 
-export type CalloutSlotName = "root" | "icon" | "title" | "spacer" | "label" | "linkLabel" | "actionableIcon" | "dismissButton" | "dismissIcon";
+export declare type CalloutSlotName = "root" | "icon" | "title" | "spacer" | "label" | "linkLabel" | "actionableIcon" | "dismissButton" | "dismissIcon";
 
-export const calloutVariantMap: CalloutVariantMap;
+export declare const calloutVariantMap: CalloutVariantMap;
 
-export function callout(
+export declare const callout: ((
   props?: CalloutVariantProps,
-): Record<CalloutSlotName, string>;
\ No newline at end of file
+) => Record<CalloutSlotName, string>) & {
+  splitVariantProps: <T extends CalloutVariantProps>(
+    props: T,
+  ) => [CalloutVariantProps, Omit<T, keyof CalloutVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/callout.mjs b/packages/recipe/lib/callout.mjs
index 2e780309d..7d4841351 100644
--- a/packages/recipe/lib/callout.mjs
+++ b/packages/recipe/lib/callout.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const calloutSlotNames = [
   [
@@ -67,4 +68,6 @@ export function callout(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(callout, { splitVariantProps: (props) => splitVariantProps(props, calloutVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/checkbox.d.ts b/packages/recipe/lib/checkbox.d.ts
index b0c2ab9cc..2e221ebbf 100644
--- a/packages/recipe/lib/checkbox.d.ts
+++ b/packages/recipe/lib/checkbox.d.ts
@@ -1,4 +1,4 @@
-interface CheckboxVariant {
+declare interface CheckboxVariant {
   /**
   * @default default
   */
@@ -17,16 +17,20 @@ interface CheckboxVariant {
   size: "large" | "medium" | "small";
 }
 
-type CheckboxVariantMap = {
+declare type CheckboxVariantMap = {
   [key in keyof CheckboxVariant]: Array<CheckboxVariant[key]>;
 };
 
-export type CheckboxVariantProps = Partial<CheckboxVariant>;
+export declare type CheckboxVariantProps = Partial<CheckboxVariant>;
 
-export type CheckboxSlotName = "root" | "control" | "icon" | "label";
+export declare type CheckboxSlotName = "root" | "control" | "icon" | "label";
 
-export const checkboxVariantMap: CheckboxVariantMap;
+export declare const checkboxVariantMap: CheckboxVariantMap;
 
-export function checkbox(
+export declare const checkbox: ((
   props?: CheckboxVariantProps,
-): Record<CheckboxSlotName, string>;
\ No newline at end of file
+) => Record<CheckboxSlotName, string>) & {
+  splitVariantProps: <T extends CheckboxVariantProps>(
+    props: T,
+  ) => [CheckboxVariantProps, Omit<T, keyof CheckboxVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/checkbox.mjs b/packages/recipe/lib/checkbox.mjs
index 0c2f0fba5..0001754f3 100644
--- a/packages/recipe/lib/checkbox.mjs
+++ b/packages/recipe/lib/checkbox.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const checkboxSlotNames = [
   [
@@ -85,4 +86,6 @@ export function checkbox(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(checkbox, { splitVariantProps: (props) => splitVariantProps(props, checkboxVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/chipTab.d.ts b/packages/recipe/lib/chipTab.d.ts
index ff16c00fa..e11b010ab 100644
--- a/packages/recipe/lib/chipTab.d.ts
+++ b/packages/recipe/lib/chipTab.d.ts
@@ -1,20 +1,24 @@
-interface ChipTabVariant {
+declare interface ChipTabVariant {
   /**
   * @default neutralSolid
   */
   variant: "neutralSolid" | "brandSolid";
 }
 
-type ChipTabVariantMap = {
+declare type ChipTabVariantMap = {
   [key in keyof ChipTabVariant]: Array<ChipTabVariant[key]>;
 };
 
-export type ChipTabVariantProps = Partial<ChipTabVariant>;
+export declare type ChipTabVariantProps = Partial<ChipTabVariant>;
 
-export type ChipTabSlotName = "root" | "label";
+export declare type ChipTabSlotName = "root" | "label";
 
-export const chipTabVariantMap: ChipTabVariantMap;
+export declare const chipTabVariantMap: ChipTabVariantMap;
 
-export function chipTab(
+export declare const chipTab: ((
   props?: ChipTabVariantProps,
-): Record<ChipTabSlotName, string>;
\ No newline at end of file
+) => Record<ChipTabSlotName, string>) & {
+  splitVariantProps: <T extends ChipTabVariantProps>(
+    props: T,
+  ) => [ChipTabVariantProps, Omit<T, keyof ChipTabVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/chipTab.mjs b/packages/recipe/lib/chipTab.mjs
index 3e51abcb3..35ca19edd 100644
--- a/packages/recipe/lib/chipTab.mjs
+++ b/packages/recipe/lib/chipTab.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const chipTabSlotNames = [
   [
@@ -36,4 +37,6 @@ export function chipTab(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(chipTab, { splitVariantProps: (props) => splitVariantProps(props, chipTabVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/chipTabs.d.ts b/packages/recipe/lib/chipTabs.d.ts
index 3f4965f89..af57d62a2 100644
--- a/packages/recipe/lib/chipTabs.d.ts
+++ b/packages/recipe/lib/chipTabs.d.ts
@@ -1,20 +1,24 @@
-interface ChipTabsVariant {
+declare interface ChipTabsVariant {
   /**
   * @default neutralSolid
   */
   variant: "neutralSolid" | "brandSolid";
 }
 
-type ChipTabsVariantMap = {
+declare type ChipTabsVariantMap = {
   [key in keyof ChipTabsVariant]: Array<ChipTabsVariant[key]>;
 };
 
-export type ChipTabsVariantProps = Partial<ChipTabsVariant>;
+export declare type ChipTabsVariantProps = Partial<ChipTabsVariant>;
 
-export type ChipTabsSlotName = "root" | "triggerList" | "contentList" | "contentCamera" | "content";
+export declare type ChipTabsSlotName = "root" | "triggerList" | "contentList" | "contentCamera" | "content";
 
-export const chipTabsVariantMap: ChipTabsVariantMap;
+export declare const chipTabsVariantMap: ChipTabsVariantMap;
 
-export function chipTabs(
+export declare const chipTabs: ((
   props?: ChipTabsVariantProps,
-): Record<ChipTabsSlotName, string>;
\ No newline at end of file
+) => Record<ChipTabsSlotName, string>) & {
+  splitVariantProps: <T extends ChipTabsVariantProps>(
+    props: T,
+  ) => [ChipTabsVariantProps, Omit<T, keyof ChipTabsVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/chipTabs.mjs b/packages/recipe/lib/chipTabs.mjs
index 775a58692..d018b14a6 100644
--- a/packages/recipe/lib/chipTabs.mjs
+++ b/packages/recipe/lib/chipTabs.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const chipTabsSlotNames = [
   [
@@ -48,4 +49,6 @@ export function chipTabs(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(chipTabs, { splitVariantProps: (props) => splitVariantProps(props, chipTabsVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/controlChip.d.ts b/packages/recipe/lib/controlChip.d.ts
index e68eb45bf..0f44835d1 100644
--- a/packages/recipe/lib/controlChip.d.ts
+++ b/packages/recipe/lib/controlChip.d.ts
@@ -1,4 +1,4 @@
-interface ControlChipVariant {
+declare interface ControlChipVariant {
   /**
   * @default medium
   */
@@ -9,16 +9,20 @@ interface ControlChipVariant {
   layout: "withText" | "iconOnly";
 }
 
-type ControlChipVariantMap = {
+declare type ControlChipVariantMap = {
   [key in keyof ControlChipVariant]: Array<ControlChipVariant[key]>;
 };
 
-export type ControlChipVariantProps = Partial<ControlChipVariant>;
+export declare type ControlChipVariantProps = Partial<ControlChipVariant>;
 
-export type ControlChipSlotName = "root" | "label" | "icon" | "prefixIcon" | "suffixIcon" | "count";
+export declare type ControlChipSlotName = "root" | "label" | "icon" | "prefixIcon" | "suffixIcon" | "count";
 
-export const controlChipVariantMap: ControlChipVariantMap;
+export declare const controlChipVariantMap: ControlChipVariantMap;
 
-export function controlChip(
+export declare const controlChip: ((
   props?: ControlChipVariantProps,
-): Record<ControlChipSlotName, string>;
\ No newline at end of file
+) => Record<ControlChipSlotName, string>) & {
+  splitVariantProps: <T extends ControlChipVariantProps>(
+    props: T,
+  ) => [ControlChipVariantProps, Omit<T, keyof ControlChipVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/controlChip.mjs b/packages/recipe/lib/controlChip.mjs
index e2b5d8d86..485408e45 100644
--- a/packages/recipe/lib/controlChip.mjs
+++ b/packages/recipe/lib/controlChip.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const controlChipSlotNames = [
   [
@@ -74,4 +75,6 @@ export function controlChip(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(controlChip, { splitVariantProps: (props) => splitVariantProps(props, controlChipVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/dialog.d.ts b/packages/recipe/lib/dialog.d.ts
index 120e5ba46..b7f74fca0 100644
--- a/packages/recipe/lib/dialog.d.ts
+++ b/packages/recipe/lib/dialog.d.ts
@@ -1,20 +1,24 @@
-interface DialogVariant {
+declare interface DialogVariant {
   /**
   * @default horizontal
   */
   footerLayout: "horizontal" | "vertical";
 }
 
-type DialogVariantMap = {
+declare type DialogVariantMap = {
   [key in keyof DialogVariant]: Array<DialogVariant[key]>;
 };
 
-export type DialogVariantProps = Partial<DialogVariant>;
+export declare type DialogVariantProps = Partial<DialogVariant>;
 
-export type DialogSlotName = "backdrop" | "container" | "content" | "header" | "footer" | "action" | "title" | "description";
+export declare type DialogSlotName = "backdrop" | "container" | "content" | "header" | "footer" | "action" | "title" | "description";
 
-export const dialogVariantMap: DialogVariantMap;
+export declare const dialogVariantMap: DialogVariantMap;
 
-export function dialog(
+export declare const dialog: ((
   props?: DialogVariantProps,
-): Record<DialogSlotName, string>;
\ No newline at end of file
+) => Record<DialogSlotName, string>) & {
+  splitVariantProps: <T extends DialogVariantProps>(
+    props: T,
+  ) => [DialogVariantProps, Omit<T, keyof DialogVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/dialog.mjs b/packages/recipe/lib/dialog.mjs
index 6894bacb9..bc720d01c 100644
--- a/packages/recipe/lib/dialog.mjs
+++ b/packages/recipe/lib/dialog.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const dialogSlotNames = [
   [
@@ -60,4 +61,6 @@ export function dialog(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(dialog, { splitVariantProps: (props) => splitVariantProps(props, dialogVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/extendedFab.d.ts b/packages/recipe/lib/extendedFab.d.ts
index ee9b53a7d..e875c9c84 100644
--- a/packages/recipe/lib/extendedFab.d.ts
+++ b/packages/recipe/lib/extendedFab.d.ts
@@ -1,4 +1,4 @@
-interface ExtendedFabVariant {
+declare interface ExtendedFabVariant {
   /**
   * @default neutralSolid
   */
@@ -9,16 +9,20 @@ interface ExtendedFabVariant {
   size: "small" | "medium";
 }
 
-type ExtendedFabVariantMap = {
+declare type ExtendedFabVariantMap = {
   [key in keyof ExtendedFabVariant]: Array<ExtendedFabVariant[key]>;
 };
 
-export type ExtendedFabVariantProps = Partial<ExtendedFabVariant>;
+export declare type ExtendedFabVariantProps = Partial<ExtendedFabVariant>;
 
-export type ExtendedFabSlotName = "root" | "label" | "prefixIcon";
+export declare type ExtendedFabSlotName = "root" | "label" | "prefixIcon";
 
-export const extendedFabVariantMap: ExtendedFabVariantMap;
+export declare const extendedFabVariantMap: ExtendedFabVariantMap;
 
-export function extendedFab(
+export declare const extendedFab: ((
   props?: ExtendedFabVariantProps,
-): Record<ExtendedFabSlotName, string>;
\ No newline at end of file
+) => Record<ExtendedFabSlotName, string>) & {
+  splitVariantProps: <T extends ExtendedFabVariantProps>(
+    props: T,
+  ) => [ExtendedFabVariantProps, Omit<T, keyof ExtendedFabVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/extendedFab.mjs b/packages/recipe/lib/extendedFab.mjs
index 8dc3ea5c4..52cf8c5d7 100644
--- a/packages/recipe/lib/extendedFab.mjs
+++ b/packages/recipe/lib/extendedFab.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const extendedFabSlotNames = [
   [
@@ -45,4 +46,6 @@ export function extendedFab(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(extendedFab, { splitVariantProps: (props) => splitVariantProps(props, extendedFabVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/fab.d.ts b/packages/recipe/lib/fab.d.ts
index 86998f032..2d51df77c 100644
--- a/packages/recipe/lib/fab.d.ts
+++ b/packages/recipe/lib/fab.d.ts
@@ -1,20 +1,24 @@
-interface FabVariant {
+declare interface FabVariant {
   /**
   * @default medium
   */
   size: "small" | "medium";
 }
 
-type FabVariantMap = {
+declare type FabVariantMap = {
   [key in keyof FabVariant]: Array<FabVariant[key]>;
 };
 
-export type FabVariantProps = Partial<FabVariant>;
+export declare type FabVariantProps = Partial<FabVariant>;
 
-export type FabSlotName = "root" | "icon";
+export declare type FabSlotName = "root" | "icon";
 
-export const fabVariantMap: FabVariantMap;
+export declare const fabVariantMap: FabVariantMap;
 
-export function fab(
+export declare const fab: ((
   props?: FabVariantProps,
-): Record<FabSlotName, string>;
\ No newline at end of file
+) => Record<FabSlotName, string>) & {
+  splitVariantProps: <T extends FabVariantProps>(
+    props: T,
+  ) => [FabVariantProps, Omit<T, keyof FabVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/fab.mjs b/packages/recipe/lib/fab.mjs
index ca9f28267..1f2c9a83b 100644
--- a/packages/recipe/lib/fab.mjs
+++ b/packages/recipe/lib/fab.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const fabSlotNames = [
   [
@@ -36,4 +37,6 @@ export function fab(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(fab, { splitVariantProps: (props) => splitVariantProps(props, fabVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/helpBubble.d.ts b/packages/recipe/lib/helpBubble.d.ts
index 5a43d0a1f..a9cb08d5a 100644
--- a/packages/recipe/lib/helpBubble.d.ts
+++ b/packages/recipe/lib/helpBubble.d.ts
@@ -1,17 +1,21 @@
-interface HelpBubbleVariant {
+declare interface HelpBubbleVariant {
   
 }
 
-type HelpBubbleVariantMap = {
+declare type HelpBubbleVariantMap = {
   [key in keyof HelpBubbleVariant]: Array<HelpBubbleVariant[key]>;
 };
 
-export type HelpBubbleVariantProps = Partial<HelpBubbleVariant>;
+export declare type HelpBubbleVariantProps = Partial<HelpBubbleVariant>;
 
-export type HelpBubbleSlotName = "positioner" | "backdrop" | "content" | "arrow" | "title" | "description" | "closeButton" | "closeIcon";
+export declare type HelpBubbleSlotName = "positioner" | "backdrop" | "content" | "arrow" | "title" | "description" | "closeButton" | "closeIcon";
 
-export const helpBubbleVariantMap: HelpBubbleVariantMap;
+export declare const helpBubbleVariantMap: HelpBubbleVariantMap;
 
-export function helpBubble(
+export declare const helpBubble: ((
   props?: HelpBubbleVariantProps,
-): Record<HelpBubbleSlotName, string>;
\ No newline at end of file
+) => Record<HelpBubbleSlotName, string>) & {
+  splitVariantProps: <T extends HelpBubbleVariantProps>(
+    props: T,
+  ) => [HelpBubbleVariantProps, Omit<T, keyof HelpBubbleVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/helpBubble.mjs b/packages/recipe/lib/helpBubble.mjs
index 80d1c3f53..5f1ca075d 100644
--- a/packages/recipe/lib/helpBubble.mjs
+++ b/packages/recipe/lib/helpBubble.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const helpBubbleSlotNames = [
   [
@@ -53,4 +54,6 @@ export function helpBubble(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(helpBubble, { splitVariantProps: (props) => splitVariantProps(props, helpBubbleVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/identityPlaceholder.d.ts b/packages/recipe/lib/identityPlaceholder.d.ts
index 2e26277bd..2209551fa 100644
--- a/packages/recipe/lib/identityPlaceholder.d.ts
+++ b/packages/recipe/lib/identityPlaceholder.d.ts
@@ -1,20 +1,24 @@
-interface IdentityPlaceholderVariant {
+declare interface IdentityPlaceholderVariant {
   /**
   * @default person
   */
   identity: "person";
 }
 
-type IdentityPlaceholderVariantMap = {
+declare type IdentityPlaceholderVariantMap = {
   [key in keyof IdentityPlaceholderVariant]: Array<IdentityPlaceholderVariant[key]>;
 };
 
-export type IdentityPlaceholderVariantProps = Partial<IdentityPlaceholderVariant>;
+export declare type IdentityPlaceholderVariantProps = Partial<IdentityPlaceholderVariant>;
 
-export type IdentityPlaceholderSlotName = "root" | "image";
+export declare type IdentityPlaceholderSlotName = "root" | "image";
 
-export const identityPlaceholderVariantMap: IdentityPlaceholderVariantMap;
+export declare const identityPlaceholderVariantMap: IdentityPlaceholderVariantMap;
 
-export function identityPlaceholder(
+export declare const identityPlaceholder: ((
   props?: IdentityPlaceholderVariantProps,
-): Record<IdentityPlaceholderSlotName, string>;
\ No newline at end of file
+) => Record<IdentityPlaceholderSlotName, string>) & {
+  splitVariantProps: <T extends IdentityPlaceholderVariantProps>(
+    props: T,
+  ) => [IdentityPlaceholderVariantProps, Omit<T, keyof IdentityPlaceholderVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/identityPlaceholder.mjs b/packages/recipe/lib/identityPlaceholder.mjs
index 7eae77fdf..d932d56e1 100644
--- a/packages/recipe/lib/identityPlaceholder.mjs
+++ b/packages/recipe/lib/identityPlaceholder.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const identityPlaceholderSlotNames = [
   [
@@ -35,4 +36,6 @@ export function identityPlaceholder(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(identityPlaceholder, { splitVariantProps: (props) => splitVariantProps(props, identityPlaceholderVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/inlineBanner.d.ts b/packages/recipe/lib/inlineBanner.d.ts
index 3f3242eca..b9151d87e 100644
--- a/packages/recipe/lib/inlineBanner.d.ts
+++ b/packages/recipe/lib/inlineBanner.d.ts
@@ -1,20 +1,24 @@
-interface InlineBannerVariant {
+declare interface InlineBannerVariant {
   /**
   * @default neutralWeak
   */
   variant: "neutralWeak" | "positiveWeak" | "informativeWeak" | "warningWeak" | "warningSolid" | "dangerWeak" | "dangerSolid";
 }
 
-type InlineBannerVariantMap = {
+declare type InlineBannerVariantMap = {
   [key in keyof InlineBannerVariant]: Array<InlineBannerVariant[key]>;
 };
 
-export type InlineBannerVariantProps = Partial<InlineBannerVariant>;
+export declare type InlineBannerVariantProps = Partial<InlineBannerVariant>;
 
-export type InlineBannerSlotName = "root" | "content" | "icon" | "title" | "spacer" | "label" | "linkLabel" | "actionableIcon" | "dismissButton" | "dismissIcon";
+export declare type InlineBannerSlotName = "root" | "content" | "icon" | "title" | "spacer" | "label" | "linkLabel" | "actionableIcon" | "dismissButton" | "dismissIcon";
 
-export const inlineBannerVariantMap: InlineBannerVariantMap;
+export declare const inlineBannerVariantMap: InlineBannerVariantMap;
 
-export function inlineBanner(
+export declare const inlineBanner: ((
   props?: InlineBannerVariantProps,
-): Record<InlineBannerSlotName, string>;
\ No newline at end of file
+) => Record<InlineBannerSlotName, string>) & {
+  splitVariantProps: <T extends InlineBannerVariantProps>(
+    props: T,
+  ) => [InlineBannerVariantProps, Omit<T, keyof InlineBannerVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/inlineBanner.mjs b/packages/recipe/lib/inlineBanner.mjs
index d2be94e68..d3f8a2f4d 100644
--- a/packages/recipe/lib/inlineBanner.mjs
+++ b/packages/recipe/lib/inlineBanner.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const inlineBannerSlotNames = [
   [
@@ -73,4 +74,6 @@ export function inlineBanner(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(inlineBanner, { splitVariantProps: (props) => splitVariantProps(props, inlineBannerVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/progressCircle.d.ts b/packages/recipe/lib/progressCircle.d.ts
index 4df441e1a..88e124463 100644
--- a/packages/recipe/lib/progressCircle.d.ts
+++ b/packages/recipe/lib/progressCircle.d.ts
@@ -1,4 +1,4 @@
-interface ProgressCircleVariant {
+declare interface ProgressCircleVariant {
   /**
   * @default neutral
   */
@@ -13,16 +13,20 @@ interface ProgressCircleVariant {
   indeterminate: boolean;
 }
 
-type ProgressCircleVariantMap = {
+declare type ProgressCircleVariantMap = {
   [key in keyof ProgressCircleVariant]: Array<ProgressCircleVariant[key]>;
 };
 
-export type ProgressCircleVariantProps = Partial<ProgressCircleVariant>;
+export declare type ProgressCircleVariantProps = Partial<ProgressCircleVariant>;
 
-export type ProgressCircleSlotName = "root" | "track" | "range";
+export declare type ProgressCircleSlotName = "root" | "track" | "range";
 
-export const progressCircleVariantMap: ProgressCircleVariantMap;
+export declare const progressCircleVariantMap: ProgressCircleVariantMap;
 
-export function progressCircle(
+export declare const progressCircle: ((
   props?: ProgressCircleVariantProps,
-): Record<ProgressCircleSlotName, string>;
\ No newline at end of file
+) => Record<ProgressCircleSlotName, string>) & {
+  splitVariantProps: <T extends ProgressCircleVariantProps>(
+    props: T,
+  ) => [ProgressCircleVariantProps, Omit<T, keyof ProgressCircleVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/progressCircle.mjs b/packages/recipe/lib/progressCircle.mjs
index ee743849d..6ea769a39 100644
--- a/packages/recipe/lib/progressCircle.mjs
+++ b/packages/recipe/lib/progressCircle.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const progressCircleSlotNames = [
   [
@@ -51,4 +52,6 @@ export function progressCircle(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(progressCircle, { splitVariantProps: (props) => splitVariantProps(props, progressCircleVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/radio.d.ts b/packages/recipe/lib/radio.d.ts
index e56596806..95f13d02c 100644
--- a/packages/recipe/lib/radio.d.ts
+++ b/packages/recipe/lib/radio.d.ts
@@ -1,20 +1,24 @@
-interface RadioVariant {
+declare interface RadioVariant {
   /**
   * @default medium
   */
   size: "large" | "medium" | "small";
 }
 
-type RadioVariantMap = {
+declare type RadioVariantMap = {
   [key in keyof RadioVariant]: Array<RadioVariant[key]>;
 };
 
-export type RadioVariantProps = Partial<RadioVariant>;
+export declare type RadioVariantProps = Partial<RadioVariant>;
 
-export type RadioSlotName = "root" | "icon";
+export declare type RadioSlotName = "root" | "icon";
 
-export const radioVariantMap: RadioVariantMap;
+export declare const radioVariantMap: RadioVariantMap;
 
-export function radio(
+export declare const radio: ((
   props?: RadioVariantProps,
-): Record<RadioSlotName, string>;
\ No newline at end of file
+) => Record<RadioSlotName, string>) & {
+  splitVariantProps: <T extends RadioVariantProps>(
+    props: T,
+  ) => [RadioVariantProps, Omit<T, keyof RadioVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/radio.mjs b/packages/recipe/lib/radio.mjs
index 32ec9d460..f3ee2a299 100644
--- a/packages/recipe/lib/radio.mjs
+++ b/packages/recipe/lib/radio.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const radioSlotNames = [
   [
@@ -37,4 +38,6 @@ export function radio(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(radio, { splitVariantProps: (props) => splitVariantProps(props, radioVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/reactionButton.d.ts b/packages/recipe/lib/reactionButton.d.ts
index af0b36616..dcd35b6d8 100644
--- a/packages/recipe/lib/reactionButton.d.ts
+++ b/packages/recipe/lib/reactionButton.d.ts
@@ -1,20 +1,24 @@
-interface ReactionButtonVariant {
+declare interface ReactionButtonVariant {
   /**
   * @default small
   */
   size: "xsmall" | "small";
 }
 
-type ReactionButtonVariantMap = {
+declare type ReactionButtonVariantMap = {
   [key in keyof ReactionButtonVariant]: Array<ReactionButtonVariant[key]>;
 };
 
-export type ReactionButtonVariantProps = Partial<ReactionButtonVariant>;
+export declare type ReactionButtonVariantProps = Partial<ReactionButtonVariant>;
 
-export type ReactionButtonSlotName = "root" | "label" | "count" | "prefixIcon" | "progressCircle";
+export declare type ReactionButtonSlotName = "root" | "label" | "count" | "prefixIcon" | "progressCircle";
 
-export const reactionButtonVariantMap: ReactionButtonVariantMap;
+export declare const reactionButtonVariantMap: ReactionButtonVariantMap;
 
-export function reactionButton(
+export declare const reactionButton: ((
   props?: ReactionButtonVariantProps,
-): Record<ReactionButtonSlotName, string>;
\ No newline at end of file
+) => Record<ReactionButtonSlotName, string>) & {
+  splitVariantProps: <T extends ReactionButtonVariantProps>(
+    props: T,
+  ) => [ReactionButtonVariantProps, Omit<T, keyof ReactionButtonVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/reactionButton.mjs b/packages/recipe/lib/reactionButton.mjs
index afbf030a9..acbd49e8d 100644
--- a/packages/recipe/lib/reactionButton.mjs
+++ b/packages/recipe/lib/reactionButton.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const reactionButtonSlotNames = [
   [
@@ -48,4 +49,6 @@ export function reactionButton(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(reactionButton, { splitVariantProps: (props) => splitVariantProps(props, reactionButtonVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/screen.d.ts b/packages/recipe/lib/screen.d.ts
index ef696ef0c..abde57f76 100644
--- a/packages/recipe/lib/screen.d.ts
+++ b/packages/recipe/lib/screen.d.ts
@@ -1,4 +1,4 @@
-interface ScreenVariant {
+declare interface ScreenVariant {
   /**
   * @default cupertino
   */
@@ -9,16 +9,20 @@ interface ScreenVariant {
   hasAppBar: boolean;
 }
 
-type ScreenVariantMap = {
+declare type ScreenVariantMap = {
   [key in keyof ScreenVariant]: Array<ScreenVariant[key]>;
 };
 
-export type ScreenVariantProps = Partial<ScreenVariant>;
+export declare type ScreenVariantProps = Partial<ScreenVariant>;
 
-export type ScreenSlotName = "root" | "layer" | "dim" | "edge";
+export declare type ScreenSlotName = "root" | "layer" | "dim" | "edge";
 
-export const screenVariantMap: ScreenVariantMap;
+export declare const screenVariantMap: ScreenVariantMap;
 
-export function screen(
+export declare const screen: ((
   props?: ScreenVariantProps,
-): Record<ScreenSlotName, string>;
\ No newline at end of file
+) => Record<ScreenSlotName, string>) & {
+  splitVariantProps: <T extends ScreenVariantProps>(
+    props: T,
+  ) => [ScreenVariantProps, Omit<T, keyof ScreenVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/screen.mjs b/packages/recipe/lib/screen.mjs
index 35ba541d4..d36c5443a 100644
--- a/packages/recipe/lib/screen.mjs
+++ b/packages/recipe/lib/screen.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const screenSlotNames = [
   [
@@ -48,4 +49,6 @@ export function screen(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(screen, { splitVariantProps: (props) => splitVariantProps(props, screenVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/segmentedControl.d.ts b/packages/recipe/lib/segmentedControl.d.ts
index b747f6b0c..d91bda783 100644
--- a/packages/recipe/lib/segmentedControl.d.ts
+++ b/packages/recipe/lib/segmentedControl.d.ts
@@ -1,17 +1,21 @@
-interface SegmentedControlVariant {
+declare interface SegmentedControlVariant {
   
 }
 
-type SegmentedControlVariantMap = {
+declare type SegmentedControlVariantMap = {
   [key in keyof SegmentedControlVariant]: Array<SegmentedControlVariant[key]>;
 };
 
-export type SegmentedControlVariantProps = Partial<SegmentedControlVariant>;
+export declare type SegmentedControlVariantProps = Partial<SegmentedControlVariant>;
 
-export type SegmentedControlSlotName = "root" | "segment" | "segmentLabel" | "segmentLabelPlaceholder" | "indicator";
+export declare type SegmentedControlSlotName = "root" | "segment" | "segmentLabel" | "segmentLabelPlaceholder" | "indicator";
 
-export const segmentedControlVariantMap: SegmentedControlVariantMap;
+export declare const segmentedControlVariantMap: SegmentedControlVariantMap;
 
-export function segmentedControl(
+export declare const segmentedControl: ((
   props?: SegmentedControlVariantProps,
-): Record<SegmentedControlSlotName, string>;
\ No newline at end of file
+) => Record<SegmentedControlSlotName, string>) & {
+  splitVariantProps: <T extends SegmentedControlVariantProps>(
+    props: T,
+  ) => [SegmentedControlVariantProps, Omit<T, keyof SegmentedControlVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/segmentedControl.mjs b/packages/recipe/lib/segmentedControl.mjs
index 8714cf7d8..b2bb533c3 100644
--- a/packages/recipe/lib/segmentedControl.mjs
+++ b/packages/recipe/lib/segmentedControl.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const segmentedControlSlotNames = [
   [
@@ -41,4 +42,6 @@ export function segmentedControl(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(segmentedControl, { splitVariantProps: (props) => splitVariantProps(props, segmentedControlVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/selectBox.d.ts b/packages/recipe/lib/selectBox.d.ts
index d18fd99f9..e41300ff5 100644
--- a/packages/recipe/lib/selectBox.d.ts
+++ b/packages/recipe/lib/selectBox.d.ts
@@ -1,17 +1,21 @@
-interface SelectBoxVariant {
+declare interface SelectBoxVariant {
   
 }
 
-type SelectBoxVariantMap = {
+declare type SelectBoxVariantMap = {
   [key in keyof SelectBoxVariant]: Array<SelectBoxVariant[key]>;
 };
 
-export type SelectBoxVariantProps = Partial<SelectBoxVariant>;
+export declare type SelectBoxVariantProps = Partial<SelectBoxVariant>;
 
-export type SelectBoxSlotName = "root" | "content" | "label" | "description" | "checkboxControl" | "checkboxIcon" | "radioControl" | "radioIcon";
+export declare type SelectBoxSlotName = "root" | "content" | "label" | "description" | "checkboxControl" | "checkboxIcon" | "radioControl" | "radioIcon";
 
-export const selectBoxVariantMap: SelectBoxVariantMap;
+export declare const selectBoxVariantMap: SelectBoxVariantMap;
 
-export function selectBox(
+export declare const selectBox: ((
   props?: SelectBoxVariantProps,
-): Record<SelectBoxSlotName, string>;
\ No newline at end of file
+) => Record<SelectBoxSlotName, string>) & {
+  splitVariantProps: <T extends SelectBoxVariantProps>(
+    props: T,
+  ) => [SelectBoxVariantProps, Omit<T, keyof SelectBoxVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/selectBox.mjs b/packages/recipe/lib/selectBox.mjs
index 1d93fcd70..e27747229 100644
--- a/packages/recipe/lib/selectBox.mjs
+++ b/packages/recipe/lib/selectBox.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const selectBoxSlotNames = [
   [
@@ -53,4 +54,6 @@ export function selectBox(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(selectBox, { splitVariantProps: (props) => splitVariantProps(props, selectBoxVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/selectBoxGroup.d.ts b/packages/recipe/lib/selectBoxGroup.d.ts
index d963e824b..2b6f79d5e 100644
--- a/packages/recipe/lib/selectBoxGroup.d.ts
+++ b/packages/recipe/lib/selectBoxGroup.d.ts
@@ -1,17 +1,21 @@
-interface SelectBoxGroupVariant {
+declare interface SelectBoxGroupVariant {
   
 }
 
-type SelectBoxGroupVariantMap = {
+declare type SelectBoxGroupVariantMap = {
   [key in keyof SelectBoxGroupVariant]: Array<SelectBoxGroupVariant[key]>;
 };
 
-export type SelectBoxGroupVariantProps = Partial<SelectBoxGroupVariant>;
+export declare type SelectBoxGroupVariantProps = Partial<SelectBoxGroupVariant>;
 
-export type SelectBoxGroupSlotName = "root";
+export declare type SelectBoxGroupSlotName = "root";
 
-export const selectBoxGroupVariantMap: SelectBoxGroupVariantMap;
+export declare const selectBoxGroupVariantMap: SelectBoxGroupVariantMap;
 
-export function selectBoxGroup(
+export declare const selectBoxGroup: ((
   props?: SelectBoxGroupVariantProps,
-): Record<SelectBoxGroupSlotName, string>;
\ No newline at end of file
+) => Record<SelectBoxGroupSlotName, string>) & {
+  splitVariantProps: <T extends SelectBoxGroupVariantProps>(
+    props: T,
+  ) => [SelectBoxGroupVariantProps, Omit<T, keyof SelectBoxGroupVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/selectBoxGroup.mjs b/packages/recipe/lib/selectBoxGroup.mjs
index ef56fbe3f..6bd1a5d75 100644
--- a/packages/recipe/lib/selectBoxGroup.mjs
+++ b/packages/recipe/lib/selectBoxGroup.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const selectBoxGroupSlotNames = [
   [
@@ -25,4 +26,6 @@ export function selectBoxGroup(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(selectBoxGroup, { splitVariantProps: (props) => splitVariantProps(props, selectBoxGroupVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/skeleton.d.ts b/packages/recipe/lib/skeleton.d.ts
index 0e4c9b0cb..45bca4fc5 100644
--- a/packages/recipe/lib/skeleton.d.ts
+++ b/packages/recipe/lib/skeleton.d.ts
@@ -1,20 +1,24 @@
-interface SkeletonVariant {
+declare interface SkeletonVariant {
   /**
   * @default rounded
   */
   shape: "rounded" | "circular" | "rectangular";
 }
 
-type SkeletonVariantMap = {
+declare type SkeletonVariantMap = {
   [key in keyof SkeletonVariant]: Array<SkeletonVariant[key]>;
 };
 
-export type SkeletonVariantProps = Partial<SkeletonVariant>;
+export declare type SkeletonVariantProps = Partial<SkeletonVariant>;
 
-export type SkeletonSlotName = "root";
+export declare type SkeletonSlotName = "root";
 
-export const skeletonVariantMap: SkeletonVariantMap;
+export declare const skeletonVariantMap: SkeletonVariantMap;
 
-export function skeleton(
+export declare const skeleton: ((
   props?: SkeletonVariantProps,
-): Record<SkeletonSlotName, string>;
\ No newline at end of file
+) => Record<SkeletonSlotName, string>) & {
+  splitVariantProps: <T extends SkeletonVariantProps>(
+    props: T,
+  ) => [SkeletonVariantProps, Omit<T, keyof SkeletonVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/skeleton.mjs b/packages/recipe/lib/skeleton.mjs
index 5259877a2..e72724d75 100644
--- a/packages/recipe/lib/skeleton.mjs
+++ b/packages/recipe/lib/skeleton.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const skeletonSlotNames = [
   [
@@ -33,4 +34,6 @@ export function skeleton(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(skeleton, { splitVariantProps: (props) => splitVariantProps(props, skeletonVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/switch.d.ts b/packages/recipe/lib/switch.d.ts
index 702f3ebb6..972be0b55 100644
--- a/packages/recipe/lib/switch.d.ts
+++ b/packages/recipe/lib/switch.d.ts
@@ -1,20 +1,24 @@
-interface SwitchVariant {
+declare interface SwitchVariant {
   /**
   * @default medium
   */
   size: "medium" | "small";
 }
 
-type SwitchVariantMap = {
+declare type SwitchVariantMap = {
   [key in keyof SwitchVariant]: Array<SwitchVariant[key]>;
 };
 
-export type SwitchVariantProps = Partial<SwitchVariant>;
+export declare type SwitchVariantProps = Partial<SwitchVariant>;
 
-export type SwitchSlotName = "root" | "control" | "thumb";
+export declare type SwitchSlotName = "root" | "control" | "thumb";
 
-export const switchVariantMap: SwitchVariantMap;
+export declare const switchVariantMap: SwitchVariantMap;
 
-export function switchStyle(
+export declare const switchStyle: ((
   props?: SwitchVariantProps,
-): Record<SwitchSlotName, string>;
\ No newline at end of file
+) => Record<SwitchSlotName, string>) & {
+  splitVariantProps: <T extends SwitchVariantProps>(
+    props: T,
+  ) => [SwitchVariantProps, Omit<T, keyof SwitchVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/switch.mjs b/packages/recipe/lib/switch.mjs
index 198aa14b4..753e60c93 100644
--- a/packages/recipe/lib/switch.mjs
+++ b/packages/recipe/lib/switch.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const switchSlotNames = [
   [
@@ -40,4 +41,6 @@ export function switchStyle(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(switchStyle, { splitVariantProps: (props) => splitVariantProps(props, switchVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/tab.d.ts b/packages/recipe/lib/tab.d.ts
index 58946c491..946c1a18c 100644
--- a/packages/recipe/lib/tab.d.ts
+++ b/packages/recipe/lib/tab.d.ts
@@ -1,4 +1,4 @@
-interface TabVariant {
+declare interface TabVariant {
   /**
   * @default hug
   */
@@ -9,16 +9,20 @@ interface TabVariant {
   size: "medium" | "small";
 }
 
-type TabVariantMap = {
+declare type TabVariantMap = {
   [key in keyof TabVariant]: Array<TabVariant[key]>;
 };
 
-export type TabVariantProps = Partial<TabVariant>;
+export declare type TabVariantProps = Partial<TabVariant>;
 
-export type TabSlotName = "root" | "label" | "notification";
+export declare type TabSlotName = "root" | "label" | "notification";
 
-export const tabVariantMap: TabVariantMap;
+export declare const tabVariantMap: TabVariantMap;
 
-export function tab(
+export declare const tab: ((
   props?: TabVariantProps,
-): Record<TabSlotName, string>;
\ No newline at end of file
+) => Record<TabSlotName, string>) & {
+  splitVariantProps: <T extends TabVariantProps>(
+    props: T,
+  ) => [TabVariantProps, Omit<T, keyof TabVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/tab.mjs b/packages/recipe/lib/tab.mjs
index 06e2fdb0d..b47b68084 100644
--- a/packages/recipe/lib/tab.mjs
+++ b/packages/recipe/lib/tab.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const tabSlotNames = [
   [
@@ -45,4 +46,6 @@ export function tab(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(tab, { splitVariantProps: (props) => splitVariantProps(props, tabVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/tabs.d.ts b/packages/recipe/lib/tabs.d.ts
index 11e2e8f93..fbac32d7d 100644
--- a/packages/recipe/lib/tabs.d.ts
+++ b/packages/recipe/lib/tabs.d.ts
@@ -1,4 +1,4 @@
-interface TabsVariant {
+declare interface TabsVariant {
   /**
   * @default hug
   */
@@ -13,16 +13,20 @@ interface TabsVariant {
   fixTriggerList: boolean;
 }
 
-type TabsVariantMap = {
+declare type TabsVariantMap = {
   [key in keyof TabsVariant]: Array<TabsVariant[key]>;
 };
 
-export type TabsVariantProps = Partial<TabsVariant>;
+export declare type TabsVariantProps = Partial<TabsVariant>;
 
-export type TabsSlotName = "root" | "triggerList" | "contentList" | "contentCamera" | "content" | "indicator";
+export declare type TabsSlotName = "root" | "triggerList" | "contentList" | "contentCamera" | "content" | "indicator";
 
-export const tabsVariantMap: TabsVariantMap;
+export declare const tabsVariantMap: TabsVariantMap;
 
-export function tabs(
+export declare const tabs: ((
   props?: TabsVariantProps,
-): Record<TabsSlotName, string>;
\ No newline at end of file
+) => Record<TabsSlotName, string>) & {
+  splitVariantProps: <T extends TabsVariantProps>(
+    props: T,
+  ) => [TabsVariantProps, Omit<T, keyof TabsVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/tabs.mjs b/packages/recipe/lib/tabs.mjs
index b3083ffac..e6174c2ac 100644
--- a/packages/recipe/lib/tabs.mjs
+++ b/packages/recipe/lib/tabs.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const tabsSlotNames = [
   [
@@ -62,4 +63,6 @@ export function tabs(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(tabs, { splitVariantProps: (props) => splitVariantProps(props, tabsVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/text.d.ts b/packages/recipe/lib/text.d.ts
index 582405791..8a2044737 100644
--- a/packages/recipe/lib/text.d.ts
+++ b/packages/recipe/lib/text.d.ts
@@ -1,4 +1,4 @@
-interface TextVariant {
+declare interface TextVariant {
   /**
   * @default bodyMediumDefault
   */
@@ -9,16 +9,20 @@ interface TextVariant {
   maxLines: "none" | "single" | "multi";
 }
 
-type TextVariantMap = {
+declare type TextVariantMap = {
   [key in keyof TextVariant]: Array<TextVariant[key]>;
 };
 
-export type TextVariantProps = Partial<TextVariant>;
+export declare type TextVariantProps = Partial<TextVariant>;
 
-export type TextSlotName = "root";
+export declare type TextSlotName = "root";
 
-export const textVariantMap: TextVariantMap;
+export declare const textVariantMap: TextVariantMap;
 
-export function text(
+export declare const text: ((
   props?: TextVariantProps,
-): Record<TextSlotName, string>;
\ No newline at end of file
+) => Record<TextSlotName, string>) & {
+  splitVariantProps: <T extends TextVariantProps>(
+    props: T,
+  ) => [TextVariantProps, Omit<T, keyof TextVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/text.mjs b/packages/recipe/lib/text.mjs
index 075faeeee..f8f6307eb 100644
--- a/packages/recipe/lib/text.mjs
+++ b/packages/recipe/lib/text.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const textSlotNames = [
   [
@@ -59,4 +60,6 @@ export function text(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(text, { splitVariantProps: (props) => splitVariantProps(props, textVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/textButton.d.ts b/packages/recipe/lib/textButton.d.ts
index 0a7225a5d..356d4daf3 100644
--- a/packages/recipe/lib/textButton.d.ts
+++ b/packages/recipe/lib/textButton.d.ts
@@ -1,4 +1,4 @@
-interface TextButtonVariant {
+declare interface TextButtonVariant {
   /**
   * @default brand
   */
@@ -9,16 +9,20 @@ interface TextButtonVariant {
   size: "large" | "medium" | "small";
 }
 
-type TextButtonVariantMap = {
+declare type TextButtonVariantMap = {
   [key in keyof TextButtonVariant]: Array<TextButtonVariant[key]>;
 };
 
-export type TextButtonVariantProps = Partial<TextButtonVariant>;
+export declare type TextButtonVariantProps = Partial<TextButtonVariant>;
 
-export type TextButtonSlotName = "root" | "prefixIcon" | "suffixIcon" | "label";
+export declare type TextButtonSlotName = "root" | "prefixIcon" | "suffixIcon" | "label";
 
-export const textButtonVariantMap: TextButtonVariantMap;
+export declare const textButtonVariantMap: TextButtonVariantMap;
 
-export function textButton(
+export declare const textButton: ((
   props?: TextButtonVariantProps,
-): Record<TextButtonSlotName, string>;
\ No newline at end of file
+) => Record<TextButtonSlotName, string>) & {
+  splitVariantProps: <T extends TextButtonVariantProps>(
+    props: T,
+  ) => [TextButtonVariantProps, Omit<T, keyof TextButtonVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/textButton.mjs b/packages/recipe/lib/textButton.mjs
index dfb4eaa05..a6d839cb9 100644
--- a/packages/recipe/lib/textButton.mjs
+++ b/packages/recipe/lib/textButton.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const textButtonSlotNames = [
   [
@@ -52,4 +53,6 @@ export function textButton(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(textButton, { splitVariantProps: (props) => splitVariantProps(props, textButtonVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/textField.d.ts b/packages/recipe/lib/textField.d.ts
index 8d2044351..a939d383e 100644
--- a/packages/recipe/lib/textField.d.ts
+++ b/packages/recipe/lib/textField.d.ts
@@ -1,20 +1,24 @@
-interface TextFieldVariant {
+declare interface TextFieldVariant {
   /**
   * @default medium
   */
   size: "xlarge" | "large" | "medium";
 }
 
-type TextFieldVariantMap = {
+declare type TextFieldVariantMap = {
   [key in keyof TextFieldVariant]: Array<TextFieldVariant[key]>;
 };
 
-export type TextFieldVariantProps = Partial<TextFieldVariant>;
+export declare type TextFieldVariantProps = Partial<TextFieldVariant>;
 
-export type TextFieldSlotName = "root" | "header" | "label" | "indicator" | "input" | "inputText" | "prefixText" | "prefixIcon" | "suffixText" | "suffixIcon" | "footer" | "description" | "errorMessage" | "errorIcon" | "characterCount" | "currentCharacterCount" | "maxCharacterCount";
+export declare type TextFieldSlotName = "root" | "header" | "label" | "indicator" | "input" | "inputText" | "prefixText" | "prefixIcon" | "suffixText" | "suffixIcon" | "footer" | "description" | "errorMessage" | "errorIcon" | "characterCount" | "currentCharacterCount" | "maxCharacterCount";
 
-export const textFieldVariantMap: TextFieldVariantMap;
+export declare const textFieldVariantMap: TextFieldVariantMap;
 
-export function textField(
+export declare const textField: ((
   props?: TextFieldVariantProps,
-): Record<TextFieldSlotName, string>;
\ No newline at end of file
+) => Record<TextFieldSlotName, string>) & {
+  splitVariantProps: <T extends TextFieldVariantProps>(
+    props: T,
+  ) => [TextFieldVariantProps, Omit<T, keyof TextFieldVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/textField.mjs b/packages/recipe/lib/textField.mjs
index cb5996da4..b60158fd1 100644
--- a/packages/recipe/lib/textField.mjs
+++ b/packages/recipe/lib/textField.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const textFieldSlotNames = [
   [
@@ -97,4 +98,6 @@ export function textField(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(textField, { splitVariantProps: (props) => splitVariantProps(props, textFieldVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/toggleButton.d.ts b/packages/recipe/lib/toggleButton.d.ts
index becd5b678..6b5eee121 100644
--- a/packages/recipe/lib/toggleButton.d.ts
+++ b/packages/recipe/lib/toggleButton.d.ts
@@ -1,4 +1,4 @@
-interface ToggleButtonVariant {
+declare interface ToggleButtonVariant {
   /**
   * @default brandSolid
   */
@@ -9,16 +9,20 @@ interface ToggleButtonVariant {
   size: "xsmall" | "small";
 }
 
-type ToggleButtonVariantMap = {
+declare type ToggleButtonVariantMap = {
   [key in keyof ToggleButtonVariant]: Array<ToggleButtonVariant[key]>;
 };
 
-export type ToggleButtonVariantProps = Partial<ToggleButtonVariant>;
+export declare type ToggleButtonVariantProps = Partial<ToggleButtonVariant>;
 
-export type ToggleButtonSlotName = "root" | "label" | "prefixIcon" | "suffixIcon" | "progressCircle";
+export declare type ToggleButtonSlotName = "root" | "label" | "prefixIcon" | "suffixIcon" | "progressCircle";
 
-export const toggleButtonVariantMap: ToggleButtonVariantMap;
+export declare const toggleButtonVariantMap: ToggleButtonVariantMap;
 
-export function toggleButton(
+export declare const toggleButton: ((
   props?: ToggleButtonVariantProps,
-): Record<ToggleButtonSlotName, string>;
\ No newline at end of file
+) => Record<ToggleButtonSlotName, string>) & {
+  splitVariantProps: <T extends ToggleButtonVariantProps>(
+    props: T,
+  ) => [ToggleButtonVariantProps, Omit<T, keyof ToggleButtonVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/toggleButton.mjs b/packages/recipe/lib/toggleButton.mjs
index 67a71429a..cd5c5b8ef 100644
--- a/packages/recipe/lib/toggleButton.mjs
+++ b/packages/recipe/lib/toggleButton.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const toggleButtonSlotNames = [
   [
@@ -53,4 +54,6 @@ export function toggleButton(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(toggleButton, { splitVariantProps: (props) => splitVariantProps(props, toggleButtonVariantMap) });
\ No newline at end of file
diff --git a/packages/recipe/lib/topNavigation.d.ts b/packages/recipe/lib/topNavigation.d.ts
index f7a07b854..17589a70e 100644
--- a/packages/recipe/lib/topNavigation.d.ts
+++ b/packages/recipe/lib/topNavigation.d.ts
@@ -1,4 +1,4 @@
-interface TopNavigationVariant {
+declare interface TopNavigationVariant {
   /**
   * @default cupertino
   */
@@ -13,16 +13,20 @@ interface TopNavigationVariant {
   border: boolean;
 }
 
-type TopNavigationVariantMap = {
+declare type TopNavigationVariantMap = {
   [key in keyof TopNavigationVariant]: Array<TopNavigationVariant[key]>;
 };
 
-export type TopNavigationVariantProps = Partial<TopNavigationVariant>;
+export declare type TopNavigationVariantProps = Partial<TopNavigationVariant>;
 
-export type TopNavigationSlotName = "root" | "safeArea" | "container" | "left" | "right" | "title" | "titleMain" | "titleEdge" | "titleText" | "iconButton" | "icon";
+export declare type TopNavigationSlotName = "root" | "safeArea" | "container" | "left" | "right" | "title" | "titleMain" | "titleEdge" | "titleText" | "iconButton" | "icon";
 
-export const topNavigationVariantMap: TopNavigationVariantMap;
+export declare const topNavigationVariantMap: TopNavigationVariantMap;
 
-export function topNavigation(
+export declare const topNavigation: ((
   props?: TopNavigationVariantProps,
-): Record<TopNavigationSlotName, string>;
\ No newline at end of file
+) => Record<TopNavigationSlotName, string>) & {
+  splitVariantProps: <T extends TopNavigationVariantProps>(
+    props: T,
+  ) => [TopNavigationVariantProps, Omit<T, keyof TopNavigationVariantProps>];
+}
\ No newline at end of file
diff --git a/packages/recipe/lib/topNavigation.mjs b/packages/recipe/lib/topNavigation.mjs
index 5b43c60b0..812598bff 100644
--- a/packages/recipe/lib/topNavigation.mjs
+++ b/packages/recipe/lib/topNavigation.mjs
@@ -1,5 +1,6 @@
 import { createClassName } from "./className.mjs";
 import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
 
 const topNavigationSlotNames = [
   [
@@ -81,4 +82,6 @@ export function topNavigation(props) {
       ];
     }),
   );
-}
\ No newline at end of file
+}
+
+Object.assign(topNavigation, { splitVariantProps: (props) => splitVariantProps(props, topNavigationVariantMap) });
\ No newline at end of file
diff --git a/tools/qvism/core/src/dts.ts b/tools/qvism/core/src/dts.ts
index 6c227f488..4c4b072de 100644
--- a/tools/qvism/core/src/dts.ts
+++ b/tools/qvism/core/src/dts.ts
@@ -56,22 +56,26 @@ export function generateDts(
   const slotNameType = definition.slots.map((slot) => `"${slot}"`).join(" | ");
 
   return outdent`
-  interface ${capitalizedName}Variant {
+  declare interface ${capitalizedName}Variant {
     ${variantInterface}
   }
   
-  type ${capitalizedName}VariantMap = {
+  declare type ${capitalizedName}VariantMap = {
     [key in keyof ${capitalizedName}Variant]: Array<${capitalizedName}Variant[key]>;
   };
   
-  export type ${capitalizedName}VariantProps = Partial<${capitalizedName}Variant>;
+  export declare type ${capitalizedName}VariantProps = Partial<${capitalizedName}Variant>;
   
-  export type ${capitalizedName}SlotName = ${slotNameType};
+  export declare type ${capitalizedName}SlotName = ${slotNameType};
   
-  export const ${definition.name}VariantMap: ${capitalizedName}VariantMap;
+  export declare const ${definition.name}VariantMap: ${capitalizedName}VariantMap;
   
-  export function ${escapeReservedWord(definition.name)}(
+  export declare const ${escapeReservedWord(definition.name)}: ((
     props?: ${capitalizedName}VariantProps,
-  ): Record<${capitalizedName}SlotName, string>;
+  ) => Record<${capitalizedName}SlotName, string>) & {
+    splitVariantProps: <T extends ${capitalizedName}VariantProps>(
+      props: T,
+    ) => [${capitalizedName}VariantProps, Omit<T, keyof ${capitalizedName}VariantProps>];
+  }
   `;
 }
diff --git a/tools/qvism/core/src/js.ts b/tools/qvism/core/src/js.ts
index 00e1fbc84..6559748d0 100644
--- a/tools/qvism/core/src/js.ts
+++ b/tools/qvism/core/src/js.ts
@@ -21,6 +21,7 @@ export function generateJs(
   return outdent`
   import { createClassName } from "./className.mjs";
   import { mergeVariants } from "./mergeVariants.mjs";
+  import { splitVariantProps } from "./splitVariantProps.mjs";
 
   const ${definition.name}SlotNames = ${JSON.stringify(slotNames, null, 2)};
   
@@ -41,5 +42,8 @@ export function generateJs(
         ];
       }),
     );
-  }`;
+  }
+  
+  Object.assign(${escapeReservedWord(definition.name)}, { splitVariantProps: (props) => splitVariantProps(props, ${definition.name}VariantMap) });
+  `;
 }