@seed-design/figma 1.1.9 → 1.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,14 +39,14 @@
     "sync-entities": "rm -rf src/entities/data/__generated__ && bun figma-extractor src/entities/data/__generated__"
   },
   "dependencies": {
-    "@seed-design/css": "1.1.9",
+    "@seed-design/css": "1.1.10",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.110.0",
     "@figma/rest-api-spec": "^0.34.0",
-    "@karrotmarket/icon-data": "^1.6.0",
+    "@karrotmarket/icon-data": "^1.13.0",
     "@seed-design/figma-extractor": "^1.0.0",
     "typescript": "^5.9.2"
   },

package/src/codegen/component-properties.ts

@@ -76,10 +76,6 @@ export type DividerProperties = InferComponentDefinition<
   typeof sets.divider.componentPropertyDefinitions
 >;
 
-export type ErrorStateProperties = InferComponentDefinition<
-  typeof sets.templateErrorState.componentPropertyDefinitions
->;
-
 export type FieldHeaderProperties = InferComponentDefinition<{
   "Label#34796:0": {
     type: "TEXT";
@@ -321,6 +317,10 @@ export type ReactionButtonProperties = InferComponentDefinition<
   typeof sets.reactionButton.componentPropertyDefinitions
 >;
 
+export type ResultSectionProperties = InferComponentDefinition<
+  typeof sets.templateResultSection.componentPropertyDefinitions
+>;
+
 export type SegmentedControlProperties = InferComponentDefinition<
   typeof sets.segmentedControl.componentPropertyDefinitions
 >;

package/src/codegen/targets/react/component/handlers/list-item.ts

@@ -141,7 +141,7 @@ export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
           tag === "ListSwitchItem") && {
           disabled: true,
         }),
-      ...(props.State.value === "Highlighted" && {
+      ...(props.Highlighted.value === "True" && {
         highlighted: true,
       }),
     };

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

@@ -79,14 +79,14 @@ export const createMenuSheetHandler = (ctx: ComponentHandlerDeps) => {
     // 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" }))
+    const { labelAlign } = match(props.Layout.value)
+      .with("Text with Icon", "Text with Subtext", () => ({ labelAlign: "left" }))
+      .with("Text Only", () => ({ labelAlign: "center" }))
       .exhaustive();
 
     const content = createLocalSnippetElement(
       "MenuSheetContent",
-      { title, labelAlignment },
+      { title, labelAlign },
       contentChildren,
       {
         comment: title

package/src/codegen/targets/react/component/handlers/result-section.ts

@@ -0,0 +1,67 @@
+import type {
+  ActionButtonGhostProperties,
+  ActionButtonProperties,
+  ResultSectionProperties,
+} from "@/codegen/component-properties";
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { findAllInstances } from "@/utils/figma-node";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { createActionButtonGhostHandler, createActionButtonHandler } from "./action-button";
+import { handleSizeProp } from "@/codegen/targets/react/component/size";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("result-section");
+
+export const createResultSectionHandler = (ctx: ComponentHandlerDeps) => {
+  const actionButtonHandler = createActionButtonHandler(ctx);
+  const ghostButtonHandler = createActionButtonGhostHandler(ctx);
+
+  return defineComponentHandler<ResultSectionProperties>(
+    metadata.templateResultSection.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const [actionButton] =
+        props["Show Buttons#53435:0"].value && props["ㄴShow First Button#53766:0"].value
+          ? findAllInstances<ActionButtonProperties>({
+              node,
+              key: actionButtonHandler.key,
+            })
+          : [undefined];
+
+      const [ghostButton] =
+        props["Show Buttons#53435:0"].value && props["ㄴShow Second Button#53766:3"].value
+          ? findAllInstances<ActionButtonGhostProperties>({
+              node,
+              key: ghostButtonHandler.key,
+            })
+          : [undefined];
+
+      const commonProps = {
+        size: handleSizeProp(props.Size.value),
+        ...(props["Show Asset#45154:14"].value && {
+          asset: createSeedReactElement(
+            "Box",
+            undefined,
+            createElement("div", undefined, undefined, { comment: "Asset Placeholder" }),
+          ),
+        }),
+        title: props["Title#16237:0"].value,
+        description: props["Description#16237:5"].value,
+        ...(actionButton && {
+          primaryActionProps: {
+            children: actionButtonHandler.transform(actionButton, traverse).children[0],
+          },
+        }),
+        ...(ghostButton && {
+          secondaryActionProps: {
+            children: ghostButtonHandler.transform(ghostButton, traverse).children[0],
+          },
+        }),
+      };
+
+      return createLocalSnippetElement("ResultSection", commonProps);
+    },
+  );
+};

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

@@ -18,7 +18,6 @@ import { createCheckmarkHandler } from "@/codegen/targets/react/component/handle
 import { createChipHandler } from "./handlers/chip";
 import { createContextualFloatingButtonHandler } from "./handlers/contextual-floating-button";
 import { createDividerHandler } from "./handlers/divider";
-import { createErrorStateHandler } from "./handlers/error-state";
 import {
   createFieldButtonHandler,
   createAddressFieldHandler,
@@ -39,6 +38,7 @@ import { createProgressCircleHandler } from "./handlers/progress-circle";
 import { createRadioGroupItemHandler } from "@/codegen/targets/react/component/handlers/radio-group";
 import { createRadioMarkHandler } from "@/codegen/targets/react/component/handlers/radio-mark";
 import { createReactionButtonHandler } from "./handlers/reaction-button";
+import { createResultSectionHandler } from "./handlers/result-section";
 import { createSegmentedControlHandler } from "./handlers/segmented-control";
 import { createSelectBoxGroupHandler, createSelectBoxHandler } from "./handlers/select-box";
 import { createSkeletonHandler } from "./handlers/skeleton";
@@ -112,7 +112,7 @@ export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> =
   createDatePickerFieldHandler,
   createSelectFieldHandler,
   createTimePickerFieldHandler,
-  createErrorStateHandler,
+  createResultSectionHandler,
   createContextualFloatingButtonHandler,
   createFloatingActionButtonHandler,
   createHelpBubbleHandler,

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

@@ -79,35 +79,6 @@ export declare const templateChipGroup: {
   }
 };
 
-export declare const templateCompletion: {
-  "name": "templateCompletion",
-  "key": "d91c789c66c2da665d820318f1a4d8671946eb79",
-  "componentPropertyDefinitions": {
-    "Description#28427:4": {
-      "type": "TEXT"
-    },
-    "Title#28427:5": {
-      "type": "TEXT"
-    },
-    "Show Description#28427:6": {
-      "type": "BOOLEAN"
-    },
-    "Show Button#28427:7": {
-      "type": "BOOLEAN"
-    },
-    "Show Top Navigation#28427:8": {
-      "type": "BOOLEAN"
-    },
-    "Variant": {
-      "type": "VARIANT",
-      "variantOptions": [
-        "Screen",
-        "Dialog"
-      ]
-    }
-  }
-};
-
 export declare const templateCustomPickerField: {
   "name": "templateCustomPickerField",
   "key": "91d73dfc297a467d78dc91ade6ff9be9a152619e",
@@ -121,7 +92,7 @@ export declare const templateCustomPickerField: {
     "State": {
       "type": "VARIANT",
       "variantOptions": [
-        "Default",
+        "Enabled",
         "Error",
         "Disabled",
         "Read Only"
@@ -137,31 +108,70 @@ export declare const templateCustomPickerField: {
   }
 };
 
-export declare const templateErrorState: {
-  "name": "templateErrorState",
-  "key": "39b4ecd0b5b4d35f4dc5791765ca04aa062a5172",
+export declare const templateResultSection: {
+  "name": "templateResultSection",
+  "key": "fabd52c41c63d921e37e0a1de373e4df2b496f30",
   "componentPropertyDefinitions": {
-    "Show Action Button#9080:5": {
-      "type": "BOOLEAN"
-    },
     "Title#16237:0": {
       "type": "TEXT"
     },
     "Description#16237:5": {
       "type": "TEXT"
     },
-    "Variant": {
-      "type": "VARIANT",
-      "variantOptions": [
-        "Default",
-        "Basement"
+    "Asset Type#45154:9": {
+      "type": "INSTANCE_SWAP",
+      "preferredValues": [
+        {
+          "type": "COMPONENT",
+          "key": "3f2ed06bd34fbaf24d371cefa973e09e2c2572bf"
+        },
+        {
+          "type": "COMPONENT",
+          "key": "bf1ad3ad5c45a2e94fd800f7f6ecbe52ba0667ab"
+        },
+        {
+          "type": "COMPONENT",
+          "key": "d357dcf0fbff80f3bfa70fe4fd5d48a9bddd1b49"
+        },
+        {
+          "type": "COMPONENT",
+          "key": "a53df434b562c1eeb04dab9abd88431989c5fc33"
+        },
+        {
+          "type": "COMPONENT",
+          "key": "5e53811a1e1444deccb5147b6a57196a3be467c9"
+        },
+        {
+          "type": "COMPONENT",
+          "key": "3ff3999d2d2bbed2c7656210793d4f083901f73b"
+        },
+        {
+          "type": "COMPONENT",
+          "key": "56fcf964b7784ca83eaf6c9b1531de6150d23a0d"
+        },
+        {
+          "type": "COMPONENT",
+          "key": "5652618ddd66c844ab977d083d0dc41cb98f98ae"
+        }
       ]
     },
-    "Layout": {
+    "Show Asset#45154:14": {
+      "type": "BOOLEAN"
+    },
+    "Show Buttons#53435:0": {
+      "type": "BOOLEAN"
+    },
+    "ㄴShow First Button#53766:0": {
+      "type": "BOOLEAN"
+    },
+    "ㄴShow Second Button#53766:3": {
+      "type": "BOOLEAN"
+    },
+    "Size": {
       "type": "VARIANT",
       "variantOptions": [
-        "With Title",
-        "Description Only"
+        "Large",
+        "Medium"
       ]
     }
   }
@@ -205,11 +215,11 @@ export declare const templateSliderField: {
     "State": {
       "type": "VARIANT",
       "variantOptions": [
-        "Default",
+        "Enabled",
+        "Pressed",
         "Error",
         "Disabled",
-        "Read Only",
-        "Pressed"
+        "Read Only"
       ]
     }
   }
@@ -235,7 +245,7 @@ export declare const templateTextField: {
     "State": {
       "type": "VARIANT",
       "variantOptions": [
-        "Default",
+        "Enabled",
         "Focused",
         "Error",
         "Error Focused",
@@ -260,7 +270,7 @@ export declare const templateTextareaField: {
     "State": {
       "type": "VARIANT",
       "variantOptions": [
-        "Default",
+        "Enabled",
         "Focused",
         "Error",
         "Error Focused",
@@ -291,7 +301,8 @@ export declare const templateTopNavigation: {
     "Variants": {
       "type": "VARIANT",
       "variantOptions": [
-        "Main Tab",
+        "Root",
+        "Root Preset",
         "Standard",
         "Standard Transparent",
         "Large Title"
@@ -572,6 +583,9 @@ export declare const bottomSheet: {
     "Show Handle#49774:6": {
       "type": "BOOLEAN"
     },
+    "Show Scroll Fog(Figma Only)#53171:3": {
+      "type": "BOOLEAN"
+    },
     "Header Layout": {
       "type": "VARIANT",
       "variantOptions": [
@@ -1114,8 +1128,7 @@ export declare const listItem: {
       "variantOptions": [
         "Enabled",
         "Pressed",
-        "Disabled",
-        "Highlighted"
+        "Disabled"
       ]
     },
     "Variants": {
@@ -1124,56 +1137,12 @@ export declare const listItem: {
         "Single Line",
         "Multi Line"
       ]
-    }
-  }
-};
-
-export declare const mainTabNavigationGlobal: {
-  "name": "mainTabNavigationGlobal",
-  "key": "a694a1da14a5c1d7d5c66bc78218c0c61fb388ab",
-  "componentPropertyDefinitions": {
-    "Title#6406:6": {
-      "type": "TEXT"
-    },
-    "Button Label#6409:18": {
-      "type": "TEXT"
-    },
-    "Title Type": {
-      "type": "VARIANT",
-      "variantOptions": [
-        "Text",
-        "Text +  Button"
-      ]
     },
-    "Variant": {
+    "Highlighted": {
       "type": "VARIANT",
       "variantOptions": [
-        "Layer Default",
-        "Transparent"
-      ]
-    }
-  }
-};
-
-export declare const mainTabNavigationKr: {
-  "name": "mainTabNavigationKr",
-  "key": "41d3601e6b4c632a56cdc8fad485a76c026fdd8e",
-  "componentPropertyDefinitions": {
-    "Title#6406:6": {
-      "type": "TEXT"
-    },
-    "Title Type": {
-      "type": "VARIANT",
-      "variantOptions": [
-        "Text",
-        "Button"
-      ]
-    },
-    "Variant": {
-      "type": "VARIANT",
-      "variantOptions": [
-        "Layer Default",
-        "Transparent"
+        "True",
+        "False"
       ]
     }
   }
@@ -1239,7 +1208,7 @@ export declare const menuSheet: {
     "Show Safe Area#25531:15": {
       "type": "BOOLEAN"
     },
-    "Show Description#32984:0": {
+    "Show Header Description#32984:0": {
       "type": "BOOLEAN"
     },
     "Menu Group Count": {
@@ -1254,7 +1223,8 @@ export declare const menuSheet: {
       "type": "VARIANT",
       "variantOptions": [
         "Text Only",
-        "Text with Icon"
+        "Text with Icon",
+        "Text with Subtext"
       ]
     }
   }
@@ -1507,24 +1477,46 @@ export declare const resizableChild: {
   }
 };
 
-export declare const scrollFog: {
-  "name": "scrollFog",
-  "key": "0a06ea65fe164e0245fde6ac6c97135990a4de3c",
+export declare const rootTopNavigationGlobal: {
+  "name": "rootTopNavigationGlobal",
+  "key": "a694a1da14a5c1d7d5c66bc78218c0c61fb388ab",
   "componentPropertyDefinitions": {
-    "Orientation": {
+    "Title#6406:6": {
+      "type": "TEXT"
+    },
+    "Button Label#6409:18": {
+      "type": "TEXT"
+    },
+    "Show Button#52619:0": {
+      "type": "BOOLEAN"
+    },
+    "Title Type": {
       "type": "VARIANT",
       "variantOptions": [
-        "Top ⬇️",
-        "Bottom ⬆️",
-        "Right ➡️",
-        "Left ⬅️"
+        "Text"
       ]
     },
-    "Layer": {
+    "Variant": {
       "type": "VARIANT",
       "variantOptions": [
-        "Default",
-        "Floating"
+        "Layer Default"
+      ]
+    }
+  }
+};
+
+export declare const rootTopNavigationKr: {
+  "name": "rootTopNavigationKr",
+  "key": "41d3601e6b4c632a56cdc8fad485a76c026fdd8e",
+  "componentPropertyDefinitions": {
+    "Title#6406:6": {
+      "type": "TEXT"
+    },
+    "Title Type": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Text",
+        "Button"
       ]
     }
   }
@@ -1607,7 +1599,7 @@ export declare const skeleton: {
 
 export declare const slider: {
   "name": "slider",
-  "key": "c748f314f790eb804138bd105bfb0bd0584c9aa1",
+  "key": "14b3278452f03fa01ecc8012a07f124766714566",
   "componentPropertyDefinitions": {
     "Has Tick Mark#47921:0": {
       "type": "BOOLEAN"