@seed-design/react 0.0.1-alpha-20250210081704

package/lib/primitive.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/primitive.ts
+var primitive_exports = {};
+module.exports = __toCommonJS(primitive_exports);
+__reExport(primitive_exports, require("@seed-design/react-avatar"), module.exports);
+__reExport(primitive_exports, require("@seed-design/react-checkbox"), module.exports);
+__reExport(primitive_exports, require("@seed-design/react-dialog"), module.exports);
+__reExport(primitive_exports, require("@seed-design/react-popover"), module.exports);
+__reExport(primitive_exports, require("@seed-design/react-progress"), module.exports);
+__reExport(primitive_exports, require("@seed-design/react-pull-to-refresh"), module.exports);
+__reExport(primitive_exports, require("@seed-design/react-radio-group"), module.exports);
+__reExport(primitive_exports, require("@seed-design/react-snackbar"), module.exports);
+__reExport(primitive_exports, require("@seed-design/react-switch"), module.exports);
+__reExport(primitive_exports, require("@seed-design/react-tabs"), module.exports);
+__reExport(primitive_exports, require("@seed-design/react-toggle"), module.exports);
+//# sourceMappingURL=primitive.js.map

package/lib/primitive.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/primitive.ts"],
+  "sourcesContent": ["export * from \"@seed-design/react-avatar\";\nexport * from \"@seed-design/react-checkbox\";\nexport * from \"@seed-design/react-dialog\";\nexport * from \"@seed-design/react-popover\";\nexport * from \"@seed-design/react-progress\";\nexport * from \"@seed-design/react-pull-to-refresh\";\nexport * from \"@seed-design/react-radio-group\";\nexport * from \"@seed-design/react-snackbar\";\nexport * from \"@seed-design/react-switch\";\nexport * from \"@seed-design/react-tabs\";\nexport * from \"@seed-design/react-toggle\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,8BAAc,sCAAd;AACA,8BAAc,wCADd;AAEA,8BAAc,sCAFd;AAGA,8BAAc,uCAHd;AAIA,8BAAc,wCAJd;AAKA,8BAAc,+CALd;AAMA,8BAAc,2CANd;AAOA,8BAAc,wCAPd;AAQA,8BAAc,sCARd;AASA,8BAAc,oCATd;AAUA,8BAAc,sCAVd;",
+  "names": []
+}

package/lib/primitive.mjs

@@ -0,0 +1,13 @@
+// src/primitive.ts
+export * from "@seed-design/react-avatar";
+export * from "@seed-design/react-checkbox";
+export * from "@seed-design/react-dialog";
+export * from "@seed-design/react-popover";
+export * from "@seed-design/react-progress";
+export * from "@seed-design/react-pull-to-refresh";
+export * from "@seed-design/react-radio-group";
+export * from "@seed-design/react-snackbar";
+export * from "@seed-design/react-switch";
+export * from "@seed-design/react-tabs";
+export * from "@seed-design/react-toggle";
+//# sourceMappingURL=primitive.mjs.map

package/lib/primitive.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/primitive.ts"],
+  "sourcesContent": ["export * from \"@seed-design/react-avatar\";\nexport * from \"@seed-design/react-checkbox\";\nexport * from \"@seed-design/react-dialog\";\nexport * from \"@seed-design/react-popover\";\nexport * from \"@seed-design/react-progress\";\nexport * from \"@seed-design/react-pull-to-refresh\";\nexport * from \"@seed-design/react-radio-group\";\nexport * from \"@seed-design/react-snackbar\";\nexport * from \"@seed-design/react-switch\";\nexport * from \"@seed-design/react-tabs\";\nexport * from \"@seed-design/react-toggle\";\n"],
+  "mappings": ";AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": []
+}

package/lib/utils/createStyleContext.d.ts

@@ -0,0 +1,24 @@
+type Recipe<Props extends Record<string, string | boolean | undefined>, Classnames extends Record<string, string>> = ((props?: Props) => Classnames) & {
+    splitVariantProps: <T extends Props>(props: T) => [Props, Omit<T, keyof Props>];
+};
+export declare function createStyleContext<Props extends Record<string, string | boolean | undefined>, Classnames extends Record<string, string>>(recipe: Recipe<Props, Classnames>): {
+    ClassNamesProvider: ({ children, value, }: {
+        children: React.ReactNode;
+        value: Classnames;
+    }) => import("react/jsx-runtime").JSX.Element;
+    PropsProvider: ({ children, value }: {
+        children: React.ReactNode;
+        value: Props;
+    }) => import("react/jsx-runtime").JSX.Element;
+    useClassNames: () => Classnames;
+    useProps: () => Props | null;
+    withRootProvider: <P>(Component: React.ElementType<any>, options?: {
+        defaultProps?: Partial<P>;
+    }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P>>;
+    withProvider: <T, P>(Component: React.ElementType<any>, slot: keyof Classnames, options?: {
+        defaultProps?: Partial<P>;
+    }) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+    withContext: <T, P>(Component: React.ElementType<any>, slot?: keyof Classnames) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+};
+export {};
+//# sourceMappingURL=createStyleContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createStyleContext.d.ts","sourceRoot":"","sources":["../../src/utils/createStyleContext.tsx"],"names":[],"mappings":"AAGA,KAAK,MAAM,CACT,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IACvC,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,UAAU,CAAC,GAAG;IACpC,iBAAiB,EAAE,CAAC,CAAC,SAAS,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC;CACjF,CAAC;AAEF,wBAAgB,kBAAkB,CAChC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAC1D,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC;+CAO9B;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,UAAU,CAAA;KAAE;yCAIP;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE;;;uBAmB7D,CAAC,aACd,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,YACvB;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;mBAsBtC,CAAC,EAAE,CAAC,aACb,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,QAC3B,MAAM,UAAU,YACZ;QACR,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;KAC3B,KACA,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;kBAuBhE,CAAC,EAAE,CAAC,aACZ,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,SAC1B,MAAM,UAAU,KACtB,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;EAsBtF"}

package/lib/utils/createWithStateProps.d.ts

@@ -0,0 +1,10 @@
+type AtLeastOne<T> = [T, ...T[]];
+export declare function createWithStateProps(useContexts: AtLeastOne<(prop?: {
+    strict?: boolean;
+}) => {
+    stateProps: React.HTMLAttributes<HTMLElement>;
+} | null>, options?: {
+    strict?: boolean;
+}): <P, R>(Component: React.ComponentType<P & React.RefAttributes<R>>) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P> & import("react").RefAttributes<R>>;
+export {};
+//# sourceMappingURL=createWithStateProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createWithStateProps.d.ts","sourceRoot":"","sources":["../../src/utils/createWithStateProps.tsx"],"names":[],"mappings":"AAEA,KAAK,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;AAEjC,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,UAAU,CACrB,CAAC,IAAI,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,KAAK;IAAE,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;CAAE,GAAG,IAAI,CAC1F,EACD,OAAO,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,IAIC,CAAC,EAAE,CAAC,aAAa,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,sHAehG"}

package/lib/vars.d.ts

@@ -0,0 +1,2 @@
+export * from "@seed-design/vars";
+//# sourceMappingURL=vars.d.ts.map

package/lib/vars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vars.d.ts","sourceRoot":"","sources":["../src/vars.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/lib/vars.js

@@ -0,0 +1,21 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vars.ts
+var vars_exports = {};
+module.exports = __toCommonJS(vars_exports);
+__reExport(vars_exports, require("@seed-design/vars"), module.exports);
+//# sourceMappingURL=vars.js.map

package/lib/vars.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/vars.ts"],
+  "sourcesContent": ["export * from \"@seed-design/vars\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,yBAAc,8BAAd;",
+  "names": []
+}

package/lib/vars.mjs

@@ -0,0 +1,3 @@
+// src/vars.ts
+export * from "@seed-design/vars";
+//# sourceMappingURL=vars.mjs.map

package/lib/vars.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/vars.ts"],
+  "sourcesContent": ["export * from \"@seed-design/vars\";\n"],
+  "mappings": ";AAAA,cAAc;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@seed-design/react",
+  "version": "0.0.1-alpha-20250210081704",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daangn/seed-design.git",
+    "directory": "packages/react"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "require": "./lib/index.js",
+      "import": "./lib/index.mjs"
+    },
+    "./vars": {
+      "types": "./lib/vars.d.ts",
+      "require": "./lib/vars.js",
+      "import": "./lib/vars.mjs"
+    },
+    "./primitive": {
+      "types": "./lib/primitive.d.ts",
+      "require": "./lib/primitive.js",
+      "import": "./lib/primitive.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/index.js",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "prepack": "bun run build",
+    "clean": "rm -rf lib",
+    "build": "bun build.mjs && tsc --emitDeclarationOnly",
+    "dev": "bun run dev.mjs"
+  },
+  "dependencies": {
+    "@radix-ui/react-compose-refs": "^1.1.1",
+    "@radix-ui/react-use-controllable-state": "1.1.0",
+    "@radix-ui/react-use-layout-effect": "^1.1.0",
+    "@seed-design/dom-utils": "0.0.0-alpha-20250210081704",
+    "@seed-design/react-avatar": "0.0.0-alpha-20250210081704",
+    "@seed-design/react-checkbox": "0.0.0-alpha-20250210081704",
+    "@seed-design/react-dialog": "0.0.1-alpha-20250210081704",
+    "@seed-design/react-popover": "0.0.0-alpha-20250210081704",
+    "@seed-design/react-primitive": "0.0.1-alpha-20250210081704",
+    "@seed-design/react-progress": "0.0.1-alpha-20250210081704",
+    "@seed-design/react-pull-to-refresh": "0.0.1-alpha-20250210081704",
+    "@seed-design/react-radio-group": "0.0.0-alpha-20250210081704",
+    "@seed-design/react-segmented-control": "0.0.1-alpha-20250210081704",
+    "@seed-design/react-snackbar": "0.0.1-alpha-20250210081704",
+    "@seed-design/react-switch": "0.0.0-alpha-20250210081704",
+    "@seed-design/react-text-field": "0.0.0-alpha-20250210081704",
+    "@seed-design/react-tabs": "0.0.0-alpha-20250210081704",
+    "@seed-design/react-toggle": "0.0.1-alpha-20250210081704",
+    "@seed-design/vars": "0.0.1-alpha-20250210081704",
+    "clsx": "^2.1.1"
+  },
+  "peerDependencies": {
+    "@seed-design/recipe": "0.0.0-alpha-20250210081704",
+    "@stackflow/react": ">=1.4.1",
+    "@stackflow/react-ui-core": ">=1.2.1",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "ultra": {
+    "concurrent": [
+      "dev",
+      "build"
+    ]
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.0"
+  }
+}

package/src/components/ActionButton/ActionButton.namespace.ts

@@ -0,0 +1,14 @@
+export {
+  ActionButtonIcon as Icon,
+  ActionButtonLabel as Label,
+  ActionButtonPrefixIcon as PrefixIcon,
+  ActionButtonProgressIndicator as ProgressIndicator,
+  ActionButtonRoot as Root,
+  ActionButtonSuffixIcon as SuffixIcon,
+  type ActionButtonIconProps as IconProps,
+  type ActionButtonLabelProps as LabelProps,
+  type ActionButtonPrefixIconProps as PrefixIconProps,
+  type ActionButtonProgressIndicatorProps as ProgressIndicatorProps,
+  type ActionButtonRootProps as RootProps,
+  type ActionButtonSuffixIconProps as SuffixIconProps,
+} from "./ActionButton";

package/src/components/ActionButton/ActionButton.tsx

@@ -0,0 +1,98 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { actionButton, type ActionButtonVariantProps } from "@seed-design/recipe/actionButton";
+import clsx from "clsx";
+import * as React from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { Icon, type IconProps } from "../private/Icon";
+import {
+  PendingButtonProvider,
+  usePendingButton,
+  usePendingButtonContext,
+  type UsePendingButtonProps,
+} from "../private/usePendingButton";
+
+const { ClassNamesProvider, withContext } = createStyleContext(actionButton);
+const withStateProps = createWithStateProps([usePendingButtonContext]);
+
+export interface ActionButtonRootProps
+  extends ActionButtonVariantProps,
+    UsePendingButtonProps,
+    PrimitiveProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const ActionButtonRoot = React.forwardRef<HTMLButtonElement, ActionButtonRootProps>(
+  (
+    {
+      variant = "brandSolid",
+      size = "medium",
+      loading = false,
+      layout = "withText",
+      className,
+      ...otherProps
+    },
+    ref,
+  ) => {
+    const classNames = actionButton({ variant, layout, size });
+    const api = usePendingButton({ loading, disabled: otherProps.disabled });
+
+    if (layout === "iconOnly" && !(otherProps["aria-label"] || otherProps["aria-labelledby"])) {
+      console.warn(
+        "When layout is 'iconOnly', 'aria-label' or 'aria-labelledby' should be provided.",
+      );
+    }
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <PendingButtonProvider value={api}>
+          <Primitive.button
+            ref={ref}
+            className={clsx(classNames.root, className)}
+            {...api.stateProps}
+            {...otherProps}
+          />
+        </PendingButtonProvider>
+      </ClassNamesProvider>
+    );
+  },
+);
+ActionButtonRoot.displayName = "ActionButton";
+
+export interface ActionButtonLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const ActionButtonLabel = withContext<HTMLSpanElement, ActionButtonLabelProps>(
+  withStateProps(Primitive.span),
+  "label",
+);
+
+export interface ActionButtonPrefixIconProps extends IconProps {}
+
+export const ActionButtonPrefixIcon = withContext<SVGSVGElement, ActionButtonPrefixIconProps>(
+  withStateProps(Icon),
+  "prefixIcon",
+);
+
+export interface ActionButtonSuffixIconProps extends IconProps {}
+
+export const ActionButtonSuffixIcon = withContext<SVGSVGElement, ActionButtonSuffixIconProps>(
+  withStateProps(Icon),
+  "suffixIcon",
+);
+
+export interface ActionButtonIconProps extends IconProps {}
+
+export const ActionButtonIcon = withContext<SVGSVGElement, ActionButtonIconProps>(
+  withStateProps(Icon),
+  "icon",
+);
+
+export interface ActionButtonProgressIndicatorProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const ActionButtonProgressIndicator = withContext<
+  HTMLDivElement,
+  ActionButtonProgressIndicatorProps
+>(withStateProps(Primitive.div), "progressIndicator");

package/src/components/ActionButton/index.ts

@@ -0,0 +1,16 @@
+export {
+  ActionButtonIcon,
+  ActionButtonLabel,
+  ActionButtonPrefixIcon,
+  ActionButtonProgressIndicator,
+  ActionButtonRoot,
+  ActionButtonSuffixIcon,
+  type ActionButtonIconProps,
+  type ActionButtonLabelProps,
+  type ActionButtonPrefixIconProps,
+  type ActionButtonProgressIndicatorProps,
+  type ActionButtonRootProps,
+  type ActionButtonSuffixIconProps,
+} from "./ActionButton";
+
+export * as ActionButton from "./ActionButton.namespace";

package/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";

package/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",
+);

package/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";

package/src/components/ActionSheet/ActionSheet.namespace.ts

@@ -0,0 +1,28 @@
+export {
+  ActionSheetBackdrop as Backdrop,
+  ActionSheetPositioner as Positioner,
+  ActionSheetContent as Content,
+  ActionSheetHeader as Header,
+  ActionSheetRoot as Root,
+  ActionSheetTitle as Title,
+  ActionSheetDescription as Description,
+  ActionSheetTrigger as Trigger,
+  ActionSheetList as List,
+  ActionSheetItem as Item,
+  ActionSheetItemLabel as ItemLabel,
+  ActionSheetCloseButton as CloseButton,
+  ActionSheetCloseButtonLabel as CloseButtonLabel,
+  type ActionSheetBackdropProps as BackdropProps,
+  type ActionSheetPositionerProps as PositionerProps,
+  type ActionSheetContentProps as ContentProps,
+  type ActionSheetHeaderProps as HeaderProps,
+  type ActionSheetRootProps as RootProps,
+  type ActionSheetTitleProps as TitleProps,
+  type ActionSheetDescriptionProps as DescriptionProps,
+  type ActionSheetTriggerProps as TriggerProps,
+  type ActionSheetListProps as ListProps,
+  type ActionSheetItemProps as ItemProps,
+  type ActionSheetItemLabelProps as ItemLabelProps,
+  type ActionSheetCloseButtonProps as CloseButtonProps,
+  type ActionSheetCloseButtonLabelProps as CloseButtonLabelProps,
+} from "./ActionSheet";

package/src/components/ActionSheet/ActionSheet.tsx

@@ -0,0 +1,150 @@
+import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { actionSheet, type ActionSheetVariantProps } from "@seed-design/recipe/actionSheet";
+import {
+  actionSheetCloseButton,
+  type ActionSheetCloseButtonVariantProps,
+} from "@seed-design/recipe/actionSheetCloseButton";
+import {
+  actionSheetItem,
+  type ActionSheetItemVariantProps,
+} from "@seed-design/recipe/actionSheetItem";
+import type * as React from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+
+const { withRootProvider, withContext } = createStyleContext(actionSheet);
+const { withProvider: withItemProvider, withContext: withItemContext } =
+  createStyleContext(actionSheetItem);
+const { withProvider: withCloseButtonProvider, withContext: withCloseButtonContext } =
+  createStyleContext(actionSheetCloseButton);
+const withStateProps = createWithStateProps([useDialogContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ActionSheetRootProps extends ActionSheetVariantProps, DialogPrimitive.RootProps {}
+
+export const ActionSheetRoot = withRootProvider<ActionSheetRootProps>(DialogPrimitive.Root, {
+  defaultProps: {
+    lazyMount: true,
+    unmountOnExit: true,
+  },
+});
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ActionSheetTriggerProps extends DialogPrimitive.TriggerProps {}
+
+export const ActionSheetTrigger = DialogPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ActionSheetPositionerProps extends DialogPrimitive.PositionerProps {}
+
+export const ActionSheetPositioner = withContext<HTMLDivElement, ActionSheetPositionerProps>(
+  DialogPrimitive.Positioner,
+  "positioner",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ActionSheetBackdropProps extends DialogPrimitive.BackdropProps {}
+
+export const ActionSheetBackdrop = withContext<HTMLDivElement, ActionSheetBackdropProps>(
+  DialogPrimitive.Backdrop,
+  "backdrop",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ActionSheetContentProps extends DialogPrimitive.ContentProps {}
+
+export const ActionSheetContent = withContext<HTMLDivElement, ActionSheetContentProps>(
+  DialogPrimitive.Content,
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ActionSheetHeaderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const ActionSheetHeader = withContext<HTMLDivElement, ActionSheetHeaderProps>(
+  withStateProps(Primitive.div),
+  "header",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ActionSheetTitleProps extends DialogPrimitive.TitleProps {}
+
+export const ActionSheetTitle = withContext<HTMLHeadingElement, ActionSheetTitleProps>(
+  withStateProps(Primitive.h2),
+  "title",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ActionSheetDescriptionProps extends DialogPrimitive.DescriptionProps {}
+
+export const ActionSheetDescription = withContext<
+  HTMLParagraphElement,
+  ActionSheetDescriptionProps
+>(withStateProps(Primitive.p), "description");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ActionSheetListProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const ActionSheetList = withContext<HTMLDivElement, ActionSheetListProps>(
+  withStateProps(Primitive.div),
+  "list",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ActionSheetItemProps
+  extends PrimitiveProps,
+    ActionSheetItemVariantProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+export const ActionSheetItem = withItemProvider<HTMLButtonElement, ActionSheetItemProps>(
+  withStateProps(Primitive.button),
+  "root",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ActionSheetItemLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {
+  asChild?: boolean;
+}
+
+export const ActionSheetItemLabel = withItemContext<HTMLSpanElement, ActionSheetItemLabelProps>(
+  withStateProps(Primitive.span),
+  "label",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ActionSheetCloseButtonProps
+  extends DialogPrimitive.CloseButtonProps,
+    ActionSheetCloseButtonVariantProps {}
+
+export const ActionSheetCloseButton = withCloseButtonProvider<
+  HTMLDivElement,
+  ActionSheetCloseButtonProps
+>(DialogPrimitive.CloseButton, "root");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ActionSheetCloseButtonLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const ActionSheetCloseButtonLabel = withCloseButtonContext<
+  HTMLSpanElement,
+  ActionSheetCloseButtonLabelProps
+>(Primitive.span, "label");