@won-ui/core/dist/index.d.ts

학습을 위한 ui library 입니다.

import * as _emotion_react_jsx_dev_runtime from '@emotion/react/jsx-dev-runtime';
import { ButtonHTMLAttributes, CSSProperties, PropsWithChildren, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';

declare type Override<T, K> = K & Omit<T, keyof K>;

interface UsePaginationProps {
    defaultPage?: number;
    currentPage?: number;
    onChange?: (page: number, pageSize: number) => void;
    defaultPageSize?: number;
    pageSizeOptions?: number[];
    pagesGap?: number;
    total: number;
    hasMoreButton?: boolean;
}

declare type Colors = 'black' | 'red' | 'orange' | 'magenta' | 'yellow' | 'blue' | 'indigo' | 'purple' | 'cyan' | 'teal' | 'green';

declare type ButtonVariant = 'filled' | 'light' | 'outline' | 'borderless';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    className?: string;
    style?: CSSProperties;
    disabled?: boolean;
    color?: Colors;
    variant?: ButtonVariant;
}
declare function Button({ className, type, disabled, color, children, variant, ...restProps }: PropsWithChildren<ButtonProps>): _emotion_react_jsx_dev_runtime.JSX.Element;
declare namespace Button {
    var displayName: string;
}

interface CheckboxProps {
    className?: string;
    style?: CSSProperties;
    id?: string;
    label: ReactNode;
    disabled?: boolean;
    color?: Colors;
}
declare function Checkbox({ className, id, label, disabled, color, ...restProps }: CheckboxProps): _emotion_react_jsx_dev_runtime.JSX.Element;
declare namespace Checkbox {
    var displayName: string;
}

interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
    level?: 1 | 2 | 3 | 4 | 5 | 6;
}
declare function Heading({ level, children, ...restProps }: PropsWithChildren<HeadingProps>): _emotion_react_jsx_dev_runtime.JSX.Element;
declare namespace Heading {
    var displayName: string;
}

interface IconActivatorProps extends HTMLAttributes<HTMLButtonElement> {
    className?: string;
    style?: CSSProperties;
    color?: Colors;
    hasBorder?: boolean;
}
declare function IconActivator({ className, style, color, children, hasBorder, ...restProps }: PropsWithChildren<IconActivatorProps>): _emotion_react_jsx_dev_runtime.JSX.Element;
declare namespace IconActivator {
    var displayName: string;
}

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
    style?: CSSProperties;
    error?: boolean;
    icon?: ReactNode;
}
declare function Input({ className, style, error, icon, ...restProps }: InputProps): _emotion_react_jsx_dev_runtime.JSX.Element;
declare namespace Input {
    var displayName: string;
}

interface InputBoxProps {
    className?: string;
    style?: CSSProperties;
    /**
     * label 연결시에 필요하므로 필수 prop
     */
    id: string;
    label?: string;
    helperText?: string;
    errorText?: string;
    required?: boolean;
}
declare function InputBox({ className, id, label, helperText, errorText, required, children, ...restProps }: PropsWithChildren<InputBoxProps>): _emotion_react_jsx_dev_runtime.JSX.Element;
declare namespace InputBox {
    var displayName: string;
}

interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
    title?: ReactNode;
    isOpen?: boolean;
    onClose?: () => void;
    overlayOptions?: {
        opacity?: number;
        blur?: number;
    };
    modalOptions?: {
        width?: number;
    };
}
declare function Modal({ title, isOpen, onClose, className, modalOptions, overlayOptions, children, }: PropsWithChildren<ModalProps>): _emotion_react_jsx_dev_runtime.JSX.Element | null;
declare namespace Modal {
    var displayName: string;
}

interface OverlayProps extends HTMLAttributes<HTMLDivElement> {
    opacity?: number;
    blur?: number;
}
declare function Overlay({ opacity, blur, ...restProps }: {
    [x: string]: any;
    opacity?: number | undefined;
    blur?: number | undefined;
}): _emotion_react_jsx_dev_runtime.JSX.Element;
declare namespace Overlay {
    var displayName: string;
}

interface PaginationProps extends UsePaginationProps {
    color?: Colors;
    position?: 'left' | 'right' | 'center';
}
declare function Pagination(props: PaginationProps): _emotion_react_jsx_dev_runtime.JSX.Element;
declare namespace Pagination {
    var displayName: string;
}

interface StackProps extends HTMLAttributes<HTMLDivElement> {
    direction?: CSSProperties['flexDirection'];
    align?: CSSProperties['alignItems'];
    justify?: CSSProperties['justifyContent'];
    className?: string;
    style?: CSSProperties;
}
declare function Stack({ className, direction, align, justify, children, ...restProps }: PropsWithChildren<StackProps>): _emotion_react_jsx_dev_runtime.JSX.Element;
declare namespace Stack {
    var displayName: string;
}

interface SwitchProps {
    className?: string;
    style?: CSSProperties;
    label?: ReactNode;
    id?: string;
    color?: Colors;
}
declare function Switch({ id, label, color, ...restProps }: SwitchProps): _emotion_react_jsx_dev_runtime.JSX.Element;
declare namespace Switch {
    var displayName: string;
}

interface TagProps {
    className?: string;
    style?: CSSProperties;
    color?: Colors;
    type?: 'light' | 'filled' | 'outline';
}
declare function Tag({ className, color, children, type, ...props }: PropsWithChildren<TagProps>): _emotion_react_jsx_dev_runtime.JSX.Element;
declare namespace Tag {
    var displayName: string;
}

interface TextProps {
    className?: string;
    style?: CSSProperties;
    as?: keyof JSX.IntrinsicElements;
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    color?: Colors;
}
declare function Text({ className, as: Component, size, children, color, ...restProps }: PropsWithChildren<TextProps>): _emotion_react_jsx_dev_runtime.JSX.Element;
declare namespace Text {
    var displayName: string;
}

interface TextInputProps extends Omit<Override<InputProps, InputBoxProps>, 'id' | 'onChange'> {
    type?: InputHTMLAttributes<HTMLInputElement>['inputMode'];
    id?: string;
    value?: string;
    onChange?: (value: string) => void;
    style?: CSSProperties;
    icon?: ReactNode;
}
declare function TextInput({ className, id, type, label, errorText, helperText, value, onChange, required, icon, ...restProps }: TextInputProps): _emotion_react_jsx_dev_runtime.JSX.Element;
declare namespace TextInput {
    var displayName: string;
}

export { Button, ButtonProps, Checkbox, Heading, HeadingProps, IconActivator, Input, InputBox, InputBoxProps, InputProps, Modal, ModalProps, Overlay, OverlayProps, Pagination, PaginationProps, Stack, Switch, Tag, Text, TextInput, TextInputProps, TextProps };