@uniai-fe/uds-primitives 0.6.12 → 0.6.14

package/README.md

@@ -27,10 +27,11 @@ const nextConfig = {
 export default nextConfig;
 ```
 
-앱 루트에서 foundation CSS를 1회 import 하면 모든 primitives가 토큰을 공유합니다.
+CSS-only 프로젝트는 앱 루트에서 foundation CSS를 먼저 로드한 뒤 primitives CSS를 로드합니다. primitives CSS는 foundation token이 이미 로드되어 있다고 가정합니다.
 
 ```ts
 import "@uniai-fe/uds-foundation/css";
+import "@uniai-fe/uds-primitives/css";
 ```
 
 ## 사용 예시
@@ -47,8 +48,23 @@ export default function Page() {
 }
 ```
 
+## Public import surface
+
+`@uniai-fe/uds-primitives`의 공식 안정 public surface는 root namespace import다.
+
+```tsx
+import { Button, Input, Select } from "@uniai-fe/uds-primitives";
+```
+
+- component/type/hook 소비는 root namespace import를 기준으로 안내한다.
+- `@uniai-fe/uds-primitives/styles`, `@uniai-fe/uds-primitives/css`, `@uniai-fe/uds-primitives/init/dayjs`, `@uniai-fe/uds-primitives/init/mantine`, `@uniai-fe/uds-primitives/mantine-style`는 package export map에 있는 style/init entry다.
+- `@uniai-fe/uds-primitives/button`, `@uniai-fe/uds-primitives/input` 같은 short category subpath는 현재 안정 public surface로 안내하지 않는다.
+- category subpath 공개 여부는 package contract gate 후보로 남긴다.
+
 ## 제공 도구 목록
 
+아래 목록은 root namespace에서 확인하는 API inventory다. 카테고리 이름은 도구 탐색용이며, category subpath import 가능 여부의 SOT가 아니다.
+
 - `Alternate.EmptyData`
 - `Alternate.LoadingDefault`
 - `Alternate.LoadingIcon`
@@ -354,36 +370,40 @@ function Templates() {
 
 ## 스타일 내보내기
 
-foundation CSS는 앱 루트에서 한 번만 직접 import해야 한다. primitives `styles/css` 엔트리는 **컴포넌트 SCSS만** 포함하며 foundation 토큰을 다시 로드하지 않는다.
+primitives `styles/css` 엔트리는 primitives component styles만 제공하며 foundation 토큰을 다시 로드하지 않는다. Foundation style은 service app root 또는 global stylesheet에서 먼저 로드해야 한다.
 
-```scss
-@use "@uniai-fe/uds-foundation/css";
-@use "@uniai-fe/uds-primitives/styles";
-```
+### CSS-only consumer setup
 
-Next.js/webpack 환경에서 Sass를 사용하지 않는 경우에는 아래처럼 CSS를 순서대로 import한다.
+Sass를 사용하지 않는 Next.js/webpack 소비자는 CSS entry를 순서대로 import한다.
 
 ```ts
 import "@uniai-fe/uds-foundation/css";
 import "@uniai-fe/uds-primitives/css";
 ```
 
-컴포넌트 단위로 필요한 스타일만 선택해 불러오려면 각 경로(`components/{name}/index.scss`)를 직접 import하면 된다.
+### Sass consumer setup
+
+Sass 소비자는 foundation Sass public entry를 먼저 로드하고 primitives aggregate entry를 이어서 로드한다.
 
 ```scss
-@use "@uniai-fe/uds-primitives/button/index.scss";
-@use "@uniai-fe/uds-primitives/navigation/index.scss";
+@use "@uniai-fe/uds-foundation/scss";
+@use "@uniai-fe/uds-primitives/styles";
 ```
 
+### Storybook/local render setup
+
+modules repo 내부 Storybook은 source style 변경을 빠르게 확인하기 위해 Preview에서 `@uniai-fe/uds-foundation/css` 이후 `@uniai-fe/uds-primitives/styles`를 로드한다. 이 설정은 Storybook local render setup이며 외부 consumer setup의 SOT가 아니다.
+
 ThemeProvider는 CSS를 import하지 않으므로 foundation/primitives styles를 앱 루트에서 1회만 로드하면 중복 없이 토큰 매핑이 적용된다. Provider 자체는 foundation 패키지(`@uniai-fe/uds-foundation/provider`)에서만 export된다(one-source 규칙).
 
-> modules 레포 내부(Storybook 등)에서는 개발 편의를 위해 `@uniai-fe/uds-primitives/styles` 엔트리를 import하지만, 외부 서비스/패키지는 `@uniai-fe/uds-primitives/css` 엔트리만 사용한다.
+Mantine CSS 포함 책임은 이번 문서 보정에서 확정하지 않는다. `@uniai-fe/uds-primitives/css`, `@uniai-fe/uds-primitives/styles`, root init, `mantine-style` 중 어느 entry가 공식 책임을 갖는지는 별도 package/style contract gate에서 정리한다.
 
 ### 토큰 스코프 & ThemeProvider
 
-- primitives 소스 SCSS는 모든 디자인 토큰을 `:root`에 선언하고, 빌드 시 `scripts/merge-theme-root.mjs`가 이 토큰 블록을 하나의 `:root { ... }`로 합쳐 중복 선언을 제거한다.
-- ThemeProvider가 루트 DOM에 `.uds-theme-root` 클래스를 주입하므로, 서비스 앱은 ThemeProvider를 layout 최상단에 배치한 뒤 `@uniai-fe/uds-foundation/css` → `@uniai-fe/uds-primitives/css` 순으로 import하면 된다.
-- modules 레포(Storybook 등)는 SCSS 원본을 직접 import하지만 외부 소비자는 CSS 엔트리만 사용한다는 정책을 README/CODEX-RULES에 명시해둔다.
+- primitives styles는 foundation token이 이미 로드되어 있다고 가정한다.
+- ThemeProvider는 루트 DOM에 `.uds-theme-root` 클래스를 주입하지만 CSS를 import하지 않는다. 서비스 앱은 ThemeProvider를 layout 최상단에 배치하더라도 style entry를 별도로 로드해야 한다.
+- CSS-only 소비자는 `@uniai-fe/uds-foundation/css` -> `@uniai-fe/uds-primitives/css` 순서를 사용한다.
+- Sass 소비자는 `@uniai-fe/uds-foundation/scss` -> `@uniai-fe/uds-primitives/styles` 순서를 사용한다.
 
 ## Next.js 통합 예시
 
@@ -402,17 +422,23 @@ const nextConfig = {
 export default nextConfig;
 ```
 
+아래 두 style load 방식 중 하나만 선택한다.
+
+Sass 방식:
+
 ```scss
 /* app/globals.scss */
-@use "@uniai-fe/uds-foundation/css";
+@use "@uniai-fe/uds-foundation/scss";
 @use "@uniai-fe/uds-primitives/styles";
 ```
 
+CSS-only 방식:
+
 ```tsx
 // app/layout.tsx
 import type { ReactNode } from "react";
 import "@uniai-fe/uds-foundation/css";
-import "@uniai-fe/uds-primitives/styles";
+import "@uniai-fe/uds-primitives/css";
 import { ThemeProvider } from "@uniai-fe/uds-foundation/provider";
 
 export default function RootLayout({ children }: { children: ReactNode }) {
@@ -426,7 +452,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
 }
 ```
 
-위 예시는 ThemeProvider가 foundation 패키지에서만 export되고 CSS를 재import하지 않는 현재 구조를 기준으로 하므로, `globals.scss` 또는 루트에서 foundation/primitives styles를 반드시 각각 한 번 로드해야 한다. Sass 기반 프로젝트는 `@use "@uniai-fe/uds-foundation/css"; @use "@uniai-fe/uds-primitives/styles";`, CSS-only 프로젝트는 `import "@uniai-fe/uds-foundation/css"; import "@uniai-fe/uds-primitives/css";`를 사용한다.
+두 방식 모두 ThemeProvider가 foundation 패키지에서만 export되고 CSS를 재import하지 않는 현재 구조를 기준으로 한다. `globals.scss` 또는 루트에서 foundation/primitives styles를 반드시 각각 한 번 로드해야 한다. Sass 기반 프로젝트는 `@use "@uniai-fe/uds-foundation/scss"; @use "@uniai-fe/uds-primitives/styles";`, CSS-only 프로젝트는 `import "@uniai-fe/uds-foundation/css"; import "@uniai-fe/uds-primitives/css";`를 사용한다.
 
 모든 컴포넌트는 `.component` 클래스 + CSS 변수 기반으로 override가 가능하며, 버튼처럼 Slot(left/right/icon 등)을 제공하는 항목은 `CONTEXT-*.md` 문서에 상세 API를 기록했습니다. 불필요한 `data-*` attribute는 제거했고, 상태 표시는 `:disabled`, `[aria-busy="true"]` 같은 표준 attribute만 사용합니다.
 

package/dist/styles.css

@@ -998,6 +998,8 @@
   --badge-line-height: var(--theme-badge-line-height-xsmall);
   --badge-letter-spacing: var(--theme-badge-letter-spacing-xsmall);
   --badge-dot-size: var(--theme-badge-dot-size);
+  --badge-border-width: 0px;
+  --badge-border-color: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1007,7 +1009,9 @@
   margin: 0;
   padding-inline: var(--badge-padding-inline);
   padding-block: 0;
-  border: 0;
+  border-width: var(--badge-border-width);
+  border-style: solid;
+  border-color: var(--badge-border-color);
   box-sizing: border-box;
   border-radius: var(--badge-radius);
   white-space: nowrap;
@@ -1042,21 +1046,20 @@
 .badge:where([data-style=fill]) {
   background-color: var(--badge-background-color, var(--theme-badge-fill-background-default));
   color: var(--badge-text-color, var(--theme-badge-fill-text-default));
-  border-color: transparent;
+  --badge-border-color: transparent;
 }
 
 .badge:where([data-style=outlined]) {
   background-color: var(--badge-background-color, var(--theme-badge-outlined-background-default));
   color: var(--badge-text-color, var(--theme-badge-outlined-text-default));
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--badge-border-color, var(--theme-badge-outlined-border-default));
+  --badge-border-width: 1px;
+  --badge-border-color: var(--theme-badge-outlined-border-default);
 }
 
 .badge:where([data-style=count]) {
   background-color: var(--badge-background-color, var(--theme-badge-count-background-default));
   color: var(--badge-text-color, var(--theme-badge-count-text-default));
-  border-color: transparent;
+  --badge-border-color: transparent;
   border-radius: calc(var(--badge-height) / 2);
 }
 
@@ -3569,14 +3572,21 @@ figure.chip {
 }
 
 .input-date-trigger-icon {
-  margin: 0;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
+  flex: 0 0 28px;
   width: 28px;
   height: 28px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
   color: var(--color-label-alternative);
-  pointer-events: none;
+  cursor: pointer;
+}
+.input-date-trigger-icon:where([aria-disabled=true]) {
+  cursor: default;
 }
 
 .input-date-trigger-input.input-priority-table .input-field {

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.6.12",
+  "version": "0.6.14",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
   "sideEffects": [
     "./src/**/*.scss",
     "./styles.scss",
+    "./dist/styles.css",
     "./src/**/*.css",
     "./src/init/*.ts"
   ],
@@ -94,7 +95,7 @@
     "@mantine/hooks": "^8.3.18",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^24.12.3",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "@uniai-fe/eslint-config": "workspace:*",
     "@uniai-fe/next-devkit": "workspace:*",
@@ -103,7 +104,7 @@
     "@uniai-fe/util-functions": "workspace:*",
     "eslint": "^9.39.2",
     "prettier": "^3.8.3",
-    "react-hook-form": "^7.75.0",
+    "react-hook-form": "^7.76.0",
     "sass": "^1.99.0",
     "typescript": "5.9.3"
   }

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

@@ -45,7 +45,12 @@ const Badge = forwardRef<HTMLElementTagNameMap["figure"], BadgeProps>(
       ...(backgroundColor
         ? { "--badge-background-color": backgroundColor }
         : null),
-      ...(borderColor ? { "--badge-border-color": borderColor } : null),
+      ...(borderColor
+        ? {
+            "--badge-border-color": borderColor,
+            "--badge-border-width": "1px",
+          }
+        : null),
     } as CSSProperties;
     // dot 스타일은 실제 원형 포인트 요소를 별도로 렌더링한다.
     const renderDot =

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

@@ -7,6 +7,8 @@
   --badge-line-height: var(--theme-badge-line-height-xsmall);
   --badge-letter-spacing: var(--theme-badge-letter-spacing-xsmall);
   --badge-dot-size: var(--theme-badge-dot-size);
+  --badge-border-width: 0px;
+  --badge-border-color: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16,7 +18,9 @@
   margin: 0;
   padding-inline: var(--badge-padding-inline);
   padding-block: 0;
-  border: 0;
+  border-width: var(--badge-border-width);
+  border-style: solid;
+  border-color: var(--badge-border-color);
   box-sizing: border-box;
   border-radius: var(--badge-radius);
   white-space: nowrap;
@@ -54,7 +58,7 @@
     var(--theme-badge-fill-background-default)
   );
   color: var(--badge-text-color, var(--theme-badge-fill-text-default));
-  border-color: transparent;
+  --badge-border-color: transparent;
 }
 
 .badge:where([data-style="outlined"]) {
@@ -63,12 +67,8 @@
     var(--theme-badge-outlined-background-default)
   );
   color: var(--badge-text-color, var(--theme-badge-outlined-text-default));
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(
-    --badge-border-color,
-    var(--theme-badge-outlined-border-default)
-  );
+  --badge-border-width: 1px;
+  --badge-border-color: var(--theme-badge-outlined-border-default);
 }
 
 .badge:where([data-style="count"]) {
@@ -77,7 +77,7 @@
     var(--theme-badge-count-background-default)
   );
   color: var(--badge-text-color, var(--theme-badge-count-text-default));
-  border-color: transparent;
+  --badge-border-color: transparent;
   border-radius: calc(var(--badge-height) / 2);
 }
 

package/src/components/input/markup/date/Trigger.tsx

@@ -8,7 +8,7 @@ import type {
   KeyboardEvent,
   MouseEvent,
 } from "react";
-import { forwardRef } from "react";
+import { forwardRef, useCallback, useRef } from "react";
 import { Calendar } from "../../../calendar";
 import { InputFoundation } from "../foundation";
 import type { InputCalendarTriggerViewProps } from "../../types";
@@ -52,6 +52,22 @@ const InputDateTrigger = forwardRef<
     },
     ref,
   ) => {
+    const triggerInputRef = useRef<HTMLInputElement | null>(null);
+
+    const setTriggerInputRef = useCallback(
+      (node: HTMLInputElement | null) => {
+        triggerInputRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+          return;
+        }
+        if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref],
+    );
+
     /**
      * Radix `asChild`가 주입한 onClick을 보존하기 위해 restProps.onClick을 병합한다.
      * (Input Date 자체 onClick 계약도 함께 실행)
@@ -63,6 +79,17 @@ const InputDateTrigger = forwardRef<
       }
       onClick?.(event as never);
     };
+
+    const handleIconClick = (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      if (disabled || readOnly) {
+        return;
+      }
+
+      triggerInputRef.current?.focus();
+      triggerInputRef.current?.click();
+    };
+
     // 변경: Date trigger는 기본적으로 직접 타이핑을 막고, 달력 선택을 단일 입력 경로로 유지한다.
     const shouldBlockTyping = !disabled && !readOnly;
 
@@ -113,10 +140,23 @@ const InputDateTrigger = forwardRef<
       }
     };
 
+    const calendarIcon = (
+      <button
+        type="button"
+        className="input-date-trigger-icon"
+        tabIndex={-1}
+        aria-label="달력 열기"
+        aria-disabled={disabled || readOnly ? true : undefined}
+        onClick={handleIconClick}
+      >
+        <Calendar.Icon.Calendar />
+      </button>
+    );
+
     return (
       <InputFoundation.Base
         {...restProps}
-        ref={ref}
+        ref={setTriggerInputRef}
         value={displayValue}
         // PopOver.Trigger(asChild)가 주입한 `type="button"`으로 placeholder가 사라지는 문제를 막기 위해
         // Date trigger는 항상 text type을 유지한다.
@@ -137,21 +177,9 @@ const InputDateTrigger = forwardRef<
         onPaste={handlePaste}
         onDrop={handleDrop}
         // table priority는 icon을 왼쪽 슬롯에 배치한다.
-        left={
-          priority === "table" ? (
-            <figure className="input-date-trigger-icon" aria-hidden="true">
-              <Calendar.Icon.Calendar />
-            </figure>
-          ) : undefined
-        }
+        left={priority === "table" ? calendarIcon : undefined}
         // 기본(priority != table)은 기존처럼 icon을 오른쪽 슬롯에 유지한다.
-        right={
-          priority === "table" ? undefined : (
-            <figure className="input-date-trigger-icon" aria-hidden="true">
-              <Calendar.Icon.Calendar />
-            </figure>
-          )
-        }
+        right={priority === "table" ? undefined : calendarIcon}
       />
     );
   },

package/src/components/input/styles/date.scss

@@ -10,15 +10,22 @@
 }
 
 .input-date-trigger-icon {
-  margin: 0;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
+  flex: 0 0 28px;
   width: 28px;
   height: 28px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
   color: var(--color-label-alternative);
-  // 아이콘 영역 클릭은 input으로 위임한다.
-  pointer-events: none;
+  cursor: pointer;
+
+  &:where([aria-disabled="true"]) {
+    cursor: default;
+  }
 }
 
 .input-date-trigger-input.input-priority-table {