@pylerai/design-system 1.1.0

package/dist/components/ui/label.d.ts

@@ -0,0 +1,15 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const labelVariants: (props?: ({
+    variant?: "label-1-r" | null | undefined;
+    as?: "p" | "span" | "label" | "div" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface LabelProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof labelVariants> {
+    /** 렌더링할 HTML 태그. 기본값: "label" */
+    as?: "label" | "span" | "div" | "p";
+    /** HTML label 요소의 for 속성 (as="label"일 때 사용) */
+    htmlFor?: string;
+    asChild?: boolean;
+}
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLElement>>;
+export { Label, labelVariants };

package/dist/components/ui/loading-bar.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface LoadingBarProps {
+    size?: "sm" | "md" | "lg" | "xl";
+    label?: string;
+    className?: string;
+}
+declare const LoadingBar: React.ForwardRefExoticComponent<LoadingBarProps & React.RefAttributes<HTMLDivElement>>;
+export { LoadingBar };

package/dist/components/ui/modal.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+export interface InformationModalProps {
+    open: boolean;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** 확인 버튼 텍스트. 기본값: "확인" */
+    confirmLabel?: string;
+    onConfirm?: () => void;
+    onClose: () => void;
+    className?: string;
+}
+declare function InformationModal({ open, title, description, confirmLabel, onConfirm, onClose, className, }: InformationModalProps): React.ReactPortal | null;
+export interface ActionModalProps {
+    open: boolean;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** 취소 버튼 텍스트. 기본값: "닫기" */
+    cancelLabel?: string;
+    /** 확인 버튼 텍스트. 기본값: "확인" */
+    confirmLabel?: string;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    onClose: () => void;
+    className?: string;
+}
+declare function ActionModal({ open, title, description, cancelLabel, confirmLabel, onCancel, onConfirm, onClose, className, }: ActionModalProps): React.ReactPortal | null;
+export type ContentModalSize = "large" | "medium" | "small";
+export interface ContentModalProps {
+    open: boolean;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** 모달 크기. 기본값: "small" */
+    size?: ContentModalSize;
+    /** 취소 버튼 텍스트. 기본값: "닫기" */
+    cancelLabel?: string;
+    /** 확인 버튼 텍스트. 기본값: "확인" */
+    confirmLabel?: string;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    onClose: () => void;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function ContentModal({ open, title, description, size, cancelLabel, confirmLabel, onCancel, onConfirm, onClose, children, className, }: ContentModalProps): React.ReactPortal | null;
+export { InformationModal, ActionModal, ContentModal };

package/dist/components/ui/pagination.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export interface PaginationProps {
+    /** 현재 페이지 (1-indexed) */
+    page: number;
+    /** 전체 페이지 수 */
+    totalPages: number;
+    /** 페이지 변경 핸들러 */
+    onPageChange: (page: number) => void;
+    /** TOP 버튼 표시 여부. 기본값: false */
+    showTopButton?: boolean;
+    /** TOP 버튼 클릭 핸들러 */
+    onTopClick?: () => void;
+    className?: string;
+}
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
+export { Pagination };

package/dist/components/ui/radio.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+    /** 선택 시 value를 전달하는 핸들러 */
+    onChange?: (value: string) => void;
+}
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export { Radio };

package/dist/components/ui/search-field.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export interface SearchFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** 라벨 텍스트 */
+    label?: string;
+    /** 라벨 표시 여부. 기본값: true */
+    showLabel?: boolean;
+    /** 검색 아이콘 표시 여부. 기본값: true */
+    showIcon?: boolean;
+    /** 크기. 기본값: "large" */
+    size?: "large" | "medium" | "small";
+    /** 에러 메시지. 표시 시 필드에 빨간 테두리 적용 */
+    error?: string;
+    /** 필드 하단 힌트 텍스트 */
+    hint?: string;
+    /** 지우기 버튼 클릭 핸들러. 정의 시 지우기 버튼 표시 */
+    onClear?: () => void;
+    /** 외부 컨테이너 className */
+    wrapperClassName?: string;
+}
+declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
+export { SearchField };

package/dist/components/ui/table.d.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+declare const TableRoot: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+interface TableRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    hoverable?: boolean;
+    selected?: boolean;
+}
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLDivElement>>;
+export interface TableHeaderCellProps extends React.HTMLAttributes<HTMLDivElement> {
+    sortable?: boolean;
+    sortDirection?: "asc" | "desc" | null;
+    onSort?: () => void;
+    /** 헤더에 info 아이콘 표시 */
+    info?: boolean;
+    /** 오른쪽에 고정 구분선(3px 보더) 표시 */
+    fixedLine?: boolean;
+    align?: "left" | "right";
+    /** px 숫자 또는 '120px', '10%' 등 CSS 값 */
+    width?: string | number;
+}
+declare const TableHeaderCell: React.ForwardRefExoticComponent<TableHeaderCellProps & React.RefAttributes<HTMLDivElement>>;
+export interface TableCellProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "left" | "right";
+    /** 오른쪽에 고정 구분선(3px 보더) 표시 */
+    fixedLine?: boolean;
+    /** px 숫자 또는 '120px', '10%' 등 CSS 값 */
+    width?: string | number;
+}
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLDivElement>>;
+export type TableColumn<T = Record<string, unknown>> = {
+    /** data 객체의 키 또는 고유 식별자 */
+    key: string;
+    /** 헤더 텍스트 */
+    header: React.ReactNode;
+    /** 셀 렌더러. 없으면 row[key] 를 문자열로 출력 */
+    cell?: (row: T, index: number) => React.ReactNode;
+    align?: "left" | "right";
+    /** px 숫자 또는 '120px', '10%' 등 CSS 값 */
+    width?: string | number;
+    /** 정렬 가능 여부 */
+    sortable?: boolean;
+    /** 헤더에 info 아이콘 표시 */
+    info?: boolean;
+    /** 오른쪽에 고정 구분선(3px 보더) 표시 */
+    fixedLine?: boolean;
+};
+export interface TableProps<T extends object = Record<string, unknown>> {
+    columns: TableColumn<T>[];
+    data: T[];
+    /** 현재 정렬 중인 컬럼 key */
+    sortKey?: string;
+    /** 현재 정렬 방향 */
+    sortDirection?: "asc" | "desc";
+    /** 정렬 클릭 시 호출. 프로젝트에서 상태 관리 */
+    onSort?: (key: string, direction: "asc" | "desc") => void;
+    /** 선택된 행 인덱스 배열. 정의되면 체크박스 컬럼이 자동 추가 */
+    selectedRows?: number[];
+    onRowSelect?: (index: number, checked: boolean) => void;
+    onSelectAll?: (checked: boolean) => void;
+    /** 행 key 생성 함수. 기본값: rowIndex */
+    getRowKey?: (row: T, index: number) => React.Key;
+    onRowClick?: (row: T, index: number) => void;
+    className?: string;
+}
+declare function Table<T extends object>({ columns, data, sortKey, sortDirection, onSort, selectedRows, onRowSelect, onSelectAll, getRowKey, onRowClick, className, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRoot, TableRow, };

package/dist/components/ui/tabs.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+type TabVariant = "underline" | "box" | "outline" | "round";
+export interface TabsProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    variant?: TabVariant;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+export interface TabsListProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+}
+declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export { Tabs, TabsList, TabsTrigger };

package/dist/components/ui/tag.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type TagSize = "medium" | "small" | "xsmall";
+export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    size?: TagSize;
+}
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+export { Tag };

package/dist/components/ui/tips.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export type TipsColor = "white" | "black";
+export type TipsSize = "medium" | "small";
+export interface TipsProps extends React.HTMLAttributes<HTMLDivElement> {
+    color?: TipsColor;
+    size?: TipsSize;
+}
+declare const Tips: React.ForwardRefExoticComponent<TipsProps & React.RefAttributes<HTMLDivElement>>;
+export { Tips };

package/dist/components/ui/toast.d.ts

@@ -0,0 +1,23 @@
+export interface ToasterProps {
+    position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+}
+export declare function Toaster({ position }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+export interface ToastOptions {
+    duration?: number;
+    id?: string | number;
+}
+export declare const toast: {
+    success: (message: string, options?: ToastOptions) => string | number;
+    error: (message: string, options?: ToastOptions) => string | number;
+    caution: (message: string, options?: ToastOptions) => string | number;
+};
+export interface SnackbarAction {
+    label: string;
+    withIcon?: boolean;
+    onClick?: () => void;
+}
+export declare const snackbar: {
+    success: (message: string, action?: SnackbarAction, options?: ToastOptions) => string | number;
+    error: (message: string, action?: SnackbarAction, options?: ToastOptions) => string | number;
+    caution: (message: string, action?: SnackbarAction, options?: ToastOptions) => string | number;
+};

package/dist/components/ui/toggle.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+export interface ToggleProps {
+    checked?: boolean;
+    neutral?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+}
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
+export { Toggle };

package/dist/components/ui/use-modal.d.ts

@@ -0,0 +1,36 @@
+import { ContentModalSize } from './modal';
+import * as React from "react";
+interface InformationModalConfig {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    confirmLabel?: string;
+    onConfirm?: () => void;
+}
+interface ActionModalConfig {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    cancelLabel?: string;
+    confirmLabel?: string;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+}
+interface ContentModalConfig {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    size?: ContentModalSize;
+    cancelLabel?: string;
+    confirmLabel?: string;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    content?: React.ReactNode;
+}
+interface ModalContextValue {
+    openInformationModal: (config: InformationModalConfig) => Promise<boolean>;
+    openActionModal: (config: ActionModalConfig) => Promise<boolean>;
+    openContentModal: (config: ContentModalConfig) => Promise<boolean>;
+}
+export declare function ModalProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useModal(): ModalContextValue;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+export { PYLER_LIGHT_COLOR_TOKENS, flatPylerLightTokens, PYLER_LIGHT_GROUP_ORDER, getDsCssVar, getPylerCssVar, formatPylerPathForDisplay, } from './tokens/pyler-light';
+export type { HexColor, DsCssVar, PylerLightCssVar, PylerLightGroup, PylerLightFlatToken, } from './tokens/pyler-light';
+export { PYLER_TYPOGRAPHY_STYLE } from './tokens/typography';
+export type { PylerTypographyStyleKey, PylerTypographyScale, PylerTypographyUtilityClass, } from './tokens/typography';
+export { Button, ButtonIndicator, buttonVariants } from './components/ui/button';
+export type { ButtonProps, ButtonIndicatorProps } from './components/ui/button';
+export { InputField, TextField } from './components/ui/input';
+export type { InputFieldProps, TextFieldProps } from './components/ui/input';
+export { SearchField } from './components/ui/search-field';
+export type { SearchFieldProps } from './components/ui/search-field';
+export { Dropdown } from './components/ui/dropdown';
+export type { DropdownProps, DropdownOption } from './components/ui/dropdown';
+export { Checkbox } from './components/ui/checkbox';
+export type { CheckboxProps } from './components/ui/checkbox';
+export { Radio } from './components/ui/radio';
+export type { RadioProps } from './components/ui/radio';
+export { Toggle } from './components/ui/toggle';
+export type { ToggleProps } from './components/ui/toggle';
+export { Table, TableRoot, TableHead, TableBody, TableRow, TableHeaderCell, TableCell, } from './components/ui/table';
+export type { TableProps, TableColumn, TableHeaderCellProps, TableCellProps } from './components/ui/table';
+export { LoadingBar } from './components/ui/loading-bar';
+export type { LoadingBarProps } from './components/ui/loading-bar';
+export { Tabs, TabsList, TabsTrigger } from './components/ui/tabs';
+export type { TabsProps, TabsListProps, TabsTriggerProps } from './components/ui/tabs';
+export { Pagination } from './components/ui/pagination';
+export type { PaginationProps } from './components/ui/pagination';
+export { Badge } from './components/ui/badge';
+export type { BadgeProps, BadgeColor, BadgeSize } from './components/ui/badge';
+export { Tag } from './components/ui/tag';
+export type { TagProps, TagSize } from './components/ui/tag';
+export { Chip } from './components/ui/chip';
+export type { ChipProps, ChipSize } from './components/ui/chip';
+export { Toaster, toast, snackbar } from './components/ui/toast';
+export type { ToasterProps, ToastOptions, SnackbarAction } from './components/ui/toast';
+export { Tips } from './components/ui/tips';
+export type { TipsProps, TipsColor, TipsSize } from './components/ui/tips';
+export { InformationModal, ActionModal, ContentModal } from './components/ui/modal';
+export type { InformationModalProps, ActionModalProps, ContentModalProps, ContentModalSize, } from './components/ui/modal';
+export { ModalProvider, useModal } from './components/ui/use-modal';
+export { Headline, headlineVariants } from './components/ui/headline';
+export type { HeadlineProps } from './components/ui/headline';
+export { Body, bodyVariants } from './components/ui/body';
+export type { BodyProps } from './components/ui/body';
+export { Label, labelVariants } from './components/ui/label';
+export type { LabelProps } from './components/ui/label';