@uniai-fe/uds-primitives 0.0.7 → 0.0.8

package/README.md

@@ -39,10 +39,69 @@ import "@uniai-fe/uds-foundation/css";
 import { Button } from "@uniai-fe/uds-primitives";
 
 export default function Page() {
-  return <Button intent="primary">확인</Button>;
+  return (
+    <Button.Default scale="solid-medium" priority="primary">
+      확인
+    </Button.Default>
+  );
+}
+```
+
+### Link/Anchor로 사용하기
+
+```tsx
+import Link from "next/link";
+import { Button } from "@uniai-fe/uds-primitives";
+
+function LinkButton() {
+  return (
+    <Button.Default
+      as={Link}
+      href="/dashboard"
+      scale="outlined-medium"
+      priority="secondary"
+    >
+      대시보드로 이동
+    </Button.Default>
+  );
+}
+```
+
+### Button 역할 클래스 & Props 미리보기
+
+- 기본 클래스: `.button` (padding/height/radius/타이포/커서 담당)
+- 슬롯: `button-label`, `button-icon`, `button-left`, `button-right`, `button-loading`
+- Modifier: `button-scale-*`, `button-fill-*`, `button-priority-*`, `button-state-*`, `button-size-*`, `button-block`, `button-icon-left/right`
+- 차기 리팩토링에서는 디자인 관련 props를 `scale`(레이아웃/spacing 집합)과 `priority`(color set) 두 축으로 단순화하고, 나머지는 상태/slot 위주의 역할 props만 남긴다. 자세한 계획은 `docs/CONTEXT-BUTTON.md`에서 확인할 수 있다.
+- `loading` 상태는 readonly와 동일하게 잠기며 hover/pressed 반응을 막는다. anchor 등 커스텀 요소도 `aria-disabled="true"`를 통해 동일한 스타일을 적용받는다.
+
+### TextButton / RoundButton 템플릿
+
+`Button` 객체는 템플릿별 컴포넌트를 포함한다.
+
+```tsx
+import { Button } from "@uniai-fe/uds-primitives";
+
+function Templates() {
+  return (
+    <>
+      <Button.Text priority="secondary" size="medium">
+        링크 스타일
+      </Button.Text>
+
+      <Button.Rounded aria-label="추가" size="small">
+        <span aria-hidden="true">＋</span>
+      </Button.Rounded>
+    </>
+  );
 }
 ```
 
+- TextButton(`Button.Text`)은 `size="small|medium|large"` + `priority="secondary|tertiary"`만 허용한다.
+- RoundButton(`Button.Rounded`)은 size만 지정하면 되고 priority는 기본 Button과 동일하게 `primary|secondary|tertiary`를 사용한다.
+- 템플릿별 클래스를 추가로 노출한다: `.button-template-text`, `.button-template-text-size-*`, `.button-template-round`, `.button-template-round-size-*`.
+- 스토리북 `primitives/Button` Story에서 solid/outlined/텍스트/라운드 4가지 카테고리를 한 번에 확인할 수 있다.
+
 ## 스타일 내보내기
 
 `@uniai-fe/uds-primitives/styles` 엔트리를 import하면 foundation CSS, theme override, 컴포넌트 SCSS가 한 번에 로드된다.
@@ -60,8 +119,8 @@ import "@uniai-fe/uds-primitives/css";
 컴포넌트 단위로 필요한 스타일만 선택해 불러오려면 각 경로(`components/{name}/index.scss`)를 직접 import하면 된다.
 
 ```scss
-@use "@uniai-fe/uds-primitives/components/button/index.scss";
-@use "@uniai-fe/uds-primitives/components/navigation/index.scss";
+@use "@uniai-fe/uds-primitives/button/index.scss";
+@use "@uniai-fe/uds-primitives/navigation/index.scss";
 ```
 
 ThemeProvider는 CSS를 import하지 않으므로 위 styles 엔트리를 앱 루트에서 1회만 로드하면 중복 없이 토큰 매핑이 적용된다.
@@ -107,7 +166,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
 
 위 예시는 ThemeProvider가 CSS를 다시 import하지 않는 현재 구조를 기준으로 하므로, `globals.scss` 또는 루트에서 styles/css 엔트리를 반드시 한 번 로드해야 한다. Sass 기반 프로젝트는 `@use "@uniai-fe/uds-primitives/styles";`, CSS-only 프로젝트는 `import "@uniai-fe/uds-primitives/css";`를 사용한다.
 
-모든 컴포넌트는 `className`/`data-*` 기반으로 override가 가능하며, 내부 슬롯(prefix/suffix/iconSlot 등)은 `CONTEXT-*.md`에 정의된 API를 따릅니다.
+모든 컴포넌트는 `.component` 클래스 + CSS 변수 기반으로 override가 가능하며, 버튼처럼 Slot(left/right/icon 등)을 제공하는 항목은 `CONTEXT-*.md` 문서에 상세 API를 기록했습니다. 불필요한 `data-*` attribute는 제거했고, 상태 표시는 `:disabled`, `[aria-busy="true"]` 같은 표준 attribute만 사용합니다.
 
 ## 구조
 
@@ -120,7 +179,7 @@ src/components/{category}/
 ```
 
 - 배럴(`components/{category}/index.tsx`)은 항상 `import "./index.scss"`를 포함합니다.
-- 스타일은 foundation CSS 변수만 사용하며, Radix 기본 클래스 대신 `.button[data-intent=...]` 형태로 분기합니다.
+- 스타일은 foundation CSS 변수만 사용하며, `.button.button-priority-*` / `.button.button-fill-*` 클래스 조합으로 상태를 분기합니다.
 
 ## 스크립트