@seed-design/figma 1.2.0 → 1.3.2

package/src/codegen/targets/react/component/handlers/field.ts

@@ -5,22 +5,13 @@ import type {
   FieldIndicatorProperties,
 } from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
 import { createSeedReactElement } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import { match } from "ts-pattern";
 import { findAllInstances } from "@/utils/figma-node";
 import { camelCase } from "change-case";
 
-const FIELD_HEADER_KEY = "84fe2e479c3291177662e41c71af29716e48789b";
-const FIELD_INDICATOR_KEY = "a0a170973212ea0cd952b45a8acb11a92561f402";
-const FIELD_FOOTER_KEY = "ab528f3b51a6dc529bb144de1495b07deef77ffa";
-const FIELD_CHARACTER_COUNT_KEY = "25dd9a96f4bf3b866b8713f6d8deec370eebfa72";
-
-export const FIELD_KEYS = {
-  HEADER: FIELD_HEADER_KEY,
-  FOOTER: FIELD_FOOTER_KEY,
-};
-
 export type FieldHeaderProps = FieldIndicatorProps & {
   label?: string;
   labelWeight?: string;
@@ -32,22 +23,25 @@ export type FieldHeaderProps = FieldIndicatorProps & {
 export const createFieldHeaderHandler = (ctx: ComponentHandlerDeps) => {
   const indicatorHandler = createFieldIndicatorHandler(ctx);
 
-  return defineComponentHandler<FieldHeaderProperties>(FIELD_HEADER_KEY, (node, traverse) => {
-    const { componentProperties: props } = node;
-
-    const [indicator] = findAllInstances<FieldIndicatorProperties>({
-      node,
-      key: FIELD_INDICATOR_KEY,
-    });
-
-    // only returns some nice common props for Slider, TextField and more
-    return createSeedReactElement("__FieldHeader__", {
-      label: props["Label#34796:0"].value,
-      labelWeight: camelCase(props.Weight.value),
-      ...(indicator &&
-        (indicatorHandler.transform(indicator, traverse).props as FieldIndicatorProps)),
-    } satisfies FieldHeaderProps);
-  });
+  return defineComponentHandler<FieldHeaderProperties>(
+    metadata.componentFieldHeader.key,
+    (node, traverse) => {
+      const { componentProperties: props } = node;
+
+      const [indicator] = findAllInstances<FieldIndicatorProperties>({
+        node,
+        key: indicatorHandler.key,
+      });
+
+      // only returns some nice common props for Slider, TextField and more
+      return createSeedReactElement("__FieldHeader__", {
+        label: props["Label#34796:0"].value,
+        labelWeight: camelCase(props.Weight.value),
+        ...(indicator &&
+          (indicatorHandler.transform(indicator, traverse).props as FieldIndicatorProps)),
+      } satisfies FieldHeaderProps);
+    },
+  );
 };
 
 type FieldIndicatorProps = {
@@ -61,7 +55,7 @@ type FieldIndicatorProps = {
  */
 const createFieldIndicatorHandler = (_ctx: ComponentHandlerDeps) => {
   return defineComponentHandler<FieldIndicatorProperties>(
-    FIELD_INDICATOR_KEY,
+    metadata.privateComponentFieldHeaderIndicator.key,
     ({ componentProperties: props }) => {
       const { required, showRequiredIndicator, indicator } = match(props.Type.value)
         .with("Required Mark", () => ({
@@ -99,52 +93,55 @@ export type FieldFooterProps = FieldCharacterCountProps & {
 export const createFieldFooterHandler = (ctx: ComponentHandlerDeps) => {
   const characterCountHandler = createFieldCharacterCountHandler(ctx);
 
-  return defineComponentHandler<FieldFooterProperties>(FIELD_FOOTER_KEY, (node, traverse) => {
-    const { componentProperties: props } = node;
-
-    const { description, maxGraphemeCount } = match(props.Type.value)
-      .with("Description", () => ({
-        description: props["Text#2770:0"].value,
-        maxGraphemeCount: undefined,
-      }))
-      .with("Description With Character Count", () => ({
-        description: props["Text#2770:0"].value,
-        maxGraphemeCount: undefined,
-      }))
-      .with("Character Count", () => {
-        const [characterCount] = findAllInstances<FieldCharacterCountProperties>({
-          node,
-          key: FIELD_CHARACTER_COUNT_KEY,
-        });
-
-        return {
-          description: undefined,
-          ...(characterCount &&
-            (characterCountHandler.transform(characterCount, traverse)
-              .props as FieldCharacterCountProps)),
-        };
-      })
-      .exhaustive();
-
-    const { errorMessage, invalid } = match(props.Error.value === "true")
-      .with(true, () => ({
-        invalid: true,
-        errorMessage: props["Error Text#32821:0"].value,
-      }))
-      .with(false, () => ({
-        invalid: undefined,
-        errorMessage: undefined,
-      }))
-      .exhaustive();
-
-    // only returns some nice common props for Slider, TextField and more
-    return createSeedReactElement("__FieldFooter__", {
-      description,
-      maxGraphemeCount,
-      invalid,
-      errorMessage,
-    } satisfies FieldFooterProps);
-  });
+  return defineComponentHandler<FieldFooterProperties>(
+    metadata.componentFieldFooter.key,
+    (node, traverse) => {
+      const { componentProperties: props } = node;
+
+      const { description, maxGraphemeCount } = match(props.Type.value)
+        .with("Description", () => ({
+          description: props["Text#2770:0"].value,
+          maxGraphemeCount: undefined,
+        }))
+        .with("Description With Character Count", () => ({
+          description: props["Text#2770:0"].value,
+          maxGraphemeCount: undefined,
+        }))
+        .with("Character Count", () => {
+          const [characterCount] = findAllInstances<FieldCharacterCountProperties>({
+            node,
+            key: characterCountHandler.key,
+          });
+
+          return {
+            description: undefined,
+            ...(characterCount &&
+              (characterCountHandler.transform(characterCount, traverse)
+                .props as FieldCharacterCountProps)),
+          };
+        })
+        .exhaustive();
+
+      const { errorMessage, invalid } = match(props.Error.value === "true")
+        .with(true, () => ({
+          invalid: true,
+          errorMessage: props["Error Text#32821:0"].value,
+        }))
+        .with(false, () => ({
+          invalid: undefined,
+          errorMessage: undefined,
+        }))
+        .exhaustive();
+
+      // only returns some nice common props for Slider, TextField and more
+      return createSeedReactElement("__FieldFooter__", {
+        description,
+        maxGraphemeCount,
+        invalid,
+        errorMessage,
+      } satisfies FieldFooterProps);
+    },
+  );
 };
 
 type FieldCharacterCountProps = {
@@ -156,7 +153,7 @@ type FieldCharacterCountProps = {
  */
 const createFieldCharacterCountHandler = (_ctx: ComponentHandlerDeps) => {
   return defineComponentHandler<FieldCharacterCountProperties>(
-    FIELD_CHARACTER_COUNT_KEY,
+    metadata.privateComponentFieldFooterCharacterCount.key,
     ({ componentProperties: props }) => {
       // only returns some nice common props for Slider, TextField and more
       return createSeedReactElement("__FieldCharacterCount__", {

package/src/codegen/targets/react/component/handlers/floating-action-button.ts

@@ -11,20 +11,17 @@ import { findAllInstances } from "@/utils/figma-node";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("floating-action-button");
 
-const BUTTON_TYPE_KEY = "8cecc85275115d653579d4c3156567ebf19f7b27";
-const MENU_TYPE_KEY = "400124347392c15473f9cd2d8a6aedb64f3baf36";
-
 export const createFloatingActionButtonHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<FloatingActionButtonProperties>(
-    metadata.floatingActionButton.key,
+    metadata.componentFloatingActionButton.key,
     (node) => {
       const [button] = findAllInstances<FloatingActionButtonButtonItemProperties>({
         node,
-        key: BUTTON_TYPE_KEY,
+        key: metadata.privateComponentItemButtonType.key,
       });
       const [menu] = findAllInstances<FloatingActionButtonMenuItemProperties>({
         node,
-        key: MENU_TYPE_KEY,
+        key: metadata.privateComponentItemMenuType.key,
       });
 
       const commonProps = (() => {

package/src/codegen/targets/react/component/handlers/help-bubble.ts

@@ -10,7 +10,7 @@ const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
 
 export const createHelpBubbleHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<HelpBubbleProperties>(
-    metadata.helpBubble.key,
+    metadata.componentHelpBubble.key,
     ({ componentProperties: props }) => {
       const placement:
         | "top"

package/src/codegen/targets/react/component/handlers/identity-placeholder.ts

@@ -1,11 +1,19 @@
-import type { IdentityPlaceholderProperties } from "@/codegen/component-properties";
-import { defineComponentHandler } from "@/codegen/core";
+import { defineComponentHandler, type InferComponentDefinition } from "@/codegen/core";
 import { camelCase } from "change-case";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 
+// hardcoded since this lives in a different figma file
 const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
 
+export type IdentityPlaceholderProperties = InferComponentDefinition<{
+  Identity: {
+    type: "VARIANT";
+    defaultValue: "Person";
+    variantOptions: ["Person", "Business"];
+  };
+}>;
+
 const { createLocalSnippetElement } = createLocalSnippetHelper("identity-placeholder");
 
 export const createIdentityPlaceholderHandler = (_ctx: ComponentHandlerDeps) =>

package/src/codegen/targets/react/component/handlers/index.ts

@@ -0,0 +1,41 @@
+export * from "./action-button";
+export * from "./alert-dialog";
+export * from "./app-bar";
+export * from "./avatar";
+export * from "./avatar-stack";
+export * from "./badge";
+export * from "./bottom-sheet";
+export * from "./callout";
+export * from "./checkbox";
+export * from "./checkmark";
+export * from "./chip";
+export * from "./contextual-floating-button";
+export * from "./divider";
+export * from "./field-button";
+export * from "./floating-action-button";
+export * from "./help-bubble";
+export * from "./identity-placeholder";
+export * from "./legacy-select-box";
+export * from "./legacy-text-field";
+export * from "./list-header";
+export * from "./list-item";
+export * from "./manner-temp";
+export * from "./manner-temp-badge";
+export * from "./menu-sheet";
+export * from "./page-banner";
+export * from "./progress-circle";
+export * from "./radio-group";
+export * from "./radiomark";
+export * from "./reaction-button";
+export * from "./result-section";
+export * from "./segmented-control";
+export * from "./select-box";
+export * from "./skeleton";
+export * from "./slider";
+export * from "./snackbar";
+export * from "./switch";
+export * from "./switchmark";
+export * from "./tabs";
+export * from "./tag-group";
+export * from "./text-field";
+export * from "./toggle-button";

package/src/codegen/targets/react/component/handlers/legacy-select-box.ts

@@ -3,6 +3,7 @@ import type {
   LegacySelectBoxProperties,
 } from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
 import { findAllInstances } from "@/utils/figma-node";
 import { match } from "ts-pattern";
 import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
@@ -10,12 +11,9 @@ import type { ComponentHandlerDeps } from "../deps.interface";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("select-box");
 
-const LEGACY_SELECT_BOX_KEY = "38722ffeb4c966256a709155e8ddac50c93d7c60";
-const LEGACY_SELECT_BOX_GROUP_KEY = "a3d58bb8540600878742cdcf2608a4b3851667ec";
-
-export const createLegacySelectBoxHandler = (_ctx: ComponentHandlerDeps) =>
+const createLegacySelectBoxHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<LegacySelectBoxProperties>(
-    LEGACY_SELECT_BOX_KEY,
+    metadata.componentDeprecatedSelectBox.key,
     ({ componentProperties: props }) => {
       const tag = match(props.Control.value)
         .with("Checkbox", () => "CheckSelectBox")
@@ -47,7 +45,7 @@ export const createLegacySelectBoxGroupHandler = (ctx: ComponentHandlerDeps) =>
   const selectBoxHandler = createLegacySelectBoxHandler(ctx);
 
   return defineComponentHandler<LegacySelectBoxGroupProperties>(
-    LEGACY_SELECT_BOX_GROUP_KEY,
+    metadata.componentDeprecatedSelectBoxGroup.key,
     (node, traverse) => {
       const props = node.componentProperties;
 

package/src/codegen/targets/react/component/handlers/legacy-text-field.ts

@@ -3,18 +3,16 @@ import type {
   LegacyTextFieldProperties,
 } from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import { handleSizeProp } from "../size";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("text-field");
 
-const LEGACY_TEXT_FIELD_KEY = "c49873c37a639f0dffdea4efd0eb43760d66c141";
-const LEGACY_MULTILINE_TEXT_FIELD_KEY = "88b2399c930c85f9ce2972163a078bc684b84bbe";
-
 export const createLegacyTextFieldHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<LegacyTextFieldProperties>(
-    LEGACY_TEXT_FIELD_KEY,
+    metadata.componentDeprecatedTextField.key,
     ({ componentProperties: props }) => {
       const {
         Size: { value: size },
@@ -120,7 +118,7 @@ export const createLegacyTextFieldHandler = (ctx: ComponentHandlerDeps) =>
 
 export const createLegacyMultilineTextFieldHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<LegacyMultilineTextFieldProperties>(
-    LEGACY_MULTILINE_TEXT_FIELD_KEY,
+    metadata.componentDeprecatedMultilineTextField.key,
     ({ componentProperties: props }) => {
       const {
         Size: { value: size },

package/src/codegen/targets/react/component/handlers/list-header.ts

@@ -9,7 +9,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("list-header");
 
 export const createListHeaderHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ListHeaderProperties>(
-    metadata.listHeader.key,
+    metadata.componentListHeader.key,
     ({ componentProperties: props }) => {
       const commonProps = {
         variant: camelCase(props["Variant"].value),

package/src/codegen/targets/react/component/handlers/list-item.ts

@@ -5,6 +5,7 @@ import type {
 } from "@/codegen/component-properties";
 import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
+import * as components from "@/entities/data/__generated__/components";
 import type { NormalizedTextNode } from "@/normalizer";
 import { findAllInstances, findOne } from "@/utils/figma-node";
 import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
@@ -13,29 +14,29 @@ import { match } from "ts-pattern";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("list");
 
-const PREFIX_KEYS = {
-  checkmark: "f24c9ef42ef08df79483fbae0fa7d9037e566748",
-  radiomark: "5a77ad37a2291989dfe77c44ddee9aa39e447f90",
-  icon: "0e4c05f097d3fa2dc0cbfdbf8db2662bcf8439ca",
-  avatar: "ef0e8bd6c2f92e620acf204bb9a8079ef25a1e5c",
-  image: "82239325aa1cb65af7c649fc71a8f2b48fb9b9f3",
-  custom: "81f201fc876e38f016ab7427a6b3da000ee919a2",
-} as const;
-
-const SUFFIX_KEYS = {
-  checkmark: "abf9810103ae6e6afe8fa253ec5f05d6a7304b38",
-  radiomark: "0a9464ad270bfd7f56438f62bb0155a25ca146a9",
-  chevron: "8c52207687ffed15cd5931d71ed9d196b3358a68",
-  switch: "1e933f75dd6bb4b21c3289b5c3b4402d2c623125",
-  custom: "3a70bf5bb9856c13893931b7a0df652bcf0be895",
-  icon: "4cc7e9b84a8388a36cb3898c6c02e6110a3281b9",
-  chevronWithText: "fe0e25f4fecda59d0a3730ead7c5bc0a66a41e7e",
-  iconButton: "5636566f6de6f58200dce388f7b1ac9f517b30e1",
-  actionButton: "3d788f28c785d1c60b937b253c39ce582dbe1ed3",
-} as const;
+const PREFIX_KEYS = [
+  components.componentListItemPrefixCheckbox.key,
+  components.componentListItemPrefixRadiomark.key,
+  components.componentListItemPrefixIcon.key,
+  components.componentListItemPrefixAvatar.key,
+  components.componentListItemPrefixImage.key,
+  components.componentListItemPrefixCustom.key,
+];
+
+const SUFFIX_KEYS = [
+  components.componentListItemSuffixCheckbox.key,
+  components.componentListItemSuffixRadiomark.key,
+  components.componentListItemSuffixChevron.key,
+  components.componentListItemSuffixSwitch.key,
+  components.componentListItemSuffixCustom.key,
+  components.componentListItemSuffixIcon.key,
+  components.componentListItemSuffixChevronWithText.key,
+  metadata.componentListItemSuffixIconButton.key,
+  metadata.componentListItemSuffixActionButton.key,
+];
 
 export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<ListItemProperties>(metadata.listItem.key, (node, traverse) => {
+  defineComponentHandler<ListItemProperties>(metadata.componentListItem.key, (node, traverse) => {
     const { componentProperties: props } = node;
 
     const { alignItems, title } = match(props.Variants.value)
@@ -54,7 +55,7 @@ export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
     const prefixNode = (() => {
       if (props["Has Prefix#28452:85"].value === false) return null;
 
-      for (const key of Object.values(PREFIX_KEYS)) {
+      for (const key of PREFIX_KEYS) {
         const [found] = findAllInstances<ListItemPrefixIconProperties | {}>({ node, key });
 
         if (found) return found;
@@ -78,7 +79,7 @@ export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
     const suffixNode = (() => {
       if (props["Has Suffix#28452:64"].value === false) return null;
 
-      for (const key of Object.values(SUFFIX_KEYS)) {
+      for (const key of SUFFIX_KEYS) {
         const [found] = findAllInstances<ListItemSuffixIconProperties | {}>({ node, key });
 
         if (found) return found;

package/src/codegen/targets/react/component/handlers/manner-temp-badge.ts

@@ -8,7 +8,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("manner-temp-badg
 
 export const createMannerTempBadgeHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<MannerTempBadgeProperties>(
-    metadata.mannerTempBadge.key,
+    metadata.componentMannerTempBadge.key,
     ({ children }) => {
       const textNode = children.find((child) => child.type === "TEXT");
 

package/src/codegen/targets/react/component/handlers/manner-temp.ts

@@ -7,7 +7,7 @@ import type { ComponentHandlerDeps } from "../deps.interface";
 const { createLocalSnippetElement } = createLocalSnippetHelper("manner-temp");
 
 export const createMannerTempHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<MannerTempProperties>(metadata.mannerTemp.key, ({ children }) => {
+  defineComponentHandler<MannerTempProperties>(metadata.componentMannerTemp.key, ({ children }) => {
     const textNode = children.find((child) => child.type === "TEXT");
 
     const commonProps = {

package/src/codegen/targets/react/component/handlers/menu-sheet.ts

@@ -15,10 +15,9 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("menu-sheet");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
   createLocalSnippetHelper("action-button");
 
-const MENU_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
 const createMenuSheetItemHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<MenuSheetItemProperties>(
-    MENU_SHEET_ITEM_KEY,
+    metadata.privateComponentMenuSheetMenuItem.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
 
@@ -40,12 +39,11 @@ const createMenuSheetItemHandler = (ctx: ComponentHandlerDeps) =>
     },
   );
 
-const MENU_SHEET_GROUP_KEY = "2a504a1c6b7810d5e652862dcba2cb7048f9eb16";
 const createMenuSheetGroupHandler = (ctx: ComponentHandlerDeps) => {
   const menuSheetItemHandler = createMenuSheetItemHandler(ctx);
 
   return defineComponentHandler<MenuSheetGroupProperties>(
-    MENU_SHEET_GROUP_KEY,
+    metadata.privateComponentMenuSheetMenuGroup.key,
     (node, traverse) => {
       const items = findAllInstances<MenuSheetItemProperties>({
         node,
@@ -62,47 +60,52 @@ const createMenuSheetGroupHandler = (ctx: ComponentHandlerDeps) => {
 export const createMenuSheetHandler = (ctx: ComponentHandlerDeps) => {
   const menuSheetGroupHandler = createMenuSheetGroupHandler(ctx);
 
-  return defineComponentHandler<MenuSheetProperties>(metadata.menuSheet.key, (node, traverse) => {
-    const { componentProperties: props } = node;
-
-    const groups = findAllInstances<MenuSheetGroupProperties>({
-      node,
-      key: menuSheetGroupHandler.key,
-    });
+  return defineComponentHandler<MenuSheetProperties>(
+    metadata.componentMenuSheet.key,
+    (node, traverse) => {
+      const { componentProperties: props } = node;
 
-    const contentChildren = groups.map((group) => menuSheetGroupHandler.transform(group, traverse));
+      const groups = findAllInstances<MenuSheetGroupProperties>({
+        node,
+        key: menuSheetGroupHandler.key,
+      });
 
-    const title = props["Show Header#17043:12"].value
-      ? props["Title Text#14599:0"].value
-      : undefined;
+      const contentChildren = groups.map((group) =>
+        menuSheetGroupHandler.transform(group, traverse),
+      );
 
-    const description =
-      props["Show Header#17043:12"].value && props["Show Header Description#32984:0"].value
-        ? props["Description Text#21827:0"].value
+      const title = props["Show Header#17043:12"].value
+        ? props["Title Text#14599:0"].value
         : undefined;
 
-    const { labelAlign } = match(props.Layout.value)
-      .with("Text with Icon", () => ({ labelAlign: "left" }))
-      .with("Text Only", () => ({ labelAlign: "center" }))
-      .exhaustive();
-
-    const content = createLocalSnippetElement(
-      "MenuSheetContent",
-      { title, description, labelAlign },
-      contentChildren,
-      {
-        comment: title
-          ? undefined
-          : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
-      },
-    );
-
-    const trigger = createLocalSnippetElement(
-      "MenuSheetTrigger",
-      { asChild: true },
-      createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"),
-    );
-
-    return createLocalSnippetElement("MenuSheet", undefined, [trigger, content]);
-  });
+      const description =
+        props["Show Header#17043:12"].value && props["Show Header Description#32984:0"].value
+          ? props["Description Text#21827:0"].value
+          : undefined;
+
+      const { labelAlign } = match(props.Layout.value)
+        .with("Text with Icon", () => ({ labelAlign: "left" }))
+        .with("Text Only", () => ({ labelAlign: "center" }))
+        .exhaustive();
+
+      const content = createLocalSnippetElement(
+        "MenuSheetContent",
+        { title, description, labelAlign },
+        contentChildren,
+        {
+          comment: title
+            ? undefined
+            : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+        },
+      );
+
+      const trigger = createLocalSnippetElement(
+        "MenuSheetTrigger",
+        { asChild: true },
+        createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"),
+      );
+
+      return createLocalSnippetElement("MenuSheet", undefined, [trigger, content]);
+    },
+  );
 };