@seed-design/figma 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -38,14 +38,14 @@
     "lint:publish": "bun publint"
   },
   "dependencies": {
-    "@seed-design/css": "0.1.7",
+    "@seed-design/css": "0.1.8",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.110.0",
     "@figma/rest-api-spec": "^0.33.0",
-    "@seed-design/figma-extractor": "^0.0.4",
+    "@seed-design/figma-extractor": "^0.0.5",
     "typescript": "^5.8.3"
   },
   "publishConfig": {

package/src/codegen/component-properties.ts

@@ -5,28 +5,81 @@ export type ActionButtonProperties = InferComponentDefinition<
   typeof metadata.actionButton.componentPropertyDefinitions
 >;
 
-export type ActionChipProperties = InferComponentDefinition<
-  typeof metadata.actionChip.componentPropertyDefinitions
->;
-
-export type ActionSheetProperties = InferComponentDefinition<
-  typeof metadata.actionSheet.componentPropertyDefinitions
->;
-
-export type ActionSheetItemProperties = InferComponentDefinition<{
-  "Label#15420:4": {
+export type ActionButtonGhostProperties = InferComponentDefinition<{
+  "Label#30511:2": {
     type: "TEXT";
-    defaultValue: "액션 버튼";
+    defaultValue: "라벨";
   };
-  Tone: {
+  "Prefix Icon#30511:3": {
+    type: "INSTANCE_SWAP";
+    defaultValue: "26621:24682";
+    preferredValues: [];
+  };
+  "Suffix Icon#30525:0": {
+    type: "INSTANCE_SWAP";
+    defaultValue: "26621:23545";
+    preferredValues: [
+      {
+        type: "COMPONENT_SET";
+        key: "c8415f85843e5aea5a1d3620d03d16b643bf86cd";
+      },
+      {
+        type: "COMPONENT_SET";
+        key: "0d0a2bc648a2c4e1f06a56a30ef16299b6e91037";
+      },
+      {
+        type: "COMPONENT_SET";
+        key: "8f28ae559baf8f388d84ccc3ad65a282966e1b05";
+      },
+      {
+        type: "COMPONENT_SET";
+        key: "57341e8a9961bf31590240dd288e57c76969098d";
+      },
+    ];
+  };
+  "Icon#30525:15": {
+    type: "INSTANCE_SWAP";
+    defaultValue: "34885:102336";
+    preferredValues: [];
+  };
+  Bleed: {
+    type: "VARIANT";
+    defaultValue: "true";
+    variantOptions: ["true", "false"];
+  };
+  Size: {
+    type: "VARIANT";
+    defaultValue: "Medium";
+    variantOptions: ["Xsmall", "Small", "Medium", "Large"];
+  };
+  Layout: {
     type: "VARIANT";
-    defaultValue: "Default";
-    variantOptions: ["Default", "Critical"];
+    defaultValue: "Icon First";
+    variantOptions: ["Text Only", "Icon First", "Icon Last", "Icon Only"];
   };
   State: {
     type: "VARIANT";
     defaultValue: "Enabled";
-    variantOptions: ["Enabled", "Enabled-Pressed", "Disabled"];
+    variantOptions: ["Enabled", "Pressed", "Loading", "Disabled"];
+  };
+}>;
+
+export type AlertDialogProperties = InferComponentDefinition<
+  typeof metadata.alertDialog.componentPropertyDefinitions
+>;
+
+export type AlertDialogFooterProperties = InferComponentDefinition<{
+  Type: {
+    type: "VARIANT";
+    defaultValue: "Single";
+    variantOptions: [
+      "Single",
+      "Neutral",
+      "Neutral (Overflow)",
+      "Critical",
+      "Critical (Overflow)",
+      "Nonpreferred",
+    ];
   };
 }>;
 
@@ -42,6 +95,10 @@ export type BadgeProperties = InferComponentDefinition<
   typeof metadata.badge.componentPropertyDefinitions
 >;
 
+export type BottomSheetProperties = InferComponentDefinition<
+  typeof metadata.bottomSheet.componentPropertyDefinitions
+>;
+
 export type CalloutProperties = InferComponentDefinition<
   typeof metadata.callout.componentPropertyDefinitions
 >;
@@ -50,47 +107,27 @@ export type CheckboxProperties = InferComponentDefinition<
   typeof metadata.checkbox.componentPropertyDefinitions
 >;
 
-export type ChipTabsProperties = InferComponentDefinition<
-  typeof metadata.chipTablist.componentPropertyDefinitions
+export type ChipProperties = InferComponentDefinition<
+  typeof metadata.chip.componentPropertyDefinitions
 >;
 
-export type ChipTabsItemProperties = InferComponentDefinition<{
-  "Label#8876:0": {
-    type: "TEXT";
-    defaultValue: "라벨";
-  };
-  Variant: {
-    type: "VARIANT";
-    defaultValue: "Neutral Solid";
-    variantOptions: ["Neutral Solid", "Brand Solid"];
-  };
-  State: {
-    type: "VARIANT";
-    defaultValue: "Enabled";
-    variantOptions: [
-      "Enabled",
-      "Enabled-Pressed",
-      "Enabled-Selected",
-      "Enabled-Selected-Pressed",
-      "Disabled",
-      "Disabled-Selected",
-    ];
-  };
-}>;
+export type ContextualFloatingButtonProperties = InferComponentDefinition<
+  typeof metadata.contextualFloatingButton.componentPropertyDefinitions
+>;
 
-export type ControlChipProperties = InferComponentDefinition<
-  typeof metadata.controlChip.componentPropertyDefinitions
+export type DividerProperties = InferComponentDefinition<
+  typeof metadata.divider.componentPropertyDefinitions
 >;
 
 export type ErrorStateProperties = InferComponentDefinition<
-  typeof metadata.errorState.componentPropertyDefinitions
+  typeof metadata.templateErrorState.componentPropertyDefinitions
 >;
 
-export type ExtendedActionSheetProperties = InferComponentDefinition<
-  typeof metadata.extendedActionSheet.componentPropertyDefinitions
+export type MenuSheetProperties = InferComponentDefinition<
+  typeof metadata.menuSheet.componentPropertyDefinitions
 >;
 
-export type ExtendedActionSheetGroupProperties = InferComponentDefinition<{
+export type MenuSheetGroupProperties = InferComponentDefinition<{
   "Action Count": {
     type: "VARIANT";
     defaultValue: "8";
@@ -98,18 +135,18 @@ export type ExtendedActionSheetGroupProperties = InferComponentDefinition<{
   };
 }>;
 
-export type ExtendedActionSheetItemProperties = InferComponentDefinition<{
+export type MenuSheetItemProperties = InferComponentDefinition<{
   "Show Prefix Icon#17043:5": {
     type: "BOOLEAN";
     defaultValue: true;
   };
   "Label#55905:8": {
     type: "TEXT";
-    defaultValue: "액션 버튼";
+    defaultValue: "라벨";
   };
   "Prefix Icon#55948:0": {
     type: "INSTANCE_SWAP";
-    defaultValue: "17024:100799";
+    defaultValue: "26621:23245";
     preferredValues: [];
   };
   Tone: {
@@ -120,30 +157,88 @@ export type ExtendedActionSheetItemProperties = InferComponentDefinition<{
   State: {
     type: "VARIANT";
     defaultValue: "Enabled";
-    variantOptions: ["Enabled", "Enabled-Pressed", "Disabled"];
+    variantOptions: ["Enabled", "Pressed", "Disabled"];
+  };
+  Layout: {
+    type: "VARIANT";
+    defaultValue: "Text Only";
+    variantOptions: ["Text with Icon", "Text Only"];
   };
 }>;
 
-export type ExtendedFabProperties = InferComponentDefinition<
-  typeof metadata.extendedFloatingActionButton.componentPropertyDefinitions
->;
-
-export type FabProperties = InferComponentDefinition<
+export type FloatingActionButtonProperties = InferComponentDefinition<
   typeof metadata.floatingActionButton.componentPropertyDefinitions
 >;
 
+export type FloatingActionButtonButtonItemProperties = InferComponentDefinition<{
+  "Icon#29766:18": {
+    type: "INSTANCE_SWAP";
+    defaultValue: "26621:24681";
+    preferredValues: [];
+  };
+  "Label#29808:0": {
+    type: "TEXT";
+    defaultValue: "라벨";
+  };
+  State: {
+    type: "VARIANT";
+    defaultValue: "Enabled";
+    variantOptions: ["Enabled", "Pressed"];
+  };
+  Extended: {
+    type: "VARIANT";
+    defaultValue: "True";
+    variantOptions: ["True", "False"];
+  };
+}>;
+
+export type FloatingActionButtonMenuItemProperties = InferComponentDefinition<{
+  "Icon#29766:0": {
+    type: "INSTANCE_SWAP";
+    defaultValue: "26621:24681";
+    preferredValues: [];
+  };
+  "Label#29766:9": {
+    type: "TEXT";
+    defaultValue: "라벨";
+  };
+  State: {
+    type: "VARIANT";
+    defaultValue: "Enabled";
+    variantOptions: ["Pressed", "Enabled"];
+  };
+  Extended: {
+    type: "VARIANT";
+    defaultValue: "True";
+    variantOptions: ["True", "False"];
+  };
+  Open: {
+    type: "VARIANT";
+    defaultValue: "False";
+    variantOptions: ["True", "False"];
+  };
+}>;
+
 export type HelpBubbleProperties = InferComponentDefinition<
   typeof metadata.helpBubble.componentPropertyDefinitions
 >;
 
-export type IdentityPlaceholderProperties = InferComponentDefinition<
-  typeof metadata.identityPlaceholder.componentPropertyDefinitions
->;
+export type IdentityPlaceholderProperties = InferComponentDefinition<{
+  Identity: {
+    type: "VARIANT";
+    defaultValue: "Person";
+    variantOptions: ["Person", "Business"];
+  };
+}>;
 
 export type InlineBannerProperties = InferComponentDefinition<
   typeof metadata.inlineBanner.componentPropertyDefinitions
 >;
 
+export type MannerTempProperties = InferComponentDefinition<
+  typeof metadata.mannerTemp.componentPropertyDefinitions
+>;
+
 export type MannerTempBadgeProperties = InferComponentDefinition<
   typeof metadata.mannerTempBadge.componentPropertyDefinitions
 >;
@@ -171,26 +266,11 @@ export type SegmentedControlItemProperties = InferComponentDefinition<{
   };
   State: {
     type: "VARIANT";
-    defaultValue: "Enabled-Selected";
-    variantOptions: [
-      "Enabled",
-      "Enabled-Selected",
-      "Enabled-Pressed",
-      "Enabled-Selected-Pressed",
-      "Disabled",
-      "Disabled-Selected",
-    ];
+    defaultValue: "Enabled";
+    variantOptions: ["Enabled", "Pressed", "Selected", "Disabled", "Disabled-Selected"];
   };
 }>;
 
-export type SelectBoxGroupProperties = InferComponentDefinition<
-  typeof metadata.templateSelectBoxGroup.componentPropertyDefinitions
->;
-
-export type SelectBoxProperties = InferComponentDefinition<
-  typeof metadata.selectBox.componentPropertyDefinitions
->;
-
 export type SkeletonProperties = InferComponentDefinition<
   typeof metadata.skeleton.componentPropertyDefinitions
 >;
@@ -203,78 +283,30 @@ export type SwitchProperties = InferComponentDefinition<
   typeof metadata.switch.componentPropertyDefinitions
 >;
 
-export type TabsProperties = InferComponentDefinition<
-  typeof metadata.tablist.componentPropertyDefinitions
+export type ToggleButtonProperties = InferComponentDefinition<
+  typeof metadata.toggleButton.componentPropertyDefinitions
 >;
 
-export type TabsHugItemProperties = InferComponentDefinition<{
-  "Label#4478:2": {
-    type: "TEXT";
-    defaultValue: "라벨";
-  };
-  Size: {
-    type: "VARIANT";
-    defaultValue: "Small";
-    variantOptions: ["Small", "Medium"];
-  };
-  Notification: {
-    type: "VARIANT";
-    defaultValue: "False";
-    variantOptions: ["True", "False"];
-  };
-  State: {
-    type: "VARIANT";
-    defaultValue: "Enabled-Selected";
-    variantOptions: ["Enabled", "Enabled-Selected", "Disabled"];
-  };
-}>;
-
-export type TabsFillItemProperties = InferComponentDefinition<{
-  "Label#4478:2": {
-    type: "TEXT";
-    defaultValue: "라벨";
-  };
-  Size: {
-    type: "VARIANT";
-    defaultValue: "Small";
-    variantOptions: ["Small", "Medium"];
-  };
-  Notification: {
-    type: "VARIANT";
-    defaultValue: "False";
-    variantOptions: ["True", "False"];
-  };
-  State: {
-    type: "VARIANT";
-    defaultValue: "Enabled-Selected";
-    variantOptions: ["Enabled", "Enabled-Selected", "Disabled"];
-  };
-}>;
+export type SelectBoxGroupProperties = InferComponentDefinition<
+  typeof metadata.templateSelectBoxGroup.componentPropertyDefinitions
+>;
 
-export type TextButtonProperties = InferComponentDefinition<
-  typeof metadata.textButton.componentPropertyDefinitions
+export type SelectBoxProperties = InferComponentDefinition<
+  typeof metadata.selectBox.componentPropertyDefinitions
 >;
 
 export type TextFieldProperties = InferComponentDefinition<
   typeof metadata.textField.componentPropertyDefinitions
 >;
 
-export type ToggleButtonProperties = InferComponentDefinition<
-  typeof metadata.toggleButton.componentPropertyDefinitions
->;
-
 export type AppBarProperties = InferComponentDefinition<
-  typeof metadata.standardNavigation.componentPropertyDefinitions
+  typeof metadata.topNavigation.componentPropertyDefinitions
 >;
 
 export type AppBarMainProperties = InferComponentDefinition<{
-  "Show Right#16958:13": {
-    type: "BOOLEAN";
-    defaultValue: false;
-  };
-  "Subtitle#16958:9": {
+  "Title#16944:0": {
     type: "TEXT";
-    defaultValue: "서브타이틀";
+    defaultValue: "타이틀";
   };
   "Logo#16958:5": {
     type: "INSTANCE_SWAP";
@@ -286,33 +318,138 @@ export type AppBarMainProperties = InferComponentDefinition<{
       },
     ];
   };
-  "Show Left#16958:17": {
+  "Subtitle#16958:9": {
+    type: "TEXT";
+    defaultValue: "서브타이틀";
+  };
+  "Show Right#16958:13": {
     type: "BOOLEAN";
     defaultValue: false;
   };
-  "Title#16944:0": {
-    type: "TEXT";
-    defaultValue: "타이틀";
+  "Show Left#16958:17": {
+    type: "BOOLEAN";
+    defaultValue: false;
   };
   Type: {
     type: "VARIANT";
     defaultValue: "Title";
-    variantOptions: ["Title", "Title-Subtitle", "Logo"];
+    variantOptions: ["Title", "Title-Subtitle", "Logo (Figma Only)"];
+  };
+}>;
+
+export type AppBarLeftIconButtonProperties = InferComponentDefinition<{
+  "Icon#33580:0": {
+    type: "INSTANCE_SWAP";
+    defaultValue: "26621:23427";
+    preferredValues: [];
   };
 }>;
 
-export type AppBarLeftProperties = InferComponentDefinition<{
-  Action: {
+export type AppBarRightIconButtonProperties = InferComponentDefinition<{
+  "Icon#6406:3": {
+    type: "INSTANCE_SWAP";
+    defaultValue: "34885:102301";
+    preferredValues: [
+      {
+        type: "COMPONENT_SET";
+        key: "bc7bc98e19d8ffdd9efdc94b610c6af28156f867";
+      },
+      {
+        type: "COMPONENT_SET";
+        key: "d766c026e52ee6c78cbf1a474068264e831ddfe3";
+      },
+      {
+        type: "COMPONENT_SET";
+        key: "a4cb85e4d25a320d27a48c3e8132a6c01b45ab3c";
+      },
+      {
+        type: "COMPONENT_SET";
+        key: "e262d9b447adff63d15a6f1af60ae47cbc1ca47f";
+      },
+      {
+        type: "COMPONENT_SET";
+        key: "1d3918afcac320eff3aafc2719b98cf5141afa55";
+      },
+      {
+        type: "COMPONENT_SET";
+        key: "8ed05ef62a40f2dc034ee7eb6945bd0e63ad49aa";
+      },
+      {
+        type: "COMPONENT_SET";
+        key: "98ee886122c725ac9e3e682f31efd1d1a1bec90d";
+      },
+      {
+        type: "COMPONENT_SET";
+        key: "bf71b0c5c8664149298fe1b3c58905715a523e19";
+      },
+      {
+        type: "COMPONENT_SET";
+        key: "47a8df3d59bc52aef1c584d992c05771a8125965";
+      },
+      {
+        type: "COMPONENT_SET";
+        key: "0fcbc3c123d5c7ee7a5dd20e0860ee25bdc19e30";
+      },
+    ];
+  };
+  Notification: {
     type: "VARIANT";
-    defaultValue: "Back";
-    variantOptions: ["Back", "Close", "Other"];
+    defaultValue: "False";
+    variantOptions: ["False", "True"];
   };
 }>;
 
-export type AppBarRightProperties = InferComponentDefinition<{
-  Type: {
+export type TabsUnderlineHugItemProperties = InferComponentDefinition<{
+  "Label#4478:2": {
+    type: "TEXT";
+    defaultValue: "라벨";
+  };
+  "Has Notification#32892:0": {
+    type: "BOOLEAN";
+    defaultValue: false;
+  };
+  Size: {
+    type: "VARIANT";
+    defaultValue: "Small";
+    variantOptions: ["Small", "Medium"];
+  };
+  State: {
+    type: "VARIANT";
+    defaultValue: "Selected";
+    variantOptions: ["Enabled", "Selected", "Disabled"];
+  };
+}>;
+
+export type TabsUnderlineFillItemProperties = InferComponentDefinition<{
+  "Label#4478:2": {
+    type: "TEXT";
+    defaultValue: "라벨";
+  };
+  "Has Notification#32892:0": {
+    type: "BOOLEAN";
+    defaultValue: false;
+  };
+  Size: {
+    type: "VARIANT";
+    defaultValue: "Small";
+    variantOptions: ["Small", "Medium"];
+  };
+  State: {
+    type: "VARIANT";
+    defaultValue: "Selected";
+    variantOptions: ["Enabled", "Selected", "Disabled"];
+  };
+}>;
+
+export type TabsChipItemProperties = InferComponentDefinition<{
+  Size: {
+    type: "VARIANT";
+    defaultValue: "Large";
+    variantOptions: ["Medium", "Large"];
+  };
+  Variant: {
     type: "VARIANT";
-    defaultValue: "1 Icon";
-    variantOptions: ["1 Icon", "2 Icons", "3 Icons", "1 Text"];
+    defaultValue: "Solid";
+    variantOptions: ["Solid", "Outline"];
   };
 }>;

package/src/codegen/core/component-handler.ts

@@ -1,4 +1,4 @@
-import type { NormalizedInstanceNode } from "@/normalizer";
+import type { NormalizedInstanceNode, NormalizedSceneNode } from "@/normalizer";
 import type { ElementNode } from "./jsx";
 
 export interface ComponentHandler<
@@ -6,12 +6,18 @@ export interface ComponentHandler<
     NormalizedInstanceNode["componentProperties"] = NormalizedInstanceNode["componentProperties"],
 > {
   key: string;
-  transform: (node: NormalizedInstanceNode & { componentProperties: T }) => ElementNode;
+  transform: (
+    node: Omit<NormalizedInstanceNode, "componentProperties"> & { componentProperties: T },
+    traverse: (node: NormalizedSceneNode) => ElementNode | undefined,
+  ) => ElementNode;
 }
 
 export function defineComponentHandler<T extends NormalizedInstanceNode["componentProperties"]>(
   key: string,
-  transform: (node: NormalizedInstanceNode & { componentProperties: T }) => ElementNode,
+  transform: (
+    node: Omit<NormalizedInstanceNode, "componentProperties"> & { componentProperties: T },
+    traverse: (node: NormalizedSceneNode) => ElementNode | undefined,
+  ) => ElementNode,
 ): ComponentHandler<T> {
   return { key, transform };
 }

package/src/codegen/core/jsx.ts

@@ -73,10 +73,13 @@ export function stringifyElement(element: ElementNode, options: { printSource?:
 
     if (importPath) {
       const existing = importMap.get(importPath);
+
+      const [namespace] = tag.split(".");
+
       if (existing) {
-        existing.add(tag);
+        existing.add(namespace);
       } else {
-        importMap.set(importPath, new Set([tag]));
+        importMap.set(importPath, new Set([namespace]));
       }
     }
 
@@ -98,6 +101,8 @@ export function stringifyElement(element: ElementNode, options: { printSource?:
         }
 
         if (typeof value === "boolean") {
+          if (value === true) return key;
+
           return `${key}={${value}}`;
         }