@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,88 @@
+.loader-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.loader-spinner__svg {
+  transform-origin: center;
+  animation: loader-rotate 1s linear infinite;
+}
+.loader-spinner__bg {
+  stroke: rgba(0,0,0,0.08);
+}
+.loader-spinner__fg {
+  stroke: var(--color-main);
+  stroke-dasharray: 125;
+  stroke-dashoffset: 80;
+  animation: loader-dash 1.2s ease-in-out infinite;
+}
+
+@keyframes loader-rotate {
+  100% { transform: rotate(360deg); }
+}
+@keyframes loader-dash {
+  0% { stroke-dashoffset: 125; }
+  50% { stroke-dashoffset: 35; }
+  100% { stroke-dashoffset: 125; }
+}
+
+.loader-bar {
+  width: 100%;
+  height: 8px;
+  background: rgba(0,0,0,0.06);
+  border-radius: 999px;
+  overflow: hidden;
+}
+.loader-bar__inner {
+  height: 100%;
+  background: var(--color-main);
+  width: 0%;
+  transition: width 220ms cubic-bezier(.2,.8,.2,1);
+}
+.core-loader-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.core-loader-spinner__svg {
+  transform-origin: center;
+  animation: core-loader-rotate 1s linear infinite;
+}
+.core-loader-spinner__bg {
+  stroke: rgba(0,0,0,0.08);
+}
+.core-loader-spinner__fg {
+  stroke: var(--color-main);
+  stroke-dasharray: 125;
+  stroke-dashoffset: 80;
+  animation: core-loader-dash 1.2s ease-in-out infinite;
+}
+
+@keyframes core-loader-rotate {
+  100% { transform: rotate(360deg); }
+}
+@keyframes core-loader-dash {
+  0% { stroke-dashoffset: 125; }
+  50% { stroke-dashoffset: 35; }
+  100% { stroke-dashoffset: 125; }
+}
+
+.core-loader-bar {
+  width: 100%;
+  height: 8px;
+  background: rgba(0,0,0,0.06);
+  border-radius: 999px;
+  overflow: hidden;
+}
+.core-loader-bar__inner {
+  height: 100%;
+  background: var(--color-main);
+  width: 0%;
+  transition: width 220ms cubic-bezier(.2,.8,.2,1);
+}
+
+.page-loading-center {
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+}

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

@@ -0,0 +1,14 @@
+import './Loader.css';
+/** @public */
+export interface LoaderProps {
+    /** 로더 스타일. `'spinner'`(기본) 또는 `'bar'` */
+    variant?: 'spinner' | 'bar';
+    /** 스피너 크기(px 또는 CSS 값). `variant='spinner'`일 때 적용됩니다. */
+    size?: number | string;
+    /** 진행률(0–100). `variant='bar'`일 때 적용됩니다. */
+    progress?: number | null;
+    /** aria-label 및 시각적 레이블 */
+    label?: string;
+}
+/** @public */
+export default function Loader(props: LoaderProps): import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Loader.css';
+/** @public */
+export default function Loader(props) {
+    const { variant = 'spinner', size = 24, progress = null, label } = props || {};
+    if (variant === 'bar') {
+        const pct = Math.max(0, Math.min(100, Number(progress) || 0));
+        return (_jsx("div", { className: "loader-bar", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, "aria-label": label || 'Loading', children: _jsx("div", { className: "loader-bar__inner", style: { width: `${pct}%` } }) }));
+    }
+    const dim = typeof size === 'number' ? `${size}px` : size;
+    return (_jsx("div", { className: "loader-spinner", style: { width: dim, height: dim }, role: "status", "aria-label": label || 'Loading', children: _jsxs("svg", { className: "loader-spinner__svg", viewBox: "0 0 50 50", width: size, height: size, children: [_jsx("circle", { className: "loader-spinner__bg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "4" }), _jsx("circle", { className: "loader-spinner__fg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "4", strokeLinecap: "round" })] }) }));
+}

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

@@ -0,0 +1,79 @@
+.notice-box {
+    margin: 0 auto var(--spacing-page);
+    padding: var(--spacing-l);
+    border-radius: var(--radius-m);
+    background: var(--color-darkWhite);
+    color: var(--color-gray);
+    position: relative;
+    text-align: left;
+}
+
+
+.notice-box ul {
+    margin: 0;
+    padding: 0 0 0 18px;
+}
+
+.notice-box__inner {
+    padding: 12px 14px;
+    border-radius: var(--radius-s);
+    text-align: left;
+}
+
+/* 안내 박스는 배경이 흰색이 아니라 한 톤 어두운 면(--color-darkWhite)이다.
+   그래서 흰 배경 기준으로 고른 색은 여기서 대비가 더 낮아진다 — 실측 결과
+   제목 4.23:1, 본문 2.25:1로 둘 다 AA 미달이었다. 한 단계씩 진하게 올린다. */
+.notice-box__title {
+    margin: 0 0 10px 0;
+    color: var(--color-darkGray);
+}
+
+.notice-box__body {
+    color: var(--color-deepGray);
+}
+
+.notice-box__line {
+    color: var(--color-deepGray)
+}
+
+/* Variants */
+.notice-box--default {
+    border-color: var(--color-whiteLine);
+}
+
+.notice-box--dashed {
+    border: 1px dashed var(--color-whiteLine);
+    background: var(--color-deepWhite);
+}
+
+.notice-box--important {
+    border: 1px solid var(--color-main);
+    box-shadow: var(--shadow-dropdown);
+}
+
+/* Dismiss button */
+.notice-box__dismiss {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 18px;
+  line-height: 1;
+  color: var(--color-lightGray);
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: var(--radius-xs);
+  transition: color 0.12s;
+}
+.notice-box__dismiss:hover { color: var(--color-gray); }
+
+@media (max-width: 767px) {
+    .notice-box {
+        padding: var(--spacing-s);
+    }
+
+    .notice-box__inner {
+        padding: var(--spacing-s);
+    }
+}

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

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import './NoticeBox.css';
+/** @public */
+export interface NoticeBoxProps {
+    title?: string;
+    lines?: string[];
+    notices?: Array<{
+        title?: string;
+        lines?: string[];
+        variant?: string;
+        children?: ReactNode;
+    }> | null;
+    children?: ReactNode;
+    /** 스타일 변형. `'default'` | `'dashed'` | `'important'` */
+    variant?: 'default' | 'dashed' | 'important' | string;
+    /** 닫기(×) 버튼 표시 여부 */
+    dismissible?: boolean;
+    className?: string;
+}
+/** @public */
+export default function NoticeBox({ title, lines, notices, children, variant, dismissible, className, }: NoticeBoxProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import './NoticeBox.css';
+/** @public */
+export default function NoticeBox({ title = '', lines = [], notices = null, children, variant = 'default', dismissible = false, className = '', }) {
+    const { t } = useTranslation();
+    const [dismissed, setDismissed] = useState(false);
+    const handleDismiss = useCallback(() => setDismissed(true), []);
+    if (dismissed)
+        return null;
+    const baseClass = `notice-box notice-box--${variant} body-2 ${className}`.trim();
+    if (notices && Array.isArray(notices) && notices.length) {
+        return (_jsx("div", { className: baseClass, role: "note", children: notices.map((n, idx) => (_jsxs("div", { className: "notice-box__inner", children: [n.title ? _jsx("span", { className: "notice-box__title body-3", children: n.title }) : null, _jsx("div", { className: "notice-box__body", children: n.lines && n.lines.length ? (_jsx("div", { children: n.lines.map((l, i) => (_jsx("span", { className: "notice-box__line body-3", children: l }, i))) })) : (n.children ?? null) })] }, idx))) }));
+    }
+    const content = (title || lines.length) ? (_jsxs("div", { className: "notice-box__inner", children: [title ? _jsx("span", { className: "notice-box__title body-1", children: title }) : null, _jsx("div", { className: "notice-box__body", children: lines.length ? (_jsx("ul", { children: lines.map((l, i) => (_jsx("li", { className: "notice-box__line", children: l }, i))) })) : children })] })) : (_jsx("div", { className: "notice-box__inner", children: children }));
+    return (_jsxs("div", { className: baseClass, role: "note", children: [content, dismissible && (_jsx("button", { className: "notice-box__dismiss", onClick: handleDismiss, "aria-label": t('common.close', '닫기'), children: "\u00D7" }))] }));
+}

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

@@ -0,0 +1,27 @@
+.page-title {
+  display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom: var(--spacing-page);
+}
+.page-title__main { display:flex; flex-direction:column; align-items:flex-start; text-align:left; flex: 1; min-width: 0; }
+.page-title__title-row { display:flex; align-items:center; gap:12px; }
+/* margin:0 은 !important 불필요 — 결합되는 h1 타이포그래피 클래스(styles.css)가 이미 margin:0 지정 */
+.page-title__title { margin:0; }
+.page-title__title-action { display:flex; align-items:center; }
+.page-title__title-action { flex-shrink:0; }
+.page-title__badge { display:flex; align-items:center; }
+.page-title__sub { margin:0; color:var(--color-gray); margin-top:6px; }
+.page-title__action { margin-left: var(--spacing-s); flex-shrink: 0; }
+
+/* 모바일: 타이틀이 전체 너비를 쓰고 버튼은 아래로 내려 레이아웃 충돌 방지 */
+@media (max-width: 767px) {
+  .page-title {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  .page-title__action {
+    margin-left: 0;
+    /* 세로로 내려오면 제목과 같은 선에서 시작하게 한다 — 우측에 붙여 두면
+       제목과 어긋나 화면 오른쪽에 홀로 떠 있는 것처럼 보인다. */
+    align-self: flex-start;
+  }
+}

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

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import './PageTitle.css';
+type PageTitleProps = {
+    title: ReactNode;
+    sub?: ReactNode;
+    rightAction?: ReactNode;
+    titleAction?: ReactNode;
+    badge?: string;
+    badgeVariant?: string;
+    /**
+     * title 이 문자열이 아닐 때 문서 제목으로 쓸 말.
+     *
+     * 제목 줄에 뱃지나 뒤로가기 버튼을 끼우려면 title 에 JSX 를 넘기게 되는데, 그러면
+     * 아래 훅이 아무것도 못 하고 문서 제목이 앱 이름('아이해브 말귀')에 머문다. 실제로
+     * 말귀자료실과 단어훈련 만들기 두 화면이 그랬다 — 탭을 여럿 띄우면 어느 것이 어느
+     * 화면인지 알 수 없고, 낭독기도 화면이 바뀐 것을 알리지 못한다(WCAG 2.4.2).
+     * title 이 문자열이면 이 값은 필요 없다.
+     */
+    documentTitle?: string;
+};
+/** @public */
+export default function PageTitle({ title, sub, rightAction, titleAction: _titleAction, badge, badgeVariant, documentTitle }: PageTitleProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './PageTitle.css';
+import Badge from './Badge';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
+/** @public */
+export default function PageTitle({ title, sub, rightAction, titleAction: _titleAction, badge, badgeVariant = 'default', documentTitle }) {
+    // 페이지 제목이 곧 문서 제목이 되도록 맞춘다(WCAG 2.4.2).
+    useDocumentTitle(typeof title === 'string' ? title : (documentTitle ?? null));
+    return (_jsxs("div", { className: "page-title", children: [_jsxs("div", { className: "page-title__main", children: [_jsxs("div", { className: "page-title__title-row", children: [_jsx("h1", { className: "page-title__title h1", children: title }), badge && _jsx("div", { className: "page-title__badge", children: _jsx(Badge, { label: badge, size: "small", variant: badgeVariant, fill: "outline" }) })] }), sub && _jsx("p", { className: "page-title__sub body-2", children: sub })] }), rightAction ? _jsx("div", { className: "page-title__action", children: rightAction }) : null] }));
+}

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

@@ -0,0 +1,11 @@
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.pagination__info {
+  min-width: 48px;
+  text-align: center;
+  font-weight: 600;
+  color: var(--color-darkGray);
+}

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

@@ -0,0 +1,22 @@
+import './Pagination.css';
+/** @public */
+export interface PaginationProps {
+    /** 현재 페이지 (1-based) */
+    page: number;
+    /** 전체 페이지 수 */
+    totalPages: number;
+    /** 페이지 변경 콜백 */
+    onChange: (page: number) => void;
+    /** 이전 버튼 aria-label */
+    prevLabel?: string;
+    /** 다음 버튼 aria-label */
+    nextLabel?: string;
+    className?: string;
+}
+/**
+ * 페이지네이션 컨트롤 (‹ 현재/전체 ›).
+ * CustomersPage·TrainingSettingsPage 등 테이블 페이지에서 공유.
+ *
+ * @public
+ */
+export default function Pagination({ page, totalPages, onChange, prevLabel, nextLabel, className, }: PaginationProps): import("react").JSX.Element;

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

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import { useTranslation } from 'react-i18next';
+import Button from './Button';
+import './Pagination.css';
+/**
+ * 페이지네이션 컨트롤 (‹ 현재/전체 ›).
+ * CustomersPage·TrainingSettingsPage 등 테이블 페이지에서 공유.
+ *
+ * @public
+ */
+export default function Pagination({ page, totalPages, onChange, prevLabel, nextLabel, className = '', }) {
+    const { t } = useTranslation();
+    const resolvedPrev = prevLabel ?? t('common.prevPage', '이전 페이지');
+    const resolvedNext = nextLabel ?? t('common.nextPage', '다음 페이지');
+    const handlePrev = () => onChange(Math.max(1, page - 1));
+    const handleNext = () => onChange(Math.min(totalPages, page + 1));
+    return (_jsxs("div", { className: cx('pagination', className), children: [_jsx(Button, { size: 32, type: "dot", shape: "rounded", icon: "chevron-left", ariaLabel: resolvedPrev, disabled: page <= 1, onClick: handlePrev }), _jsxs("span", { className: "pagination__info body-3", children: [page, " / ", totalPages] }), _jsx(Button, { size: 32, type: "dot", shape: "rounded", icon: "chevron-right", ariaLabel: resolvedNext, disabled: page >= totalPages, onClick: handleNext })] }));
+}