@seed-design/react 0.0.8 → 0.0.10

package/lib/utils/styled.cjs

@@ -186,5 +186,7 @@ function withStyleProps(Component) {
   return Node;
 }
 
+exports.handleColor = handleColor;
+exports.handleDimension = handleDimension;
 exports.useStyleProps = useStyleProps;
 exports.withStyleProps = withStyleProps;

package/lib/utils/styled.d.ts

@@ -1,5 +1,7 @@
 import { ColorBg, ColorFg, ColorPalette, ColorStroke, Dimension, Radius, SpacingX, SpacingY } from '@seed-design/css/vars';
 import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
+export declare function handleColor(color: string | undefined): any;
+export declare function handleDimension(dimension: string | 0 | undefined): any;
 export interface StyleProps {
     background?: `bg.${ColorBg}` | `palette.${ColorPalette}`;
     color?: `fg.${ColorFg}` | `palette.${ColorPalette}`;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}

package/lib/utils/styled.js

@@ -182,4 +182,4 @@ function withStyleProps(Component) {
   return Node;
 }
 
-export { useStyleProps, withStyleProps };
+export { handleColor, handleDimension, useStyleProps, withStyleProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -40,27 +40,28 @@
     "@seed-design/dom-utils": "0.0.1",
     "@seed-design/react-avatar": "0.0.1",
     "@seed-design/react-checkbox": "0.0.1",
-    "@seed-design/react-dialog": "0.0.1",
-    "@seed-design/react-popover": "0.0.1",
+    "@seed-design/react-dialog": "0.0.2",
+    "@seed-design/react-popover": "0.0.2",
     "@seed-design/react-primitive": "0.0.1",
     "@seed-design/react-progress": "0.0.1",
     "@seed-design/react-pull-to-refresh": "0.0.1",
     "@seed-design/react-radio-group": "0.0.1",
-    "@seed-design/react-segmented-control": "0.0.1",
-    "@seed-design/react-snackbar": "0.0.1",
+    "@seed-design/react-segmented-control": "0.0.2",
+    "@seed-design/react-snackbar": "0.0.2",
     "@seed-design/react-switch": "0.0.1",
-    "@seed-design/react-tabs": "0.0.1",
+    "@seed-design/react-tabs": "0.0.2",
     "@seed-design/react-text-field": "0.0.1",
     "@seed-design/react-toggle": "0.0.1",
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@seed-design/css": "0.0.8",
+    "@seed-design/css": "0.0.10",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "0.0.8",
+    "@seed-design/css": "0.0.10",
+    "@vitejs/plugin-react": "^4.3.4",
     "globby": "^14.1.0",
     "vite": "^6.1.1",
     "vite-plugin-dts": "^4.5.0"

package/src/components/ActionButton/ActionButton.tsx

@@ -5,7 +5,6 @@ import {
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import * as React from "react";
-import { createRecipeContext } from "../../utils/createRecipeContext";
 import { IconRequired } from "../Icon/Icon";
 import {
   PendingButtonProvider,
@@ -13,8 +12,6 @@ import {
   type UsePendingButtonProps,
 } from "../LoadingIndicator/usePendingButton";
 
-const { ClassNameProvider } = createRecipeContext(actionButton);
-
 export interface ActionButtonProps
   extends ActionButtonVariantProps,
     UsePendingButtonProps,
@@ -36,20 +33,18 @@ export const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProp
     }
 
     return (
-      <ClassNameProvider value={recipeClassName}>
-        <PendingButtonProvider value={api}>
-          <IconRequired enabled={layout === "iconOnly"}>
-            <Primitive.button
-              ref={ref}
-              className={clsx(recipeClassName, className)}
-              {...api.stateProps}
-              {...otherProps}
-            >
-              {children}
-            </Primitive.button>
-          </IconRequired>
-        </PendingButtonProvider>
-      </ClassNameProvider>
+      <PendingButtonProvider value={api}>
+        <IconRequired enabled={layout === "iconOnly"}>
+          <Primitive.button
+            ref={ref}
+            className={clsx(recipeClassName, className)}
+            {...api.stateProps}
+            {...otherProps}
+          >
+            {children}
+          </Primitive.button>
+        </IconRequired>
+      </PendingButtonProvider>
     );
   },
 );

package/src/components/ActionChip/ActionChip.tsx

@@ -4,7 +4,7 @@ import type * as React from "react";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 import { withIconRequired } from "../Icon/Icon";
 
-const { withProvider } = createRecipeContext(actionChip);
+const { withContext } = createRecipeContext(actionChip);
 
 export interface ActionChipProps
   extends ActionChipVariantProps,
@@ -12,7 +12,7 @@ export interface ActionChipProps
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
 export const ActionChip = withIconRequired(
-  withProvider<HTMLButtonElement, ActionChipProps>(Primitive.button),
+  withContext<HTMLButtonElement, ActionChipProps>(Primitive.button),
   (props: ActionChipProps) => props.layout === "iconOnly",
 );
 ActionChip.displayName = "ActionChip";

package/src/components/ActionSheet/ActionSheet.tsx

@@ -11,7 +11,7 @@ import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 
 const { withRootProvider, withContext } = createSlotRecipeContext(actionSheet);
-const { withProvider: withItemProvider } = createRecipeContext(actionSheetItem);
+const { withContext: withItemContext } = createRecipeContext(actionSheetItem);
 const withStateProps = createWithStateProps([useDialogContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -103,7 +103,7 @@ export interface ActionSheetItemProps
     ActionSheetItemVariantProps,
     React.HTMLAttributes<HTMLButtonElement> {}
 
-export const ActionSheetItem = withItemProvider<HTMLButtonElement, ActionSheetItemProps>(
+export const ActionSheetItem = withItemContext<HTMLButtonElement, ActionSheetItemProps>(
   withStateProps(Primitive.button),
 );
 

package/src/components/Badge/Badge.tsx

@@ -3,7 +3,7 @@ import { badge, type BadgeVariantProps } from "@seed-design/css/recipes/badge";
 import type * as React from "react";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 
-const { withProvider } = createRecipeContext(badge);
+const { withContext } = createRecipeContext(badge);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -12,4 +12,4 @@ export interface BadgeProps
     PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
 
-export const Badge = withProvider<HTMLSpanElement, BadgeProps>(Primitive.span);
+export const Badge = withContext<HTMLSpanElement, BadgeProps>(Primitive.span);

package/src/components/ControlChip/ControlChip.tsx

@@ -4,7 +4,7 @@ import type * as React from "react";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 import { withIconRequired } from "../Icon/Icon";
 
-const { withProvider } = createRecipeContext(controlChip);
+const { withContext } = createRecipeContext(controlChip);
 
 export interface ControlChipBaseProps extends PrimitiveProps, ControlChipVariantProps {}
 
@@ -13,6 +13,6 @@ export interface ControlChipProps
     React.HTMLAttributes<HTMLButtonElement> {}
 
 export const ControlChip = withIconRequired(
-  withProvider<HTMLButtonElement, ControlChipProps>(Primitive.button),
+  withContext<HTMLButtonElement, ControlChipProps>(Primitive.button),
   (props: ControlChipProps) => props.layout === "iconOnly",
 );

package/src/components/ExtendedActionSheet/ExtendedActionSheet.tsx

@@ -14,7 +14,7 @@ import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 
 const { withRootProvider, withContext } = createSlotRecipeContext(extendedActionSheet);
-const { withProvider: withItemProvider } = createRecipeContext(extendedActionSheetItem);
+const { withContext: withItemContext } = createRecipeContext(extendedActionSheetItem);
 const withStateProps = createWithStateProps([useDialogContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -113,7 +113,7 @@ export interface ExtendedActionSheetItemProps
     ExtendedActionSheetItemVariantProps,
     React.HTMLAttributes<HTMLButtonElement> {}
 
-export const ExtendedActionSheetItem = withItemProvider<
+export const ExtendedActionSheetItem = withItemContext<
   HTMLButtonElement,
   ExtendedActionSheetItemProps
 >(withStateProps(Primitive.button));

package/src/components/ExtendedFab/ExtendedFab.tsx

@@ -2,7 +2,7 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { extendedFab, type ExtendedFabVariantProps } from "@seed-design/css/recipes/extended-fab";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 
-const { withProvider } = createRecipeContext(extendedFab);
+const { withContext } = createRecipeContext(extendedFab);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -11,7 +11,7 @@ export interface ExtendedFabProps
     PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const ExtendedFab = withProvider<HTMLButtonElement, ExtendedFabProps>(Primitive.button, {
+export const ExtendedFab = withContext<HTMLButtonElement, ExtendedFabProps>(Primitive.button, {
   defaultProps: {
     variant: "neutralSolid",
     size: "medium",

package/src/components/Fab/Fab.tsx

@@ -3,7 +3,7 @@ import { fab, type FabVariantProps } from "@seed-design/css/recipes/fab";
 import type * as React from "react";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 
-const { withProvider } = createRecipeContext(fab);
+const { withContext } = createRecipeContext(fab);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -12,4 +12,4 @@ export interface FabProps
     PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
-export const Fab = withProvider<HTMLButtonElement, FabProps>(Primitive.button);
+export const Fab = withContext<HTMLButtonElement, FabProps>(Primitive.button);

package/src/components/Icon/Icon.tsx

@@ -1,6 +1,8 @@
 import { Slot } from "@radix-ui/react-slot";
 import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
+import type { ColorFg, ColorPalette, Dimension } from "@seed-design/css/vars";
 import { createContext, forwardRef, useCallback, useContext, useMemo, useRef } from "react";
+import { handleColor, handleDimension } from "../../utils/styled";
 
 export interface PrefixIconProps {
   svg: React.ReactNode;
@@ -103,29 +105,44 @@ export const IconRequired = ({
 
 export interface IconProps {
   svg: React.ReactNode;
+
+  size?: Dimension | string;
+
+  color?: `fg.${ColorFg}` | `palette.${ColorPalette}`;
 }
 
-export const Icon = forwardRef<SVGSVGElement, IconProps>(({ svg, ...otherProps }, ref) => {
-  const context = useContext(IconContext);
+export const Icon = forwardRef<SVGSVGElement, IconProps>(
+  ({ svg, size, color, ...otherProps }, ref) => {
+    const context = useContext(IconContext);
 
-  useLayoutEffect(() => {
-    context?.register();
-    return () => {
-      context?.unregister();
-    };
-  }, [context]);
-
-  return (
-    <Slot
-      ref={ref as React.ForwardedRef<HTMLElement>}
-      aria-hidden
-      className="seed-icon"
-      {...otherProps}
-    >
-      {svg}
-    </Slot>
-  );
-});
+    useLayoutEffect(() => {
+      context?.register();
+      return () => {
+        context?.unregister();
+      };
+    }, [context]);
+
+    const sizeValue = handleDimension(size);
+    const colorValue = handleColor(color);
+
+    return (
+      <Slot
+        ref={ref as React.ForwardedRef<HTMLElement>}
+        aria-hidden
+        className="seed-icon"
+        style={
+          {
+            "--seed-icon-size": sizeValue,
+            "--seed-icon-color": colorValue,
+          } as React.CSSProperties
+        }
+        {...otherProps}
+      >
+        {svg}
+      </Slot>
+    );
+  },
+);
 
 export function withIconRequired<P extends {}, R>(
   Component: React.ComponentType<P & React.RefAttributes<R>>,

package/src/components/LinkContent/LinkContent.tsx

@@ -4,7 +4,7 @@ import { createRecipeContext } from "../../utils/createRecipeContext";
 import type * as React from "react";
 import { withStyleProps, type StyleProps } from "../../utils/styled";
 
-const { withProvider } = createRecipeContext(linkContent);
+const { withContext } = createRecipeContext(linkContent);
 
 export interface LinkContentProps
   extends LinkContentVariantProps,
@@ -12,6 +12,6 @@ export interface LinkContentProps
     Pick<StyleProps, "color">,
     Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {}
 
-export const LinkContent = withProvider<HTMLButtonElement, LinkContentProps>(
+export const LinkContent = withContext<HTMLButtonElement, LinkContentProps>(
   withStyleProps(Primitive.span),
 );

package/src/components/MannerTemp/MannerTemp.tsx

@@ -0,0 +1,25 @@
+import { mannerTemp, type MannerTempVariantProps } from "@seed-design/css/recipes/manner-temp";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { forwardRef, useMemo } from "react";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { MannerTempEmotePropsProvider } from "./MannerTempEmote";
+
+const { withContext } = createRecipeContext(mannerTemp);
+
+export interface MannerTempProps
+  extends MannerTempVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+const MannerTempBase = withContext<HTMLSpanElement, MannerTempProps>(Primitive.span);
+
+export const MannerTemp = forwardRef<HTMLSpanElement, MannerTempProps>((props, ref) => {
+  const emoteProps = useMemo(() => ({ level: props.level }), [props.level]);
+
+  return (
+    <MannerTempEmotePropsProvider value={emoteProps}>
+      <MannerTempBase {...props} ref={ref} />
+    </MannerTempEmotePropsProvider>
+  );
+});