@idbrnd/design-system 1.0.0

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

@@ -0,0 +1,10 @@
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
+export type BasicIconButtonSize = 'large' | 'small';
+export interface BasicIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+    size?: BasicIconButtonSize;
+    keepFocusOnClick?: boolean;
+    customStyle?: CSSProperties;
+    children?: ReactNode;
+}
+declare function BasicIconButton({ size, disabled, keepFocusOnClick, customStyle, onClick, className, children, type, ...rest }: BasicIconButtonProps): import("react/jsx-runtime").JSX.Element;
+export default BasicIconButton;

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

@@ -0,0 +1,15 @@
+import { type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from 'react';
+export type FillButtonWidthType = 'fixed' | 'flexible';
+export type FillButtonVariant = 'primary' | 'assistive' | 'error';
+export type FillButtonSize = 'large' | 'medium' | 'small' | 'xsmall';
+export interface FillButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+    widthType?: FillButtonWidthType;
+    variant?: FillButtonVariant;
+    size?: FillButtonSize;
+    loading?: boolean;
+    keepFocusOnClick?: boolean;
+    customStyle?: CSSProperties;
+    children?: ReactNode;
+}
+declare function FillButton({ widthType, variant, size, disabled, loading, keepFocusOnClick, customStyle, onClick, className, children, type, ...rest }: FillButtonProps): import("react/jsx-runtime").JSX.Element;
+export default FillButton;

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

@@ -0,0 +1,12 @@
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
+export type FillIconButtonVariant = 'basic' | 'overlay' | 'primary';
+export type FillIconButtonSize = 'large' | 'medium';
+export interface FillIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+    variant?: FillIconButtonVariant;
+    size?: FillIconButtonSize;
+    keepFocusOnClick?: boolean;
+    customStyle?: CSSProperties;
+    children?: ReactNode;
+}
+declare function FillIconButton({ variant, size, disabled, keepFocusOnClick, customStyle, onClick, children, type, ...rest }: FillIconButtonProps): import("react/jsx-runtime").JSX.Element;
+export default FillIconButton;

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

@@ -0,0 +1,15 @@
+import { type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from 'react';
+export type OutlineButtonWidthType = 'fixed' | 'flexible';
+export type OutlineButtonVariant = 'primary' | 'assistive' | 'secondary';
+export type OutlineButtonSize = 'large' | 'medium' | 'small' | 'xsmall';
+export interface OutlineButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+    widthType?: OutlineButtonWidthType;
+    variant?: OutlineButtonVariant;
+    size?: OutlineButtonSize;
+    loading?: boolean;
+    keepFocusOnClick?: boolean;
+    customStyle?: CSSProperties;
+    children?: ReactNode;
+}
+declare function OutlineButton({ widthType, variant, size, disabled, loading, keepFocusOnClick, customStyle, onClick, className, children, type, ...rest }: OutlineButtonProps): import("react/jsx-runtime").JSX.Element;
+export default OutlineButton;

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

@@ -0,0 +1,10 @@
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
+export type OutlineIconButtonSize = 'large' | 'medium';
+export interface OutlineIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+    size?: OutlineIconButtonSize;
+    keepFocusOnClick?: boolean;
+    customStyle?: CSSProperties;
+    children?: ReactNode;
+}
+declare function OutlineIconButton({ size, disabled, keepFocusOnClick, customStyle, onClick, children, type, ...rest }: OutlineIconButtonProps): import("react/jsx-runtime").JSX.Element;
+export default OutlineIconButton;

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

@@ -0,0 +1,15 @@
+import { type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from 'react';
+export type TextButtonWidthType = 'fixed' | 'flexible';
+export type TextButtonVariant = 'primary' | 'assistive' | 'secondary';
+export type TextButtonSize = 'large' | 'medium' | 'small' | 'xsmall';
+export interface TextButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+    widthType?: TextButtonWidthType;
+    variant?: TextButtonVariant;
+    size?: TextButtonSize;
+    loading?: boolean;
+    keepFocusOnClick?: boolean;
+    customStyle?: CSSProperties;
+    children?: ReactNode;
+}
+declare function TextButton({ widthType, variant, size, disabled, loading, keepFocusOnClick, customStyle, onClick, className, children, type, ...rest }: TextButtonProps): import("react/jsx-runtime").JSX.Element;
+export default TextButton;

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

@@ -0,0 +1,15 @@
+import { type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from 'react';
+export type WeakButtonWidthType = 'fixed' | 'flexible';
+export type WeakButtonVariant = 'primary' | 'assistive' | 'error';
+export type WeakButtonSize = 'large' | 'medium' | 'small' | 'xsmall';
+export interface WeakButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+    widthType?: WeakButtonWidthType;
+    variant?: WeakButtonVariant;
+    size?: WeakButtonSize;
+    loading?: boolean;
+    keepFocusOnClick?: boolean;
+    customStyle?: CSSProperties;
+    children?: ReactNode;
+}
+declare function WeakButton({ widthType, variant, size, disabled, loading, keepFocusOnClick, customStyle, onClick, className, children, type, ...rest }: WeakButtonProps): import("react/jsx-runtime").JSX.Element;
+export default WeakButton;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,25 @@
+import type { InputProps } from './Input.types';
+export type { InputProps, InputSize, InputVariant, InputType } from './Input.types';
+declare function Input({ type, // input HTML 타입
+designType, // 인풋 외형 타입
+size, // 인풋 높이 크기
+variant, // 상태 variant
+width, // 루트 너비
+heading, // 라벨 표시 여부
+headingContent, // 라벨 내용
+required, // 라벨 우측 *
+description, // 하단 안내 문구
+fixedDescriptionHeight, // 하단 문구 영역 높이 고정 여부
+errorMessage, // 에러 상태 문구
+leadingIcon, // 좌측 아이콘 슬롯
+trailingContent, // 우측 trailing 슬롯 콘텐츠
+customStyle, // 루트 커스텀 스타일
+id, // input id
+onFocus, // 포커스 진입 핸들러
+onBlur, // 포커스 이탈 핸들러
+onChange, // 값 변경 핸들러
+value, // 현재 값
+disabled, // 전체 비활성화 여부
+readOnly, // 읽기 전용 여부
+...rest }: InputProps): import("react/jsx-runtime").JSX.Element;
+export default Input;

package/dist/components/Input/Input.types.d.ts

@@ -0,0 +1,103 @@
+import type { CSSProperties, HTMLInputTypeAttribute, InputHTMLAttributes, ReactNode } from 'react';
+/**
+ * Input 컨테이너의 시각 스타일 타입.
+ * @defaultValue `'outline'`
+ */
+export type InputType = 'outline' | 'fill';
+/**
+ * Input 높이 타입.
+ * @defaultValue `'default'`
+ */
+export type InputSize = 'default' | 'small';
+/**
+ * Input 상태 variant 타입.
+ * - `basic`: 기본 상태
+ * - `error`: 에러 상태
+ * - `onTyping`: 입력 중 상태
+ * - `typed`: 값이 입력된 상태
+ * - `onFocus`: 포커스 상태
+ * - `success`: 성공 상태
+ */
+export type InputVariant = 'basic' | 'error' | 'onTyping' | 'typed' | 'onFocus' | 'success';
+/** `Input` 컴포넌트 public props. */
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'style' | 'type' | 'width' | 'required' | 'className' | 'defaultValue' | 'value'> {
+    /**
+     * 실제 HTML input 타입.
+     * (`text`, `password`, `number`, `email` 등)
+     * @defaultValue `'text'`
+     */
+    type?: HTMLInputTypeAttribute;
+    /**
+     * Input 컨테이너 외형 타입.
+     * @defaultValue `'outline'`
+     */
+    designType?: InputType;
+    /**
+     * Input 높이.
+     * - `default`: 44px
+     * - `small`: 40px
+     * @defaultValue `'default'`
+     */
+    size?: InputSize;
+    /**
+     * Input 상태 variant.
+     * 미지정 시 내부 상호작용(포커스/입력/값 존재 여부)으로 자동 계산한다.
+     */
+    variant?: InputVariant;
+    /**
+     * 루트 너비.
+     * 미지정 시 `100%`가 적용된다.
+     */
+    width?: number | string;
+    /**
+     * Input 값.
+     * 이 컴포넌트는 controlled 방식만 지원하므로 필수로 전달해야 한다.
+     */
+    value: Exclude<InputHTMLAttributes<HTMLInputElement>['value'], undefined>;
+    /**
+     * 상단 heading(라벨) 표시 여부.
+     * @defaultValue `true`
+     */
+    heading?: boolean;
+    /**
+     * 상단 heading(라벨) 텍스트/노드.
+     * @defaultValue `'Label'`
+     */
+    headingContent?: ReactNode;
+    /**
+     * 필수 입력 여부.
+     * `true`면 input의 `required` 속성을 적용하고, heading 노출 시 `*`를 함께 표시한다.
+     * @defaultValue `false`
+     */
+    required?: boolean;
+    /**
+     * 하단 안내 문구
+     * - `false`: 안내 문구 없음
+     * - `true`: 기본 안내 문구 사용
+     * - `ReactNode`: 커스텀 안내 문구 사용
+     *
+     * 주의:
+     * - `variant === 'error'`이면 description 대신 에러 문구가 우선 노출된다.
+     * @defaultValue `false`
+     */
+    description?: ReactNode | boolean;
+    /**
+     * helper 영역(안내/에러 문구)의 높이를 고정할지 여부
+     * - `true`(기본): 메시지 토글 시 레이아웃 점프 방지
+     * - `false`: 메시지가 없으면 helper 영역 자체를 제거
+     * @defaultValue `true`
+     */
+    fixedDescriptionHeight?: boolean;
+    /**
+     * 에러 문구.
+     * `variant === 'error'`일 때 사용된다.
+     * 미지정 시 기본 에러 문구를 표시한다.
+     */
+    errorMessage?: ReactNode;
+    /** 입력창 좌측에 표시할 leading 아이콘 */
+    leadingIcon?: ReactNode;
+    /** 우측 trailing 슬롯에 렌더링할 콘텐츠 */
+    trailingContent?: ReactNode;
+    /** 루트 컨테이너에 적용할 추가 style */
+    customStyle?: CSSProperties;
+}

package/dist/components/Input/InputTrailing.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+interface InputTrailingProps {
+    content?: ReactNode;
+    disabled?: boolean;
+}
+declare function InputTrailing({ content, disabled }: InputTrailingProps): import("react/jsx-runtime").JSX.Element | null;
+export default InputTrailing;

package/dist/components/Input/useInputState.d.ts

@@ -0,0 +1,18 @@
+import { type ChangeEvent, type FocusEvent } from 'react';
+import type { InputProps } from './Input.types';
+interface UseInputStateParams {
+    value: InputProps['value'];
+    onFocus: InputProps['onFocus'];
+    onBlur: InputProps['onBlur'];
+    onChange: InputProps['onChange'];
+}
+export interface UseInputStateResult {
+    currentValue: InputProps['value'];
+    isFocused: boolean;
+    isTyping: boolean;
+    handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
+    handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
+    handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+export default function useInputState({ value, onFocus, onBlur, onChange }: UseInputStateParams): UseInputStateResult;
+export {};

package/dist/components/PushBadge/PushBadge.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from 'react';
+export type PushBadgeVariant = 'dot' | 'number' | 'info';
+export interface PushBadgeProps {
+    variant?: PushBadgeVariant;
+    count?: number;
+    bgColor?: string;
+    color?: string;
+    disabled?: boolean;
+    customStyle?: CSSProperties;
+    className?: string;
+}
+declare function PushBadge({ variant, count, bgColor, color, disabled, customStyle, className }: PushBadgeProps): import("react/jsx-runtime").JSX.Element | null;
+export default PushBadge;

package/dist/components/SearchBar/SearchBar.d.ts

@@ -0,0 +1,31 @@
+import type { InputProps, InputSize } from '../Input/Input';
+export type SearchBarSize = InputSize;
+export interface SearchBarProps extends Omit<InputProps, 'type' | 'value' | 'onChange'> {
+    value: string;
+    onChange: NonNullable<InputProps['onChange']>;
+    onSearch: (value: string) => void;
+}
+declare function SearchBar({ value, // 검색어 값
+onChange, // 입력 변경 핸들러
+onSearch, // 검색 실행 핸들러
+size, // 인풋 크기
+width, // 컴포넌트 너비
+designType, // 인풋 외형 타입
+heading, // 라벨 표시 여부
+headingContent, // 라벨 내용
+variant, // 인풋 상태 variant
+description, // 하단 안내 문구
+fixedDescriptionHeight, // 하단 문구 영역 높이 고정 여부
+disabled, // 전체 비활성화 여부
+readOnly, // 읽기 전용 여부
+id, // input id
+name, // input name
+placeholder, // placeholder 텍스트
+leadingIcon, // 좌측 아이콘 슬롯
+maxLength, // 최대 입력 길이
+required, // 필수 입력 여부
+errorMessage, // 에러 상태 문구
+onBlur, // 포커스 이탈 핸들러
+onKeyDown, // 키다운 핸들러
+...inputRestProps }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export default SearchBar;

package/dist/components/Snackbar/Snackbar.d.ts

@@ -0,0 +1,14 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type SnackbarVariant = 'basic' | 'loading';
+export interface SnackbarShowOptions {
+    variant?: SnackbarVariant;
+    heading?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    actionLabel?: ReactNode;
+    onActionClick?: () => void;
+    closeButton?: boolean;
+    customStyle?: CSSProperties;
+}
+export declare function showSnackbar({ variant, heading, description, icon, actionLabel, onActionClick, closeButton, customStyle }: SnackbarShowOptions): void;
+export declare function dismissSnackbar(): void;

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,20 @@
+export interface CustomSpinnerProps {
+    color?: string;
+    size?: number;
+}
+export interface ClipProps {
+    color?: string;
+    size?: number;
+    text?: string;
+}
+export interface FadeSpinnerProps {
+    color?: string;
+    width?: number;
+    height?: number;
+    radius?: number;
+    margin?: number;
+}
+export default function Spinner(): import("react/jsx-runtime").JSX.Element;
+export declare function CustomSpinner({ color, size }: CustomSpinnerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Clip({ color, size, text }: ClipProps): import("react/jsx-runtime").JSX.Element;
+export declare function FadeSpinner({ color, width, height, radius, margin }: FadeSpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,10 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type ToastVariant = 'basic' | 'positive' | 'negative';
+export interface ToastShowOptions {
+    message: ReactNode;
+    variant?: ToastVariant;
+    customStyle?: CSSProperties;
+    icon?: ReactNode;
+}
+export declare function showToast({ message, variant, customStyle, icon }: ToastShowOptions): void;
+export declare function dismissToast(): void;

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+import './styles/variables.css';
+import './styles/font-metrics.css';
+export { default as BasicIconButton } from './components/Button/BasicIcon/BasicIconButton';
+export { default as FillButton } from './components/Button/Fill/FillButton';
+export { default as FillIconButton } from './components/Button/FillIcon/FillIconButton';
+export { default as Input } from './components/Input/Input';
+export { default as OutlineButton } from './components/Button/Outline/OutlineButton';
+export { default as OutlineIconButton } from './components/Button/OutlineIcon/OutlineIconButton';
+export { default as PushBadge } from './components/PushBadge/PushBadge';
+export { default as SearchBar } from './components/SearchBar/SearchBar';
+export { dismissSnackbar, showSnackbar } from './components/Snackbar/Snackbar';
+export { default as Spinner, Clip, CustomSpinner, FadeSpinner } from './components/Spinner/Spinner';
+export { dismissToast, showToast } from './components/Toast/Toast';
+export { default as TextButton } from './components/Button/Text/TextButton';
+export { default as WeakButton } from './components/Button/Weak/WeakButton';
+export type { BasicIconButtonProps, BasicIconButtonSize } from './components/Button/BasicIcon/BasicIconButton';
+export type { FillButtonProps, FillButtonSize, FillButtonVariant, FillButtonWidthType } from './components/Button/Fill/FillButton';
+export type { FillIconButtonProps, FillIconButtonSize, FillIconButtonVariant } from './components/Button/FillIcon/FillIconButton';
+export type { InputProps, InputSize, InputType, InputVariant } from './components/Input/Input';
+export type { PushBadgeProps, PushBadgeVariant } from './components/PushBadge/PushBadge';
+export type { SearchBarProps, SearchBarSize } from './components/SearchBar/SearchBar';
+export type { SnackbarShowOptions, SnackbarVariant } from './components/Snackbar/Snackbar';
+export type { ClipProps, CustomSpinnerProps, FadeSpinnerProps } from './components/Spinner/Spinner';
+export type { ToastShowOptions, ToastVariant } from './components/Toast/Toast';
+export type { OutlineButtonProps, OutlineButtonSize, OutlineButtonVariant, OutlineButtonWidthType } from './components/Button/Outline/OutlineButton';
+export type { OutlineIconButtonProps, OutlineIconButtonSize } from './components/Button/OutlineIcon/OutlineIconButton';
+export type { TextButtonProps, TextButtonSize, TextButtonVariant, TextButtonWidthType } from './components/Button/Text/TextButton';
+export type { WeakButtonProps, WeakButtonSize, WeakButtonVariant, WeakButtonWidthType } from './components/Button/Weak/WeakButton';