@seed-design/figma 0.1.8 → 0.1.9

package/lib/codegen/index.js

@@ -8246,6 +8246,10 @@ const metadata$t = {
                 {
                     "type": "COMPONENT_SET",
                     "key": "df43b92004c850e7c6d2869e7a4ba1ef9a2d7db6"
+                },
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "19923052d4152393ecdc6e2f5853ea0359849127"
                 }
             ]
         },
@@ -8659,7 +8663,7 @@ const metadata$g = {
                 "Neutral",
                 "Brand",
                 "Static White",
-                "Custom"
+                "Custom(inherit)"
             ]
         },
         "Value": {
@@ -8985,26 +8989,35 @@ const metadata$5 = {
 
 const metadata$4 = {
     "name": "🟢 Switch",
-    "key": "80ce5a33b5ab713ab3bd2449472e2fb13d78c7f3",
+    "key": "65e0e7ba1a0c13b42e5fd0ceb17d5f756128dd6b",
     "componentPropertyDefinitions": {
-        "Label#15191:2": {
+        "Label#36578:0": {
             "type": "TEXT"
         },
         "Size": {
             "type": "VARIANT",
             "variantOptions": [
-                "Small",
-                "Medium"
+                "16",
+                "24",
+                "32"
             ]
         },
         "State": {
             "type": "VARIANT",
             "variantOptions": [
                 "Enabled",
-                "Selected",
                 "Disabled",
+                "Selected",
                 "Selected-Disabled"
             ]
+        },
+        "Label Layout(Figma Only)": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "None",
+                "Right",
+                "Left"
+            ]
         }
     }
 };

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

@@ -745,7 +745,7 @@ function createContainerLayoutPropsConverter(valueResolver) {
 function createSelfLayoutPropsConverter(valueResolver) {
     return createPropsConverter({
         handlers: {
-            grow: ({ layoutGrow })=>layoutGrow === 1 ? true : layoutGrow,
+            flexGrow: ({ layoutGrow })=>layoutGrow === 1 ? true : layoutGrow,
             alignSelf: ({ layoutAlign })=>tsPattern.match(layoutAlign).with("STRETCH", ()=>"stretch").with("INHERIT", ()=>undefined).with("MIN", ()=>undefined) // Deprecated in Figma
                 .with("CENTER", ()=>undefined) // Deprecated in Figma
                 .with("MAX", ()=>undefined) // Deprecated in Figma
@@ -758,7 +758,7 @@ function createSelfLayoutPropsConverter(valueResolver) {
             maxWidth: (node)=>node.layoutSizingHorizontal === "HUG" ? valueResolver.getFormattedValue.maxWidth(node) : undefined
         },
         defaults: {
-            grow: 0
+            flexGrow: 0
         }
     });
 }
@@ -865,7 +865,7 @@ function createVectorChildrenFillPropsConverter(valueResolver) {
 function createStrokePropsConverter(valueResolver) {
     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,
             borderWidth
@@ -1628,6 +1628,10 @@ const metadata$t = {
                 {
                     "type": "COMPONENT_SET",
                     "key": "df43b92004c850e7c6d2869e7a4ba1ef9a2d7db6"
+                },
+                {
+                    "type": "COMPONENT_SET",
+                    "key": "19923052d4152393ecdc6e2f5853ea0359849127"
                 }
             ]
         },
@@ -2041,7 +2045,7 @@ const metadata$g = {
                 "Neutral",
                 "Brand",
                 "Static White",
-                "Custom"
+                "Custom(inherit)"
             ]
         },
         "Value": {
@@ -2367,26 +2371,35 @@ const metadata$5 = {
 
 const metadata$4 = {
     "name": "🟢 Switch",
-    "key": "80ce5a33b5ab713ab3bd2449472e2fb13d78c7f3",
+    "key": "65e0e7ba1a0c13b42e5fd0ceb17d5f756128dd6b",
     "componentPropertyDefinitions": {
-        "Label#15191:2": {
+        "Label#36578:0": {
             "type": "TEXT"
         },
         "Size": {
             "type": "VARIANT",
             "variantOptions": [
-                "Small",
-                "Medium"
+                "16",
+                "24",
+                "32"
             ]
         },
         "State": {
             "type": "VARIANT",
             "variantOptions": [
                 "Enabled",
-                "Selected",
                 "Disabled",
+                "Selected",
                 "Selected-Disabled"
             ]
+        },
+        "Label Layout(Figma Only)": {
+            "type": "VARIANT",
+            "variantOptions": [
+                "None",
+                "Right",
+                "Left"
+            ]
         }
     }
 };
@@ -2668,7 +2681,7 @@ function handleSizeProp(size) {
     }
 }
 
-const { createLocalSnippetElement: createLocalSnippetElement$p } = createLocalSnippetHelper("action-button");
+const { createLocalSnippetElement: createLocalSnippetElement$q } = createLocalSnippetHelper("action-button");
 const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$E.key, ({ componentProperties: props })=>{
         const states = props.State.value.split("-");
         const { layout, children } = tsPattern.match(props.Layout.value).with("Icon Only", ()=>({
@@ -2709,7 +2722,7 @@ const createActionButtonHandler = (ctx)=>defineComponentHandler(metadata$E.key,
             variant: changeCase.camelCase(props.Variant.value),
             layout
         };
-        return createLocalSnippetElement$p("ActionButton", commonProps, children);
+        return createLocalSnippetElement$q("ActionButton", commonProps, children);
     });
 const ACTION_BUTTON_GHOST_BUTTON_KEY = "ea69291fb4d76217419f3d9613ae16aadafb56a5";
 const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(ACTION_BUTTON_GHOST_BUTTON_KEY, ({ componentProperties: props })=>{
@@ -2756,26 +2769,26 @@ const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(ACTION_BUTT
                 bleedY: "asPadding"
             }
         };
-        return createLocalSnippetElement$p("ActionButton", commonProps, children);
+        return createLocalSnippetElement$q("ActionButton", commonProps, children);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$o } = createLocalSnippetHelper("alert-dialog");
+const { createLocalSnippetElement: createLocalSnippetElement$p } = createLocalSnippetHelper("alert-dialog");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger$3 } = createLocalSnippetHelper("action-button");
 const ALERT_DIALOG_FOOTER_KEY = "00b1b131d67edf2875a7a1df8dfa88098d7c04be";
 const createAlertDialogHandler = (_ctx)=>defineComponentHandler(metadata$D.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const alertDialogHeader = createLocalSnippetElement$o("AlertDialogHeader", undefined, [
+        const alertDialogHeader = createLocalSnippetElement$p("AlertDialogHeader", undefined, [
             ...props["Show Title#20361:14"].value ? [
-                createLocalSnippetElement$o("AlertDialogTitle", undefined, props["Title Text#20361:0"].value)
+                createLocalSnippetElement$p("AlertDialogTitle", undefined, props["Title Text#20361:0"].value)
             ] : [],
-            createLocalSnippetElement$o("AlertDialogDescription", undefined, props["Description Text#20361:7"].value)
+            createLocalSnippetElement$p("AlertDialogDescription", undefined, props["Description Text#20361:7"].value)
         ]);
         const footerNodes = findAllInstances({
             node,
             key: ALERT_DIALOG_FOOTER_KEY
         });
         if (footerNodes.length === 0 || footerNodes.length > 1) {
-            return createLocalSnippetElement$o("AlertDialog", undefined, alertDialogHeader, {
+            return createLocalSnippetElement$p("AlertDialog", undefined, alertDialogHeader, {
                 comment: "Footer 영역을 확인해주세요."
             });
         }
@@ -2783,21 +2796,21 @@ const createAlertDialogHandler = (_ctx)=>defineComponentHandler(metadata$D.key,
         const footerNodeProps = traverse(footerNode)?.props;
         const buttons = footerNode.children.map(traverse);
         const alertDialogFooterChildren = tsPattern.match(footerNode.componentProperties.Type.value).with("Single", ()=>buttons).with("Neutral", "Critical", ()=>createSeedReactElement("ResponsivePair", footerNodeProps, buttons)).with("Neutral (Overflow)", "Critical (Overflow)", "Nonpreferred", ()=>createSeedReactElement("VStack", footerNodeProps, buttons)).exhaustive();
-        const alertDialogFooter = createLocalSnippetElement$o("AlertDialogFooter", undefined, alertDialogFooterChildren);
-        return createLocalSnippetElement$o("AlertDialogRoot", {
+        const alertDialogFooter = createLocalSnippetElement$p("AlertDialogFooter", undefined, alertDialogFooterChildren);
+        return createLocalSnippetElement$p("AlertDialogRoot", {
             open: true
         }, [
-            createLocalSnippetElement$o("AlertDialogTrigger", {
+            createLocalSnippetElement$p("AlertDialogTrigger", {
                 asChild: true
             }, createLocalSnippetElementTrigger$3("ActionButton", {}, "AlertDialog 열기")),
-            createLocalSnippetElement$o("AlertDialogContent", undefined, [
+            createLocalSnippetElement$p("AlertDialogContent", undefined, [
                 alertDialogHeader,
                 alertDialogFooter
             ])
         ]);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("app-bar");
+const { createLocalSnippetElement: createLocalSnippetElement$o } = createLocalSnippetHelper("app-bar");
 const APP_BAR_TITLE_KEY = "d2cc4f615b2b44098be89448ad1c573f94af0355";
 const APP_BAR_LEFT_ICON_BUTTON_KEY = "5a953f7bafc0df744777517458396e9f6c915825";
 const APP_BAR_RIGHT_ICON_BUTTON_KEY = "c08db793288077e53bd45ef11aa419a835e88fce";
@@ -2814,12 +2827,12 @@ const createAppBarMainHandler = (_ctx)=>{
                 subtitle: undefined
             })).exhaustive();
         if (title) {
-            return createLocalSnippetElement$n("AppBarMain", {
+            return createLocalSnippetElement$o("AppBarMain", {
                 title,
                 subtitle
             });
         }
-        return createLocalSnippetElement$n("AppBarMain", undefined, undefined, {
+        return createLocalSnippetElement$o("AppBarMain", undefined, undefined, {
             comment: "AppBarMain 내부를 직접 작성해주세요."
         });
     });
@@ -2846,33 +2859,33 @@ const createAppBarHandler = (ctx)=>{
             return appBarMainHandler.transform(mainNode, traverse);
         })();
         const leftChildren = tsPattern.match(props.Left.value).with("None", ()=>undefined).with("Back", ()=>[
-                createLocalSnippetElement$n("AppBarBackButton")
+                createLocalSnippetElement$o("AppBarBackButton")
             ]).with("Close", ()=>[
-                createLocalSnippetElement$n("AppBarCloseButton")
+                createLocalSnippetElement$o("AppBarCloseButton")
             ]).with("Custom", ()=>{
             const buttons = findAllInstances({
                 node,
                 key: APP_BAR_LEFT_ICON_BUTTON_KEY
             });
             if (buttons.length > 0) {
-                return buttons.map((button)=>createLocalSnippetElement$n("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#33580:0"]), {
+                return buttons.map((button)=>createLocalSnippetElement$o("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#33580:0"]), {
                         comment: "AppBarIconButton에 aria-label 속성을 추가해주세요."
                     }));
             }
             return undefined;
         }).exhaustive();
-        const left = leftChildren && leftChildren.length > 0 ? createLocalSnippetElement$n("AppBarLeft", {}, leftChildren) : undefined;
+        const left = leftChildren && leftChildren.length > 0 ? createLocalSnippetElement$o("AppBarLeft", {}, leftChildren) : undefined;
         const rightChildren = tsPattern.match(props.Right.value).with("None", ()=>undefined).with("1 Icon Button", "2 Icon Button", "3 Icon Button", ()=>{
             const buttons = findAllInstances({
                 node,
                 key: APP_BAR_RIGHT_ICON_BUTTON_KEY
             });
-            return buttons.map((button)=>createLocalSnippetElement$n("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#6406:3"]), {
+            return buttons.map((button)=>createLocalSnippetElement$o("AppBarIconButton", undefined, ctx.iconHandler.transform(button.componentProperties["Icon#6406:3"]), {
                     comment: "AppBarIconButton에 aria-label 속성을 추가해주세요."
                 }));
         }).with("Text Button", ()=>undefined).exhaustive();
-        const right = rightChildren && rightChildren.length > 0 ? createLocalSnippetElement$n("AppBarRight", {}, rightChildren) : undefined;
-        return createLocalSnippetElement$n("AppBar", {
+        const right = rightChildren && rightChildren.length > 0 ? createLocalSnippetElement$o("AppBarRight", {}, rightChildren) : undefined;
+        return createLocalSnippetElement$o("AppBar", {
             theme,
             tone
         }, [
@@ -2886,11 +2899,12 @@ const createAppBarHandler = (ctx)=>{
 };
 
 const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
+const { createLocalSnippetElement: createLocalSnippetElement$n } = createLocalSnippetHelper("identity-placeholder");
 const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY, ({ componentProperties: props })=>{
         const commonProps = {
             identity: changeCase.camelCase(props.Identity.value)
         };
-        return createSeedReactElement("IdentityPlaceholder", commonProps);
+        return createLocalSnippetElement$n("IdentityPlaceholder", commonProps);
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$m } = createLocalSnippetHelper("avatar");
@@ -3078,12 +3092,23 @@ const createCheckboxHandler = (_ctx)=>defineComponentHandler(metadata$v.key, ({
     });
 
 const { createLocalSnippetElement: createLocalSnippetElement$h } = createLocalSnippetHelper("chip");
+const CHIP_ICON_SUFFIX_KEY = "27343e0e5ab2c66948e9b10fde03d58b5e037212";
+const createChipIconSuffixHandler = (ctx)=>{
+    return defineComponentHandler(CHIP_ICON_SUFFIX_KEY, ({ componentProperties })=>{
+        return createLocalSnippetElement$h("Chip.SuffixIcon", undefined, createSeedReactElement("Icon", {
+            svg: ctx.iconHandler.transform(componentProperties["Icon#33203:0"])
+        }));
+    });
+};
 const createChipHandler = (ctx)=>{
     const avatarHandler = createAvatarHandler();
+    const iconSuffixHandler = createChipIconSuffixHandler(ctx);
     return defineComponentHandler(metadata$t.key, (node, traverse)=>{
         const props = node.componentProperties;
         const states = props.State.value.split("-");
-        const prefix = tsPattern.match(props["Prefix Type"].value).with("None", "Image", ()=>undefined).with("Icon", ()=>createLocalSnippetElement$h("Chip.PrefixIcon", undefined, ctx.iconHandler.transform(props["Prefix Icon#8722:0"]))).with("Avatar", ()=>{
+        const prefix = tsPattern.match(props["Prefix Type"].value).with("None", "Image", ()=>undefined).with("Icon", ()=>createLocalSnippetElement$h("Chip.PrefixIcon", undefined, createSeedReactElement("Icon", {
+                svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"])
+            }))).with("Avatar", ()=>{
             const [avatar] = findAllInstances({
                 node,
                 key: metadata$C.key
@@ -3091,7 +3116,11 @@ const createChipHandler = (ctx)=>{
             if (!avatar) return undefined;
             return createLocalSnippetElement$h("Chip.PrefixAvatar", undefined, avatarHandler.transform(avatar, traverse));
         }).exhaustive();
-        const suffix = props["Has Suffix#32538:181"].value ? createLocalSnippetElement$h("Chip.SuffixIcon", undefined, ctx.iconHandler.transform(props["Suffix Type#32538:0"])) : undefined;
+        const label = createLocalSnippetElement$h("Chip.Label", undefined, props["Label#7185:0"].value);
+        const [suffixIcon] = findAllInstances({
+            node,
+            key: CHIP_ICON_SUFFIX_KEY
+        });
         const commonProps = {
             variant: changeCase.camelCase(props.Variant.value),
             size: handleSizeProp(props.Size.value),
@@ -3102,10 +3131,10 @@ const createChipHandler = (ctx)=>{
         };
         return createLocalSnippetElement$h("Chip.Button", commonProps, [
             prefix,
-            props["Label#7185:0"].value,
-            suffix
+            label,
+            suffixIcon ? iconSuffixHandler.transform(suffixIcon, traverse) : undefined
         ], {
-            comment: "목적에 따라 Chip.Toggle, Chip.RadioItem 등으로도 사용할 수 있습니다."
+            comment: "목적에 따라 Chip.Toggle, Chip.RadioItem 등으로 바꿔 사용하세요."
         });
     });
 };
@@ -3302,7 +3331,7 @@ const createMannerTempBadgeHandler = (_ctx)=>defineComponentHandler(metadata$j.k
         return createLocalSnippetElement$b("MannerTempBadge", commonProps);
     });
 
-const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("manner-temp-badge");
+const { createLocalSnippetElement: createLocalSnippetElement$a } = createLocalSnippetHelper("manner-temp");
 const createMannerTempHandler = (_ctx)=>defineComponentHandler(metadata$k.key, ({ children })=>{
         const textNode = children.find((child)=>child.type === "TEXT");
         const commonProps = {
@@ -3448,7 +3477,7 @@ const createProgressCircleHandler = (_ctx)=>defineComponentHandler(metadata$g.ke
             minValue,
             maxValue,
             size: props.Size.value,
-            ...props.Tone.value !== "Custom" && {
+            ...props.Tone.value !== "Custom(inherit)" && {
                 tone: changeCase.camelCase(props.Tone.value)
             }
         };
@@ -3513,14 +3542,14 @@ const createSegmentedControlHandler = (ctx)=>{
 
 const { createLocalSnippetElement: createLocalSnippetElement$4 } = createLocalSnippetHelper("select-box");
 const createSelectBoxHandler = (_ctx)=>defineComponentHandler(metadata$8.key, ({ componentProperties: props })=>{
-        const tag = tsPattern.match(props.Control.value).with("Checkbox", ()=>"CheckSelectBox").with("Radio", ()=>"RadioSelectBox").exhaustive();
+        const tag = tsPattern.match(props.Control.value).with("Checkbox", ()=>"CheckSelectBox").with("Radio", ()=>"RadioSelectBoxItem").exhaustive();
         const states = props.State.value.split("-");
         const commonProps = {
             label: props["Label#3635:0"].value,
             ...props["Show Description#3033:0"].value && {
                 description: props["Description #3033:5"].value
             },
-            ...tag === "RadioSelectBox" && {
+            ...tag === "RadioSelectBoxItem" && {
                 value: props["Label#3635:0"].value
             },
             ...tag === "CheckSelectBox" && states.includes("Selected") && {
@@ -3533,7 +3562,7 @@ const createSelectBoxGroupHandler = (ctx)=>{
     const selectBoxHandler = createSelectBoxHandler();
     return defineComponentHandler(metadata$G.key, (node, traverse)=>{
         const props = node.componentProperties;
-        const tag = tsPattern.match(props.Control.value).with("Checkbox", ()=>"CheckSelectBoxGroup").with("Radio", ()=>"RadioSelectBoxGroup").exhaustive();
+        const tag = tsPattern.match(props.Control.value).with("Checkbox", ()=>"CheckSelectBoxGroup").with("Radio", ()=>"RadioSelectBoxRoot").exhaustive();
         const selectBoxes = findAllInstances({
             node,
             key: selectBoxHandler.key
@@ -3546,7 +3575,7 @@ const createSelectBoxGroupHandler = (ctx)=>{
         })?.props;
         const stack = createSeedReactElement("VStack", vStackProps, selectBoxes.map((box)=>selectBoxHandler.transform(box, traverse)));
         const commonProps = {
-            ...tag === "RadioSelectBoxGroup" && {
+            ...tag === "RadioSelectBoxRoot" && {
                 defaultValue: selectedSelectBox?.componentProperties["Label#3635:0"].value
             }
         };
@@ -3580,12 +3609,9 @@ const createSnackbarHandler = (_ctx)=>defineComponentHandler(metadata$5.key, ({
 const { createLocalSnippetElement: createLocalSnippetElement$2 } = createLocalSnippetHelper("switch");
 const createSwitchHandler = (_ctx)=>defineComponentHandler(metadata$4.key, ({ 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/lib/codegen/targets/react/index.d.ts

@@ -170,7 +170,7 @@ interface ContainerLayoutProps {
 }
 declare function createContainerLayoutPropsConverter(valueResolver: ReactValueResolver): PropsConverter<ContainerLayoutTrait, ContainerLayoutProps>;
 interface SelfLayoutProps {
-    grow?: 0 | 1 | true;
+    flexGrow?: 0 | 1 | true;
     alignSelf?: "stretch";
     width?: string | number;
     height?: string | number;
@@ -225,7 +225,7 @@ interface VectorChildrenFillProps {
 }
 declare function createVectorChildrenFillPropsConverter(valueResolver: ReactValueResolver): PropsConverter<ContainerLayoutTrait, VectorChildrenFillProps>;
 interface StrokeProps {
-    borderWidth?: number;
+    borderWidth?: string;
     borderColor?: string;
 }
 declare function createStrokePropsConverter(valueResolver: ReactValueResolver): PropsConverter<StrokeTrait, StrokeProps>;