@seed-design/figma 1.3.4 → 1.3.5

package/lib/codegen/targets/react/index.js

@@ -467,7 +467,7 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
             type: "BOOLEAN_OPERATION"
         }, (node)=>booleanOperationTransformer(node, traverse)).with({
             type: "UNHANDLED"
-        }, ()=>createElement("UnhandledFigmaNode")).exhaustive();
+        }, (node)=>createElement(`Unhandled${pascalCase(node.original.type)}Node`)).exhaustive();
         if (result) {
             return appendSource(result, node.id);
         }
@@ -3464,9 +3464,9 @@ const createAppBarHandler$1 = (ctx)=>{
     });
 };
 
-const IDENTITY_PLACEHOLDER_KEY$1 = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
+const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
 const { createLocalSnippetElement: createLocalSnippetElement$15 } = createLocalSnippetHelper("identity-placeholder");
-const createIdentityPlaceholderHandler$1 = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY$1, ({ componentProperties: props })=>{
+const createIdentityPlaceholderHandler$1 = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY, ({ componentProperties: props })=>{
         const commonProps = {
             identity: camelCase(props.Identity.value)
         };
@@ -5525,6 +5525,19 @@ const privateComponentFieldHeaderSuffix = {
         }
     }
 };
+const privateComponentIdentityPlaceholder = {
+    "name": "privateComponentIdentityPlaceholder",
+    "key": "7d7ae18cabac6ebad19934516de8e7e256854eba",
+    "componentPropertyDefinitions": {
+        "Identity": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Person",
+                "Business"
+            ]
+        }
+    }
+};
 const privateComponentInputButtonPrefix = {
     "name": "privateComponentInputButtonPrefix",
     "key": "c7d12be4056a8171f6857ec4ef15d81bd18d8cae",
@@ -9497,6 +9510,7 @@ var FIGMA_COMPONENTS = {
   privateComponentFieldFooterCharacterCount: privateComponentFieldFooterCharacterCount,
   privateComponentFieldHeaderIndicator: privateComponentFieldHeaderIndicator,
   privateComponentFieldHeaderSuffix: privateComponentFieldHeaderSuffix,
+  privateComponentIdentityPlaceholder: privateComponentIdentityPlaceholder,
   privateComponentInputButtonPrefix: privateComponentInputButtonPrefix,
   privateComponentInputButtonSuffix: privateComponentInputButtonSuffix,
   privateComponentInputButtonValue: privateComponentInputButtonValue,
@@ -9747,9 +9761,6 @@ const privateTemplateSelectField = {
 const privateTemplateTimePickerField = {
     "key": "e38df17cf1e0f96e09774b015739dfde30d46115"
 };
-const privateComponentBottomSheetContentsPlaceholder = {
-    "key": "e68b006d572300d3c987776192c8ab387fa45e05"
-};
 const privateComponentTopNavigationLeftIconButton = {
     "key": "c3e708bab11d8ea90a909b4539b6ba6b2a4e7b9c"};
 const componentChipSuffixIcon = {
@@ -9911,10 +9922,8 @@ const createAppBarPresetHandler = (ctx)=>{
     });
 };
 
-// hardcoded since this lives in a different figma file
-const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
 const { createLocalSnippetElement: createLocalSnippetElement$x } = createLocalSnippetHelper("identity-placeholder");
-const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY, ({ componentProperties: props })=>{
+const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(privateComponentIdentityPlaceholder.key, ({ componentProperties: props })=>{
         const commonProps = {
             identity: camelCase(props.Identity.value)
         };
@@ -9997,7 +10006,7 @@ const createBottomSheetHandler = (_ctx)=>defineComponentHandler(componentBottomS
         };
         const bodyNodes = findAllInstances({
             node,
-            key: privateComponentBottomSheetContentsPlaceholder.key
+            key: props["Contents#25320:0"].componentKey
         });
         const bottomSheetBody = bodyNodes.length === 1 ? createLocalSnippetElement$u("BottomSheetBody", {}, bodyNodes[0].children.map(traverse)) : createLocalSnippetElement$u("BottomSheetBody", {}, createElement("div", undefined, "No content available"));
         const footerNodes = findAllInstances({
@@ -10968,7 +10977,7 @@ const createMenuSheetHandler = (ctx)=>{
         const trigger = createLocalSnippetElement$f("MenuSheetTrigger", {
             asChild: true
         }, createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"));
-        return createLocalSnippetElement$f("MenuSheet", undefined, [
+        return createLocalSnippetElement$f("MenuSheetRoot", undefined, [
             trigger,
             content
         ]);
@@ -11713,7 +11722,7 @@ const createLineTriggerHugHandler = (_ctx)=>defineComponentHandler(privateCompon
                 notification: true
             }
         };
-        return createTabsLocalSnippetElement("TabsTrigger", commonProps);
+        return createTabsLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
     });
 const createLineTriggerFillHandler = (_ctx)=>defineComponentHandler(privateComponentTabItemLineFill.key, ({ componentProperties: props })=>{
         const commonProps = {
@@ -11725,7 +11734,7 @@ const createLineTriggerFillHandler = (_ctx)=>defineComponentHandler(privateCompo
                 notification: true
             }
         };
-        return createTabsLocalSnippetElement("TabsTrigger", commonProps);
+        return createTabsLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
     });
 /*
 <ChipTabsRoot
@@ -11813,7 +11822,7 @@ const createChipTabsTriggerHandler = (_ctx)=>defineComponentHandler(privateCompo
                 notification: true
             }
         };
-        return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps);
+        return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps, chipProps["Label#7185:0"].value);
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$2 } = createLocalSnippetHelper("tag-group");
@@ -24332,6 +24341,7 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:576:22878",
             "VariableID:59176:2",
             "VariableID:59176:3",
+            "VariableID:61337:3",
             "VariableID:654:20851",
             "VariableID:670:2700",
             "VariableID:6782:76317",
@@ -31165,6 +31175,30 @@ const FIGMA_VARIABLES = {
         ],
         "codeSyntax": {}
     },
+    "VariableID:61337:3": {
+        "name": "stroke/focus-ring",
+        "id": "VariableID:61337:3",
+        "remote": false,
+        "key": "ca937a0bb83fda59d06959cfb5d960f00b5e9add",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:1883:92938"
+            },
+            "1928:8": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:1883:92938"
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
     "VariableID:41338:806": {
         "name": "stroke/informative-solid",
         "id": "VariableID:41338:806",

package/lib/index.cjs

@@ -15217,6 +15217,7 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:576:22878",
             "VariableID:59176:2",
             "VariableID:59176:3",
+            "VariableID:61337:3",
             "VariableID:654:20851",
             "VariableID:670:2700",
             "VariableID:6782:76317",
@@ -22050,6 +22051,30 @@ const FIGMA_VARIABLES = {
         ],
         "codeSyntax": {}
     },
+    "VariableID:61337:3": {
+        "name": "stroke/focus-ring",
+        "id": "VariableID:61337:3",
+        "remote": false,
+        "key": "ca937a0bb83fda59d06959cfb5d960f00b5e9add",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:1883:92938"
+            },
+            "1928:8": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:1883:92938"
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
     "VariableID:41338:806": {
         "name": "stroke/informative-solid",
         "id": "VariableID:41338:806",
@@ -22565,6 +22590,19 @@ const privateComponentFieldHeaderSuffix = {
         }
     }
 };
+const privateComponentIdentityPlaceholder = {
+    "name": "privateComponentIdentityPlaceholder",
+    "key": "7d7ae18cabac6ebad19934516de8e7e256854eba",
+    "componentPropertyDefinitions": {
+        "Identity": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Person",
+                "Business"
+            ]
+        }
+    }
+};
 const privateComponentInputButtonPrefix = {
     "name": "privateComponentInputButtonPrefix",
     "key": "c7d12be4056a8171f6857ec4ef15d81bd18d8cae",
@@ -26537,6 +26575,7 @@ var FIGMA_COMPONENTS = {
   privateComponentFieldFooterCharacterCount: privateComponentFieldFooterCharacterCount,
   privateComponentFieldHeaderIndicator: privateComponentFieldHeaderIndicator,
   privateComponentFieldHeaderSuffix: privateComponentFieldHeaderSuffix,
+  privateComponentIdentityPlaceholder: privateComponentIdentityPlaceholder,
   privateComponentInputButtonPrefix: privateComponentInputButtonPrefix,
   privateComponentInputButtonSuffix: privateComponentInputButtonSuffix,
   privateComponentInputButtonValue: privateComponentInputButtonValue,

package/lib/index.js

@@ -15217,6 +15217,7 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:576:22878",
             "VariableID:59176:2",
             "VariableID:59176:3",
+            "VariableID:61337:3",
             "VariableID:654:20851",
             "VariableID:670:2700",
             "VariableID:6782:76317",
@@ -22050,6 +22051,30 @@ const FIGMA_VARIABLES = {
         ],
         "codeSyntax": {}
     },
+    "VariableID:61337:3": {
+        "name": "stroke/focus-ring",
+        "id": "VariableID:61337:3",
+        "remote": false,
+        "key": "ca937a0bb83fda59d06959cfb5d960f00b5e9add",
+        "variableCollectionId": "VariableCollectionId:1:3",
+        "resolvedType": "COLOR",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+            "1928:7": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:1883:92938"
+            },
+            "1928:8": {
+                "type": "VARIABLE_ALIAS",
+                "id": "VariableID:1883:92938"
+            }
+        },
+        "scopes": [
+            "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+    },
     "VariableID:41338:806": {
         "name": "stroke/informative-solid",
         "id": "VariableID:41338:806",
@@ -22565,6 +22590,19 @@ const privateComponentFieldHeaderSuffix = {
         }
     }
 };
+const privateComponentIdentityPlaceholder = {
+    "name": "privateComponentIdentityPlaceholder",
+    "key": "7d7ae18cabac6ebad19934516de8e7e256854eba",
+    "componentPropertyDefinitions": {
+        "Identity": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "Person",
+                "Business"
+            ]
+        }
+    }
+};
 const privateComponentInputButtonPrefix = {
     "name": "privateComponentInputButtonPrefix",
     "key": "c7d12be4056a8171f6857ec4ef15d81bd18d8cae",
@@ -26537,6 +26575,7 @@ var FIGMA_COMPONENTS = {
   privateComponentFieldFooterCharacterCount: privateComponentFieldFooterCharacterCount,
   privateComponentFieldHeaderIndicator: privateComponentFieldHeaderIndicator,
   privateComponentFieldHeaderSuffix: privateComponentFieldHeaderSuffix,
+  privateComponentIdentityPlaceholder: privateComponentIdentityPlaceholder,
   privateComponentInputButtonPrefix: privateComponentInputButtonPrefix,
   privateComponentInputButtonSuffix: privateComponentInputButtonSuffix,
   privateComponentInputButtonValue: privateComponentInputButtonValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,7 +39,7 @@
     "sync-entities": "find src/entities/data/__generated__ -mindepth 1 -maxdepth 1 ! -name 'archive' -exec rm -rf {} + 2>/dev/null; bun figma-extractor src/entities/data/__generated__"
   },
   "dependencies": {
-    "@seed-design/css": "1.2.3",
+    "@seed-design/css": "1.2.4",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },

package/src/codegen/component-properties.ts

@@ -110,6 +110,10 @@ export type HelpBubbleProperties = InferComponentDefinition<
   typeof sets.componentHelpBubble.componentPropertyDefinitions
 >;
 
+export type IdentityPlaceholderProperties = InferComponentDefinition<
+  typeof sets.privateComponentIdentityPlaceholder.componentPropertyDefinitions
+>;
+
 export type ImageFrameProperties = InferComponentDefinition<
   typeof sets.componentImageFrame.componentPropertyDefinitions
 >;

package/src/codegen/core/codegen.ts

@@ -12,6 +12,7 @@ import { match } from "ts-pattern";
 import { appendSource, createElement, stringifyElement, type ElementNode } from "../core/jsx";
 import type { ElementTransformer } from "./element-transformer";
 import { applyInferredLayout, inferLayout } from "./infer-layout";
+import { pascalCase } from "change-case";
 
 export interface CodeGeneratorDeps {
   frameTransformer: ElementTransformer<
@@ -77,7 +78,9 @@ export function createCodeGenerator({
       .with({ type: "INSTANCE" }, (node) => instanceTransformer(node, traverse))
       .with({ type: "VECTOR" }, (node) => vectorTransformer(node, traverse))
       .with({ type: "BOOLEAN_OPERATION" }, (node) => booleanOperationTransformer(node, traverse))
-      .with({ type: "UNHANDLED" }, () => createElement("UnhandledFigmaNode"))
+      .with({ type: "UNHANDLED" }, (node) =>
+        createElement(`Unhandled${pascalCase(node.original.type)}Node`),
+      )
       .exhaustive();
 
     if (result) {
@@ -94,7 +97,7 @@ export function createCodeGenerator({
   function generateCode(node: NormalizedSceneNode, options: { shouldPrintSource: boolean }) {
     if (isSkippedInstance(node)) {
       return { imports: "", jsx: "// This component is intentionally excluded from codegen" };
-     }
+    }
 
     const jsxTree = generateJsxTree(node);
 

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

@@ -1,7 +1,6 @@
 import type { BottomSheetProperties } from "@/codegen/component-properties";
 import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
-import * as components from "@/entities/data/__generated__/components";
 import { match } from "ts-pattern";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
@@ -33,7 +32,7 @@ export const createBottomSheetHandler = (_ctx: ComponentHandlerDeps) =>
 
       const bodyNodes = findAllInstances({
         node,
-        key: components.privateComponentBottomSheetContentsPlaceholder.key,
+        key: props["Contents#25320:0"].componentKey,
       });
 
       const bottomSheetBody =

package/src/codegen/targets/react/component/handlers/identity-placeholder.ts

@@ -1,24 +1,15 @@
-import { defineComponentHandler, type InferComponentDefinition } from "@/codegen/core";
+import { defineComponentHandler } from "@/codegen/core";
 import { camelCase } from "change-case";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-
-// hardcoded since this lives in a different figma file
-const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
-
-export type IdentityPlaceholderProperties = InferComponentDefinition<{
-  Identity: {
-    type: "VARIANT";
-    defaultValue: "Person";
-    variantOptions: ["Person", "Business"];
-  };
-}>;
+import type { IdentityPlaceholderProperties } from "@/codegen/component-properties";
+import * as metadata from "@/entities/data/__generated__/component-sets";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("identity-placeholder");
 
 export const createIdentityPlaceholderHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<IdentityPlaceholderProperties>(
-    IDENTITY_PLACEHOLDER_KEY,
+    metadata.privateComponentIdentityPlaceholder.key,
     ({ componentProperties: props }) => {
       const commonProps = {
         identity: camelCase(props.Identity.value),

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

@@ -105,7 +105,7 @@ export const createMenuSheetHandler = (ctx: ComponentHandlerDeps) => {
         createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"),
       );
 
-      return createLocalSnippetElement("MenuSheet", undefined, [trigger, content]);
+      return createLocalSnippetElement("MenuSheetRoot", undefined, [trigger, content]);
     },
   );
 };

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

@@ -156,7 +156,7 @@ const createLineTriggerHugHandler = (_ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createTabsLocalSnippetElement("TabsTrigger", commonProps);
+      return createTabsLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
     },
   );
 
@@ -174,7 +174,7 @@ const createLineTriggerFillHandler = (_ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createTabsLocalSnippetElement("TabsTrigger", commonProps);
+      return createTabsLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
     },
   );
 
@@ -289,6 +289,10 @@ const createChipTabsTriggerHandler = (_ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps);
+      return createChipTabsLocalSnippetElement(
+        "ChipTabsTrigger",
+        commonProps,
+        chipProps["Label#7185:0"].value,
+      );
     },
   );

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

@@ -223,6 +223,20 @@ export declare const privateComponentFieldHeaderSuffix: {
   }
 };
 
+export declare const privateComponentIdentityPlaceholder: {
+  "name": "privateComponentIdentityPlaceholder",
+  "key": "7d7ae18cabac6ebad19934516de8e7e256854eba",
+  "componentPropertyDefinitions": {
+    "Identity": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Person",
+        "Business"
+      ]
+    }
+  }
+};
+
 export declare const privateComponentInputButtonPrefix: {
   "name": "privateComponentInputButtonPrefix",
   "key": "c7d12be4056a8171f6857ec4ef15d81bd18d8cae",
@@ -4244,4 +4258,4 @@ export declare const componentSelectBoxItemVertical: {
       ]
     }
   }
-};
+};

package/src/entities/data/__generated__/component-sets/index.mjs

@@ -223,6 +223,20 @@ export const privateComponentFieldHeaderSuffix = {
   }
 };
 
+export const privateComponentIdentityPlaceholder = {
+  "name": "privateComponentIdentityPlaceholder",
+  "key": "7d7ae18cabac6ebad19934516de8e7e256854eba",
+  "componentPropertyDefinitions": {
+    "Identity": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Person",
+        "Business"
+      ]
+    }
+  }
+};
+
 export const privateComponentInputButtonPrefix = {
   "name": "privateComponentInputButtonPrefix",
   "key": "c7d12be4056a8171f6857ec4ef15d81bd18d8cae",
@@ -4244,4 +4258,4 @@ export const componentSelectBoxItemVertical = {
       ]
     }
   }
-};
+};

package/src/entities/data/__generated__/components/index.d.ts

@@ -375,4 +375,4 @@ export declare const componentSelectBoxItemSuffixRadiomark: {
 export declare const componentFigmaOnly: {
   "name": "componentFigmaOnly",
   "key": "a790da2ff1fb6f761abf202034920c1504b8f8f1"
-};
+};

package/src/entities/data/__generated__/components/index.mjs

@@ -375,4 +375,4 @@ export const componentSelectBoxItemSuffixRadiomark = {
 export const componentFigmaOnly = {
   "name": "componentFigmaOnly",
   "key": "a790da2ff1fb6f761abf202034920c1504b8f8f1"
-};
+};

package/src/entities/data/__generated__/variable-collections/index.mjs

@@ -289,6 +289,7 @@ export const FIGMA_VARIABLE_COLLECTIONS = {
       "VariableID:576:22878",
       "VariableID:59176:2",
       "VariableID:59176:3",
+      "VariableID:61337:3",
       "VariableID:654:20851",
       "VariableID:670:2700",
       "VariableID:6782:76317",

package/src/entities/data/__generated__/variables/index.mjs

@@ -6643,6 +6643,30 @@ export const FIGMA_VARIABLES = {
     ],
     "codeSyntax": {}
   },
+  "VariableID:61337:3": {
+    "name": "stroke/focus-ring",
+    "id": "VariableID:61337:3",
+    "remote": false,
+    "key": "ca937a0bb83fda59d06959cfb5d960f00b5e9add",
+    "variableCollectionId": "VariableCollectionId:1:3",
+    "resolvedType": "COLOR",
+    "description": "",
+    "hiddenFromPublishing": false,
+    "valuesByMode": {
+      "1928:7": {
+        "type": "VARIABLE_ALIAS",
+        "id": "VariableID:1883:92938"
+      },
+      "1928:8": {
+        "type": "VARIABLE_ALIAS",
+        "id": "VariableID:1883:92938"
+      }
+    },
+    "scopes": [
+      "ALL_SCOPES"
+    ],
+    "codeSyntax": {}
+  },
   "VariableID:41338:806": {
     "name": "stroke/informative-solid",
     "id": "VariableID:41338:806",