@seed-design/react 0.0.4 → 0.0.6

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.namespace.ts

@@ -1,7 +1,7 @@
 export {
   SnackbarActionButton as ActionButton,
   SnackbarAvoidOverlap as AvoidOverlap,
-  SnackbarCloseButton as CloseButton,
+  SnackbarHiddenCloseButton as HiddenCloseButton,
   SnackbarMessage as Message,
   SnackbarPrefixIcon as PrefixIcon,
   SnackbarRegion as Region,
@@ -10,7 +10,7 @@ export {
   SnackbarRootProvider as RootProvider,
   type SnackbarActionButtonProps as ActionButtonProps,
   type SnackbarAvoidOverlapProps as AvoidOverlapProps,
-  type SnackbarCloseButtonProps as CloseButtonProps,
+  type SnackbarHiddenCloseButtonProps as HiddenCloseButtonProps,
   type SnackbarMessageProps as MessageProps,
   type SnackbarPrefixIconProps as PrefixIconProps,
   type SnackbarRegionProps as RegionProps,

package/src/components/Snackbar/Snackbar.tsx

@@ -1,15 +1,15 @@
-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 clsx from "clsx";
-import { forwardRef, useMemo } from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { visuallyHidden } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { Snackbar as SnackbarPrimitive } from "@seed-design/react-snackbar";
+import { forwardRef } from "react";
+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 +23,6 @@ export interface SnackbarRegionProps extends SnackbarVariantProps, SnackbarPrimi
 
 export const SnackbarRegion = withRegionProvider<HTMLDivElement, SnackbarRegionProps>(
   SnackbarPrimitive.Region,
-  "root",
 );
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -68,24 +67,24 @@ export const SnackbarActionButton = withContext<HTMLButtonElement, SnackbarActio
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface SnackbarCloseButtonProps extends SnackbarPrimitive.CloseButtonProps {}
+export interface SnackbarHiddenCloseButtonProps extends SnackbarPrimitive.CloseButtonProps {}
 
 /**
  * Visually hidden button that closes the snackbar (for screen readers).
  */
-export const SnackbarCloseButton = forwardRef<HTMLButtonElement, SnackbarCloseButtonProps>(
-  (props, ref) => {
-    const { className, ...otherProps } = props;
-    const classNames = useMemo(() => visuallyHidden(), []);
-    return (
-      <SnackbarPrimitive.CloseButton
-        ref={ref}
-        className={clsx(classNames.root, className)}
-        {...otherProps}
-      />
-    );
-  },
-);
+export const SnackbarHiddenCloseButton = forwardRef<
+  HTMLButtonElement,
+  SnackbarHiddenCloseButtonProps
+>((props, ref) => {
+  const { style, ...otherProps } = props;
+  return (
+    <SnackbarPrimitive.CloseButton
+      ref={ref}
+      style={{ ...visuallyHidden, ...style }}
+      {...otherProps}
+    />
+  );
+});
 
 ////////////////////////////////////////////////////////////////////////////////////
 

package/src/components/Snackbar/index.ts

@@ -1,7 +1,7 @@
 export {
   SnackbarActionButton,
   SnackbarAvoidOverlap,
-  SnackbarCloseButton,
+  SnackbarHiddenCloseButton,
   SnackbarMessage,
   SnackbarPrefixIcon,
   SnackbarRegion,
@@ -10,7 +10,7 @@ export {
   SnackbarRootProvider,
   type SnackbarActionButtonProps,
   type SnackbarAvoidOverlapProps,
-  type SnackbarCloseButtonProps,
+  type SnackbarHiddenCloseButtonProps,
   type SnackbarMessageProps,
   type SnackbarPrefixIconProps,
   type SnackbarRegionProps,

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,
 });

package/src/components/Text/Text.tsx

@@ -108,7 +108,7 @@ export const Text = ({
   ...otherProps
 }: TextProps) => {
   const Comp = as || "span";
-  const classNames = useMemo(
+  const textClassName = useMemo(
     () =>
       text({
         textStyle,
@@ -119,7 +119,7 @@ export const Text = ({
 
   return (
     <Comp
-      className={clsx(classNames.root, className)}
+      className={clsx(textClassName, className)}
       style={
         {
           "--seed-max-lines": maxLines,

package/src/components/TextField/TextField.tsx

@@ -5,12 +5,12 @@ import { textField, type TextFieldVariantProps } from "@seed-design/css/recipes/
 import clsx from "clsx";
 import type * as React from "react";
 import { forwardRef, useCallback, useRef } from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { InternalIcon, type InternalIconProps } from "../private/Icon";
 import { composeRefs } from "@radix-ui/react-compose-refs";
 
-const { withProvider, withContext, useClassNames } = createStyleContext(textField);
+const { withProvider, withContext, useClassNames } = createSlotRecipeContext(textField);
 const withStateProps = createWithStateProps([useTextFieldContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////

package/src/components/ToggleButton/ToggleButton.tsx

@@ -5,14 +5,14 @@ import {
 } from "@seed-design/css/recipes/toggle-button";
 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(toggleButton);
+const { ClassNameProvider } = createRecipeContext(toggleButton);
 
 export interface ToggleButtonProps
   extends ToggleButtonVariantProps,
@@ -21,20 +21,20 @@ export interface ToggleButtonProps
 
 export const ToggleButton = React.forwardRef<HTMLButtonElement, ToggleButtonProps>(
   ({ variant = "brandSolid", size = "small", loading = false, className, ...otherProps }, ref) => {
-    const classNames = toggleButton({ variant, size });
+    const recipeClassName = toggleButton({ variant, 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/VisuallyHidden/VisuallyHidden.tsx

@@ -1,13 +1,11 @@
+import { visuallyHidden } from "@seed-design/dom-utils";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { visuallyHidden } from "@seed-design/css/recipes/visually-hidden";
 import type * as React from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
-
-const { withProvider } = createStyleContext(visuallyHidden);
+import { forwardRef } from "react";
 
 export interface VisuallyHiddenProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 
-export const VisuallyHidden = withProvider<HTMLDivElement, VisuallyHiddenProps>(
-  Primitive.div,
-  "root",
-);
+export const VisuallyHidden = forwardRef<HTMLDivElement, VisuallyHiddenProps>((props, ref) => {
+  const { style, ...otherProps } = props;
+  return <Primitive.div ref={ref} style={{ ...visuallyHidden, ...style }} {...otherProps} />;
+});

package/src/utils/createRecipeContext.tsx

@@ -0,0 +1,114 @@
+import clsx from "clsx";
+import { createContext, forwardRef, useContext } from "react";
+
+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 function createRecipeContext<
+  Props extends Record<string, string | boolean | undefined>,
+  ClassName extends string,
+>(recipe: Recipe<Props, ClassName>) {
+  const ClassNameContext = createContext<ClassName | null>(null);
+  const PropsContext = createContext<Props | null>(null);
+
+  const ClassNameProvider = ({
+    children,
+    value,
+  }: {
+    children: React.ReactNode;
+    value: ClassName;
+  }) => {
+    return <ClassNameContext.Provider value={value}>{children}</ClassNameContext.Provider>;
+  };
+
+  const PropsProvider = ({ children, value }: { children: React.ReactNode; value: Props }) => {
+    return <PropsContext.Provider value={value}>{children}</PropsContext.Provider>;
+  };
+
+  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 = <P,>(
+    Component: React.ElementType<any>,
+    options?: {
+      defaultProps?: Partial<P>;
+    },
+  ): React.ForwardRefExoticComponent<React.PropsWithoutRef<P>> => {
+    const { defaultProps } = options ?? {};
+
+    const StyledComponent = (innerProps: any) => {
+      const props = { ...(defaultProps ?? {}), ...useProps(), ...innerProps } as Props &
+        React.HTMLAttributes<HTMLElement>;
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const className = recipe(variantProps);
+
+      return (
+        <ClassNameProvider value={className}>
+          <Component {...otherProps} className={clsx(className, props.className)} />
+        </ClassNameProvider>
+      );
+    };
+
+    StyledComponent.displayName = (Component as any).displayName || (Component as any).name;
+    return StyledComponent as any;
+  };
+
+  const withProvider = <T, P>(
+    Component: React.ElementType<any>,
+    options?: {
+      defaultProps?: Partial<P>;
+    },
+  ): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>> => {
+    const { defaultProps } = options ?? {};
+
+    const StyledComponent = forwardRef<any, any>((innerProps, ref) => {
+      const props = { ...(defaultProps ?? {}), ...useProps(), ...innerProps } as Props &
+        React.HTMLAttributes<HTMLElement>;
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const className = recipe(variantProps);
+
+      return <Component ref={ref} {...otherProps} className={clsx(className, props.className)} />;
+    });
+
+    StyledComponent.displayName = (Component as any).displayName || (Component as any).name;
+    return StyledComponent as any;
+  };
+
+  const withContext = <T, P>(
+    Component: React.ElementType<any>,
+  ): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>> => {
+    const StyledComponent = forwardRef<any, React.HTMLAttributes<HTMLElement>>((props, ref) => {
+      const className = useClassName();
+
+      return <Component ref={ref} {...props} className={clsx(className, props.className)} />;
+    });
+
+    StyledComponent.displayName = (Component as any).displayName || (Component as any).name;
+    return StyledComponent as any;
+  };
+
+  return {
+    ClassNameProvider,
+    PropsProvider,
+    useClassName,
+    useProps,
+    withRootProvider,
+    withProvider,
+    withContext,
+  };
+}

package/src/utils/{createStyleContext.tsx → createSlotRecipeContext.tsx}

@@ -1,17 +1,17 @@
 import clsx from "clsx";
 import { createContext, forwardRef, useContext } from "react";
 
-type Recipe<
+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 function createStyleContext<
+export function createSlotRecipeContext<
   Props extends Record<string, string | boolean | undefined>,
   Classnames extends Record<string, string>,
->(recipe: Recipe<Props, Classnames>) {
+>(recipe: SlotRecipe<Props, Classnames>) {
   const ClassNamesContext = createContext<Classnames | null>(null);
   const PropsContext = createContext<Props | null>(null);
 

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

@@ -1 +0,0 @@
-{"version":3,"file":"createStyleContext.d.ts","sourceRoot":"","sources":["../../src/utils/createStyleContext.tsx"],"names":[],"mappings":"AAGA,KAAK,MAAM,CACT,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,kBAAkB,CAChC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC;+CAO9B;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"}