@spectrabrain/eds 0.0.2 → 0.0.4

package/dist/components/Button/spec.json

@@ -0,0 +1,299 @@
+{
+  "specVersion": 1,
+  "packageVersion": "0.0.4",
+  "name": "Button",
+  "purpose": "사용자가 즉시 실행할 수 있는 행동과 탐색을 표현하는 인터랙티브 요소입니다.",
+  "usageContexts": [
+    "상태 변경·폼 제출·명령 실행에는 native button branch를 사용합니다.",
+    "다른 페이지나 콘텐츠로 이동하는 탐색에는 neutral/link branch를 사용합니다.",
+    "brand는 화면에서 가장 중요한 행동을 강조할 때 사용합니다.",
+    "neutral은 일반적인 액션과 탐색에 사용합니다.",
+    "critical은 삭제·초기화처럼 되돌리기 어려운 행동에 사용합니다.",
+    "icon-only의 접근성 이름을 제공하려면 aria-label을 지정합니다. aria-label은 필수로 강제하지 않습니다."
+  ],
+  "unsupportedContexts": [
+    "문서에 없는 role·variant·상태를 className이나 inline style로 우회하지 않습니다.",
+    "상태 변경이나 일반 CTA를 neutral/link로 표현하지 않습니다."
+  ],
+  "api": {
+    "props": [
+      {
+        "name": "size",
+        "type": "ButtonSize",
+        "required": true,
+        "description": "버튼 크기입니다."
+      },
+      {
+        "name": "role",
+        "type": "ButtonRole",
+        "required": true,
+        "description": "시각적 역할입니다."
+      },
+      {
+        "name": "variant",
+        "type": "ButtonVariant",
+        "required": true,
+        "description": "role에 종속된 시각적 위계입니다."
+      },
+      {
+        "name": "type",
+        "type": "NativeButtonType",
+        "required": true,
+        "branch": "native button",
+        "description": "native button의 동작 유형입니다."
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "branch": "neutral/link",
+        "description": "탐색 대상 주소입니다."
+      },
+      {
+        "name": "children",
+        "type": "ReactNode",
+        "required": false,
+        "description": "text label입니다."
+      },
+      {
+        "name": "icon",
+        "type": "ReactElement",
+        "required": false,
+        "description": "icon-only용 custom 아이콘입니다."
+      },
+      {
+        "name": "iconName",
+        "type": "ButtonIconName",
+        "required": false,
+        "description": "icon-only용 lucide 아이콘 이름입니다."
+      },
+      {
+        "name": "startIcon",
+        "type": "ReactElement",
+        "required": false,
+        "description": "label 앞의 custom 아이콘입니다."
+      },
+      {
+        "name": "startIconName",
+        "type": "ButtonIconName",
+        "required": false,
+        "description": "label 앞의 lucide 아이콘 이름입니다."
+      },
+      {
+        "name": "endIcon",
+        "type": "ReactElement",
+        "required": false,
+        "description": "label 뒤의 custom 아이콘입니다."
+      },
+      {
+        "name": "endIconName",
+        "type": "ButtonIconName",
+        "required": false,
+        "description": "label 뒤의 lucide 아이콘 이름입니다."
+      },
+      {
+        "name": "aria-label",
+        "type": "string",
+        "required": false,
+        "description": "accessible name입니다. icon-only의 접근성 이름을 제공할 때 사용합니다."
+      },
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "required": false,
+        "description": "사용할 수 없는 상태입니다."
+      },
+      {
+        "name": "loading",
+        "type": "boolean",
+        "required": false,
+        "description": "처리 중 상태입니다."
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "required": false,
+        "description": "배치·컨테이너 보정용 class입니다."
+      },
+      {
+        "name": "ref",
+        "type": "Ref<HTMLButtonElement | HTMLAnchorElement>",
+        "required": false,
+        "description": "native element ref입니다."
+      }
+    ],
+    "sizes": [
+      "xs",
+      "sm",
+      "md"
+    ],
+    "roleVariants": {
+      "brand": [
+        "solid",
+        "outline"
+      ],
+      "neutral": [
+        "solid",
+        "weak",
+        "outline",
+        "ghost",
+        "link"
+      ],
+      "critical": [
+        "weak"
+      ]
+    },
+    "states": [
+      "enabled",
+      "hover",
+      "disabled",
+      "loading",
+      "focus-visible"
+    ],
+    "slots": {
+      "textOnly": "children만 제공합니다.",
+      "iconFirst": "children과 startIcon 또는 startIconName을 제공합니다.",
+      "iconLast": "children과 endIcon 또는 endIconName을 제공합니다.",
+      "iconBoth": "children과 앞·뒤 아이콘을 모두 제공합니다.",
+      "iconOnly": "children 없이 icon 또는 iconName을 제공합니다. 접근성 이름이 필요하면 aria-label을 지정합니다."
+    },
+    "typeExports": [
+      "ButtonProps",
+      "ButtonComponent",
+      "ButtonIconName",
+      "ButtonLayout",
+      "ButtonRole",
+      "ButtonSize",
+      "ButtonVariant",
+      "NativeButtonType"
+    ]
+  },
+  "accessibility": {
+    "nativeButtonType": "native button branch에서는 type을 필수로 지정합니다.",
+    "linkHref": "neutral/link branch에서는 href를 필수로 지정합니다.",
+    "iconOnlyName": "icon-only layout에서는 접근성 이름을 제공할 때 비어 있지 않은 aria-label을 지정합니다. aria-label은 필수가 아닙니다.",
+    "disabledLink": "비활성 link는 href를 제거하고 aria-disabled와 tabIndex를 적용합니다.",
+    "loading": "loading 중에는 aria-busy를 적용하고 상호작용을 차단합니다.",
+    "focusVisible": "keyboard focus에는 승인된 focus ring을 표시합니다."
+  },
+  "semanticTokens": [
+    {
+      "name": "color-bg-brand-primary",
+      "usage": "brand solid의 기본 배경입니다."
+    },
+    {
+      "name": "color-bg-brand-primary-hover",
+      "usage": "brand solid의 hover 배경입니다."
+    },
+    {
+      "name": "color-bg-critical-weak",
+      "usage": "critical weak의 기본 배경입니다."
+    },
+    {
+      "name": "color-bg-critical-weak-hover",
+      "usage": "critical weak의 hover 배경입니다."
+    },
+    {
+      "name": "color-bg-disabled",
+      "usage": "비활성 배경입니다."
+    },
+    {
+      "name": "color-bg-neutral-inverted",
+      "usage": "neutral solid의 기본 배경입니다."
+    },
+    {
+      "name": "color-bg-neutral-inverted-hover",
+      "usage": "neutral solid의 hover 배경입니다."
+    },
+    {
+      "name": "color-bg-neutral-weak",
+      "usage": "neutral weak의 기본 배경입니다."
+    },
+    {
+      "name": "color-bg-neutral-weak-hover",
+      "usage": "neutral weak의 hover 배경입니다."
+    },
+    {
+      "name": "color-bg-transparent",
+      "usage": "outline·ghost·link의 투명 배경입니다."
+    },
+    {
+      "name": "color-bg-transparent-hover",
+      "usage": "outline·ghost·link의 hover 배경입니다."
+    },
+    {
+      "name": "color-fg-brand",
+      "usage": "brand outline의 전경입니다."
+    },
+    {
+      "name": "color-fg-critical",
+      "usage": "critical weak의 전경입니다."
+    },
+    {
+      "name": "color-fg-disabled",
+      "usage": "비활성 전경입니다."
+    },
+    {
+      "name": "color-fg-neutral",
+      "usage": "neutral outline·ghost·link의 전경입니다."
+    },
+    {
+      "name": "color-fg-neutral-inverted",
+      "usage": "solid variant의 대비 전경입니다."
+    },
+    {
+      "name": "color-stroke-focusRing",
+      "usage": "focus-visible ring의 전경입니다."
+    },
+    {
+      "name": "color-stroke-neutral-secondary",
+      "usage": "neutral outline의 경계선입니다."
+    },
+    {
+      "name": "typography-body3-fontFamily",
+      "usage": "xs label의 글꼴입니다."
+    },
+    {
+      "name": "typography-body3-fontSize",
+      "usage": "xs label의 글꼴 크기입니다."
+    },
+    {
+      "name": "typography-body3-fontWeight",
+      "usage": "xs label의 글꼴 두께입니다."
+    },
+    {
+      "name": "typography-body3-letterSpacing",
+      "usage": "xs label의 자간입니다."
+    },
+    {
+      "name": "typography-body3-lineHeight",
+      "usage": "xs label의 행간입니다."
+    },
+    {
+      "name": "typography-title3-fontFamily",
+      "usage": "sm·md label의 글꼴입니다."
+    },
+    {
+      "name": "typography-title3-fontSize",
+      "usage": "sm·md label의 글꼴 크기입니다."
+    },
+    {
+      "name": "typography-title3-fontWeight",
+      "usage": "sm·md label의 글꼴 두께입니다."
+    },
+    {
+      "name": "typography-title3-letterSpacing",
+      "usage": "sm·md label의 자간입니다."
+    },
+    {
+      "name": "typography-title3-lineHeight",
+      "usage": "sm·md label의 행간입니다."
+    }
+  ],
+  "unsupportedProps": [
+    {
+      "name": "style",
+      "reason": "공개 스타일 override를 제공하지 않습니다."
+    }
+  ]
+}

package/dist/components.css

@@ -309,22 +309,29 @@
 
 .eds-button__progressCircle {
   position: absolute;
-  inset: 0;
+  top: 50%;
+  left: 50%;
   display: none;
   align-items: center;
   justify-content: center;
+  transform: translate(-50%, -50%);
   pointer-events: none;
 }
 
 .eds-button__button[data-loading="true"] .eds-button__progressCircle {
   display: inline-flex;
-  animation: eds-button__eds-button-progress-spin 800ms linear infinite;
-  transform-origin: center;
-  will-change: transform;
 }
 
 .eds-button__progressCircle > svg {
   display: block;
+  width: 100%;
+  height: 100%;
+  transform-origin: center;
+}
+
+.eds-button__button[data-loading="true"] .eds-button__progressCircle > svg {
+  animation: eds-button__eds-button-progress-spin 800ms linear infinite;
+  will-change: transform;
 }
 
 .eds-button__progressTrack,
@@ -332,12 +339,12 @@
   stroke-width: var(--eds-button-size-xs-progressCircle-thickness);
 }
 
-.eds-button__button[data-size="xs"] .eds-button__progressCircle > svg {
+.eds-button__button[data-size="xs"] .eds-button__progressCircle {
   width: var(--eds-button-size-xs-progressCircle-size);
   height: var(--eds-button-size-xs-progressCircle-size);
 }
 
-.eds-button__button[data-size="sm"] .eds-button__progressCircle > svg {
+.eds-button__button[data-size="sm"] .eds-button__progressCircle {
   width: var(--eds-button-size-sm-progressCircle-size);
   height: var(--eds-button-size-sm-progressCircle-size);
 }
@@ -347,7 +354,7 @@
   stroke-width: var(--eds-button-size-sm-progressCircle-thickness);
 }
 
-.eds-button__button[data-size="md"] .eds-button__progressCircle > svg {
+.eds-button__button[data-size="md"] .eds-button__progressCircle {
   width: var(--eds-button-size-md-progressCircle-size);
   height: var(--eds-button-size-md-progressCircle-size);
 }
@@ -364,7 +371,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .eds-button__progressCircle {
+  .eds-button__progressCircle > svg {
     animation: none;
     will-change: auto;
   }

package/dist/index.d.mts

@@ -48,7 +48,7 @@ type IconOnlySlotProps = {
     readonly startIconName?: never;
     readonly endIcon?: never;
     readonly endIconName?: never;
-    readonly "aria-label": string;
+    readonly "aria-label"?: string;
 } & ({
     readonly icon: ReactElement;
     readonly iconName?: never;

package/dist/index.d.ts

@@ -48,7 +48,7 @@ type IconOnlySlotProps = {
     readonly startIconName?: never;
     readonly endIcon?: never;
     readonly endIconName?: never;
-    readonly "aria-label": string;
+    readonly "aria-label"?: string;
 } & ({
     readonly icon: ReactElement;
     readonly iconName?: never;

package/dist/index.js

@@ -18,6 +18,18 @@ var tokenMap = {
     "value": "#DB3700",
     "cssVariable": "--eds-color-bg-brand-primary-hover"
   },
+  "color-bg-brand-weak": {
+    "name": "color-bg-brand-weak",
+    "type": "color",
+    "value": "#FFA081",
+    "cssVariable": "--eds-color-bg-brand-weak"
+  },
+  "color-bg-brand-weak-hover": {
+    "name": "color-bg-brand-weak-hover",
+    "type": "color",
+    "value": "#FF7141",
+    "cssVariable": "--eds-color-bg-brand-weak-hover"
+  },
   "color-bg-critical-primary": {
     "name": "color-bg-critical-primary",
     "type": "color",
@@ -33,13 +45,13 @@ var tokenMap = {
   "color-bg-critical-weak": {
     "name": "color-bg-critical-weak",
     "type": "color",
-    "value": "#FEF2F2",
+    "value": "#FEE2E2",
     "cssVariable": "--eds-color-bg-critical-weak"
   },
   "color-bg-critical-weak-hover": {
     "name": "color-bg-critical-weak-hover",
     "type": "color",
-    "value": "#FEE2E2",
+    "value": "#FECACA",
     "cssVariable": "--eds-color-bg-critical-weak-hover"
   },
   "color-bg-disabled": {
@@ -63,13 +75,13 @@ var tokenMap = {
   "color-bg-informative-weak": {
     "name": "color-bg-informative-weak",
     "type": "color",
-    "value": "#EFF6FF",
+    "value": "#DBEAFE",
     "cssVariable": "--eds-color-bg-informative-weak"
   },
   "color-bg-informative-weak-hover": {
     "name": "color-bg-informative-weak-hover",
     "type": "color",
-    "value": "#DBEAFE",
+    "value": "#BFDBFE",
     "cssVariable": "--eds-color-bg-informative-weak-hover"
   },
   "color-bg-layer-basement": {
@@ -78,6 +90,12 @@ var tokenMap = {
     "value": "#F3F4F6",
     "cssVariable": "--eds-color-bg-layer-basement"
   },
+  "color-bg-layer-basement-hover": {
+    "name": "color-bg-layer-basement-hover",
+    "type": "color",
+    "value": "#ECEEF1",
+    "cssVariable": "--eds-color-bg-layer-basement-hover"
+  },
   "color-bg-layer-default": {
     "name": "color-bg-layer-default",
     "type": "color",
@@ -153,13 +171,13 @@ var tokenMap = {
   "color-bg-positive-weak": {
     "name": "color-bg-positive-weak",
     "type": "color",
-    "value": "#F0FDF4",
+    "value": "#DCFCE7",
     "cssVariable": "--eds-color-bg-positive-weak"
   },
   "color-bg-positive-weak-hover": {
     "name": "color-bg-positive-weak-hover",
     "type": "color",
-    "value": "#DCFCE7",
+    "value": "#BBF7D0",
     "cssVariable": "--eds-color-bg-positive-weak-hover"
   },
   "color-bg-transparent": {
@@ -189,13 +207,13 @@ var tokenMap = {
   "color-bg-warning-weak": {
     "name": "color-bg-warning-weak",
     "type": "color",
-    "value": "#FEFCE8",
+    "value": "#FEF9C3",
     "cssVariable": "--eds-color-bg-warning-weak"
   },
   "color-bg-warning-weak-hover": {
     "name": "color-bg-warning-weak-hover",
     "type": "color",
-    "value": "#FEF9C3",
+    "value": "#FEF08A",
     "cssVariable": "--eds-color-bg-warning-weak-hover"
   },
   "color-fg-brand": {
@@ -297,7 +315,7 @@ var tokenMap = {
   "color-fg-warning-contrast": {
     "name": "color-fg-warning-contrast",
     "type": "color",
-    "value": "#713F12",
+    "value": "#A16207",
     "cssVariable": "--eds-color-fg-warning-contrast"
   },
   "color-stroke-brand-primary": {
@@ -357,9 +375,15 @@ var tokenMap = {
   "color-stroke-neutral-secondary": {
     "name": "color-stroke-neutral-secondary",
     "type": "color",
-    "value": "#E5E7EB",
+    "value": "#9CA3AF",
     "cssVariable": "--eds-color-stroke-neutral-secondary"
   },
+  "color-stroke-neutral-tertiary": {
+    "name": "color-stroke-neutral-tertiary",
+    "type": "color",
+    "value": "#E5E7EB",
+    "cssVariable": "--eds-color-stroke-neutral-tertiary"
+  },
   "color-stroke-neutral-weak": {
     "name": "color-stroke-neutral-weak",
     "type": "color",
@@ -906,6 +930,49 @@ var tokenMap = {
     },
     "cssVariable": "--eds-typography-heading3-lineHeight"
   },
+  "typography-heading4-fontFamily": {
+    "name": "typography-heading4-fontFamily",
+    "type": "fontFamily",
+    "value": [
+      "Pretendard",
+      "system-ui",
+      "sans-serif"
+    ],
+    "cssVariable": "--eds-typography-heading4-fontFamily"
+  },
+  "typography-heading4-fontSize": {
+    "name": "typography-heading4-fontSize",
+    "type": "dimension",
+    "value": {
+      "value": 1.25,
+      "unit": "rem"
+    },
+    "cssVariable": "--eds-typography-heading4-fontSize"
+  },
+  "typography-heading4-fontWeight": {
+    "name": "typography-heading4-fontWeight",
+    "type": "fontWeight",
+    "value": 550,
+    "cssVariable": "--eds-typography-heading4-fontWeight"
+  },
+  "typography-heading4-letterSpacing": {
+    "name": "typography-heading4-letterSpacing",
+    "type": "dimension",
+    "value": {
+      "value": -0.2,
+      "unit": "px"
+    },
+    "cssVariable": "--eds-typography-heading4-letterSpacing"
+  },
+  "typography-heading4-lineHeight": {
+    "name": "typography-heading4-lineHeight",
+    "type": "dimension",
+    "value": {
+      "value": 2,
+      "unit": "rem"
+    },
+    "cssVariable": "--eds-typography-heading4-lineHeight"
+  },
   "typography-title1-fontFamily": {
     "name": "typography-title1-fontFamily",
     "type": "fontFamily",
@@ -1083,6 +1150,8 @@ var tokens = Object.freeze(tokenMap);
 var tokenNames = Object.freeze([
   "color-bg-brand-primary",
   "color-bg-brand-primary-hover",
+  "color-bg-brand-weak",
+  "color-bg-brand-weak-hover",
   "color-bg-critical-primary",
   "color-bg-critical-primary-hover",
   "color-bg-critical-weak",
@@ -1093,6 +1162,7 @@ var tokenNames = Object.freeze([
   "color-bg-informative-weak",
   "color-bg-informative-weak-hover",
   "color-bg-layer-basement",
+  "color-bg-layer-basement-hover",
   "color-bg-layer-default",
   "color-bg-layer-default-hover",
   "color-bg-layer-floating",
@@ -1140,6 +1210,7 @@ var tokenNames = Object.freeze([
   "color-stroke-neutral-contrast",
   "color-stroke-neutral-primary",
   "color-stroke-neutral-secondary",
+  "color-stroke-neutral-tertiary",
   "color-stroke-neutral-weak",
   "color-stroke-positive-primary",
   "color-stroke-positive-weak",
@@ -1205,6 +1276,11 @@ var tokenNames = Object.freeze([
   "typography-heading3-fontWeight",
   "typography-heading3-letterSpacing",
   "typography-heading3-lineHeight",
+  "typography-heading4-fontFamily",
+  "typography-heading4-fontSize",
+  "typography-heading4-fontWeight",
+  "typography-heading4-letterSpacing",
+  "typography-heading4-lineHeight",
   "typography-title1-fontFamily",
   "typography-title1-fontSize",
   "typography-title1-fontWeight",
@@ -7553,11 +7629,6 @@ function hasRenderableContent(value) {
   }
   return react.Children.count(value) > 0;
 }
-function requireAccessibleIconLabel(label) {
-  if (label === void 0 || label.trim().length === 0) {
-    throw new Error("Button icon-only layout requires a non-empty aria-label.");
-  }
-}
 function requireLinkHref(href) {
   if (href.trim().length === 0) {
     throw new Error("Button link variant requires a non-empty href.");
@@ -7599,7 +7670,6 @@ function resolveSlots(props) {
     if (hasChildren || startIcon !== void 0 || endIcon !== void 0) {
       throw new Error("Button icon-only layout cannot combine icon with children or start/end icons.");
     }
-    requireAccessibleIconLabel(ariaLabel);
     return { layout: "iconOnly", children, icon };
   }
   if (hasChildren === false) {