@seed-design/react 0.0.4 → 0.0.6

package/lib/components/Fab/Fab.js

@@ -1,8 +1,8 @@
 import { Primitive } from '@seed-design/react-primitive';
 import { fab } from '@seed-design/css/recipes/fab';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
 
-const { withProvider } = createStyleContext(fab);
-const Fab = withProvider(Primitive.button, "root");
+const { withProvider } = createRecipeContext(fab);
+const Fab = withProvider(Primitive.button);
 
 export { Fab };

package/lib/components/HelpBubble/HelpBubble.cjs

@@ -7,16 +7,17 @@ const reactPopover = require('@seed-design/react-popover');
 const reactPrimitive = require('@seed-design/react-primitive');
 const helpBubble = require('@seed-design/css/recipes/help-bubble');
 const React = require('react');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const styled = require('../../utils/styled.cjs');
 
-const { withRootProvider, withContext } = createStyleContext.createStyleContext(helpBubble.helpBubble);
+const { withRootProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(helpBubble.helpBubble);
 const withStateProps = createWithStateProps.createWithStateProps([reactPopover.usePopoverContext]);
 const HelpBubbleRoot = withRootProvider(reactPopover.Popover.Root, {
   defaultProps: {
     placement: "top",
     gutter: 4,
+    // TODO: get value from rootage spec
     overflowPadding: 16,
     arrowPadding: 14,
     flip: true,
@@ -44,7 +45,11 @@ const HelpBubbleArrow = withContext(
 );
 const HelpBubbleArrowTip = React.forwardRef(
   (props, ref) => {
-    const { tipRadius = 1, ...otherProps } = props;
+    const {
+      tipRadius = 2,
+      // TODO: get value from rootage spec
+      ...otherProps
+    } = props;
     const api = reactPopover.usePopoverContext();
     const width = api.rects.arrow?.width || 0;
     const height = api.rects.arrow?.height || 0;

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

@@ -1 +1 @@
-{"version":3,"file":"HelpBubble.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAqB,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAI/F,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOrE,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB,EAAE,gBAAgB,CAAC,SAAS;CAAG;AAElG,eAAO,MAAM,cAAc,gEAUzB,CAAC;AAIH,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB,CAAC,WAAW;CAAG;AAE9E,eAAO,MAAM,gBAAgB,yHAA0B,CAAC;AAIxD,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB,CAAC,YAAY;CAAG;AAEhF,eAAO,MAAM,iBAAiB,6HAA2B,CAAC;AAI1D,MAAM,WAAW,yBAA0B,SAAQ,gBAAgB,CAAC,eAAe;CAAG;AAEtF,eAAO,MAAM,oBAAoB,sHAGhC,CAAC;AAIF,MAAM,WAAW,uBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAIF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,EAC5B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,mHAG7B,CAAC;AAIF,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB,CAAC,UAAU;CAAG;AAE5E,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IAC5E;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB,gIA0B9B,CAAC;AAIF,MAAM,WAAW,0BAA2B,SAAQ,gBAAgB,CAAC,gBAAgB;CAAG;AAExF,eAAO,MAAM,qBAAqB,0HAGjC,CAAC;AAIF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,kHAG3B,CAAC;AAIF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC"}
+{"version":3,"file":"HelpBubble.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAqB,MAAM,4BAA4B,CAAC;AAC5F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAI/F,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAOrE,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB,EAAE,gBAAgB,CAAC,SAAS;CAAG;AAElG,eAAO,MAAM,cAAc,gEAUzB,CAAC;AAIH,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB,CAAC,WAAW;CAAG;AAE9E,eAAO,MAAM,gBAAgB,yHAA0B,CAAC;AAIxD,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB,CAAC,YAAY;CAAG;AAEhF,eAAO,MAAM,iBAAiB,6HAA2B,CAAC;AAI1D,MAAM,WAAW,yBAA0B,SAAQ,gBAAgB,CAAC,eAAe;CAAG;AAEtF,eAAO,MAAM,oBAAoB,sHAGhC,CAAC;AAIF,MAAM,WAAW,uBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,kBAAkB,oHAG9B,CAAC;AAIF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,EAC5B,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,iBAAiB,mHAG7B,CAAC;AAIF,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB,CAAC,UAAU;CAAG;AAE5E,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IAC5E;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB,gIA6B9B,CAAC;AAIF,MAAM,WAAW,0BAA2B,SAAQ,gBAAgB,CAAC,gBAAgB;CAAG;AAExF,eAAO,MAAM,qBAAqB,0HAGjC,CAAC;AAIF,MAAM,WAAW,oBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,eAAe,kHAG3B,CAAC;AAIF,MAAM,WAAW,0BACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,qBAAqB,uHAGjC,CAAC"}

package/lib/components/HelpBubble/HelpBubble.js

@@ -3,16 +3,17 @@ import { Popover, usePopoverContext } from '@seed-design/react-popover';
 import { Primitive } from '@seed-design/react-primitive';
 import { helpBubble } from '@seed-design/css/recipes/help-bubble';
 import { forwardRef } from 'react';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { withStyleProps } from '../../utils/styled.js';
 
-const { withRootProvider, withContext } = createStyleContext(helpBubble);
+const { withRootProvider, withContext } = createSlotRecipeContext(helpBubble);
 const withStateProps = createWithStateProps([usePopoverContext]);
 const HelpBubbleRoot = withRootProvider(Popover.Root, {
   defaultProps: {
     placement: "top",
     gutter: 4,
+    // TODO: get value from rootage spec
     overflowPadding: 16,
     arrowPadding: 14,
     flip: true,
@@ -40,7 +41,11 @@ const HelpBubbleArrow = withContext(
 );
 const HelpBubbleArrowTip = forwardRef(
   (props, ref) => {
-    const { tipRadius = 1, ...otherProps } = props;
+    const {
+      tipRadius = 2,
+      // TODO: get value from rootage spec
+      ...otherProps
+    } = props;
     const api = usePopoverContext();
     const width = api.rects.arrow?.width || 0;
     const height = api.rects.arrow?.height || 0;

package/lib/components/IdentityPlaceholder/IdentityPlaceholder.cjs

@@ -7,7 +7,7 @@ const identityPlaceholder = require('@seed-design/css/recipes/identity-placehold
 const domUtils = require('@seed-design/dom-utils');
 const reactPrimitive = require('@seed-design/react-primitive');
 const React = require('react');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -28,7 +28,7 @@ function _interopNamespaceDefault(e) {
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const { useClassNames, withProvider } = createStyleContext.createStyleContext(identityPlaceholder.identityPlaceholder);
+const { useClassNames, withProvider } = createSlotRecipeContext.createSlotRecipeContext(identityPlaceholder.identityPlaceholder);
 const IdentityPlaceholderRoot = withProvider(
   reactPrimitive.Primitive.div,
   "root"

package/lib/components/IdentityPlaceholder/IdentityPlaceholder.js

@@ -3,9 +3,9 @@ import { identityPlaceholder } from '@seed-design/css/recipes/identity-placehold
 import { mergeProps } from '@seed-design/dom-utils';
 import { Primitive } from '@seed-design/react-primitive';
 import * as React from 'react';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 
-const { useClassNames, withProvider } = createStyleContext(identityPlaceholder);
+const { useClassNames, withProvider } = createSlotRecipeContext(identityPlaceholder);
 const IdentityPlaceholderRoot = withProvider(
   Primitive.div,
   "root"

package/lib/components/InlineBanner/InlineBanner.cjs

@@ -4,10 +4,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const inlineBanner = require('@seed-design/css/recipes/inline-banner');
 const reactPrimitive = require('@seed-design/react-primitive');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const useDismissible = require('../private/useDismissible.cjs');
 
-const { withContext, withProvider } = createStyleContext.createStyleContext(inlineBanner.inlineBanner);
+const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(inlineBanner.inlineBanner);
 const InlineBannerRoot = withProvider(
   useDismissible.DismissibleRoot,
   "root"

package/lib/components/InlineBanner/InlineBanner.js

@@ -1,9 +1,9 @@
 import { inlineBanner } from '@seed-design/css/recipes/inline-banner';
 import { Primitive } from '@seed-design/react-primitive';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { DismissibleCloseButton, DismissibleRoot } from '../private/useDismissible.js';
 
-const { withContext, withProvider } = createStyleContext(inlineBanner);
+const { withContext, withProvider } = createSlotRecipeContext(inlineBanner);
 const InlineBannerRoot = withProvider(
   DismissibleRoot,
   "root"

package/lib/components/LinkContent/LinkContent.cjs

@@ -4,13 +4,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const linkContent = require('@seed-design/css/recipes/link-content');
 const reactPrimitive = require('@seed-design/react-primitive');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const styled = require('../../utils/styled.cjs');
 
-const { withProvider } = createStyleContext.createStyleContext(linkContent.linkContent);
+const { withProvider } = createRecipeContext.createRecipeContext(linkContent.linkContent);
 const LinkContent = withProvider(
-  styled.withStyleProps(reactPrimitive.Primitive.span),
-  "root"
+  styled.withStyleProps(reactPrimitive.Primitive.span)
 );
 
 exports.LinkContent = LinkContent;

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

@@ -1 +1 @@
-{"version":3,"file":"LinkContent.d.ts","sourceRoot":"","sources":["../../../src/components/LinkContent/LinkContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAG9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIrE,MAAM,WAAW,gBACf,SAAQ,uBAAuB,EAC7B,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,EACzB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;CAAG;AAE3D,eAAO,MAAM,WAAW,4FAGvB,CAAC"}
+{"version":3,"file":"LinkContent.d.ts","sourceRoot":"","sources":["../../../src/components/LinkContent/LinkContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIrE,MAAM,WAAW,gBACf,SAAQ,uBAAuB,EAC7B,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,EACzB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;CAAG;AAE3D,eAAO,MAAM,WAAW,4FAEvB,CAAC"}

package/lib/components/LinkContent/LinkContent.js

@@ -1,12 +1,11 @@
 import { linkContent } from '@seed-design/css/recipes/link-content';
 import { Primitive } from '@seed-design/react-primitive';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { withStyleProps } from '../../utils/styled.js';
 
-const { withProvider } = createStyleContext(linkContent);
+const { withProvider } = createRecipeContext(linkContent);
 const LinkContent = withProvider(
-  withStyleProps(Primitive.span),
-  "root"
+  withStyleProps(Primitive.span)
 );
 
 export { LinkContent };

package/lib/components/LoadingIndicator/usePendingButton.d.ts

@@ -16,10 +16,6 @@ export declare function usePendingButton(props: UsePendingButtonProps): {
     loading: boolean | undefined;
     disabled: boolean | undefined;
     stateProps: {
-        children?: React.ReactNode;
-        slot?: string | undefined | undefined;
-        style?: React.CSSProperties | undefined;
-        title?: string | undefined | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -28,17 +24,20 @@ export declare function usePendingButton(props: UsePendingButtonProps): {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
+        slot?: string | undefined | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
+        style?: React.CSSProperties | undefined;
         tabIndex?: number | undefined | undefined;
+        title?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         role?: React.AriaRole | undefined;
@@ -67,11 +66,11 @@ export declare function usePendingButton(props: UsePendingButtonProps): {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
-        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
         "aria-braillelabel"?: string | undefined | undefined;
         "aria-brailleroledescription"?: string | undefined | undefined;
-        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-busy"?: (boolean | "false" | "true") | undefined;
         "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
         "aria-colcount"?: number | undefined | undefined;
         "aria-colindex"?: number | undefined | undefined;
@@ -82,43 +81,44 @@ export declare function usePendingButton(props: UsePendingButtonProps): {
         "aria-describedby"?: string | undefined | undefined;
         "aria-description"?: string | undefined | undefined;
         "aria-details"?: string | undefined | undefined;
-        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-disabled"?: (boolean | "false" | "true") | undefined;
         "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
         "aria-errormessage"?: string | undefined | undefined;
-        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-expanded"?: (boolean | "false" | "true") | undefined;
         "aria-flowto"?: string | undefined | undefined;
-        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
         "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
-        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-hidden"?: (boolean | "false" | "true") | undefined;
         "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
         "aria-keyshortcuts"?: string | undefined | undefined;
         "aria-label"?: string | undefined | undefined;
         "aria-labelledby"?: string | undefined | undefined;
         "aria-level"?: number | undefined | undefined;
         "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
-        "aria-modal"?: (boolean | "true" | "false") | undefined;
-        "aria-multiline"?: (boolean | "true" | "false") | undefined;
-        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-modal"?: (boolean | "false" | "true") | undefined;
+        "aria-multiline"?: (boolean | "false" | "true") | undefined;
+        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
         "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
         "aria-owns"?: string | undefined | undefined;
         "aria-placeholder"?: string | undefined | undefined;
         "aria-posinset"?: number | undefined | undefined;
         "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-readonly"?: (boolean | "false" | "true") | undefined;
         "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
-        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-required"?: (boolean | "false" | "true") | undefined;
         "aria-roledescription"?: string | undefined | undefined;
         "aria-rowcount"?: number | undefined | undefined;
         "aria-rowindex"?: number | undefined | undefined;
         "aria-rowindextext"?: string | undefined | undefined;
         "aria-rowspan"?: number | undefined | undefined;
-        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-selected"?: (boolean | "false" | "true") | undefined;
         "aria-setsize"?: number | undefined | undefined;
         "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
         "aria-valuemax"?: number | undefined | undefined;
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
+        children?: React.ReactNode;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined | undefined;
@@ -288,10 +288,6 @@ export declare const PendingButtonProvider: React.Provider<{
     loading: boolean | undefined;
     disabled: boolean | undefined;
     stateProps: {
-        children?: React.ReactNode;
-        slot?: string | undefined | undefined;
-        style?: React.CSSProperties | undefined;
-        title?: string | undefined | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -300,17 +296,20 @@ export declare const PendingButtonProvider: React.Provider<{
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
+        slot?: string | undefined | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
+        style?: React.CSSProperties | undefined;
         tabIndex?: number | undefined | undefined;
+        title?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         role?: React.AriaRole | undefined;
@@ -339,11 +338,11 @@ export declare const PendingButtonProvider: React.Provider<{
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
-        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
         "aria-braillelabel"?: string | undefined | undefined;
         "aria-brailleroledescription"?: string | undefined | undefined;
-        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-busy"?: (boolean | "false" | "true") | undefined;
         "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
         "aria-colcount"?: number | undefined | undefined;
         "aria-colindex"?: number | undefined | undefined;
@@ -354,43 +353,44 @@ export declare const PendingButtonProvider: React.Provider<{
         "aria-describedby"?: string | undefined | undefined;
         "aria-description"?: string | undefined | undefined;
         "aria-details"?: string | undefined | undefined;
-        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-disabled"?: (boolean | "false" | "true") | undefined;
         "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
         "aria-errormessage"?: string | undefined | undefined;
-        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-expanded"?: (boolean | "false" | "true") | undefined;
         "aria-flowto"?: string | undefined | undefined;
-        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
         "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
-        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-hidden"?: (boolean | "false" | "true") | undefined;
         "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
         "aria-keyshortcuts"?: string | undefined | undefined;
         "aria-label"?: string | undefined | undefined;
         "aria-labelledby"?: string | undefined | undefined;
         "aria-level"?: number | undefined | undefined;
         "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
-        "aria-modal"?: (boolean | "true" | "false") | undefined;
-        "aria-multiline"?: (boolean | "true" | "false") | undefined;
-        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-modal"?: (boolean | "false" | "true") | undefined;
+        "aria-multiline"?: (boolean | "false" | "true") | undefined;
+        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
         "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
         "aria-owns"?: string | undefined | undefined;
         "aria-placeholder"?: string | undefined | undefined;
         "aria-posinset"?: number | undefined | undefined;
         "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-readonly"?: (boolean | "false" | "true") | undefined;
         "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
-        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-required"?: (boolean | "false" | "true") | undefined;
         "aria-roledescription"?: string | undefined | undefined;
         "aria-rowcount"?: number | undefined | undefined;
         "aria-rowindex"?: number | undefined | undefined;
         "aria-rowindextext"?: string | undefined | undefined;
         "aria-rowspan"?: number | undefined | undefined;
-        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-selected"?: (boolean | "false" | "true") | undefined;
         "aria-setsize"?: number | undefined | undefined;
         "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
         "aria-valuemax"?: number | undefined | undefined;
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
+        children?: React.ReactNode;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined | undefined;
@@ -560,10 +560,6 @@ export declare const usePendingButtonContext: () => {
     loading: boolean | undefined;
     disabled: boolean | undefined;
     stateProps: {
-        children?: React.ReactNode;
-        slot?: string | undefined | undefined;
-        style?: React.CSSProperties | undefined;
-        title?: string | undefined | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -572,17 +568,20 @@ export declare const usePendingButtonContext: () => {
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
         id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
+        slot?: string | undefined | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
+        style?: React.CSSProperties | undefined;
         tabIndex?: number | undefined | undefined;
+        title?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         role?: React.AriaRole | undefined;
@@ -611,11 +610,11 @@ export declare const usePendingButtonContext: () => {
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
         is?: string | undefined | undefined;
         "aria-activedescendant"?: string | undefined | undefined;
-        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
         "aria-braillelabel"?: string | undefined | undefined;
         "aria-brailleroledescription"?: string | undefined | undefined;
-        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-busy"?: (boolean | "false" | "true") | undefined;
         "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
         "aria-colcount"?: number | undefined | undefined;
         "aria-colindex"?: number | undefined | undefined;
@@ -626,43 +625,44 @@ export declare const usePendingButtonContext: () => {
         "aria-describedby"?: string | undefined | undefined;
         "aria-description"?: string | undefined | undefined;
         "aria-details"?: string | undefined | undefined;
-        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-disabled"?: (boolean | "false" | "true") | undefined;
         "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
         "aria-errormessage"?: string | undefined | undefined;
-        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-expanded"?: (boolean | "false" | "true") | undefined;
         "aria-flowto"?: string | undefined | undefined;
-        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
         "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
-        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-hidden"?: (boolean | "false" | "true") | undefined;
         "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
         "aria-keyshortcuts"?: string | undefined | undefined;
         "aria-label"?: string | undefined | undefined;
         "aria-labelledby"?: string | undefined | undefined;
         "aria-level"?: number | undefined | undefined;
         "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
-        "aria-modal"?: (boolean | "true" | "false") | undefined;
-        "aria-multiline"?: (boolean | "true" | "false") | undefined;
-        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-modal"?: (boolean | "false" | "true") | undefined;
+        "aria-multiline"?: (boolean | "false" | "true") | undefined;
+        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
         "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
         "aria-owns"?: string | undefined | undefined;
         "aria-placeholder"?: string | undefined | undefined;
         "aria-posinset"?: number | undefined | undefined;
         "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-readonly"?: (boolean | "false" | "true") | undefined;
         "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
-        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-required"?: (boolean | "false" | "true") | undefined;
         "aria-roledescription"?: string | undefined | undefined;
         "aria-rowcount"?: number | undefined | undefined;
         "aria-rowindex"?: number | undefined | undefined;
         "aria-rowindextext"?: string | undefined | undefined;
         "aria-rowspan"?: number | undefined | undefined;
-        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-selected"?: (boolean | "false" | "true") | undefined;
         "aria-setsize"?: number | undefined | undefined;
         "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
         "aria-valuemax"?: number | undefined | undefined;
         "aria-valuemin"?: number | undefined | undefined;
         "aria-valuenow"?: number | undefined | undefined;
         "aria-valuetext"?: string | undefined | undefined;
+        children?: React.ReactNode;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined | undefined;

package/lib/components/MannerTempBadge/MannerTempBadge.cjs

@@ -2,14 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const reactPrimitive = require('@seed-design/react-primitive');
 const mannerTempBadge = require('@seed-design/css/recipes/manner-temp-badge');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const reactPrimitive = require('@seed-design/react-primitive');
+const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 
-const { withProvider } = createStyleContext.createStyleContext(mannerTempBadge.mannerTempBadge);
-const MannerTempBadge = withProvider(
-  reactPrimitive.Primitive.span,
-  "root"
-);
+const { withProvider } = createRecipeContext.createRecipeContext(mannerTempBadge.mannerTempBadge);
+const MannerTempBadge = withProvider(reactPrimitive.Primitive.span);
 
 exports.MannerTempBadge = MannerTempBadge;

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

@@ -1,5 +1,5 @@
-import { PrimitiveProps } from '@seed-design/react-primitive';
 import { MannerTempBadgeVariantProps } from '@seed-design/css/recipes/manner-temp-badge';
+import { PrimitiveProps } from '@seed-design/react-primitive';
 import type * as React from "react";
 export interface MannerTempBadgeProps extends MannerTempBadgeVariantProps, PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
 }

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,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAEL,KAAK,2BAA2B,EACjC,MAAM,4CAA4C,CAAC;AACpD,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,8FAG3B,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,8FAAsE,CAAC"}

package/lib/components/MannerTempBadge/MannerTempBadge.js

@@ -1,11 +1,8 @@
-import { Primitive } from '@seed-design/react-primitive';
 import { mannerTempBadge } from '@seed-design/css/recipes/manner-temp-badge';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { Primitive } from '@seed-design/react-primitive';
+import { createRecipeContext } from '../../utils/createRecipeContext.js';
 
-const { withProvider } = createStyleContext(mannerTempBadge);
-const MannerTempBadge = withProvider(
-  Primitive.span,
-  "root"
-);
+const { withProvider } = createRecipeContext(mannerTempBadge);
+const MannerTempBadge = withProvider(Primitive.span);
 
 export { MannerTempBadge };

package/lib/components/ProgressCircle/ProgressCircle.cjs

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const reactProgress = require('@seed-design/react-progress');
 const progressCircle = require('@seed-design/css/recipes/progress-circle');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 
-const { withContext, withProvider } = createStyleContext.createStyleContext(progressCircle.progressCircle);
+const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(progressCircle.progressCircle);
 const ProgressCircleRoot = withProvider(
   reactProgress.ProgressCircle.Root,
   "root"

package/lib/components/ProgressCircle/ProgressCircle.js

@@ -1,8 +1,8 @@
 import { ProgressCircle } from '@seed-design/react-progress';
 import { progressCircle } from '@seed-design/css/recipes/progress-circle';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 
-const { withContext, withProvider } = createStyleContext(progressCircle);
+const { withContext, withProvider } = createSlotRecipeContext(progressCircle);
 const ProgressCircleRoot = withProvider(
   ProgressCircle.Root,
   "root"

package/lib/components/PullToRefresh/PullToRefresh.cjs

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const reactPullToRefresh = require('@seed-design/react-pull-to-refresh');
 const pullToRefresh = require('@seed-design/css/recipes/pull-to-refresh');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 
-const { withContext, withProvider } = createStyleContext.createStyleContext(pullToRefresh.pullToRefresh);
+const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(pullToRefresh.pullToRefresh);
 const PullToRefreshRoot = withProvider(
   reactPullToRefresh.PullToRefresh.Root,
   "root"

package/lib/components/PullToRefresh/PullToRefresh.js

@@ -1,8 +1,8 @@
 import { PullToRefresh } from '@seed-design/react-pull-to-refresh';
 import { pullToRefresh } from '@seed-design/css/recipes/pull-to-refresh';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 
-const { withContext, withProvider } = createStyleContext(pullToRefresh);
+const { withContext, withProvider } = createSlotRecipeContext(pullToRefresh);
 const PullToRefreshRoot = withProvider(
   PullToRefresh.Root,
   "root"