@uniai-fe/uds-primitives 0.0.1

package/README.md

@@ -0,0 +1,63 @@
+# @uniai-fe/uds-primitives
+
+`@uniai-fe/uds-foundation` 토큰 위에 Radix UI 컴포넌트를 얇게 감싼 **기초 UI 컴포넌트 컬렉션**입니다. Next.js 등 React 런타임에서 바로 import해 버튼·입력·네비게이션 등 공통 요소를 일관된 스타일로 사용할 수 있습니다.
+
+## 설치
+
+```bash
+pnpm add @uniai-fe/uds-foundation @uniai-fe/uds-primitives
+```
+
+```ts
+// next.config.ts
+const nextConfig = {
+  transpilePackages: ["@uniai-fe/uds-foundation", "@uniai-fe/uds-primitives"],
+};
+export default nextConfig;
+```
+
+앱 루트에서 foundation CSS를 1회 import 하면 모든 primitives가 토큰을 공유합니다.
+
+```ts
+import "@uniai-fe/uds-foundation/css";
+```
+
+## 사용 예시
+
+```tsx
+import { Button } from "@uniai-fe/uds-primitives";
+
+export default function Page() {
+  return <Button intent="primary">확인</Button>;
+}
+```
+
+모든 컴포넌트는 `className`/`data-*` 기반으로 override가 가능하며, 내부 슬롯(prefix/suffix/iconSlot 등)은 `CONTEXT-*.md`에 정의된 API를 따릅니다.
+
+## 구조
+
+```plaintext
+src/components/{category}/
+  markup/   // 컴포넌트 구현
+  types/    // 외부 노출 타입
+  styles/   // SCSS (foundation 토큰 기반)
+  hooks/    // 카테고리 전용 훅
+```
+
+- 배럴(`components/{category}/index.tsx`)은 항상 `import "./index.scss"`를 포함합니다.
+- 스타일은 foundation CSS 변수만 사용하며, Radix 기본 클래스 대신 `.button[data-intent=...]` 형태로 분기합니다.
+
+## 스크립트
+
+- `pnpm module:lint`
+- `pnpm module:typecheck`
+- `pnpm module:build`
+
+루트에서는 `pnpm --filter @uniai-fe/uds-primitives <command>`로 실행할 수 있습니다.
+
+## 문서
+
+- `CONTEXT.md` 및 `CONTEXT-*.md`: 각 컴포넌트의 상태/진행/디자인 근거
+- `RADIX-SIZE-GUIDE.md`: primitives 사이즈 체계와 Radix 매핑 규칙
+
+필요한 컨텍스트를 확인한 뒤 컴포넌트를 import해 사용하면 됩니다.

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@uniai-fe/uds-primitives",
+  "version": "0.0.1",
+  "description": "UNIAI Design System; Primitives Components Package",
+  "type": "module",
+  "private": false,
+  "sideEffects": false,
+  "license": "MIT",
+  "homepage": "https://www.uniai.co.kr/",
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "pnpm@10.25.0",
+  "engines": {
+    "node": ">=24",
+    "pnpm": ">=10"
+  },
+  "author": {
+    "name": "GraffitoRyu",
+    "email": "yth4135@naver.com",
+    "url": "https://github.com/GraffitoRyu"
+  },
+  "files": [
+    "src"
+  ],
+  "main": "./src/index.tsx",
+  "module": "./src/index.tsx",
+  "exports": {
+    ".": "./src/index.tsx"
+  },
+  "scripts": {
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "lint": "eslint . --max-warnings=0",
+    "typecheck": "tsc --project tsconfig.build.json --noEmit",
+    "build": "pnpm format && pnpm typecheck",
+    "dev": "tsc --project tsconfig.build.json --watch --noEmit",
+    "module:lint": "pnpm lint",
+    "module:typecheck": "pnpm typecheck",
+    "module:build": "pnpm build",
+    "design-primitives:build": "pnpm run build",
+    "design-primitives:dev": "pnpm run dev"
+  },
+  "peerDependencies": {
+    "@uniai-fe/uds-foundation": "workspace:^0.0.1",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "react": ">= 19",
+    "react-dom": ">= 19",
+    "react-hook-form": ">= 7"
+  },
+  "dependencies": {
+    "@mantine/core": "^8.3.9",
+    "@mantine/dates": "^8.3.9",
+    "@mantine/hooks": "^8.3.9",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toggle-group": "^1.1.3",
+    "@radix-ui/react-primitive": "^2.1.4",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/themes": "^3.2.1",
+    "@uniai-fe/util-functions": "workspace:*",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.19"
+  },
+  "devDependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@svgr/webpack": "^8.1.0",
+    "@types/node": "^24.10.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@uniai-fe/eslint-config": "workspace:*",
+    "@uniai-fe/next-devkit": "workspace:*",
+    "@uniai-fe/tsconfig": "workspace:*",
+    "eslint": "^9.39.1",
+    "prettier": "^3.7.4",
+    "react-hook-form": "^7.68.0",
+    "sass": "^1.95.0",
+    "typescript": "~5.9.3"
+  }
+}

package/src/components/alternate/hooks/index.ts

@@ -0,0 +1,4 @@
+/**
+ * TODO(alternate): 접근성/상태 계산 hook을 정의한다.
+ */
+export {};

package/src/components/alternate/index.scss

@@ -0,0 +1 @@
+@use "./styles/index.scss";

package/src/components/alternate/index.tsx

@@ -0,0 +1,4 @@
+/**
+ * alternate 카테고리 배럴 placeholder: 실제 구현은 markup/ 하위에 추가한다.
+ */
+export * from "./markup";

package/src/components/alternate/markup/index.tsx

@@ -0,0 +1,4 @@
+/**
+ * TODO(alternate): SOT 및 사용자 제약에 따라 컴포넌트를 구현한다.
+ */
+export {};

package/src/components/alternate/styles/index.scss

@@ -0,0 +1,3 @@
+@use "@uniai-fe/uds-foundation/css";
+
+/* TODO(alternate): 스타일을 SOT 토큰 값으로 정의한다. */

package/src/components/alternate/types/index.ts

@@ -0,0 +1,4 @@
+/**
+ * TODO(alternate): variant/slot 타입 정의를 작성한다.
+ */
+export {};

package/src/components/alternate/utils/index.ts

@@ -0,0 +1,4 @@
+/**
+ * TODO(alternate): 토큰 매핑과 클래스명 유틸을 구현한다.
+ */
+export {};

package/src/components/badge/hooks/index.ts

@@ -0,0 +1,4 @@
+/**
+ * TODO(badge): 접근성/상태 계산 hook을 정의한다.
+ */
+export {};

package/src/components/badge/index.scss

@@ -0,0 +1 @@
+@use "./styles/index.scss";

package/src/components/badge/index.tsx

@@ -0,0 +1,6 @@
+/**
+ * badge 카테고리 배럴 placeholder: 실제 구현은 markup/ 하위에 추가한다.
+ */
+import "./index.scss";
+
+export * from "./markup";

package/src/components/badge/markup/Badge.tsx

@@ -0,0 +1,51 @@
+import { forwardRef } from "react";
+import type { BadgeProps } from "../types";
+import { composeBadgeClassName } from "../utils";
+
+/**
+ * Badge 컴포넌트; size/style/intent 축을 data attribute로 노출한다.
+ */
+const Badge = forwardRef<HTMLElementTagNameMap["figure"], BadgeProps>(
+  (
+    {
+      children,
+      size = "xsmall",
+      style = "fill",
+      intent = "primary",
+      tone = "primary",
+      className,
+      inlineStyle,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const combinedClassName = composeBadgeClassName({ size, style, className });
+    // dot 스타일은 실제 원형 포인트 요소를 별도로 렌더링한다.
+    const renderDot =
+      style === "dot" ? (
+        <span className="badge-dot" aria-hidden="true" />
+      ) : null;
+    const hasLabel = Boolean(children);
+
+    return (
+      <figure
+        {...restProps}
+        ref={ref}
+        className={combinedClassName}
+        style={inlineStyle}
+        data-size={size}
+        data-style={style}
+        data-intent={style === "dot" ? undefined : intent}
+        data-tone={style === "dot" ? tone : undefined}
+        data-has-label={hasLabel ? "true" : undefined}
+      >
+        {renderDot}
+        {children ? <span className="badge-label">{children}</span> : null}
+      </figure>
+    );
+  },
+);
+
+Badge.displayName = "Badge";
+
+export { Badge };

package/src/components/badge/markup/index.tsx

@@ -0,0 +1 @@
+export { Badge } from "./Badge";

package/src/components/badge/styles/index.scss

@@ -0,0 +1,189 @@
+@use "@uniai-fe/uds-foundation/css";
+
+/* Badge 토큰을 foundation 변수에 맞춰 한 번 더 래핑해 override 여지를 둔다. */
+:where(.radix-themes, .theme-root, :root) {
+  --theme-badge-height-xsmall: var(--theme-size-small-1, 20px);
+  --theme-badge-height-small: var(--theme-size-small-2, 24px);
+  --theme-badge-padding-inline-xsmall: var(--spacing-padding-3, 6px);
+  --theme-badge-padding-inline-small: var(--spacing-padding-4, 8px);
+  --theme-badge-radius: var(--theme-radius-medium-1, 6px);
+  --theme-badge-font-family: var(--font-caption-medium-family, inherit);
+  --theme-badge-font-size: var(--font-caption-medium-size, 11px);
+  --theme-badge-font-weight: var(--font-caption-medium-weight, 400);
+  --theme-badge-line-height: var(--font-caption-medium-line-height, 1.5);
+  --theme-badge-letter-spacing: var(--font-caption-medium-letter-spacing, 0);
+  --theme-badge-dot-size: var(--spacing-gap-3, 8px);
+}
+
+.badge {
+  --badge-height: var(--theme-badge-height-xsmall);
+  --badge-padding-inline: var(--theme-badge-padding-inline-xsmall);
+  --badge-gap: var(--spacing-gap-1, 4px);
+  --badge-fill-bg-color: var(--color-primary-default, #1a6aff);
+  --badge-fill-label-color: var(--color-common-100, #ffffff);
+  --badge-outline-border-color: var(--color-primary-default, #1a6aff);
+  --badge-outline-label-color: var(--color-primary-default, #1a6aff);
+  --badge-dot-color: var(--color-primary-default, #1a6aff);
+  --badge-dot-size: var(--theme-badge-dot-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--badge-gap);
+  height: var(--badge-height);
+  padding-inline: var(--badge-padding-inline);
+  padding-block: 0;
+  border-radius: var(--theme-badge-radius);
+  border: 0;
+  font-family: var(--theme-badge-font-family);
+  font-size: var(--theme-badge-font-size);
+  font-weight: var(--theme-badge-font-weight);
+  line-height: 1;
+  letter-spacing: var(--theme-badge-letter-spacing);
+  white-space: nowrap;
+  box-sizing: border-box;
+  margin: 0;
+  width: fit-content;
+}
+
+.badge:where([data-size="small"]) {
+  --badge-height: var(--theme-badge-height-small);
+  --badge-padding-inline: var(--theme-badge-padding-inline-small);
+}
+
+.badge:where([data-style="fill"]) {
+  background-color: var(--badge-fill-bg-color);
+  color: var(--badge-fill-label-color);
+  border-color: transparent;
+}
+
+.badge:where([data-style="outlined"]) {
+  background-color: var(--color-bg-surface-static-white, #ffffff);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--badge-outline-border-color);
+  color: var(--badge-outline-label-color);
+}
+
+.badge:where([data-style="dot"]) {
+  padding: 0;
+  border-width: 0;
+  width: var(--badge-dot-size);
+  height: var(--badge-dot-size);
+  min-width: 0;
+  border-radius: var(--badge-dot-size);
+  background-color: transparent;
+}
+
+.badge-dot {
+  width: var(--badge-dot-size);
+  height: var(--badge-dot-size);
+  border-radius: 999px;
+  background-color: var(--badge-dot-color);
+  flex-shrink: 0;
+}
+
+.badge-label {
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+  line-height: 1;
+}
+
+.badge:where([data-style="dot"]) .badge-label {
+  font-size: 0;
+  line-height: 0;
+  height: 0;
+  width: 0;
+  overflow: hidden;
+}
+
+/* fill intent 별 배경/라벨 컬러 정의 */
+.badge:where([data-style="fill"][data-intent="primary"]) {
+  --badge-fill-bg-color: var(--color-primary-default, #1a6aff);
+  --badge-fill-label-color: var(--color-common-100, #ffffff);
+}
+
+.badge:where([data-style="fill"][data-intent="secondary"]) {
+  --badge-fill-bg-color: var(--color-secondary-default, #e5eeff);
+  --badge-fill-label-color: var(--color-primary-default, #1a6aff);
+}
+
+.badge:where([data-style="fill"][data-intent="teritary"]) {
+  --badge-fill-bg-color: var(--color-cool-gray-10, #18191b);
+  --badge-fill-label-color: var(--color-common-100, #ffffff);
+}
+
+.badge:where([data-style="fill"][data-intent="gray"]) {
+  --badge-fill-bg-color: var(--color-bg-surface-neutral, #f2f2f2);
+  --badge-fill-label-color: var(--color-label-neutral, #797e86);
+}
+
+.badge:where([data-style="fill"][data-intent="green"]) {
+  --badge-fill-bg-color: var(--color-green-95, #e9fcef);
+  --badge-fill-label-color: var(--color-green-45, #1dc956);
+}
+
+.badge:where([data-style="fill"][data-intent="yellow"]) {
+  --badge-fill-bg-color: var(--color-yellow-95, #fefae7);
+  --badge-fill-label-color: var(--color-yellow-45, #dab80b);
+}
+
+.badge:where([data-style="fill"][data-intent="orange"]) {
+  --badge-fill-bg-color: var(--color-orange-95, #ffeee5);
+  --badge-fill-label-color: var(--color-orange-55, #ff661a);
+}
+
+.badge:where([data-style="fill"][data-intent="red"]) {
+  --badge-fill-bg-color: var(--color-red-95, #fde8e7);
+  --badge-fill-label-color: var(--color-red-55, #f43625);
+}
+
+/* outlined intent 별 border/label 컬러 정의 */
+.badge:where([data-style="outlined"][data-intent="primary"]) {
+  --badge-outline-border-color: var(--color-primary-default, #1a6aff);
+  --badge-outline-label-color: var(--color-primary-default, #1a6aff);
+}
+
+.badge:where([data-style="outlined"][data-intent="secondary"]) {
+  --badge-outline-border-color: var(--color-border-standard-blue, #ccdeff);
+  --badge-outline-label-color: var(--color-primary-strong, #0050e5);
+}
+
+.badge:where([data-style="outlined"][data-intent="teritary"]) {
+  --badge-outline-border-color: var(--color-border-standard-heavy, #313235);
+  --badge-outline-label-color: var(--color-label-strong, #18191b);
+}
+
+.badge:where([data-style="outlined"][data-intent="gray"]) {
+  --badge-outline-border-color: var(--color-border-standard-assistive, #e4e5e7);
+  --badge-outline-label-color: var(--color-label-standard, #3d3f43);
+}
+
+.badge:where([data-style="outlined"][data-intent="green"]) {
+  --badge-outline-border-color: var(--color-green-45, #1dc956);
+  --badge-outline-label-color: var(--color-green-45, #1dc956);
+}
+
+.badge:where([data-style="outlined"][data-intent="yellow"]) {
+  --badge-outline-border-color: var(--color-yellow-60, #f5d63d);
+  --badge-outline-label-color: var(--color-yellow-45, #dab80b);
+}
+
+.badge:where([data-style="outlined"][data-intent="orange"]) {
+  --badge-outline-border-color: var(--color-orange-70, #ff9966);
+  --badge-outline-label-color: var(--color-orange-55, #ff661a);
+}
+
+.badge:where([data-style="outlined"][data-intent="red"]) {
+  --badge-outline-border-color: var(--color-red-70, #f7796e);
+  --badge-outline-label-color: var(--color-red-55, #f43625);
+}
+
+/* dot tone 별 포인트 컬러 */
+.badge:where([data-style="dot"][data-tone="primary"]) {
+  --badge-dot-color: var(--color-primary-default, #1a6aff);
+}
+
+.badge:where([data-style="dot"][data-tone="feedback"]) {
+  --badge-dot-color: var(--color-red-55, #f43625);
+}

package/src/components/badge/types/index.ts

@@ -0,0 +1,55 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+export const BADGE_SIZES = ["xsmall", "small"] as const;
+export const BADGE_STYLES = ["fill", "outlined", "dot"] as const;
+export const BADGE_INTENTS = [
+  "primary",
+  "secondary",
+  "teritary",
+  "gray",
+  "green",
+  "yellow",
+  "orange",
+  "red",
+] as const;
+export const BADGE_TONES = ["primary", "feedback"] as const;
+
+export type BadgeSize = (typeof BADGE_SIZES)[number];
+export type BadgeStyle = (typeof BADGE_STYLES)[number];
+export type BadgeIntent = (typeof BADGE_INTENTS)[number];
+export type BadgeTone = (typeof BADGE_TONES)[number];
+
+type NativeFigureProps = Omit<ComponentPropsWithoutRef<"figure">, "style">;
+
+export interface BadgeProps extends Omit<NativeFigureProps, "children"> {
+  /**
+   * 표시할 라벨. 생략하면 dot 스타일만 렌더링된다.
+   */
+  children?: ReactNode;
+  /**
+   * Figma size 축 (xsmall/small)
+   */
+  size?: BadgeSize;
+  /**
+   * style 축 (fill/outlined/dot)
+   */
+  style?: BadgeStyle;
+  /**
+   * fill/outlined 변형의 intent 축. dot 스타일에는 tone을 사용한다.
+   */
+  intent?: BadgeIntent;
+  /**
+   * dot 변형 전용 tone 축(primary/feedback).
+   */
+  tone?: BadgeTone;
+  /**
+   * 원본 figure 요소에 적용할 인라인 스타일.
+   */
+  inlineStyle?: ComponentPropsWithoutRef<"figure">["style"];
+}
+
+export interface BadgeClassNameOptions {
+  size: BadgeSize;
+  style: BadgeStyle;
+  className?: string;
+}

package/src/components/badge/utils/index.ts

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+import type { BadgeClassNameOptions } from "../types";
+
+const BADGE_CLASSNAME = "badge";
+
+/**
+ * Badge 데이터 축을 className 구조로 묶어서 Story/override 시 일관되게 쓴다.
+ */
+const composeBadgeClassName = ({
+  size,
+  style,
+  className,
+}: BadgeClassNameOptions) =>
+  clsx(
+    BADGE_CLASSNAME,
+    `${BADGE_CLASSNAME}--size-${size}`,
+    `${BADGE_CLASSNAME}--style-${style}`,
+    className,
+  );
+
+export { BADGE_CLASSNAME, composeBadgeClassName };

package/src/components/button/hooks/index.ts

@@ -0,0 +1,4 @@
+/**
+ * TODO(button): 접근성/상태 계산 hook을 정의한다.
+ */
+export {};

package/src/components/button/index.scss

@@ -0,0 +1 @@
+@use "./styles/index.scss";

package/src/components/button/index.tsx

@@ -0,0 +1,6 @@
+/**
+ * button 카테고리 배럴 placeholder: 실제 구현은 markup/ 하위에 추가한다.
+ */
+import "./index.scss";
+
+export * from "./markup";