kwon-ui 0.0.0-stage → 0.2.0

package/dist/react/layout.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { titleText } from "./tone.js";
+import { cx } from "./util.js";
+/** 하위 페이지의 맨 바깥. 검은 바탕과 떠 있는 메뉴 자리(위 여백)를 준다. */
+export function Page({ as, className, ...rest }) {
+    const Tag = as ?? "div";
+    return _jsx(Tag, { className: cx("night n-page", className), ...rest });
+}
+/** 페이지 머리: 제목 한 줄, 받쳐 주는 문단 하나, 버튼 줄. */
+export function PageHead({ title, label, lead, actions, className, children, }) {
+    return (_jsxs("header", { className: cx("n-wrap n-page-head", className), children: [_jsxs("div", { className: "n-head", children: [_jsx("h1", { className: "n-title", children: titleText(title, label) }), lead ? _jsx("p", { className: "n-body", children: lead }) : null] }), actions ? _jsx("div", { className: "n-actions", children: actions }) : null, children] }));
+}
+/**
+ * 구간. 안쪽은 내용 폭(1064px)으로 감싼다. bare 를 주면 감싸지 않는다(화면 끝까지 쓰는 내용).
+ * rule 은 앞 구간과의 사이에 가는 선을 긋고, slim 은 문장 하나와 버튼 하나뿐인 짧은 구간의 여백을 준다.
+ */
+export function Section({ as, bare, rule, slim, className, children, ...rest }) {
+    const Tag = as ?? "section";
+    return (_jsx(Tag, { className: cx("n-sect", slim && "slim", rule && "ruled", className), ...rest, children: bare ? children : _jsx("div", { className: "n-wrap", children: children }) }));
+}
+/** 구간 머리: 왼쪽에 한 줄 제목, 오른쪽에 본문(children). 본문이 없으면 제목이 한 줄 전체를 쓴다. */
+export function SectionHead({ title, label, rule, as, className, children, }) {
+    const H = as ?? "h2";
+    return (_jsxs("div", { className: cx("n-head", rule && "ruled", className), children: [_jsx(H, { className: "n-title", children: titleText(title, label) }), children ? _jsx("div", { children: typeof children === "string" ? _jsx("p", { className: "n-body", children: children }) : children }) : null] }));
+}
+/** 줄 목록의 바깥. 순서가 있으면 as="ol". */
+export function Rows({ as, className, ...rest }) {
+    const Tag = as ?? "div";
+    return _jsx(Tag, { className: cx("n-rows", className), ...rest });
+}
+/** 한 줄: 왼쪽 작은 라벨, 오른쪽 본문. 글만 넘기면 본문 문단으로 그린다. */
+export function Row({ as, label, labelAs, wide, className, children, ...rest }) {
+    const Tag = as ?? "div";
+    const L = labelAs ?? "h3";
+    return (_jsxs(Tag, { className: cx("n-row", wide && "wide-label", className), ...rest, children: [_jsx(L, { className: "n-row-label", children: label }), typeof children === "string" ? _jsx("p", { className: "n-body", children: children }) : children] }));
+}
+/** 검은 판. 화면 양옆에서 한 칸 들어온 둥근 면으로 구간 하나를 감싼다. */
+export function Panel({ as, className, children, ...rest }) {
+    const Tag = as ?? "section";
+    return (_jsx(Tag, { className: cx("n-panel", className), ...rest, children: _jsx("div", { className: "n-wrap", children: children }) }));
+}
+/** 그림과 영상의 틀. 기본 4:3, wide 는 16:9. 안의 img, video 는 틀을 채운다. */
+export function Media({ as, wide, className, ...rest }) {
+    const Tag = as ?? "div";
+    return _jsx(Tag, { className: cx("n-media", wide && "wide", className), ...rest });
+}
+/**
+ * 사진 판. 어둡게 누른 사진 위 왼쪽 아래에 제목과 문단을 둔다. media 에 img 나 video(프레임워크의 이미지 컴포넌트)를 넘긴다.
+ * 한 페이지에 하나, 밝은 곳이 필요한 자리에 쓴다.
+ */
+export function PhotoPanel({ as, media, className, children, ...rest }) {
+    const Tag = as ?? "div";
+    return (_jsxs(Tag, { className: cx("n-photo", className), ...rest, children: [media, _jsx("div", { className: "n-photo-in", children: children })] }));
+}
+/** 문의 띠: 왼쪽 한 줄 문장(과 짧은 문단), 오른쪽 버튼 줄. 페이지 끝에 하나 둔다. */
+export function CtaBand({ title, label, body, actions, className, }) {
+    const heading = _jsx("h2", { className: "n-title", children: titleText(title, label) });
+    return (_jsxs("div", { className: cx("n-cta-band", className), children: [body ? (_jsxs("div", { children: [heading, _jsx("p", { className: "n-body", children: body })] })) : (heading), _jsx("div", { className: "n-actions", children: actions })] }));
+}

package/dist/react/tone.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+/**
+ * 한 줄 두 톤 제목. 글은 "**진한 낱말** 나머지" 꼴로 쓴다.
+ * ** 로 감싼 곳만 진한 글자(제목 기본색)이고, 나머지는 같은 줄의 회색(.lo-inline)이다.
+ * 진한 글자는 문장의 핵심 낱말 한두 개에만 준다. 숫자는 숫자가 요점일 때만 진하게 둔다.
+ * label 을 주면 화면 낭독기만 읽는 구간 이름을 앞에 붙인다(보이는 문장에 구간 이름이 없을 때).
+ */
+export declare function tone(line: string, label?: string): ReactNode;
+/**
+ * 본문 안의 진한 낱말. 글은 "**진한 낱말** 나머지" 꼴로 쓴다.
+ * ** 로 감싼 곳만 진한 글자(.hi)이고, 나머지는 본문 기본색 그대로다. n-body 나 n-small 안에서 쓴다.
+ */
+export declare function hi(line: string): ReactNode;
+/**
+ * 제목 글. ** 표시가 있으면 두 톤으로, 없으면 전부 진한 글자로 그린다.
+ * (tone 은 표시가 없는 글을 전부 회색으로 그리므로, 표시 없는 제목은 이 함수를 거친다.)
+ */
+export declare function titleText(line: string, label?: string): ReactNode;

package/dist/react/tone.js

@@ -0,0 +1,29 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from "react";
+/**
+ * 한 줄 두 톤 제목. 글은 "**진한 낱말** 나머지" 꼴로 쓴다.
+ * ** 로 감싼 곳만 진한 글자(제목 기본색)이고, 나머지는 같은 줄의 회색(.lo-inline)이다.
+ * 진한 글자는 문장의 핵심 낱말 한두 개에만 준다. 숫자는 숫자가 요점일 때만 진하게 둔다.
+ * label 을 주면 화면 낭독기만 읽는 구간 이름을 앞에 붙인다(보이는 문장에 구간 이름이 없을 때).
+ */
+export function tone(line, label) {
+    const parts = line.split(/(\*\*[^*]+\*\*)/).filter(Boolean);
+    return (_jsxs(_Fragment, { children: [label ? _jsxs("span", { className: "n-sr", children: [label, ". "] }) : null, parts.map((p, i) => p.startsWith("**") && p.endsWith("**") ? (_jsx(Fragment, { children: p.slice(2, -2) }, i)) : (_jsx("span", { className: "lo-inline", children: p }, i)))] }));
+}
+/**
+ * 본문 안의 진한 낱말. 글은 "**진한 낱말** 나머지" 꼴로 쓴다.
+ * ** 로 감싼 곳만 진한 글자(.hi)이고, 나머지는 본문 기본색 그대로다. n-body 나 n-small 안에서 쓴다.
+ */
+export function hi(line) {
+    const parts = line.split(/(\*\*[^*]+\*\*)/).filter(Boolean);
+    return (_jsx(_Fragment, { children: parts.map((p, i) => p.startsWith("**") && p.endsWith("**") ? (_jsx("span", { className: "hi", children: p.slice(2, -2) }, i)) : (_jsx(Fragment, { children: p }, i))) }));
+}
+/**
+ * 제목 글. ** 표시가 있으면 두 톤으로, 없으면 전부 진한 글자로 그린다.
+ * (tone 은 표시가 없는 글을 전부 회색으로 그리므로, 표시 없는 제목은 이 함수를 거친다.)
+ */
+export function titleText(line, label) {
+    if (line.includes("**"))
+        return tone(line, label);
+    return (_jsxs(_Fragment, { children: [label ? _jsxs("span", { className: "n-sr", children: [label, ". "] }) : null, line] }));
+}

package/dist/react/type.d.ts

@@ -0,0 +1,29 @@
+import type { ElementType, ReactNode } from "react";
+import { type PolyProps } from "./util.js";
+type LineProps = {
+    /** "**진한 낱말** 나머지" 꼴의 한 줄. children 대신 쓴다 */
+    line?: string;
+    /** 화면 낭독기만 읽는 구간 이름 */
+    label?: string;
+    className?: string;
+    children?: ReactNode;
+};
+/** 첫 화면 제목. 한 페이지에 한 번만 쓴다. */
+export declare function Display<T extends ElementType = "h1">({ as, line, label, className, children, ...rest }: PolyProps<T, LineProps>): import("react").JSX.Element;
+/** 구간 제목. 한 문장 한 줄로 쓰고 진한 글자는 핵심 낱말 한두 개에만 준다. */
+export declare function Title<T extends ElementType = "h2">({ as, line, label, className, children, ...rest }: PolyProps<T, LineProps>): import("react").JSX.Element;
+type TextProps = {
+    className?: string;
+    children?: ReactNode;
+};
+/** 본문. line 을 주면 "**진한 낱말** 나머지" 꼴에서 ** 로 감싼 곳만 진하게 그린다. */
+export declare function Body<T extends ElementType = "p">({ as, line, className, children, ...rest }: PolyProps<T, TextProps & {
+    line?: string;
+}>): import("react").JSX.Element;
+/** 목록이나 카드 안의 작은 제목. 본문과 같은 크기이고 진한 글자다. */
+export declare function CardTitle<T extends ElementType = "h3">({ as, className, ...rest }: PolyProps<T, TextProps>): import("react").JSX.Element;
+/** 작은 글: 캡션, 기준, 라벨. num 을 주면 숫자 폭을 맞춘다. */
+export declare function Small<T extends ElementType = "p">({ as, num, className, ...rest }: PolyProps<T, TextProps & {
+    num?: boolean;
+}>): import("react").JSX.Element;
+export {};

package/dist/react/type.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { hi, titleText } from "./tone.js";
+import { cx } from "./util.js";
+/** 첫 화면 제목. 한 페이지에 한 번만 쓴다. */
+export function Display({ as, line, label, className, children, ...rest }) {
+    const Tag = as ?? "h1";
+    return (_jsx(Tag, { className: cx("n-display", className), ...rest, children: children ?? (line ? titleText(line, label) : null) }));
+}
+/** 구간 제목. 한 문장 한 줄로 쓰고 진한 글자는 핵심 낱말 한두 개에만 준다. */
+export function Title({ as, line, label, className, children, ...rest }) {
+    const Tag = as ?? "h2";
+    return (_jsx(Tag, { className: cx("n-title", className), ...rest, children: children ?? (line ? titleText(line, label) : null) }));
+}
+/** 본문. line 을 주면 "**진한 낱말** 나머지" 꼴에서 ** 로 감싼 곳만 진하게 그린다. */
+export function Body({ as, line, className, children, ...rest }) {
+    const Tag = as ?? "p";
+    return (_jsx(Tag, { className: cx("n-body", className), ...rest, children: children ?? (line ? hi(line) : null) }));
+}
+/** 목록이나 카드 안의 작은 제목. 본문과 같은 크기이고 진한 글자다. */
+export function CardTitle({ as, className, ...rest }) {
+    const Tag = as ?? "h3";
+    return _jsx(Tag, { className: cx("n-card-title", className), ...rest });
+}
+/** 작은 글: 캡션, 기준, 라벨. num 을 주면 숫자 폭을 맞춘다. */
+export function Small({ as, num, className, ...rest }) {
+    const Tag = as ?? "p";
+    return _jsx(Tag, { className: cx("n-small", num && "n-num", className), ...rest });
+}

package/dist/react/util.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef, ElementType } from "react";
+/** 클래스 이름을 이어 붙인다. 거짓 값은 뺀다. */
+export declare function cx(...parts: Array<string | false | null | undefined>): string;
+/**
+ * as 로 태그나 컴포넌트를 바꿀 수 있는 조각의 속성.
+ * 예: <Pill as={Link} href="/contact"> 처럼 프레임워크의 링크 컴포넌트를 넘긴다.
+ */
+export type PolyProps<T extends ElementType, Own = object> = Own & {
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, keyof Own | "as">;

package/dist/react/util.js

@@ -0,0 +1,4 @@
+/** 클래스 이름을 이어 붙인다. 거짓 값은 뺀다. */
+export function cx(...parts) {
+    return parts.filter(Boolean).join(" ");
+}

package/package.json

@@ -1,6 +1,64 @@
 {
   "name": "kwon-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "권앤컴퍼니의 세 제품(홈페이지, 스킬캠퍼스, Projects)이 같이 쓰는 디자인 시스템: 토큰, 글자, 뼈대, 컴포넌트, 검사기",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kihyeonkwon/kwon-ui.git"
+  },
+  "homepage": "https://github.com/kihyeonkwon/kwon-ui#readme",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react/index.js"
+    },
+    "./kwon-ui.css": "./dist/kwon-ui.css",
+    "./classes.json": "./dist/classes.json",
+    "./check": "./check/index.mjs",
+    "./CATALOG.md": "./CATALOG.md",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "kwon-ui": "bin/kwon-ui.mjs"
+  },
+  "files": [
+    "dist",
+    "!dist/catalog",
+    "check",
+    "bin",
+    "claude",
+    "CATALOG.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "test": "node --test test/*.test.mjs",
+    "verify": "npm run build && npm test",
+    "prepublishOnly": "npm run verify"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "postcss": "^8.4.47"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "pretendard": "^1.3.9",
+    "react": "^19",
+    "react-dom": "^19",
+    "typescript": "^5"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}