@seed-design/figma 0.0.20 → 0.0.22

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);
         }
       }),
     );

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

@@ -1,24 +1,22 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import type { TextButtonProperties } from "@/codegen/component-properties";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import type { NormalizedInstanceNode } from "@/normalizer";
 import { findOne } from "@/utils/figma-node";
 import { camelCase } from "change-case";
 import { match } from "ts-pattern";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { TextButtonProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
 import { handleSizeProp } from "../size";
 
-export const createTextButtonTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<TextButtonProperties>(metadata.textButton.key, (node) => {
+export const createTextButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<TextButtonProperties>(metadata.textButton.key, (node) => {
     const { componentProperties: props } = node;
 
     const states = props.State.value.split("-");
 
     const { prefixIcon, suffixIcon, children } = match(props.Layout.value)
       .with("Icon First", () => ({
-        prefixIcon: createElement(
-          ctx.iconService.createIconTagName(props["Prefix Icon#7561:0"].componentKey),
-        ),
+        prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#7561:0"]),
         suffixIcon: undefined,
         children: props["Label#6148:0"].value,
       }))
@@ -28,13 +26,9 @@ export const createTextButtonTransformer = (ctx: SeedComponentTransformerDeps) =
           (node) => node.type === "INSTANCE" && node.name === "Suffix Icon",
         ) as NormalizedInstanceNode | null;
 
-        const suffixIconComponentKey = suffixIconNode?.componentKey;
-
         return {
           prefixIcon: undefined,
-          suffixIcon: suffixIconComponentKey
-            ? createElement(ctx.iconService.createIconTagName(suffixIconComponentKey))
-            : undefined,
+          suffixIcon: suffixIconNode ? ctx.iconHandler.transform(suffixIconNode) : undefined,
           children: props["Label#6148:0"].value,
         };
       })

package/src/codegen/targets/react/component/{transformers → handlers}/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 { TextFieldProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { TextFieldProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createTextFieldTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<TextFieldProperties>(
+export const createTextFieldHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<TextFieldProperties>(
     metadata.textField.key,
     ({ componentProperties: props }) => {
       const {
@@ -18,14 +18,14 @@ export const createTextFieldTransformer = (ctx: SeedComponentTransformerDeps) =>
         "Indicator#15327:249": { value: indicator },
         "Show Prefix#958:125": { value: showPrefix },
         "Show Prefix Icon#1267:50": { value: showPrefixIcon },
-        "Prefix Icon#1267:25": { value: prefixIcon },
+        "Prefix Icon#1267:25": prefixIcon,
         "Show Prefix Text#1267:0": { value: showPrefixText },
         "Prefix Text#15327:101": { value: prefix },
         "Placeholder#958:0": { value: placeholder },
         "Filled Text#1304:0": { value: defaultValue },
         "Show Suffix#958:100": { value: showSuffix },
         "Show Suffix Icon#1267:75": { value: showSuffixIcon },
-        "Suffix Icon #1267:100": { value: suffixIcon },
+        "Suffix Icon #1267:100": suffixIcon,
         "Show Suffix Text#1267:125": { value: showSuffixText },
         "Suffix Text#15327:138": { value: suffix },
         "Show Footer#958:25": { value: showFooter },
@@ -51,7 +51,7 @@ export const createTextFieldTransformer = (ctx: SeedComponentTransformerDeps) =>
         // input affixes
         ...(showPrefix &&
           showPrefixIcon && {
-            prefixIcon: createElement(ctx.iconService.createIconTagName(prefixIcon)),
+            prefixIcon: ctx.iconHandler.transform(prefixIcon),
           }),
         ...(showPrefix &&
           showPrefixText && {
@@ -59,7 +59,7 @@ export const createTextFieldTransformer = (ctx: SeedComponentTransformerDeps) =>
           }),
         ...(showSuffix &&
           showSuffixIcon && {
-            suffixIcon: createElement(ctx.iconService.createIconTagName(suffixIcon)),
+            suffixIcon: ctx.iconHandler.transform(suffixIcon),
           }),
         ...(showSuffix &&
           showSuffixText && {

package/src/codegen/targets/react/component/{transformers → handlers}/toggle-button.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 { ToggleButtonProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ToggleButtonProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createToggleButtonTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ToggleButtonProperties>(
+export const createToggleButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ToggleButtonProperties>(
     metadata.toggleButton.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -28,17 +28,13 @@ export const createToggleButtonTransformer = (ctx: SeedComponentTransformerDeps)
       return createElement("ToggleButton", commonProps, [
         props["Show Prefix Icon#6122:392"].value
           ? createElement("PrefixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Prefix Icon#6122:98"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Prefix Icon#6122:98"]),
             })
           : undefined,
         props["Label#6122:49"].value,
         props["Show Suffix Icon#6122:147"].value
           ? createElement("SuffixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Suffix Icon#6122:343"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Suffix Icon#6122:343"]),
             })
           : undefined,
       ]);

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

@@ -1,77 +1,81 @@
-import type { ComponentTransformer } from "@/codegen/core";
-import type { SeedComponentTransformerDeps } from "./deps.interface";
-import { createActionButtonTransformer } from "./transformers/action-button";
-import { createActionChipTransformer } from "./transformers/action-chip";
-import { createActionSheetTransformer } from "./transformers/action-sheet";
-import { createAppBarTransformer } from "./transformers/app-bar";
-import { createAvatarTransformer } from "./transformers/avatar";
-import { createAvatarStackTransformer } from "./transformers/avatar-stack";
-import { createBadgeTransformer } from "./transformers/badge";
-import { createCalloutTransformer } from "./transformers/callout";
-import { createCheckboxTransformer } from "./transformers/checkbox";
-import { createChipTabsTransformer } from "./transformers/chip-tabs";
-import { createControlChipTransformer } from "./transformers/control-chip";
-import { createErrorStateTransformer } from "./transformers/error-state";
-import { createExtendedActionSheetTransformer } from "./transformers/extended-action-sheet";
-import { createExtendedFabTransformer } from "./transformers/extended-fab";
-import { createFabTransformer } from "./transformers/fab";
-import { createHelpBubbleTransformer } from "./transformers/help-bubble";
-import { createIdentityPlaceholderTransformer } from "./transformers/identity-placeholder";
-import { createInlineBannerTransformer } from "./transformers/inline-banner";
-import { createMannerTempBadgeTransformer } from "./transformers/manner-temp-badge";
-import { createMultilineTextFieldTransformer } from "./transformers/multiline-text-field";
-import { createProgressCircleTransformer } from "./transformers/progress-circle";
-import { createReactionButtonTransformer } from "./transformers/reaction-button";
-import { createSegmentedControlTransformer } from "./transformers/segmented-control";
-import {
-  createSelectBoxGroupTransformer,
-  createSelectBoxTransformer,
-} from "./transformers/select-box";
-import { createSkeletonTransformer } from "./transformers/skeleton";
-import { createSnackbarTransformer } from "./transformers/snackbar";
-import { createSwitchTransformer } from "./transformers/switch";
-import { createTabsTransformer } from "./transformers/tabs";
-import { createTextButtonTransformer } from "./transformers/text-button";
-import { createTextFieldTransformer } from "./transformers/text-field";
-import { createToggleButtonTransformer } from "./transformers/toggle-button";
+import type { ComponentHandler } from "@/codegen/core";
+import type { NormalizedInstanceNode } from "@/normalizer";
+import type { ComponentHandlerDeps } from "./deps.interface";
+import { createActionButtonHandler } from "./handlers/action-button";
+import { createActionChipHandler } from "./handlers/action-chip";
+import { createActionSheetHandler } from "./handlers/action-sheet";
+import { createAppBarHandler } from "./handlers/app-bar";
+import { createAvatarHandler } from "./handlers/avatar";
+import { createAvatarStackHandler } from "./handlers/avatar-stack";
+import { createBadgeHandler } from "./handlers/badge";
+import { createCalloutHandler } from "./handlers/callout";
+import { createCheckboxHandler } from "./handlers/checkbox";
+import { createChipTabsHandler } from "./handlers/chip-tabs";
+import { createControlChipHandler } from "./handlers/control-chip";
+import { createErrorStateHandler } from "./handlers/error-state";
+import { createExtendedActionSheetHandler } from "./handlers/extended-action-sheet";
+import { createExtendedFabHandler } from "./handlers/extended-fab";
+import { createFabHandler } from "./handlers/fab";
+import { createHelpBubbleHandler } from "./handlers/help-bubble";
+import { createIdentityPlaceholderHandler } from "./handlers/identity-placeholder";
+import { createInlineBannerHandler } from "./handlers/inline-banner";
+import { createMannerTempBadgeHandler } from "./handlers/manner-temp-badge";
+import { createMultilineTextFieldHandler } from "./handlers/multiline-text-field";
+import { createProgressCircleHandler } from "./handlers/progress-circle";
+import { createReactionButtonHandler } from "./handlers/reaction-button";
+import { createSegmentedControlHandler } from "./handlers/segmented-control";
+import { createSelectBoxGroupHandler, createSelectBoxHandler } from "./handlers/select-box";
+import { createSkeletonHandler } from "./handlers/skeleton";
+import { createSnackbarHandler } from "./handlers/snackbar";
+import { createSwitchHandler } from "./handlers/switch";
+import { createTabsHandler } from "./handlers/tabs";
+import { createTextButtonHandler } from "./handlers/text-button";
+import { createTextFieldHandler } from "./handlers/text-field";
+import { createToggleButtonHandler } from "./handlers/toggle-button";
 
-export type { SeedComponentTransformerDeps };
-export type * from "./properties.type";
+export type { ComponentHandlerDeps };
+export type UnboundComponentHandler<T extends NormalizedInstanceNode["componentProperties"]> = (
+  deps: ComponentHandlerDeps,
+) => ComponentHandler<T>;
 
-export const createSeedComponentTransformers = (ctx: SeedComponentTransformerDeps) =>
-  Object.fromEntries(
-    [
-      createActionButtonTransformer(ctx),
-      createActionChipTransformer(ctx),
-      createActionSheetTransformer(ctx),
-      createAppBarTransformer(ctx),
-      createAvatarTransformer(ctx),
-      createAvatarStackTransformer(ctx),
-      createBadgeTransformer(ctx),
-      createCalloutTransformer(ctx),
-      createCheckboxTransformer(ctx),
-      createChipTabsTransformer(ctx),
-      createControlChipTransformer(ctx),
-      createErrorStateTransformer(ctx),
-      createExtendedActionSheetTransformer(ctx),
-      createExtendedFabTransformer(ctx),
-      createFabTransformer(ctx),
-      createHelpBubbleTransformer(ctx),
-      createIdentityPlaceholderTransformer(ctx),
-      createInlineBannerTransformer(ctx),
-      createMannerTempBadgeTransformer(ctx),
-      createMultilineTextFieldTransformer(ctx),
-      createProgressCircleTransformer(ctx),
-      createReactionButtonTransformer(ctx),
-      createSegmentedControlTransformer(ctx),
-      createSelectBoxGroupTransformer(ctx),
-      createSelectBoxTransformer(ctx),
-      createSkeletonTransformer(ctx),
-      createSnackbarTransformer(ctx),
-      createSwitchTransformer(ctx),
-      createTabsTransformer(ctx),
-      createTextButtonTransformer(ctx),
-      createTextFieldTransformer(ctx),
-      createToggleButtonTransformer(ctx),
-    ].map((x) => [x.key, x]) as Array<[string, ComponentTransformer]>,
-  );
+export function bindComponentHandler<T extends NormalizedInstanceNode["componentProperties"]>(
+  unbound: UnboundComponentHandler<T>,
+  deps: ComponentHandlerDeps,
+): ComponentHandler<T> {
+  return unbound(deps);
+}
+
+export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> = [
+  createActionButtonHandler,
+  createActionChipHandler,
+  createActionSheetHandler,
+  createAppBarHandler,
+  createAvatarHandler,
+  createAvatarStackHandler,
+  createBadgeHandler,
+  createCalloutHandler,
+  createCheckboxHandler,
+  createChipTabsHandler,
+  createControlChipHandler,
+  createErrorStateHandler,
+  createExtendedActionSheetHandler,
+  createExtendedFabHandler,
+  createFabHandler,
+  createHelpBubbleHandler,
+  createIdentityPlaceholderHandler,
+  createInlineBannerHandler,
+  createMannerTempBadgeHandler,
+  createMultilineTextFieldHandler,
+  createProgressCircleHandler,
+  createReactionButtonHandler,
+  createSegmentedControlHandler,
+  createSelectBoxGroupHandler,
+  createSelectBoxHandler,
+  createSkeletonHandler,
+  createSnackbarHandler,
+  createSwitchHandler,
+  createTabsHandler,
+  createTextButtonHandler,
+  createTextFieldHandler,
+  createToggleButtonHandler,
+];