shindonghyeo-ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Donghyeok Shin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,126 @@
-# Temporary Holding Version
+# shindonghyeo-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+신동혁의 개인 React 디자인 시스템입니다. [개발 블로그](https://shindonghyeo.github.io)의 디자인을 다른 React 사이트에서도 쓸 수 있게 토큰과 컴포넌트로 정리했습니다.
+
+- **디자인 토큰:** 색, 글꼴, 모서리 둥글기, 레이아웃 폭을 CSS 변수(`--sd-*`)로 정의하고, 라이트/다크 모드를 지원합니다.
+- **React 컴포넌트:** CSS Modules로 스타일을 입혀서 런타임 비용이 없고, Next.js·Astro·Vite 어디서나 동작합니다.
+- **서버 렌더링 대응:** 상호작용이 필요한 컴포넌트(`ThemeToggle`, `Toc`, `ReadingProgress`)에만 `'use client'`가 붙어 있습니다.
+
+## 설치
+
+```bash
+npm install shindonghyeo-ui
+```
+
+## 사용법
+
+스타일 파일은 앱 진입점에서 **한 번만** 불러옵니다.
+
+```tsx
+import 'shindonghyeo-ui/styles.css';
+import { Banner, Button, GradientText } from 'shindonghyeo-ui';
+
+export function Hero() {
+	return (
+		<Banner eyebrow="Dev Log" title={<>안녕하세요, <GradientText>신동혁</GradientText>입니다.</>}>
+			<Button variant="primary" href="/blog">글 둘러보기 →</Button>
+		</Banner>
+	);
+}
+```
+
+글꼴은 [Pretendard](https://github.com/orioncactus/pretendard)를 쓰도록 지정되어 있습니다. 사이트의 `<head>`에 Pretendard를 불러와 주세요.
+
+```html
+<link
+	rel="stylesheet"
+	href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
+/>
+```
+
+### 다크 모드
+
+테마는 `<html data-theme="light|dark">`로 바뀝니다. 첫 화면에서 깜빡이지 않도록 `<head>`에 `themeInitScript`를 인라인으로 넣어 주세요.
+
+```tsx
+import { themeInitScript } from 'shindonghyeo-ui';
+
+<head>
+	<script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
+</head>
+```
+
+### Astro에서 쓰기
+
+`@astrojs/react`를 추가하면 `.astro` 파일에서 바로 쓸 수 있습니다. 기본적으로 HTML로만 렌더링되고, 클릭이나 스크롤에 반응해야 하는 컴포넌트에만 `client:*` 지시문을 붙이면 됩니다.
+
+```astro
+---
+import { Banner, ThemeToggle, Toc } from 'shindonghyeo-ui';
+---
+<Banner title="모든 글" />
+<ThemeToggle client:load />
+<Toc items={items} client:idle />
+```
+
+### Next.js에서 쓰기
+
+링크를 그리는 컴포넌트(`Navbar`, `PostList`, `Footer`)는 `linkAs`로 `next/link`의 `Link`를 받을 수 있습니다.
+
+```tsx
+import Link from 'next/link';
+
+<PostList items={posts} linkAs={Link} />
+```
+
+## 컴포넌트
+
+| 컴포넌트 | 설명 |
+| --- | --- |
+| `Container` | 본문 폭(680px) 또는 넓은 폭(`wide`, 980px)으로 내용을 가운데 정렬 |
+| `Navbar` | 화면 위에 붙어 있는 반투명 메뉴바. 현재 메뉴는 알약 모양으로 강조 |
+| `Banner` | 그라데이션과 점 패턴 배경의 페이지 상단 배너 |
+| `Logo` | 그라데이션 정사각형 로고 마크 |
+| `Button` | `primary`(그라데이션) / `secondary` 버튼. `href`가 있으면 링크로 렌더링 |
+| `IconButton` | 아이콘만 있는 버튼 |
+| `Chip` | 날짜, 읽는 시간 같은 작은 정보 표시 |
+| `GradientText` | 그라데이션 글자 |
+| `SectionTitle` | 왼쪽에 그라데이션 막대가 붙은 섹션 제목 |
+| `PostList` | 마우스를 올리면 카드처럼 떠오르는 글 목록 |
+| `Prose` | 마크다운에서 나온 HTML(제목, 목록, 표, 인용문, 코드)을 꾸미는 본문 영역 |
+| `Toc` | 현재 읽는 제목을 강조하는 목차 (`sidebar` / `inline`) |
+| `ReadingProgress` | 스크롤한 만큼 차오르는 진행 바 |
+| `ThemeToggle` | 라이트/다크 모드 전환 버튼 |
+| `Footer` | 브랜드, 링크, 저작권, "맨 위로"가 있는 푸터 |
+
+아이콘(`SunIcon`, `MoonIcon`, `GitHubIcon`, `CalendarIcon`, `ClockIcon`)도 함께 내보냅니다.
+
+## 테마 바꾸기
+
+포인트 색은 두 값만 덮어쓰면 그라데이션, 강조색, 옅은 배경색까지 모두 따라 바뀝니다.
+
+```css
+:root {
+	--sd-accent: #7c3aed;
+	--sd-accent-2: #db2777;
+}
+:root[data-theme='dark'] {
+	--sd-accent: #a78bfa;
+	--sd-accent-2: #f472b6;
+}
+```
+
+전체 토큰 목록은 [`src/styles/tokens.css`](src/styles/tokens.css)에 있습니다.
+
+## 개발
+
+```bash
+npm install
+npm run dev        # 플레이그라운드(playground/)에서 컴포넌트 확인
+npm run typecheck
+npm run build      # dist/에 JS, 타입, styles.css 생성
+```
+
+## 라이선스
+
+MIT

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface BannerProps {
+    /** 제목 위의 작은 강조 문구. 문자열이나 링크 등 아무 요소나 넣을 수 있다 */
+    eyebrow?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** 넓은 레이아웃(목차가 있는 글 페이지 등)과 왼쪽 정렬을 맞춘다 */
+    wide?: boolean;
+    size?: 'md' | 'lg';
+    className?: string;
+    /** 제목 아래에 들어갈 내용 (버튼, 메타 정보 등) */
+    children?: ReactNode;
+}
+/** 그라데이션과 점 패턴 배경이 깔린 페이지 상단 배너 */
+export declare function Banner({ eyebrow, title, description, wide, size, className, children }: BannerProps): import('react').JSX.Element;

package/dist/components/Banner/Banner.js

@@ -0,0 +1,32 @@
+import { cx as e } from "../../utils/cx.js";
+import { Container as t } from "../Container/Container.js";
+import n from "./Banner.module.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+// src/components/Banner/Banner.tsx
+function a({ eyebrow: a, title: o, description: s, wide: c = !1, size: l = "md", className: u, children: d }) {
+	return /* @__PURE__ */ r("section", {
+		className: e(n.banner, u),
+		children: /* @__PURE__ */ r(t, {
+			wide: c,
+			children: /* @__PURE__ */ i("div", {
+				className: e(n.inner, n[l]),
+				children: [
+					a && /* @__PURE__ */ r("p", {
+						className: n.eyebrow,
+						children: a
+					}),
+					o && /* @__PURE__ */ r("h1", {
+						className: n.title,
+						children: o
+					}),
+					s && /* @__PURE__ */ r("p", {
+						className: n.description,
+						children: s
+					}),
+					d
+				]
+			})
+		})
+	});
+}
+export { a as Banner };

package/dist/components/Banner/Banner.module.js

@@ -0,0 +1,10 @@
+// src/components/Banner/Banner.module.css
+var e = "sd-banner-oyoWE", t = "sd-inner-G1vOq", n = "sd-lg-j2ruH", r = "sd-eyebrow-Rf8QJ", i = "sd-title-AeTHT", a = "sd-description-nbyf-", o = {
+	banner: e,
+	inner: t,
+	lg: n,
+	eyebrow: r,
+	title: i,
+	description: a
+};
+export { e as banner, o as default, a as description, r as eyebrow, t as inner, n as lg, i as title };

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,14 @@
+import { ComponentPropsWithoutRef } from 'react';
+type ButtonBaseProps = {
+    variant?: 'primary' | 'secondary';
+};
+type ButtonAsLink = ButtonBaseProps & ComponentPropsWithoutRef<'a'> & {
+    href: string;
+};
+type ButtonAsButton = ButtonBaseProps & ComponentPropsWithoutRef<'button'> & {
+    href?: undefined;
+};
+/** href가 있으면 <a>, 없으면 <button>으로 렌더링한다 */
+export type ButtonProps = ButtonAsLink | ButtonAsButton;
+export declare function Button({ variant, className, ...props }: ButtonProps): import('react').JSX.Element;
+export {};

package/dist/components/Button/Button.js

@@ -0,0 +1,16 @@
+import { cx as e } from "../../utils/cx.js";
+import t from "./Button.module.js";
+import { jsx as n } from "react/jsx-runtime";
+// src/components/Button/Button.tsx
+function r({ variant: r = "secondary", className: i, ...a }) {
+	let o = e(t.button, t[r], i);
+	return a.href === void 0 ? /* @__PURE__ */ n("button", {
+		type: "button",
+		className: o,
+		...a
+	}) : /* @__PURE__ */ n("a", {
+		className: o,
+		...a
+	});
+}
+export { r as Button };

package/dist/components/Button/Button.module.js

@@ -0,0 +1,6 @@
+// src/components/Button/Button.module.css
+var e = "sd-button-2ZuB7", t = "sd-primary-s1sM6", n = {
+	button: e,
+	primary: t
+};
+export { e as button, n as default, t as primary };

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface ChipProps extends ComponentPropsWithoutRef<'span'> {
+    icon?: ReactNode;
+    variant?: 'outline' | 'accent';
+}
+export declare function Chip({ icon, variant, className, children, ...props }: ChipProps): import('react').JSX.Element;

package/dist/components/Chip/Chip.js

@@ -0,0 +1,12 @@
+import { cx as e } from "../../utils/cx.js";
+import t from "./Chip.module.js";
+import { jsxs as n } from "react/jsx-runtime";
+// src/components/Chip/Chip.tsx
+function r({ icon: r, variant: i = "outline", className: a, children: o, ...s }) {
+	return /* @__PURE__ */ n("span", {
+		className: e(t.chip, t[i], a),
+		...s,
+		children: [r, o]
+	});
+}
+export { r as Chip };

package/dist/components/Chip/Chip.module.js

@@ -0,0 +1,7 @@
+// src/components/Chip/Chip.module.css
+var e = "sd-chip-0nys-", t = "sd-outline-s240C", n = "sd-accent-wWCCB", r = {
+	chip: e,
+	outline: t,
+	accent: n
+};
+export { n as accent, e as chip, r as default, t as outline };

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef } from 'react';
+export interface ContainerProps extends ComponentPropsWithoutRef<'div'> {
+    /** 1024px 이상에서 넓은 폭(--sd-wide-width)을 쓴다 */
+    wide?: boolean;
+}
+export declare function Container({ wide, className, ...props }: ContainerProps): import('react').JSX.Element;

package/dist/components/Container/Container.js

@@ -0,0 +1,11 @@
+import { cx as e } from "../../utils/cx.js";
+import t from "./Container.module.js";
+import { jsx as n } from "react/jsx-runtime";
+// src/components/Container/Container.tsx
+function r({ wide: r = !1, className: i, ...a }) {
+	return /* @__PURE__ */ n("div", {
+		className: e(t.container, r && t.wide, i),
+		...a
+	});
+}
+export { r as Container };

package/dist/components/Container/Container.module.js

@@ -0,0 +1,6 @@
+// src/components/Container/Container.module.css
+var e = "sd-container-JMoiT", t = "sd-wide-LxoRm", n = {
+	container: e,
+	wide: t
+};
+export { e as container, n as default, t as wide };

package/dist/components/Footer/Footer.d.ts

@@ -0,0 +1,17 @@
+import { ElementType, ReactNode } from 'react';
+export interface FooterLink {
+    href: string;
+    label: ReactNode;
+    external?: boolean;
+}
+export interface FooterProps {
+    brand?: ReactNode;
+    description?: ReactNode;
+    links?: FooterLink[];
+    copyright?: ReactNode;
+    /** "맨 위로" 링크를 보여 줄지 여부 */
+    backToTop?: boolean;
+    linkAs?: ElementType;
+    className?: string;
+}
+export declare function Footer({ brand, description, links, copyright, backToTop, linkAs: Link, className, }: FooterProps): import('react').JSX.Element;

package/dist/components/Footer/Footer.js

@@ -0,0 +1,41 @@
+import { cx as e } from "../../utils/cx.js";
+import { Container as t } from "../Container/Container.js";
+import n from "./Footer.module.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+// src/components/Footer/Footer.tsx
+function a({ brand: a, description: o, links: s = [], copyright: c, backToTop: l = !0, linkAs: u = "a", className: d }) {
+	return /* @__PURE__ */ r("footer", {
+		className: e(n.footer, d),
+		children: /* @__PURE__ */ i(t, {
+			wide: !0,
+			children: [(a || o || s.length > 0) && /* @__PURE__ */ i("div", {
+				className: n.top,
+				children: [/* @__PURE__ */ i("div", { children: [a && /* @__PURE__ */ r("div", {
+					className: n.brand,
+					children: a
+				}), o && /* @__PURE__ */ r("p", {
+					className: n.description,
+					children: o
+				})] }), s.length > 0 && /* @__PURE__ */ r("nav", {
+					className: n.links,
+					children: s.map((e) => e.external ? /* @__PURE__ */ r("a", {
+						href: e.href,
+						target: "_blank",
+						rel: "noopener",
+						children: e.label
+					}, e.href) : /* @__PURE__ */ r(u, {
+						href: e.href,
+						children: e.label
+					}, e.href))
+				})]
+			}), /* @__PURE__ */ i("div", {
+				className: n.bottom,
+				children: [/* @__PURE__ */ r("span", { children: c }), l && /* @__PURE__ */ r("a", {
+					href: "#",
+					children: "맨 위로 ↑"
+				})]
+			})]
+		})
+	});
+}
+export { a as Footer };

package/dist/components/Footer/Footer.module.js

@@ -0,0 +1,10 @@
+// src/components/Footer/Footer.module.css
+var e = "sd-footer-A76NF", t = "sd-top-oMBPr", n = "sd-brand-EmGiM", r = "sd-description-gSSA8", i = "sd-links-yNuwL", a = "sd-bottom-np3Xe", o = {
+	footer: e,
+	top: t,
+	brand: n,
+	description: r,
+	links: i,
+	bottom: a
+};
+export { a as bottom, n as brand, o as default, r as description, e as footer, i as links, t as top };

package/dist/components/GradientText/GradientText.d.ts

@@ -0,0 +1,2 @@
+import { ComponentPropsWithoutRef } from 'react';
+export declare function GradientText({ className, ...props }: ComponentPropsWithoutRef<'span'>): import('react').JSX.Element;

package/dist/components/GradientText/GradientText.js

@@ -0,0 +1,11 @@
+import { cx as e } from "../../utils/cx.js";
+import t from "./GradientText.module.js";
+import { jsx as n } from "react/jsx-runtime";
+// src/components/GradientText/GradientText.tsx
+function r({ className: r, ...i }) {
+	return /* @__PURE__ */ n("span", {
+		className: e(t.gradientText, r),
+		...i
+	});
+}
+export { r as GradientText };

package/dist/components/GradientText/GradientText.module.js

@@ -0,0 +1,3 @@
+// src/components/GradientText/GradientText.module.css
+var e = "sd-gradientText-CxkVn", t = { gradientText: e };
+export { t as default, e as gradientText };

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithoutRef } from 'react';
+type IconButtonAsLink = ComponentPropsWithoutRef<'a'> & {
+    href: string;
+    'aria-label': string;
+};
+type IconButtonAsButton = ComponentPropsWithoutRef<'button'> & {
+    href?: undefined;
+    'aria-label': string;
+};
+/** 아이콘만 있는 정사각형 버튼. 스크린 리더를 위해 aria-label이 필수다 */
+export type IconButtonProps = IconButtonAsLink | IconButtonAsButton;
+export declare function IconButton({ className, ...props }: IconButtonProps): import('react').JSX.Element;
+export {};

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,16 @@
+import { cx as e } from "../../utils/cx.js";
+import t from "./IconButton.module.js";
+import { jsx as n } from "react/jsx-runtime";
+// src/components/IconButton/IconButton.tsx
+function r({ className: r, ...i }) {
+	let a = e(t.iconButton, r);
+	return i.href === void 0 ? /* @__PURE__ */ n("button", {
+		type: "button",
+		className: a,
+		...i
+	}) : /* @__PURE__ */ n("a", {
+		className: a,
+		...i
+	});
+}
+export { r as IconButton };

package/dist/components/IconButton/IconButton.module.js

@@ -0,0 +1,3 @@
+// src/components/IconButton/IconButton.module.css
+var e = "sd-iconButton-JAF-a", t = { iconButton: e };
+export { t as default, e as iconButton };

package/dist/components/Logo/Logo.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface LogoProps {
+    size?: number;
+    /** 마크 안에 들어갈 글자 */
+    children?: ReactNode;
+    className?: string;
+}
+export declare function Logo({ size, children, className }: LogoProps): import('react').JSX.Element;

package/dist/components/Logo/Logo.js

@@ -0,0 +1,13 @@
+import { cx as e } from "../../utils/cx.js";
+import t from "./Logo.module.js";
+import { jsx as n } from "react/jsx-runtime";
+// src/components/Logo/Logo.tsx
+function r({ size: r = 30, children: i = "신", className: a }) {
+	return /* @__PURE__ */ n("span", {
+		className: e(t.logo, a),
+		style: { "--size": `${r}px` },
+		"aria-hidden": "true",
+		children: i
+	});
+}
+export { r as Logo };

package/dist/components/Logo/Logo.module.js

@@ -0,0 +1,3 @@
+// src/components/Logo/Logo.module.css
+var e = "sd-logo-p5tMH", t = { logo: e };
+export { t as default, e as logo };

package/dist/components/Navbar/Navbar.d.ts

@@ -0,0 +1,21 @@
+import { ElementType, ReactNode } from 'react';
+export interface NavItem {
+    href: string;
+    label: ReactNode;
+    active?: boolean;
+}
+export interface NavbarProps {
+    /** 왼쪽 브랜드 영역 (로고와 사이트 이름) */
+    brand: ReactNode;
+    brandHref?: string;
+    links?: NavItem[];
+    /** 오른쪽 끝 아이콘 버튼들 (GitHub, ThemeToggle 등) */
+    actions?: ReactNode;
+    /** 링크에 쓸 컴포넌트. Next.js라면 next/link의 Link를 넘긴다 */
+    linkAs?: ElementType;
+    className?: string;
+    /** 메뉴바 아래쪽에 붙일 요소 (예: <ReadingProgress />) */
+    children?: ReactNode;
+}
+/** 화면 위에 붙어 있는 반투명 메뉴바 */
+export declare function Navbar({ brand, brandHref, links, actions, linkAs: Link, className, children }: NavbarProps): import('react').JSX.Element;

package/dist/components/Navbar/Navbar.js

@@ -0,0 +1,36 @@
+import { cx as e } from "../../utils/cx.js";
+import { Container as t } from "../Container/Container.js";
+import n from "./Navbar.module.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+// src/components/Navbar/Navbar.tsx
+function o({ brand: o, brandHref: s = "/", links: c = [], actions: l, linkAs: u = "a", className: d, children: f }) {
+	return /* @__PURE__ */ a("header", {
+		className: e(n.header, d),
+		children: [/* @__PURE__ */ i(t, {
+			wide: !0,
+			children: /* @__PURE__ */ a("nav", {
+				className: n.nav,
+				children: [/* @__PURE__ */ i(u, {
+					className: n.brand,
+					href: s,
+					children: o
+				}), /* @__PURE__ */ a("div", {
+					className: n.right,
+					children: [c.map((t) => /* @__PURE__ */ i(u, {
+						href: t.href,
+						className: e(n.link, t.active && n.active),
+						"aria-current": t.active ? "page" : void 0,
+						children: t.label
+					}, t.href)), l && /* @__PURE__ */ a(r, { children: [c.length > 0 && /* @__PURE__ */ i("span", {
+						className: n.divider,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ i("div", {
+						className: n.actions,
+						children: l
+					})] })]
+				})]
+			})
+		}), f]
+	});
+}
+export { o as Navbar };

package/dist/components/Navbar/Navbar.module.js

@@ -0,0 +1,12 @@
+// src/components/Navbar/Navbar.module.css
+var e = "sd-header-aqSzZ", t = "sd-nav-0oisE", n = "sd-brand-P5uLt", r = "sd-right-64OWF", i = "sd-link-UwJZv", a = "sd-active-Rf9bv", o = "sd-divider-ZjuJB", s = "sd-actions-8BNWJ", c = {
+	header: e,
+	nav: t,
+	brand: n,
+	right: r,
+	link: i,
+	active: a,
+	divider: o,
+	actions: s
+};
+export { s as actions, a as active, n as brand, c as default, o as divider, e as header, i as link, t as nav, r as right };

package/dist/components/PostList/PostList.d.ts

@@ -0,0 +1,16 @@
+import { ElementType, ReactNode } from 'react';
+export interface PostListItem {
+    href: string;
+    title: ReactNode;
+    description?: ReactNode;
+    /** 날짜, 읽는 시간처럼 아래에 가운뎃점으로 이어 보여 줄 정보 */
+    meta?: ReactNode[];
+}
+export interface PostListProps {
+    items: PostListItem[];
+    /** 링크에 쓸 컴포넌트. Next.js라면 next/link의 Link를 넘긴다 */
+    linkAs?: ElementType;
+    className?: string;
+}
+/** 마우스를 올리면 카드처럼 떠오르는 글 목록 */
+export declare function PostList({ items, linkAs: Link, className }: PostListProps): import('react').JSX.Element;

package/dist/components/PostList/PostList.js

@@ -0,0 +1,35 @@
+import { cx as e } from "../../utils/cx.js";
+import t from "./PostList.module.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+// src/components/PostList/PostList.tsx
+function i({ items: i, linkAs: a = "a", className: o }) {
+	return /* @__PURE__ */ n("ul", {
+		className: e(t.list, o),
+		children: i.map((e) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ r(a, {
+			className: t.item,
+			href: e.href,
+			children: [/* @__PURE__ */ r("div", {
+				className: t.body,
+				children: [
+					/* @__PURE__ */ n("h3", {
+						className: t.title,
+						children: e.title
+					}),
+					e.description && /* @__PURE__ */ n("p", {
+						className: t.description,
+						children: e.description
+					}),
+					e.meta && e.meta.length > 0 && /* @__PURE__ */ n("div", {
+						className: t.meta,
+						children: e.meta.map((e, t) => /* @__PURE__ */ n("span", { children: e }, t))
+					})
+				]
+			}), /* @__PURE__ */ n("span", {
+				className: t.arrow,
+				"aria-hidden": "true",
+				children: "→"
+			})]
+		}) }, e.href))
+	});
+}
+export { i as PostList };

package/dist/components/PostList/PostList.module.js

@@ -0,0 +1,11 @@
+// src/components/PostList/PostList.module.css
+var e = "sd-list-6ceM4", t = "sd-item-OoBbo", n = "sd-body-WN59Q", r = "sd-title-wv5Et", i = "sd-description--Ndtf", a = "sd-meta-91tNg", o = "sd-arrow-cVFi9", s = {
+	list: e,
+	item: t,
+	body: n,
+	title: r,
+	description: i,
+	meta: a,
+	arrow: o
+};
+export { o as arrow, n as body, s as default, i as description, t as item, e as list, a as meta, r as title };

package/dist/components/Prose/Prose.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, ElementType } from 'react';
+export interface ProseProps extends ComponentPropsWithoutRef<'div'> {
+    as?: ElementType;
+}
+/** 마크다운에서 나온 HTML(제목, 목록, 표, 인용문, 코드)을 꾸며 주는 본문 영역 */
+export declare function Prose({ as: Tag, className, ...props }: ProseProps): import('react').JSX.Element;

package/dist/components/Prose/Prose.js

@@ -0,0 +1,11 @@
+import { cx as e } from "../../utils/cx.js";
+import t from "./Prose.module.js";
+import { jsx as n } from "react/jsx-runtime";
+// src/components/Prose/Prose.tsx
+function r({ as: r = "div", className: i, ...a }) {
+	return /* @__PURE__ */ n(r, {
+		className: e(t.prose, i),
+		...a
+	});
+}
+export { r as Prose };

package/dist/components/Prose/Prose.module.js

@@ -0,0 +1,3 @@
+// src/components/Prose/Prose.module.css
+var e = "sd-prose-Obc4t", t = { prose: e };
+export { t as default, e as prose };

package/dist/components/ReadingProgress/ReadingProgress.d.ts

@@ -0,0 +1,7 @@
+export interface ReadingProgressProps {
+    /** 'attached'는 Navbar 아래쪽에, 'fixed'는 화면 맨 위에 붙는다 */
+    position?: 'attached' | 'fixed';
+    className?: string;
+}
+/** 스크롤한 만큼 차오르는 읽기 진행 바 */
+export declare function ReadingProgress({ position, className }: ReadingProgressProps): import('react').JSX.Element;

package/dist/components/ReadingProgress/ReadingProgress.js

@@ -0,0 +1,28 @@
+"use client";
+import { cx as e } from "../../utils/cx.js";
+import t from "./ReadingProgress.module.js";
+import { jsx as n } from "react/jsx-runtime";
+import { useEffect as r, useRef as i } from "react";
+// src/components/ReadingProgress/ReadingProgress.tsx
+function a({ position: a = "attached", className: o }) {
+	let s = i(null);
+	return r(() => {
+		let e = 0;
+		function t() {
+			e = 0;
+			let t = document.documentElement, n = t.scrollHeight - t.clientHeight;
+			s.current?.style.setProperty("--progress", String(n > 0 ? t.scrollTop / n : 0));
+		}
+		function n() {
+			e ||= requestAnimationFrame(t);
+		}
+		return t(), addEventListener("scroll", n, { passive: !0 }), addEventListener("resize", n), () => {
+			removeEventListener("scroll", n), removeEventListener("resize", n), cancelAnimationFrame(e);
+		};
+	}, []), /* @__PURE__ */ n("div", {
+		ref: s,
+		className: e(t.progress, t[a], o),
+		"aria-hidden": "true"
+	});
+}
+export { a as ReadingProgress };

package/dist/components/ReadingProgress/ReadingProgress.module.js

@@ -0,0 +1,7 @@
+// src/components/ReadingProgress/ReadingProgress.module.css
+var e = "sd-progress-52KzL", t = "sd-attached-n7Ovo", n = "sd-fixed-GqraP", r = {
+	progress: e,
+	attached: t,
+	fixed: n
+};
+export { t as attached, r as default, n as fixed, e as progress };

package/dist/components/SectionTitle/SectionTitle.d.ts

@@ -0,0 +1,10 @@
+import { ElementType, ReactNode } from 'react';
+export interface SectionTitleProps {
+    as?: ElementType;
+    /** 제목 오른쪽 끝에 놓을 요소 (예: "전체 보기 →" 링크) */
+    action?: ReactNode;
+    className?: string;
+    children: ReactNode;
+}
+/** 왼쪽에 그라데이션 막대가 붙은 섹션 제목 */
+export declare function SectionTitle({ as: Heading, action, className, children }: SectionTitleProps): import('react').JSX.Element;

package/dist/components/SectionTitle/SectionTitle.js

@@ -0,0 +1,17 @@
+import { cx as e } from "../../utils/cx.js";
+import t from "./SectionTitle.module.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+// src/components/SectionTitle/SectionTitle.tsx
+function i({ as: i = "h2", action: a, className: o, children: s }) {
+	return /* @__PURE__ */ r("div", {
+		className: e(t.head, o),
+		children: [/* @__PURE__ */ n(i, {
+			className: t.title,
+			children: s
+		}), a && /* @__PURE__ */ n("div", {
+			className: t.action,
+			children: a
+		})]
+	});
+}
+export { i as SectionTitle };

package/dist/components/SectionTitle/SectionTitle.module.js

@@ -0,0 +1,7 @@
+// src/components/SectionTitle/SectionTitle.module.css
+var e = "sd-head-tgU0N", t = "sd-title-Uxtii", n = "sd-action-Vs6N5", r = {
+	head: e,
+	title: t,
+	action: n
+};
+export { n as action, r as default, e as head, t as title };

package/dist/components/ThemeToggle/ThemeToggle.d.ts

@@ -0,0 +1,9 @@
+export interface ThemeToggleProps {
+    className?: string;
+}
+/**
+ * 라이트/다크 모드 전환 버튼.
+ * 어떤 아이콘을 보일지는 CSS가 <html data-theme>을 보고 정하므로 첫 화면부터 맞는 아이콘이 나온다.
+ * 깜빡임을 막으려면 <head>에 themeInitScript도 함께 넣는다.
+ */
+export declare function ThemeToggle({ className }: ThemeToggleProps): import('react').JSX.Element;

package/dist/components/ThemeToggle/ThemeToggle.js

@@ -0,0 +1,24 @@
+"use client";
+import { cx as e } from "../../utils/cx.js";
+import { IconButton as t } from "../IconButton/IconButton.js";
+import { MoonIcon as n, SunIcon as r } from "../icons/icons.js";
+import { THEME_STORAGE_KEY as i } from "../../utils/theme.js";
+import a from "./ThemeToggle.module.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+// src/components/ThemeToggle/ThemeToggle.tsx
+function c({ className: c }) {
+	function l() {
+		let e = document.documentElement, t = e.dataset.theme === "dark" ? "light" : "dark";
+		e.dataset.theme = t;
+		try {
+			localStorage.setItem(i, t);
+		} catch {}
+	}
+	return /* @__PURE__ */ s(t, {
+		"aria-label": "다크 모드 전환",
+		onClick: l,
+		className: e(a.toggle, c),
+		children: [/* @__PURE__ */ o(r, { className: a.sun }), /* @__PURE__ */ o(n, { className: a.moon })]
+	});
+}
+export { c as ThemeToggle };

package/dist/components/ThemeToggle/ThemeToggle.module.js

@@ -0,0 +1,6 @@
+// src/components/ThemeToggle/ThemeToggle.module.css
+var e = "sd-sun-7vHKu", t = "sd-moon-sqz-D", n = {
+	sun: e,
+	moon: t
+};
+export { n as default, t as moon, e as sun };

package/dist/components/Toc/Toc.d.ts

@@ -0,0 +1,16 @@
+export interface TocItem {
+    /** 제목 요소의 id */
+    id: string;
+    text: string;
+    /** 2 = h2, 3 = h3 */
+    depth: number;
+}
+export interface TocProps {
+    items: TocItem[];
+    title?: string;
+    /** 'sidebar'는 옆에 따라다니는 목차, 'inline'은 본문 위에 접었다 펴는 목차 */
+    variant?: 'sidebar' | 'inline';
+    className?: string;
+}
+/** 지금 읽고 있는 제목을 강조해 주는 목차 */
+export declare function Toc({ items, title, variant, className }: TocProps): import('react').JSX.Element;

package/dist/components/Toc/Toc.js

@@ -0,0 +1,53 @@
+"use client";
+import { cx as e } from "../../utils/cx.js";
+import t from "./Toc.module.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useEffect as i, useState as a } from "react";
+// src/components/Toc/Toc.tsx
+function o({ items: i, title: a = "목차", variant: o = "sidebar", className: c }) {
+	let l = s(o === "sidebar" ? i : []), u = /* @__PURE__ */ n("ol", {
+		className: t.list,
+		children: i.map((r) => /* @__PURE__ */ n("li", {
+			className: r.depth >= 3 ? t.sub : void 0,
+			children: /* @__PURE__ */ n("a", {
+				href: `#${r.id}`,
+				className: e(t.link, r.id === l && t.active),
+				children: r.text
+			})
+		}, r.id))
+	});
+	return o === "inline" ? /* @__PURE__ */ r("details", {
+		className: e(t.inline, c),
+		children: [/* @__PURE__ */ n("summary", { children: a }), u]
+	}) : /* @__PURE__ */ r("nav", {
+		className: e(t.sidebar, c),
+		"aria-label": a,
+		children: [/* @__PURE__ */ n("p", {
+			className: t.title,
+			children: a
+		}), u]
+	});
+}
+function s(e, t = 140) {
+	let [n, r] = a();
+	return i(() => {
+		if (e.length === 0) return;
+		let n = 0;
+		function i() {
+			n = 0;
+			let i;
+			for (let n of e) {
+				let e = document.getElementById(n.id);
+				e && e.getBoundingClientRect().top < t && (i = n.id);
+			}
+			r(i);
+		}
+		function a() {
+			n ||= requestAnimationFrame(i);
+		}
+		return i(), addEventListener("scroll", a, { passive: !0 }), () => {
+			removeEventListener("scroll", a), cancelAnimationFrame(n);
+		};
+	}, [e, t]), n;
+}
+export { o as Toc };

package/dist/components/Toc/Toc.module.js

@@ -0,0 +1,11 @@
+// src/components/Toc/Toc.module.css
+var e = "sd-list-ntSgl", t = "sd-sidebar-Oo6GJ", n = "sd-title-sn1aR", r = "sd-link-1iE3P", i = "sd-sub-zhWRq", a = "sd-active-2X5eC", o = "sd-inline-oyv0J", s = {
+	list: e,
+	sidebar: t,
+	title: n,
+	link: r,
+	sub: i,
+	active: a,
+	inline: o
+};
+export { a as active, s as default, o as inline, r as link, e as list, t as sidebar, i as sub, n as title };

package/dist/components/icons/icons.d.ts

@@ -0,0 +1,10 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    size?: number;
+};
+export declare function SunIcon(props: IconProps): import('react').JSX.Element;
+export declare function MoonIcon(props: IconProps): import('react').JSX.Element;
+export declare function CalendarIcon(props: IconProps): import('react').JSX.Element;
+export declare function ClockIcon(props: IconProps): import('react').JSX.Element;
+export declare function GitHubIcon({ size, ...props }: IconProps): import('react').JSX.Element;
+export {};

package/dist/components/icons/icons.js

@@ -0,0 +1,74 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+// src/components/icons/icons.tsx
+function n({ size: e = 18, ...t }) {
+	return {
+		width: e,
+		height: e,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.8,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": !0,
+		...t
+	};
+}
+function r(r) {
+	return /* @__PURE__ */ t("svg", {
+		...n(r),
+		children: [/* @__PURE__ */ e("circle", {
+			cx: "12",
+			cy: "12",
+			r: "4.5"
+		}), /* @__PURE__ */ e("path", { d: "M12 2v2.5M12 19.5V22M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2 12h2.5M19.5 12H22M4.2 19.8 6 18M18 6l1.8-1.8" })]
+	});
+}
+function i(t) {
+	return /* @__PURE__ */ e("svg", {
+		...n(t),
+		children: /* @__PURE__ */ e("path", { d: "M20.5 14.5A8.5 8.5 0 0 1 9.5 3.5a8.5 8.5 0 1 0 11 11Z" })
+	});
+}
+function a(r) {
+	return /* @__PURE__ */ t("svg", {
+		...n({
+			size: 15,
+			...r
+		}),
+		children: [/* @__PURE__ */ e("rect", {
+			x: "3.5",
+			y: "5",
+			width: "17",
+			height: "15",
+			rx: "2.5"
+		}), /* @__PURE__ */ e("path", { d: "M3.5 10h17M8 3v4M16 3v4" })]
+	});
+}
+function o(r) {
+	return /* @__PURE__ */ t("svg", {
+		...n({
+			size: 15,
+			...r
+		}),
+		children: [/* @__PURE__ */ e("circle", {
+			cx: "12",
+			cy: "12",
+			r: "8.5"
+		}), /* @__PURE__ */ e("path", { d: "M12 7.5V12l3 2" })]
+	});
+}
+function s({ size: t = 18, ...n }) {
+	return /* @__PURE__ */ e("svg", {
+		width: t,
+		height: t,
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		...n,
+		children: /* @__PURE__ */ e("path", {
+			fill: "currentColor",
+			d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+		})
+	});
+}
+export { a as CalendarIcon, o as ClockIcon, s as GitHubIcon, i as MoonIcon, r as SunIcon };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+export { Banner, type BannerProps } from './components/Banner/Banner';
+export { Button, type ButtonProps } from './components/Button/Button';
+export { Chip, type ChipProps } from './components/Chip/Chip';
+export { Container, type ContainerProps } from './components/Container/Container';
+export { Footer, type FooterLink, type FooterProps } from './components/Footer/Footer';
+export { GradientText } from './components/GradientText/GradientText';
+export { IconButton, type IconButtonProps } from './components/IconButton/IconButton';
+export { CalendarIcon, ClockIcon, GitHubIcon, MoonIcon, SunIcon } from './components/icons/icons';
+export { Logo, type LogoProps } from './components/Logo/Logo';
+export { Navbar, type NavItem, type NavbarProps } from './components/Navbar/Navbar';
+export { PostList, type PostListItem, type PostListProps } from './components/PostList/PostList';
+export { Prose, type ProseProps } from './components/Prose/Prose';
+export { ReadingProgress, type ReadingProgressProps } from './components/ReadingProgress/ReadingProgress';
+export { SectionTitle, type SectionTitleProps } from './components/SectionTitle/SectionTitle';
+export { ThemeToggle, type ThemeToggleProps } from './components/ThemeToggle/ThemeToggle';
+export { Toc, type TocItem, type TocProps } from './components/Toc/Toc';
+export { cx } from './utils/cx';
+export { THEME_STORAGE_KEY, themeInitScript, type Theme } from './utils/theme';

package/dist/index.js

@@ -0,0 +1,21 @@
+/* empty css              */
+/* empty css            */
+import { cx as e } from "./utils/cx.js";
+import { Container as t } from "./components/Container/Container.js";
+import { Banner as n } from "./components/Banner/Banner.js";
+import { Button as r } from "./components/Button/Button.js";
+import { Chip as i } from "./components/Chip/Chip.js";
+import { Footer as a } from "./components/Footer/Footer.js";
+import { GradientText as o } from "./components/GradientText/GradientText.js";
+import { IconButton as s } from "./components/IconButton/IconButton.js";
+import { CalendarIcon as c, ClockIcon as l, GitHubIcon as u, MoonIcon as d, SunIcon as f } from "./components/icons/icons.js";
+import { Logo as p } from "./components/Logo/Logo.js";
+import { Navbar as m } from "./components/Navbar/Navbar.js";
+import { PostList as h } from "./components/PostList/PostList.js";
+import { Prose as g } from "./components/Prose/Prose.js";
+import { ReadingProgress as _ } from "./components/ReadingProgress/ReadingProgress.js";
+import { SectionTitle as v } from "./components/SectionTitle/SectionTitle.js";
+import { THEME_STORAGE_KEY as y, themeInitScript as b } from "./utils/theme.js";
+import { ThemeToggle as x } from "./components/ThemeToggle/ThemeToggle.js";
+import { Toc as S } from "./components/Toc/Toc.js";
+export { n as Banner, r as Button, c as CalendarIcon, i as Chip, l as ClockIcon, t as Container, a as Footer, u as GitHubIcon, o as GradientText, s as IconButton, p as Logo, d as MoonIcon, m as Navbar, h as PostList, g as Prose, _ as ReadingProgress, v as SectionTitle, f as SunIcon, y as THEME_STORAGE_KEY, x as ThemeToggle, S as Toc, e as cx, b as themeInitScript };

package/dist/styles.css

@@ -0,0 +1,2 @@
+:root{--sd-bg:#fff;--sd-bg-subtle:#f6f8fa;--sd-bg-elevated:#fff;--sd-text:#2b3138;--sd-text-strong:#0d1117;--sd-text-muted:#6b7280;--sd-border:#e6e8eb;--sd-accent:#0d9488;--sd-accent-2:#2563eb;--sd-accent-soft:color-mix(in srgb, var(--sd-accent) 10%, transparent);--sd-accent-2-soft:color-mix(in srgb, var(--sd-accent-2) 8%, transparent);--sd-gradient:linear-gradient(120deg, var(--sd-accent), var(--sd-accent-2));--sd-code-bg:#f1f3f5;--sd-dot:#0d111714;--sd-shadow:0 1px 2px #0d11170a, 0 8px 24px #0d11170f;--sd-selection:color-mix(in srgb, var(--sd-accent) 18%, transparent);--sd-font-sans:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;--sd-font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--sd-radius-sm:8px;--sd-radius-md:12px;--sd-radius-lg:14px;--sd-radius-full:999px;--sd-content-width:680px;--sd-wide-width:980px;--sd-header-height:64px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--sd-bg:#0e1013;--sd-bg-subtle:#15181c;--sd-bg-elevated:#1a1e23;--sd-text:#cfd4da;--sd-text-strong:#f3f4f6;--sd-text-muted:#8b929b;--sd-border:#262a30;--sd-accent:#2dd4bf;--sd-accent-2:#60a5fa;--sd-accent-soft:color-mix(in srgb, var(--sd-accent) 12%, transparent);--sd-accent-2-soft:color-mix(in srgb, var(--sd-accent-2) 10%, transparent);--sd-code-bg:#1d2126;--sd-dot:#ffffff0f;--sd-shadow:0 1px 2px #0000004d, 0 8px 24px #00000059;--sd-selection:color-mix(in srgb, var(--sd-accent) 25%, transparent);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--sd-header-height) + 24px)}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{background:var(--sd-bg);color:var(--sd-text);font-family:var(--sd-font-sans);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;margin:0;font-size:17px;line-height:1.8}::selection{background:var(--sd-selection)}h1,h2,h3,h4,h5,h6{color:var(--sd-text-strong);letter-spacing:-.025em;margin:0;font-weight:700;line-height:1.35}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}code,pre{font-family:var(--sd-font-mono)}@media (width<=640px){body{font-size:16px}}.sd-container-JMoiT{width:100%;max-width:calc(var(--sd-content-width) + 48px);margin:0 auto;padding-left:24px;padding-right:24px}@media (width>=1024px){.sd-wide-LxoRm{max-width:calc(var(--sd-wide-width) + 48px)}}@media (width<=640px){.sd-container-JMoiT{padding-left:20px;padding-right:20px}}.sd-banner-oyoWE{background:radial-gradient(ellipse 60% 120% at 10% 0%, var(--sd-accent-soft), transparent 70%), radial-gradient(ellipse 50% 100% at 95% 10%, var(--sd-accent-2-soft), transparent 70%), var(--sd-bg-subtle);border-bottom:1px solid var(--sd-border);position:relative;overflow:hidden}.sd-banner-oyoWE:before{content:"";background-image:radial-gradient(var(--sd-dot) 1px, transparent 1px);pointer-events:none;background-size:22px 22px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 90%);mask-image:linear-gradient(#000,#0000 90%)}.sd-banner-oyoWE>*{position:relative}.sd-inner-G1vOq{max-width:var(--sd-content-width);padding:64px 0 52px}.sd-lg-j2ruH{padding:72px 0 60px}.sd-eyebrow-Rf8QJ{color:var(--sd-accent);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:6px;margin:0 0 14px;font-size:.8rem;font-weight:700;display:flex}.sd-eyebrow-Rf8QJ a{transition:opacity .15s}.sd-eyebrow-Rf8QJ a:hover{opacity:.75}.sd-title-AeTHT{letter-spacing:-.04em;font-size:2.4rem;line-height:1.28}.sd-lg-j2ruH .sd-title-AeTHT{letter-spacing:-.045em;font-size:2.6rem;line-height:1.25}.sd-description-nbyf-{color:var(--sd-text-muted);margin:16px 0 0;font-size:1.08rem;line-height:1.65}@media (width<=640px){.sd-inner-G1vOq,.sd-lg-j2ruH{padding:44px 0 36px}.sd-title-AeTHT,.sd-lg-j2ruH .sd-title-AeTHT{font-size:1.75rem}.sd-description-nbyf-{font-size:1rem}}.sd-button-2ZuB7{border:1px solid var(--sd-border);background:var(--sd-bg-elevated);height:42px;color:var(--sd-text-strong);font:inherit;cursor:pointer;border-radius:10px;align-items:center;gap:8px;padding:0 18px;font-size:.92rem;font-weight:600;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s;display:inline-flex}.sd-button-2ZuB7:hover{box-shadow:var(--sd-shadow);transform:translateY(-1px)}.sd-button-2ZuB7:focus-visible{outline:2px solid var(--sd-accent);outline-offset:2px}.sd-primary-s1sM6{background:var(--sd-gradient);color:#fff;border-color:#0000}.sd-chip-0nys-{border-radius:var(--sd-radius-full);align-items:center;gap:6px;padding:5px 12px;font-size:.84rem;line-height:1.4;display:inline-flex}.sd-outline-s240C{border:1px solid var(--sd-border);background:var(--sd-bg-elevated);color:var(--sd-text-muted)}.sd-accent-wWCCB{background:var(--sd-accent-soft);color:var(--sd-accent);padding:1px 9px;font-size:.78rem;font-weight:700}.sd-footer-A76NF{border-top:1px solid var(--sd-border);background:var(--sd-bg-subtle);color:var(--sd-text-muted);font-size:.875rem}.sd-top-oMBPr{border-bottom:1px solid var(--sd-border);justify-content:space-between;gap:32px;padding:40px 0 28px;display:flex}.sd-brand-EmGiM{color:var(--sd-text-strong);letter-spacing:-.03em;align-items:center;gap:10px;font-size:1rem;font-weight:800;display:inline-flex}.sd-description-gSSA8{margin:8px 0 0}.sd-links-yNuwL{flex-wrap:wrap;align-content:flex-start;gap:8px 24px;display:flex}.sd-footer-A76NF a{transition:color .15s}.sd-footer-A76NF a:hover{color:var(--sd-accent)}.sd-bottom-np3Xe{justify-content:space-between;gap:16px;padding:20px 0 40px;font-size:.82rem;display:flex}@media (width<=640px){.sd-top-oMBPr{flex-direction:column;gap:20px}}.sd-gradientText-CxkVn{background:var(--sd-gradient);color:#0000;-webkit-background-clip:text;background-clip:text}.sd-iconButton-JAF-a{width:36px;height:36px;color:var(--sd-text-muted);cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;padding:0;transition:background-color .15s,color .15s;display:inline-flex}.sd-iconButton-JAF-a:hover{background:var(--sd-bg-subtle);color:var(--sd-text-strong)}.sd-iconButton-JAF-a:focus-visible{outline:2px solid var(--sd-accent);outline-offset:2px}.sd-logo-p5tMH{width:var(--size);height:var(--size);border-radius:calc(var(--size) * .3);background:var(--sd-gradient);color:#fff;font-size:calc(var(--size) * .5);letter-spacing:0;box-shadow:0 2px 8px var(--sd-accent-soft);flex-shrink:0;justify-content:center;align-items:center;font-weight:800;line-height:1;display:inline-flex}.sd-header-aqSzZ{z-index:20;background:color-mix(in srgb, var(--sd-bg) 80%, transparent);-webkit-backdrop-filter:saturate(180%)blur(14px);border-bottom:1px solid var(--sd-border);position:sticky;top:0}.sd-nav-0oisE{height:var(--sd-header-height);justify-content:space-between;align-items:center;gap:16px;display:flex}.sd-brand-P5uLt{color:var(--sd-text-strong);letter-spacing:-.035em;white-space:nowrap;align-items:center;gap:10px;font-size:1.05rem;font-weight:800;display:flex}.sd-right-64OWF{align-items:center;gap:2px;display:flex}.sd-link-UwJZv{border-radius:var(--sd-radius-full);color:var(--sd-text-muted);padding:6px 14px;font-size:.93rem;font-weight:500;line-height:1.6;transition:background-color .15s,color .15s;display:inline-block}.sd-link-UwJZv:hover{color:var(--sd-text-strong)}.sd-active-Rf9bv,.sd-active-Rf9bv:hover{background:var(--sd-accent-soft);color:var(--sd-accent);font-weight:700}.sd-divider-ZjuJB{background:var(--sd-border);width:1px;height:18px;margin:0 8px}.sd-actions-8BNWJ{align-items:center;gap:2px;display:flex}@media (width<=640px){.sd-link-UwJZv{padding:6px 11px}.sd-divider-ZjuJB{display:none}}.sd-list-6ceM4{flex-direction:column;gap:4px;margin:0 -20px;padding:0;list-style:none;display:flex}.sd-item-OoBbo{border-radius:var(--sd-radius-lg);border:1px solid #0000;align-items:center;gap:24px;padding:22px 20px;transition:background-color .2s,border-color .2s,box-shadow .2s;display:flex}.sd-item-OoBbo:hover{border-color:var(--sd-border);background:var(--sd-bg-elevated);box-shadow:var(--sd-shadow)}.sd-body-WN59Q{flex:1;min-width:0}.sd-title-wv5Et{font-size:1.22rem;transition:color .15s}.sd-item-OoBbo:hover .sd-title-wv5Et{color:var(--sd-accent)}.sd-description--Ndtf{color:var(--sd-text);margin:6px 0 0;font-size:.97rem;line-height:1.65}.sd-meta-91tNg{color:var(--sd-text-muted);flex-wrap:wrap;margin-top:12px;font-size:.84rem;display:flex}.sd-meta-91tNg>:not(:first-child):before{content:"·";margin:0 8px}.sd-arrow-cVFi9{color:var(--sd-accent);opacity:0;font-size:1.2rem;transition:opacity .2s,transform .2s;transform:translate(-8px)}.sd-item-OoBbo:hover .sd-arrow-cVFi9{opacity:1;transform:none}@media (width<=640px){.sd-list-6ceM4{margin:0 -12px}.sd-item-OoBbo{padding:18px 12px}.sd-arrow-cVFi9{display:none}}.sd-prose-Obc4t{min-width:0;color:var(--sd-text)}.sd-prose-Obc4t>:first-child{margin-top:0}.sd-prose-Obc4t p{margin:0 0 1.4em}.sd-prose-Obc4t h2{margin:2.8em 0 .9em;padding-left:16px;font-size:1.5rem;position:relative}.sd-prose-Obc4t h2:before{content:"";background:var(--sd-gradient);border-radius:4px;width:4px;position:absolute;top:.2em;bottom:.2em;left:0}.sd-prose-Obc4t h3{margin:2em 0 .7em;font-size:1.22rem}.sd-prose-Obc4t h4{margin:1.6em 0 .6em;font-size:1.05rem}.sd-prose-Obc4t a{color:var(--sd-accent);text-decoration:underline;-webkit-text-decoration-color:color-mix(in srgb, var(--sd-accent) 40%, transparent);text-decoration-color:color-mix(in srgb, var(--sd-accent) 40%, transparent);text-underline-offset:3px;transition:text-decoration-color .15s}.sd-prose-Obc4t a:hover{-webkit-text-decoration-color:var(--sd-accent);text-decoration-color:var(--sd-accent)}.sd-prose-Obc4t strong{color:var(--sd-text-strong);font-weight:700}.sd-prose-Obc4t ul,.sd-prose-Obc4t ol{margin:0 0 1.4em;padding-left:1.4em}.sd-prose-Obc4t li{margin:.35em 0;padding-left:.2em}.sd-prose-Obc4t ul>li::marker{color:var(--sd-accent)}.sd-prose-Obc4t ol>li::marker{color:var(--sd-accent);font-variant-numeric:tabular-nums;font-weight:700}.sd-prose-Obc4t img{border-radius:var(--sd-radius-md);margin:2em auto;display:block}.sd-prose-Obc4t blockquote{border-left:4px solid var(--sd-accent);background:var(--sd-accent-soft);color:var(--sd-text);border-radius:0 10px 10px 0;margin:1.8em 0;padding:1em 1.25em}.sd-prose-Obc4t blockquote>:last-child{margin-bottom:0}.sd-prose-Obc4t hr{border:none;border-top:1px solid var(--sd-border);margin:2.5em 0}.sd-prose-Obc4t table{border:1px solid var(--sd-border);border-collapse:separate;border-spacing:0;border-radius:10px;width:100%;max-width:100%;margin:1.8em 0;font-size:.92em;line-height:1.6;display:block;overflow-x:auto}.sd-prose-Obc4t th,.sd-prose-Obc4t td{border-bottom:1px solid var(--sd-border);text-align:left;vertical-align:top;padding:.7em 1em}.sd-prose-Obc4t tr:last-child td{border-bottom:none}.sd-prose-Obc4t th{background:var(--sd-bg-subtle);color:var(--sd-text-strong);white-space:nowrap;font-weight:600}.sd-prose-Obc4t td:first-child{white-space:nowrap;font-weight:500}.sd-prose-Obc4t :not(pre)>code{background:var(--sd-code-bg);color:var(--sd-text-strong);word-break:break-word;border-radius:5px;padding:.15em .4em;font-size:.86em}.sd-prose-Obc4t pre{border:1px solid var(--sd-border);border-radius:var(--sd-radius-md);background:var(--sd-bg-subtle);margin:1.8em 0;padding:1.1em 1.3em;font-size:.86rem;line-height:1.65;overflow-x:auto}:root:not([data-theme=dark]) .sd-prose-Obc4t :is(.shiki,.astro-code){background-color:var(--sd-bg-subtle)!important}:root[data-theme=dark] .sd-prose-Obc4t :is(.shiki,.astro-code),:root[data-theme=dark] .sd-prose-Obc4t :is(.shiki,.astro-code) span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important}@media (width<=640px){.sd-prose-Obc4t h2{font-size:1.32rem}}.sd-progress-52KzL{background:var(--sd-gradient);width:100%;height:3px;transform:scaleX(var(--progress,0));transform-origin:0;pointer-events:none;left:0}.sd-attached-n7Ovo{position:absolute;bottom:-1px}.sd-fixed-GqraP{z-index:30;position:fixed;top:0}.sd-head-tgU0N{justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}.sd-title-Uxtii{font-variant-numeric:tabular-nums;align-items:center;gap:10px;font-size:1.3rem;display:flex}.sd-title-Uxtii:before{content:"";background:var(--sd-gradient);border-radius:4px;width:4px;height:1.1em}.sd-action-Vs6N5{color:var(--sd-text-muted);font-size:.88rem;font-weight:500}.sd-action-Vs6N5 a{transition:color .15s}.sd-action-Vs6N5 a:hover{color:var(--sd-accent)}:root[data-theme=dark] .sd-sun-7vHKu,:root:not([data-theme=dark]) .sd-moon-sqz-D{display:none}.sd-list-ntSgl{margin:0;padding:0;list-style:none}.sd-sidebar-Oo6GJ{top:calc(var(--sd-header-height) + 32px);max-height:calc(100vh - var(--sd-header-height) - 64px);align-self:start;font-size:.86rem;line-height:1.5;position:sticky;overflow-y:auto}.sd-title-sn1aR{color:var(--sd-text-strong);letter-spacing:.08em;margin:0 0 12px;font-size:.78rem;font-weight:700}.sd-sidebar-Oo6GJ .sd-list-ntSgl{border-left:2px solid var(--sd-border)}.sd-sidebar-Oo6GJ .sd-link-1iE3P{color:var(--sd-text-muted);border-left:2px solid #0000;margin-left:-2px;padding:6px 0 6px 14px;transition:color .15s,border-color .15s;display:block}.sd-sidebar-Oo6GJ .sd-sub-zhWRq .sd-link-1iE3P{padding-left:28px;font-size:.82rem}.sd-sidebar-Oo6GJ .sd-link-1iE3P:hover{color:var(--sd-text-strong)}.sd-sidebar-Oo6GJ .sd-active-2X5eC,.sd-sidebar-Oo6GJ .sd-active-2X5eC:hover{border-left-color:var(--sd-accent);color:var(--sd-accent);font-weight:600}.sd-inline-oyv0J{border:1px solid var(--sd-border);border-radius:var(--sd-radius-md);background:var(--sd-bg-subtle);font-size:.92rem}.sd-inline-oyv0J summary{color:var(--sd-text-strong);cursor:pointer;padding:12px 18px;font-weight:700}.sd-inline-oyv0J .sd-list-ntSgl{padding:0 18px 14px}.sd-inline-oyv0J li{padding:4px 0}.sd-inline-oyv0J .sd-sub-zhWRq{padding-left:16px}.sd-inline-oyv0J .sd-link-1iE3P{color:var(--sd-text-muted)}.sd-inline-oyv0J .sd-link-1iE3P:hover{color:var(--sd-accent)}
+/*$vite$:1*/

package/dist/utils/cx.d.ts

@@ -0,0 +1 @@
+export declare function cx(...classes: (string | false | null | undefined)[]): string;

package/dist/utils/cx.js

@@ -0,0 +1,5 @@
+// src/utils/cx.ts
+function e(...e) {
+	return e.filter(Boolean).join(" ");
+}
+export { e as cx };

package/dist/utils/theme.d.ts

@@ -0,0 +1,7 @@
+export type Theme = 'light' | 'dark';
+export declare const THEME_STORAGE_KEY = "theme";
+/**
+ * 첫 렌더 전에 저장된 테마(없으면 시스템 설정)를 <html data-theme>에 적용하는 스크립트.
+ * <head> 안에 인라인으로 넣어야 화면이 깜빡이지 않는다.
+ */
+export declare const themeInitScript = "(() => {\n\tlet theme;\n\ttry { theme = localStorage.getItem('theme'); } catch {}\n\tif (theme !== 'light' && theme !== 'dark') {\n\t\ttheme = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n\t}\n\tdocument.documentElement.dataset.theme = theme;\n})();";

package/dist/utils/theme.js

@@ -0,0 +1,10 @@
+// src/utils/theme.ts
+var e = "theme", t = `(() => {
+	let theme;
+	try { theme = localStorage.getItem('${e}'); } catch {}
+	if (theme !== 'light' && theme !== 'dark') {
+		theme = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+	}
+	document.documentElement.dataset.theme = theme;
+})();`;
+export { e as THEME_STORAGE_KEY, t as themeInitScript };

package/package.json

@@ -1,6 +1,47 @@
 {
   "name": "shindonghyeo-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "신동혁의 개인 React 디자인 시스템",
+  "license": "MIT",
+  "author": "Donghyeok Shin",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SHINDongHyeo/shindonghyeo-ui.git"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "prepare": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.5",
+    "vite-plugin-dts": "^5.1.2"
+  }
+}