@seed-design/figma 0.0.4 → 0.0.5

package/src/codegen/domain/props/radius-props.service.ts

@@ -0,0 +1,105 @@
+import { definePropsTransformer, type PropsTransformer } from "@/codegen/core";
+import type { NormalizedCornerTrait, NormalizedIsLayerTrait } from "@/normalizer";
+import { objectEntries } from "@/utils/common";
+import { toCssPixel } from "@/utils/css";
+import type { VariableService } from "../variable.service";
+
+type RadiusTrait = NormalizedCornerTrait & NormalizedIsLayerTrait;
+
+export interface RadiusPropsService<T extends Record<string, any>> {
+  transform: PropsTransformer<RadiusTrait, T>;
+}
+
+type RadiusPropsKey =
+  | "borderRadius"
+  | "borderTopLeftRadius"
+  | "borderTopRightRadius"
+  | "borderBottomLeftRadius"
+  | "borderBottomRightRadius";
+
+type ApperancePropHandler = (props: RadiusTrait) => string | number | boolean | undefined;
+
+export type SeedRadiusProps = Partial<Record<RadiusPropsKey, string | number | boolean>>;
+
+export function createRadiusPropsService({
+  variableService,
+  shouldInferVariableName,
+}: {
+  variableService: VariableService;
+  shouldInferVariableName: boolean;
+}): RadiusPropsService<SeedRadiusProps> {
+  const getLayoutVariableName = (id: string) => variableService.getVariableName(id);
+  const inferRadiusVariableName = (value?: number) => {
+    if (value === undefined) {
+      return undefined;
+    }
+
+    if (shouldInferVariableName) {
+      const inferred = variableService.inferVariableName("CORNER_RADIUS", value);
+      if (inferred) {
+        return inferred;
+      }
+    }
+
+    return value === 0 ? 0 : toCssPixel(value);
+  };
+
+  const radiusPropHandlers: Record<RadiusPropsKey, ApperancePropHandler> = {
+    borderRadius: ({ cornerRadius, boundVariables }) => {
+      // If all corner radii are the same, use the first one
+      if (
+        cornerRadius &&
+        boundVariables?.bottomLeftRadius === boundVariables?.bottomRightRadius &&
+        boundVariables?.bottomLeftRadius === boundVariables?.topLeftRadius &&
+        boundVariables?.bottomLeftRadius === boundVariables?.topRightRadius
+      ) {
+        return boundVariables?.bottomLeftRadius
+          ? getLayoutVariableName(boundVariables.bottomLeftRadius.id)
+          : inferRadiusVariableName(cornerRadius);
+      }
+
+      // TODO: handle individual corner radii
+      return undefined;
+    },
+    borderTopLeftRadius: ({ rectangleCornerRadii, boundVariables }) =>
+      boundVariables?.topLeftRadius
+        ? getLayoutVariableName(boundVariables.topLeftRadius.id)
+        : inferRadiusVariableName(rectangleCornerRadii?.[0]),
+    borderTopRightRadius: ({ rectangleCornerRadii, boundVariables }) =>
+      boundVariables?.topRightRadius
+        ? getLayoutVariableName(boundVariables.topRightRadius.id)
+        : inferRadiusVariableName(rectangleCornerRadii?.[1]),
+    borderBottomLeftRadius: ({ rectangleCornerRadii, boundVariables }) =>
+      boundVariables?.bottomLeftRadius
+        ? getLayoutVariableName(boundVariables.bottomLeftRadius.id)
+        : inferRadiusVariableName(rectangleCornerRadii?.[2]),
+    borderBottomRightRadius: ({ rectangleCornerRadii, boundVariables }) =>
+      boundVariables?.bottomRightRadius
+        ? getLayoutVariableName(boundVariables.bottomRightRadius.id)
+        : inferRadiusVariableName(rectangleCornerRadii?.[3]),
+  };
+
+  // Default values
+  const radiusPropDefaults: SeedRadiusProps = {
+    borderRadius: 0,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  };
+
+  const transform = definePropsTransformer((node: RadiusTrait) => {
+    const result: SeedRadiusProps = {};
+
+    for (const [prop, handler] of objectEntries(radiusPropHandlers)) {
+      const value = handler(node);
+      if (value !== undefined && value !== radiusPropDefaults[prop]) {
+        result[prop] = value;
+      }
+    }
+
+    return result;
+  });
+
+  return { transform };
+}

package/src/codegen/domain/props/self-layout-props.service.ts

@@ -0,0 +1,127 @@
+import { definePropsTransformer, type PropsTransformer } from "@/codegen/core";
+import type {
+  NormalizedHasFramePropertiesTrait,
+  NormalizedHasLayoutTrait,
+  NormalizedIsLayerTrait,
+} from "@/normalizer";
+import { objectEntries } from "@/utils/common";
+import { toCssPixel } from "@/utils/css";
+import type { VariableService } from "../variable.service";
+
+type SelfLayoutTrait = NormalizedIsLayerTrait &
+  NormalizedHasLayoutTrait &
+  NormalizedHasFramePropertiesTrait;
+
+export interface SelfLayoutPropsService<T extends Record<string, any>> {
+  transform: PropsTransformer<SelfLayoutTrait, T>;
+}
+
+type LayoutPropsKey =
+  | "flexGrow"
+  | "alignSelf"
+  | "width"
+  | "height"
+  | "minWidth"
+  | "minHeight"
+  | "maxWidth"
+  | "maxHeight";
+
+type LayoutPropHandler = (props: SelfLayoutTrait) => string | number | boolean | undefined;
+
+export type SeedSelfLayoutProps = Partial<Record<LayoutPropsKey, string | number | boolean>>;
+
+export function createSelfLayoutPropsService({
+  variableService,
+  shouldInferVariableName,
+}: {
+  variableService: VariableService;
+  shouldInferVariableName: boolean;
+}): SelfLayoutPropsService<SeedSelfLayoutProps> {
+  const getLayoutVariableName = (id: string) => variableService.getVariableName(id);
+  const inferSizeVariableName = (value?: number) => {
+    if (value === undefined) {
+      return undefined;
+    }
+
+    if (shouldInferVariableName) {
+      const inferred = variableService.inferVariableName("WIDTH_HEIGHT", value);
+      if (inferred) {
+        return inferred;
+      }
+    }
+
+    return value === 0 ? 0 : toCssPixel(value);
+  };
+
+  const layoutPropHandlers: Record<LayoutPropsKey, LayoutPropHandler> = {
+    flexGrow: ({ layoutGrow }) => layoutGrow,
+    alignSelf: ({ layoutAlign }) => {
+      switch (layoutAlign) {
+        case "STRETCH":
+          return "stretch";
+        case "MIN":
+          return "flexStart";
+        case "CENTER":
+          return "center";
+        case "MAX":
+          return "flexEnd";
+      }
+    },
+    height: ({ boundVariables, layoutSizingVertical, absoluteBoundingBox }) =>
+      layoutSizingVertical === "FIXED" || layoutSizingVertical === undefined
+        ? boundVariables?.size?.y
+          ? getLayoutVariableName(boundVariables.size.y.id)
+          : inferSizeVariableName(absoluteBoundingBox?.height)
+        : undefined,
+    width: ({ boundVariables, layoutSizingHorizontal, absoluteBoundingBox }) =>
+      layoutSizingHorizontal === "FIXED" || layoutSizingHorizontal === undefined
+        ? boundVariables?.size?.x
+          ? getLayoutVariableName(boundVariables.size.x.id)
+          : inferSizeVariableName(absoluteBoundingBox?.width)
+        : undefined,
+    minHeight: ({ boundVariables, layoutSizingVertical, minHeight }) =>
+      layoutSizingVertical === "HUG"
+        ? boundVariables?.minHeight
+          ? getLayoutVariableName(boundVariables.minHeight.id)
+          : inferSizeVariableName(minHeight)
+        : undefined,
+    maxHeight: ({ boundVariables, layoutSizingVertical, maxHeight }) =>
+      layoutSizingVertical === "HUG"
+        ? boundVariables?.maxHeight
+          ? getLayoutVariableName(boundVariables.maxHeight.id)
+          : inferSizeVariableName(maxHeight)
+        : undefined,
+    minWidth: ({ boundVariables, layoutSizingHorizontal, minWidth }) =>
+      layoutSizingHorizontal === "HUG"
+        ? boundVariables?.minWidth
+          ? getLayoutVariableName(boundVariables.minWidth.id)
+          : inferSizeVariableName(minWidth)
+        : undefined,
+    maxWidth: ({ boundVariables, layoutSizingHorizontal, maxWidth }) =>
+      layoutSizingHorizontal === "HUG"
+        ? boundVariables?.maxWidth
+          ? getLayoutVariableName(boundVariables.maxWidth.id)
+          : inferSizeVariableName(maxWidth)
+        : undefined,
+  };
+
+  // Default values
+  const layoutPropDefaults: SeedSelfLayoutProps = {
+    flexGrow: 0,
+  };
+
+  const transform = definePropsTransformer((node: SelfLayoutTrait) => {
+    const result: SeedSelfLayoutProps = {};
+
+    for (const [prop, handler] of objectEntries(layoutPropHandlers)) {
+      const value = handler(node);
+      if (value !== undefined && value !== layoutPropDefaults[prop]) {
+        result[prop] = value;
+      }
+    }
+
+    return result;
+  });
+
+  return { transform };
+}

package/src/codegen/domain/props/stroke-props.service.ts

@@ -0,0 +1,45 @@
+import { definePropsTransformer, type PropsTransformer } from "@/codegen/core";
+import type { NormalizedHasGeometryTrait, NormalizedIsLayerTrait } from "@/normalizer";
+import type { VariableService } from "../variable.service";
+
+type StrokeTrait = NormalizedIsLayerTrait & NormalizedHasGeometryTrait;
+
+export interface StrokePropsService<T extends Record<string, any>> {
+  transform: PropsTransformer<StrokeTrait, T>;
+}
+
+export interface SeedFrameStrokeProps {
+  borderWidth?: number;
+  borderColor?: string;
+}
+
+export function createFrameStrokePropsService({
+  variableService,
+}: { variableService: VariableService }): StrokePropsService<SeedFrameStrokeProps> {
+  const transform = definePropsTransformer((node: StrokeTrait) => {
+    const strokes = node.strokes;
+    if (strokes === undefined || strokes.length === 0) {
+      return {};
+    }
+
+    const stroke = strokes[0];
+    if (!stroke || ("visible" in stroke && !stroke.visible) || stroke.type !== "SOLID") {
+      return {};
+    }
+
+    if (node.boundVariables?.strokes?.length === 1) {
+      return {
+        borderWidth: node.strokeWeight as number,
+        borderColor: variableService.getVariableName(node.boundVariables.strokes[0]!.id),
+      };
+    }
+
+    const color = stroke.color;
+    return {
+      borderWidth: node.strokeWeight as number,
+      borderColor: `rgba(${color.r * 255}, ${color.g * 255}, ${color.b * 255}, ${stroke.opacity})`,
+    };
+  });
+
+  return { transform };
+}

package/src/codegen/domain/props/type-style-props.service.ts

@@ -0,0 +1,31 @@
+import { definePropsTransformer, type PropsTransformer } from "@/codegen/core";
+import type { NormalizedTextNode } from "@/normalizer";
+import type { VariableService } from "../variable.service";
+
+export interface TypeStylePropsService {
+  transform: PropsTransformer<NormalizedTextNode>;
+}
+
+export function createFrameTypeStylePropsService({
+  variableService,
+}: { variableService: VariableService }) {
+  const transform = definePropsTransformer((node: NormalizedTextNode) => {
+    const fontSizeBoundVariables = node.boundVariables?.fontSize?.[0];
+    const fontStyleBoundVariables = node.boundVariables?.fontStyle?.[0];
+    const lineHeightBoundVariables = node.boundVariables?.lineHeight?.[0];
+
+    return {
+      fontSize: fontSizeBoundVariables
+        ? variableService.getVariableName(fontSizeBoundVariables.id)
+        : undefined,
+      fontWeight: fontStyleBoundVariables
+        ? variableService.getVariableName(fontStyleBoundVariables.id)
+        : undefined,
+      lineHeight: lineHeightBoundVariables
+        ? variableService.getVariableName(lineHeightBoundVariables.id)
+        : undefined,
+    };
+  });
+
+  return { transform } satisfies TypeStylePropsService;
+}

package/src/codegen/domain/rectangle.service.ts

@@ -0,0 +1,31 @@
+import type { NormalizedRectangleNode } from "@/normalizer";
+import { createElement, defineElementTransformer, type ElementTransformer } from "../core";
+import type {
+  SeedSelfLayoutProps,
+  SelfLayoutPropsService,
+} from "./props/self-layout-props.service";
+
+export interface RectangleService {
+  transform: ElementTransformer<NormalizedRectangleNode>;
+}
+
+export interface SeedRectangleServiceDeps {
+  selfLayoutPropsService: SelfLayoutPropsService<SeedSelfLayoutProps>;
+}
+
+export function createSeedRectangleService({
+  selfLayoutPropsService,
+}: SeedRectangleServiceDeps): RectangleService {
+  const transform = defineElementTransformer((node: NormalizedRectangleNode, traverse) => {
+    return createElement(
+      "Box",
+      { ...selfLayoutPropsService.transform(node, traverse), background: "palette.gray200" },
+      undefined,
+      "Rectangle Node Placeholder",
+    );
+  });
+
+  return {
+    transform,
+  };
+}

package/src/codegen/domain/seed-component/deps.interface.ts

@@ -0,0 +1,6 @@
+import type { IconService } from "../icon.service";
+import type { VariableService } from "../variable.service";
+export interface SeedComponentTransformerDeps {
+  iconService: IconService;
+  variableService: VariableService;
+}

package/src/codegen/domain/seed-component/index.ts

@@ -0,0 +1,75 @@
+import type { ComponentTransformer } from "@/codegen/core";
+import type { SeedComponentTransformerDeps } from "./deps.interface";
+import { createActionButtonTransformer } from "./transformers/action-button";
+import { createActionChipTransformer } from "./transformers/action-chip";
+import { createActionSheetTransformer } from "./transformers/action-sheet";
+import { createAppBarTransformer } from "./transformers/app-bar";
+import { createAvatarTransformer } from "./transformers/avatar";
+import { createAvatarStackTransformer } from "./transformers/avatar-stack";
+import { createBadgeTransformer } from "./transformers/badge";
+import { createCalloutTransformer } from "./transformers/callout";
+import { createCheckboxTransformer } from "./transformers/checkbox";
+import { createChipTabsTransformer } from "./transformers/chip-tabs";
+import { createControlChipTransformer } from "./transformers/control-chip";
+import { createErrorStateTransformer } from "./transformers/error-state";
+import { createExtendedActionSheetTransformer } from "./transformers/extended-action-sheet";
+import { createExtendedFabTransformer } from "./transformers/extended-fab";
+import { createFabTransformer } from "./transformers/fab";
+import { createHelpBubbleTransformer } from "./transformers/help-bubble";
+import { createIdentityPlaceholderTransformer } from "./transformers/identity-placeholder";
+import { createInlineBannerTransformer } from "./transformers/inline-banner";
+import { createMannerTempBadgeTransformer } from "./transformers/manner-temp-badge";
+import { createMultilineTextFieldTransformer } from "./transformers/multiline-text-field";
+import { createProgressCircleTransformer } from "./transformers/progress-circle";
+import { createReactionButtonTransformer } from "./transformers/reaction-button";
+import { createSegmentedControlTransformer } from "./transformers/segmented-control";
+import {
+  createSelectBoxGroupTransformer,
+  createSelectBoxTransformer,
+} from "./transformers/select-box";
+import { createSkeletonTransformer } from "./transformers/skeleton";
+import { createSnackbarTransformer } from "./transformers/snackbar";
+import { createSwitchTransformer } from "./transformers/switch";
+import { createTabsTransformer } from "./transformers/tabs";
+import { createTextButtonTransformer } from "./transformers/text-button";
+import { createTextFieldTransformer } from "./transformers/text-field";
+import { createToggleButtonTransformer } from "./transformers/toggle-button";
+
+export type { SeedComponentTransformerDeps };
+export type * from "./properties.type";
+
+export const createSeedComponentTransformers = (ctx: SeedComponentTransformerDeps) =>
+  [
+    createActionButtonTransformer(ctx),
+    createActionChipTransformer(ctx),
+    createActionSheetTransformer(ctx),
+    createAppBarTransformer(ctx),
+    createAvatarTransformer(ctx),
+    createAvatarStackTransformer(ctx),
+    createBadgeTransformer(ctx),
+    createCalloutTransformer(ctx),
+    createCheckboxTransformer(ctx),
+    createChipTabsTransformer(ctx),
+    createControlChipTransformer(ctx),
+    createErrorStateTransformer(ctx),
+    createExtendedActionSheetTransformer(ctx),
+    createExtendedFabTransformer(ctx),
+    createFabTransformer(ctx),
+    createHelpBubbleTransformer(ctx),
+    createIdentityPlaceholderTransformer(ctx),
+    createInlineBannerTransformer(ctx),
+    createMannerTempBadgeTransformer(ctx),
+    createMultilineTextFieldTransformer(ctx),
+    createProgressCircleTransformer(ctx),
+    createReactionButtonTransformer(ctx),
+    createSegmentedControlTransformer(ctx),
+    createSelectBoxGroupTransformer(ctx),
+    createSelectBoxTransformer(ctx),
+    createSkeletonTransformer(ctx),
+    createSnackbarTransformer(ctx),
+    createSwitchTransformer(ctx),
+    createTabsTransformer(ctx),
+    createTextButtonTransformer(ctx),
+    createTextFieldTransformer(ctx),
+    createToggleButtonTransformer(ctx),
+  ] as Array<ComponentTransformer>;

package/src/{component/type.ts → codegen/domain/seed-component/properties.type.ts}

@@ -1,5 +1,5 @@
-import type { InferFromDefinition } from "./type-helper";
-import type * as metadata from "../data/__generated__/component-sets";
+import type { InferFromDefinition } from "../../core/component";
+import type * as metadata from "../../data/__generated__/component-sets";
 
 export type ActionButtonProperties = InferFromDefinition<
   typeof metadata.actionButton.componentPropertyDefinitions

package/src/{component/properties.ts → codegen/domain/seed-component/size.ts}

@@ -1,8 +1,10 @@
+// TODO: move this file to relevant directory
+
 import { camelCase } from "change-case";
 
-type Size = "XSmall" | "Small" | "Medium" | "Large" | "XLarge" | ({} & string);
+type SizeProp = "XSmall" | "Small" | "Medium" | "Large" | "XLarge" | ({} & string);
 
-export function handleSize(size: Size) {
+export function handleSizeProp(size: SizeProp) {
   switch (size) {
     case "XSmall":
       return "xsmall";

package/src/codegen/domain/seed-component/transformers/action-button.ts

@@ -0,0 +1,69 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import { match } from "ts-pattern";
+import { createElement } from "../../../core/jsx";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { handleSizeProp } from "../size";
+import type { ActionButtonProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createActionButtonTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<ActionButtonProperties>(
+    metadata.actionButton.key,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const { layout, children } = match(props.Layout.value)
+        .with("Icon Only", () => ({
+          layout: "iconOnly",
+          children: [
+            createElement("Icon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Icon#7574:0"].componentKey),
+              ),
+            }),
+          ],
+        }))
+        .with("Icon First", () => ({
+          layout: "withText",
+          children: [
+            createElement("PrefixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Prefix Icon#5987:305"].componentKey),
+              ),
+            }),
+            props["Label#5987:61"].value,
+          ],
+        }))
+        .with("Icon Last", () => ({
+          layout: "withText",
+          children: [
+            props["Label#5987:61"].value,
+            createElement("SuffixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Suffix Icon#5987:244"].componentKey),
+              ),
+            }),
+          ],
+        }))
+        .with("Text Only", () => ({
+          layout: "withText",
+          children: props["Label#5987:61"].value,
+        }))
+        .exhaustive();
+
+      const commonProps = {
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(states.includes("Loading") && {
+          loading: true,
+        }),
+        size: handleSizeProp(props.Size.value),
+        variant: camelCase(props.Variant.value),
+        layout,
+      };
+
+      return createElement("ActionButton", commonProps, children);
+    },
+  );

package/src/codegen/domain/seed-component/transformers/action-chip.ts

@@ -0,0 +1,82 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { match } from "ts-pattern";
+import { createElement } from "../../../core/jsx";
+import * as metadata from "../../../data/__generated__/component-sets";
+import type { ActionChipProperties } from "../properties.type";
+import { handleSizeProp } from "../size";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createActionChipTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<ActionChipProperties>(
+    metadata.actionChip.key,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const { layout, children } = match(props.Layout.value)
+        .with("Icon Only", () => ({
+          layout: "iconOnly",
+          children: [
+            createElement("Icon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Icon#8714:0"].componentKey),
+              ),
+            }),
+          ],
+        }))
+        .with("Icon First", () => ({
+          layout: "withText",
+          children: [
+            createElement("PrefixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Prefix Icon#8711:0"].componentKey),
+              ),
+            }),
+            props["Label#7185:0"].value,
+          ],
+        }))
+        .with("Icon Last", () => ({
+          layout: "withText",
+          children: [
+            props["Label#7185:0"].value,
+            createElement("SuffixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Suffix Icon#8711:3"].componentKey),
+              ),
+            }),
+          ],
+        }))
+        .with("Icon Both", () => ({
+          layout: "withText",
+          children: [
+            createElement("PrefixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Prefix Icon#8711:0"].componentKey),
+              ),
+            }),
+            props["Label#7185:0"].value,
+            createElement("SuffixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Suffix Icon#8711:3"].componentKey),
+              ),
+            }),
+          ],
+        }))
+        .with("Text Only", () => ({
+          layout: "withText",
+          children: props["Label#7185:0"].value,
+        }))
+        .exhaustive();
+
+      const commonProps = {
+        size: handleSizeProp(props.Size.value),
+        layout,
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(props["Show Count#7185:42"].value && {
+          count: Number(props["Count#7185:21"].value),
+        }),
+      };
+      return createElement("ActionChip", commonProps, children);
+    },
+  );

package/src/codegen/domain/seed-component/transformers/action-sheet.ts

@@ -0,0 +1,78 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import { match } from "ts-pattern";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { findAllInstances } from "../../../../utils/figma-node";
+import type { ActionSheetItemProperties, ActionSheetProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+const ACTION_SHEET_ITEM_KEY = "c3cafd3a3fdcd45fecb6971019d88eaf39a2e381";
+const createActionSheetItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<ActionSheetItemProperties>(
+    ACTION_SHEET_ITEM_KEY,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const commonProps = {
+        label: props["Label#15420:4"].value,
+        tone: camelCase(props.Tone.value),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+      };
+
+      return createElement("ActionSheetItem", commonProps);
+    },
+  );
+
+export const createActionSheetTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const actionSheetItemTransformer = createActionSheetItemTransformer(ctx);
+
+  return defineComponentTransformer<ActionSheetProperties>(metadata.actionSheet.key, (node) => {
+    const { componentProperties: props } = node;
+
+    const contentProps = match(props.Header.value)
+      .with("None", () => ({
+        title: undefined,
+        description: undefined,
+      }))
+      .with("Title Only", () => ({
+        title: props["Title#15641:37"].value,
+        description: undefined,
+      }))
+      .with("Description Only", () => ({
+        title: undefined,
+        description: props["Description#15641:70"].value,
+      }))
+      .with("Title With Description", () => ({
+        title: props["Title#15641:37"].value,
+        description: props["Description#15641:70"].value,
+      }))
+      .exhaustive();
+
+    const items = findAllInstances<ActionSheetItemProperties>({
+      node,
+      key: actionSheetItemTransformer.key,
+    });
+
+    const contentChildren = items.map(actionSheetItemTransformer.transform);
+
+    const content = createElement(
+      "ActionSheetContent",
+      contentProps,
+      contentChildren,
+      contentProps.title
+        ? ""
+        : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+    );
+
+    const trigger = createElement(
+      "ActionSheetTrigger",
+      { asChild: true },
+      createElement("ActionButton", undefined, "열기", "ActionSheet을 여는 요소를 제공해주세요."),
+    );
+
+    return createElement("ActionSheet", undefined, [trigger, content]);
+  });
+};