@seed-design/react 0.0.8 → 0.0.9

package/lib/components/MannerTempBadge/MannerTempBadge.cjs

@@ -6,7 +6,7 @@ const mannerTempBadge = require('@seed-design/css/recipes/manner-temp-badge');
 const reactPrimitive = require('@seed-design/react-primitive');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 
-const { withProvider } = createRecipeContext.createRecipeContext(mannerTempBadge.mannerTempBadge);
-const MannerTempBadge = withProvider(reactPrimitive.Primitive.span);
+const { withContext } = createRecipeContext.createRecipeContext(mannerTempBadge.mannerTempBadge);
+const MannerTempBadge = withContext(reactPrimitive.Primitive.span);
 
 exports.MannerTempBadge = MannerTempBadge;

package/lib/components/MannerTempBadge/MannerTempBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MannerTempBadge.d.ts","sourceRoot":"","sources":["../../../src/components/MannerTempBadge/MannerTempBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,2BAA2B,EACjC,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAOpC,MAAM,WAAW,oBACf,SAAQ,2BAA2B,EACjC,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,8FAAsE,CAAC"}
+{"version":3,"file":"MannerTempBadge.d.ts","sourceRoot":"","sources":["../../../src/components/MannerTempBadge/MannerTempBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,2BAA2B,EACjC,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAOpC,MAAM,WAAW,oBACf,SAAQ,2BAA2B,EACjC,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,8FAAqE,CAAC"}

package/lib/components/MannerTempBadge/MannerTempBadge.js

@@ -2,7 +2,7 @@ import { mannerTempBadge } from '@seed-design/css/recipes/manner-temp-badge';
 import { Primitive } from '@seed-design/react-primitive';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
 
-const { withProvider } = createRecipeContext(mannerTempBadge);
-const MannerTempBadge = withProvider(Primitive.span);
+const { withContext } = createRecipeContext(mannerTempBadge);
+const MannerTempBadge = withContext(Primitive.span);
 
 export { MannerTempBadge };

package/lib/components/NotificationBadge/NotificationBadge.cjs

@@ -29,8 +29,8 @@ function _interopNamespaceDefault(e) {
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const { withProvider, PropsProvider } = createRecipeContext.createRecipeContext(notificationBadge.notificationBadge);
-const NotificationBadge = withProvider(
+const { withContext, PropsProvider } = createRecipeContext.createRecipeContext(notificationBadge.notificationBadge);
+const NotificationBadge = withContext(
   reactPrimitive.Primitive.span
 );
 const NotificationBadgePositioner = React__namespace.forwardRef((props, ref) => {

package/lib/components/NotificationBadge/NotificationBadge.js

@@ -7,8 +7,8 @@ import * as React from 'react';
 import { useMemo } from 'react';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
 
-const { withProvider, PropsProvider } = createRecipeContext(notificationBadge);
-const NotificationBadge = withProvider(
+const { withContext, PropsProvider } = createRecipeContext(notificationBadge);
+const NotificationBadge = withContext(
   Primitive.span
 );
 const NotificationBadgePositioner = React.forwardRef((props, ref) => {

package/lib/components/ReactionButton/ReactionButton.cjs

@@ -7,7 +7,6 @@ const reactionButton = require('@seed-design/css/recipes/reaction-button');
 const reactToggle = require('@seed-design/react-toggle');
 const clsx = require('clsx');
 const React = require('react');
-const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -29,12 +28,11 @@ function _interopNamespaceDefault(e) {
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const { ClassNameProvider } = createRecipeContext.createRecipeContext(reactionButton.reactionButton);
 const ReactionButton = React__namespace.forwardRef(
   ({ size = "small", loading = false, className, ...otherProps }, ref) => {
     const recipeClassName = reactionButton.reactionButton({ size });
     const api = usePendingButton.usePendingButton({ loading, disabled: otherProps.disabled });
-    return /* @__PURE__ */ jsxRuntime.jsx(ClassNameProvider, { value: recipeClassName, children: /* @__PURE__ */ jsxRuntime.jsx(usePendingButton.PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(usePendingButton.PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
       reactToggle.Toggle.Root,
       {
         ref,
@@ -42,7 +40,7 @@ const ReactionButton = React__namespace.forwardRef(
         ...api.stateProps,
         ...otherProps
       }
-    ) }) });
+    ) });
   }
 );
 ReactionButton.displayName = "ReactionButton";

package/lib/components/ReactionButton/ReactionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ReactionButton/ReactionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAC;AAI9C,MAAM,WAAW,mBACf,SAAQ,0BAA0B,EAChC,qBAAqB,EACrB,eAAe,CAAC,SAAS;CAAG;AAEhC,eAAO,MAAM,cAAc,+FAkB1B,CAAC"}
+{"version":3,"file":"ReactionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ReactionButton/ReactionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,0CAA0C,CAAC;AAClD,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,mBACf,SAAQ,0BAA0B,EAChC,qBAAqB,EACrB,eAAe,CAAC,SAAS;CAAG;AAEhC,eAAO,MAAM,cAAc,+FAgB1B,CAAC"}

package/lib/components/ReactionButton/ReactionButton.js

@@ -3,15 +3,13 @@ import { reactionButton } from '@seed-design/css/recipes/reaction-button';
 import { Toggle } from '@seed-design/react-toggle';
 import clsx from 'clsx';
 import * as React from 'react';
-import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
 
-const { ClassNameProvider } = createRecipeContext(reactionButton);
 const ReactionButton = React.forwardRef(
   ({ size = "small", loading = false, className, ...otherProps }, ref) => {
     const recipeClassName = reactionButton({ size });
     const api = usePendingButton({ loading, disabled: otherProps.disabled });
-    return /* @__PURE__ */ jsx(ClassNameProvider, { value: recipeClassName, children: /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(
       Toggle.Root,
       {
         ref,
@@ -19,7 +17,7 @@ const ReactionButton = React.forwardRef(
         ...api.stateProps,
         ...otherProps
       }
-    ) }) });
+    ) });
   }
 );
 ReactionButton.displayName = "ReactionButton";

package/lib/components/SelectBox/CheckSelectBox.cjs

@@ -13,10 +13,10 @@ const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const Icon = require('../private/Icon.cjs');
 
-const { withProvider: withGroupProvider } = createRecipeContext.createRecipeContext(selectBoxGroup.selectBoxGroup);
-const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(selectBox.selectBox);
+const { withContext: withGroupContext } = createRecipeContext.createRecipeContext(selectBoxGroup.selectBoxGroup);
+const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(selectBox.selectBox);
 const withStateProps = createWithStateProps.createWithStateProps([reactCheckbox.useCheckboxContext]);
-const CheckSelectBoxGroup = withGroupProvider(
+const CheckSelectBoxGroup = withGroupContext(
   React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref, role: "group", ...props }))
 );
 const CheckSelectBoxRoot = withProvider(

package/lib/components/SelectBox/CheckSelectBox.js

@@ -9,10 +9,10 @@ import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js'
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { InternalIcon } from '../private/Icon.js';
 
-const { withProvider: withGroupProvider } = createRecipeContext(selectBoxGroup);
-const { withProvider, withContext } = createSlotRecipeContext(selectBox);
+const { withContext: withGroupContext } = createRecipeContext(selectBoxGroup);
+const { withContext, withProvider } = createSlotRecipeContext(selectBox);
 const withStateProps = createWithStateProps([useCheckboxContext]);
-const CheckSelectBoxGroup = withGroupProvider(
+const CheckSelectBoxGroup = withGroupContext(
   forwardRef((props, ref) => /* @__PURE__ */ jsx(Primitive.div, { ref, role: "group", ...props }))
 );
 const CheckSelectBoxRoot = withProvider(

package/lib/components/SelectBox/RadioSelectBox.cjs

@@ -11,10 +11,10 @@ const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const Icon = require('../private/Icon.cjs');
 
-const { withProvider: withGroupProvider } = createRecipeContext.createRecipeContext(selectBoxGroup.selectBoxGroup);
-const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(selectBox.selectBox);
+const { withContext: withGroupContext } = createRecipeContext.createRecipeContext(selectBoxGroup.selectBoxGroup);
+const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(selectBox.selectBox);
 const withStateProps = createWithStateProps.createWithStateProps([reactRadioGroup.useRadioGroupItemContext]);
-const RadioSelectBoxRoot = withGroupProvider(
+const RadioSelectBoxRoot = withGroupContext(
   reactRadioGroup.RadioGroup.Root
 );
 const RadioSelectBoxItem = withProvider(

package/lib/components/SelectBox/RadioSelectBox.js

@@ -7,10 +7,10 @@ import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js'
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { InternalIcon } from '../private/Icon.js';
 
-const { withProvider: withGroupProvider } = createRecipeContext(selectBoxGroup);
-const { withProvider, withContext } = createSlotRecipeContext(selectBox);
+const { withContext: withGroupContext } = createRecipeContext(selectBoxGroup);
+const { withContext, withProvider } = createSlotRecipeContext(selectBox);
 const withStateProps = createWithStateProps([useRadioGroupItemContext]);
-const RadioSelectBoxRoot = withGroupProvider(
+const RadioSelectBoxRoot = withGroupContext(
   RadioGroup.Root
 );
 const RadioSelectBoxItem = withProvider(

package/lib/components/Skeleton/Skeleton.cjs

@@ -7,7 +7,7 @@ const skeleton = require('@seed-design/css/recipes/skeleton');
 const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const styled = require('../../utils/styled.cjs');
 
-const { withProvider } = createRecipeContext.createRecipeContext(skeleton.skeleton);
-const Skeleton = withProvider(styled.withStyleProps(reactPrimitive.Primitive.div));
+const { withContext } = createRecipeContext.createRecipeContext(skeleton.skeleton);
+const Skeleton = withContext(styled.withStyleProps(reactPrimitive.Primitive.div));
 
 exports.Skeleton = Skeleton;

package/lib/components/Skeleton/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACxF,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIrE,MAAM,WAAW,aACf,SAAQ,oBAAoB,EAC1B,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,OAAO,CAAC,EACpC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;CAAG;AAE1D,eAAO,MAAM,QAAQ,sFAA6E,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACxF,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIrE,MAAM,WAAW,aACf,SAAQ,oBAAoB,EAC1B,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,OAAO,CAAC,EACpC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;CAAG;AAE1D,eAAO,MAAM,QAAQ,sFAA4E,CAAC"}

package/lib/components/Skeleton/Skeleton.js

@@ -3,7 +3,7 @@ import { skeleton } from '@seed-design/css/recipes/skeleton';
 import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { withStyleProps } from '../../utils/styled.js';
 
-const { withProvider } = createRecipeContext(skeleton);
-const Skeleton = withProvider(withStyleProps(Primitive.div));
+const { withContext } = createRecipeContext(skeleton);
+const Skeleton = withContext(withStyleProps(Primitive.div));
 
 export { Skeleton };

package/lib/components/Snackbar/Snackbar.cjs

@@ -13,10 +13,10 @@ const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const Icon = require('../private/Icon.cjs');
 
-const { withProvider: withRegionProvider } = createRecipeContext.createRecipeContext(snackbarRegion.snackbarRegion);
+const { withContext: withRegionContext } = createRecipeContext.createRecipeContext(snackbarRegion.snackbarRegion);
 const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(snackbar.snackbar);
 const SnackbarRootProvider = reactSnackbar.Snackbar.RootProvider;
-const SnackbarRegion = withRegionProvider(
+const SnackbarRegion = withRegionContext(
   reactSnackbar.Snackbar.Region
 );
 const SnackbarRoot = withProvider(

package/lib/components/Snackbar/Snackbar.js

@@ -9,10 +9,10 @@ import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { InternalIcon } from '../private/Icon.js';
 
-const { withProvider: withRegionProvider } = createRecipeContext(snackbarRegion);
+const { withContext: withRegionContext } = createRecipeContext(snackbarRegion);
 const { withProvider, withContext } = createSlotRecipeContext(snackbar);
 const SnackbarRootProvider = Snackbar.RootProvider;
-const SnackbarRegion = withRegionProvider(
+const SnackbarRegion = withRegionContext(
   Snackbar.Region
 );
 const SnackbarRoot = withProvider(

package/lib/components/ToggleButton/ToggleButton.cjs

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const reactToggle = require('@seed-design/react-toggle');
 const toggleButton = require('@seed-design/css/recipes/toggle-button');
+const reactToggle = require('@seed-design/react-toggle');
 const clsx = require('clsx');
 const React = require('react');
-const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -29,12 +28,11 @@ function _interopNamespaceDefault(e) {
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const { ClassNameProvider } = createRecipeContext.createRecipeContext(toggleButton.toggleButton);
 const ToggleButton = React__namespace.forwardRef(
   ({ variant = "brandSolid", size = "small", loading = false, className, ...otherProps }, ref) => {
     const recipeClassName = toggleButton.toggleButton({ variant, size });
     const api = usePendingButton.usePendingButton({ loading, disabled: otherProps.disabled });
-    return /* @__PURE__ */ jsxRuntime.jsx(ClassNameProvider, { value: recipeClassName, children: /* @__PURE__ */ jsxRuntime.jsx(usePendingButton.PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(usePendingButton.PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
       reactToggle.Toggle.Root,
       {
         ref,
@@ -42,7 +40,7 @@ const ToggleButton = React__namespace.forwardRef(
         ...api.stateProps,
         ...otherProps
       }
-    ) }) });
+    ) });
   }
 );
 ToggleButton.displayName = "ToggleButton";

package/lib/components/ToggleButton/ToggleButton.d.ts

@@ -1,5 +1,5 @@
-import { Toggle as TogglePrimitive } from '@seed-design/react-toggle';
 import { ToggleButtonVariantProps } from '@seed-design/css/recipes/toggle-button';
+import { Toggle as TogglePrimitive } from '@seed-design/react-toggle';
 import { UsePendingButtonProps } from '../LoadingIndicator/usePendingButton';
 import * as React from "react";
 export interface ToggleButtonProps extends ToggleButtonVariantProps, UsePendingButtonProps, TogglePrimitive.RootProps {

package/lib/components/ToggleButton/ToggleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,wCAAwC,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAC;AAI9C,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,qBAAqB,EACrB,eAAe,CAAC,SAAS;CAAG;AAEhC,eAAO,MAAM,YAAY,6FAkBxB,CAAC"}
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToggleButton/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,qBAAqB,EACrB,eAAe,CAAC,SAAS;CAAG;AAEhC,eAAO,MAAM,YAAY,6FAgBxB,CAAC"}

package/lib/components/ToggleButton/ToggleButton.js

@@ -1,17 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
-import { Toggle } from '@seed-design/react-toggle';
 import { toggleButton } from '@seed-design/css/recipes/toggle-button';
+import { Toggle } from '@seed-design/react-toggle';
 import clsx from 'clsx';
 import * as React from 'react';
-import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
 
-const { ClassNameProvider } = createRecipeContext(toggleButton);
 const ToggleButton = React.forwardRef(
   ({ variant = "brandSolid", size = "small", loading = false, className, ...otherProps }, ref) => {
     const recipeClassName = toggleButton({ variant, size });
     const api = usePendingButton({ loading, disabled: otherProps.disabled });
-    return /* @__PURE__ */ jsx(ClassNameProvider, { value: recipeClassName, children: /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(
       Toggle.Root,
       {
         ref,
@@ -19,7 +17,7 @@ const ToggleButton = React.forwardRef(
         ...api.stateProps,
         ...otherProps
       }
-    ) }) });
+    ) });
   }
 );
 ToggleButton.displayName = "ToggleButton";

package/lib/components/index.cjs

@@ -40,6 +40,8 @@ const InlineBanner = require('./InlineBanner/InlineBanner.cjs');
 const InlineBanner_namespace = require('./InlineBanner/InlineBanner.namespace.cjs');
 const LinkContent = require('./LinkContent/LinkContent.cjs');
 const LoadingIndicator = require('./LoadingIndicator/LoadingIndicator.cjs');
+const MannerTemp = require('./MannerTemp/MannerTemp.cjs');
+const MannerTempEmote = require('./MannerTemp/MannerTempEmote.cjs');
 const MannerTempBadge = require('./MannerTempBadge/MannerTempBadge.cjs');
 const NotificationBadge = require('./NotificationBadge/NotificationBadge.cjs');
 const ProgressCircle = require('./ProgressCircle/ProgressCircle.cjs');
@@ -186,6 +188,8 @@ 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;

package/lib/components/index.d.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/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/lib/components/index.js

@@ -47,6 +47,8 @@ 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';

package/lib/index.cjs

@@ -40,6 +40,8 @@ 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');
@@ -186,6 +188,8 @@ 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;

package/lib/index.js

@@ -47,6 +47,8 @@ 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';

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/package.json

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