@seed-design/react 0.0.7 → 0.0.9

package/src/components/Snackbar/Snackbar.tsx

@@ -8,7 +8,7 @@ import { createRecipeContext } from "../../utils/createRecipeContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { InternalIcon, type InternalIconProps } from "../private/Icon";
 
-const { withProvider: withRegionProvider } = createRecipeContext(snackbarRegion);
+const { withContext: withRegionContext } = createRecipeContext(snackbarRegion);
 const { withProvider, withContext } = createSlotRecipeContext(snackbar);
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -21,7 +21,7 @@ export const SnackbarRootProvider = SnackbarPrimitive.RootProvider;
 
 export interface SnackbarRegionProps extends SnackbarVariantProps, SnackbarPrimitive.RegionProps {}
 
-export const SnackbarRegion = withRegionProvider<HTMLDivElement, SnackbarRegionProps>(
+export const SnackbarRegion = withRegionContext<HTMLDivElement, SnackbarRegionProps>(
   SnackbarPrimitive.Region,
 );
 

package/src/components/Tabs/Tabs.namespace.ts

@@ -6,13 +6,11 @@ export {
   TabsCarouselCamera as CarouselCamera,
   TabsCarousel as Carousel,
   TabsTrigger as Trigger,
-  TabsTriggerNotification as TriggerNotification,
   type TabsContentProps as ContentProps,
   type TabsIndicatorProps as IndicatorProps,
   type TabsListProps as ListProps,
   type TabsRootProps as RootProps,
   type TabsCarouselCameraProps as CarouselCameraProps,
   type TabsCarouselProps as CarouselProps,
-  type TabsTriggerNotificationProps as TriggerNotificationProps,
   type TabsTriggerProps as TriggerProps,
 } from "./Tabs";

package/src/components/Tabs/Tabs.tsx

@@ -1,18 +1,8 @@
-import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import {
-  Tabs as TabsPrimitive,
-  useTabsContext,
-  useTabsTriggerContext,
-} from "@seed-design/react-tabs";
 import { tabs, type TabsVariantProps } from "@seed-design/css/recipes/tabs";
+import { Tabs as TabsPrimitive } from "@seed-design/react-tabs";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { createWithStateProps } from "../../utils/createWithStateProps";
-import type React from "react";
 
 const { withProvider, withContext } = createSlotRecipeContext(tabs);
-const withStateProps = createWithStateProps([useTabsContext, useTabsTriggerContext], {
-  strict: false,
-});
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -37,17 +27,6 @@ export const TabsTrigger = withContext<HTMLButtonElement, TabsTriggerProps>(
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface TabsTriggerNotificationProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
-
-export const TabsTriggerNotification = withContext<HTMLDivElement, TabsTriggerNotificationProps>(
-  withStateProps(Primitive.div),
-  "triggerNotification",
-);
-
-////////////////////////////////////////////////////////////////////////////////////
-
 export interface TabsIndicatorProps extends TabsPrimitive.IndicatorProps {}
 
 export const TabsIndicator = withContext<HTMLSpanElement, TabsIndicatorProps>(

package/src/components/Tabs/index.ts

@@ -6,14 +6,12 @@ export {
   TabsCarouselCamera,
   TabsCarousel,
   TabsTrigger,
-  TabsTriggerNotification,
   type TabsContentProps,
   type TabsIndicatorProps,
   type TabsListProps,
   type TabsRootProps,
   type TabsCarouselCameraProps,
   type TabsCarouselProps,
-  type TabsTriggerNotificationProps,
   type TabsTriggerProps,
 } from "./Tabs";
 

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,7 +25,9 @@ export * from "./Inline";
 export * from "./InlineBanner";
 export * from "./LinkContent";
 export * from "./LoadingIndicator";
+export * from "./MannerTemp";
 export * from "./MannerTempBadge";
+export * from "./NotificationBadge";
 export * from "./ProgressCircle";
 export * from "./PullToRefresh";
 export * from "./ReactionButton";

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