@seed-design/react 0.0.3 → 0.0.5

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,10 @@
 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";
+import { createRecipeContext } from "../../utils/createRecipeContext";
 
-const { withProvider } = createStyleContext(visuallyHidden);
+const { withProvider } = createRecipeContext(visuallyHidden);
 
 export interface VisuallyHiddenProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 
-export const VisuallyHidden = withProvider<HTMLDivElement, VisuallyHiddenProps>(
-  Primitive.div,
-  "root",
-);
+export const VisuallyHidden = withProvider<HTMLDivElement, VisuallyHiddenProps>(Primitive.div);

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"}