@seed-design/react 0.0.7 → 0.0.9

package/lib/components/index.js

@@ -47,7 +47,10 @@ import * as InlineBanner_namespace from './InlineBanner/InlineBanner.namespace.j
 export { InlineBanner_namespace as InlineBanner };
 export { LinkContent } from './LinkContent/LinkContent.js';
 export { LoadingIndicator } from './LoadingIndicator/LoadingIndicator.js';
+export { MannerTemp } from './MannerTemp/MannerTemp.js';
+export { MannerTempEmote } from './MannerTemp/MannerTempEmote.js';
 export { MannerTempBadge } from './MannerTempBadge/MannerTempBadge.js';
+export { NotificationBadge, NotificationBadgePositioner } from './NotificationBadge/NotificationBadge.js';
 export { ProgressCircleRange, ProgressCircleRoot, ProgressCircleTrack } from './ProgressCircle/ProgressCircle.js';
 import * as ProgressCircle_namespace from './ProgressCircle/ProgressCircle.namespace.js';
 export { ProgressCircle_namespace as ProgressCircle };
@@ -74,7 +77,7 @@ export { Stack } from './Stack/Stack.js';
 export { SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb } from './Switch/Switch.js';
 import * as Switch_namespace from './Switch/Switch.namespace.js';
 export { Switch_namespace as Switch };
-export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TabsTriggerNotification } from './Tabs/Tabs.js';
+export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from './Tabs/Tabs.js';
 import * as Tabs_namespace from './Tabs/Tabs.namespace.js';
 export { Tabs_namespace as Tabs };
 export { Text } from './Text/Text.js';

package/lib/index.cjs

@@ -40,7 +40,10 @@ const InlineBanner = require('./components/InlineBanner/InlineBanner.cjs');
 const InlineBanner_namespace = require('./components/InlineBanner/InlineBanner.namespace.cjs');
 const LinkContent = require('./components/LinkContent/LinkContent.cjs');
 const LoadingIndicator = require('./components/LoadingIndicator/LoadingIndicator.cjs');
+const MannerTemp = require('./components/MannerTemp/MannerTemp.cjs');
+const MannerTempEmote = require('./components/MannerTemp/MannerTempEmote.cjs');
 const MannerTempBadge = require('./components/MannerTempBadge/MannerTempBadge.cjs');
+const NotificationBadge = require('./components/NotificationBadge/NotificationBadge.cjs');
 const ProgressCircle = require('./components/ProgressCircle/ProgressCircle.cjs');
 const ProgressCircle_namespace = require('./components/ProgressCircle/ProgressCircle.namespace.cjs');
 const PullToRefresh = require('./components/PullToRefresh/PullToRefresh.cjs');
@@ -185,7 +188,11 @@ exports.InlineBannerTitle = InlineBanner.InlineBannerTitle;
 exports.InlineBanner = InlineBanner_namespace;
 exports.LinkContent = LinkContent.LinkContent;
 exports.LoadingIndicator = LoadingIndicator.LoadingIndicator;
+exports.MannerTemp = MannerTemp.MannerTemp;
+exports.MannerTempEmote = MannerTempEmote.MannerTempEmote;
 exports.MannerTempBadge = MannerTempBadge.MannerTempBadge;
+exports.NotificationBadge = NotificationBadge.NotificationBadge;
+exports.NotificationBadgePositioner = NotificationBadge.NotificationBadgePositioner;
 exports.ProgressCircleRange = ProgressCircle.ProgressCircleRange;
 exports.ProgressCircleRoot = ProgressCircle.ProgressCircleRoot;
 exports.ProgressCircleTrack = ProgressCircle.ProgressCircleTrack;
@@ -248,7 +255,6 @@ exports.TabsIndicator = Tabs.TabsIndicator;
 exports.TabsList = Tabs.TabsList;
 exports.TabsRoot = Tabs.TabsRoot;
 exports.TabsTrigger = Tabs.TabsTrigger;
-exports.TabsTriggerNotification = Tabs.TabsTriggerNotification;
 exports.Tabs = Tabs_namespace;
 exports.Text = Text.Text;
 exports.TextFieldCharacterCount = TextField.TextFieldCharacterCount;

package/lib/index.js

@@ -47,7 +47,10 @@ import * as InlineBanner_namespace from './components/InlineBanner/InlineBanner.
 export { InlineBanner_namespace as InlineBanner };
 export { LinkContent } from './components/LinkContent/LinkContent.js';
 export { LoadingIndicator } from './components/LoadingIndicator/LoadingIndicator.js';
+export { MannerTemp } from './components/MannerTemp/MannerTemp.js';
+export { MannerTempEmote } from './components/MannerTemp/MannerTempEmote.js';
 export { MannerTempBadge } from './components/MannerTempBadge/MannerTempBadge.js';
+export { NotificationBadge, NotificationBadgePositioner } from './components/NotificationBadge/NotificationBadge.js';
 export { ProgressCircleRange, ProgressCircleRoot, ProgressCircleTrack } from './components/ProgressCircle/ProgressCircle.js';
 import * as ProgressCircle_namespace from './components/ProgressCircle/ProgressCircle.namespace.js';
 export { ProgressCircle_namespace as ProgressCircle };
@@ -74,7 +77,7 @@ export { Stack } from './components/Stack/Stack.js';
 export { SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb } from './components/Switch/Switch.js';
 import * as Switch_namespace from './components/Switch/Switch.namespace.js';
 export { Switch_namespace as Switch };
-export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TabsTriggerNotification } from './components/Tabs/Tabs.js';
+export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from './components/Tabs/Tabs.js';
 import * as Tabs_namespace from './components/Tabs/Tabs.namespace.js';
 export { Tabs_namespace as Tabs };
 export { Text } from './components/Text/Text.js';

package/lib/utils/createRecipeContext.cjs

@@ -7,41 +7,14 @@ 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 withContext = (Component, options) => {
     const { defaultProps } = options ?? {};
     const StyledComponent = React.forwardRef((innerProps, ref) => {
       const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
@@ -52,22 +25,14 @@ function createRecipeContext(recipe) {
     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;
-  };
+  function withPropsProvider() {
+    return PropsProvider;
+  }
   return {
-    ClassNameProvider,
     PropsProvider,
-    useClassName,
     useProps,
-    withRootProvider,
-    withProvider,
-    withContext
+    withContext,
+    withPropsProvider
   };
 }
 

package/lib/utils/createRecipeContext.d.ts

@@ -1,24 +1,16 @@
-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 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;
+export declare function createRecipeContext<Props extends Record<string, string | boolean | undefined>>(recipe: Recipe<Props>): {
     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?: {
+    withContext: <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>>;
+    withPropsProvider: <P>() => React.Provider<Partial<P>>;
 };
 export {};
 //# sourceMappingURL=createRecipeContext.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"createRecipeContext.d.ts","sourceRoot":"","sources":["../../src/utils/createRecipeContext.tsx"],"names":[],"mappings":"AAGA,KAAK,MAAM,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,CACzE,KAAK,CAAC,EAAE,KAAK,KACV,MAAM,CAAC,GAAG;IACb,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,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC5F,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC;yCAIuB;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE;;kBAQlE,CAAC,EAAE,CAAC,aACZ,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;wBAgB1D,CAAC,OAAK,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;EAU5D"}

package/lib/utils/createRecipeContext.js

@@ -3,41 +3,14 @@ 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 withContext = (Component, options) => {
     const { defaultProps } = options ?? {};
     const StyledComponent = forwardRef((innerProps, ref) => {
       const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
@@ -48,22 +21,14 @@ function createRecipeContext(recipe) {
     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;
-  };
+  function withPropsProvider() {
+    return PropsProvider;
+  }
   return {
-    ClassNameProvider,
     PropsProvider,
-    useClassName,
     useProps,
-    withRootProvider,
-    withProvider,
-    withContext
+    withContext,
+    withPropsProvider
   };
 }
 

package/lib/utils/createWithStateProps.cjs

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 
 function createWithStateProps(useContexts, options) {
-  const strict = options?.strict ?? true;
+  const strict = true;
   return function withStateProps(Component) {
     const Node = React.forwardRef((props, ref) => {
       const stateProps = {};

package/lib/utils/createWithStateProps.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
 function createWithStateProps(useContexts, options) {
-  const strict = options?.strict ?? true;
+  const strict = true;
   return function withStateProps(Component) {
     const Node = forwardRef((props, ref) => {
       const stateProps = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "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.7",
+    "@seed-design/css": "0.0.9",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "0.0.7",
+    "@seed-design/css": "0.0.9",
     "globby": "^14.1.0",
     "vite": "^6.1.1",
     "vite-plugin-dts": "^4.5.0"

package/src/components/ActionButton/ActionButton.tsx

@@ -5,7 +5,6 @@ import {
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import * as React from "react";
-import { createRecipeContext } from "../../utils/createRecipeContext";
 import { IconRequired } from "../Icon/Icon";
 import {
   PendingButtonProvider,
@@ -13,8 +12,6 @@ import {
   type UsePendingButtonProps,
 } from "../LoadingIndicator/usePendingButton";
 
-const { ClassNameProvider } = createRecipeContext(actionButton);
-
 export interface ActionButtonProps
   extends ActionButtonVariantProps,
     UsePendingButtonProps,
@@ -36,20 +33,18 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
     }
 
     return (
-      <ClassNameProvider value={recipeClassName}>
-        <PendingButtonProvider value={api}>
-          <IconRequired enabled={layout === "iconOnly"}>
-            <Primitive.button
-              ref={ref}
-              className={clsx(recipeClassName, className)}
-              {...api.stateProps}
-              {...otherProps}
-            >
-              {children}
-            </Primitive.button>
-          </IconRequired>
-        </PendingButtonProvider>
-      </ClassNameProvider>
+      <PendingButtonProvider value={api}>
+        <IconRequired enabled={layout === "iconOnly"}>
+          <Primitive.button
+            ref={ref}
+            className={clsx(recipeClassName, className)}
+            {...api.stateProps}
+            {...otherProps}
+          >
+            {children}
+          </Primitive.button>
+        </IconRequired>
+      </PendingButtonProvider>
     );
   },
 );

package/src/components/ActionChip/ActionChip.tsx

@@ -4,7 +4,7 @@ import type * as React from "react";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 import { withIconRequired } from "../Icon/Icon";
 
-const { withProvider } = createRecipeContext(actionChip);
+const { withContext } = 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),
+  withContext<HTMLButtonElement, ActionChipProps>(Primitive.button),
   (props: ActionChipProps) => props.layout === "iconOnly",
 );
 ActionChip.displayName = "ActionChip";

package/src/components/ActionSheet/ActionSheet.tsx

@@ -11,7 +11,7 @@ import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 
 const { withRootProvider, withContext } = createSlotRecipeContext(actionSheet);
-const { withProvider: withItemProvider } = createRecipeContext(actionSheetItem);
+const { withContext: withItemContext } = createRecipeContext(actionSheetItem);
 const withStateProps = createWithStateProps([useDialogContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -103,7 +103,7 @@ export interface ActionSheetItemProps
     ActionSheetItemVariantProps,
     React.HTMLAttributes<HTMLButtonElement> {}
 
-export const ActionSheetItem = withItemProvider<HTMLButtonElement, ActionSheetItemProps>(
+export const ActionSheetItem = withItemContext<HTMLButtonElement, ActionSheetItemProps>(
   withStateProps(Primitive.button),
 );
 

package/src/components/Badge/Badge.tsx

@@ -3,7 +3,7 @@ import { badge, type BadgeVariantProps } from "@seed-design/css/recipes/badge";
 import type * as React from "react";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 
-const { withProvider } = createRecipeContext(badge);
+const { withContext } = createRecipeContext(badge);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -12,4 +12,4 @@ export interface BadgeProps
     PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
 
-export const Badge = withProvider<HTMLSpanElement, BadgeProps>(Primitive.span);
+export const Badge = withContext<HTMLSpanElement, BadgeProps>(Primitive.span);

package/src/components/ControlChip/ControlChip.tsx

@@ -4,7 +4,7 @@ import type * as React from "react";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 import { withIconRequired } from "../Icon/Icon";
 
-const { withProvider } = createRecipeContext(controlChip);
+const { withContext } = 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),
+  withContext<HTMLButtonElement, ControlChipProps>(Primitive.button),
   (props: ControlChipProps) => props.layout === "iconOnly",
 );

package/src/components/ExtendedActionSheet/ExtendedActionSheet.tsx

@@ -14,7 +14,7 @@ import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 
 const { withRootProvider, withContext } = createSlotRecipeContext(extendedActionSheet);
-const { withProvider: withItemProvider } = createRecipeContext(extendedActionSheetItem);
+const { withContext: withItemContext } = createRecipeContext(extendedActionSheetItem);
 const withStateProps = createWithStateProps([useDialogContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -113,7 +113,7 @@ export interface ExtendedActionSheetItemProps
     ExtendedActionSheetItemVariantProps,
     React.HTMLAttributes<HTMLButtonElement> {}
 
-export const ExtendedActionSheetItem = withItemProvider<
+export const ExtendedActionSheetItem = withItemContext<
   HTMLButtonElement,
   ExtendedActionSheetItemProps
 >(withStateProps(Primitive.button));

package/src/components/ExtendedFab/ExtendedFab.tsx

@@ -2,7 +2,7 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { extendedFab, type ExtendedFabVariantProps } from "@seed-design/css/recipes/extended-fab";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 
-const { withProvider } = createRecipeContext(extendedFab);
+const { withContext } = createRecipeContext(extendedFab);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -11,7 +11,7 @@ export interface ExtendedFabProps
     PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const ExtendedFab = withProvider<HTMLButtonElement, ExtendedFabProps>(Primitive.button, {
+export const ExtendedFab = withContext<HTMLButtonElement, ExtendedFabProps>(Primitive.button, {
   defaultProps: {
     variant: "neutralSolid",
     size: "medium",

package/src/components/Fab/Fab.tsx

@@ -3,7 +3,7 @@ import { fab, type FabVariantProps } from "@seed-design/css/recipes/fab";
 import type * as React from "react";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 
-const { withProvider } = createRecipeContext(fab);
+const { withContext } = createRecipeContext(fab);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -12,4 +12,4 @@ export interface FabProps
     PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const Fab = withProvider<HTMLButtonElement, FabProps>(Primitive.button);
+export const Fab = withContext<HTMLButtonElement, FabProps>(Primitive.button);

package/src/components/LinkContent/LinkContent.tsx

@@ -4,7 +4,7 @@ import { createRecipeContext } from "../../utils/createRecipeContext";
 import type * as React from "react";
 import { withStyleProps, type StyleProps } from "../../utils/styled";
 
-const { withProvider } = createRecipeContext(linkContent);
+const { withContext } = createRecipeContext(linkContent);
 
 export interface LinkContentProps
   extends LinkContentVariantProps,
@@ -12,6 +12,6 @@ export interface LinkContentProps
     Pick<StyleProps, "color">,
     Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {}
 
-export const LinkContent = withProvider<HTMLButtonElement, LinkContentProps>(
+export const LinkContent = withContext<HTMLButtonElement, LinkContentProps>(
   withStyleProps(Primitive.span),
 );

package/src/components/MannerTemp/MannerTemp.tsx

@@ -0,0 +1,25 @@
+import { mannerTemp, type MannerTempVariantProps } from "@seed-design/css/recipes/manner-temp";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { forwardRef, useMemo } from "react";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { MannerTempEmotePropsProvider } from "./MannerTempEmote";
+
+const { withContext } = createRecipeContext(mannerTemp);
+
+export interface MannerTempProps
+  extends MannerTempVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+const MannerTempBase = withContext<HTMLSpanElement, MannerTempProps>(Primitive.span);
+
+export const MannerTemp = forwardRef<HTMLSpanElement, MannerTempProps>((props, ref) => {
+  const emoteProps = useMemo(() => ({ level: props.level }), [props.level]);
+
+  return (
+    <MannerTempEmotePropsProvider value={emoteProps}>
+      <MannerTempBase {...props} ref={ref} />
+    </MannerTempEmotePropsProvider>
+  );
+});