@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/ChartSection.css

@@ -0,0 +1,191 @@
+/* ChartSection — 차트 카드 공통 레이아웃 (제목 헤더 + total/legend 서브로우) */
+/* BarChart, RingChart 기반 섹션(TrainingStatusPage 숙제현황 등)이 공유 */
+
+.manager-section {
+  background: var(--color-white);
+  border-radius: var(--radius-m);
+  padding: 20px;
+  margin-bottom: 14px;
+  box-shadow: var(--shadow-card);
+  /* 차트 카드 — inline 나열 가능하도록 최소 폭만 지정(최대 폭 제한 없음) */
+  min-width: 320px;
+}
+.manager-section__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+  margin-bottom: var(--spacing-s);
+}
+/* 제목 옆 아이콘 — StatChart(.manager-stat-card__icon)와 동일한 톤 */
+.chart-section-icon {
+  opacity: 0.35;
+  display: inline-flex;
+}
+.chart-section-icon-inner {
+  width: 22px;
+  height: 22px;
+  color: var(--color-darkGray);
+}
+
+@media (max-width: 767px) {
+  .manager-section__head {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-s);
+  }
+  /* 월 네비게이션과 주/일 토글이 한 줄에 안 들어올 때 자연스럽게 줄바꿈 */
+  .manager-section-controls {
+    flex-wrap: wrap;
+  }
+  /* 줄바꿈된 세그먼트 컨트롤 내부는 nowrap 유지 */
+  .manager-section-controls .segmented-control {
+    flex-wrap: nowrap;
+  }
+  .manager-section {
+    padding: 18px;
+    /* 기본 규칙의 min-width:320px는 "차트 카드를 가로로 나란히 놓을 수 있게" 잡아둔
+       하한인데, 이 폭부터는 카드가 한 장씩 세로로 쌓여 그 이유가 사라진다. 그대로
+       두면 320px 기기에서 카드가 부모(280px)를 40px 넘쳐 오른쪽이 잘렸다.
+       (같은 실수를 Footer.css의 .site-footer__links에서도 했다 — 가로 배치를
+       전제로 건 min-width를 세로 전환 시 같이 풀어줘야 한다.) */
+    min-width: 0;
+  }
+}
+
+/* 섹션 컨트롤 */
+.manager-section-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+/* 차트 영역 로딩 스피너 — 헤더/범례는 유지, 막대 자리에만 표시 */
+.manager-bar-chart-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 186px;
+}
+
+.barchart-sub-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: var(--spacing-l);
+}
+.barchart-total {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+/* 진행률 모드: 라벨(윗줄) + 숫자·% (아랫줄) */
+.barchart-total--stacked {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+}
+.barchart-total--stacked .barchart-total__label,
+.barchart-total--stacked .barchart-total__num,
+.barchart-total--stacked .barchart-total__unit,
+.barchart-total--stacked .barchart-total__value {
+  line-height: 1.1;
+  margin: 0;
+}
+.barchart-total__label {
+  color: var(--color-gray);
+}
+.barchart-total__value {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+.barchart-total__num {
+  color: var(--color-black);
+}
+.barchart-total__unit {
+  color: var(--color-gray);
+}
+
+.manager-bar-chart-legend {
+  display: flex;
+  flex-direction: column;       /* 항상 세로로 나열 */
+  align-items: flex-end;
+  gap: 6px;
+  padding-right: var(--spacing-xs);
+  font-size: 12px;
+  color: var(--color-gray);
+}
+.manager-bar-chart-legend-item {
+  display: inline-flex;
+  align-items: center;
+}
+.manager-bar-chart-legend-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 4px;
+}
+
+/* size='small' — 대시보드 작은 그리드에 들어가는 블럭형 카드. 컨트롤/total 블록은 없고 legend는 유지.
+   패딩·헤더 높이·간격을 StatChart(.manager-stat-card)와 동일하게 맞춰, 같은 그리드 행에 나란히
+   놓였을 때 숫자 세로 위치가 어긋나지 않게 한다 */
+.manager-section--compact {
+  padding: 20px;
+  min-width: 160px;
+}
+.manager-section--compact .manager-section__head {
+  min-height: 28px;
+  margin-bottom: 4px;
+}
+/* size='small' 제목 — StatChart(.manager-stat-card__label)와 동일한 색상으로 톤 통일 */
+.chart-section-title--small {
+  color: var(--color-deepGray);
+}
+/* size='small' total 숫자 — h0(40px)는 작은 카드에 비해 과커서 StatChart 값(32px, line-height:1)과
+   폰트 크기·줄높이를 동일하게 맞춰 다른 스탯 카드들과 세로 위치가 어긋나지 않게 함.
+   서브로우 간격도 좁혀 숫자와 차트 본체(링/막대)가 너무 떨어져 보이지 않게 함 */
+.manager-section--compact .barchart-total__num {
+  font-size: 32px;
+  line-height: 1;
+}
+/* total(숫자)은 옆의 legend가 길어져도 절대 줄어들면(글자 단위 줄바꿈) 안 됨 — 항상 제 크기 확보 */
+.manager-section--compact .barchart-total {
+  flex-shrink: 0;
+}
+.manager-section--compact .barchart-sub-row {
+  margin-bottom: var(--spacing-s);
+}
+/* size='small' legend — 대시보드 좁은 카드에서 이용권 상품명처럼 긴 라벨이 줄바꿈돼
+   total 숫자와 겹치는 것을 막기 위해, total이 쓰고 남은 폭만 차지하고 그 안에서 말줄임 처리 */
+.manager-section--compact .manager-bar-chart-legend {
+  flex: 1 1 auto;
+  min-width: 0;
+  align-items: stretch;
+}
+.manager-section--compact .manager-bar-chart-legend-item {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* size='large' — 가로 폭을 거의 100% 차지(플렉스 컨테이너 기준 1열) */
+.manager-section--full {
+  flex: 1 1 100%;
+  width: 100%;
+}
+
+/* 좁은 화면에서 compact 카드의 min-width 160px 풀기.
+   이 파일의 @media 블록(31행)은 `.manager-section--compact`(134행)보다 **앞**에 있어
+   같은 특이도로는 덮이지 않는다 — 그래서 파일 끝에 따로 둔다.
+   매니저 대시보드에서 이 하한 때문에 320px 그리드가 27px 잘려 오른쪽 카드가 닿지 않았다. */
+@media (max-width: 767px) {
+  .manager-section--compact {
+    min-width: 0;
+  }
+}

package/dist/packages/core/src/components/ChartSection.d.ts

@@ -0,0 +1,42 @@
+import './ChartSection.css';
+import type { ReactNode } from 'react';
+/** @public */
+export interface ChartLegendItem {
+    color: string;
+    label: ReactNode;
+}
+/** 차트 범례 — 색상 점 + 라벨 목록. BarChart/RingChart 섹션이 공유. @public */
+export declare function ChartLegend({ items, className }: {
+    items: ChartLegendItem[];
+    className?: string;
+}): import("react").JSX.Element;
+/** @public */
+export interface ChartTotalProps {
+    /** 값 위에 표시하는 라벨(윗줄). 지정 시 stacked 레이아웃(라벨 위 · 값 아래). */
+    label?: ReactNode;
+    /** 숫자/단위 등 값 영역 — 호출부에서 조합(h0 숫자 + h5 단위 등) */
+    children: ReactNode;
+}
+/** 차트 총계 표시 — label이 있으면 라벨(윗줄)+값(아랫줄) stacked, 없으면 값만. @public */
+export declare function ChartTotal({ label, children }: ChartTotalProps): import("react").JSX.Element;
+/** @public */
+export interface ChartSectionProps {
+    /** 섹션 제목 */
+    title: ReactNode;
+    /** 제목 타이포그래피 클래스 (기본: 'h3') — 작은 카드(size='small')는 'h5' 등으로 축소 */
+    titleClassName?: string;
+    /** 헤더 우측 영역 — 기간 네비게이션, 상세보기 버튼 등 */
+    headRight?: ReactNode;
+    /** 총계(ChartTotal) + 범례(ChartLegend)를 담는 서브로우 */
+    subRow?: ReactNode;
+    /** 섹션 루트에 추가할 클래스 */
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * 차트 카드 공통 레이아웃 — 제목 헤더 + total/legend 서브로우 + 차트 본체.
+ * BarChart와 RingChart 기반 섹션(숙제 진행현황 등)이 동일한 헤더/범례 디자인을
+ * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
+ * @public
+ */
+export default function ChartSection({ title, titleClassName, headRight, subRow, className, children }: ChartSectionProps): import("react").JSX.Element;

package/dist/packages/core/src/components/ChartSection.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ChartSection.css';
+/** 차트 범례 — 색상 점 + 라벨 목록. BarChart/RingChart 섹션이 공유. @public */
+export function ChartLegend({ items, className }) {
+    return (_jsx("div", { className: className ? `manager-bar-chart-legend ${className}` : 'manager-bar-chart-legend', children: items.map((it, i) => (_jsxs("span", { className: "manager-bar-chart-legend-item", children: [_jsx("span", { className: "manager-bar-chart-legend-dot", style: { background: it.color } }), it.label] }, i))) }));
+}
+/** 차트 총계 표시 — label이 있으면 라벨(윗줄)+값(아랫줄) stacked, 없으면 값만. @public */
+export function ChartTotal({ label, children }) {
+    if (!label) {
+        return _jsx("div", { className: "barchart-total", children: children });
+    }
+    return (_jsxs("div", { className: "barchart-total barchart-total--stacked", children: [_jsx("span", { className: "barchart-total__label body-3", children: label }), _jsx("span", { className: "barchart-total__value", children: children })] }));
+}
+/**
+ * 차트 카드 공통 레이아웃 — 제목 헤더 + total/legend 서브로우 + 차트 본체.
+ * BarChart와 RingChart 기반 섹션(숙제 진행현황 등)이 동일한 헤더/범례 디자인을
+ * 공유하도록 두 컴포넌트가 내부적으로 사용한다.
+ * @public
+ */
+export default function ChartSection({ title, titleClassName = 'h3', headRight, subRow, className, children }) {
+    return (_jsxs("section", { className: className ? `manager-section ${className}` : 'manager-section', children: [_jsxs("div", { className: "manager-section__head", children: [_jsx("div", { className: titleClassName, children: title }), headRight] }), subRow && _jsx("div", { className: "barchart-sub-row", children: subRow }), children] }));
+}

package/dist/packages/core/src/components/Checkbox.css

@@ -0,0 +1,94 @@
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+  line-height: 1;
+}
+.checkbox--disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+/* 네이티브 input 숨김 */
+.checkbox__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* 커스텀 박스 */
+.checkbox__box {
+  position: relative;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border: 1.5px solid var(--color-whiteLine);
+  border-radius: var(--radius-sm, 8px);
+  background: var(--color-white, var(--color-pureWhite));
+  transition: border-color 0.15s, background 0.15s;
+}
+
+/* checked */
+.checkbox__input:checked + .checkbox__box {
+  background: var(--color-main, var(--color-main));
+  border-color: var(--color-main, var(--color-main));
+}
+.checkbox__input:checked + .checkbox__box::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4 9l3.5 3.5L14 6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/cover no-repeat;
+}
+
+/* indeterminate */
+.checkbox__input:indeterminate + .checkbox__box {
+  background: var(--color-main, var(--color-main));
+  border-color: var(--color-main, var(--color-main));
+}
+.checkbox__input:indeterminate + .checkbox__box::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 9h9' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/cover no-repeat;
+}
+
+/* hover */
+.checkbox:not(.checkbox--disabled):hover .checkbox__box {
+  border-color: var(--color-main, var(--color-main));
+}
+
+/* focus */
+.checkbox__input:focus-visible + .checkbox__box {
+  outline: 2px solid var(--color-main, var(--color-main));
+  outline-offset: 2px;
+}
+
+/* large */
+.checkbox--large .checkbox__box {
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radius-s, 10px);
+}
+
+/* small */
+.checkbox--small .checkbox__box {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-xs, 4px);
+}
+
+/* label */
+.checkbox__label {
+  color: var(--color-darkGray);
+}
+.checkbox--small .checkbox__label {
+  font-size: 13px;
+}

package/dist/packages/core/src/components/Checkbox.d.ts

@@ -0,0 +1,16 @@
+import './Checkbox.css';
+export interface CheckboxProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    /** 헤더 전체선택처럼 일부만 선택된 중간 상태 */
+    indeterminate?: boolean;
+    label?: React.ReactNode;
+    size?: 'small' | 'medium' | 'large';
+    className?: string;
+    title?: string;
+    /** 화면에 보이는 label 없이 스크린리더용 이름을 지정할 때 사용 (label이 있으면 무시됨) */
+    ariaLabel?: string;
+}
+/** @public */
+export default function Checkbox({ checked, onChange, disabled, indeterminate, label, size, className, title, ariaLabel, }: CheckboxProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Checkbox.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import './Checkbox.css';
+import { useEffect, useId, useRef } from 'react';
+/** @public */
+export default function Checkbox({ checked = false, onChange, disabled, indeterminate, label, size = 'medium', className, title, ariaLabel, }) {
+    const ref = useRef(null);
+    const id = useId();
+    useEffect(() => {
+        if (ref.current)
+            ref.current.indeterminate = !!indeterminate;
+    }, [indeterminate]);
+    return (_jsxs("label", { className: cx('checkbox', size === 'small' && 'checkbox--small', size === 'large' && 'checkbox--large', disabled && 'checkbox--disabled', className), htmlFor: id, title: title, children: [_jsx("input", { ref: ref, id: id, type: "checkbox", className: "checkbox__input", checked: checked, onChange: e => onChange?.(e.target.checked), disabled: disabled, "aria-label": !label && ariaLabel ? ariaLabel : undefined }), _jsx("span", { className: "checkbox__box" }), label && _jsx("span", { className: "checkbox__label body-3", children: label })] }));
+}

package/dist/packages/core/src/components/ChoiceChips.css

@@ -0,0 +1,65 @@
+.choice-chips {
+    display: block;
+    width: 100%;
+}
+
+/* size별 하단 여백 */
+.choice-chips--medium { margin-bottom: 60px; }
+.choice-chips--small  { margin-bottom: var(--spacing-l); }
+
+.choice-chips__list {
+    display: flex;
+    gap: var(--spacing-s);
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding-bottom: 6px;
+}
+
+.choice-chips__list::-webkit-scrollbar {
+    height: 8px;
+}
+
+.choice-chips__list::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.08);
+    border-radius: var(--radius-sm);
+}
+
+/* ── 칩 버튼 (Button 컴포넌트에 className="choice-chips__button" 적용) ──────── */
+
+.choice-chips__button {
+    padding: 0 24px !important;
+    height: 40px !important;
+    border-radius: var(--radius-s) !important;
+    border: 1px solid var(--color-whiteLine) !important;
+    background: var(--color-deepWhite) !important;
+    color: var(--color-darkGray) !important;
+    white-space: nowrap;
+    transition: all 0.12s !important;
+}
+
+.choice-chips__button:hover {
+    border-color: var(--color-main) !important;
+}
+
+/* ── small 변형 — 높이/패딩/간격 축소 (base의 !important를 특이도로 오버라이드) ── */
+.choice-chips--small .choice-chips__button {
+    height: 32px !important;
+    padding: 0 16px !important;
+}
+.choice-chips--small .choice-chips__list {
+    gap: var(--spacing-xs);
+}
+
+.choice-chips__button.is-selected {
+    animation: chip-sub-to-main 360ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    background: var(--color-main) !important;
+    color: #ffffff !important;
+    border: 1px solid var(--color-main) !important;
+    box-shadow: var(--shadow-dropdown);
+}
+
+@keyframes chip-sub-to-main {
+    0%   { background-color: var(--color-sub); }
+    100% { background-color: var(--color-main); }
+}

package/dist/packages/core/src/components/ChoiceChips.d.ts

@@ -0,0 +1,15 @@
+import './ChoiceChips.css';
+/** @public */
+export type ChipOption = {
+    key: string;
+    label: string;
+};
+/** @public */
+export type Sub = ChipOption;
+/** @public */
+export default function ChoiceChips({ subs, selected, onSelect, size }: {
+    subs?: ChipOption[];
+    selected?: string;
+    onSelect?: (key: string) => void; /** 칩 크기 — `medium`(기본, 40px) / `small`(32px) */
+    size?: 'medium' | 'small';
+}): import("react").JSX.Element;

package/dist/packages/core/src/components/ChoiceChips.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from './Button';
+import './ChoiceChips.css';
+/** @public */
+export default function ChoiceChips({ subs = [], selected, onSelect, size = 'medium' }) {
+    const buttonSize = size === 'small' ? 32 : 40;
+    return (_jsx("div", { className: `choice-chips choice-chips--${size}`, children: _jsx("div", { className: "choice-chips__list", children: subs.map((s) => (_jsx(Button, { size: buttonSize, type: "bar", label: s.label, selected: selected === s.key, className: "choice-chips__button", onClick: () => onSelect?.(s.key) }, s.key))) }) }));
+}

package/dist/packages/core/src/components/CircleBadge.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+import './Badge.css';
+/** 부모 코너 배치. inline 은 흐름 배치. @public */
+export type CircleBadgePosition = 'top-left' | 'top-right' | 'inline';
+/** 크기 스케일 — Button/Badge dot 과 동일. @public */
+export type CircleBadgeSize = 24 | 32 | 40;
+/** @public */
+export interface CircleBadgeProps {
+    /** 원 안에 표시할 내용(R/L·숫자·짧은 문자). */
+    children: ReactNode;
+    /** 부모(position:relative) 코너 배치. 기본 좌상단. inline 이면 흐름 배치. */
+    position?: CircleBadgePosition;
+    /** 크기 스케일. 기본 24. */
+    size?: CircleBadgeSize;
+    className?: string;
+}
+/**
+ * 원형 식별 배지 — 짧은 문자/숫자를 원 안에 보여준다.
+ *
+ * `Badge type="dot"` 은 숫자(number)나 아이콘(check/remove/minus)만 그리므로,
+ * R/L 처럼 임의 문자를 원에 담아야 할 때 이 컴포넌트를 쓴다. 스타일은 Badge 의
+ * `.circle-badge` 를 그대로 재사용한다(파란 원 + 흰 글자).
+ *
+ * @example
+ * <div style={{ position: 'relative' }}>
+ *   <input />
+ *   <CircleBadge>R</CircleBadge>
+ * </div>
+ * @public
+ */
+export default function CircleBadge({ children, position, size, className, }: CircleBadgeProps): import("react").JSX.Element;

package/dist/packages/core/src/components/CircleBadge.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import './Badge.css';
+/**
+ * 원형 식별 배지 — 짧은 문자/숫자를 원 안에 보여준다.
+ *
+ * `Badge type="dot"` 은 숫자(number)나 아이콘(check/remove/minus)만 그리므로,
+ * R/L 처럼 임의 문자를 원에 담아야 할 때 이 컴포넌트를 쓴다. 스타일은 Badge 의
+ * `.circle-badge` 를 그대로 재사용한다(파란 원 + 흰 글자).
+ *
+ * @example
+ * <div style={{ position: 'relative' }}>
+ *   <input />
+ *   <CircleBadge>R</CircleBadge>
+ * </div>
+ * @public
+ */
+export default function CircleBadge({ children, position = 'top-left', size = 24, className = '', }) {
+    return (_jsx("span", { className: cx('circle-badge', 'circle-badge--number', `circle-badge--${size}`, `circle-badge--${position}`, className), children: children }));
+}

package/dist/packages/core/src/components/CodeBox.css

@@ -0,0 +1,62 @@
+.code-box {
+  background: var(--color-code-bg, #eff8ff);
+  border: 1px solid rgba(4, 34, 51, 0.06);
+  border-radius: 10px;
+  padding: 16px 20px;
+  margin: 0;
+  color: var(--color-code-text, #042233);
+  overflow: hidden;
+}
+
+.code-box__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 40px;
+}
+
+.code-box__title {
+  color: rgba(4, 34, 51, 0.75);
+  letter-spacing: 0.02em;
+  display: flex;
+  align-items: center;
+}
+
+.code-box__copy {
+  flex-shrink: 0;
+}
+
+.code-box__inner {
+  background: transparent;
+  padding: 8px 0 0;
+  margin: 0;
+  overflow-x: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
+  font-size: 13px;
+  color: var(--color-code-text, #042233);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.code-box__inner code {
+  display: block;
+  font-family: inherit;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.code-box--small .code-box__inner { font-size: 12px; }
+
+/* 토큰 색상 (단순 하이라이트) */
+.code-token { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
+.code-token.keyword     { color: #6b46ff; font-weight: 600; }
+.code-token.string      { color: #0a9d58; }
+.code-token.comment     { color: #6b7280; font-style: italic; }
+.code-token.command     { color: #0b78d1; }
+.code-token.number      { color: #d97706; }
+.code-token.operator    { color: #dc2626; }
+.code-token.punctuation { color: var(--color-code-text, #042233); }
+.code-token.identifier  { color: var(--color-code-text, #042233); }

package/dist/packages/core/src/components/CodeBox.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import './CodeBox.css';
+/** @public */
+export interface CodeBoxProps {
+    /** 코드 문자열 (children 으로 전달) */
+    children: ReactNode;
+    /** 언어 (bash | js/ts 등). 간단한 하이라이트에 사용. 기본 'bash' */
+    language?: string;
+    /** 상단 제목 */
+    title?: string;
+    /** 복사 버튼 노출 여부 (기본 true) */
+    showCopy?: boolean;
+    /** 글자 크기. 'small'이면 한 단계 작게 표시 (기본 'default') */
+    size?: 'default' | 'small';
+    className?: string;
+}
+/** @public 코드 스니펫 표시 + 복사 버튼 (디자인 시스템). */
+export default function CodeBox({ children, language, title, showCopy, size, className }: CodeBoxProps): import("react").JSX.Element;