@seed-design/figma 0.0.2 → 0.0.5

package/src/codegen/domain/seed-component/transformers/app-bar.ts

@@ -0,0 +1,186 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { match } from "ts-pattern";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { findAll, findAllInstances, findOne } from "../../../../utils/figma-node";
+import type { NormalizedInstanceNode, NormalizedTextNode } from "../../../../normalizer";
+import type {
+  AppBarLeftProperties,
+  AppBarMainProperties,
+  AppBarProperties,
+  AppBarRightProperties,
+} from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+const APP_BAR_MAIN_KEY = "336b49b26c3933485d87cc460b06c390976ea58e";
+const createAppBarMainTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<AppBarMainProperties>(
+    APP_BAR_MAIN_KEY,
+    ({ componentProperties: props }) => {
+      const { title, subtitle, layout } = match(props.Type.value)
+        .with("Title", () => ({
+          title: props["Title#16944:0"].value,
+          subtitle: undefined,
+          layout: undefined,
+        }))
+        .with("Title-Subtitle", () => ({
+          title: props["Title#16944:0"].value,
+          subtitle: props["Subtitle#16958:9"].value,
+          layout: "withSubtitle",
+        }))
+        .otherwise(() => ({
+          title: undefined,
+          subtitle: undefined,
+          layout: undefined,
+        }));
+
+      const commonProps = {
+        title,
+        subtitle,
+        layout,
+      };
+
+      return createElement(
+        "AppBarMain",
+        commonProps,
+        undefined,
+        title === undefined ? "Title을 제공해주세요." : undefined,
+      );
+    },
+  );
+
+const APP_BAR_LEFT_KEY = "e5d2e47052a22395db79f195a0991a570dc1b6c9";
+const createAppBarLeftTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<AppBarLeftProperties>(APP_BAR_LEFT_KEY, (node) => {
+    const props = node.componentProperties;
+
+    const children = (() => {
+      switch (props.Action.value) {
+        case "Back":
+          return createElement("AppBarBackButton", undefined);
+        case "Close":
+          return createElement("AppBarCloseButton", undefined);
+        case "Other": {
+          const iconNode = findOne(
+            node,
+            (child) => child.type === "INSTANCE" && child.name === "Icon",
+          ) as NormalizedInstanceNode | null;
+
+          const iconComponentKey = iconNode?.componentKey ?? undefined;
+
+          return createElement(
+            "AppBarIconButton",
+            undefined,
+            iconComponentKey
+              ? createElement(ctx.iconService.createIconTagName(iconComponentKey))
+              : undefined,
+            iconComponentKey === undefined
+              ? "아이콘과, aria-label 또는 aria-labelledby를 제공해주세요."
+              : "aria-label 또는 aria-labelledby를 제공해주세요.",
+          );
+        }
+      }
+    })();
+
+    return createElement("AppBarLeft", undefined, children);
+  });
+
+const APP_BAR_RIGHT_KEY = "9e157fc2d1f89ffee938a5bc62f4a58064fec44e";
+const createAppBarRightTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<AppBarRightProperties>(APP_BAR_RIGHT_KEY, (node) => {
+    const props = node.componentProperties;
+
+    const children = (() => {
+      switch (props.Type.value) {
+        case "1 Text": {
+          const textNode = findOne(
+            node,
+            (child) => child.type === "TEXT",
+          ) as NormalizedTextNode | null;
+
+          return textNode?.characters;
+        }
+        default: {
+          const iconNodes = findAll(
+            node,
+            (child) => child.type === "INSTANCE" && child.name === "Icon",
+          ) as NormalizedInstanceNode[];
+
+          const iconComponentKeys = iconNodes.map((iconNode) => iconNode.componentKey);
+
+          return iconComponentKeys.map((iconComponentKey) =>
+            createElement(
+              "AppBarIconButton",
+              undefined,
+              iconComponentKey
+                ? createElement(ctx.iconService.createIconTagName(iconComponentKey))
+                : undefined,
+              iconComponentKey === undefined
+                ? "아이콘과, aria-label 또는 aria-labelledby를 제공해주세요."
+                : "aria-label 또는 aria-labelledby를 제공해주세요.",
+            ),
+          );
+        }
+      }
+    })();
+
+    return createElement("AppBarRight", undefined, children);
+  });
+
+export const createAppBarTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const appBarMainTransformer = createAppBarMainTransformer(ctx);
+  const appBarLeftTransformer = createAppBarLeftTransformer(ctx);
+  const appBarRightTransformer = createAppBarRightTransformer(ctx);
+
+  return defineComponentTransformer<AppBarProperties>(metadata.standardNavigation.key, (node) => {
+    const props = node.componentProperties;
+
+    const theme = (() => {
+      switch (props.OS.value) {
+        case "Android":
+          return "android";
+        case "iOS":
+          return "cupertino";
+      }
+    })();
+
+    const tone = (() => {
+      switch (props.Variant.value) {
+        case "Layer Default":
+          return "layer";
+        case "Transparent":
+          return "transparent";
+      }
+    })();
+
+    const mainNode = findAllInstances<AppBarMainProperties>({
+      key: appBarMainTransformer.key,
+      node,
+    });
+    const onlyMainNode = mainNode.length === 1 ? mainNode[0] : undefined;
+    const main = onlyMainNode ? appBarMainTransformer.transform(onlyMainNode) : undefined;
+
+    const leftNode = findAllInstances<AppBarLeftProperties>({
+      key: appBarLeftTransformer.key,
+      node,
+    });
+    const onlyLeftNode = leftNode.length === 1 ? leftNode[0] : undefined;
+    const left = onlyLeftNode ? appBarLeftTransformer.transform(onlyLeftNode) : undefined;
+
+    const rightNode = findAllInstances<AppBarRightProperties>({
+      key: appBarRightTransformer.key,
+      node,
+    });
+    const onlyRightNode = rightNode.length === 1 ? rightNode[0] : undefined;
+    const right = onlyRightNode ? appBarRightTransformer.transform(onlyRightNode) : undefined;
+
+    return createElement(
+      "AppBar",
+      { theme, tone },
+      [left, main, right].filter(Boolean),
+      tone === "transparent"
+        ? `<AppScreen layerOffsetTop="none">으로 상단 패딩을 제거할 수 있습니다.`
+        : undefined,
+    );
+  });
+};

package/src/codegen/domain/seed-component/transformers/avatar-stack.ts

@@ -0,0 +1,30 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { findAllInstances } from "../../../../utils/figma-node";
+import type { AvatarProperties, AvatarStackProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+import { createAvatarTransformer } from "./avatar";
+
+export const createAvatarStackTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const avatarTransformer = createAvatarTransformer(ctx);
+
+  return defineComponentTransformer<AvatarStackProperties>(metadata.avatarStack.key, (node) => {
+    const avatarNodes = findAllInstances<AvatarProperties>({
+      node,
+      key: avatarTransformer.key,
+    });
+
+    const { componentProperties: props } = node;
+
+    const commonProps = {
+      size: props.Size.value,
+      // TODO: 구현될 예정
+      // topItem: camelCase(props["Top Item"].value),
+    };
+
+    const avatarStackChildren = avatarNodes.map(avatarTransformer.transform);
+
+    return createElement("AvatarStack", commonProps, avatarStackChildren);
+  });
+};

package/src/codegen/domain/seed-component/transformers/avatar.ts

@@ -0,0 +1,39 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { findAllInstances } from "../../../../utils/figma-node";
+import type { AvatarProperties, IdentityPlaceholderProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+import { createIdentityPlaceholderTransformer } from "./identity-placeholder";
+
+export const createAvatarTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const identityPlaceholderTransformer = createIdentityPlaceholderTransformer(ctx);
+
+  return defineComponentTransformer<AvatarProperties>(metadata.avatar.key, (node) => {
+    const [placeholder] = findAllInstances<IdentityPlaceholderProperties>({
+      node,
+      key: identityPlaceholderTransformer.key,
+    });
+    const { componentProperties: props } = node;
+
+    const avatarHasSrc = props["Show Image#71850:57"].value;
+
+    const commonProps = {
+      ...(avatarHasSrc && {
+        // Placeholder
+        src: `https://placehold.co/${props.Size.value}x${props.Size.value}`,
+      }),
+      ...(placeholder && {
+        fallback: identityPlaceholderTransformer.transform(placeholder),
+      }),
+      size: props.Size.value,
+    };
+
+    return createElement(
+      "Avatar",
+      commonProps,
+      props["Show Badge#1398:26"].value ? createElement("AvatarBadge", {}) : undefined,
+      avatarHasSrc ? "alt 텍스트를 제공해야 합니다." : undefined,
+    );
+  });
+};

package/src/codegen/domain/seed-component/transformers/badge.ts

@@ -0,0 +1,22 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { handleSizeProp } from "../size";
+import type { BadgeProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createBadgeTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<BadgeProperties>(
+    metadata.badge.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        size: handleSizeProp(props.Size.value),
+        tone: camelCase(props.Tone.value),
+        variant: camelCase(props.Variant.value),
+        shape: camelCase(props.Shape.value),
+      };
+
+      return createElement("Badge", commonProps, props["Label#1584:0"].value);
+    },
+  );

package/src/codegen/domain/seed-component/transformers/callout.ts

@@ -0,0 +1,90 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import type { NormalizedTextNode } from "../../../../normalizer";
+import type { CalloutProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createCalloutTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<CalloutProperties>(
+    metadata.callout.key,
+    ({ componentProperties: props, children }) => {
+      const tag = (() => {
+        switch (props.Interaction.value) {
+          case "Default":
+            return "Callout";
+          case "Actionable":
+            return "ActionableCallout";
+          case "Dismissible":
+            return "DismissibleCallout";
+          default:
+            return "Callout";
+        }
+      })();
+
+      const textNode = children.find((child) => child.type === "TEXT") as NormalizedTextNode | null;
+
+      if (!textNode) {
+        return createElement(tag, undefined, undefined, "내용을 제공해주세요.");
+      }
+
+      const slices = textNode.segments;
+
+      let title: string | undefined;
+      let description: string | undefined;
+      let linkLabel: string | undefined;
+
+      switch (slices.length) {
+        case 1: {
+          description = slices[0]?.characters.trim();
+
+          break;
+        }
+        case 2: {
+          const firstSlice = slices[0];
+          const secondSlice = slices[1];
+
+          if (firstSlice?.style.fontWeight === 700) {
+            title = firstSlice?.characters.trim();
+            description = secondSlice?.characters.trim();
+            break;
+          }
+
+          description = firstSlice?.characters.trim();
+
+          if (tag !== "ActionableCallout") {
+            linkLabel = secondSlice?.characters.trim();
+          }
+
+          break;
+        }
+        case 3: {
+          title = slices[0]?.characters.trim();
+          description = slices[1]?.characters.trim();
+
+          if (tag !== "ActionableCallout") {
+            linkLabel = slices[2]?.characters.trim();
+          }
+
+          break;
+        }
+      }
+
+      const commonProps = {
+        tone: camelCase(props.Tone.value),
+        title,
+        description,
+        linkProps: {
+          children: linkLabel,
+        },
+        ...(props["Icon#12598:210"].value && {
+          prefixIcon: createElement(
+            ctx.iconService.createIconTagName(props["Icon#12598:210"].componentKey),
+          ),
+        }),
+      };
+
+      return createElement(tag, commonProps);
+    },
+  );

package/src/codegen/domain/seed-component/transformers/checkbox.ts

@@ -0,0 +1,34 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { handleSizeProp } from "../size";
+import type { CheckboxProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createCheckboxTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<CheckboxProperties>(
+    metadata.checkbox.key,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const commonProps = {
+        label: props["Label#49990:0"].value,
+        weight: camelCase(props.Weight.value),
+        variant: camelCase(props.Shape.value),
+        size: handleSizeProp(props.Size.value),
+        ...(states.includes("Selected") && {
+          defaultChecked: true,
+        }),
+        ...(states.includes("Indeterminate") && {
+          defaultChecked: true,
+          indeterminate: true,
+        }),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+      };
+
+      return createElement("Checkbox", commonProps);
+    },
+  );

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

@@ -0,0 +1,55 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { findAllInstances } from "../../../../utils/figma-node";
+import type { ChipTabsItemProperties, ChipTabsProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+const CHIP_TABS_ITEM_KEY = "fa80168b02051fbb0ba032238bd76d840dbe2e15";
+const createChipTabsItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<ChipTabsItemProperties>(
+    CHIP_TABS_ITEM_KEY,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const commonProps = {
+        value: props["Label#8876:0"].value,
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+      };
+
+      return createElement("ChipTabsTrigger", commonProps, props["Label#8876:0"].value);
+    },
+  );
+
+export const createChipTabsTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const chipTabsItemTransformer = createChipTabsItemTransformer(ctx);
+
+  return defineComponentTransformer<ChipTabsProperties>(metadata.chipTablist.key, (node) => {
+    const chipTabsItems = findAllInstances<ChipTabsItemProperties>({
+      node,
+      key: chipTabsItemTransformer.key,
+    });
+
+    const selectedChipTabsItem = chipTabsItems.find((chipTabsItem) =>
+      chipTabsItem.componentProperties.State.value.split("-").includes("Selected"),
+    );
+
+    const chipTabsList = createElement(
+      "ChipTabsList",
+      undefined,
+      chipTabsItems.map(chipTabsItemTransformer.transform),
+    );
+
+    const commonProps = {
+      variant: camelCase(node.componentProperties.Variant.value),
+      ...(selectedChipTabsItem && {
+        defaultValue: selectedChipTabsItem.componentProperties["Label#8876:0"].value,
+      }),
+    };
+
+    return createElement("ChipTabs", commonProps, chipTabsList);
+  });
+};

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

@@ -0,0 +1,86 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { match } from "ts-pattern";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { handleSizeProp } from "../size";
+import type { ControlChipProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createControlChipTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<ControlChipProperties>(
+    metadata.controlChip.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#8722:41"].componentKey),
+              ),
+            }),
+          ],
+        }))
+        .with("Icon First", () => ({
+          layout: "withText",
+          children: [
+            createElement("PrefixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Prefix Icon#8722: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#8722:82"].componentKey),
+              ),
+            }),
+          ],
+        }))
+        .with("Icon Both", () => ({
+          layout: "withText",
+          children: [
+            createElement("PrefixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Prefix Icon#8722:0"].componentKey),
+              ),
+            }),
+            props["Label#7185:0"].value,
+            createElement("SuffixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Suffix Icon#8722:82"].componentKey),
+              ),
+            }),
+          ],
+        }))
+        .with("Text Only", () => ({
+          layout: "withText",
+          children: props["Label#7185:0"].value,
+        }))
+        .exhaustive();
+
+      const commonProps = {
+        size: handleSizeProp(props.Size.value),
+        layout,
+        ...(states.includes("Selected") && {
+          defaultChecked: true,
+        }),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(props["Show Count#7185:42"].value && {
+          count: Number(props["Count#7185:21"].value),
+        }),
+      };
+
+      return createElement("ControlChip.Toggle", commonProps, children);
+    },
+  );

package/src/codegen/domain/seed-component/transformers/error-state.ts

@@ -0,0 +1,39 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { findAllInstances } from "../../../../utils/figma-node";
+import type { ActionButtonProperties, ErrorStateProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+import { createActionButtonTransformer } from "./action-button";
+
+export const createErrorStateTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const actionButtonTransformer = createActionButtonTransformer(ctx);
+
+  return defineComponentTransformer<ErrorStateProperties>(metadata.errorState.key, (node) => {
+    const props = node.componentProperties;
+
+    const [actionButtonNode] = findAllInstances<ActionButtonProperties>({
+      node,
+      key: actionButtonTransformer.key,
+    });
+
+    const commonProps = {
+      variant: camelCase(props.Variant.value),
+      ...(props.Layout.value === "With Title" && {
+        title: props["Title#16237:0"].value,
+      }),
+      description: props["Description#16237:5"].value,
+      ...(actionButtonNode && {
+        primaryActionProps: {
+          children: actionButtonTransformer.transform(actionButtonNode).children[0],
+        },
+        secondaryActionProps: {
+          children: props["Secondary Action Label#17042:0"].value,
+        },
+      }),
+    };
+
+    return createElement("ErrorState", commonProps);
+  });
+};

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

@@ -0,0 +1,99 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { findAllInstances } from "../../../../utils/figma-node";
+import type {
+  ExtendedActionSheetGroupProperties,
+  ExtendedActionSheetItemProperties,
+  ExtendedActionSheetProperties,
+} from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+const EXTENDED_ACTION_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
+const createExtendedActionSheetItemTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<ExtendedActionSheetItemProperties>(
+    EXTENDED_ACTION_SHEET_ITEM_KEY,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const commonProps = {
+        tone: camelCase(props.Tone.value),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+      };
+
+      return createElement("ExtendedActionSheetItem", commonProps, [
+        props["Show Prefix Icon#17043:5"].value
+          ? createElement("PrefixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Prefix Icon#55948:0"].componentKey),
+              ),
+            })
+          : undefined,
+        props["Label#55905:8"].value,
+      ]);
+    },
+  );
+
+const EXTENDED_ACTION_SHEET_GROUP_KEY = "2a504a1c6b7810d5e652862dcba2cb7048f9eb16";
+const createExtendedActionSheetGroupTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const extendedActionSheetItemTransformer = createExtendedActionSheetItemTransformer(ctx);
+
+  return defineComponentTransformer<ExtendedActionSheetGroupProperties>(
+    EXTENDED_ACTION_SHEET_GROUP_KEY,
+    (node) => {
+      const items = findAllInstances<ExtendedActionSheetItemProperties>({
+        node,
+        key: extendedActionSheetItemTransformer.key,
+      });
+
+      const contentChildren = items.map(extendedActionSheetItemTransformer.transform);
+
+      return createElement("ExtendedActionSheetGroup", undefined, contentChildren);
+    },
+  );
+};
+
+export const createExtendedActionSheetTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const extendedActionSheetGroupTransformer = createExtendedActionSheetGroupTransformer(ctx);
+
+  return defineComponentTransformer<ExtendedActionSheetProperties>(
+    metadata.extendedActionSheet.key,
+    (node) => {
+      const { componentProperties: props } = node;
+
+      const groups = findAllInstances<ExtendedActionSheetGroupProperties>({
+        node,
+        key: extendedActionSheetGroupTransformer.key,
+      });
+
+      const contentChildren = groups.map(extendedActionSheetGroupTransformer.transform);
+
+      const title = props["Show Title#17043:12"].value ? props["Title#14599:0"].value : undefined;
+
+      const content = createElement(
+        "ExtendedActionSheetContent",
+        { title },
+        contentChildren,
+        title
+          ? undefined
+          : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+      );
+
+      const trigger = createElement(
+        "ExtendedActionSheetTrigger",
+        { asChild: true },
+        createElement(
+          "ActionButton",
+          undefined,
+          "열기",
+          "ExtendedActionSheet을 여는 요소를 제공해주세요.",
+        ),
+      );
+
+      return createElement("ExtendedActionSheet", undefined, [trigger, content]);
+    },
+  );
+};