@krds.ui/react 0.1.0 → 0.1.1

package/dist/types/index.d.ts

@@ -10,6 +10,7 @@ import { HTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react';
 import { Key } from 'react';
+import { MutableRefObject } from 'react';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
@@ -23,7 +24,7 @@ export declare const Accordion: ForwardRefExoticComponent<AccordionProps & RefAt
     Panel: ForwardRefExoticComponent< AccordionPanelProps & RefAttributes<HTMLDivElement>>;
 };
 
-declare interface AccordionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
+export declare interface AccordionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
     /** 헤더 제목 */
     children: ReactNode;
     /** 커스텀 클릭 핸들러 */
@@ -44,7 +45,7 @@ export declare interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivE
     children: ReactNode;
 }
 
-declare interface AccordionPanelProps extends HTMLAttributes<HTMLDivElement> {
+export declare interface AccordionPanelProps extends HTMLAttributes<HTMLDivElement> {
     /** 패널 내용 */
     children: ReactNode;
 }
@@ -77,7 +78,7 @@ declare type AccordionVariant = 'default' | 'line';
  */
 export declare const Badge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLSpanElement>>;
 
-declare type BadgeColor = 'primary' | 'secondary' | 'gray' | 'point' | 'danger' | 'warning' | 'success' | 'information' | 'disabled';
+export declare type BadgeColor = 'primary' | 'secondary' | 'gray' | 'point' | 'danger' | 'warning' | 'success' | 'information' | 'disabled';
 
 export declare interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'size'> {
     variant?: BadgeVariant;
@@ -87,9 +88,20 @@ export declare interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>
     children: React.ReactNode;
 }
 
-declare type BadgeSize = 'small' | 'medium' | 'large';
+export declare type BadgeSize = 'small' | 'medium' | 'large';
 
-declare type BadgeVariant = 'outline' | 'filled' | 'light';
+export declare type BadgeVariant = 'outline' | 'filled' | 'light';
+
+/**
+ * KRDS Badge Wrapper 컴포넌트
+ * @param children 배지 컴포넌트들
+ * @param className 추가 커스텀 클래스
+ */
+export declare const BadgeWrapper: ForwardRefExoticComponent<BadgeWrapperProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface BadgeWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
 
 declare interface BaseTagProps {
     /** 태그 텍스트 */
@@ -106,7 +118,7 @@ declare interface BaseTagProps {
  */
 export declare const Breadcrumb: default_2.ForwardRefExoticComponent<BreadcrumbProps & default_2.RefAttributes<HTMLElement>>;
 
-declare interface BreadcrumbItem {
+export declare interface BreadcrumbItem {
     /** 링크 텍스트 */
     text: string;
     /** 링크 URL */
@@ -139,9 +151,9 @@ export declare type ButtonProps<T extends ElementType = 'button'> = ButtonOwnPro
     as?: T;
 } & Omit<ComponentPropsWithRef<T>, keyof ButtonOwnProps>;
 
-declare type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export declare type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
-declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'text' | 'link' | 'icon';
+export declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'text' | 'link' | 'icon';
 
 /**
  * KRDS Calendar Component
@@ -164,9 +176,70 @@ declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'text' | 'li
  */
 export declare const Calendar: ForwardRefExoticComponent<CalendarProps & RefAttributes<HTMLDivElement>>;
 
-declare type CalendarMode = 'single' | 'range';
+export declare interface CalendarButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * 버튼 variant
+     */
+    variant?: 'icon' | 'move' | 'switch' | 'date' | 'action';
+    /**
+     * 활성 상태
+     */
+    isActive?: boolean;
+    /**
+     * 선택 상태
+     */
+    isSelected?: boolean;
+}
+
+export declare interface CalendarDate {
+    year: number;
+    month: number;
+    day: number;
+    isToday?: boolean;
+    isDisabled?: boolean;
+    isOld?: boolean;
+    isNew?: boolean;
+    isDayOff?: boolean;
+    hasEvent?: boolean;
+    isSelected?: boolean;
+    isStart?: boolean;
+    isEnd?: boolean;
+    isPeriod?: boolean;
+}
+
+export declare interface CalendarDropdownProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * 드롭다운 열림 상태
+     */
+    isOpen?: boolean;
+    /**
+     * 드롭다운 항목들
+     */
+    items?: CalendarYearMonth[];
+    /**
+     * 항목 선택 콜백
+     */
+    onItemSelect?: (item: CalendarYearMonth) => void;
+    /**
+     * 드롭다운 토글 콜백
+     */
+    onToggle?: () => void;
+}
+
+export declare interface CalendarInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    /**
+     * 달력 모드
+     */
+    mode?: CalendarMode;
+    /**
+     * 입력값 변경 콜백
+     */
+    onChange?: (value: string) => void;
+}
+
+export declare type CalendarMode = 'single' | 'range';
 
-declare type CalendarPosition = 'top' | 'bottom';
+export declare type CalendarPosition = 'top' | 'bottom';
 
 export declare interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**
@@ -319,6 +392,36 @@ export declare interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElemen
     readOnly?: boolean;
 }
 
+export declare interface CalendarTableProps extends HTMLAttributes<HTMLTableElement> {
+    /**
+     * 달력 데이터
+     */
+    dates?: CalendarDate[];
+    /**
+     * 달력 모드
+     */
+    mode?: CalendarMode;
+    /**
+     * 현재 년도
+     */
+    currentYear?: number;
+    /**
+     * 현재 월
+     */
+    currentMonth?: number;
+    /**
+     * 날짜 클릭 콜백
+     */
+    onDateClick?: (date: CalendarDate) => void;
+}
+
+export declare interface CalendarYearMonth {
+    value: number;
+    label: string;
+    isActive?: boolean;
+    isDisabled?: boolean;
+}
+
 /**
  * KRDS Checkbox Component
  * @param size 체크박스 크기 ('medium' | 'large')
@@ -472,6 +575,13 @@ export declare interface CriticalAlertItemProps {
     linkText?: string;
 }
 
+/**
+ * KRDS Critical Alert Component
+ * @param alerts alert 목록
+ * @param className custom class name
+ */
+export declare const CriticalAlerts: ForwardRefExoticComponent<CriticalAlertsProps & RefAttributes<HTMLDivElement>>;
+
 export declare interface CriticalAlertsProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * alert 목록
@@ -981,12 +1091,48 @@ export declare interface HeaderUtilityProps extends ComponentPropsWithoutRef<'li
     children?: ReactNode;
 }
 
+/**
+ * KRDS HelpCoachProcess Component
+ * @param children 코치 태스크들
+ * @param className 사용자 정의 클래스명
+ */
+export declare const HelpCoachProcess: default_2.ForwardRefExoticComponent<{
+    children?: default_2.ReactNode;
+    className?: string;
+} & default_2.RefAttributes<HTMLUListElement>>;
+
+/**
+ * KRDS HelpCoachTask Component
+ * @param title 태스크 제목
+ * @param isCurrent 현재 태스크 여부
+ * @param expandText 펼치기 버튼 텍스트
+ * @param steps 단계 목록
+ * @param className 사용자 정의 클래스명
+ */
+export declare const HelpCoachTask: default_2.ForwardRefExoticComponent<{
+    title: string;
+    isCurrent?: boolean;
+    expandText: string;
+    steps: string[];
+    className?: string;
+} & default_2.RefAttributes<HTMLLIElement>>;
+
 export declare interface HelpContent {
     title: string;
     description?: ReactNode;
     links?: HelpLink[];
 }
 
+/**
+ * KRDS HelpContentArea Component
+ * @param children 컨텐츠 영역 내용
+ * @param className 사용자 정의 클래스명
+ */
+export declare const HelpContentArea: default_2.ForwardRefExoticComponent<{
+    children?: default_2.ReactNode;
+    className?: string;
+} & default_2.RefAttributes<HTMLDivElement>>;
+
 export declare interface HelpLink {
     label: string;
     href: string;
@@ -995,6 +1141,26 @@ export declare interface HelpLink {
     external?: boolean;
 }
 
+/**
+ * KRDS HelpLinkList Component
+ * @param links 링크 목록
+ * @param iconPosition 아이콘 위치 ('left' | 'right')
+ * @param className 사용자 정의 클래스명
+ */
+export declare const HelpLinkList: default_2.ForwardRefExoticComponent<HelpLinkListProps & default_2.RefAttributes<HTMLUListElement>>;
+
+export declare interface HelpLinkListProps extends HTMLAttributes<HTMLUListElement> {
+    /** 링크 목록 */
+    links: Array<{
+        text: string;
+        href: string;
+        target?: string;
+        icon?: string;
+    }>;
+    /** 아이콘 위치 ('left' | 'right') */
+    iconPosition?: 'left' | 'right';
+}
+
 /**
  * KRDS HelpPanel Component
  * @param isOpen 도움말 패널 열림 상태
@@ -1004,11 +1170,36 @@ export declare interface HelpLink {
  */
 export declare const HelpPanel: default_2.ForwardRefExoticComponent<HelpPanelProps & default_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * KRDS HelpPanelAction Component
+ * @param children 액션 버튼들
+ * @param className 사용자 정의 클래스명
+ */
+export declare const HelpPanelAction: default_2.ForwardRefExoticComponent<{
+    children?: default_2.ReactNode;
+    className?: string;
+} & default_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * KRDS HelpPanelClose Component
+ * @param children 닫기 버튼 텍스트
+ * @param className 사용자 정의 클래스명
+ */
+export declare const HelpPanelClose: default_2.ForwardRefExoticComponent<HelpPanelCloseProps & default_2.RefAttributes<HTMLButtonElement>>;
+
 export declare interface HelpPanelCloseProps extends HTMLAttributes<HTMLButtonElement> {
     /** 닫기 버튼 텍스트 */
     children?: React.ReactNode;
 }
 
+/**
+ * KRDS HelpPanelContent Component
+ * @param children 도움말 패널 내용
+ * @param srOnlyTitle 스크린 리더 전용 제목
+ * @param className 사용자 정의 클래스명
+ */
+export declare const HelpPanelContent: default_2.ForwardRefExoticComponent<HelpPanelContentProps & default_2.RefAttributes<HTMLDivElement>>;
+
 export declare interface HelpPanelContentProps extends HTMLAttributes<HTMLDivElement> {
     /** 도움말 패널 내용 */
     children?: React.ReactNode;
@@ -1016,6 +1207,23 @@ export declare interface HelpPanelContentProps extends HTMLAttributes<HTMLDivEle
     srOnlyTitle?: string;
 }
 
+export declare interface HelpPanelContextValue {
+    /** 도움말 패널 열림 상태 */
+    isOpen: boolean;
+    /** 패널 열기 */
+    open: () => void;
+    /** 패널 닫기 */
+    close: () => void;
+    /** 패널 열림 상태 토글 */
+    toggle: () => void;
+    /** 패널 열림 상태 설정 */
+    setOpen: (isOpen: boolean) => void;
+    /** 패널 DOM id */
+    panelId: string;
+    /** 포커스를 복원할 대상 */
+    lastFocusedElementRef: MutableRefObject<HTMLElement | null>;
+}
+
 export declare interface HelpPanelProps extends HTMLAttributes<HTMLDivElement> {
     /** 도움말 패널 열림 상태 */
     isOpen?: boolean;
@@ -1027,11 +1235,70 @@ export declare interface HelpPanelProps extends HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
 }
 
+/**
+ * KRDS HelpPanelTrigger Component
+ * @param children 트리거 버튼 텍스트
+ * @param className 사용자 정의 클래스명
+ */
+export declare const HelpPanelTrigger: default_2.ForwardRefExoticComponent<HelpPanelTriggerProps & default_2.RefAttributes<HTMLButtonElement>>;
+
 export declare interface HelpPanelTriggerProps extends HTMLAttributes<HTMLButtonElement> {
     /** 트리거 버튼 텍스트 */
     children?: React.ReactNode;
 }
 
+/**
+ * KRDS HelpRelatedService Component
+ * @param children 관련 서비스 그룹들
+ * @param className 사용자 정의 클래스명
+ */
+export declare const HelpRelatedService: default_2.ForwardRefExoticComponent<{
+    children?: default_2.ReactNode;
+    className?: string;
+} & default_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * KRDS HelpSection Component
+ * @param title 섹션 제목
+ * @param description 섹션 설명
+ * @param children 섹션 내용
+ * @param className 사용자 정의 클래스명
+ */
+export declare const HelpSection: default_2.ForwardRefExoticComponent<HelpSectionProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface HelpSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /** 섹션 제목 */
+    title: string;
+    /** 섹션 설명 */
+    description?: string;
+    /** 섹션 내용 */
+    children?: React.ReactNode;
+}
+
+/**
+ * KRDS HelpServiceGroup Component
+ * @param title 서비스 그룹 제목
+ * @param children 서비스 그룹 내용
+ * @param className 사용자 정의 클래스명
+ */
+export declare const HelpServiceGroup: default_2.ForwardRefExoticComponent<{
+    title: string;
+    children?: default_2.ReactNode;
+    className?: string;
+} & default_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * KRDS HelpTutorialTitle Component
+ * @param title 따라하기 제목
+ * @param href 이전으로 돌아가기 링크
+ * @param className 사용자 정의 클래스명
+ */
+export declare const HelpTutorialTitle: default_2.ForwardRefExoticComponent<{
+    title: string;
+    href?: string;
+    className?: string;
+} & default_2.RefAttributes<HTMLHeadingElement>>;
+
 /**
  * KRDS Identifier 컴포넌트
  * @param logoAlt 로고 alt 텍스트
@@ -1139,7 +1406,7 @@ export declare interface LanguageSwitcherProps extends Omit<HTMLAttributes<HTMLD
  */
 export declare const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
 
-declare interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'size'> {
+export declare interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'size'> {
     /** 링크 스타일 타입 ('default' | 'basic') */
     variant?: LinkVariant;
     /** 밑줄 표시 여부 ('always' | 'hover' | 'none') */
@@ -1160,7 +1427,7 @@ declare interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>
     className?: string;
 }
 
-declare type LinkSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export declare type LinkSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 
 declare interface LinkTagProps extends BaseTagProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {
     /** 태그 타입 */
@@ -1169,9 +1436,9 @@ declare interface LinkTagProps extends BaseTagProps, Omit<AnchorHTMLAttributes<H
     href: string;
 }
 
-declare type LinkUnderline = 'always' | 'hover' | 'none';
+export declare type LinkUnderline = 'always' | 'hover' | 'none';
 
-declare type LinkVariant = 'default' | 'basic' | 'unstyled';
+export declare type LinkVariant = 'default' | 'basic' | 'unstyled';
 
 declare interface MainMenuBaseProps {
     desktop: DesktopMenuConfig;
@@ -1495,7 +1762,7 @@ declare type RadioSize = 'medium' | 'large';
  */
 export declare const Resize: default_2.ForwardRefExoticComponent<ResizeProps & default_2.RefAttributes<HTMLButtonElement>>;
 
-declare interface ResizeProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange'> {
+export declare interface ResizeProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange'> {
     /**
      * 현재 선택된 크기
      */
@@ -1532,11 +1799,11 @@ declare interface ResizeProps extends Omit<ButtonHTMLAttributes<HTMLButtonElemen
     className?: string;
 }
 
-declare type ResizeScale = 'sm' | 'md' | 'lg' | 'xlg' | 'xxlg';
+export declare type ResizeScale = 'sm' | 'md' | 'lg' | 'xlg' | 'xxlg';
 
 export declare const Select: default_2.FC<SelectProps>;
 
-declare interface SelectOption {
+export declare interface SelectOption {
     value: string;
     label: string;
 }
@@ -1562,9 +1829,9 @@ export declare interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelec
     variant?: SelectVariant;
 }
 
-declare type SelectSize = 'small' | 'medium' | 'large';
+export declare type SelectSize = 'small' | 'medium' | 'large';
 
-declare type SelectVariant = 'default' | 'sorting';
+export declare type SelectVariant = 'default' | 'sorting';
 
 export declare const SideNavigation: ForwardRefExoticComponent<SideNavigationProps & RefAttributes<HTMLElement>> & {
     Title: ForwardRefExoticComponent<SideNavigationTitleProps & RefAttributes<HTMLHeadingElement>>;
@@ -1747,7 +2014,7 @@ export declare interface StepIndicatorProps extends Omit<HTMLAttributes<HTMLOLis
     pageTitle?: string;
 }
 
-declare interface StepItem {
+export declare interface StepItem {
     /** 단계 번호 */
     step: string;
     /** 단계 제목 */
@@ -2003,7 +2270,7 @@ export declare interface TabListProps extends HTMLAttributes<HTMLUListElement> {
  */
 export declare const TabPanel: default_2.ForwardRefExoticComponent<TabPanelProps & default_2.RefAttributes<HTMLElement>>;
 
-declare interface TabPanelProps extends HTMLAttributes<HTMLElement> {
+export declare interface TabPanelProps extends HTMLAttributes<HTMLElement> {
     /** 탭 식별자 */
     value: string;
     /** 자식 컴포넌트 */
@@ -2061,6 +2328,24 @@ export declare const Tag: default_2.ForwardRefExoticComponent<TagProps & default
 
 export declare type TagProps = DeletableTagProps | LinkTagProps;
 
+export declare type TagSize = 'small' | 'medium' | 'large';
+
+/**
+ * KRDS TagWrap Component
+ * @param size tag group size ('small' | 'medium' | 'large')
+ * @param className custom class name
+ */
+export declare const TagWrap: default_2.ForwardRefExoticComponent<TagWrapProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TagWrapProps extends HTMLAttributes<HTMLDivElement> {
+    /** 태그들 */
+    children: ReactNode;
+    /** 태그 크기 */
+    size?: TagSize;
+    /** 커스텀 클래스명 */
+    className?: string;
+}
+
 /**
  * KRDS Textarea Component
  * @param value 제어 상태일 때 입력된 값
@@ -2111,7 +2396,7 @@ export declare interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLT
  */
 export declare const TextInput: ForwardRefExoticComponent<TextInputProps & RefAttributes<HTMLInputElement>>;
 
-declare interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'size'> {
+export declare interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'size'> {
     /** 입력 값이 변경될 때 호출되는 콜백 */
     onChange?: (value: string) => void;
     /** 레이블 */
@@ -2144,6 +2429,14 @@ declare interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputEleme
  */
 export declare const TextList: ForwardRefExoticComponent<TextListProps & RefAttributes<HTMLOListElement | HTMLUListElement>>;
 
+/**
+ * KRDS TextListItem Component
+ * @param children 자식 요소
+ * @param className 커스텀 클래스명
+ * @param number 번호 (ordered 타입에서 사용)
+ */
+export declare const TextListItem: ForwardRefExoticComponent<TextListItemProps & RefAttributes<HTMLLIElement>>;
+
 export declare interface TextListItemProps extends HTMLAttributes<HTMLLIElement> {
     /** 자식 요소 */
     children?: ReactNode;
@@ -2263,4 +2556,6 @@ export declare interface TutorialStep {
     content?: ReactNode;
 }
 
+export declare const useHelpPanelContext: () => HelpPanelContextValue | null;
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krds.ui/react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "대한민국 정부 디자인 시스템(KRDS) React 컴포넌트 라이브러리 - 공식 krds-react 1.1.1 포팅, 접근성 수정·자동 검사, Next.js App Router 지원",
   "keywords": [
     "krds",
@@ -55,18 +55,6 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "scripts": {
-    "build": "pnpm run type-check && vite build",
-    "type-check": "node node_modules/typescript7/bin/tsc --noEmit",
-    "ssr-smoke": "node scripts/ssr-smoke.mjs",
-    "lint": "oxlint",
-    "format": "oxfmt",
-    "test": "vitest",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs",
-    "prepublishOnly": "pnpm run build"
-  },
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0"
@@ -83,7 +71,7 @@
     "@vitejs/plugin-react": "^6.1.2",
     "@vitest/browser-playwright": "^4.1.12",
     "axe-core": "~4.14.0",
-    "oxfmt": "^0.73.0",
+    "oxfmt": "^0.74.0",
     "oxlint": "^1.89.0",
     "playwright": "^1.64.1",
     "react": "^18.3.1",
@@ -100,9 +88,19 @@
   "engines": {
     "node": ">=22.0.0"
   },
-  "packageManager": "pnpm@12.11.2",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "pnpm run type-check && vite build",
+    "type-check": "node node_modules/typescript7/bin/tsc --noEmit",
+    "ssr-smoke": "node scripts/ssr-smoke.mjs",
+    "lint": "oxlint",
+    "format": "oxfmt",
+    "test": "vitest",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   }
-}
+}