@seed-design/react 0.0.5 → 0.0.6

package/lib/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/index.js

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

package/package.json

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

package/src/components/Snackbar/Snackbar.namespace.ts

@@ -1,7 +1,7 @@
 export {
   SnackbarActionButton as ActionButton,
   SnackbarAvoidOverlap as AvoidOverlap,
-  SnackbarCloseButton as CloseButton,
+  SnackbarHiddenCloseButton as HiddenCloseButton,
   SnackbarMessage as Message,
   SnackbarPrefixIcon as PrefixIcon,
   SnackbarRegion as Region,
@@ -10,7 +10,7 @@ export {
   SnackbarRootProvider as RootProvider,
   type SnackbarActionButtonProps as ActionButtonProps,
   type SnackbarAvoidOverlapProps as AvoidOverlapProps,
-  type SnackbarCloseButtonProps as CloseButtonProps,
+  type SnackbarHiddenCloseButtonProps as HiddenCloseButtonProps,
   type SnackbarMessageProps as MessageProps,
   type SnackbarPrefixIconProps as PrefixIconProps,
   type SnackbarRegionProps as RegionProps,

package/src/components/Snackbar/Snackbar.tsx

@@ -1,10 +1,9 @@
 import { snackbar, type SnackbarVariantProps } 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 { visuallyHidden } from "@seed-design/dom-utils";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { Snackbar as SnackbarPrimitive } from "@seed-design/react-snackbar";
-import clsx from "clsx";
-import { forwardRef, useMemo } from "react";
+import { forwardRef } from "react";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { InternalIcon, type InternalIconProps } from "../private/Icon";
@@ -68,24 +67,24 @@ export const SnackbarActionButton = withContext<HTMLButtonElement, SnackbarActio
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface SnackbarCloseButtonProps extends SnackbarPrimitive.CloseButtonProps {}
+export interface SnackbarHiddenCloseButtonProps extends SnackbarPrimitive.CloseButtonProps {}
 
 /**
  * Visually hidden button that closes the snackbar (for screen readers).
  */
-export const SnackbarCloseButton = forwardRef<HTMLButtonElement, SnackbarCloseButtonProps>(
-  (props, ref) => {
-    const { className, ...otherProps } = props;
-    const visuallyHiddenClassName = useMemo(() => visuallyHidden(), []);
-    return (
-      <SnackbarPrimitive.CloseButton
-        ref={ref}
-        className={clsx(visuallyHiddenClassName, className)}
-        {...otherProps}
-      />
-    );
-  },
-);
+export const SnackbarHiddenCloseButton = forwardRef<
+  HTMLButtonElement,
+  SnackbarHiddenCloseButtonProps
+>((props, ref) => {
+  const { style, ...otherProps } = props;
+  return (
+    <SnackbarPrimitive.CloseButton
+      ref={ref}
+      style={{ ...visuallyHidden, ...style }}
+      {...otherProps}
+    />
+  );
+});
 
 ////////////////////////////////////////////////////////////////////////////////////
 

package/src/components/Snackbar/index.ts

@@ -1,7 +1,7 @@
 export {
   SnackbarActionButton,
   SnackbarAvoidOverlap,
-  SnackbarCloseButton,
+  SnackbarHiddenCloseButton,
   SnackbarMessage,
   SnackbarPrefixIcon,
   SnackbarRegion,
@@ -10,7 +10,7 @@ export {
   SnackbarRootProvider,
   type SnackbarActionButtonProps,
   type SnackbarAvoidOverlapProps,
-  type SnackbarCloseButtonProps,
+  type SnackbarHiddenCloseButtonProps,
   type SnackbarMessageProps,
   type SnackbarPrefixIconProps,
   type SnackbarRegionProps,

package/src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -1,10 +1,11 @@
+import { visuallyHidden } from "@seed-design/dom-utils";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { visuallyHidden } from "@seed-design/css/recipes/visually-hidden";
 import type * as React from "react";
-import { createRecipeContext } from "../../utils/createRecipeContext";
-
-const { withProvider } = createRecipeContext(visuallyHidden);
+import { forwardRef } from "react";
 
 export interface VisuallyHiddenProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 
-export const VisuallyHidden = withProvider<HTMLDivElement, VisuallyHiddenProps>(Primitive.div);
+export const VisuallyHidden = forwardRef<HTMLDivElement, VisuallyHiddenProps>((props, ref) => {
+  const { style, ...otherProps } = props;
+  return <Primitive.div ref={ref} style={{ ...visuallyHidden, ...style }} {...otherProps} />;
+});