@seed-design/figma 0.0.20 → 0.0.22

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

@@ -1,10 +1,4 @@
-import {
-  createPropsTransformer,
-  definePropsTransformer,
-  type PropsTransformer,
-  type ValueTransformer,
-} from "@/codegen/core";
-import type { StyleService } from "@/entities";
+import { createPropsConverter, definePropsConverter, type PropsConverter } from "@/codegen/core";
 import type {
   NormalizedCornerTrait,
   NormalizedHasChildrenTrait,
@@ -14,16 +8,17 @@ import type {
   NormalizedIsLayerTrait,
   NormalizedTypePropertiesTrait,
 } from "@/normalizer";
-
-export interface PropsTransformers {
-  containerLayout: PropsTransformer<ContainerLayoutTrait, ContainerLayoutProps>;
-  selfLayout: PropsTransformer<SelfLayoutTrait, SelfLayoutProps>;
-  radius: PropsTransformer<RadiusTrait, RadiusProps>;
-  frameFill: PropsTransformer<FillTrait, FillProps>;
-  shapeFill: PropsTransformer<FillTrait, FillProps>;
-  textFill: PropsTransformer<FillTrait, FillProps>;
-  stroke: PropsTransformer<StrokeTrait, StrokeProps>;
-  typeStyle: PropsTransformer<TypeStyleTrait, TypeStyleProps>;
+import type { FigmaValueResolver } from "./value-resolver";
+
+export interface PropsConverters {
+  containerLayout: PropsConverter<ContainerLayoutTrait, ContainerLayoutProps>;
+  selfLayout: PropsConverter<SelfLayoutTrait, SelfLayoutProps>;
+  radius: PropsConverter<RadiusTrait, RadiusProps>;
+  frameFill: PropsConverter<FillTrait, FillProps>;
+  shapeFill: PropsConverter<FillTrait, FillProps>;
+  textFill: PropsConverter<FillTrait, FillProps>;
+  stroke: PropsConverter<StrokeTrait, StrokeProps>;
+  typeStyle: PropsConverter<TypeStyleTrait, TypeStyleProps>;
 }
 
 export type ContainerLayoutTrait = NormalizedHasFramePropertiesTrait &
@@ -55,12 +50,10 @@ export interface ContainerLayoutProps {
   verticalPadding?: number | string; // string when variable
 }
 
-type FigmaValueTransformer = ValueTransformer<string, number, number, number>;
-
-export function createContainerLayoutPropsTransformer(
-  valueTransformer: FigmaValueTransformer,
-): PropsTransformer<ContainerLayoutTrait, ContainerLayoutProps> {
-  return createPropsTransformer({
+export function createContainerLayoutPropsConverter(
+  valueResolver: FigmaValueResolver,
+): PropsConverter<ContainerLayoutTrait, ContainerLayoutProps> {
+  return createPropsConverter({
     _types: {
       trait: {} as ContainerLayoutTrait,
       props: {} as ContainerLayoutProps,
@@ -70,11 +63,11 @@ export function createContainerLayoutPropsTransformer(
       primaryAxisAlignItems: ({ primaryAxisAlignItems }) => primaryAxisAlignItems,
       counterAxisAlignItems: ({ counterAxisAlignItems }) => counterAxisAlignItems,
       layoutWrap: ({ layoutWrap }) => layoutWrap,
-      itemSpacing: ({ itemSpacing }) => itemSpacing,
-      paddingTop: (node) => valueTransformer.getFormattedValue.paddingTop(node),
-      paddingBottom: (node) => valueTransformer.getFormattedValue.paddingBottom(node),
-      paddingLeft: (node) => valueTransformer.getFormattedValue.paddingLeft(node),
-      paddingRight: (node) => valueTransformer.getFormattedValue.paddingRight(node),
+      itemSpacing: (node) => valueResolver.getFormattedValue.itemSpacing(node),
+      paddingTop: (node) => valueResolver.getFormattedValue.paddingTop(node),
+      paddingBottom: (node) => valueResolver.getFormattedValue.paddingBottom(node),
+      paddingLeft: (node) => valueResolver.getFormattedValue.paddingLeft(node),
+      paddingRight: (node) => valueResolver.getFormattedValue.paddingRight(node),
     },
     shorthands: {
       horizontalPadding: ["paddingLeft", "paddingRight"],
@@ -97,10 +90,10 @@ export interface SelfLayoutProps {
   maxHeight?: string | number; // string when variable
 }
 
-export function createSelfLayoutPropsTransformer(
-  valueTransformer: FigmaValueTransformer,
-): PropsTransformer<SelfLayoutTrait, SelfLayoutProps> {
-  return createPropsTransformer({
+export function createSelfLayoutPropsConverter(
+  valueResolver: FigmaValueResolver,
+): PropsConverter<SelfLayoutTrait, SelfLayoutProps> {
+  return createPropsConverter({
     _types: {
       trait: {} as SelfLayoutTrait,
       props: {} as SelfLayoutProps,
@@ -110,12 +103,12 @@ export function createSelfLayoutPropsTransformer(
       layoutAlign: ({ layoutAlign }) => layoutAlign,
       layoutSizingVertical: ({ layoutSizingVertical }) => layoutSizingVertical,
       layoutSizingHorizontal: ({ layoutSizingHorizontal }) => layoutSizingHorizontal,
-      width: (node) => valueTransformer.getFormattedValue.width(node),
-      height: (node) => valueTransformer.getFormattedValue.height(node),
-      minWidth: (node) => valueTransformer.getFormattedValue.minWidth(node),
-      minHeight: (node) => valueTransformer.getFormattedValue.minHeight(node),
-      maxWidth: (node) => valueTransformer.getFormattedValue.maxWidth(node),
-      maxHeight: (node) => valueTransformer.getFormattedValue.maxHeight(node),
+      width: (node) => valueResolver.getFormattedValue.width(node),
+      height: (node) => valueResolver.getFormattedValue.height(node),
+      minWidth: (node) => valueResolver.getFormattedValue.minWidth(node),
+      minHeight: (node) => valueResolver.getFormattedValue.minHeight(node),
+      maxWidth: (node) => valueResolver.getFormattedValue.maxWidth(node),
+      maxHeight: (node) => valueResolver.getFormattedValue.maxHeight(node),
     },
     defaults: {},
   });
@@ -129,17 +122,17 @@ export interface RadiusProps {
   bottomRightRadius?: number | string; // string when variable
 }
 
-export function createRadiusPropsTransformer(valueTransformer: FigmaValueTransformer) {
-  return createPropsTransformer({
+export function createRadiusPropsConverter(valueResolver: FigmaValueResolver) {
+  return createPropsConverter({
     _types: {
       trait: {} as RadiusTrait,
       props: {} as RadiusProps,
     },
     handlers: {
-      topLeftRadius: (node) => valueTransformer.getFormattedValue.topLeftRadius(node),
-      topRightRadius: (node) => valueTransformer.getFormattedValue.topRightRadius(node),
-      bottomLeftRadius: (node) => valueTransformer.getFormattedValue.bottomLeftRadius(node),
-      bottomRightRadius: (node) => valueTransformer.getFormattedValue.bottomRightRadius(node),
+      topLeftRadius: (node) => valueResolver.getFormattedValue.topLeftRadius(node),
+      topRightRadius: (node) => valueResolver.getFormattedValue.topRightRadius(node),
+      bottomLeftRadius: (node) => valueResolver.getFormattedValue.bottomLeftRadius(node),
+      bottomRightRadius: (node) => valueResolver.getFormattedValue.bottomRightRadius(node),
     },
     shorthands: {
       cornerRadius: ["topLeftRadius", "topRightRadius", "bottomLeftRadius", "bottomRightRadius"],
@@ -158,9 +151,9 @@ export interface FillProps {
   fill?: string;
 }
 
-export function createFrameFillPropsTransformer(valueTransformer: FigmaValueTransformer) {
-  return definePropsTransformer<FillTrait, FillProps>((node: FillTrait) => {
-    const fill = valueTransformer.getFormattedValue.frameFill(node);
+export function createFrameFillPropsConverter(valueResolver: FigmaValueResolver) {
+  return definePropsConverter<FillTrait, FillProps>((node: FillTrait) => {
+    const fill = valueResolver.getFormattedValue.frameFill(node);
 
     return {
       fill,
@@ -168,9 +161,9 @@ export function createFrameFillPropsTransformer(valueTransformer: FigmaValueTran
   });
 }
 
-export function createShapeFillPropsTransformer(valueTransformer: FigmaValueTransformer) {
-  return definePropsTransformer<FillTrait, FillProps>((node: FillTrait) => {
-    const fill = valueTransformer.getFormattedValue.shapeFill(node);
+export function createShapeFillPropsConverter(valueResolver: FigmaValueResolver) {
+  return definePropsConverter<FillTrait, FillProps>((node: FillTrait) => {
+    const fill = valueResolver.getFormattedValue.shapeFill(node);
 
     return {
       fill,
@@ -178,9 +171,9 @@ export function createShapeFillPropsTransformer(valueTransformer: FigmaValueTran
   });
 }
 
-export function createTextFillPropsTransformer(valueTransformer: FigmaValueTransformer) {
-  return definePropsTransformer<FillTrait, FillProps>((node: FillTrait) => {
-    const fill = valueTransformer.getFormattedValue.textFill(node);
+export function createTextFillPropsConverter(valueResolver: FigmaValueResolver) {
+  return definePropsConverter<FillTrait, FillProps>((node: FillTrait) => {
+    const fill = valueResolver.getFormattedValue.textFill(node);
 
     return {
       fill,
@@ -193,11 +186,11 @@ export interface StrokeProps {
   strokeWeight?: number;
 }
 
-export function createStrokePropsTransformer(
-  valueTransformer: FigmaValueTransformer,
-): PropsTransformer<StrokeTrait, StrokeProps> {
-  return definePropsTransformer((node: StrokeTrait) => {
-    const stroke = valueTransformer.getFormattedValue.stroke(node);
+export function createStrokePropsConverter(
+  valueResolver: FigmaValueResolver,
+): PropsConverter<StrokeTrait, StrokeProps> {
+  return definePropsConverter((node: StrokeTrait) => {
+    const stroke = valueResolver.getFormattedValue.stroke(node);
     const strokeWeight = node.strokeWeight;
 
     return {
@@ -215,15 +208,11 @@ export interface TypeStyleProps {
   maxLines?: number;
 }
 
-export function createTypeStylePropsTransformer({
-  valueTransformer,
-  styleService,
-}: {
-  valueTransformer: FigmaValueTransformer;
-  styleService: StyleService;
-}): PropsTransformer<TypeStyleTrait, TypeStyleProps> {
-  return definePropsTransformer((node) => {
-    const styleName = node.textStyleKey ? styleService.getStyleName(node.textStyleKey) : undefined;
+export function createTypeStylePropsConverter(
+  valueResolver: FigmaValueResolver,
+): PropsConverter<TypeStyleTrait, TypeStyleProps> {
+  return definePropsConverter((node) => {
+    const styleName = valueResolver.getTextStyleValue(node);
     const maxLines =
       node.style.textTruncation === "ENDING" ? (node.style.maxLines ?? undefined) : undefined;
 
@@ -235,9 +224,9 @@ export function createTypeStylePropsTransformer({
     }
 
     return {
-      fontSize: valueTransformer.getFormattedValue.fontSize(node),
-      fontWeight: valueTransformer.getFormattedValue.fontWeight(node),
-      lineHeight: valueTransformer.getFormattedValue.lineHeight(node),
+      fontSize: valueResolver.getFormattedValue.fontSize(node),
+      fontWeight: valueResolver.getFormattedValue.fontWeight(node),
+      lineHeight: valueResolver.getFormattedValue.lineHeight(node),
       maxLines,
     };
   });

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

@@ -4,35 +4,35 @@ import type {
   NormalizedVectorNode,
 } from "@/normalizer";
 import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
-import type { PropsTransformers } from "./props";
+import type { PropsConverters } from "./props";
 
 export interface RectangleTransformerDeps {
-  propsTransformers: PropsTransformers;
+  propsConverters: PropsConverters;
 }
 
 export function createRectangleTransformer({
-  propsTransformers,
+  propsConverters,
 }: RectangleTransformerDeps): ElementTransformer<NormalizedRectangleNode> {
-  return defineElementTransformer((node: NormalizedRectangleNode, traverse) => {
-    return createElement("Rectangle", { ...propsTransformers.selfLayout(node, traverse) });
+  return defineElementTransformer((node: NormalizedRectangleNode) => {
+    return createElement("Rectangle", { ...propsConverters.selfLayout(node) });
   });
 }
 
 export interface VectorTransformerDeps {
-  propsTransformers: PropsTransformers;
+  propsConverters: PropsConverters;
 }
 
 export function createVectorTransformer({
-  propsTransformers,
+  propsConverters,
 }: VectorTransformerDeps): ElementTransformer<NormalizedVectorNode> {
-  return defineElementTransformer((node, traverse) => {
+  return defineElementTransformer((node) => {
     return createElement(
       "Vector",
       {
-        ...propsTransformers.selfLayout(node, traverse),
-        ...propsTransformers.radius(node, traverse),
-        ...propsTransformers.stroke(node, traverse),
-        ...propsTransformers.shapeFill(node, traverse),
+        ...propsConverters.selfLayout(node),
+        ...propsConverters.radius(node),
+        ...propsConverters.stroke(node),
+        ...propsConverters.shapeFill(node),
       },
       [],
       "Vector Node Placeholder",
@@ -41,20 +41,20 @@ export function createVectorTransformer({
 }
 
 export interface BooleanOperationTransformerDeps {
-  propsTransformers: PropsTransformers;
+  propsConverters: PropsConverters;
 }
 
 export function createBooleanOperationTransformer({
-  propsTransformers,
+  propsConverters,
 }: BooleanOperationTransformerDeps): ElementTransformer<NormalizedBooleanOperationNode> {
   return defineElementTransformer((node, traverse) => {
     return createElement(
       "BooleanOperation",
       {
-        ...propsTransformers.selfLayout(node, traverse),
-        ...propsTransformers.radius(node, traverse),
-        ...propsTransformers.stroke(node, traverse),
-        ...propsTransformers.shapeFill(node, traverse),
+        ...propsConverters.selfLayout(node),
+        ...propsConverters.radius(node),
+        ...propsConverters.stroke(node),
+        ...propsConverters.shapeFill(node),
       },
       node.children.map(traverse),
     );

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

@@ -1,20 +1,20 @@
 import type { NormalizedTextNode } from "@/normalizer";
 import { compactObject } from "@/utils/common";
 import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
-import type { PropsTransformers } from "./props";
+import type { PropsConverters } from "./props";
 
 export interface TextTransformerDeps {
-  propsTransformers: PropsTransformers;
+  propsConverters: PropsConverters;
 }
 
 export function createTextTransformer({
-  propsTransformers,
+  propsConverters,
 }: TextTransformerDeps): ElementTransformer<NormalizedTextNode> {
-  return defineElementTransformer((node: NormalizedTextNode, traverse) => {
+  return defineElementTransformer((node: NormalizedTextNode) => {
     const hasMultipleFills = node.fills.length > 1;
 
-    const fillProps = propsTransformers.textFill(node, traverse);
-    const typeStyleProps = propsTransformers.typeStyle(node, traverse);
+    const fillProps = propsConverters.textFill(node);
+    const typeStyleProps = propsConverters.typeStyle(node);
 
     const props = compactObject({
       ...typeStyleProps,

package/src/codegen/targets/figma/value-resolver.ts

@@ -0,0 +1,22 @@
+import { createValueResolver, type ValueResolver } from "@/codegen/core";
+import { styleService, variableService } from "@/codegen/default-services";
+import { toCssRgba } from "@/utils/css";
+
+export type FigmaValueResolver = ValueResolver<string, number, number, number>;
+
+export const valueResolver = createValueResolver({
+  variableService,
+  variableNameFormatter: ({ slug }) =>
+    slug
+      .filter((s) => s !== "dimension")
+      .map((s) => s.replaceAll(",", "_"))
+      .join("/"),
+  styleService,
+  styleNameFormatter: ({ slug }) => slug[slug.length - 1]!,
+  rawValueFormatters: {
+    color: (value: RGBA) => toCssRgba(value),
+    dimension: (value: number) => value,
+    fontDimension: (value: number) => value,
+    fontWeight: (value: number) => value,
+  },
+});

package/src/codegen/targets/react/component/deps.interface.ts

@@ -1,6 +1,7 @@
-import type { IconService, VariableService } from "@/entities";
+import type { IconHandler } from "../icon";
+import type { ReactValueResolver } from "../value-resolver";
 
-export interface SeedComponentTransformerDeps {
-  iconService: IconService;
-  variableService: VariableService;
+export interface ComponentHandlerDeps {
+  iconHandler: IconHandler;
+  valueResolver: ReactValueResolver;
 }

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

@@ -1,13 +1,13 @@
-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 { ActionButtonProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ActionButtonProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createActionButtonTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ActionButtonProperties>(
+export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ActionButtonProperties>(
     metadata.actionButton.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -17,9 +17,7 @@ export const createActionButtonTransformer = (ctx: SeedComponentTransformerDeps)
           layout: "iconOnly",
           children: [
             createElement("Icon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Icon#7574:0"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Icon#7574:0"]),
             }),
           ],
         }))
@@ -27,9 +25,7 @@ export const createActionButtonTransformer = (ctx: SeedComponentTransformerDeps)
           layout: "withText",
           children: [
             createElement("PrefixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Prefix Icon#5987:305"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Prefix Icon#5987:305"]),
             }),
             props["Label#5987:61"].value,
           ],
@@ -39,9 +35,7 @@ export const createActionButtonTransformer = (ctx: SeedComponentTransformerDeps)
           children: [
             props["Label#5987:61"].value,
             createElement("SuffixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Suffix Icon#5987:244"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Suffix Icon#5987:244"]),
             }),
           ],
         }))

package/src/codegen/targets/react/component/{transformers → handlers}/action-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 { ActionChipProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ActionChipProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createActionChipTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ActionChipProperties>(
+export const createActionChipHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ActionChipProperties>(
     metadata.actionChip.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -16,9 +16,7 @@ export const createActionChipTransformer = (ctx: SeedComponentTransformerDeps) =
           layout: "iconOnly",
           children: [
             createElement("Icon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Icon#8714:0"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Icon#8714:0"]),
             }),
           ],
         }))
@@ -26,9 +24,7 @@ export const createActionChipTransformer = (ctx: SeedComponentTransformerDeps) =
           layout: "withText",
           children: [
             createElement("PrefixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Prefix Icon#8711:0"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Prefix Icon#8711:0"]),
             }),
             props["Label#7185:0"].value,
           ],
@@ -38,9 +34,7 @@ export const createActionChipTransformer = (ctx: SeedComponentTransformerDeps) =
           children: [
             props["Label#7185:0"].value,
             createElement("SuffixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Suffix Icon#8711:3"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Suffix Icon#8711:3"]),
             }),
           ],
         }))
@@ -48,15 +42,11 @@ export const createActionChipTransformer = (ctx: SeedComponentTransformerDeps) =
           layout: "withText",
           children: [
             createElement("PrefixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Prefix Icon#8711:0"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Prefix Icon#8711:0"]),
             }),
             props["Label#7185:0"].value,
             createElement("SuffixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Suffix Icon#8711:3"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Suffix Icon#8711:3"]),
             }),
           ],
         }))

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

@@ -1,14 +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 { match } from "ts-pattern";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { ActionSheetItemProperties, ActionSheetProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type {
+  ActionSheetItemProperties,
+  ActionSheetProperties,
+} from "@/codegen/component-properties";
 
 const ACTION_SHEET_ITEM_KEY = "c3cafd3a3fdcd45fecb6971019d88eaf39a2e381";
-const createActionSheetItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ActionSheetItemProperties>(
+const createActionSheetItemHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ActionSheetItemProperties>(
     ACTION_SHEET_ITEM_KEY,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -25,10 +28,10 @@ const createActionSheetItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
     },
   );
 
-export const createActionSheetTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const actionSheetItemTransformer = createActionSheetItemTransformer(ctx);
+export const createActionSheetHandler = (ctx: ComponentHandlerDeps) => {
+  const actionSheetItemHandler = createActionSheetItemHandler(ctx);
 
-  return defineComponentTransformer<ActionSheetProperties>(metadata.actionSheet.key, (node) => {
+  return defineComponentHandler<ActionSheetProperties>(metadata.actionSheet.key, (node) => {
     const { componentProperties: props } = node;
 
     const contentProps = match(props.Header.value)
@@ -52,10 +55,10 @@ export const createActionSheetTransformer = (ctx: SeedComponentTransformerDeps)
 
     const items = findAllInstances<ActionSheetItemProperties>({
       node,
-      key: actionSheetItemTransformer.key,
+      key: actionSheetItemHandler.key,
     });
 
-    const contentChildren = items.map(actionSheetItemTransformer.transform);
+    const contentChildren = items.map(actionSheetItemHandler.transform);
 
     const content = createElement(
       "ActionSheetContent",