@seed-design/react 0.0.3 → 0.0.5

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

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAMxF,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAOvE,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB,CAAC,iBAAiB;CAAG;AAEzF,eAAO,MAAM,oBAAoB,qHAAiC,CAAC;AAInE,MAAM,WAAW,mBAAoB,SAAQ,oBAAoB,EAAE,iBAAiB,CAAC,WAAW;CAAG;AAEnG,eAAO,MAAM,cAAc,gHAG1B,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,EAAE,iBAAiB,CAAC,SAAS;CAAG;AAE/F,eAAO,MAAM,YAAY,8GAGxB,CAAC;AAIF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAIF,MAAM,WAAW,yBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CAAG;AAE9C,eAAO,MAAM,oBAAoB,yHAGhC,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB,CAAC,gBAAgB;CAAG;AAEvF;;GAEG;AACH,eAAO,MAAM,mBAAmB,wHAY/B,CAAC;AAIF,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB,CAAC,aAAa;CAAG;AAEjF,eAAO,MAAM,gBAAgB,wEAA6B,CAAC;AAI3D,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB,CAAC,iBAAiB;CAAG;AAEzF,eAAO,MAAM,oBAAoB,wIAAiC,CAAC"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAGxF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAK5E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAOvE,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB,CAAC,iBAAiB;CAAG;AAEzF,eAAO,MAAM,oBAAoB,qHAAiC,CAAC;AAInE,MAAM,WAAW,mBAAoB,SAAQ,oBAAoB,EAAE,iBAAiB,CAAC,WAAW;CAAG;AAEnG,eAAO,MAAM,cAAc,gHAE1B,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,EAAE,iBAAiB,CAAC,SAAS;CAAG;AAE/F,eAAO,MAAM,YAAY,8GAGxB,CAAC;AAIF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAIF,MAAM,WAAW,yBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CAAG;AAE9C,eAAO,MAAM,oBAAoB,yHAGhC,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB,CAAC,gBAAgB;CAAG;AAEvF;;GAEG;AACH,eAAO,MAAM,mBAAmB,wHAY/B,CAAC;AAIF,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB,CAAC,aAAa;CAAG;AAEjF,eAAO,MAAM,gBAAgB,wEAA6B,CAAC;AAI3D,MAAM,WAAW,yBAA0B,SAAQ,iBAAiB,CAAC,iBAAiB;CAAG;AAEzF,eAAO,MAAM,oBAAoB,wIAAiC,CAAC"}

package/lib/components/Snackbar/Snackbar.js

@@ -1,20 +1,20 @@
 import { jsx } from 'react/jsx-runtime';
-import { Primitive } from '@seed-design/react-primitive';
-import { Snackbar } from '@seed-design/react-snackbar';
 import { snackbar } from '@seed-design/css/recipes/snackbar';
 import { snackbarRegion } from '@seed-design/css/recipes/snackbar-region';
 import { visuallyHidden } from '@seed-design/css/recipes/visually-hidden';
+import { Primitive } from '@seed-design/react-primitive';
+import { Snackbar } from '@seed-design/react-snackbar';
 import clsx from 'clsx';
 import { forwardRef, useMemo } from 'react';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { InternalIcon } from '../private/Icon.js';
 
-const { withProvider: withRegionProvider } = createStyleContext(snackbarRegion);
-const { withProvider, withContext } = createStyleContext(snackbar);
+const { withProvider: withRegionProvider } = createRecipeContext(snackbarRegion);
+const { withProvider, withContext } = createSlotRecipeContext(snackbar);
 const SnackbarRootProvider = Snackbar.RootProvider;
 const SnackbarRegion = withRegionProvider(
-  Snackbar.Region,
-  "root"
+  Snackbar.Region
 );
 const SnackbarRoot = withProvider(
   Snackbar.Root,
@@ -35,12 +35,12 @@ const SnackbarActionButton = withContext(
 const SnackbarCloseButton = forwardRef(
   (props, ref) => {
     const { className, ...otherProps } = props;
-    const classNames = useMemo(() => visuallyHidden(), []);
+    const visuallyHiddenClassName = useMemo(() => visuallyHidden(), []);
     return /* @__PURE__ */ jsx(
       Snackbar.CloseButton,
       {
         ref,
-        className: clsx(classNames.root, className),
+        className: clsx(visuallyHiddenClassName, className),
         ...otherProps
       }
     );

package/lib/components/Switch/Switch.cjs

@@ -4,11 +4,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const reactSwitch = require('@seed-design/react-switch');
 const _switch = require('@seed-design/css/recipes/switch');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const reactPrimitive = require('@seed-design/react-primitive');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 
-const { withProvider, withContext } = createStyleContext.createStyleContext(_switch.switchStyle);
+const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(_switch.switchStyle);
 const withStateProps = createWithStateProps.createWithStateProps([reactSwitch.useSwitchContext]);
 const SwitchRoot = withProvider(
   reactSwitch.Switch.Root,

package/lib/components/Switch/Switch.js

@@ -1,10 +1,10 @@
 import { Switch, useSwitchContext } from '@seed-design/react-switch';
 import { switchStyle } from '@seed-design/css/recipes/switch';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { Primitive } from '@seed-design/react-primitive';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 
-const { withProvider, withContext } = createStyleContext(switchStyle);
+const { withProvider, withContext } = createSlotRecipeContext(switchStyle);
 const withStateProps = createWithStateProps([useSwitchContext]);
 const SwitchRoot = withProvider(
   Switch.Root,

package/lib/components/Tabs/Tabs.cjs

@@ -5,10 +5,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const reactPrimitive = require('@seed-design/react-primitive');
 const reactTabs = require('@seed-design/react-tabs');
 const tabs = require('@seed-design/css/recipes/tabs');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 
-const { withProvider, withContext } = createStyleContext.createStyleContext(tabs.tabs);
+const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(tabs.tabs);
 const withStateProps = createWithStateProps.createWithStateProps([reactTabs.useTabsContext, reactTabs.useTabsTriggerContext], {
   strict: false
 });

package/lib/components/Tabs/Tabs.js

@@ -1,10 +1,10 @@
 import { Primitive } from '@seed-design/react-primitive';
 import { Tabs, useTabsContext, useTabsTriggerContext } from '@seed-design/react-tabs';
 import { tabs } from '@seed-design/css/recipes/tabs';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 
-const { withProvider, withContext } = createStyleContext(tabs);
+const { withProvider, withContext } = createSlotRecipeContext(tabs);
 const withStateProps = createWithStateProps([useTabsContext, useTabsTriggerContext], {
   strict: false
 });

package/lib/components/Text/Text.cjs

@@ -56,7 +56,7 @@ const Text = ({
   ...otherProps
 }) => {
   const Comp = as || "span";
-  const classNames = React.useMemo(
+  const textClassName = React.useMemo(
     () => text.text({
       textStyle,
       maxLines: mapMaxLines(maxLines)
@@ -66,7 +66,7 @@ const Text = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Comp,
     {
-      className: clsx(classNames.root, className),
+      className: clsx(textClassName, className),
       style: {
         "--seed-max-lines": maxLines,
         "--seed-text-color": handleColor(color),

package/lib/components/Text/Text.js

@@ -52,7 +52,7 @@ const Text = ({
   ...otherProps
 }) => {
   const Comp = as || "span";
-  const classNames = useMemo(
+  const textClassName = useMemo(
     () => text({
       textStyle,
       maxLines: mapMaxLines(maxLines)
@@ -62,7 +62,7 @@ const Text = ({
   return /* @__PURE__ */ jsx(
     Comp,
     {
-      className: clsx(classNames.root, className),
+      className: clsx(textClassName, className),
       style: {
         "--seed-max-lines": maxLines,
         "--seed-text-color": handleColor(color),

package/lib/components/TextField/TextField.cjs

@@ -9,12 +9,12 @@ const reactTextField = require('@seed-design/react-text-field');
 const textField = require('@seed-design/css/recipes/text-field');
 const clsx = require('clsx');
 const React = require('react');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const Icon = require('../private/Icon.cjs');
 const reactComposeRefs = require('@radix-ui/react-compose-refs');
 
-const { withProvider, withContext, useClassNames } = createStyleContext.createStyleContext(textField.textField);
+const { withProvider, withContext, useClassNames } = createSlotRecipeContext.createSlotRecipeContext(textField.textField);
 const withStateProps = createWithStateProps.createWithStateProps([reactTextField.useTextFieldContext]);
 const TextFieldRoot = withProvider(
   reactTextField.TextField.Root,

package/lib/components/TextField/TextField.js

@@ -5,12 +5,12 @@ import { TextField, useTextFieldContext } from '@seed-design/react-text-field';
 import { textField } from '@seed-design/css/recipes/text-field';
 import clsx from 'clsx';
 import { forwardRef, useRef, useCallback } from 'react';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { InternalIcon } from '../private/Icon.js';
 import { composeRefs } from '@radix-ui/react-compose-refs';
 
-const { withProvider, withContext, useClassNames } = createStyleContext(textField);
+const { withProvider, withContext, useClassNames } = createSlotRecipeContext(textField);
 const withStateProps = createWithStateProps([useTextFieldContext]);
 const TextFieldRoot = withProvider(
   TextField.Root,

package/lib/components/ToggleButton/ToggleButton.cjs

@@ -7,7 +7,7 @@ const reactToggle = require('@seed-design/react-toggle');
 const toggleButton = require('@seed-design/css/recipes/toggle-button');
 const clsx = require('clsx');
 const React = require('react');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const usePendingButton = require('../LoadingIndicator/usePendingButton.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -29,16 +29,16 @@ function _interopNamespaceDefault(e) {
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const { ClassNamesProvider } = createStyleContext.createStyleContext(toggleButton.toggleButton);
+const { ClassNameProvider } = createRecipeContext.createRecipeContext(toggleButton.toggleButton);
 const ToggleButton = React__namespace.forwardRef(
   ({ variant = "brandSolid", size = "small", loading = false, className, ...otherProps }, ref) => {
-    const classNames = toggleButton.toggleButton({ variant, size });
+    const recipeClassName = toggleButton.toggleButton({ variant, size });
     const api = usePendingButton.usePendingButton({ loading, disabled: otherProps.disabled });
-    return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(usePendingButton.PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ClassNameProvider, { value: recipeClassName, children: /* @__PURE__ */ jsxRuntime.jsx(usePendingButton.PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(
       reactToggle.Toggle.Root,
       {
         ref,
-        className: clsx(classNames.root, className),
+        className: clsx(recipeClassName, className),
         ...api.stateProps,
         ...otherProps
       }

package/lib/components/ToggleButton/ToggleButton.js

@@ -3,19 +3,19 @@ import { Toggle } from '@seed-design/react-toggle';
 import { toggleButton } from '@seed-design/css/recipes/toggle-button';
 import clsx from 'clsx';
 import * as React from 'react';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { usePendingButton, PendingButtonProvider } from '../LoadingIndicator/usePendingButton.js';
 
-const { ClassNamesProvider } = createStyleContext(toggleButton);
+const { ClassNameProvider } = createRecipeContext(toggleButton);
 const ToggleButton = React.forwardRef(
   ({ 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 /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ClassNameProvider, { value: recipeClassName, children: /* @__PURE__ */ jsx(PendingButtonProvider, { value: api, children: /* @__PURE__ */ jsx(
       Toggle.Root,
       {
         ref,
-        className: clsx(classNames.root, className),
+        className: clsx(recipeClassName, className),
         ...api.stateProps,
         ...otherProps
       }

package/lib/components/VisuallyHidden/VisuallyHidden.cjs

@@ -4,12 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const reactPrimitive = require('@seed-design/react-primitive');
 const visuallyHidden = require('@seed-design/css/recipes/visually-hidden');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 
-const { withProvider } = createStyleContext.createStyleContext(visuallyHidden.visuallyHidden);
-const VisuallyHidden = withProvider(
-  reactPrimitive.Primitive.div,
-  "root"
-);
+const { withProvider } = createRecipeContext.createRecipeContext(visuallyHidden.visuallyHidden);
+const VisuallyHidden = withProvider(reactPrimitive.Primitive.div);
 
 exports.VisuallyHidden = VisuallyHidden;

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

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,WAAW,mBAAoB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEpG,eAAO,MAAM,cAAc,4FAG1B,CAAC"}
+{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,WAAW,mBAAoB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEpG,eAAO,MAAM,cAAc,4FAAmE,CAAC"}

package/lib/components/VisuallyHidden/VisuallyHidden.js

@@ -1,11 +1,8 @@
 import { Primitive } from '@seed-design/react-primitive';
 import { visuallyHidden } from '@seed-design/css/recipes/visually-hidden';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
 
-const { withProvider } = createStyleContext(visuallyHidden);
-const VisuallyHidden = withProvider(
-  Primitive.div,
-  "root"
-);
+const { withProvider } = createRecipeContext(visuallyHidden);
+const VisuallyHidden = withProvider(Primitive.div);
 
 export { VisuallyHidden };

package/lib/components/private/useDismissible.d.ts

@@ -284,7 +284,6 @@ export declare function useDismissible(props: UseDismissibleProps): {
         slot?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
-        name?: string | undefined | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -553,6 +552,7 @@ export declare function useDismissible(props: UseDismissibleProps): {
         formMethod?: string | undefined | undefined;
         formNoValidate?: boolean | undefined | undefined;
         formTarget?: string | undefined | undefined;
+        name?: string | undefined | undefined;
         type?: "submit" | "reset" | "button" | undefined | undefined;
     };
 };
@@ -834,7 +834,6 @@ export declare const DismissibleProvider: React.Provider<{
         slot?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
-        name?: string | undefined | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -1103,6 +1102,7 @@ export declare const DismissibleProvider: React.Provider<{
         formMethod?: string | undefined | undefined;
         formNoValidate?: boolean | undefined | undefined;
         formTarget?: string | undefined | undefined;
+        name?: string | undefined | undefined;
         type?: "submit" | "reset" | "button" | undefined | undefined;
     };
 } | null>;
@@ -1384,7 +1384,6 @@ export declare const useDismissibleContext: () => {
         slot?: string | undefined | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined | undefined;
-        name?: string | undefined | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -1653,6 +1652,7 @@ export declare const useDismissibleContext: () => {
         formMethod?: string | undefined | undefined;
         formNoValidate?: boolean | undefined | undefined;
         formTarget?: string | undefined | undefined;
+        name?: string | undefined | undefined;
         type?: "submit" | "reset" | "button" | undefined | undefined;
     };
 };

package/lib/utils/createRecipeContext.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+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 { defaultProps } = options ?? {};
+    const StyledComponent = React.forwardRef((innerProps, ref) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const className = recipe(variantProps);
+      return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...otherProps, className: clsx(className, props.className) });
+    });
+    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;
+  };
+  return {
+    ClassNameProvider,
+    PropsProvider,
+    useClassName,
+    useProps,
+    withRootProvider,
+    withProvider,
+    withContext
+  };
+}
+
+exports.createRecipeContext = createRecipeContext;

package/lib/utils/createRecipeContext.d.ts

@@ -0,0 +1,24 @@
+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 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;
+    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?: {
+        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>>;
+};
+export {};
+//# sourceMappingURL=createRecipeContext.d.ts.map

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

@@ -0,0 +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"}

package/lib/utils/createRecipeContext.js

@@ -0,0 +1,70 @@
+import { jsx } from 'react/jsx-runtime';
+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 { defaultProps } = options ?? {};
+    const StyledComponent = forwardRef((innerProps, ref) => {
+      const props = { ...defaultProps ?? {}, ...useProps(), ...innerProps };
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const className = recipe(variantProps);
+      return /* @__PURE__ */ jsx(Component, { ref, ...otherProps, className: clsx(className, props.className) });
+    });
+    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;
+  };
+  return {
+    ClassNameProvider,
+    PropsProvider,
+    useClassName,
+    useProps,
+    withRootProvider,
+    withProvider,
+    withContext
+  };
+}
+
+export { createRecipeContext };

package/lib/utils/{createStyleContext.cjs → createSlotRecipeContext.cjs}

@@ -6,7 +6,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const clsx = require('clsx');
 const React = require('react');
 
-function createStyleContext(recipe) {
+function createSlotRecipeContext(recipe) {
   const ClassNamesContext = React.createContext(null);
   const PropsContext = React.createContext(null);
   const ClassNamesProvider = ({
@@ -73,4 +73,4 @@ function createStyleContext(recipe) {
   };
 }
 
-exports.createStyleContext = createStyleContext;
+exports.createSlotRecipeContext = createSlotRecipeContext;

package/lib/utils/{createStyleContext.d.ts → createSlotRecipeContext.d.ts}

@@ -1,7 +1,7 @@
-type Recipe<Props extends Record<string, string | boolean | undefined>, Classnames extends Record<string, string>> = ((props?: Props) => Classnames) & {
+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 declare function createStyleContext<Props extends Record<string, string | boolean | undefined>, Classnames extends Record<string, string>>(recipe: Recipe<Props, Classnames>): {
+export declare function createSlotRecipeContext<Props extends Record<string, string | boolean | undefined>, Classnames extends Record<string, string>>(recipe: SlotRecipe<Props, Classnames>): {
     ClassNamesProvider: ({ children, value, }: {
         children: React.ReactNode;
         value: Classnames;
@@ -21,4 +21,4 @@ export declare function createStyleContext<Props extends Record<string, string |
     withContext: <T, P>(Component: React.ElementType<any>, slot?: keyof Classnames) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
 };
 export {};
-//# sourceMappingURL=createStyleContext.d.ts.map
+//# sourceMappingURL=createSlotRecipeContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createSlotRecipeContext.d.ts","sourceRoot":"","sources":["../../src/utils/createSlotRecipeContext.tsx"],"names":[],"mappings":"AAGA,KAAK,UAAU,CACb,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,uBAAuB,CACrC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,MAAM,EAAE,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC;+CAOlC;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"}

package/lib/utils/{createStyleContext.js → createSlotRecipeContext.js}

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { createContext, forwardRef, useContext } from 'react';
 
-function createStyleContext(recipe) {
+function createSlotRecipeContext(recipe) {
   const ClassNamesContext = createContext(null);
   const PropsContext = createContext(null);
   const ClassNamesProvider = ({
@@ -69,4 +69,4 @@ function createStyleContext(recipe) {
   };
 }
 
-export { createStyleContext };
+export { createSlotRecipeContext };

package/package.json

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

package/src/components/ActionButton/ActionButton.tsx

@@ -5,15 +5,15 @@ import {
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import * as React from "react";
-import { createStyleContext } from "../../utils/createStyleContext";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { IconRequired } from "../Icon/Icon";
 import {
   PendingButtonProvider,
   usePendingButton,
   type UsePendingButtonProps,
 } from "../LoadingIndicator/usePendingButton";
-import { IconRequired } from "../Icon/Icon";
 
-const { ClassNamesProvider } = createStyleContext(actionButton);
+const { ClassNameProvider } = createRecipeContext(actionButton);
 
 export interface ActionButtonProps
   extends ActionButtonVariantProps,
@@ -26,7 +26,7 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
     { variant, size, loading = false, layout = "withText", className, children, ...otherProps },
     ref,
   ) => {
-    const classNames = actionButton({ variant, layout, size });
+    const recipeClassName = actionButton({ variant, layout, size });
     const api = usePendingButton({ loading, disabled: otherProps.disabled });
 
     if (layout === "iconOnly" && !(otherProps["aria-label"] || otherProps["aria-labelledby"])) {
@@ -36,12 +36,12 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
     }
 
     return (
-      <ClassNamesProvider value={classNames}>
+      <ClassNameProvider value={recipeClassName}>
         <PendingButtonProvider value={api}>
           <IconRequired enabled={layout === "iconOnly"}>
             <Primitive.button
               ref={ref}
-              className={clsx(classNames.root, className)}
+              className={clsx(recipeClassName, className)}
               {...api.stateProps}
               {...otherProps}
             >
@@ -49,7 +49,7 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
             </Primitive.button>
           </IconRequired>
         </PendingButtonProvider>
-      </ClassNamesProvider>
+      </ClassNameProvider>
     );
   },
 );