@iyulab/enterprise 0.6.0 → 0.7.1

package/dist/FormSection.d.ts

@@ -2,6 +2,15 @@ import { CSSProperties, ReactNode } from 'react';
 /**
  * L2 폼 블록 — 제목이 붙은 필드 묶음.
  *
+ * 🔴**제목에 `text-transform: uppercase` 와 `letter-spacing` 을 걸지 않는다**(0.7.0 에서 제거).
+ *   ⑴ 한글에는 대문자가 없어 `uppercase` 가 **아무 효과가 없고**, 제목에 영문이 섞이면
+ *      그것만 커져 오히려 어수선해진다.
+ *   ⑵ 양수 `letter-spacing` 은 **한글 가독성을 떨어뜨린다** — 라틴 소문자 조판 관례를
+ *      그대로 옮기면 안 되는 자리다.
+ *   ⇒ 위계는 **크기·굵기·색** 세 신호로만 만든다(타입 스케일의 `label` 단).
+ *   영문 전용 UI 에서 눈썹 텍스트 느낌이 필요하면 `titleStyle` 로 `--u-text-overline-*`
+ *   단을 직접 지정한다 — 그 단은 영문·숫자 라벨을 전제하고 양수 자간을 갖는다.
+ *
  * 오버라이드 계약(docs/lob-layers.md §2): 구조는 두고 **children 치환 + prop** 으로 바꾼다.
  * ⚠기본 스타일은 병합 가능한 형태로만 둔다 — 호출자의 `style` 이 뒤에 오므로 필요한
  * 항목만 골라 덮을 수 있다. 인라인으로 굳혀 두면 소비자 CSS 가 이길 수 없어(`!important`

package/dist/index.js

@@ -5,6 +5,15 @@ import buildQuery from "odata-query";
 /**
 * L2 폼 블록 — 제목이 붙은 필드 묶음.
 *
+* 🔴**제목에 `text-transform: uppercase` 와 `letter-spacing` 을 걸지 않는다**(0.7.0 에서 제거).
+*   ⑴ 한글에는 대문자가 없어 `uppercase` 가 **아무 효과가 없고**, 제목에 영문이 섞이면
+*      그것만 커져 오히려 어수선해진다.
+*   ⑵ 양수 `letter-spacing` 은 **한글 가독성을 떨어뜨린다** — 라틴 소문자 조판 관례를
+*      그대로 옮기면 안 되는 자리다.
+*   ⇒ 위계는 **크기·굵기·색** 세 신호로만 만든다(타입 스케일의 `label` 단).
+*   영문 전용 UI 에서 눈썹 텍스트 느낌이 필요하면 `titleStyle` 로 `--u-text-overline-*`
+*   단을 직접 지정한다 — 그 단은 영문·숫자 라벨을 전제하고 양수 자간을 갖는다.
+*
 * 오버라이드 계약(docs/lob-layers.md §2): 구조는 두고 **children 치환 + prop** 으로 바꾼다.
 * ⚠기본 스타일은 병합 가능한 형태로만 둔다 — 호출자의 `style` 이 뒤에 오므로 필요한
 * 항목만 골라 덮을 수 있다. 인라인으로 굳혀 두면 소비자 CSS 가 이길 수 없어(`!important`
@@ -14,19 +23,19 @@ function FormSection({ title, children, className, style, titleStyle }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className,
 		style: {
-			marginBottom: "20px",
+			marginBottom: "var(--u-space-xl, 20px)",
 			...style
 		},
 		children: [/* @__PURE__ */ jsx("div", {
 			style: {
-				fontSize: "11px",
-				fontWeight: 700,
-				textTransform: "uppercase",
-				letterSpacing: "0.5px",
+				fontSize: "var(--u-text-label-size, 13px)",
+				fontWeight: "var(--u-text-label-weight, 600)",
+				lineHeight: "var(--u-text-label-leading, 1.5)",
+				letterSpacing: "var(--u-text-label-tracking, 0)",
 				color: "color-mix(in srgb, var(--u-primary-color, #1E88E5) 85%, black)",
-				paddingBottom: "6px",
+				paddingBottom: "var(--u-space-xs, 6px)",
 				borderBottom: "1px solid var(--u-border-color-weak, #EEEEEE)",
-				marginBottom: "10px",
+				marginBottom: "var(--u-space-sm, 8px)",
 				...titleStyle
 			},
 			children: title
@@ -34,7 +43,7 @@ function FormSection({ title, children, className, style, titleStyle }) {
 			style: {
 				display: "flex",
 				flexDirection: "column",
-				gap: "8px"
+				gap: "var(--u-space-sm, 8px)"
 			},
 			children
 		})]
@@ -63,7 +72,7 @@ function FormRow({ children, full, columns = 2, className, style }) {
 		style: {
 			display: "grid",
 			gridTemplateColumns: `repeat(${columns}, 1fr)`,
-			gap: "8px",
+			gap: "var(--u-space-sm, 8px)",
 			...style
 		},
 		children

package/dist/styles/preset.css

@@ -0,0 +1,142 @@
+/*
+ * @iyulab/enterprise — **하우스 스타일 프리셋** (이유랩 LOB 앱 기본값)
+ * ==========================================================================
+ *
+ *   import '@iyulab/enterprise/styles/preset.css';
+ *
+ * ⚠**`@iyulab/components` 1.21.0 이상이 필요하다.** 이 파일은 값만 정하고, 그 값을 **읽는
+ *   쪽은 컴포넌트**다. 1.20.0 이하에는 타입 스케일·반경 상단 축이 아예 없어서 여기 적은
+ *   `--u-text-*` 는 **아무도 읽지 않는다** — 에러 없이 절반만 적용된 것처럼 보인다.
+ *   `peerDependencies` 에 선언해 두었으나 **optional** 이다(프리셋을 쓰지 않는 소비자는
+ *   `components` 자체가 필요 없다). 즉 버전 불일치는 **경고 없이 조용하다** — 프리셋을
+ *   로드했는데 글자 크기가 안 바뀌면 먼저 이 버전을 본다.
+ *
+ * `@iyulab/components` 가 여는 **토큰 축**에 이유랩의 값을 채운 한 장이다.
+ * 축(이름·단 수)은 `components` 소유이고, 이 파일은 **값만** 정한다.
+ *
+ * ──────────────────────────────────────────────────────────────────────────
+ * ★★계약 — 이 세 줄이 이 파일의 전부다.
+ * ──────────────────────────────────────────────────────────────────────────
+ *   ⑴ **선택적 로드다.** 로드하지 않은 소비자는 `components` 의 중립 기본값을 그대로 받는다.
+ *      `@iyulab/enterprise` 는 공개 패키지이므로 외부 소비자도 이 값을 받게 되지만,
+ *      **로드하지 않을 자유가 소비자에게 있다.**
+ *   ⑵ **`--u-*` 값만 덮는다.** 새 클래스·새 선택자를 만들지 않는다. 만들기 시작하면
+ *      소비자가 그 선택자와 특이도 싸움을 하게 되고, 그때부터 이 파일은 프리셋이 아니라
+ *      또 하나의 프레임워크가 된다. (`tests/preset-contract.test.ts` 가 지킨다.)
+ *   ⑶ 🔴**층은 «로드 순서»로 선다.** 세 층이 전부 `:root`(0,1,0)이므로 나중에 로드된
+ *      것이 이긴다 — 소비자가 이미 통제하는 축이다.
+ *
+ *        기본값(components/styles/light.css)  →  하우스(이 파일)  →  소비자 브랜드
+ *
+ *      ⚠**종전 판(0.7.0)은 이 자리를 `:where()` 로 감싸 특이도 0 으로 만들었고,
+ *        그래서 «한 줄도 적용되지 않았다».** 의도는 옳았다 — *"프리셋이 소비자 브랜드를
+ *        덮으면 안 된다"*. 그러나 특이도 0 은 **이겨야 할 상대(기본값)와 지지 말아야 할
+ *        상대(브랜드)를 구분하지 못한다.** 기본 시트가 같은 토큰을 `:root` 로 선언하므로
+ *        구조적으로 졌다. 실측: 이 파일의 40선언 중 **기본 시트에 없는 것이 0개** —
+ *        `:where()` 가 이길 수 있는 자리가 하나도 없었다.
+ *      ★그리고 **그 실패는 조용했다.** 오류도 경고도 없고, 소비자에게는
+ *        *"프리셋 값이 우리 값과 우연히 같았나 보다"* 로 보인다.
+ *
+ * ──────────────────────────────────────────────────────────────────────────
+ * 이 프리셋이 정하는 것 / 정하지 않는 것
+ * ──────────────────────────────────────────────────────────────────────────
+ *   정한다   타이포 스케일 값 · 형태(반경) · 엘리베이션 · 여백 리듬
+ *   안 정한다 **중립 램프의 색조(웜/쿨)** — 역할 토큰 다수가 중립에서 파생되므로 램프를
+ *            옮기면 대비가 함께 움직인다. 전수 대비 검증을 붙이기 전에는 손대지 않는다.
+ *            (LOB 화면에서 "낡아 보임"의 지분은 타이포·여백·형태가 훨씬 크다.)
+ *   안 정한다 **브랜드 색** — 그것은 소비앱의 몫이다. 프리셋은 브랜드를 갖지 않는다.
+ * ========================================================================== */
+
+:root {
+  /* ==========================================================================
+     타이포 — LOB 밀도
+     ★업무 화면은 한 화면에 담기는 정보량이 곧 생산성이다. 중립 기본값보다 한 단씩
+     조밀하게 잡되, **행간은 줄이지 않는다**(한글에서 행간을 줄이면 바로 읽기 어려워진다).
+     자간은 큰 제목만 음수이고 나머지는 0 — 한글에 양수 자간을 주지 않는다.
+     ========================================================================== */
+  --u-text-display-size:      24px;
+  --u-text-display-weight:    700;
+  --u-text-display-leading:   1.4;
+  --u-text-display-tracking:  -0.02em;
+
+  --u-text-title-size:        18px;
+  --u-text-title-weight:      700;
+  --u-text-title-leading:     1.45;
+  --u-text-title-tracking:    -0.01em;
+
+  --u-text-subtitle-size:     15px;
+  --u-text-subtitle-weight:   600;
+  --u-text-subtitle-leading:  1.5;
+  --u-text-subtitle-tracking: 0;
+
+  --u-text-body-size:         14px;
+  --u-text-body-weight:       400;
+  --u-text-body-leading:      1.6;
+  --u-text-body-tracking:     0;
+
+  /* ★라벨 단이 이 프리셋에서 가장 많이 쓰인다 — 폼 라벨·표 머리행·섹션 제목이 전부
+     이 단이다. 한글에 대문자가 없으므로 위계는 **크기·굵기·색** 세 신호로만 만든다. */
+  --u-text-label-size:        13px;
+  --u-text-label-weight:      600;
+  --u-text-label-leading:     1.5;
+  --u-text-label-tracking:    0;
+
+  --u-text-caption-size:      12px;
+  --u-text-caption-weight:    400;
+  --u-text-caption-leading:   1.5;
+  --u-text-caption-tracking:  0;
+
+  /* ⚠양수 자간은 이 단 하나뿐이고, 이 단은 **영문·숫자 라벨**을 전제한다.
+     한글을 넣을 소비자는 `--u-text-overline-tracking: 0` 으로 덮는다. */
+  --u-text-overline-size:     11px;
+  --u-text-overline-weight:   700;
+  --u-text-overline-leading:  1.45;
+  --u-text-overline-tracking: 0.06em;
+
+  /* ==========================================================================
+     형태 — 반경
+     ★컨트롤 단(sm~xl)을 한 단씩 올린다. 중립 기본값(3/4/6/8)은 어떤 값을 골라도
+     각진 인상이 되는데, 각짐은 "낡아 보임"에 대한 기여가 큰 축이다.
+     면(surface) 단(2xl·3xl)은 중립 기본값과 같다 — 이미 적절하다.
+     ========================================================================== */
+  --u-radius-sm:  4px;
+  --u-radius-md:  6px;
+  --u-radius-lg:  8px;
+  --u-radius-xl: 10px;
+
+  /* ==========================================================================
+     엘리베이션 — 청흑 틴트
+     ★순수 검정 그림자는 경계에 회색이 낀 것처럼 보인다. 배경의 색조를 살짝 섞은
+     어두운 값(`20,20,25`)을 쓰면 같은 세기라도 깨끗하게 떨어진다.
+     2겹 구조(지배 + 접촉)는 `components` 가 이미 정했고, 여기서는 **색만** 바꾼다.
+     ⚠첫 레이어가 지배 레이어라는 배치 규약을 유지한다(`components` 의 elevation 계약).
+     ========================================================================== */
+  --u-shadow-color-weaker:   rgba(20, 20, 25, 0.04);
+  --u-shadow-color-weak:     rgba(20, 20, 25, 0.08);
+  --u-shadow-color-normal:   rgba(20, 20, 25, 0.10);
+  --u-shadow-color-strong:   rgba(20, 20, 25, 0.14);
+  --u-shadow-color-stronger: rgba(20, 20, 25, 0.20);
+
+  --u-shadow-sm: 0 1px 3px rgba(20, 20, 25, 0.08), 0 1px 1px rgba(20, 20, 25, 0.04);
+  --u-shadow-md: 0 2px 8px rgba(20, 20, 25, 0.10), 0 1px 2px rgba(20, 20, 25, 0.04);
+  --u-shadow-lg: 0 6px 16px rgba(20, 20, 25, 0.14), 0 2px 4px rgba(20, 20, 25, 0.05);
+  --u-shadow-xl: 0 12px 28px rgba(20, 20, 25, 0.20), 0 2px 6px rgba(20, 20, 25, 0.06);
+}
+
+/*
+ * 다크 — 그림자는 **밝기 차**가 주역이다.
+ * ★어두운 배경 위의 검은 그림자는 보이지 않는다. 알파를 라이트보다 크게 잡되,
+ *   깊이의 대부분은 표면 밝기 차(`--u-bg-color-raised` 등, `components` 소유)가 낸다.
+ */
+:root[theme='dark'] {
+  --u-shadow-color-weaker:   rgba(0, 0, 0, 0.20);
+  --u-shadow-color-weak:     rgba(0, 0, 0, 0.28);
+  --u-shadow-color-normal:   rgba(0, 0, 0, 0.36);
+  --u-shadow-color-strong:   rgba(0, 0, 0, 0.46);
+  --u-shadow-color-stronger: rgba(0, 0, 0, 0.60);
+
+  --u-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28), 0 1px 1px rgba(0, 0, 0, 0.16);
+  --u-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.18);
+  --u-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.46), 0 2px 4px rgba(0, 0, 0, 0.22);
+  --u-shadow-xl: 0 12px 28px rgba(0, 0, 0, 0.60), 0 2px 6px rgba(0, 0, 0, 0.30);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/enterprise",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Enterprise utilities and components for iyulab framework",
   "keywords": [
     "enterprise",
@@ -25,10 +25,11 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./styles/preset.css": "./dist/styles/preset.css"
   },
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && node scripts/copy-styles.mjs",
     "test": "vitest run"
   },
   "dependencies": {
@@ -43,6 +44,12 @@
     "vitest": "^4.1.10"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "@iyulab/components": ">=1.21.0"
+  },
+  "peerDependenciesMeta": {
+    "@iyulab/components": {
+      "optional": true
+    }
   }
 }