insystem-atoms 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,385 @@
+import React from 'react';
+
+/**
+ * 공통으로 사용되는 타입 정의
+ */
+/** 컴포넌트 크기 */
+type Size = 'sm' | 'md' | 'lg';
+/** 컴포넌트 상태 색상 변형 */
+type Variant = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'ghost';
+
+type ButtonVariant = Variant | 'admin' | 'neutral' | 'conversion' | 'icon';
+type ButtonSize = 'xs' | Size;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    fullWidth?: boolean;
+    width?: string | number;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    iconOnly?: boolean;
+    borderRadius?: string;
+    borderColor?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    padding?: string;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+    size?: Size;
+    error?: string;
+    hint?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    clearable?: boolean;
+    onClear?: () => void;
+    fullWidth?: boolean;
+    /** 고정 너비 (px 숫자 또는 CSS 문자열) */
+    width?: string | number;
+    label?: string;
+    required?: boolean;
+    /** border-radius 오버라이드 */
+    borderRadius?: string;
+    /** 기본 border-color 오버라이드 (포커스/에러 상태 제외) */
+    borderColor?: string;
+    /** 입력 텍스트 색상 오버라이드 */
+    textColor?: string;
+    /** 배경색 오버라이드 */
+    backgroundColor?: string;
+    /** 입력 영역 padding 오버라이드 */
+    padding?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    label?: React.ReactNode;
+    size?: Size;
+    indeterminate?: boolean;
+    error?: boolean;
+    /** 체크 활성 색상 (배경 + 테두리) */
+    checkColor?: string;
+    /** 비활성 테두리 색상 */
+    borderColor?: string;
+    /** 체크박스 border-radius */
+    borderRadius?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    label?: React.ReactNode;
+    size?: Size;
+    error?: boolean;
+    /** 선택 활성 색상 (테두리 + 내부 도트) */
+    checkColor?: string;
+    /** 비활성 테두리 색상 */
+    borderColor?: string;
+}
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+interface RadioOption {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    options: RadioOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    name: string;
+    size?: Size;
+    /** 방향: row(가로) | column(세로) | grid(격자) */
+    direction?: 'row' | 'column' | 'grid';
+    /** grid 방향일 때 열 수 (기본 3) */
+    gridColumns?: number;
+    /** 항목 간격 오버라이드 */
+    gap?: string;
+    disabled?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    checkColor?: string;
+    borderColor?: string;
+}
+declare const RadioGroup: React.FC<RadioGroupProps>;
+
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    options: SelectOption[];
+    placeholder?: string;
+    size?: Size;
+    /** 배경 스타일 변형: default(기본 흰 배경) | outlined(테두리 강조) | filled(회색 배경) */
+    variant?: 'default' | 'outlined' | 'filled';
+    error?: string;
+    hint?: string;
+    label?: string;
+    required?: boolean;
+    fullWidth?: boolean;
+    /** 고정 너비 (px 숫자 또는 CSS 문자열) */
+    width?: string | number;
+    borderRadius?: string;
+    borderColor?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    padding?: string;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+
+interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    size?: Size;
+    error?: string;
+    hint?: string;
+    label?: string;
+    required?: boolean;
+    fullWidth?: boolean;
+    /** 고정 너비 (px 숫자 또는 CSS 문자열) */
+    width?: string | number;
+    maxLength?: number;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    borderRadius?: string;
+    borderColor?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    padding?: string;
+}
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /** 필수 여부 (*표시) */
+    required?: boolean;
+    /** 선택 여부 (선택 표시) */
+    optional?: boolean;
+    /** 크기 */
+    size?: Size;
+    /** 비활성 상태 */
+    disabled?: boolean;
+}
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: Variant;
+    size?: Size;
+    outline?: boolean;
+    icon?: React.ReactNode;
+    dot?: boolean;
+    borderRadius?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface ChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 표시할 텍스트 */
+    label: string;
+    /** 활성 상태 */
+    active?: boolean;
+    /** 카운트 표시 (label 뒤에 붙음) */
+    count?: number;
+    /** 활성 상태 색상 (텍스트 + 테두리) */
+    activeColor?: string;
+    /** border-radius 오버라이드 */
+    borderRadius?: string;
+    /** 기본 테두리 색상 */
+    borderColor?: string;
+    /** 기본 텍스트 색상 */
+    textColor?: string;
+    /** 배경색 */
+    backgroundColor?: string;
+}
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface LoadingProps {
+    /** 스피너 크기 */
+    size?: Size | 'xs';
+    /** 스피너 아래 텍스트 */
+    text?: string;
+    /** 전체 화면 오버레이 모드 */
+    fullscreen?: boolean;
+    /** 스피너 색상 오버라이드 */
+    color?: string;
+    /** 배경 오버레이 색상 (fullscreen 모드) */
+    overlayColor?: string;
+}
+declare const Loading: React.FC<LoadingProps>;
+
+interface PaginationProps {
+    /** 현재 페이지 (1-based) */
+    currentPage: number;
+    /** 전체 페이지 수 */
+    totalPages: number;
+    /** 페이지 변경 콜백 */
+    onPageChange: (page: number) => void;
+    /** 표시할 최대 페이지 버튼 수 (기본 5) */
+    maxVisible?: number;
+    /** 활성 페이지 버튼 색상 */
+    activeColor?: string;
+    /** 버튼 border-radius */
+    borderRadius?: string;
+}
+declare const Pagination: React.FC<PaginationProps>;
+
+type ToastType = 'info' | 'success' | 'error' | 'warning';
+interface ToastProps {
+    /** 메시지 내용 */
+    message: string;
+    /** 토스트 타입 (아이콘/색상 결정) */
+    type?: ToastType;
+    /** 자동 닫힘 시간 (ms, 0이면 자동 닫힘 없음) */
+    duration?: number;
+    /** 닫기 콜백 */
+    onClose: () => void;
+    /** 토스트 위치 */
+    position?: 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';
+    backgroundColor?: string;
+    textColor?: string;
+    borderRadius?: string;
+}
+declare const Toast: React.FC<ToastProps>;
+
+/**
+ * insystem-atoms 디자인 토큰
+ *
+ * ─── 소비자 오버라이드 방법 ───────────────────────────────────────────────
+ *
+ * 1) 앱 진입점에서 렌더링 전에 한 번만 호출:
+ *
+ *   import { configureTokens } from 'insystem-atoms';
+ *
+ *   configureTokens({
+ *     color: {
+ *       primary:     '#a44945',   // 브랜드 메인 색상
+ *       primaryHover:'#8a3d3a',
+ *       primaryLight:'#fff0ef',
+ *     },
+ *     font: {
+ *       family: "'NanumSquareNeo', sans-serif",
+ *     },
+ *     radius: {
+ *       md: '10px',               // 버튼/인풋 기본 radius
+ *     },
+ *   });
+ *
+ * 2) 오버라이드 가능한 최상위 키 목록:
+ *    color.primary / color.primaryHover / color.primaryLight
+ *    color.secondary / color.secondaryHover / color.secondaryLight
+ *    color.success / color.successLight
+ *    color.warning / color.warningLight
+ *    color.danger  / color.dangerHover / color.dangerLight
+ *    color.text.*  / color.border.*    / color.background.*
+ *    font.family   / font.size.*       / font.weight.*
+ *    spacing.*     / radius.*          / shadow.*  / transition.*
+ *
+ * 주의: configureTokens 는 렌더링 전에 호출해야 합니다.
+ *       렌더링 후 호출 시 styled-components CSS 캐시로 인해 적용이 보장되지 않습니다.
+ */
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+interface Tokens {
+    color: {
+        /** 브랜드 메인 색상 — 가장 자주 오버라이드 */
+        primary: string;
+        primaryHover: string;
+        /** primary 10% 투명도 배경 (Badge, 포커스 링 등) */
+        primaryLight: string;
+        secondary: string;
+        secondaryHover: string;
+        secondaryLight: string;
+        success: string;
+        successLight: string;
+        warning: string;
+        warningLight: string;
+        danger: string;
+        dangerHover: string;
+        dangerLight: string;
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+            inverse: string;
+            placeholder: string;
+            error: string;
+            hint: string;
+        };
+        border: {
+            default: string;
+            /** 포커스 테두리 — 보통 primary 와 동일하게 오버라이드 */
+            focus: string;
+            error: string;
+            disabled: string;
+        };
+        background: {
+            default: string;
+            disabled: string;
+            hover: string;
+            subtle: string;
+        };
+    };
+    font: {
+        size: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+        };
+        weight: {
+            regular: number;
+            medium: number;
+            semibold: number;
+        };
+        /** 폰트 패밀리 — 프로젝트 폰트로 오버라이드 */
+        family: string;
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+    radius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    shadow: {
+        sm: string;
+        md: string;
+        lg: string;
+        popup: string;
+        modal: string;
+        field: string;
+        card: string;
+    };
+    transition: {
+        fast: string;
+        base: string;
+        slow: string;
+    };
+}
+declare const defaultTokens: Tokens;
+/**
+ * 토큰 값을 오버라이드합니다.
+ * 앱 렌더링 전(예: main.tsx 최상단)에 호출해야 합니다.
+ *
+ * @example
+ * configureTokens({
+ *   color: { primary: '#a44945', primaryHover: '#8a3d3a', primaryLight: '#fff0ef' },
+ *   font: { family: "'NanumSquareNeo', sans-serif" },
+ * });
+ */
+declare function configureTokens(overrides: DeepPartial<Tokens>): void;
+/**
+ * 토큰을 기본값으로 초기화합니다.
+ */
+declare function resetTokens(): void;
+
+export { Badge, type BadgeProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type DeepPartial, Input, type InputProps, Label, type LabelProps, Loading, type LoadingProps, Pagination, type PaginationProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectOption, type SelectProps, type Size, TextArea, type TextAreaProps, Toast, type ToastProps, type ToastType, type Tokens, type Variant, configureTokens, defaultTokens, resetTokens };