@seed-design/figma 1.0.6-alpha-20251021104301 → 1.0.6

package/lib/index.cjs

@@ -4281,11 +4281,11 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:1:155",
             "VariableID:1:156",
             "VariableID:1:164",
-            "VariableID:1:165",
             "VariableID:1:157",
-            "VariableID:1:171",
+            "VariableID:1:165",
             "VariableID:238:17662",
             "VariableID:17544:4057",
+            "VariableID:1:171",
             "VariableID:41186:6437",
             "VariableID:670:2700",
             "VariableID:1:158",
@@ -4362,14 +4362,14 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:14609:41561",
             "VariableID:14609:41562",
             "VariableID:14609:41563",
-            "VariableID:29453:35711",
             "VariableID:12548:1440",
+            "VariableID:29453:35711",
             "VariableID:29453:35712",
             "VariableID:12548:1441",
             "VariableID:12548:1442",
             "VariableID:12548:1443",
-            "VariableID:12548:1444",
             "VariableID:1:21",
+            "VariableID:12548:1444",
             "VariableID:12548:1445",
             "VariableID:1:30",
             "VariableID:1883:92912",
@@ -4627,9 +4627,9 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:289:13772",
             "VariableID:1886:93038",
             "VariableID:289:13773",
-            "VariableID:796:4448",
             "VariableID:15518:15916",
             "VariableID:19225:68732",
+            "VariableID:796:4448",
             "VariableID:17955:50606",
             "VariableID:514:13178",
             "VariableID:535:1747",
@@ -7941,9 +7941,9 @@ const FIGMA_VARIABLES = {
         "hiddenFromPublishing": false,
         "valuesByMode": {
             "1928:7": {
-                "r": 1,
-                "g": 0.9254902005195618,
-                "b": 0.9215686321258545,
+                "r": 0.9919999837875366,
+                "g": 0.9279999732971191,
+                "b": 0.9301332831382751,
                 "a": 1
             },
             "1928:8": {
@@ -7969,9 +7969,9 @@ const FIGMA_VARIABLES = {
         "hiddenFromPublishing": false,
         "valuesByMode": {
             "1928:7": {
-                "r": 0.9529411792755127,
-                "g": 0.03921568766236305,
-                "b": 0.007843137718737125,
+                "r": 0.9079999923706055,
+                "g": 0.171999990940094,
+                "b": 0.2701333165168762,
                 "a": 1
             },
             "1928:8": {
@@ -11595,11 +11595,11 @@ const actionButton = {
             "type": "VARIANT",
             "variantOptions": [
                 "Neutral Solid",
-                "Neutral Weak",
-                "Neutral Outline",
                 "Brand Solid",
+                "Critical Solid",
+                "Neutral Weak",
                 "Brand Outline",
-                "Critical Solid"
+                "Neutral Outline"
             ]
         },
         "State": {
@@ -11855,9 +11855,10 @@ const callout = {
             "variantOptions": [
                 "Neutral",
                 "Informative",
-                "Warning",
                 "Critical",
-                "Magic"
+                "Warning",
+                "Magic",
+                "Positive"
             ]
         },
         "Show Title": {
@@ -12653,8 +12654,8 @@ const radio = {
         "Tone": {
             "type": "VARIANT",
             "variantOptions": [
-                "🚫[Deprecated]Brand",
-                "Neutral"
+                "Neutral",
+                "🚫[Deprecated]Brand"
             ]
         },
         "Weight": {
@@ -13063,6 +13064,29 @@ const tabs = {
         }
     }
 };
+const tagGroup = {
+    "name": "tagGroup",
+    "key": "30d4c37f3bc5f292633cf0aba9a0b640d31ec301",
+    "componentPropertyDefinitions": {
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "t2(12pt)",
+                "t3(13pt)",
+                "t4(14pt)"
+            ]
+        },
+        "Tag Count": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "1",
+                "2",
+                "3",
+                "4"
+            ]
+        }
+    }
+};
 const textField = {
     "name": "textField",
     "key": "c49873c37a639f0dffdea4efd0eb43760d66c141",
@@ -13302,6 +13326,7 @@ var FIGMA_COMPONENTS = {
   superscriptChild: superscriptChild,
   switchMark: switchMark,
   tabs: tabs,
+  tagGroup: tagGroup,
   templateBannerDetach: templateBannerDetach,
   templateButtonGroup: templateButtonGroup,
   templateChipGroup: templateChipGroup,

package/lib/index.js

@@ -4281,11 +4281,11 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:1:155",
             "VariableID:1:156",
             "VariableID:1:164",
-            "VariableID:1:165",
             "VariableID:1:157",
-            "VariableID:1:171",
+            "VariableID:1:165",
             "VariableID:238:17662",
             "VariableID:17544:4057",
+            "VariableID:1:171",
             "VariableID:41186:6437",
             "VariableID:670:2700",
             "VariableID:1:158",
@@ -4362,14 +4362,14 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:14609:41561",
             "VariableID:14609:41562",
             "VariableID:14609:41563",
-            "VariableID:29453:35711",
             "VariableID:12548:1440",
+            "VariableID:29453:35711",
             "VariableID:29453:35712",
             "VariableID:12548:1441",
             "VariableID:12548:1442",
             "VariableID:12548:1443",
-            "VariableID:12548:1444",
             "VariableID:1:21",
+            "VariableID:12548:1444",
             "VariableID:12548:1445",
             "VariableID:1:30",
             "VariableID:1883:92912",
@@ -4627,9 +4627,9 @@ const FIGMA_VARIABLE_COLLECTIONS = {
             "VariableID:289:13772",
             "VariableID:1886:93038",
             "VariableID:289:13773",
-            "VariableID:796:4448",
             "VariableID:15518:15916",
             "VariableID:19225:68732",
+            "VariableID:796:4448",
             "VariableID:17955:50606",
             "VariableID:514:13178",
             "VariableID:535:1747",
@@ -7941,9 +7941,9 @@ const FIGMA_VARIABLES = {
         "hiddenFromPublishing": false,
         "valuesByMode": {
             "1928:7": {
-                "r": 1,
-                "g": 0.9254902005195618,
-                "b": 0.9215686321258545,
+                "r": 0.9919999837875366,
+                "g": 0.9279999732971191,
+                "b": 0.9301332831382751,
                 "a": 1
             },
             "1928:8": {
@@ -7969,9 +7969,9 @@ const FIGMA_VARIABLES = {
         "hiddenFromPublishing": false,
         "valuesByMode": {
             "1928:7": {
-                "r": 0.9529411792755127,
-                "g": 0.03921568766236305,
-                "b": 0.007843137718737125,
+                "r": 0.9079999923706055,
+                "g": 0.171999990940094,
+                "b": 0.2701333165168762,
                 "a": 1
             },
             "1928:8": {
@@ -11595,11 +11595,11 @@ const actionButton = {
             "type": "VARIANT",
             "variantOptions": [
                 "Neutral Solid",
-                "Neutral Weak",
-                "Neutral Outline",
                 "Brand Solid",
+                "Critical Solid",
+                "Neutral Weak",
                 "Brand Outline",
-                "Critical Solid"
+                "Neutral Outline"
             ]
         },
         "State": {
@@ -11855,9 +11855,10 @@ const callout = {
             "variantOptions": [
                 "Neutral",
                 "Informative",
-                "Warning",
                 "Critical",
-                "Magic"
+                "Warning",
+                "Magic",
+                "Positive"
             ]
         },
         "Show Title": {
@@ -12653,8 +12654,8 @@ const radio = {
         "Tone": {
             "type": "VARIANT",
             "variantOptions": [
-                "🚫[Deprecated]Brand",
-                "Neutral"
+                "Neutral",
+                "🚫[Deprecated]Brand"
             ]
         },
         "Weight": {
@@ -13063,6 +13064,29 @@ const tabs = {
         }
     }
 };
+const tagGroup = {
+    "name": "tagGroup",
+    "key": "30d4c37f3bc5f292633cf0aba9a0b640d31ec301",
+    "componentPropertyDefinitions": {
+        "Size": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "t2(12pt)",
+                "t3(13pt)",
+                "t4(14pt)"
+            ]
+        },
+        "Tag Count": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "1",
+                "2",
+                "3",
+                "4"
+            ]
+        }
+    }
+};
 const textField = {
     "name": "textField",
     "key": "c49873c37a639f0dffdea4efd0eb43760d66c141",
@@ -13302,6 +13326,7 @@ var FIGMA_COMPONENTS = {
   superscriptChild: superscriptChild,
   switchMark: switchMark,
   tabs: tabs,
+  tagGroup: tagGroup,
   templateBannerDetach: templateBannerDetach,
   templateButtonGroup: templateButtonGroup,
   templateChipGroup: templateChipGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "1.0.6-alpha-20251021104301",
+  "version": "1.0.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,7 +39,7 @@
     "sync-entities": "rm -rf src/entities/data/__generated__ && bun figma-extractor src/entities/data/__generated__"
   },
   "dependencies": {
-    "@seed-design/css": "1.0.6-alpha-20251021104301",
+    "@seed-design/css": "1.0.6",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },

package/src/codegen/component-properties.ts

@@ -527,7 +527,7 @@ export type TabsChipWrapperProperties = InferComponentDefinition<{
 }>;
 
 export type ChipTabsTriggerProperties = InferComponentDefinition<{
-  "\bSize": {
+  Size: {
     type: "VARIANT";
     defaultValue: "Medium";
     variantOptions: ["Medium", "Large"];
@@ -548,3 +548,44 @@ export type ChipTabsTriggerProperties = InferComponentDefinition<{
     variantOptions: ["False", "True"];
   };
 }>;
+
+export type TagGroupProperties = InferComponentDefinition<
+  typeof metadata.tagGroup.componentPropertyDefinitions
+>;
+
+export type TagGroupItemProperties = InferComponentDefinition<{
+  "Label#5409:0": {
+    type: "TEXT";
+    defaultValue: "라벨";
+  };
+  "Prefix Icon#47948:0": {
+    type: "INSTANCE_SWAP";
+    defaultValue: "26621:23540";
+    preferredValues: [];
+  };
+  "Suffix Icon#47948:55": {
+    type: "INSTANCE_SWAP";
+    defaultValue: "27053:2268";
+    preferredValues: [];
+  };
+  Size: {
+    type: "VARIANT";
+    defaultValue: "t2(12pt)";
+    variantOptions: ["t2(12pt)", "t3(13pt)", "t4(14pt)"];
+  };
+  Layout: {
+    type: "VARIANT";
+    defaultValue: "Text Only";
+    variantOptions: ["Text Only", "Icon First", "Icon Last"];
+  };
+  Tone: {
+    type: "VARIANT";
+    defaultValue: "Neutral Subtle";
+    variantOptions: ["Neutral Subtle", "Brand", "Neutral"];
+  };
+  Weight: {
+    type: "VARIANT";
+    defaultValue: "Regular";
+    variantOptions: ["Regular", "Bold"];
+  };
+}>;

package/src/codegen/targets/react/component/handlers/tag-group.ts

@@ -0,0 +1,92 @@
+import type { TagGroupItemProperties, TagGroupProperties } from "@/codegen/component-properties";
+import { defineComponentHandler, type ElementNode } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { camelCase } from "change-case";
+import { match } from "ts-pattern";
+import { findAllInstances } from "@/utils/figma-node";
+
+export const createTagGroupHandler = (ctx: ComponentHandlerDeps) => {
+  const itemHandler = createTagGroupItemHandler(ctx);
+
+  return defineComponentHandler<TagGroupProperties>(metadata.tagGroup.key, (node, traverse) => {
+    const itemNodes = findAllInstances<TagGroupItemProperties>({ node, key: TAG_GROUP_ITEM_KEY });
+
+    const items = itemNodes.map((itemNode) =>
+      itemHandler.transform(itemNode, traverse),
+    ) as (ElementNode & {
+      props: { size?: string; weight?: string; tone?: string };
+    })[];
+
+    if (items.length === 0) {
+      return createSeedReactElement("TagGroup.Root");
+    }
+
+    // if size/weight/tone are all the same among item[n].props, lift them up to TagGroup.Root
+
+    const consistent = {
+      size: items.map((item) => item.props.size).every((size) => size === items[0].props.size),
+      weight: items
+        .map((item) => item.props.weight)
+        .every((weight) => weight === items[0].props.weight),
+      tone: items.map((item) => item.props.tone).every((tone) => tone === items[0].props.tone),
+    };
+
+    return createSeedReactElement(
+      "TagGroup.Root",
+      {
+        // lift up consistent props
+        ...(consistent.size && { size: items[0].props.size }),
+        ...(consistent.weight && { weight: items[0].props.weight }),
+        ...(consistent.tone && { tone: items[0].props.tone }),
+      },
+      items.map((item) => ({
+        ...item,
+        props: {
+          // remove lifted props
+          ...item.props,
+          size: consistent.size ? undefined : item.props.size,
+          weight: consistent.weight ? undefined : item.props.weight,
+          tone: consistent.tone ? undefined : item.props.tone,
+        },
+      })),
+    );
+  });
+};
+
+const TAG_GROUP_ITEM_KEY = "a7bbc318919053f96be00e509469f6294d6bb6bb";
+
+export const createTagGroupItemHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<TagGroupItemProperties>(
+    TAG_GROUP_ITEM_KEY,
+    ({ componentProperties: props }) => {
+      const size = match(props.Size.value)
+        .with("t2(12pt)", () => "t2")
+        .with("t3(13pt)", () => "t3")
+        .with("t4(14pt)", () => "t4")
+        .exhaustive();
+
+      const commonProps = {
+        size,
+        weight: camelCase(props["Weight"].value),
+        tone: camelCase(props["Tone"].value),
+      };
+
+      const children = [
+        props.Layout.value === "Icon First"
+          ? createSeedReactElement("PrefixIcon", {
+              svg: ctx.iconHandler.transform(props["Prefix Icon#47948:0"]),
+            })
+          : undefined,
+        props["Label#5409:0"].value,
+        props.Layout.value === "Icon Last"
+          ? createSeedReactElement("SuffixIcon", {
+              svg: ctx.iconHandler.transform(props["Suffix Icon#47948:55"]),
+            })
+          : undefined,
+      ].filter(Boolean);
+
+      return createSeedReactElement("TagGroup.Item", commonProps, children);
+    },
+  );

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

@@ -42,6 +42,10 @@ import { createSwitchHandler } from "./handlers/switch";
 import { createTabsHandler } from "@/codegen/targets/react/component/handlers/tabs";
 import { createTextFieldHandler } from "./handlers/text-field";
 import { createToggleButtonHandler } from "./handlers/toggle-button";
+import {
+  createTagGroupHandler,
+  createTagGroupItemHandler,
+} from "@/codegen/targets/react/component/handlers/tag-group";
 
 export type { ComponentHandlerDeps };
 export type UnboundComponentHandler<T extends NormalizedInstanceNode["componentProperties"]> = (
@@ -93,6 +97,8 @@ export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> =
   createSwitchHandler,
   createSwitchMarkHandler,
   createTabsHandler,
+  createTagGroupHandler,
+  createTagGroupItemHandler,
   createTextFieldHandler,
   createToggleButtonHandler,
 ];

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

@@ -235,11 +235,11 @@ export declare const actionButton: {
       "type": "VARIANT",
       "variantOptions": [
         "Neutral Solid",
-        "Neutral Weak",
-        "Neutral Outline",
         "Brand Solid",
+        "Critical Solid",
+        "Neutral Weak",
         "Brand Outline",
-        "Critical Solid"
+        "Neutral Outline"
       ]
     },
     "State": {
@@ -503,9 +503,10 @@ export declare const callout: {
       "variantOptions": [
         "Neutral",
         "Informative",
-        "Warning",
         "Critical",
-        "Magic"
+        "Warning",
+        "Magic",
+        "Positive"
       ]
     },
     "Show Title": {
@@ -1320,8 +1321,8 @@ export declare const radio: {
     "Tone": {
       "type": "VARIANT",
       "variantOptions": [
-        "🚫[Deprecated]Brand",
-        "Neutral"
+        "Neutral",
+        "🚫[Deprecated]Brand"
       ]
     },
     "Weight": {
@@ -1745,6 +1746,30 @@ export declare const tabs: {
   }
 };
 
+export declare const tagGroup: {
+  "name": "tagGroup",
+  "key": "30d4c37f3bc5f292633cf0aba9a0b640d31ec301",
+  "componentPropertyDefinitions": {
+    "Size": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "t2(12pt)",
+        "t3(13pt)",
+        "t4(14pt)"
+      ]
+    },
+    "Tag Count": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "1",
+        "2",
+        "3",
+        "4"
+      ]
+    }
+  }
+};
+
 export declare const textField: {
   "name": "textField",
   "key": "c49873c37a639f0dffdea4efd0eb43760d66c141",
@@ -1940,4 +1965,4 @@ export declare const topNavigation: {
       ]
     }
   }
-};
+};

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

@@ -235,11 +235,11 @@ export const actionButton = {
       "type": "VARIANT",
       "variantOptions": [
         "Neutral Solid",
-        "Neutral Weak",
-        "Neutral Outline",
         "Brand Solid",
+        "Critical Solid",
+        "Neutral Weak",
         "Brand Outline",
-        "Critical Solid"
+        "Neutral Outline"
       ]
     },
     "State": {
@@ -503,9 +503,10 @@ export const callout = {
       "variantOptions": [
         "Neutral",
         "Informative",
-        "Warning",
         "Critical",
-        "Magic"
+        "Warning",
+        "Magic",
+        "Positive"
       ]
     },
     "Show Title": {
@@ -1320,8 +1321,8 @@ export const radio = {
     "Tone": {
       "type": "VARIANT",
       "variantOptions": [
-        "🚫[Deprecated]Brand",
-        "Neutral"
+        "Neutral",
+        "🚫[Deprecated]Brand"
       ]
     },
     "Weight": {
@@ -1745,6 +1746,30 @@ export const tabs = {
   }
 };
 
+export const tagGroup = {
+  "name": "tagGroup",
+  "key": "30d4c37f3bc5f292633cf0aba9a0b640d31ec301",
+  "componentPropertyDefinitions": {
+    "Size": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "t2(12pt)",
+        "t3(13pt)",
+        "t4(14pt)"
+      ]
+    },
+    "Tag Count": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "1",
+        "2",
+        "3",
+        "4"
+      ]
+    }
+  }
+};
+
 export const textField = {
   "name": "textField",
   "key": "c49873c37a639f0dffdea4efd0eb43760d66c141",

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

@@ -43,11 +43,11 @@ export const FIGMA_VARIABLE_COLLECTIONS = {
       "VariableID:1:155",
       "VariableID:1:156",
       "VariableID:1:164",
-      "VariableID:1:165",
       "VariableID:1:157",
-      "VariableID:1:171",
+      "VariableID:1:165",
       "VariableID:238:17662",
       "VariableID:17544:4057",
+      "VariableID:1:171",
       "VariableID:41186:6437",
       "VariableID:670:2700",
       "VariableID:1:158",
@@ -124,14 +124,14 @@ export const FIGMA_VARIABLE_COLLECTIONS = {
       "VariableID:14609:41561",
       "VariableID:14609:41562",
       "VariableID:14609:41563",
-      "VariableID:29453:35711",
       "VariableID:12548:1440",
+      "VariableID:29453:35711",
       "VariableID:29453:35712",
       "VariableID:12548:1441",
       "VariableID:12548:1442",
       "VariableID:12548:1443",
-      "VariableID:12548:1444",
       "VariableID:1:21",
+      "VariableID:12548:1444",
       "VariableID:12548:1445",
       "VariableID:1:30",
       "VariableID:1883:92912",
@@ -389,9 +389,9 @@ export const FIGMA_VARIABLE_COLLECTIONS = {
       "VariableID:289:13772",
       "VariableID:1886:93038",
       "VariableID:289:13773",
-      "VariableID:796:4448",
       "VariableID:15518:15916",
       "VariableID:19225:68732",
+      "VariableID:796:4448",
       "VariableID:17955:50606",
       "VariableID:514:13178",
       "VariableID:535:1747",

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

@@ -3270,9 +3270,9 @@ export const FIGMA_VARIABLES = {
     "hiddenFromPublishing": false,
     "valuesByMode": {
       "1928:7": {
-        "r": 1,
-        "g": 0.9254902005195618,
-        "b": 0.9215686321258545,
+        "r": 0.9919999837875366,
+        "g": 0.9279999732971191,
+        "b": 0.9301332831382751,
         "a": 1
       },
       "1928:8": {
@@ -3298,9 +3298,9 @@ export const FIGMA_VARIABLES = {
     "hiddenFromPublishing": false,
     "valuesByMode": {
       "1928:7": {
-        "r": 0.9529411792755127,
-        "g": 0.03921568766236305,
-        "b": 0.007843137718737125,
+        "r": 0.9079999923706055,
+        "g": 0.171999990940094,
+        "b": 0.2701333165168762,
         "a": 1
       },
       "1928:8": {