@seed-design/figma 0.0.21 → 0.0.22

package/src/codegen/targets/react/component/{transformers → handlers}/control-chip.ts

@@ -1,12 +1,12 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { match } from "ts-pattern";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { ControlChipProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ControlChipProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createControlChipTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ControlChipProperties>(
+export const createControlChipHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ControlChipProperties>(
     metadata.controlChip.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -16,9 +16,7 @@ export const createControlChipTransformer = (ctx: SeedComponentTransformerDeps)
           layout: "iconOnly",
           children: [
             createElement("Icon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Icon#8722:41"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Icon#8722:41"]),
             }),
           ],
         }))
@@ -26,9 +24,7 @@ export const createControlChipTransformer = (ctx: SeedComponentTransformerDeps)
           layout: "withText",
           children: [
             createElement("PrefixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Prefix Icon#8722:0"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"]),
             }),
             props["Label#7185:0"].value,
           ],
@@ -38,9 +34,7 @@ export const createControlChipTransformer = (ctx: SeedComponentTransformerDeps)
           children: [
             props["Label#7185:0"].value,
             createElement("SuffixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Suffix Icon#8722:82"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Suffix Icon#8722:82"]),
             }),
           ],
         }))
@@ -48,15 +42,11 @@ export const createControlChipTransformer = (ctx: SeedComponentTransformerDeps)
           layout: "withText",
           children: [
             createElement("PrefixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Prefix Icon#8722:0"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"]),
             }),
             props["Label#7185:0"].value,
             createElement("SuffixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Suffix Icon#8722:82"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Suffix Icon#8722:82"]),
             }),
           ],
         }))

package/src/codegen/targets/react/component/{transformers → handlers}/error-state.ts

@@ -1,20 +1,20 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+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 type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { ActionButtonProperties, ErrorStateProperties } from "../properties.type";
-import { createActionButtonTransformer } from "./action-button";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ActionButtonProperties, ErrorStateProperties } from "@/codegen/component-properties";
+import { createActionButtonHandler } from "./action-button";
 
-export const createErrorStateTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const actionButtonTransformer = createActionButtonTransformer(ctx);
+export const createErrorStateHandler = (ctx: ComponentHandlerDeps) => {
+  const actionButtonHandler = createActionButtonHandler(ctx);
 
-  return defineComponentTransformer<ErrorStateProperties>(metadata.errorState.key, (node) => {
+  return defineComponentHandler<ErrorStateProperties>(metadata.errorState.key, (node) => {
     const props = node.componentProperties;
 
     const [actionButtonNode] = findAllInstances<ActionButtonProperties>({
       node,
-      key: actionButtonTransformer.key,
+      key: actionButtonHandler.key,
     });
 
     const commonProps = {
@@ -25,7 +25,7 @@ export const createErrorStateTransformer = (ctx: SeedComponentTransformerDeps) =
       description: props["Description#16237:5"].value,
       ...(actionButtonNode && {
         primaryActionProps: {
-          children: actionButtonTransformer.transform(actionButtonNode).children[0],
+          children: actionButtonHandler.transform(actionButtonNode).children[0],
         },
         secondaryActionProps: {
           children: props["Secondary Action Label#17042:0"].value,

package/src/codegen/targets/react/component/{transformers → handlers}/extended-action-sheet.ts

@@ -1,17 +1,17 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+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 type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { ComponentHandlerDeps } from "../deps.interface";
 import type {
   ExtendedActionSheetGroupProperties,
   ExtendedActionSheetItemProperties,
   ExtendedActionSheetProperties,
-} from "../properties.type";
+} from "@/codegen/component-properties";
 
 const EXTENDED_ACTION_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
-const createExtendedActionSheetItemTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ExtendedActionSheetItemProperties>(
+const createExtendedActionSheetItemHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ExtendedActionSheetItemProperties>(
     EXTENDED_ACTION_SHEET_ITEM_KEY,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -26,9 +26,7 @@ const createExtendedActionSheetItemTransformer = (ctx: SeedComponentTransformerD
       return createElement("ExtendedActionSheetItem", commonProps, [
         props["Show Prefix Icon#17043:5"].value
           ? createElement("PrefixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Prefix Icon#55948:0"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Prefix Icon#55948:0"]),
             })
           : undefined,
         props["Label#55905:8"].value,
@@ -37,38 +35,38 @@ const createExtendedActionSheetItemTransformer = (ctx: SeedComponentTransformerD
   );
 
 const EXTENDED_ACTION_SHEET_GROUP_KEY = "2a504a1c6b7810d5e652862dcba2cb7048f9eb16";
-const createExtendedActionSheetGroupTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const extendedActionSheetItemTransformer = createExtendedActionSheetItemTransformer(ctx);
+const createExtendedActionSheetGroupHandler = (ctx: ComponentHandlerDeps) => {
+  const extendedActionSheetItemHandler = createExtendedActionSheetItemHandler(ctx);
 
-  return defineComponentTransformer<ExtendedActionSheetGroupProperties>(
+  return defineComponentHandler<ExtendedActionSheetGroupProperties>(
     EXTENDED_ACTION_SHEET_GROUP_KEY,
     (node) => {
       const items = findAllInstances<ExtendedActionSheetItemProperties>({
         node,
-        key: extendedActionSheetItemTransformer.key,
+        key: extendedActionSheetItemHandler.key,
       });
 
-      const contentChildren = items.map(extendedActionSheetItemTransformer.transform);
+      const contentChildren = items.map(extendedActionSheetItemHandler.transform);
 
       return createElement("ExtendedActionSheetGroup", undefined, contentChildren);
     },
   );
 };
 
-export const createExtendedActionSheetTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const extendedActionSheetGroupTransformer = createExtendedActionSheetGroupTransformer(ctx);
+export const createExtendedActionSheetHandler = (ctx: ComponentHandlerDeps) => {
+  const extendedActionSheetGroupHandler = createExtendedActionSheetGroupHandler(ctx);
 
-  return defineComponentTransformer<ExtendedActionSheetProperties>(
+  return defineComponentHandler<ExtendedActionSheetProperties>(
     metadata.extendedActionSheet.key,
     (node) => {
       const { componentProperties: props } = node;
 
       const groups = findAllInstances<ExtendedActionSheetGroupProperties>({
         node,
-        key: extendedActionSheetGroupTransformer.key,
+        key: extendedActionSheetGroupHandler.key,
       });
 
-      const contentChildren = groups.map(extendedActionSheetGroupTransformer.transform);
+      const contentChildren = groups.map(extendedActionSheetGroupHandler.transform);
 
       const title = props["Show Title#17043:12"].value ? props["Title#14599:0"].value : undefined;
 

package/src/codegen/targets/react/component/{transformers → handlers}/extended-fab.ts

@@ -1,12 +1,12 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { ExtendedFabProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ExtendedFabProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createExtendedFabTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ExtendedFabProperties>(
+export const createExtendedFabHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ExtendedFabProperties>(
     metadata.extendedFloatingActionButton.key,
     ({ componentProperties: props }) => {
       const commonProps = {
@@ -16,7 +16,7 @@ export const createExtendedFabTransformer = (ctx: SeedComponentTransformerDeps)
 
       return createElement("ExtendedFab", commonProps, [
         createElement("PrefixIcon", {
-          svg: createElement(ctx.iconService.createIconTagName(props["Icon#28796:0"].componentKey)),
+          svg: ctx.iconHandler.transform(props["Icon#28796:0"]),
         }),
         props["Label#28936:0"].value,
       ]);

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

@@ -0,0 +1,18 @@
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createElement } from "@/codegen/core";
+import type { FabProperties } from "@/codegen/component-properties";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+export const createFabHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<FabProperties>(
+    metadata.floatingActionButton.key,
+    ({ componentProperties: props }) => {
+      return createElement(
+        "Fab",
+        undefined,
+        ctx.iconHandler.transform(props["Icon#28796:0"]),
+        "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+      );
+    },
+  );

package/src/codegen/targets/react/component/{transformers → handlers}/help-bubble.ts

@@ -1,11 +1,11 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { createElement } from "@/codegen/core";
-import type { HelpBubbleProperties } from "../properties.type";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { HelpBubbleProperties } from "@/codegen/component-properties";
+import type { ComponentHandlerDeps } from "../deps.interface";
 
-export const createHelpBubbleTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<HelpBubbleProperties>(
+export const createHelpBubbleHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<HelpBubbleProperties>(
     metadata.helpBubble.key,
     ({ componentProperties: props }) => {
       const placement:

package/src/codegen/targets/react/component/{transformers → handlers}/identity-placeholder.ts

@@ -1,12 +1,12 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { defineComponentHandler } from "@/codegen/core";
 import { camelCase } from "change-case";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { createElement } from "@/codegen/core";
-import type { IdentityPlaceholderProperties } from "../properties.type";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { IdentityPlaceholderProperties } from "@/codegen/component-properties";
+import type { ComponentHandlerDeps } from "../deps.interface";
 
-export const createIdentityPlaceholderTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<IdentityPlaceholderProperties>(
+export const createIdentityPlaceholderHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<IdentityPlaceholderProperties>(
     metadata.identityPlaceholder.key,
     ({ componentProperties: props }) => {
       const commonProps = {

package/src/codegen/targets/react/component/{transformers → handlers}/inline-banner.ts

@@ -1,13 +1,13 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import type { InlineBannerProperties } from "@/codegen/component-properties";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import type { NormalizedInstanceNode, NormalizedTextNode } from "@/normalizer";
 import { findOne } from "@/utils/figma-node";
 import { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { InlineBannerProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
 
-export const createInlineBannerTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<InlineBannerProperties>(metadata.inlineBanner.key, (node) => {
+export const createInlineBannerHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<InlineBannerProperties>(metadata.inlineBanner.key, (node) => {
     const { componentProperties: props } = node;
 
     const tag = (() => {
@@ -58,11 +58,8 @@ export const createInlineBannerTransformer = (ctx: SeedComponentTransformerDeps)
       (child) => child.type === "INSTANCE" && child.name === "icon",
     ) as NormalizedInstanceNode | null;
 
-    const iconComponentKey =
-      props["Show Icon#11840:27"] && iconNode ? iconNode.componentKey : undefined;
-    const prefixIcon = iconComponentKey
-      ? createElement(ctx.iconService.createIconTagName(iconComponentKey))
-      : undefined;
+    const showIcon = props["Show Icon#11840:27"] && iconNode;
+    const prefixIcon = showIcon ? ctx.iconHandler.transform(iconNode) : undefined;
 
     const commonProps = {
       variant: camelCase(props.Variant.value),

package/src/codegen/targets/react/component/{transformers → handlers}/manner-temp-badge.ts

@@ -1,10 +1,10 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { MannerTempBadgeProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { MannerTempBadgeProperties } from "@/codegen/component-properties";
 
-export const createMannerTempBadgeTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<MannerTempBadgeProperties>(
+export const createMannerTempBadgeHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<MannerTempBadgeProperties>(
     metadata.mannerTempBadge.key,
     ({ children }) => {
       const textNode = children.find((child) => child.type === "TEXT");

package/src/codegen/targets/react/component/{transformers → handlers}/multiline-text-field.ts

@@ -1,11 +1,11 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { MultilineTextFieldProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { MultilineTextFieldProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createMultilineTextFieldTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<MultilineTextFieldProperties>(
+export const createMultilineTextFieldHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<MultilineTextFieldProperties>(
     metadata.multilineTextField.key,
     ({ componentProperties: props }) => {
       const {

package/src/codegen/targets/react/component/{transformers → handlers}/progress-circle.ts

@@ -1,12 +1,12 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, 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 { SeedComponentTransformerDeps } from "../deps.interface";
-import type { ProgressCircleProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ProgressCircleProperties } from "@/codegen/component-properties";
 
-export const createProgressCircleTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ProgressCircleProperties>(
+export const createProgressCircleHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ProgressCircleProperties>(
     metadata.progressCircle.key,
     ({ componentProperties: props }) => {
       const { value, minValue, maxValue } = match(props.Value.value)

package/src/codegen/targets/react/component/{transformers → handlers}/reaction-button.ts

@@ -1,11 +1,11 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import type { ReactionButtonProperties } from "@/codegen/component-properties";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { ReactionButtonProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
 import { handleSizeProp } from "../size";
 
-export const createReactionButtonTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ReactionButtonProperties>(
+export const createReactionButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ReactionButtonProperties>(
     metadata.reactionButton.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -25,7 +25,7 @@ export const createReactionButtonTransformer = (ctx: SeedComponentTransformerDep
 
       return createElement("ReactionButton", commonProps, [
         createElement("PrefixIcon", {
-          svg: createElement(ctx.iconService.createIconTagName(props["Icon#12379:0"].componentKey)),
+          svg: ctx.iconHandler.transform(props["Icon#12379:0"]),
         }),
         props["Label#6397:0"].value,
         props["Show Count#6397:33"].value

package/src/codegen/targets/react/component/{transformers → handlers}/segmented-control.ts

@@ -1,15 +1,15 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { findAllInstances } from "@/utils/figma-node";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { ComponentHandlerDeps } from "../deps.interface";
 import type {
   SegmentedControlItemProperties,
   SegmentedControlProperties,
-} from "../properties.type";
+} from "@/codegen/component-properties";
 
 const SEGMENTED_CONTROL_ITEM_KEY = "9a7ba0d4c041ddbce84ee48881788434fd6bccc8";
-const createSegmentedControlItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<SegmentedControlItemProperties>(
+const createSegmentedControlItemHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SegmentedControlItemProperties>(
     SEGMENTED_CONTROL_ITEM_KEY,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -24,22 +24,22 @@ const createSegmentedControlItemTransformer = (_ctx: SeedComponentTransformerDep
     },
   );
 
-export const createSegmentedControlTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const segmentedControlItemTransformer = createSegmentedControlItemTransformer(ctx);
+export const createSegmentedControlHandler = (ctx: ComponentHandlerDeps) => {
+  const segmentedControlItemHandler = createSegmentedControlItemHandler(ctx);
 
-  return defineComponentTransformer<SegmentedControlProperties>(
+  return defineComponentHandler<SegmentedControlProperties>(
     metadata.segmentedControl.key,
     (node) => {
       const segments = findAllInstances<SegmentedControlItemProperties>({
         node,
-        key: segmentedControlItemTransformer.key,
+        key: segmentedControlItemHandler.key,
       });
 
       const selectedSegment = segments.find((segment) =>
         segment.componentProperties.State.value.split("-").includes("Selected"),
       );
 
-      const segmentedControlChildren = segments.map(segmentedControlItemTransformer.transform);
+      const segmentedControlChildren = segments.map(segmentedControlItemHandler.transform);
 
       const commonProps = {
         ...(selectedSegment && {

package/src/codegen/targets/react/component/{transformers → handlers}/select-box.ts

@@ -1,11 +1,11 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { findAllInstances } from "@/utils/figma-node";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { SelectBoxGroupProperties, SelectBoxProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { SelectBoxGroupProperties, SelectBoxProperties } from "@/codegen/component-properties";
 
-export const createSelectBoxTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<SelectBoxProperties>(
+export const createSelectBoxHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SelectBoxProperties>(
     metadata.selectBox.key,
     ({ componentProperties: props }) => {
       const tag = (() => {
@@ -37,10 +37,10 @@ export const createSelectBoxTransformer = (_ctx: SeedComponentTransformerDeps) =
     },
   );
 
-export const createSelectBoxGroupTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const selectBoxTransformer = createSelectBoxTransformer(ctx);
+export const createSelectBoxGroupHandler = (ctx: ComponentHandlerDeps) => {
+  const selectBoxHandler = createSelectBoxHandler(ctx);
 
-  return defineComponentTransformer<SelectBoxGroupProperties>(
+  return defineComponentHandler<SelectBoxGroupProperties>(
     metadata.templateSelectBoxGroup.key,
     (node) => {
       const props = node.componentProperties;
@@ -56,7 +56,7 @@ export const createSelectBoxGroupTransformer = (ctx: SeedComponentTransformerDep
 
       const selectBoxes = findAllInstances<SelectBoxProperties>({
         node,
-        key: selectBoxTransformer.key,
+        key: selectBoxHandler.key,
       });
 
       const selectedSelectBox = selectBoxes.find((selectBox) =>
@@ -66,7 +66,7 @@ export const createSelectBoxGroupTransformer = (ctx: SeedComponentTransformerDep
       const stack = createElement(
         "Stack",
         { gap: "spacingY.componentDefault" },
-        selectBoxes.map(selectBoxTransformer.transform),
+        selectBoxes.map(selectBoxHandler.transform),
       );
 
       const commonProps = {

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

@@ -0,0 +1,25 @@
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { camelCase } from "change-case";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { SkeletonProperties } from "@/codegen/component-properties";
+import { match } from "ts-pattern";
+
+export const createSkeletonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SkeletonProperties>(metadata.skeleton.key, (node) => {
+    const { componentProperties: props, layoutSizingHorizontal, layoutSizingVertical } = node;
+
+    const commonProps = {
+      radius: camelCase(props.Radius.value),
+      width: match(layoutSizingHorizontal)
+        .with("FIXED", () => ctx.valueResolver.getFormattedValue.width(node))
+        .with("FILL", () => "full")
+        .otherwise(() => "full"),
+      height: match(layoutSizingVertical)
+        .with("FIXED", () => ctx.valueResolver.getFormattedValue.height(node))
+        .with("FILL", () => "full")
+        .otherwise(() => "full"),
+    };
+
+    return createElement("Skeleton", commonProps);
+  });

package/src/codegen/targets/react/component/{transformers → handlers}/snackbar.ts

@@ -1,11 +1,11 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { SnackbarProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { SnackbarProperties } from "@/codegen/component-properties";
 
-export const createSnackbarTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<SnackbarProperties>(
+export const createSnackbarHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SnackbarProperties>(
     metadata.snackbar.key,
     ({ componentProperties: props }) => {
       const commonProps = {

package/src/codegen/targets/react/component/{transformers → handlers}/switch.ts

@@ -1,11 +1,11 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { SwitchProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { SwitchProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createSwitchTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<SwitchProperties>(
+export const createSwitchHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SwitchProperties>(
     metadata.switch.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");

package/src/codegen/targets/react/component/{transformers → handlers}/tabs.ts

@@ -1,18 +1,18 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import type { NormalizedInstanceNode } from "@/normalizer";
 import { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { ComponentHandlerDeps } from "../deps.interface";
 import type {
   TabsFillItemProperties,
   TabsHugItemProperties,
   TabsProperties,
-} from "../properties.type";
+} from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
 const TABS_HUG_ITEM_KEY = "c242492543b327ceb84fa9933841512fc62a898c";
-const createTabsHugItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<TabsHugItemProperties>(
+const createTabsHugItemHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<TabsHugItemProperties>(
     TABS_HUG_ITEM_KEY,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -32,8 +32,8 @@ const createTabsHugItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
   );
 
 const TABS_FILL_ITEM_KEY = "7275293344efb40ee9a3f5248ba2659b94a0b305";
-const createTabsFillItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<TabsFillItemProperties>(
+const createTabsFillItemHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<TabsFillItemProperties>(
     TABS_FILL_ITEM_KEY,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -52,11 +52,11 @@ const createTabsFillItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
     },
   );
 
-export const createTabsTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const tabsHugItemTransformer = createTabsHugItemTransformer(ctx);
-  const tabsFillItemTransformer = createTabsFillItemTransformer(ctx);
+export const createTabsHandler = (ctx: ComponentHandlerDeps) => {
+  const tabsHugItemHandler = createTabsHugItemHandler(ctx);
+  const tabsFillItemHandler = createTabsFillItemHandler(ctx);
 
-  return defineComponentTransformer<TabsProperties>(metadata.tablist.key, (node) => {
+  return defineComponentHandler<TabsProperties>(metadata.tablist.key, (node) => {
     const { componentProperties: props, children } = node;
 
     const mappedItems = children.map(
@@ -72,13 +72,13 @@ export const createTabsTransformer = (ctx: SeedComponentTransformerDeps) => {
 
         const componentKey = child.componentSetKey ? child.componentSetKey : child.componentKey;
 
-        if (componentKey === tabsHugItemTransformer.key)
+        if (componentKey === tabsHugItemHandler.key)
           return {
             triggerLayout: "hug" as const,
             node: child as NormalizedInstanceNode & { componentProperties: TabsHugItemProperties },
           };
 
-        if (componentKey === tabsFillItemTransformer.key)
+        if (componentKey === tabsFillItemHandler.key)
           return {
             triggerLayout: "fill" as const,
             node: child as NormalizedInstanceNode & { componentProperties: TabsFillItemProperties },
@@ -102,9 +102,9 @@ export const createTabsTransformer = (ctx: SeedComponentTransformerDeps) => {
       tabsItems.map(({ triggerLayout, node }) => {
         switch (triggerLayout) {
           case "hug":
-            return tabsHugItemTransformer.transform(node);
+            return tabsHugItemHandler.transform(node);
           case "fill":
-            return tabsFillItemTransformer.transform(node);
+            return tabsFillItemHandler.transform(node);
         }
       }),
     );