@seed-design/react 0.0.4 → 0.0.5

package/src/components/ActionChip/ActionChip.tsx

@@ -1,10 +1,10 @@
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { actionChip, type ActionChipVariantProps } from "@seed-design/css/recipes/action-chip";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import type * as React from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createRecipeContext } from "../../utils/createRecipeContext";
 import { withIconRequired } from "../Icon/Icon";
 
-const { withProvider } = createStyleContext(actionChip);
+const { withProvider } = createRecipeContext(actionChip);
 
 export interface ActionChipProps
   extends ActionChipVariantProps,
@@ -12,7 +12,7 @@ export interface ActionChipProps
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
 export const ActionChip = withIconRequired(
-  withProvider<HTMLButtonElement, ActionChipProps>(Primitive.button, "root"),
+  withProvider<HTMLButtonElement, ActionChipProps>(Primitive.button),
   (props: ActionChipProps) => props.layout === "iconOnly",
 );
 ActionChip.displayName = "ActionChip";

package/src/components/ActionSheet/ActionSheet.tsx

@@ -1,16 +1,17 @@
-import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { actionSheet, type ActionSheetVariantProps } from "@seed-design/css/recipes/action-sheet";
 import {
   actionSheetItem,
   type ActionSheetItemVariantProps,
 } from "@seed-design/css/recipes/action-sheet-item";
+import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import type * as React from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 
-const { withRootProvider, withContext } = createStyleContext(actionSheet);
-const { withProvider: withItemProvider } = createStyleContext(actionSheetItem);
+const { withRootProvider, withContext } = createSlotRecipeContext(actionSheet);
+const { withProvider: withItemProvider } = createRecipeContext(actionSheetItem);
 const withStateProps = createWithStateProps([useDialogContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -104,7 +105,6 @@ export interface ActionSheetItemProps
 
 export const ActionSheetItem = withItemProvider<HTMLButtonElement, ActionSheetItemProps>(
   withStateProps(Primitive.button),
-  "root",
 );
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/Avatar/Avatar.tsx

@@ -5,9 +5,9 @@ import { avatarStack, type AvatarStackVariantProps } from "@seed-design/css/reci
 import clsx from "clsx";
 import * as React from "react";
 import { useMemo } from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 
-const { PropsProvider, withProvider, withContext } = createStyleContext(avatar);
+const { PropsProvider, withProvider, withContext } = createSlotRecipeContext(avatar);
 
 ////////////////////////////////////////////////////////////////////////////////////
 

package/src/components/Badge/Badge.tsx

@@ -1,9 +1,9 @@
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { badge, type BadgeVariantProps } from "@seed-design/css/recipes/badge";
 import type * as React from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createRecipeContext } from "../../utils/createRecipeContext";
 
-const { withProvider } = createStyleContext(badge);
+const { withProvider } = createRecipeContext(badge);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -12,4 +12,4 @@ export interface BadgeProps
     PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
 
-export const Badge = withProvider<HTMLSpanElement, BadgeProps>(Primitive.span, "root");
+export const Badge = withProvider<HTMLSpanElement, BadgeProps>(Primitive.span);

package/src/components/BottomSheet/BottomSheet.tsx

@@ -1,11 +1,11 @@
 import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { bottomSheet, type BottomSheetVariantProps } from "@seed-design/css/recipes/bottom-sheet";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { withStyleProps, type StyleProps } from "../../utils/styled";
 
-const { withRootProvider, withContext } = createStyleContext(bottomSheet);
+const { withRootProvider, withContext } = createSlotRecipeContext(bottomSheet);
 const withStateProps = createWithStateProps([useDialogContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/Callout/Callout.tsx

@@ -2,14 +2,14 @@ import type * as React from "react";
 
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { callout, type CalloutVariantProps } from "@seed-design/css/recipes/callout";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import {
   DismissibleCloseButton,
   DismissibleRoot,
   type DismissibleRootProps,
 } from "../private/useDismissible";
 
-const { withContext, withProvider } = createStyleContext(callout);
+const { withContext, withProvider } = createSlotRecipeContext(callout);
 
 export interface CalloutRootProps extends CalloutVariantProps, DismissibleRootProps {}
 

package/src/components/Checkbox/Checkbox.tsx

@@ -3,11 +3,11 @@ import { Checkbox as CheckboxPrimitive, useCheckboxContext } from "@seed-design/
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { checkbox, type CheckboxVariantProps } from "@seed-design/css/recipes/checkbox";
 import { forwardRef } from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { InternalIcon } from "../private/Icon";
 
-const { withProvider, withContext, useClassNames } = createStyleContext(checkbox);
+const { withProvider, withContext, useClassNames } = createSlotRecipeContext(checkbox);
 const withStateProps = createWithStateProps([useCheckboxContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/ChipTabs/ChipTabs.tsx

@@ -1,8 +1,8 @@
 import { chipTabs, type ChipTabsVariantProps } from "@seed-design/css/recipes/chip-tabs";
 import { Tabs as TabsPrimitive } from "@seed-design/react-tabs";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 
-const { withProvider, withContext } = createStyleContext(chipTabs);
+const { withProvider, withContext } = createSlotRecipeContext(chipTabs);
 
 ////////////////////////////////////////////////////////////////////////////////////
 

package/src/components/ControlChip/ControlChip.tsx

@@ -1,10 +1,10 @@
 import { controlChip, type ControlChipVariantProps } from "@seed-design/css/recipes/control-chip";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import type * as React from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createRecipeContext } from "../../utils/createRecipeContext";
 import { withIconRequired } from "../Icon/Icon";
 
-const { withProvider } = createStyleContext(controlChip);
+const { withProvider } = createRecipeContext(controlChip);
 
 export interface ControlChipBaseProps extends PrimitiveProps, ControlChipVariantProps {}
 
@@ -13,6 +13,6 @@ export interface ControlChipProps
     React.HTMLAttributes<HTMLButtonElement> {}
 
 export const ControlChip = withIconRequired(
-  withProvider<HTMLButtonElement, ControlChipProps>(Primitive.button, "root"),
+  withProvider<HTMLButtonElement, ControlChipProps>(Primitive.button),
   (props: ControlChipProps) => props.layout === "iconOnly",
 );

package/src/components/Dialog/Dialog.tsx

@@ -2,10 +2,10 @@ import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { dialog, type DialogVariantProps } from "@seed-design/css/recipes/dialog";
 import { forwardRef } from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 
-const { withRootProvider, withContext } = createStyleContext(dialog);
+const { withRootProvider, withContext } = createSlotRecipeContext(dialog);
 const withStateProps = createWithStateProps([useDialogContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/ExtendedActionSheet/ExtendedActionSheet.tsx

@@ -9,11 +9,12 @@ import {
   type ExtendedActionSheetItemVariantProps,
 } from "@seed-design/css/recipes/extended-action-sheet-item";
 import type * as React from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 
-const { withRootProvider, withContext } = createStyleContext(extendedActionSheet);
-const { withProvider: withItemProvider } = createStyleContext(extendedActionSheetItem);
+const { withRootProvider, withContext } = createSlotRecipeContext(extendedActionSheet);
+const { withProvider: withItemProvider } = createRecipeContext(extendedActionSheetItem);
 const withStateProps = createWithStateProps([useDialogContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -115,7 +116,7 @@ export interface ExtendedActionSheetItemProps
 export const ExtendedActionSheetItem = withItemProvider<
   HTMLButtonElement,
   ExtendedActionSheetItemProps
->(withStateProps(Primitive.button), "root");
+>(withStateProps(Primitive.button));
 
 ////////////////////////////////////////////////////////////////////////////////////
 

package/src/components/ExtendedFab/ExtendedFab.tsx

@@ -1,8 +1,8 @@
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { extendedFab, type ExtendedFabVariantProps } from "@seed-design/css/recipes/extended-fab";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createRecipeContext } from "../../utils/createRecipeContext";
 
-const { withProvider } = createStyleContext(extendedFab);
+const { withProvider } = createRecipeContext(extendedFab);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -11,13 +11,9 @@ export interface ExtendedFabProps
     PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const ExtendedFab = withProvider<HTMLButtonElement, ExtendedFabProps>(
-  Primitive.button,
-  "root",
-  {
-    defaultProps: {
-      variant: "neutralSolid",
-      size: "medium",
-    },
+export const ExtendedFab = withProvider<HTMLButtonElement, ExtendedFabProps>(Primitive.button, {
+  defaultProps: {
+    variant: "neutralSolid",
+    size: "medium",
   },
-);
+});

package/src/components/Fab/Fab.tsx

@@ -1,9 +1,9 @@
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { fab, type FabVariantProps } from "@seed-design/css/recipes/fab";
 import type * as React from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createRecipeContext } from "../../utils/createRecipeContext";
 
-const { withProvider } = createStyleContext(fab);
+const { withProvider } = createRecipeContext(fab);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -12,4 +12,4 @@ export interface FabProps
     PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const Fab = withProvider<HTMLButtonElement, FabProps>(Primitive.button, "root");
+export const Fab = withProvider<HTMLButtonElement, FabProps>(Primitive.button);

package/src/components/HelpBubble/HelpBubble.tsx

@@ -2,11 +2,11 @@ import { Popover as PopoverPrimitive, usePopoverContext } from "@seed-design/rea
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { helpBubble, type HelpBubbleVariantProps } from "@seed-design/css/recipes/help-bubble";
 import { forwardRef } from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { withStyleProps, type StyleProps } from "../../utils/styled";
 
-const { withRootProvider, withContext } = createStyleContext(helpBubble);
+const { withRootProvider, withContext } = createSlotRecipeContext(helpBubble);
 const withStateProps = createWithStateProps([usePopoverContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -16,7 +16,7 @@ export interface HelpBubbleRootProps extends HelpBubbleVariantProps, PopoverPrim
 export const HelpBubbleRoot = withRootProvider<HelpBubbleRootProps>(PopoverPrimitive.Root, {
   defaultProps: {
     placement: "top",
-    gutter: 4,
+    gutter: 4, // TODO: get value from rootage spec
     overflowPadding: 16,
     arrowPadding: 14,
     flip: true,
@@ -90,7 +90,10 @@ export interface HelpBubbleArrowTipProps extends React.SVGProps<SVGSVGElement> {
 
 export const HelpBubbleArrowTip = forwardRef<SVGSVGElement, HelpBubbleArrowTipProps>(
   (props, ref) => {
-    const { tipRadius = 1, ...otherProps } = props;
+    const {
+      tipRadius = 2, // TODO: get value from rootage spec
+      ...otherProps
+    } = props;
     const api = usePopoverContext();
     const width = api.rects.arrow?.width || 0;
     const height = api.rects.arrow?.height || 0;

package/src/components/IdentityPlaceholder/IdentityPlaceholder.tsx

@@ -5,9 +5,9 @@ import {
 import { mergeProps } from "@seed-design/dom-utils";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import * as React from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 
-const { useClassNames, withProvider } = createStyleContext(identityPlaceholder);
+const { useClassNames, withProvider } = createSlotRecipeContext(identityPlaceholder);
 
 export interface IdentityPlaceholderRootProps
   extends IdentityPlaceholderVariantProps,

package/src/components/InlineBanner/InlineBanner.tsx

@@ -5,14 +5,14 @@ import {
   type InlineBannerVariantProps,
 } from "@seed-design/css/recipes/inline-banner";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import {
   DismissibleCloseButton,
   DismissibleRoot,
   type DismissibleRootProps,
 } from "../private/useDismissible";
 
-const { withContext, withProvider } = createStyleContext(inlineBanner);
+const { withContext, withProvider } = createSlotRecipeContext(inlineBanner);
 
 export interface InlineBannerRootProps extends InlineBannerVariantProps, DismissibleRootProps {}
 

package/src/components/LinkContent/LinkContent.tsx

@@ -1,11 +1,10 @@
 import { linkContent, type LinkContentVariantProps } from "@seed-design/css/recipes/link-content";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { createStyleContext } from "../../utils/createStyleContext";
-
+import { createRecipeContext } from "../../utils/createRecipeContext";
 import type * as React from "react";
 import { withStyleProps, type StyleProps } from "../../utils/styled";
 
-const { withProvider } = createStyleContext(linkContent);
+const { withProvider } = createRecipeContext(linkContent);
 
 export interface LinkContentProps
   extends LinkContentVariantProps,
@@ -15,5 +14,4 @@ export interface LinkContentProps
 
 export const LinkContent = withProvider<HTMLButtonElement, LinkContentProps>(
   withStyleProps(Primitive.span),
-  "root",
 );

package/src/components/MannerTempBadge/MannerTempBadge.tsx

@@ -1,12 +1,12 @@
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import {
   mannerTempBadge,
   type MannerTempBadgeVariantProps,
 } from "@seed-design/css/recipes/manner-temp-badge";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import type * as React from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createRecipeContext } from "../../utils/createRecipeContext";
 
-const { withProvider } = createStyleContext(mannerTempBadge);
+const { withProvider } = createRecipeContext(mannerTempBadge);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -15,7 +15,4 @@ export interface MannerTempBadgeProps
     PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
 
-export const MannerTempBadge = withProvider<HTMLSpanElement, MannerTempBadgeProps>(
-  Primitive.span,
-  "root",
-);
+export const MannerTempBadge = withProvider<HTMLSpanElement, MannerTempBadgeProps>(Primitive.span);

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -3,9 +3,9 @@ import {
   progressCircle,
   type ProgressCircleVariantProps,
 } from "@seed-design/css/recipes/progress-circle";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 
-const { withContext, withProvider } = createStyleContext(progressCircle);
+const { withContext, withProvider } = createSlotRecipeContext(progressCircle);
 
 export interface ProgressCircleRootProps
   extends ProgressCirclePrimitive.RootProps,

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -3,9 +3,9 @@ import {
   pullToRefresh,
   type PullToRefreshVariantProps,
 } from "@seed-design/css/recipes/pull-to-refresh";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 
-const { withContext, withProvider } = createStyleContext(pullToRefresh);
+const { withContext, withProvider } = createSlotRecipeContext(pullToRefresh);
 
 export interface PullToRefreshRootProps
   extends PullToRefreshVariantProps,

package/src/components/ReactionButton/ReactionButton.tsx

@@ -5,14 +5,14 @@ import {
 import { Toggle as TogglePrimitive } from "@seed-design/react-toggle";
 import clsx from "clsx";
 import * as React from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createRecipeContext } from "../../utils/createRecipeContext";
 import {
   PendingButtonProvider,
   usePendingButton,
   type UsePendingButtonProps,
 } from "../LoadingIndicator/usePendingButton";
 
-const { ClassNamesProvider } = createStyleContext(reactionButton);
+const { ClassNameProvider } = createRecipeContext(reactionButton);
 
 export interface ReactionButtonProps
   extends ReactionButtonVariantProps,
@@ -21,20 +21,20 @@ export interface ReactionButtonProps
 
 export const ReactionButton = React.forwardRef<HTMLButtonElement, ReactionButtonProps>(
   ({ size = "small", loading = false, className, ...otherProps }, ref) => {
-    const classNames = reactionButton({ size });
+    const recipeClassName = reactionButton({ size });
     const api = usePendingButton({ loading, disabled: otherProps.disabled });
 
     return (
-      <ClassNamesProvider value={classNames}>
+      <ClassNameProvider value={recipeClassName}>
         <PendingButtonProvider value={api}>
           <TogglePrimitive.Root
             ref={ref}
-            className={clsx(classNames.root, className)}
+            className={clsx(recipeClassName, className)}
             {...api.stateProps}
             {...otherProps}
           />
         </PendingButtonProvider>
-      </ClassNamesProvider>
+      </ClassNameProvider>
     );
   },
 );

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -4,9 +4,9 @@ import {
 } from "@seed-design/css/recipes/segmented-control";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { SegmentedControl as SegmentedControlPrimitive } from "@seed-design/react-segmented-control";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 
-const { withProvider, withContext } = createStyleContext(segmentedControl);
+const { withProvider, withContext } = createSlotRecipeContext(segmentedControl);
 
 export interface SegmentedControlRootProps
   extends SegmentedControlVariantProps,

package/src/components/SelectBox/CheckSelectBox.tsx

@@ -1,14 +1,15 @@
-import { Checkbox as CheckboxPrimitive, useCheckboxContext } from "@seed-design/react-checkbox";
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { selectBox } from "@seed-design/css/recipes/select-box";
 import { selectBoxGroup } from "@seed-design/css/recipes/select-box-group";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { Checkbox as CheckboxPrimitive, useCheckboxContext } from "@seed-design/react-checkbox";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { forwardRef } from "react";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { InternalIcon, type InternalIconProps } from "../private/Icon";
-import { forwardRef } from "react";
 
-const { withProvider: withGroupProvider } = createStyleContext(selectBoxGroup);
-const { withProvider, withContext } = createStyleContext(selectBox);
+const { withProvider: withGroupProvider } = createRecipeContext(selectBoxGroup);
+const { withProvider, withContext } = createSlotRecipeContext(selectBox);
 const withStateProps = createWithStateProps([useCheckboxContext]);
 
 export interface CheckSelectBoxGroupProps
@@ -23,7 +24,6 @@ export const CheckSelectBoxGroup = withGroupProvider<HTMLDivElement, CheckSelect
   forwardRef<HTMLDivElement, CheckSelectBoxGroupProps>((props, ref) => (
     <Primitive.div ref={ref} role="group" {...props} />
   )),
-  "root",
 );
 
 export interface CheckSelectBoxRootProps extends CheckboxPrimitive.RootProps {}

package/src/components/SelectBox/RadioSelectBox.tsx

@@ -1,23 +1,23 @@
+import { selectBox } from "@seed-design/css/recipes/select-box";
+import { selectBoxGroup } from "@seed-design/css/recipes/select-box-group";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import {
   RadioGroup as RadioGroupPrimitive,
   useRadioGroupItemContext,
 } from "@seed-design/react-radio-group";
-import { selectBox } from "@seed-design/css/recipes/select-box";
-import { selectBoxGroup } from "@seed-design/css/recipes/select-box-group";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { InternalIcon, type InternalIconProps } from "../private/Icon";
 
-const { withProvider: withGroupProvider } = createStyleContext(selectBoxGroup);
-const { withProvider, withContext } = createStyleContext(selectBox);
+const { withProvider: withGroupProvider } = createRecipeContext(selectBoxGroup);
+const { withProvider, withContext } = createSlotRecipeContext(selectBox);
 const withStateProps = createWithStateProps([useRadioGroupItemContext]);
 
 export interface RadioSelectBoxRootProps extends RadioGroupPrimitive.RootProps {}
 
 export const RadioSelectBoxRoot = withGroupProvider<HTMLDivElement, RadioSelectBoxRootProps>(
   RadioGroupPrimitive.Root,
-  "root",
 );
 
 export interface RadioSelectBoxItemProps extends RadioGroupPrimitive.ItemProps {}

package/src/components/Skeleton/Skeleton.tsx

@@ -1,10 +1,10 @@
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { skeleton, type SkeletonVariantProps } from "@seed-design/css/recipes/skeleton";
 import type * as React from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createRecipeContext } from "../../utils/createRecipeContext";
 import { withStyleProps, type StyleProps } from "../../utils/styled";
 
-const { withProvider } = createStyleContext(skeleton);
+const { withProvider } = createRecipeContext(skeleton);
 
 export interface SkeletonProps
   extends SkeletonVariantProps,
@@ -12,7 +12,4 @@ export interface SkeletonProps
     Pick<StyleProps, "height" | "width">,
     Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {}
 
-export const Skeleton = withProvider<HTMLDivElement, SkeletonProps>(
-  withStyleProps(Primitive.div),
-  "root",
-);
+export const Skeleton = withProvider<HTMLDivElement, SkeletonProps>(withStyleProps(Primitive.div));

package/src/components/Snackbar/Snackbar.tsx

@@ -1,15 +1,16 @@
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { Snackbar as SnackbarPrimitive } from "@seed-design/react-snackbar";
 import { snackbar, type SnackbarVariantProps } from "@seed-design/css/recipes/snackbar";
 import { snackbarRegion } from "@seed-design/css/recipes/snackbar-region";
 import { visuallyHidden } from "@seed-design/css/recipes/visually-hidden";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { Snackbar as SnackbarPrimitive } from "@seed-design/react-snackbar";
 import clsx from "clsx";
 import { forwardRef, useMemo } from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { InternalIcon, type InternalIconProps } from "../private/Icon";
 
-const { withProvider: withRegionProvider } = createStyleContext(snackbarRegion);
-const { withProvider, withContext } = createStyleContext(snackbar);
+const { withProvider: withRegionProvider } = createRecipeContext(snackbarRegion);
+const { withProvider, withContext } = createSlotRecipeContext(snackbar);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -23,7 +24,6 @@ export interface SnackbarRegionProps extends SnackbarVariantProps, SnackbarPrimi
 
 export const SnackbarRegion = withRegionProvider<HTMLDivElement, SnackbarRegionProps>(
   SnackbarPrimitive.Region,
-  "root",
 );
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -76,11 +76,11 @@ export interface SnackbarCloseButtonProps extends SnackbarPrimitive.CloseButtonP
 export const SnackbarCloseButton = forwardRef<HTMLButtonElement, SnackbarCloseButtonProps>(
   (props, ref) => {
     const { className, ...otherProps } = props;
-    const classNames = useMemo(() => visuallyHidden(), []);
+    const visuallyHiddenClassName = useMemo(() => visuallyHidden(), []);
     return (
       <SnackbarPrimitive.CloseButton
         ref={ref}
-        className={clsx(classNames.root, className)}
+        className={clsx(visuallyHiddenClassName, className)}
         {...otherProps}
       />
     );

package/src/components/Switch/Switch.tsx

@@ -1,10 +1,10 @@
 import { Switch as SwitchPrimitive, useSwitchContext } from "@seed-design/react-switch";
 import { switchStyle, type SwitchVariantProps } from "@seed-design/css/recipes/switch";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 
-const { withProvider, withContext } = createStyleContext(switchStyle);
+const { withProvider, withContext } = createSlotRecipeContext(switchStyle);
 const withStateProps = createWithStateProps([useSwitchContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/Tabs/Tabs.tsx

@@ -5,11 +5,11 @@ import {
   useTabsTriggerContext,
 } from "@seed-design/react-tabs";
 import { tabs, type TabsVariantProps } from "@seed-design/css/recipes/tabs";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import type React from "react";
 
-const { withProvider, withContext } = createStyleContext(tabs);
+const { withProvider, withContext } = createSlotRecipeContext(tabs);
 const withStateProps = createWithStateProps([useTabsContext, useTabsTriggerContext], {
   strict: false,
 });