@seed-design/react 0.0.8 → 0.0.9

package/src/components/ToggleButton/ToggleButton.tsx

@@ -1,19 +1,16 @@
-import { Toggle as TogglePrimitive } from "@seed-design/react-toggle";
 import {
   toggleButton,
   type ToggleButtonVariantProps,
 } from "@seed-design/css/recipes/toggle-button";
+import { Toggle as TogglePrimitive } from "@seed-design/react-toggle";
 import clsx from "clsx";
 import * as React from "react";
-import { createRecipeContext } from "../../utils/createRecipeContext";
 import {
   PendingButtonProvider,
   usePendingButton,
   type UsePendingButtonProps,
 } from "../LoadingIndicator/usePendingButton";
 
-const { ClassNameProvider } = createRecipeContext(toggleButton);
-
 export interface ToggleButtonProps
   extends ToggleButtonVariantProps,
     UsePendingButtonProps,
@@ -25,16 +22,14 @@ export const ToggleButton = React.forwardRef<HTMLButtonElement, ToggleButtonProp
     const api = usePendingButton({ loading, disabled: otherProps.disabled });
 
     return (
-      <ClassNameProvider value={recipeClassName}>
-        <PendingButtonProvider value={api}>
-          <TogglePrimitive.Root
-            ref={ref}
-            className={clsx(recipeClassName, className)}
-            {...api.stateProps}
-            {...otherProps}
-          />
-        </PendingButtonProvider>
-      </ClassNameProvider>
+      <PendingButtonProvider value={api}>
+        <TogglePrimitive.Root
+          ref={ref}
+          className={clsx(recipeClassName, className)}
+          {...api.stateProps}
+          {...otherProps}
+        />
+      </PendingButtonProvider>
     );
   },
 );

package/src/components/index.ts

@@ -25,6 +25,7 @@ export * from "./Inline";
 export * from "./InlineBanner";
 export * from "./LinkContent";
 export * from "./LoadingIndicator";
+export * from "./MannerTemp";
 export * from "./MannerTempBadge";
 export * from "./NotificationBadge";
 export * from "./ProgressCircle";

package/src/utils/createRecipeContext.tsx

@@ -1,74 +1,26 @@
 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) & {
+type Recipe<Props extends Record<string, string | boolean | undefined>> = ((
+  props?: Props,
+) => string) & {
   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);
+export function createRecipeContext<Props extends Record<string, string | boolean | undefined>>(
+  recipe: Recipe<Props>,
+) {
   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>(
+  const withContext = <T, P>(
     Component: React.ElementType<any>,
     options?: {
       defaultProps?: Partial<P>;
@@ -80,7 +32,7 @@ export function createRecipeContext<
       const props = { ...(defaultProps ?? {}), ...useProps(), ...innerProps } as Props &
         React.HTMLAttributes<HTMLElement>;
       const [variantProps, otherProps] = recipe.splitVariantProps(props);
-      const className = recipe(variantProps);
+      const className = recipe(variantProps); // TODO: should we memoize this?
 
       return <Component ref={ref} {...otherProps} className={clsx(className, props.className)} />;
     });
@@ -89,26 +41,14 @@ export function createRecipeContext<
     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;
-  };
+  function withPropsProvider<P>(): React.Provider<Partial<P>> {
+    return PropsProvider as any;
+  }
 
   return {
-    ClassNameProvider,
     PropsProvider,
-    useClassName,
     useProps,
-    withRootProvider,
-    withProvider,
     withContext,
+    withPropsProvider,
   };
 }