@seed-design/figma 0.1.7 → 0.1.9

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

@@ -0,0 +1,106 @@
+import type {
+  MenuSheetGroupProperties,
+  MenuSheetItemProperties,
+  MenuSheetProperties,
+} 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, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("menu-sheet");
+const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
+  createLocalSnippetHelper("action-button");
+
+const MENU_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
+const createMenuSheetItemHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<MenuSheetItemProperties>(
+    MENU_SHEET_ITEM_KEY,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const commonProps = {
+        tone: camelCase(props.Tone.value),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+      };
+
+      return createLocalSnippetElement("MenuSheetItem", commonProps, [
+        props["Show Prefix Icon#17043:5"].value
+          ? createSeedReactElement("PrefixIcon", {
+              svg: ctx.iconHandler.transform(props["Prefix Icon#55948:0"]),
+            })
+          : undefined,
+        props["Label#55905:8"].value,
+      ]);
+    },
+  );
+
+const MENU_SHEET_GROUP_KEY = "2a504a1c6b7810d5e652862dcba2cb7048f9eb16";
+const createMenuSheetGroupHandler = (ctx: ComponentHandlerDeps) => {
+  const menuSheetItemHandler = createMenuSheetItemHandler(ctx);
+
+  return defineComponentHandler<MenuSheetGroupProperties>(
+    MENU_SHEET_GROUP_KEY,
+    (node, traverse) => {
+      const items = findAllInstances<MenuSheetItemProperties>({
+        node,
+        key: menuSheetItemHandler.key,
+      });
+
+      const contentChildren = items.map((item) => menuSheetItemHandler.transform(item, traverse));
+
+      return createLocalSnippetElement("MenuSheetGroup", undefined, contentChildren);
+    },
+  );
+};
+
+export const createMenuSheetHandler = (ctx: ComponentHandlerDeps) => {
+  const menuSheetGroupHandler = createMenuSheetGroupHandler(ctx);
+
+  return defineComponentHandler<MenuSheetProperties>(metadata.menuSheet.key, (node, traverse) => {
+    const { componentProperties: props } = node;
+
+    const groups = findAllInstances<MenuSheetGroupProperties>({
+      node,
+      key: menuSheetGroupHandler.key,
+    });
+
+    const contentChildren = groups.map((group) => menuSheetGroupHandler.transform(group, traverse));
+
+    const title = props["Show Header#17043:12"].value
+      ? props["Title Text#14599:0"].value
+      : undefined;
+
+    // TODO: React 구현체에 description 추가 이후
+    // const description = props["Description Text#21827:0"].value;
+
+    const { labelAlignment } = match(props.Layout.value)
+      .with("Text with Icon", () => ({ labelAlignment: undefined }))
+      .with("Text Only", () => ({ labelAlignment: "center" }))
+      .exhaustive();
+
+    const content = createLocalSnippetElement(
+      "MenuSheetContent",
+      { title, labelAlignment },
+      contentChildren,
+      {
+        comment: title
+          ? undefined
+          : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+      },
+    );
+
+    const trigger = createLocalSnippetElement(
+      "MenuSheetTrigger",
+      { asChild: true },
+      createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"),
+    );
+
+    return createLocalSnippetElement("MenuSheet", undefined, [trigger, content]);
+  });
+};

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

@@ -5,7 +5,7 @@ import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import { handleSizeProp } from "../size";
 
-const { createLocalSnippetElement } = createLocalSnippetHelper("multiline-text-field");
+const { createLocalSnippetElement } = createLocalSnippetHelper("text-field");
 
 export const createMultilineTextFieldHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<MultilineTextFieldProperties>(

package/src/codegen/targets/react/component/handlers/progress-circle.ts

@@ -45,7 +45,9 @@ export const createProgressCircleHandler = (_ctx: ComponentHandlerDeps) =>
         minValue,
         maxValue,
         size: props.Size.value,
-        tone: camelCase(props.Tone.value),
+        ...(props.Tone.value !== "Custom(inherit)" && {
+          tone: camelCase(props.Tone.value),
+        }),
       };
 
       return createLocalSnippetElement("ProgressCircle", commonProps);

package/src/codegen/targets/react/component/handlers/segmented-control.ts

@@ -36,7 +36,7 @@ export const createSegmentedControlHandler = (ctx: ComponentHandlerDeps) => {
 
   return defineComponentHandler<SegmentedControlProperties>(
     metadata.segmentedControl.key,
-    (node) => {
+    (node, traverse) => {
       const segments = findAllInstances<SegmentedControlItemProperties>({
         node,
         key: segmentedControlItemHandler.key,
@@ -46,7 +46,9 @@ export const createSegmentedControlHandler = (ctx: ComponentHandlerDeps) => {
         segment.componentProperties.State.value.split("-").includes("Selected"),
       );
 
-      const segmentedControlChildren = segments.map(segmentedControlItemHandler.transform);
+      const segmentedControlChildren = segments.map((segment) =>
+        segmentedControlItemHandler.transform(segment, traverse),
+      );
 
       const commonProps = {
         ...(selectedSegment && {

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

@@ -14,7 +14,7 @@ export const createSelectBoxHandler = (_ctx: ComponentHandlerDeps) =>
     ({ componentProperties: props }) => {
       const tag = match(props.Control.value)
         .with("Checkbox", () => "CheckSelectBox")
-        .with("Radio", () => "RadioSelectBox")
+        .with("Radio", () => "RadioSelectBoxItem")
         .exhaustive();
 
       const states = props.State.value.split("-");
@@ -24,7 +24,7 @@ export const createSelectBoxHandler = (_ctx: ComponentHandlerDeps) =>
         ...(props["Show Description#3033:0"].value && {
           description: props["Description #3033:5"].value,
         }),
-        ...(tag === "RadioSelectBox" && {
+        ...(tag === "RadioSelectBoxItem" && {
           value: props["Label#3635:0"].value,
         }),
         ...(tag === "CheckSelectBox" &&
@@ -42,12 +42,12 @@ export const createSelectBoxGroupHandler = (ctx: ComponentHandlerDeps) => {
 
   return defineComponentHandler<SelectBoxGroupProperties>(
     metadata.templateSelectBoxGroup.key,
-    (node) => {
+    (node, traverse) => {
       const props = node.componentProperties;
 
       const tag = match(props.Control.value)
         .with("Checkbox", () => "CheckSelectBoxGroup")
-        .with("Radio", () => "RadioSelectBoxGroup")
+        .with("Radio", () => "RadioSelectBoxRoot")
         .exhaustive();
 
       const selectBoxes = findAllInstances<SelectBoxProperties>({
@@ -59,14 +59,17 @@ export const createSelectBoxGroupHandler = (ctx: ComponentHandlerDeps) => {
         selectBox.componentProperties.State.value.split("-").includes("Selected"),
       );
 
+      // traverse the container like it's a frame
+      const vStackProps = traverse({ ...node, type: "FRAME" })?.props;
+
       const stack = createSeedReactElement(
-        "Stack",
-        { gap: "spacingY.componentDefault" },
-        selectBoxes.map(selectBoxHandler.transform),
+        "VStack",
+        vStackProps,
+        selectBoxes.map((box) => selectBoxHandler.transform(box, traverse)),
       );
 
       const commonProps = {
-        ...(tag === "RadioSelectBoxGroup" && {
+        ...(tag === "RadioSelectBoxRoot" && {
           defaultValue: selectedSelectBox?.componentProperties["Label#3635:0"].value,
         }),
       };

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

@@ -14,8 +14,8 @@ export const createSnackbarHandler = (_ctx: ComponentHandlerDeps) =>
       const commonProps = {
         message: props["Message#1528:4"].value,
         variant: camelCase(props.Variant.value),
-        ...(props["Show Action Button#1528:0"].value && {
-          actionLabel: props["Action Button Label#1528:8"].value,
+        ...(props["Show Action#1528:0"].value && {
+          actionLabel: props["Action Label#1528:8"].value,
         }),
       };
 

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

@@ -3,7 +3,6 @@ import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import { handleSizeProp } from "../size";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("switch");
 
@@ -13,13 +12,9 @@ export const createSwitchHandler = (_ctx: ComponentHandlerDeps) =>
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
 
-      const size = handleSizeProp(props.Size.value);
-
       const commonProps = {
-        size,
-        ...(size === "small" && {
-          label: props["Label#15191:2"].value,
-        }),
+        size: props.Size.value,
+        label: props["Label#36578:0"].value,
         ...(states.includes("Selected") && {
           defaultChecked: true,
         }),

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

@@ -1,131 +1,14 @@
-import type {
-  TabsFillItemProperties,
-  TabsHugItemProperties,
-  TabsProperties,
-} from "@/codegen/component-properties";
-import { defineComponentHandler } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import type { NormalizedInstanceNode } from "@/normalizer";
-import { camelCase } from "change-case";
 import { createLocalSnippetHelper } from "../../element-factories";
-import type { ComponentHandlerDeps } from "../deps.interface";
-import { handleSizeProp } from "../size";
 
-const { createLocalSnippetElement } = createLocalSnippetHelper("tabs");
+const { createLocalSnippetElement: createTabsLocalSnippetElement } =
+  createLocalSnippetHelper("tabs");
 
-const TABS_HUG_ITEM_KEY = "c242492543b327ceb84fa9933841512fc62a898c";
-const createTabsHugItemHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<TabsHugItemProperties>(
-    TABS_HUG_ITEM_KEY,
-    ({ componentProperties: props }) => {
-      const states = props.State.value.split("-");
+const TABS_UNDERLINE_HUG_ITEM_KEY = "946cc52671ac3f46e20a8ff12fcc1c7f618da675";
+const TABS_UNDERLINE_FILL_ITEM_KEY = "78039b6b86852b685a6e93e9b6743b9e577cd7db";
 
-      const commonProps = {
-        value: props["Label#4478:2"].value,
-        ...(props.Notification.value === "True" && {
-          alert: true,
-        }),
-        ...(states.includes("Disabled") && {
-          disabled: true,
-        }),
-      };
+const { createLocalSnippetElement: createChipTabsLocalSnippetElement } =
+  createLocalSnippetHelper("chip-tabs");
 
-      return createLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
-    },
-  );
+const TABS_CHIP_ITEM_KEY = "95bf31a329f9e8bba0d9aa2299d1552f1d388148";
 
-const TABS_FILL_ITEM_KEY = "7275293344efb40ee9a3f5248ba2659b94a0b305";
-const createTabsFillItemHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<TabsFillItemProperties>(
-    TABS_FILL_ITEM_KEY,
-    ({ componentProperties: props }) => {
-      const states = props.State.value.split("-");
-
-      const commonProps = {
-        value: props["Label#4478:2"].value,
-        ...(props.Notification.value === "True" && {
-          alert: true,
-        }),
-        ...(states.includes("Disabled") && {
-          disabled: true,
-        }),
-      };
-
-      return createLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
-    },
-  );
-
-export const createTabsHandler = (ctx: ComponentHandlerDeps) => {
-  const tabsHugItemHandler = createTabsHugItemHandler(ctx);
-  const tabsFillItemHandler = createTabsFillItemHandler(ctx);
-
-  return defineComponentHandler<TabsProperties>(metadata.tablist.key, (node) => {
-    const { componentProperties: props, children } = node;
-
-    const mappedItems = children.map(
-      (
-        child,
-      ): {
-        triggerLayout: "hug" | "fill";
-        node: NormalizedInstanceNode & {
-          componentProperties: TabsHugItemProperties | TabsFillItemProperties;
-        };
-      } | null => {
-        if (child.type !== "INSTANCE") return null;
-
-        const componentKey = child.componentSetKey ? child.componentSetKey : child.componentKey;
-
-        if (componentKey === tabsHugItemHandler.key)
-          return {
-            triggerLayout: "hug" as const,
-            node: child as NormalizedInstanceNode & { componentProperties: TabsHugItemProperties },
-          };
-
-        if (componentKey === tabsFillItemHandler.key)
-          return {
-            triggerLayout: "fill" as const,
-            node: child as NormalizedInstanceNode & { componentProperties: TabsFillItemProperties },
-          };
-
-        return null;
-      },
-    );
-
-    const tabsItems = mappedItems.filter(
-      (item): item is NonNullable<(typeof mappedItems)[number]> => item !== null,
-    );
-
-    const selectedTabsItem = tabsItems.find(({ node: { componentProperties } }) =>
-      componentProperties.State.value.split("-").includes("Selected"),
-    )?.node;
-
-    const tabTriggerList = createLocalSnippetElement(
-      "TabsList",
-      undefined,
-      tabsItems.map(({ triggerLayout, node }) => {
-        switch (triggerLayout) {
-          case "hug":
-            return tabsHugItemHandler.transform(node);
-          case "fill":
-            return tabsFillItemHandler.transform(node);
-        }
-      }),
-    );
-
-    const tabContents = tabsItems.map(({ node }) => {
-      const value = node.componentProperties["Label#4478:2"].value;
-
-      return createLocalSnippetElement("TabsContent", { value }, "{/* TODO: 컨텐츠 추가 */}");
-    });
-
-    const commonProps = {
-      triggerLayout: camelCase(props.Layout.value),
-      size: handleSizeProp(props.Size.value),
-      ...(selectedTabsItem && {
-        defaultValue: selectedTabsItem.componentProperties["Label#4478:2"].value,
-      }),
-    };
-
-    return createLocalSnippetElement("TabsRoot", commonProps, [tabTriggerList, ...tabContents]);
-  });
-};
+// TODO: Implement the tabs handler

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

@@ -1,25 +1,30 @@
 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 {
+  createActionButtonHandler,
+  createActionButtonGhostHandler,
+} from "./handlers/action-button";
+import { createAlertDialogHandler } from "./handlers/alert-dialog";
 import { createAppBarHandler } from "./handlers/app-bar";
 import { createAvatarHandler } from "./handlers/avatar";
 import { createAvatarStackHandler } from "./handlers/avatar-stack";
 import { createBadgeHandler } from "./handlers/badge";
+import { createBottomSheetHandler } from "./handlers/bottom-sheet";
 import { createCalloutHandler } from "./handlers/callout";
 import { createCheckboxHandler } from "./handlers/checkbox";
-import { createChipTabsHandler } from "./handlers/chip-tabs";
-import { createControlChipHandler } from "./handlers/control-chip";
+import { createChipHandler } from "./handlers/chip";
+import { createContextualFloatingButtonHandler } from "./handlers/contextual-floating-button";
+import { createDividerHandler } from "./handlers/divider";
 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 { createFloatingActionButtonHandler } from "./handlers/floating-action-button";
 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 { createMannerTempHandler } from "./handlers/manner-temp";
+import { createMenuSheetHandler } from "./handlers/menu-sheet";
 import { createMultilineTextFieldHandler } from "./handlers/multiline-text-field";
 import { createProgressCircleHandler } from "./handlers/progress-circle";
 import { createReactionButtonHandler } from "./handlers/reaction-button";
@@ -28,8 +33,6 @@ import { createSelectBoxGroupHandler, createSelectBoxHandler } from "./handlers/
 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";
 
@@ -46,25 +49,27 @@ export function bindComponentHandler<T extends NormalizedInstanceNode["component
 }
 
 export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> = [
+  createActionButtonGhostHandler,
   createActionButtonHandler,
-  createActionChipHandler,
-  createActionSheetHandler,
+  createAlertDialogHandler,
   createAppBarHandler,
   createAvatarHandler,
   createAvatarStackHandler,
   createBadgeHandler,
+  createBottomSheetHandler,
   createCalloutHandler,
   createCheckboxHandler,
-  createChipTabsHandler,
-  createControlChipHandler,
+  createChipHandler,
+  createContextualFloatingButtonHandler,
+  createDividerHandler,
   createErrorStateHandler,
-  createExtendedActionSheetHandler,
-  createExtendedFabHandler,
-  createFabHandler,
+  createFloatingActionButtonHandler,
   createHelpBubbleHandler,
   createIdentityPlaceholderHandler,
   createInlineBannerHandler,
   createMannerTempBadgeHandler,
+  createMannerTempHandler,
+  createMenuSheetHandler,
   createMultilineTextFieldHandler,
   createProgressCircleHandler,
   createReactionButtonHandler,
@@ -74,8 +79,6 @@ export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> =
   createSkeletonHandler,
   createSnackbarHandler,
   createSwitchHandler,
-  createTabsHandler,
-  createTextButtonHandler,
   createTextFieldHandler,
   createToggleButtonHandler,
 ];

package/src/codegen/targets/react/instance.ts

@@ -37,7 +37,7 @@ export function createInstanceTransformer({
       : componentHandlers[componentKey];
 
     if (componentHandler) {
-      return componentHandler.transform(node);
+      return componentHandler.transform(node, traverse);
     }
 
     return frameTransformer(node, traverse);

package/src/codegen/targets/react/pipeline.ts

@@ -28,7 +28,8 @@ import {
 import { createTextTransformer } from "./text";
 import {
   defaultRawValueFormatters,
-  defaultStyleNameFormatter,
+  defaultTextStyleNameFormatter,
+  defaultFillStyleResolver,
   defaultVariableNameFormatter,
 } from "./value-resolver";
 
@@ -51,7 +52,8 @@ export function createPipeline(options: CreatePipelineConfig = {}) {
     variableService,
     variableNameFormatter: defaultVariableNameFormatter,
     styleService,
-    styleNameFormatter: defaultStyleNameFormatter,
+    textStyleNameFormatter: defaultTextStyleNameFormatter,
+    fillStyleResolver: defaultFillStyleResolver,
     rawValueFormatters: defaultRawValueFormatters,
     shouldInferVariableName,
   });

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

@@ -143,7 +143,7 @@ export function createContainerLayoutPropsConverter(
 }
 
 export interface SelfLayoutProps {
-  grow?: 0 | 1 | true;
+  flexGrow?: 0 | 1 | true;
   alignSelf?: "stretch";
   width?: string | number;
   height?: string | number;
@@ -162,7 +162,7 @@ export function createSelfLayoutPropsConverter(
       props: {} as SelfLayoutProps,
     },
     handlers: {
-      grow: ({ layoutGrow }) => (layoutGrow === 1 ? true : layoutGrow),
+      flexGrow: ({ layoutGrow }) => (layoutGrow === 1 ? true : layoutGrow),
       alignSelf: ({ layoutAlign }) =>
         match(layoutAlign)
           .with("STRETCH", () => "stretch" as const)
@@ -198,7 +198,7 @@ export function createSelfLayoutPropsConverter(
           : undefined,
     },
     defaults: {
-      grow: 0,
+      flexGrow: 0,
     },
   });
 }
@@ -291,16 +291,23 @@ export function createTypeStylePropsConverter({
   });
 }
 
-export interface FrameFillProps {
-  bg?: string;
-}
+export type FrameFillProps =
+  | { bg?: string | undefined; bgGradient?: never; bgGradientDirection?: never }
+  | { bg?: never; bgGradient: string; bgGradientDirection?: string };
 
 export function createFrameFillPropsConverter(valueResolver: ReactValueResolver) {
   return definePropsConverter<FillTrait, FrameFillProps>((node) => {
     const bg = valueResolver.getFormattedValue.frameFill(node);
 
+    if (bg === undefined || typeof bg === "string") {
+      return {
+        bg,
+      };
+    }
+
     return {
-      bg,
+      bgGradient: bg.value,
+      ...(bg.direction && { bgGradientDirection: bg.direction }),
     };
   });
 }
@@ -364,7 +371,7 @@ export function createVectorChildrenFillPropsConverter(valueResolver: ReactValue
 }
 
 export interface StrokeProps {
-  borderWidth?: number;
+  borderWidth?: string;
   borderColor?: string;
 }
 
@@ -373,7 +380,7 @@ export function createStrokePropsConverter(
 ): PropsConverter<StrokeTrait, StrokeProps> {
   return definePropsConverter((node) => {
     const borderColor = valueResolver.getFormattedValue.stroke(node);
-    const borderWidth = borderColor ? node.strokeWeight : undefined;
+    const borderWidth = borderColor && node.strokeWeight ? `${node.strokeWeight}` : undefined;
 
     return {
       borderColor,

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

@@ -3,7 +3,13 @@ import { camelCasePreserveUnderscoreBetweenNumbers } from "@/utils/common";
 import { toCssPixel, toCssRgba } from "@/utils/css";
 import { camelCase } from "change-case";
 
-export type ReactValueResolver = ValueResolver<string, string, string, number>;
+export type ReactValueResolver = ValueResolver<
+  string,
+  { value: string; direction?: string },
+  string,
+  string,
+  number
+>;
 
 export const defaultVariableNameFormatter = ({ slug }: { slug: string[] }) =>
   slug
@@ -21,8 +27,37 @@ export const defaultVariableNameFormatter = ({ slug }: { slug: string[] }) =>
     .map(camelCasePreserveUnderscoreBetweenNumbers)
     .join(".");
 
-export const defaultStyleNameFormatter = ({ slug }: { slug: string[] }) =>
-  camelCase(slug[slug.length - 1]!, { mergeAmbiguousCharacters: true });
+export const defaultTextStyleNameFormatter = ({ slug }: { slug: string[] }) => {
+  return camelCase(slug[slug.length - 1]!, { mergeAmbiguousCharacters: true });
+};
+
+export const defaultFillStyleResolver = ({ slug }: { slug: string[] }) => {
+  const [, ...rest] = slug;
+
+  if (rest[0] === "fade") {
+    // ["fade", "layer-default", "↓(to-bottom)"]
+
+    const last = rest[rest.length - 1];
+
+    const direction = (() => {
+      if (last.startsWith("↓")) return "to bottom";
+      if (last.startsWith("↑")) return "to top";
+      if (last.startsWith("→")) return "to right";
+      if (last.startsWith("←")) return "to left";
+
+      return "unknown";
+    })();
+
+    return {
+      value: camelCase(rest.slice(0, -1).join("-"), { mergeAmbiguousCharacters: true }),
+      direction,
+    };
+  }
+
+  return {
+    value: camelCase(rest.join("-"), { mergeAmbiguousCharacters: true }),
+  };
+};
 
 export const defaultRawValueFormatters = {
   color: (value: RGBA) => toCssRgba(value),

package/src/entities/data/__generated__/component-sets/action-button.d.ts

@@ -2,21 +2,21 @@ export declare const metadata: {
   "name": "🟢 Action Button",
   "key": "450ede9d0bf42fc6ef14345c77e6e407d6d5ee89",
   "componentPropertyDefinitions": {
+    "Label#5987:61": {
+      "type": "TEXT"
+    },
     "Suffix Icon#5987:244": {
       "type": "INSTANCE_SWAP",
       "preferredValues": []
     },
-    "Icon#7574:0": {
+    "Prefix Icon#5987:305": {
       "type": "INSTANCE_SWAP",
       "preferredValues": []
     },
-    "Prefix Icon#5987:305": {
+    "Icon#7574:0": {
       "type": "INSTANCE_SWAP",
       "preferredValues": []
     },
-    "Label#5987:61": {
-      "type": "TEXT"
-    },
     "Size": {
       "type": "VARIANT",
       "variantOptions": [