@seed-design/rootage-artifacts 2.2.1 → 2.3.0

package/__generated__/components/select.json

@@ -0,0 +1,298 @@
+{
+  "kind": "ComponentSpec",
+  "metadata": {
+    "id": "select",
+    "name": "Select"
+  },
+  "data": {
+    "id": "select",
+    "name": "Select",
+    "schema": {
+      "slots": {
+        "root": {
+          "properties": {
+            "cornerRadius": {
+              "type": "dimension"
+            },
+            "color": {
+              "type": "color"
+            },
+            "shadow": {
+              "type": "shadow"
+            },
+            "paddingY": {
+              "type": "dimension"
+            },
+            "gap": {
+              "type": "dimension"
+            },
+            "enterDuration": {
+              "type": "duration"
+            },
+            "enterTimingFunction": {
+              "type": "cubicBezier"
+            },
+            "enterScale": {
+              "type": "number"
+            },
+            "enterOpacity": {
+              "type": "number"
+            },
+            "exitDuration": {
+              "type": "duration"
+            },
+            "exitTimingFunction": {
+              "type": "cubicBezier"
+            },
+            "exitScale": {
+              "type": "number"
+            },
+            "exitOpacity": {
+              "type": "number"
+            },
+            "gutter": {
+              "type": "dimension",
+              "description": "트리거와 목록 사이의 간격을 정의합니다."
+            },
+            "overflowPadding": {
+              "type": "dimension",
+              "description": "목록과 뷰포트 경계 사이의 최소 간격을 정의합니다."
+            },
+            "maxHeight": {
+              "type": "dimension"
+            }
+          }
+        },
+        "group": {
+          "properties": {}
+        },
+        "groupLabel": {
+          "properties": {
+            "color": {
+              "type": "color"
+            },
+            "paddingX": {
+              "type": "dimension"
+            },
+            "paddingY": {
+              "type": "dimension"
+            },
+            "fontSize": {
+              "type": "dimension"
+            },
+            "lineHeight": {
+              "type": "dimension"
+            },
+            "fontWeight": {
+              "type": "number"
+            }
+          }
+        },
+        "divider": {
+          "properties": {
+            "marginX": {
+              "type": "dimension"
+            },
+            "height": {
+              "type": "dimension"
+            },
+            "color": {
+              "type": "color"
+            }
+          }
+        }
+      },
+      "variants": {
+        "size": {
+          "values": {
+            "large": {
+              "description": "뷰포트 너비와 관계없이 사용할 수 있습니다."
+            },
+            "medium": {
+              "description": "Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다."
+            }
+          },
+          "defaultValue": "large"
+        }
+      }
+    },
+    "definitions": [
+      {
+        "variants": {},
+        "definitions": [
+          {
+            "states": [
+              "enabled"
+            ],
+            "slots": {
+              "root": {
+                "cornerRadius": {
+                  "type": "dimension",
+                  "value": "$radius.r5"
+                },
+                "color": {
+                  "type": "color",
+                  "value": "$color.bg.layer-floating"
+                },
+                "shadow": {
+                  "type": "shadow",
+                  "value": "$shadow.s3"
+                },
+                "enterDuration": {
+                  "type": "duration",
+                  "value": "$duration.d3"
+                },
+                "enterTimingFunction": {
+                  "type": "cubicBezier",
+                  "value": "$timing-function.enter"
+                },
+                "enterScale": {
+                  "type": "number",
+                  "value": 0.95
+                },
+                "enterOpacity": {
+                  "type": "number",
+                  "value": 0
+                },
+                "exitDuration": {
+                  "type": "duration",
+                  "value": "$duration.d2"
+                },
+                "exitTimingFunction": {
+                  "type": "cubicBezier",
+                  "value": "$timing-function.exit"
+                },
+                "exitScale": {
+                  "type": "number",
+                  "value": 0.95
+                },
+                "exitOpacity": {
+                  "type": "number",
+                  "value": 0
+                },
+                "paddingY": {
+                  "type": "dimension",
+                  "value": "$dimension.x2"
+                },
+                "gap": {
+                  "type": "dimension",
+                  "value": "$dimension.x2"
+                },
+                "gutter": {
+                  "type": "dimension",
+                  "value": "$dimension.x2"
+                },
+                "overflowPadding": {
+                  "type": "dimension",
+                  "value": "$dimension.x2"
+                },
+                "maxHeight": {
+                  "type": "dimension",
+                  "value": {
+                    "value": 480,
+                    "unit": "px"
+                  }
+                }
+              },
+              "groupLabel": {
+                "color": {
+                  "type": "color",
+                  "value": "$color.fg.neutral-subtle"
+                }
+              },
+              "divider": {
+                "marginX": {
+                  "type": "dimension",
+                  "value": "$dimension.x4"
+                },
+                "height": {
+                  "type": "dimension",
+                  "value": {
+                    "value": 1,
+                    "unit": "px"
+                  }
+                },
+                "color": {
+                  "type": "color",
+                  "value": "$color.stroke.neutral-muted"
+                }
+              }
+            }
+          }
+        ]
+      },
+      {
+        "variants": {
+          "size": "large"
+        },
+        "definitions": [
+          {
+            "states": [
+              "enabled"
+            ],
+            "slots": {
+              "groupLabel": {
+                "paddingY": {
+                  "type": "dimension",
+                  "value": "$dimension.x2_5"
+                },
+                "paddingX": {
+                  "type": "dimension",
+                  "value": "$dimension.x4"
+                },
+                "fontSize": {
+                  "type": "dimension",
+                  "value": "$font-size.t4"
+                },
+                "lineHeight": {
+                  "type": "dimension",
+                  "value": "$line-height.t4"
+                },
+                "fontWeight": {
+                  "type": "number",
+                  "value": "$font-weight.medium"
+                }
+              }
+            }
+          }
+        ]
+      },
+      {
+        "variants": {
+          "size": "medium"
+        },
+        "definitions": [
+          {
+            "states": [
+              "enabled"
+            ],
+            "slots": {
+              "groupLabel": {
+                "paddingY": {
+                  "type": "dimension",
+                  "value": "$dimension.x2"
+                },
+                "paddingX": {
+                  "type": "dimension",
+                  "value": "$dimension.x4"
+                },
+                "fontSize": {
+                  "type": "dimension",
+                  "value": "$font-size.t3"
+                },
+                "lineHeight": {
+                  "type": "dimension",
+                  "value": "$line-height.t3"
+                },
+                "fontWeight": {
+                  "type": "number",
+                  "value": "$font-weight.regular"
+                }
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+}

package/__generated__/index.json

@@ -1,6 +1,6 @@
 {
   "name": "Rootage",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "resources": [
     {
       "path": "/collections.json"
@@ -29,6 +29,9 @@
     {
       "path": "/components/action-sheet.json"
     },
+    {
+      "path": "/components/alert-dialog.json"
+    },
     {
       "path": "/components/attachment-input-dropzone.json"
     },
@@ -92,6 +95,9 @@
     {
       "path": "/components/control-chip.json"
     },
+    {
+      "path": "/components/dialog-close-button.json"
+    },
     {
       "path": "/components/dialog.json"
     },
@@ -185,6 +191,12 @@
     {
       "path": "/components/progress-circle.json"
     },
+    {
+      "path": "/components/quantity-picker-button.json"
+    },
+    {
+      "path": "/components/quantity-picker.json"
+    },
     {
       "path": "/components/radio-group.json"
     },
@@ -218,6 +230,15 @@
     {
       "path": "/components/select-box.json"
     },
+    {
+      "path": "/components/select-item.json"
+    },
+    {
+      "path": "/components/select-trigger.json"
+    },
+    {
+      "path": "/components/select.json"
+    },
     {
       "path": "/components/side-panel-close-button.json"
     },

package/components/alert-dialog.yaml

@@ -0,0 +1,131 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: alert-dialog
+  name: Alert Dialog
+data:
+  schema:
+    slots:
+      backdrop:
+        properties:
+          color:
+            type: color
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          enterOpacity:
+            type: number
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+          exitOpacity:
+            type: number
+      content:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          marginX:
+            type: dimension
+          marginY:
+            type: dimension
+          maxWidth:
+            type: dimension
+          enterDuration:
+            type: duration
+          enterTimingFunction:
+            type: cubicBezier
+          enterOpacity:
+            type: number
+          enterScale:
+            type: number
+          exitDuration:
+            type: duration
+          exitTimingFunction:
+            type: cubicBezier
+          exitOpacity:
+            type: number
+      header:
+        properties:
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingTop:
+            type: dimension
+      footer:
+        properties:
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          paddingTop:
+            type: dimension
+          paddingBottom:
+            type: dimension
+      title:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+      description:
+        properties:
+          color:
+            type: color
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+  definitions:
+    base:
+      enabled:
+        backdrop:
+          color: $color.bg.overlay
+          enterDuration: $duration.d2
+          enterTimingFunction: $timing-function.enter
+          enterOpacity: 0
+          exitDuration: $duration.d2
+          exitTimingFunction: $timing-function.exit
+          exitOpacity: 0
+        content:
+          color: $color.bg.layer-floating
+          cornerRadius: $radius.r5
+          marginX: $dimension.x8
+          marginY: $dimension.x16
+          maxWidth: 272px
+          enterDuration: $duration.d4
+          enterTimingFunction: $timing-function.enter-expressive
+          enterOpacity: 0
+          enterScale: 1.3
+          exitDuration: $duration.d2
+          exitTimingFunction: $timing-function.exit
+          exitOpacity: 0
+        header:
+          gap: $dimension.x1_5
+          paddingX: $dimension.x5
+          paddingTop: $dimension.x5
+        footer:
+          gap: $dimension.x2
+          paddingX: $dimension.x5
+          paddingTop: $dimension.x4
+          paddingBottom: $dimension.x5
+        title:
+          color: $color.fg.neutral
+          fontSize: $font-size.t7
+          lineHeight: $line-height.t7
+          fontWeight: $font-weight.bold
+        description:
+          color: $color.fg.neutral
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+          fontWeight: $font-weight.regular

package/components/dialog-close-button.yaml

@@ -0,0 +1,47 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: dialog-close-button
+  name: Dialog Close Button
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          cornerRadius:
+            type: dimension
+          size:
+            type: dimension
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+      icon:
+        properties:
+          color:
+            type: color
+          size:
+            type: dimension
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.transparent
+          cornerRadius: $radius.r3
+          size: 52px
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+        icon:
+          color: $color.fg.neutral-subtle
+          size: 22px
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed

package/components/dialog.yaml

@@ -28,12 +28,16 @@ data:
             type: color
           cornerRadius:
             type: dimension
-          marginX:
-            type: dimension
-          marginY:
-            type: dimension
           maxWidth:
             type: dimension
+          widthFraction:
+            type: number
+            description: viewport width 또는 parent width에 대한 비율입니다. viewport `md` 미만에서 적용합니다.
+          maxHeightFraction:
+            type: number
+            description: viewport height 또는 parent height에 대한 최대 비율입니다.
+          marginX:
+            type: dimension
           enterDuration:
             type: duration
           enterTimingFunction:
@@ -56,10 +60,30 @@ data:
             type: dimension
           paddingTop:
             type: dimension
-      footer:
+          paddingBottom:
+            type: dimension
+          closeButtonGap:
+            type: dimension
+            description: closeButton이 표시되는 경우 paddingRight에 추가되는 여백입니다.
+      body:
         properties:
-          gap:
+          paddingX:
+            type: dimension
+          paddingBottom:
             type: dimension
+            description: body의 하단 padding이며, 동시에 하단 scroll fog 그라데이션의 높이로도 사용됩니다. 본문이 오버플로되어 스크롤 가능한 경우에만 적용됩니다.
+          strokeWidth:
+            type: dimension
+            description: 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 두께입니다.
+          strokeColor:
+            type: color
+            description: 본문이 스크롤된(scrolled) 상태에서 body 상단에 나타나는 divider의 색상입니다.
+          strokeDuration:
+            type: duration
+          strokeTimingFunction:
+            type: cubicBezier
+      footer:
+        properties:
           paddingX:
             type: dimension
           paddingTop:
@@ -86,6 +110,12 @@ data:
             type: dimension
           fontWeight:
             type: number
+      closeButton:
+        properties:
+          fromTop:
+            type: dimension
+          fromRight:
+            type: dimension
   definitions:
     base:
       enabled:
@@ -100,9 +130,9 @@ data:
         content:
           color: $color.bg.layer-floating
           cornerRadius: $radius.r5
-          marginX: $dimension.x8
-          marginY: $dimension.x16
-          maxWidth: 272px
+          widthFraction: 0.9
+          maxHeightFraction: 0.8
+          marginX: $dimension.x5
           enterDuration: $duration.d4
           enterTimingFunction: $timing-function.enter-expressive
           enterOpacity: 0
@@ -112,20 +142,41 @@ data:
           exitOpacity: 0
         header:
           gap: $dimension.x1_5
-          paddingX: $dimension.x5
-          paddingTop: $dimension.x5
+          paddingX: $dimension.x6
+          paddingTop: $dimension.x6
+          paddingBottom: $dimension.x4
+          closeButtonGap: $dimension.x1_5
+        body:
+          paddingX: $dimension.x6
+          paddingBottom: $dimension.x12
+          strokeDuration: $duration.color-transition
+          strokeTimingFunction: $timing-function.easing
         footer:
-          gap: $dimension.x2
-          paddingX: $dimension.x5
+          paddingX: $dimension.x6
           paddingTop: $dimension.x4
-          paddingBottom: $dimension.x5
+          paddingBottom: $dimension.x6
         title:
           color: $color.fg.neutral
-          fontSize: $font-size.t7
-          lineHeight: $line-height.t7
+          fontSize: $font-size.t8
+          lineHeight: $line-height.t8
           fontWeight: $font-weight.bold
         description:
-          color: $color.fg.neutral
+          color: $color.fg.neutral-muted
           fontSize: $font-size.t5
           lineHeight: $line-height.t5
           fontWeight: $font-weight.regular
+        closeButton:
+          fromTop: $dimension.x7
+          fromRight: $dimension.x6
+      scrolled:
+        body:
+          strokeColor: $color.stroke.neutral-muted
+          strokeWidth: 1px
+    size=medium:
+      enabled:
+        content:
+          maxWidth: 480px
+    size=large:
+      enabled:
+        content:
+          maxWidth: 800px