@seed-design/react 0.0.4 → 0.0.6

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const jsxRuntime = require('react/jsx-runtime');
+const domUtils = require('@seed-design/dom-utils');
 const reactPrimitive = require('@seed-design/react-primitive');
-const visuallyHidden = require('@seed-design/css/recipes/visually-hidden');
-const createStyleContext = require('../../utils/createStyleContext.cjs');
-
-const { withProvider } = createStyleContext.createStyleContext(visuallyHidden.visuallyHidden);
-const VisuallyHidden = withProvider(
-  reactPrimitive.Primitive.div,
-  "root"
-);
+const React = require('react');
+
+const VisuallyHidden = React.forwardRef((props, ref) => {
+  const { style, ...otherProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.div, { ref, style: { ...domUtils.visuallyHidden, ...style }, ...otherProps });
+});
 
 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":"AACA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,MAAM,WAAW,mBAAoB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEpG,eAAO,MAAM,cAAc,4FAGzB,CAAC"}

package/lib/components/VisuallyHidden/VisuallyHidden.js

@@ -1,11 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { visuallyHidden } from '@seed-design/dom-utils';
 import { Primitive } from '@seed-design/react-primitive';
-import { visuallyHidden } from '@seed-design/css/recipes/visually-hidden';
-import { createStyleContext } from '../../utils/createStyleContext.js';
+import { forwardRef } from 'react';
 
-const { withProvider } = createStyleContext(visuallyHidden);
-const VisuallyHidden = withProvider(
-  Primitive.div,
-  "root"
-);
+const VisuallyHidden = forwardRef((props, ref) => {
+  const { style, ...otherProps } = props;
+  return /* @__PURE__ */ jsx(Primitive.div, { ref, style: { ...visuallyHidden, ...style }, ...otherProps });
+});
 
 export { VisuallyHidden };

package/lib/components/index.cjs

@@ -221,7 +221,7 @@ exports.RadioSelectBox = RadioSelectBox_namespace;
 exports.Skeleton = Skeleton.Skeleton;
 exports.SnackbarActionButton = Snackbar.SnackbarActionButton;
 exports.SnackbarAvoidOverlap = Snackbar.SnackbarAvoidOverlap;
-exports.SnackbarCloseButton = Snackbar.SnackbarCloseButton;
+exports.SnackbarHiddenCloseButton = Snackbar.SnackbarHiddenCloseButton;
 exports.SnackbarMessage = Snackbar.SnackbarMessage;
 exports.SnackbarPrefixIcon = Snackbar.SnackbarPrefixIcon;
 exports.SnackbarRegion = Snackbar.SnackbarRegion;

package/lib/components/index.js

@@ -65,7 +65,7 @@ export { CheckSelectBox_namespace as CheckSelectBox };
 import * as RadioSelectBox_namespace from './SelectBox/RadioSelectBox.namespace.js';
 export { RadioSelectBox_namespace as RadioSelectBox };
 export { Skeleton } from './Skeleton/Skeleton.js';
-export { SnackbarActionButton, SnackbarAvoidOverlap, SnackbarCloseButton, SnackbarMessage, SnackbarPrefixIcon, SnackbarRegion, SnackbarRenderer, SnackbarRoot, SnackbarRootProvider } from './Snackbar/Snackbar.js';
+export { SnackbarActionButton, SnackbarAvoidOverlap, SnackbarHiddenCloseButton, SnackbarMessage, SnackbarPrefixIcon, SnackbarRegion, SnackbarRenderer, SnackbarRoot, SnackbarRootProvider } from './Snackbar/Snackbar.js';
 export { useSnackbarContext } from '@seed-design/react-snackbar';
 export { useSnackbarAdapter } from './Snackbar/useSnackbarAdapter.js';
 import * as Snackbar_namespace from './Snackbar/Snackbar.namespace.js';