@seed-design/figma 0.0.23 → 0.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -38,13 +38,13 @@
     "lint:publish": "bun publint"
   },
   "dependencies": {
-    "@seed-design/css": "0.0.23",
+    "@seed-design/css": "0.0.25",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.110.0",
-    "@figma/rest-api-spec": "^0.29.0",
+    "@figma/rest-api-spec": "^0.30.0",
     "@seed-design/figma-extractor": "^0.0.4",
     "typescript": "^5.8.3"
   },

package/src/codegen/core/codegen.ts

@@ -67,9 +67,12 @@ export function createCodeGenerator({
 
   function generateCode(node: NormalizedSceneNode, options: { shouldPrintSource: boolean }) {
     const jsxTree = generateJsxTree(node);
-    return jsxTree
-      ? stringifyElement(jsxTree, { printSource: options.shouldPrintSource })
-      : undefined;
+
+    if (!jsxTree) {
+      return undefined;
+    }
+
+    return stringifyElement(jsxTree, { printSource: options.shouldPrintSource });
   }
 
   return { generateJsxTree, generateCode };

package/src/codegen/core/jsx.ts

@@ -5,22 +5,26 @@ export interface ElementNode {
   tag: string;
   props: Record<string, string | number | boolean | ElementNode | object | undefined>;
   children: (ElementNode | string)[];
-  comment?: string;
-  source?: string;
+
+  meta: {
+    comment?: string;
+    source?: string;
+    importPath?: string;
+  };
 }
 
 export function createElement(
   tag: string,
   props: Record<string, string | number | boolean | object | undefined> = {},
   children?: ElementNode | string | undefined | (ElementNode | string | undefined)[],
-  comment?: string,
+  meta?: ElementNode["meta"],
 ): ElementNode {
   return {
     __IS_JSX_ELEMENT_NODE: true,
     tag,
     props,
     children: ensureArray(children).filter(exists),
-    comment,
+    meta: meta ?? {},
   };
 }
 
@@ -53,14 +57,31 @@ export function isElement(node: unknown): node is ElementNode {
 }
 
 export function stringifyElement(element: ElementNode, options: { printSource?: boolean } = {}) {
+  const importMap = new Map<string, Set<string>>();
+
   function recursive(node: ElementNode | string, depth: number): string {
     if (typeof node === "string") {
       return node;
     }
 
-    const { tag, props, children, comment } = node;
+    const {
+      tag,
+      props,
+      children,
+      meta: { comment, source, importPath },
+    } = node;
+
+    if (importPath) {
+      const existing = importMap.get(importPath);
+      if (existing) {
+        existing.add(tag);
+      } else {
+        importMap.set(importPath, new Set([tag]));
+      }
+    }
+
     const propEntries = Object.entries(
-      options.printSource ? { ...props, "data-figma-node-id": node.source } : props,
+      options.printSource ? { ...props, "data-figma-node-id": source } : props,
     );
     const propFragments = propEntries
       .map(([key, value]) => {
@@ -122,5 +143,15 @@ export function stringifyElement(element: ElementNode, options: { printSource?:
     return result;
   }
 
-  return recursive(element, 0);
+  const jsx = recursive(element, 0);
+
+  const imports = Array.from(importMap.entries())
+    .sort((a, b) => a[0].localeCompare(b[0]))
+    .map(([importPath, tags]) => `import { ${Array.from(tags).join(", ")} } from "${importPath}";`)
+    .join("\n");
+
+  return {
+    imports,
+    jsx,
+  };
 }

package/src/codegen/targets/figma/shape.ts

@@ -35,7 +35,9 @@ export function createVectorTransformer({
         ...propsConverters.shapeFill(node),
       },
       [],
-      "Vector Node Placeholder",
+      {
+        comment: "Vector Node Placeholder",
+      },
     );
   });
 }

package/src/codegen/targets/figma/text.ts

@@ -21,13 +21,10 @@ export function createTextTransformer({
       ...fillProps,
     });
 
-    return createElement(
-      "Text",
-      props,
-      node.characters,
-      hasMultipleFills
+    return createElement("Text", props, node.characters, {
+      comment: hasMultipleFills
         ? "Multiple fills in Text node encountered, only the first fill is used."
-        : "",
-    );
+        : undefined,
+    });
   });
 }

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

@@ -1,10 +1,13 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
 import { match } from "ts-pattern";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import type { ActionButtonProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
+import { createLocalSnippetHelper } from "../../element-factories";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("action-button");
 
 export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ActionButtonProperties>(
@@ -16,7 +19,7 @@ export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
         .with("Icon Only", () => ({
           layout: "iconOnly",
           children: [
-            createElement("Icon", {
+            createLocalSnippetElement("Icon", {
               svg: ctx.iconHandler.transform(props["Icon#7574:0"]),
             }),
           ],
@@ -24,7 +27,7 @@ export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
         .with("Icon First", () => ({
           layout: "withText",
           children: [
-            createElement("PrefixIcon", {
+            createLocalSnippetElement("PrefixIcon", {
               svg: ctx.iconHandler.transform(props["Prefix Icon#5987:305"]),
             }),
             props["Label#5987:61"].value,
@@ -34,7 +37,7 @@ export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
           layout: "withText",
           children: [
             props["Label#5987:61"].value,
-            createElement("SuffixIcon", {
+            createLocalSnippetElement("SuffixIcon", {
               svg: ctx.iconHandler.transform(props["Suffix Icon#5987:244"]),
             }),
           ],
@@ -57,6 +60,6 @@ export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
         layout,
       };
 
-      return createElement("ActionButton", commonProps, children);
+      return createLocalSnippetElement("ActionButton", commonProps, children);
     },
   );

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

@@ -1,8 +1,9 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import type { ActionChipProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { match } from "ts-pattern";
+import { createSeedReactElement } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import type { ActionChipProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
 export const createActionChipHandler = (ctx: ComponentHandlerDeps) =>
@@ -15,7 +16,7 @@ export const createActionChipHandler = (ctx: ComponentHandlerDeps) =>
         .with("Icon Only", () => ({
           layout: "iconOnly",
           children: [
-            createElement("Icon", {
+            createSeedReactElement("Icon", {
               svg: ctx.iconHandler.transform(props["Icon#8714:0"]),
             }),
           ],
@@ -23,7 +24,7 @@ export const createActionChipHandler = (ctx: ComponentHandlerDeps) =>
         .with("Icon First", () => ({
           layout: "withText",
           children: [
-            createElement("PrefixIcon", {
+            createSeedReactElement("PrefixIcon", {
               svg: ctx.iconHandler.transform(props["Prefix Icon#8711:0"]),
             }),
             props["Label#7185:0"].value,
@@ -33,7 +34,7 @@ export const createActionChipHandler = (ctx: ComponentHandlerDeps) =>
           layout: "withText",
           children: [
             props["Label#7185:0"].value,
-            createElement("SuffixIcon", {
+            createSeedReactElement("SuffixIcon", {
               svg: ctx.iconHandler.transform(props["Suffix Icon#8711:3"]),
             }),
           ],
@@ -41,11 +42,11 @@ export const createActionChipHandler = (ctx: ComponentHandlerDeps) =>
         .with("Icon Both", () => ({
           layout: "withText",
           children: [
-            createElement("PrefixIcon", {
+            createSeedReactElement("PrefixIcon", {
               svg: ctx.iconHandler.transform(props["Prefix Icon#8711:0"]),
             }),
             props["Label#7185:0"].value,
-            createElement("SuffixIcon", {
+            createSeedReactElement("SuffixIcon", {
               svg: ctx.iconHandler.transform(props["Suffix Icon#8711:3"]),
             }),
           ],
@@ -66,6 +67,6 @@ export const createActionChipHandler = (ctx: ComponentHandlerDeps) =>
           count: Number(props["Count#7185:21"].value),
         }),
       };
-      return createElement("ActionChip", commonProps, children);
+      return createSeedReactElement("ActionChip", commonProps, children);
     },
   );

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

@@ -1,13 +1,16 @@
+import type {
+  ActionSheetItemProperties,
+  ActionSheetProperties,
+} from "@/codegen/component-properties";
 import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { findAllInstances } from "@/utils/figma-node";
 import { camelCase } from "change-case";
 import { match } from "ts-pattern";
+import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import type {
-  ActionSheetItemProperties,
-  ActionSheetProperties,
-} from "@/codegen/component-properties";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("action-sheet");
 
 const ACTION_SHEET_ITEM_KEY = "c3cafd3a3fdcd45fecb6971019d88eaf39a2e381";
 const createActionSheetItemHandler = (_ctx: ComponentHandlerDeps) =>
@@ -24,7 +27,7 @@ const createActionSheetItemHandler = (_ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createElement("ActionSheetItem", commonProps);
+      return createLocalSnippetElement("ActionSheetItem", commonProps);
     },
   );
 
@@ -60,21 +63,20 @@ export const createActionSheetHandler = (ctx: ComponentHandlerDeps) => {
 
     const contentChildren = items.map(actionSheetItemHandler.transform);
 
-    const content = createElement(
-      "ActionSheetContent",
-      contentProps,
-      contentChildren,
-      contentProps.title
-        ? ""
+    const content = createLocalSnippetElement("ActionSheetContent", contentProps, contentChildren, {
+      comment: contentProps.title
+        ? undefined
         : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
-    );
+    });
 
-    const trigger = createElement(
+    const trigger = createLocalSnippetElement(
       "ActionSheetTrigger",
       { asChild: true },
-      createElement("ActionButton", undefined, "열기", "ActionSheet을 여는 요소를 제공해주세요."),
+      createElement("button", undefined, "열기", {
+        comment: "ActionSheet을 여는 요소를 제공해주세요.",
+      }),
     );
 
-    return createElement("ActionSheet", undefined, [trigger, content]);
+    return createLocalSnippetElement("ActionSheet", undefined, [trigger, content]);
   });
 };

package/src/codegen/targets/react/component/handlers/app-bar.ts

@@ -1,15 +1,18 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import type { NormalizedInstanceNode, NormalizedTextNode } from "@/normalizer";
-import { findAll, findAllInstances, findOne } from "@/utils/figma-node";
-import { match } from "ts-pattern";
-import type { ComponentHandlerDeps } from "../deps.interface";
 import type {
   AppBarLeftProperties,
   AppBarMainProperties,
   AppBarProperties,
   AppBarRightProperties,
 } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import type { NormalizedInstanceNode, NormalizedTextNode } from "@/normalizer";
+import { findAll, findAllInstances, findOne } from "@/utils/figma-node";
+import { match } from "ts-pattern";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("app-bar");
 
 const APP_BAR_MAIN_KEY = "336b49b26c3933485d87cc460b06c390976ea58e";
 const createAppBarMainHandler = (_ctx: ComponentHandlerDeps) =>
@@ -39,12 +42,9 @@ const createAppBarMainHandler = (_ctx: ComponentHandlerDeps) =>
         layout,
       };
 
-      return createElement(
-        "AppBarMain",
-        commonProps,
-        undefined,
-        title === undefined ? "Title을 제공해주세요." : undefined,
-      );
+      return createLocalSnippetElement("AppBarMain", commonProps, undefined, {
+        comment: title === undefined ? "Title을 제공해주세요." : undefined,
+      });
     },
   );
 
@@ -56,9 +56,9 @@ const createAppBarLeftHandler = (ctx: ComponentHandlerDeps) =>
     const children = (() => {
       switch (props.Action.value) {
         case "Back":
-          return createElement("AppBarBackButton", undefined);
+          return createLocalSnippetElement("AppBarBackButton");
         case "Close":
-          return createElement("AppBarCloseButton", undefined);
+          return createLocalSnippetElement("AppBarCloseButton");
         case "Other": {
           const iconNode = findOne(
             node,
@@ -69,17 +69,19 @@ const createAppBarLeftHandler = (ctx: ComponentHandlerDeps) =>
             return undefined;
           }
 
-          return createElement(
+          return createLocalSnippetElement(
             "AppBarIconButton",
             undefined,
             ctx.iconHandler.transform(iconNode),
-            "aria-label 또는 aria-labelledby를 제공해주세요.",
+            {
+              comment: "aria-label 또는 aria-labelledby를 제공해주세요.",
+            },
           );
         }
       }
     })();
 
-    return createElement("AppBarLeft", undefined, children);
+    return createLocalSnippetElement("AppBarLeft", undefined, children);
   });
 
 const APP_BAR_RIGHT_KEY = "9e157fc2d1f89ffee938a5bc62f4a58064fec44e";
@@ -104,18 +106,20 @@ const createAppBarRightHandler = (ctx: ComponentHandlerDeps) =>
           ) as NormalizedInstanceNode[];
 
           return iconNodes.map((iconNode) =>
-            createElement(
+            createLocalSnippetElement(
               "AppBarIconButton",
               undefined,
               ctx.iconHandler.transform(iconNode),
-              "aria-label 또는 aria-labelledby를 제공해주세요.",
+              {
+                comment: "aria-label 또는 aria-labelledby를 제공해주세요.",
+              },
             ),
           );
         }
       }
     })();
 
-    return createElement("AppBarRight", undefined, children);
+    return createLocalSnippetElement("AppBarRight", undefined, children);
   });
 
 export const createAppBarHandler = (ctx: ComponentHandlerDeps) => {
@@ -165,13 +169,16 @@ export const createAppBarHandler = (ctx: ComponentHandlerDeps) => {
     const onlyRightNode = rightNode.length === 1 ? rightNode[0] : undefined;
     const right = onlyRightNode ? appBarRightHandler.transform(onlyRightNode) : undefined;
 
-    return createElement(
+    return createLocalSnippetElement(
       "AppBar",
       { theme, tone },
       [left, main, right].filter(Boolean),
-      tone === "transparent"
-        ? `<AppScreen layerOffsetTop="none">으로 상단 패딩을 제거할 수 있습니다.`
-        : undefined,
+      {
+        comment:
+          tone === "transparent"
+            ? '<AppScreen layerOffsetTop="none">으로 상단 패딩을 제거할 수 있습니다.'
+            : undefined,
+      },
     );
   });
 };

package/src/codegen/targets/react/component/handlers/avatar-stack.ts

@@ -1,10 +1,13 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import type { AvatarProperties, AvatarStackProperties } 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 { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import type { AvatarProperties, AvatarStackProperties } from "@/codegen/component-properties";
 import { createAvatarHandler } from "./avatar";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("avatar");
+
 export const createAvatarStackHandler = (ctx: ComponentHandlerDeps) => {
   const avatarHandler = createAvatarHandler(ctx);
 
@@ -18,12 +21,10 @@ export const createAvatarStackHandler = (ctx: ComponentHandlerDeps) => {
 
     const commonProps = {
       size: props.Size.value,
-      // TODO: 구현될 예정
-      // topItem: camelCase(props["Top Item"].value),
     };
 
     const avatarStackChildren = avatarNodes.map(avatarHandler.transform);
 
-    return createElement("AvatarStack", commonProps, avatarStackChildren);
+    return createLocalSnippetElement("AvatarStack", commonProps, avatarStackChildren);
   });
 };

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

@@ -1,13 +1,16 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import { findAllInstances } from "@/utils/figma-node";
-import type { ComponentHandlerDeps } from "../deps.interface";
 import type {
   AvatarProperties,
   IdentityPlaceholderProperties,
 } 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 { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
 import { createIdentityPlaceholderHandler } from "./identity-placeholder";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("avatar");
+
 export const createAvatarHandler = (ctx: ComponentHandlerDeps) => {
   const identityPlaceholderHandler = createIdentityPlaceholderHandler(ctx);
 
@@ -31,11 +34,13 @@ export const createAvatarHandler = (ctx: ComponentHandlerDeps) => {
       size: props.Size.value,
     };
 
-    return createElement(
+    return createLocalSnippetElement(
       "Avatar",
       commonProps,
-      props["Show Badge#1398:26"].value ? createElement("AvatarBadge", {}) : undefined,
-      avatarHasSrc ? "alt 텍스트를 제공해야 합니다." : undefined,
+      props["Show Badge#1398:26"].value ? createLocalSnippetElement("AvatarBadge", {}) : undefined,
+      {
+        comment: avatarHasSrc ? "alt 텍스트를 제공해야 합니다." : undefined,
+      },
     );
   });
 };

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

@@ -1,8 +1,9 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import type { BadgeProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
+import { createSeedReactElement } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import type { BadgeProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
 export const createBadgeHandler = (_ctx: ComponentHandlerDeps) =>
@@ -14,5 +15,5 @@ export const createBadgeHandler = (_ctx: ComponentHandlerDeps) =>
       shape: camelCase(props.Shape.value),
     };
 
-    return createElement("Badge", commonProps, props["Label#1584:0"].value);
+    return createSeedReactElement("Badge", commonProps, props["Label#1584:0"].value);
   });

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

@@ -1,9 +1,12 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import type { CalloutProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import type { NormalizedTextNode } from "@/normalizer";
 import { camelCase } from "change-case";
+import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import type { CalloutProperties } from "@/codegen/component-properties";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("callout");
 
 export const createCalloutHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<CalloutProperties>(
@@ -25,7 +28,9 @@ export const createCalloutHandler = (ctx: ComponentHandlerDeps) =>
       const textNode = children.find((child) => child.type === "TEXT") as NormalizedTextNode | null;
 
       if (!textNode) {
-        return createElement(tag, undefined, undefined, "내용을 제공해주세요.");
+        return createLocalSnippetElement(tag, undefined, undefined, {
+          comment: "내용을 제공해주세요.",
+        });
       }
 
       const slices = textNode.segments;
@@ -82,6 +87,6 @@ export const createCalloutHandler = (ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createElement(tag, commonProps);
+      return createLocalSnippetElement(tag, commonProps);
     },
   );

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

@@ -1,10 +1,13 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import type { CheckboxProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
+import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import type { CheckboxProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("checkbox");
+
 export const createCheckboxHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<CheckboxProperties>(
     metadata.checkbox.key,
@@ -28,6 +31,6 @@ export const createCheckboxHandler = (_ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createElement("Checkbox", commonProps);
+      return createLocalSnippetElement("Checkbox", commonProps);
     },
   );

package/src/codegen/targets/react/component/handlers/chip-tabs.ts

@@ -1,9 +1,12 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import type { ChipTabsItemProperties, ChipTabsProperties } 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 { camelCase } from "change-case";
+import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import type { ChipTabsItemProperties, ChipTabsProperties } from "@/codegen/component-properties";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("chip-tabs");
 
 const CHIP_TABS_ITEM_KEY = "fa80168b02051fbb0ba032238bd76d840dbe2e15";
 const createChipTabsItemHandler = (_ctx: ComponentHandlerDeps) =>
@@ -19,7 +22,7 @@ const createChipTabsItemHandler = (_ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createElement("ChipTabsTrigger", commonProps, props["Label#8876:0"].value);
+      return createLocalSnippetElement("ChipTabsTrigger", commonProps, props["Label#8876:0"].value);
     },
   );
 
@@ -36,7 +39,7 @@ export const createChipTabsHandler = (ctx: ComponentHandlerDeps) => {
       chipTabsItem.componentProperties.State.value.split("-").includes("Selected"),
     );
 
-    const chipTabsList = createElement(
+    const chipTabsList = createLocalSnippetElement(
       "ChipTabsList",
       undefined,
       chipTabsItems.map(chipTabsItemHandler.transform),
@@ -49,6 +52,6 @@ export const createChipTabsHandler = (ctx: ComponentHandlerDeps) => {
       }),
     };
 
-    return createElement("ChipTabs", commonProps, chipTabsList);
+    return createLocalSnippetElement("ChipTabs", commonProps, chipTabsList);
   });
 };