@seed-design/rootage-artifacts 2.2.1 → 2.4.0

package/components/quantity-picker.yaml

@@ -0,0 +1,101 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: quantity-picker
+  name: Quantity Picker
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          height:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+      valueDisplay:
+        properties:
+          paddingX:
+            type: dimension
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      divider:
+        properties:
+          width:
+            type: dimension
+          height:
+            type: dimension
+          color:
+            type: color
+    variants:
+      size:
+        values:
+          small: {}
+          medium: {}
+          large: {}
+  definitions:
+    base:
+      enabled:
+        root:
+          color: $color.bg.layer-default
+          strokeWidth: 1px
+          strokeColor: $color.stroke.neutral-weak
+        valueDisplay:
+          fontWeight: $font-weight.medium
+          color: $color.fg.neutral
+        divider:
+          color: $color.stroke.neutral-subtle
+      invalid:
+        root:
+          strokeWidth: 2px
+          strokeColor: $color.stroke.critical-solid
+      disabled:
+        valueDisplay:
+          color: $color.fg.disabled
+    size=small:
+      enabled:
+        root:
+          height: $dimension.x9
+          cornerRadius: $radius.r2
+        valueDisplay:
+          paddingX: $dimension.x2
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        divider:
+          width: 1px
+          height: $dimension.x4
+    size=medium:
+      enabled:
+        root:
+          height: $dimension.x10
+          cornerRadius: $radius.r2
+        valueDisplay:
+          paddingX: $dimension.x2
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        divider:
+          width: 1px
+          height: $dimension.x4
+    size=large:
+      enabled:
+        root:
+          height: $dimension.x13
+          cornerRadius: $radius.r3
+        valueDisplay:
+          paddingX: $dimension.x2
+          fontSize: $font-size.t6
+          lineHeight: $line-height.t6
+        divider:
+          width: 1px
+          height: $dimension.x4

package/components/select-item.yaml

@@ -0,0 +1,141 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: select-item
+  name: Select Item
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          color:
+            type: color
+          marginX:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          marginDuration:
+            type: duration
+          marginTimingFunction:
+            type: cubicBezier
+          paddingX:
+            type: dimension
+          paddingY:
+            type: dimension
+          gap:
+            type: dimension
+      prefixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+      body:
+        properties:
+          gap:
+            type: dimension
+      label:
+        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
+      indicator:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+    variants:
+      size:
+        values:
+          large:
+            description: 뷰포트 너비와 관계없이 사용할 수 있습니다.
+          medium:
+            description: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
+
+  definitions:
+    base:
+      enabled:
+        root:
+          paddingX: $dimension.x4
+          cornerRadius: $radius.r3
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+          marginDuration: $duration.d3
+          marginTimingFunction: $timing-function.easing
+        prefixIcon:
+          color: $color.fg.neutral
+        body:
+          gap: $dimension.x0_5
+        label:
+          fontWeight: $font-weight.regular
+          color: $color.fg.neutral
+        description:
+          fontWeight: $font-weight.regular
+          color: $color.fg.neutral-subtle
+        indicator:
+          color: $color.fg.neutral
+
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+          marginX: $dimension.x2
+
+      disabled:
+        prefixIcon:
+          color: $color.fg.disabled
+        label:
+          color: $color.fg.disabled
+        description:
+          color: $color.fg.disabled
+        indicator:
+          color: $color.fg.disabled
+    size=large:
+      enabled:
+        root:
+          paddingY: $dimension.x3
+          gap: $dimension.x3
+        prefixIcon:
+          size: 22px
+        label:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        description:
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+        indicator:
+          size: $dimension.x3_5
+    size=medium:
+      enabled:
+        root:
+          paddingY: $dimension.x2_5
+          gap: $dimension.x2
+        prefixIcon:
+          size: $dimension.x4_5
+        label:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        description:
+          fontSize: $font-size.t2
+          lineHeight: $line-height.t2
+        indicator:
+          size: $dimension.x3

package/components/select-trigger.yaml

@@ -0,0 +1,175 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: select-trigger
+  name: Select Trigger
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          height:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          gap:
+            type: dimension
+          paddingX:
+            type: dimension
+          strokeWidth:
+            type: dimension
+          strokeColor:
+            type: color
+          color:
+            type: color
+          colorDuration:
+            type: duration
+          colorTimingFunction:
+            type: cubicBezier
+          strokeDuration:
+            type: duration
+            description: enabled 상태의 stroke 위에 invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다.
+          strokeTimingFunction:
+            type: cubicBezier
+      value:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      placeholder:
+        properties:
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+      prefixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+      suffixIcon:
+        properties:
+          size:
+            type: dimension
+          color:
+            type: color
+          openRotateDuration:
+            type: duration
+          openRotateTimingFunction:
+            type: cubicBezier
+          closeRotateDuration:
+            type: duration
+          closeRotateTimingFunction:
+            type: cubicBezier
+    variants:
+      size:
+        values:
+          large:
+            description: 뷰포트 너비와 관계없이 사용할 수 있습니다.
+          medium:
+            description: Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
+
+  definitions:
+    base:
+      enabled:
+        root:
+          strokeWidth: 1px
+          strokeColor: $color.stroke.neutral-weak
+
+          color: $color.bg.transparent
+          colorDuration: $duration.color-transition
+          colorTimingFunction: $timing-function.easing
+          strokeDuration: 0.1s
+          strokeTimingFunction: $timing-function.easing
+
+        value:
+          fontWeight: $font-weight.regular
+
+          color: $color.fg.neutral
+
+        placeholder:
+          fontWeight: $font-weight.regular
+          color: $color.fg.placeholder
+
+        prefixIcon:
+          color: $color.fg.neutral-muted
+
+        suffixIcon:
+          color: $color.fg.neutral-muted
+          openRotateDuration: $duration.d3
+          openRotateTimingFunction: $timing-function.easing
+          closeRotateDuration: $duration.d2
+          closeRotateTimingFunction: $timing-function.easing
+
+      pressed:
+        root:
+          color: $color.bg.transparent-pressed
+
+      invalid:
+        root:
+          strokeWidth: 2px
+          strokeColor: $color.stroke.critical-solid
+
+      disabled:
+        root:
+          color: $color.bg.disabled
+        value:
+          color: $color.fg.disabled
+        placeholder:
+          color: $color.fg.disabled
+        prefixIcon:
+          color: $color.fg.disabled
+        suffixIcon:
+          color: $color.fg.disabled
+
+      readonly:
+        root:
+          color: $color.bg.disabled
+        value:
+          color: $color.fg.neutral
+        placeholder:
+          color: $color.fg.placeholder
+    size=large:
+      enabled:
+        root:
+          height: $dimension.x13
+          gap: $dimension.x2_5
+          cornerRadius: $radius.r3
+          paddingX: $dimension.x4
+        value:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        placeholder:
+          fontSize: $font-size.t5
+          lineHeight: $line-height.t5
+        prefixIcon:
+          size: $dimension.x5
+        suffixIcon:
+          size: $dimension.x5
+    size=medium:
+      enabled:
+        root:
+          height: $dimension.x10
+          gap: $dimension.x2
+          cornerRadius: $radius.r2
+          paddingX: $dimension.x3_5
+        value:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        placeholder:
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+        prefixIcon:
+          size: $dimension.x4
+        suffixIcon:
+          size: $dimension.x4

package/components/select.yaml

@@ -0,0 +1,118 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: select
+  name: Select
+data:
+  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` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
+
+  definitions:
+    base:
+      enabled:
+        root:
+          cornerRadius: $radius.r5
+          color: $color.bg.layer-floating
+          shadow: $shadow.s3
+          enterDuration: $duration.d3
+          enterTimingFunction: $timing-function.enter
+          enterScale: 0.95
+          enterOpacity: 0
+          exitDuration: $duration.d2
+          exitTimingFunction: $timing-function.exit
+          exitScale: 0.95
+          exitOpacity: 0
+          paddingY: $dimension.x2
+          gap: $dimension.x2
+          gutter: $dimension.x2
+          overflowPadding: $dimension.x2
+          maxHeight: 480px
+        groupLabel:
+          color: $color.fg.neutral-subtle
+        divider:
+          marginX: $dimension.x4
+          height: 1px
+          color: $color.stroke.neutral-muted
+    size=large:
+      enabled:
+        groupLabel:
+          paddingY: $dimension.x2_5
+          paddingX: $dimension.x4
+          fontSize: $font-size.t4
+          lineHeight: $line-height.t4
+          fontWeight: $font-weight.medium
+    size=medium:
+      enabled:
+        groupLabel:
+          paddingY: $dimension.x2
+          paddingX: $dimension.x4
+          fontSize: $font-size.t3
+          lineHeight: $line-height.t3
+          fontWeight: $font-weight.regular

package/components/time-picker.yaml

@@ -0,0 +1,53 @@
+# yaml-language-server: $schema=./schema.json
+kind: ComponentSpec
+metadata:
+  id: time-picker
+  name: Time Picker
+data:
+  schema:
+    slots:
+      root:
+        properties:
+          height:
+            type: dimension
+      selectionIndicator:
+        properties:
+          height:
+            type: dimension
+          cornerRadius:
+            type: dimension
+          color:
+            type: color
+      item:
+        properties:
+          height:
+            type: dimension
+          paddingX:
+            type: dimension
+          fontSize:
+            type: dimension
+          lineHeight:
+            type: dimension
+          fontWeight:
+            type: number
+          color:
+            type: color
+  definitions:
+    base:
+      enabled:
+        root:
+          height: 220px
+        selectionIndicator:
+          height: 44px
+          cornerRadius: $radius.r2
+          color: $color.bg.neutral-weak
+        item:
+          height: 44px
+          paddingX: $dimension.x4
+          fontSize: $font-size.t10-static
+          lineHeight: $line-height.t10-static
+          fontWeight: $font-weight.medium
+          color: $color.fg.disabled
+      selected:
+        item:
+          color: $color.fg.neutral

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/rootage-artifacts",
-  "version": "2.2.1",
+  "version": "2.4.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -8,13 +8,15 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "rootage:generate": "bun rootage json-schema ./components && bun rootage json ./__generated__"
+    "rootage:generate": "bun rootage json-schema ./components && bun rootage json-ts ./__generated__"
   },
   "main": "package.json",
   "files": [
     "*.yaml",
     "components/*.yaml",
     "__generated__/**/*.json",
+    "__generated__/**/*.mjs",
+    "__generated__/**/*.d.ts",
     "LICENSE",
     "NOTICE"
   ],
@@ -23,7 +25,19 @@
     "./package.json": "./package.json",
     "./index.json": "./__generated__/index.json",
     "./components/*.json": "./__generated__/components/*.json",
-    "./*.json": "./__generated__/*.json"
+    "./*.json": "./__generated__/*.json",
+    "./index": {
+      "types": "./__generated__/index.d.ts",
+      "import": "./__generated__/index.mjs"
+    },
+    "./components/*": {
+      "types": "./__generated__/components/*.d.ts",
+      "import": "./__generated__/components/*.mjs"
+    },
+    "./*": {
+      "types": "./__generated__/*.d.ts",
+      "import": "./__generated__/*.mjs"
+    }
   },
   "publishConfig": {
     "access": "public"