@telepix-lab/telepix-ui 0.7.1 → 0.7.2

package/dist/esm/lib/color-utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 주어진 CSS 변수 이름에 대한 Hex 코드를 반환합니다.
+ *
+ * @param variable - CSS 변수 이름 (예: "--color-neutral-10").
+ * @returns Hex 코드 (예: "#fbfbfbff") 또는 변수가 유효한 색상이 아니거나 찾을 수 없는 경우 null.
+ */
+export declare const getColorHex: (variable: string) => string | null;

package/dist/esm/pagination-control/index.d.ts

@@ -0,0 +1,27 @@
+interface PaginationControlProps {
+    totalPages?: number;
+    totalCount?: number;
+    currentPage: number;
+    pageSize?: number;
+    maxVisiblePages?: number;
+    showPreviousButton?: boolean;
+    showNextButton?: boolean;
+    onPageChange: (page: number) => void;
+}
+/**
+ * 페이지네이션 컨트롤 컴포넌트입니다.<br/>
+ * 사용자는 총 페이지 수(totalPages) 또는 총 아이템 수(totalCount)와 페이지 크기(pageSize)를 기반으로 현재 페이지(currentPage)를 변경할 수 있습니다.<br/>
+ * 최대 노출 페이지 수(maxVisiblePages), 이전/다음 버튼 노출 여부(showPreviousButton, showNextButton) 등을 설정할 수 있습니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <PaginationControl
+ *   totalCount={100}
+ *   currentPage={1}
+ *   pageSize={10}
+ *   onPageChange={(page) => console.log(page)}
+ * />
+ * ```
+ */
+export declare const PaginationControl: ({ totalPages, totalCount, currentPage, pageSize, maxVisiblePages, showPreviousButton, showNextButton, onPageChange, }: PaginationControlProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/toast/Toast.d.ts

@@ -0,0 +1,38 @@
+import { ToastColor, ToastPosition } from "./types";
+interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Toast 메시지 내용 */
+    message: string;
+    /** Toast 색상 테마 */
+    theme?: ToastColor;
+    /** 아이콘 (선택적) */
+    icon?: React.ReactNode;
+    /** 닫기 버튼 표시 여부 */
+    dismissible?: boolean;
+    /** 자동 닫힘 시간 (ms). 0이면 자동 닫힘 비활성화 */
+    duration?: number;
+    /** Toast가 닫힐 때 호출되는 콜백 */
+    onClose?: () => void;
+    /** Toast가 표시되는 위치 (애니메이션 방향 결정용) */
+    position?: ToastPosition;
+}
+/**
+ * Toast 컴포넌트
+ *
+ * 사용자에게 짧은 알림 메시지를 표시하는 컴포넌트입니다.
+ * ToastContainer와 함께 사용하여 화면 상단 또는 하단에 오버레이로 표시합니다.
+ *
+ * @example
+ * // 기본 사용
+ * <Toast message="저장되었습니다." />
+ *
+ * // 자동 닫힘과 닫기 버튼
+ * <Toast
+ *   message="작업이 완료되었습니다."
+ *   theme="positive"
+ *   dismissible
+ *   duration={3000}
+ *   onClose={() => console.log('closed')}
+ * />
+ */
+export declare const Toast: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/toast/index.d.ts

@@ -0,0 +1,18 @@
+import { ToastPosition } from "./types";
+interface ToastContainerProps {
+    /** Toast가 표시될 위치 */
+    position?: ToastPosition;
+}
+/**
+ * ToastContainer 컴포넌트
+ *
+ * Toast 컴포넌트들을 화면의 상단 또는 하단에 오버레이로 표시하는 컨테이너입니다.
+ * sonner의 Toaster를 기반으로 구현되었으며, position prop을 통해 위치를 지정할 수 있습니다.
+ *
+ * @example
+ * <ToastContainer position="top" />
+ */
+export declare const ToastContainer: import("react").ForwardRefExoticComponent<ToastContainerProps & import("react").RefAttributes<HTMLElement>>;
+export { toast } from "sonner";
+export { Toast } from "./Toast";
+export { useToast } from "./useToast";

package/dist/esm/toast/types.d.ts

@@ -0,0 +1,60 @@
+export declare const TOAST_COLORS: {
+    readonly THEME: "theme";
+    readonly ERROR: "error";
+    readonly WARNING: "warning";
+    readonly POSITIVE: "positive";
+    readonly CLOUD: "cloud";
+    readonly ACCENT: "accent";
+};
+export type ToastColor = (typeof TOAST_COLORS)[keyof typeof TOAST_COLORS];
+export declare const TOAST_POSITIONS: {
+    readonly TOP: "top";
+    readonly BOTTOM: "bottom";
+};
+export type ToastPosition = (typeof TOAST_POSITIONS)[keyof typeof TOAST_POSITIONS];
+export interface ToastItem {
+    /** Toast 고유 ID */
+    id: string;
+    /** Toast 메시지 */
+    message: string;
+    /** Toast 색상 */
+    theme: ToastColor;
+    /** 아이콘 */
+    icon?: React.ReactNode;
+    /** 닫기 버튼 표시 여부 */
+    dismissible?: boolean;
+    /** 자동 닫힘 시간 (ms) */
+    duration?: number;
+}
+export interface ToastOptions {
+    /** Toast 메시지 */
+    message: string;
+    /** Toast 색상 */
+    theme?: ToastColor;
+    /** 아이콘 */
+    icon?: React.ReactNode;
+    /** 닫기 버튼 표시 여부 */
+    dismissible?: boolean;
+    /** 자동 닫힘 시간 (ms). undefined면 defaultDuration 사용 */
+    duration?: number;
+}
+export interface UseToastOptions {
+    /** Toast 표시 위치 */
+    position?: ToastPosition;
+    /** 기본 자동 닫힘 시간 (ms) */
+    defaultDuration?: number;
+    /** 최대 Toast 개수 */
+    maxToasts?: number;
+}
+export interface UseToastReturn {
+    /** 현재 표시중인 Toast 목록 */
+    toasts: ToastItem[];
+    /** Toast 위치 */
+    position: ToastPosition;
+    /** Toast를 추가하고 ID를 반환 */
+    toast: (options: ToastOptions) => string;
+    /** 특정 Toast를 제거 */
+    removeToast: (id: string) => void;
+    /** 모든 Toast를 제거 */
+    clearToasts: () => void;
+}

package/dist/esm/toast/useToast.d.ts

@@ -0,0 +1,32 @@
+import { UseToastOptions, UseToastReturn } from "./types";
+/**
+ * Toast를 쉽게 관리할 수 있는 커스텀 훅
+ * sonner 기반으로 구현되었습니다.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { toast } = useToast({
+ *     position: "top",
+ *     defaultDuration: 3000,
+ *     maxToasts: 5,
+ *   });
+ *
+ *   const handleSuccess = () => {
+ *     toast({
+ *       message: "저장되었습니다!",
+ *       theme: "positive",
+ *       icon: <CheckCircle size={20} />,
+ *     });
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <button onClick={handleSuccess}>저장</button>
+ *       <ToastContainer position="top" />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function useToast(options?: UseToastOptions): UseToastReturn;