@seed-design/react 0.0.4 → 0.0.6

package/lib/index.cjs

@@ -221,7 +221,7 @@ exports.RadioSelectBox = RadioSelectBox_namespace;
 exports.Skeleton = Skeleton.Skeleton;
 exports.SnackbarActionButton = Snackbar.SnackbarActionButton;
 exports.SnackbarAvoidOverlap = Snackbar.SnackbarAvoidOverlap;
-exports.SnackbarCloseButton = Snackbar.SnackbarCloseButton;
+exports.SnackbarHiddenCloseButton = Snackbar.SnackbarHiddenCloseButton;
 exports.SnackbarMessage = Snackbar.SnackbarMessage;
 exports.SnackbarPrefixIcon = Snackbar.SnackbarPrefixIcon;
 exports.SnackbarRegion = Snackbar.SnackbarRegion;

package/lib/index.js

@@ -65,7 +65,7 @@ export { CheckSelectBox_namespace as CheckSelectBox };
 import * as RadioSelectBox_namespace from './components/SelectBox/RadioSelectBox.namespace.js';
 export { RadioSelectBox_namespace as RadioSelectBox };
 export { Skeleton } from './components/Skeleton/Skeleton.js';
-export { SnackbarActionButton, SnackbarAvoidOverlap, SnackbarCloseButton, SnackbarMessage, SnackbarPrefixIcon, SnackbarRegion, SnackbarRenderer, SnackbarRoot, SnackbarRootProvider } from './components/Snackbar/Snackbar.js';
+export { SnackbarActionButton, SnackbarAvoidOverlap, SnackbarHiddenCloseButton, SnackbarMessage, SnackbarPrefixIcon, SnackbarRegion, SnackbarRenderer, SnackbarRoot, SnackbarRootProvider } from './components/Snackbar/Snackbar.js';
 export { useSnackbarContext } from '@seed-design/react-snackbar';
 export { useSnackbarAdapter } from './components/Snackbar/useSnackbarAdapter.js';
 import * as Snackbar_namespace from './components/Snackbar/Snackbar.namespace.js';

package/lib/utils/createRecipeContext.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const clsx = require('clsx');
+const React = require('react');
+
+function createRecipeContext(recipe) {
+  const ClassNameContext = React.createContext(null);
+  const PropsContext = React.createContext(null);
+  const ClassNameProvider = ({
+    children,
+    value
+  }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(ClassNameContext.Provider, { value, children });
+  };
+  const PropsProvider = ({ children, value }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(PropsContext.Provider, { value, children });
+  };
+  function useClassName() {
+    const context = React.useContext(ClassNameContext);
+    if (context === null) {
+      throw new Error(
+        "useClassName must be used within a ClassNameProvider. Did you forget to wrap your component in a ClassNameProvider?"
+      );
+    }
+    return context;
+  }
+  function useProps() {
+    return React.useContext(PropsContext);
+  }
+  const withRootProvider = (Component, options) => {
+    const { defaultProps } = options ?? {};
+    const StyledComponent = (innerProps) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const className = recipe(variantProps);
+      return /* @__PURE__ */ jsxRuntime.jsx(ClassNameProvider, { value: className, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...otherProps, className: clsx(className, props.className) }) });
+    };
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  const withProvider = (Component, options) => {
+    const { defaultProps } = options ?? {};
+    const StyledComponent = React.forwardRef((innerProps, ref) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const className = recipe(variantProps);
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...otherProps, className: clsx(className, props.className) });
+    });
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  const withContext = (Component) => {
+    const StyledComponent = React.forwardRef((props, ref) => {
+      const className = useClassName();
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...props, className: clsx(className, props.className) });
+    });
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  return {
+    ClassNameProvider,
+    PropsProvider,
+    useClassName,
+    useProps,
+    withRootProvider,
+    withProvider,
+    withContext
+  };
+}
+
+exports.createRecipeContext = createRecipeContext;

package/lib/utils/createRecipeContext.d.ts

@@ -0,0 +1,24 @@
+type Recipe<Props extends Record<string, string | boolean | undefined>, ClassName extends string> = ((props?: Props) => ClassName) & {
+    splitVariantProps: <T extends Props>(props: T) => [Props, Omit<T, keyof Props>];
+};
+export declare function createRecipeContext<Props extends Record<string, string | boolean | undefined>, ClassName extends string>(recipe: Recipe<Props, ClassName>): {
+    ClassNameProvider: ({ children, value, }: {
+        children: React.ReactNode;
+        value: ClassName;
+    }) => import("react/jsx-runtime").JSX.Element;
+    PropsProvider: ({ children, value }: {
+        children: React.ReactNode;
+        value: Props;
+    }) => import("react/jsx-runtime").JSX.Element;
+    useClassName: () => ClassName;
+    useProps: () => Props | null;
+    withRootProvider: <P>(Component: React.ElementType<any>, options?: {
+        defaultProps?: Partial<P>;
+    }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P>>;
+    withProvider: <T, P>(Component: React.ElementType<any>, options?: {
+        defaultProps?: Partial<P>;
+    }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+    withContext: <T, P>(Component: React.ElementType<any>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+};
+export {};
+//# sourceMappingURL=createRecipeContext.d.ts.map

package/lib/utils/createRecipeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createRecipeContext.d.ts","sourceRoot":"","sources":["../../src/utils/createRecipeContext.tsx"],"names":[],"mappings":"AAGA,KAAK,MAAM,CACT,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,SAAS,SAAS,MAAM,IACtB,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,SAAS,CAAC,GAAG;IACnC,iBAAiB,EAAE,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC;CACjF,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,SAAS,SAAS,MAAM,EACxB,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC;8CAO7B;QACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,KAAK,EAAE,SAAS,CAAC;KAClB;yCAI2C;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE;;;uBAkB7D,CAAC,aACd,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,YACvB;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;mBAoBtC,CAAC,EAAE,CAAC,aACb,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,YACvB;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;kBAgBhE,CAAC,EAAE,CAAC,aACZ,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,KAChC,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;EAoBtF"}

package/lib/utils/createRecipeContext.js

@@ -0,0 +1,70 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { createContext, forwardRef, useContext } from 'react';
+
+function createRecipeContext(recipe) {
+  const ClassNameContext = createContext(null);
+  const PropsContext = createContext(null);
+  const ClassNameProvider = ({
+    children,
+    value
+  }) => {
+    return /* @__PURE__ */ jsx(ClassNameContext.Provider, { value, children });
+  };
+  const PropsProvider = ({ children, value }) => {
+    return /* @__PURE__ */ jsx(PropsContext.Provider, { value, children });
+  };
+  function useClassName() {
+    const context = useContext(ClassNameContext);
+    if (context === null) {
+      throw new Error(
+        "useClassName must be used within a ClassNameProvider. Did you forget to wrap your component in a ClassNameProvider?"
+      );
+    }
+    return context;
+  }
+  function useProps() {
+    return useContext(PropsContext);
+  }
+  const withRootProvider = (Component, options) => {
+    const { defaultProps } = options ?? {};
+    const StyledComponent = (innerProps) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const className = recipe(variantProps);
+      return /* @__PURE__ */ jsx(ClassNameProvider, { value: className, children: /* @__PURE__ */ jsx(Component, { ...otherProps, className: clsx(className, props.className) }) });
+    };
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  const withProvider = (Component, options) => {
+    const { defaultProps } = options ?? {};
+    const StyledComponent = forwardRef((innerProps, ref) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const className = recipe(variantProps);
+      return /* @__PURE__ */ jsx(Component, { ref, ...otherProps, className: clsx(className, props.className) });
+    });
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  const withContext = (Component) => {
+    const StyledComponent = forwardRef((props, ref) => {
+      const className = useClassName();
+      return /* @__PURE__ */ jsx(Component, { ref, ...props, className: clsx(className, props.className) });
+    });
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent;
+  };
+  return {
+    ClassNameProvider,
+    PropsProvider,
+    useClassName,
+    useProps,
+    withRootProvider,
+    withProvider,
+    withContext
+  };
+}
+
+export { createRecipeContext };

package/lib/utils/{createStyleContext.cjs → createSlotRecipeContext.cjs}

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const clsx = require('clsx');
 const React = require('react');
 
-function createStyleContext(recipe) {
+function createSlotRecipeContext(recipe) {
   const ClassNamesContext = React.createContext(null);
   const PropsContext = React.createContext(null);
   const ClassNamesProvider = ({
@@ -73,4 +73,4 @@ function createStyleContext(recipe) {
   };
 }
 
-exports.createStyleContext = createStyleContext;
+exports.createSlotRecipeContext = createSlotRecipeContext;

package/lib/utils/{createStyleContext.d.ts → createSlotRecipeContext.d.ts}

@@ -1,7 +1,7 @@
-type Recipe<Props extends Record<string, string | boolean | undefined>, Classnames extends Record<string, string>> = ((props?: Props) => Classnames) & {
+type SlotRecipe<Props extends Record<string, string | boolean | undefined>, Classnames extends Record<string, string>> = ((props?: Props) => Classnames) & {
     splitVariantProps: <T extends Props>(props: T) => [Props, Omit<T, keyof Props>];
 };
-export declare function createStyleContext<Props extends Record<string, string | boolean | undefined>, Classnames extends Record<string, string>>(recipe: Recipe<Props, Classnames>): {
+export declare function createSlotRecipeContext<Props extends Record<string, string | boolean | undefined>, Classnames extends Record<string, string>>(recipe: SlotRecipe<Props, Classnames>): {
     ClassNamesProvider: ({ children, value, }: {
         children: React.ReactNode;
         value: Classnames;
@@ -21,4 +21,4 @@ export declare function createStyleContext<Props extends Record<string, string |
     withContext: <T, P>(Component: React.ElementType<any>, slot?: keyof Classnames) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
 };
 export {};
-//# sourceMappingURL=createStyleContext.d.ts.map
+//# sourceMappingURL=createSlotRecipeContext.d.ts.map

package/lib/utils/createSlotRecipeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createSlotRecipeContext.d.ts","sourceRoot":"","sources":["../../src/utils/createSlotRecipeContext.tsx"],"names":[],"mappings":"AAGA,KAAK,UAAU,CACb,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IACvC,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,GAAG;IACpC,iBAAiB,EAAE,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC;CACjF,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,MAAM,EAAE,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC;+CAOlC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE;yCAIP;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE;;;uBAmB7D,CAAC,aACd,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,YACvB;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;mBAsBtC,CAAC,EAAE,CAAC,aACb,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,QAC3B,MAAM,UAAU,YACZ;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;kBAuBhE,CAAC,EAAE,CAAC,aACZ,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,SAC1B,MAAM,UAAU,KACtB,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;EAsBtF"}

package/lib/utils/{createStyleContext.js → createSlotRecipeContext.js}

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { createContext, forwardRef, useContext } from 'react';
 
-function createStyleContext(recipe) {
+function createSlotRecipeContext(recipe) {
   const ClassNamesContext = createContext(null);
   const PropsContext = createContext(null);
   const ClassNamesProvider = ({
@@ -69,4 +69,4 @@ function createStyleContext(recipe) {
   };
 }
 
-export { createStyleContext };
+export { createSlotRecipeContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -55,12 +55,12 @@
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@seed-design/css": "0.0.4",
+    "@seed-design/css": "0.0.6",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "0.0.4",
+    "@seed-design/css": "0.0.6",
     "globby": "^14.1.0",
     "vite": "^6.1.1",
     "vite-plugin-dts": "^4.5.0"

package/src/components/ActionButton/ActionButton.tsx

@@ -5,15 +5,15 @@ import {
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import * as React from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { IconRequired } from "../Icon/Icon";
 import {
   PendingButtonProvider,
   usePendingButton,
   type UsePendingButtonProps,
 } from "../LoadingIndicator/usePendingButton";
-import { IconRequired } from "../Icon/Icon";
 
-const { ClassNamesProvider } = createStyleContext(actionButton);
+const { ClassNameProvider } = createRecipeContext(actionButton);
 
 export interface ActionButtonProps
   extends ActionButtonVariantProps,
@@ -26,7 +26,7 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
     { variant, size, loading = false, layout = "withText", className, children, ...otherProps },
     ref,
   ) => {
-    const classNames = actionButton({ variant, layout, size });
+    const recipeClassName = actionButton({ variant, layout, size });
     const api = usePendingButton({ loading, disabled: otherProps.disabled });
 
     if (layout === "iconOnly" && !(otherProps["aria-label"] || otherProps["aria-labelledby"])) {
@@ -36,12 +36,12 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
     }
 
     return (
-      <ClassNamesProvider value={classNames}>
+      <ClassNameProvider value={recipeClassName}>
         <PendingButtonProvider value={api}>
           <IconRequired enabled={layout === "iconOnly"}>
             <Primitive.button
               ref={ref}
-              className={clsx(classNames.root, className)}
+              className={clsx(recipeClassName, className)}
               {...api.stateProps}
               {...otherProps}
             >
@@ -49,7 +49,7 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
             </Primitive.button>
           </IconRequired>
         </PendingButtonProvider>
-      </ClassNamesProvider>
+      </ClassNameProvider>
     );
   },
 );

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;