feat: ActionChip styled layer

Author: malangcat

docs/registry/ui/action-chip.tsx

@@ -1,23 +1,16 @@
-import { Slot } from "@radix-ui/react-slot";
-import {
-  actionChip,
-  type ActionChipVariantProps,
-} from "@seed-design/recipe/actionChip";
-import clsx from "clsx";
+"use client";
+
+import { ActionChip as SeedActionChip } from "@seed-design/react";
 import * as React from "react";
 
 import "@seed-design/stylesheet/actionChip.css";
 
-export interface ActionChipProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    ActionChipVariantProps {
+export interface ActionChipProps extends SeedActionChip.RootProps {
   prefixIcon?: React.ReactNode;
 
   suffixIcon?: React.ReactNode;
 
   count?: number;
-
-  asChild?: boolean;
 }
 
 export const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(
@@ -30,35 +23,29 @@ export const ActionChip = React.forwardRef<HTMLButtonElement, ActionChipProps>(
       prefixIcon,
       suffixIcon,
       count,
-      asChild = false,
       ...otherProps
     },
     ref,
   ) => {
-    const Comp = asChild ? Slot : "button";
-    const classNames = actionChip({ size, layout });
     return (
-      <Comp
-        ref={ref}
-        className={clsx(classNames.root, className)}
-        {...otherProps}
-      >
+      <SeedActionChip.Root ref={ref} {...otherProps}>
         {layout === "withText" ? (
           <>
-            {prefixIcon && (
-              <Slot className={classNames.prefixIcon}>{prefixIcon}</Slot>
-            )}
-            <span className={classNames.label}>{children}</span>
-            {count && <span className={classNames.count}>{count}</span>}
-            {suffixIcon && (
-              <Slot className={classNames.suffixIcon}>{suffixIcon}</Slot>
-            )}
+            {prefixIcon && <SeedActionChip.PrefixIcon svg={prefixIcon} />}
+            <SeedActionChip.Label>{children}</SeedActionChip.Label>
+            {count && <SeedActionChip.Count>{count}</SeedActionChip.Count>}
+            {suffixIcon && <SeedActionChip.SuffixIcon svg={suffixIcon} />}
           </>
         ) : (
-          <Slot className={classNames.icon}>{children}</Slot>
+          <SeedActionChip.Icon svg={children} />
         )}
-      </Comp>
+      </SeedActionChip.Root>
     );
   },
 );
 ActionChip.displayName = "ActionChip";
+
+/**
+ * This file is generated snippet from the Seed Design.
+ * You can extend the functionality from this snippet if needed.
+ */

packages/react/src/components/ActionChip/ActionChip.namespace.ts

@@ -0,0 +1,14 @@
+export {
+  ActionChipCount as Count,
+  ActionChipIcon as Icon,
+  ActionChipLabel as Label,
+  ActionChipPrefixIcon as PrefixIcon,
+  ActionChipRoot as Root,
+  ActionChipSuffixIcon as SuffixIcon,
+  type ActionChipCountProps as CountProps,
+  type ActionChipIconProps as IconProps,
+  type ActionChipLabelProps as LabelProps,
+  type ActionChipPrefixIconProps as PrefixIconProps,
+  type ActionChipRootProps as RootProps,
+  type ActionChipSuffixIconProps as SuffixIconProps,
+} from "./ActionChip";

packages/react/src/components/ActionChip/ActionChip.tsx

@@ -0,0 +1,54 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { actionChip, type ActionChipVariantProps } from "@seed-design/recipe/actionChip";
+import type * as React from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { Icon, type IconProps } from "../private/Icon";
+
+const { withProvider, withContext } = createStyleContext(actionChip);
+
+export interface ActionChipRootProps
+  extends ActionChipVariantProps,
+    PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const ActionChipRoot = withProvider<HTMLButtonElement, ActionChipRootProps>(
+  Primitive.button,
+  "root",
+);
+ActionChipRoot.displayName = "ActionChip";
+
+export interface ActionChipLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const ActionChipLabel = withContext<HTMLSpanElement, ActionChipLabelProps>(
+  Primitive.span,
+  "label",
+);
+
+export interface ActionChipPrefixIconProps extends IconProps {}
+
+export const ActionChipPrefixIcon = withContext<SVGSVGElement, ActionChipPrefixIconProps>(
+  Icon,
+  "prefixIcon",
+);
+
+export interface ActionChipSuffixIconProps extends IconProps {}
+
+export const ActionChipSuffixIcon = withContext<SVGSVGElement, ActionChipSuffixIconProps>(
+  Icon,
+  "suffixIcon",
+);
+
+export interface ActionChipIconProps extends IconProps {}
+
+export const ActionChipIcon = withContext<SVGSVGElement, ActionChipIconProps>(Icon, "icon");
+
+export interface ActionChipCountProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const ActionChipCount = withContext<HTMLSpanElement, ActionChipCountProps>(
+  Primitive.span,
+  "count",
+);

packages/react/src/components/ActionChip/index.ts

@@ -0,0 +1,16 @@
+export {
+  ActionChipCount,
+  ActionChipIcon,
+  ActionChipLabel,
+  ActionChipPrefixIcon,
+  ActionChipRoot,
+  ActionChipSuffixIcon,
+  type ActionChipCountProps,
+  type ActionChipIconProps,
+  type ActionChipLabelProps,
+  type ActionChipPrefixIconProps,
+  type ActionChipRootProps,
+  type ActionChipSuffixIconProps,
+} from "./ActionChip";
+
+export * as ActionChip from "./ActionChip.namespace";

packages/react/src/components/index.ts

@@ -1,4 +1,5 @@
 export * from "./ActionButton";
+export * from "./ActionChip";
 export * from "./Avatar";
 export * from "./Badge";
 export * from "./Box";