maru_design2 0.0.1 → 0.0.3

package/dist/components/molecules/modal/Modal.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { TColor } from '../../../enums/color';
+import { TModalSize } from '../../../enums/size';
+import './modal.scss';
+export interface ModalProps {
+    children: React.ReactNode;
+    onClose: () => void;
+    open: boolean;
+    /**
+     * 배경 클릭 시 컴포넌트 닫히는지 여부. (@v1 backdropOff)
+     */
+    backdrop?: boolean;
+    /**
+     * 모달 취소버튼 설정. { content: string, disabled?: string}
+     */
+    cancelButton?: {
+        content: string;
+        disabled?: boolean;
+    };
+    className?: string;
+    /**
+     * 엔터키 비활성화 여부. (@v1 disableEnterKeyDown)
+     */
+    disabledEnter?: boolean;
+    /**
+     * 모달 닫기 버튼 숨김 여부. (@v1 hasCloseButton)
+     */
+    hiddenCloseButton?: boolean;
+    /**
+     * 모달 확인버튼 설정.
+     * { content: string,
+     *  color?: 'primary' | 'secondary' | 'positive' | 'warning' | 'danger',
+     *  disabled?: boolean, onClick?: () => void }. (@v1 confirmButton)
+     */
+    okButton?: {
+        content: string;
+        color?: TColor;
+        disabled?: boolean;
+        onClick?: () => void;
+    };
+    /**
+     * ['xs', 's', 'm', 'l', 'xl']
+     */
+    size?: TModalSize;
+    /**
+     * 모달 제목
+     */
+    title?: string;
+}
+declare function Modal({ children, onClose, open, backdrop, cancelButton, className, disabledEnter, hiddenCloseButton, okButton, size, title, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export default Modal;

package/dist/components/molecules/modal/index.d.ts

@@ -0,0 +1 @@
+export * from './Modal';

package/dist/components/molecules/pagination/Pagination.d.ts

@@ -0,0 +1,27 @@
+import { TButtonType } from '../../../enums/type';
+import './pagination.scss';
+export interface PaginationProps {
+    /**
+     * 현재 페이지. (@v1 page.curPage)
+     */
+    page: number;
+    /**
+     * 현재 페이지 설정 함수. (@v1 page.setPage)
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * 총 페이지
+     */
+    totalPage: number;
+    className?: string;
+    /**
+     * 페이지네이션의 전후 버튼 숨김 여부. (@v1 buttonVisibility)
+     */
+    hiddenButton?: boolean;
+    /**
+     * 데이터 타입. ['button', 'input'] (@v1 isSearch)
+     */
+    type?: TButtonType;
+}
+declare function Pagination({ page, onPageChange, totalPage, className, hiddenButton, type, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export default Pagination;

package/dist/components/molecules/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './Pagination';

package/dist/components/styleProvider/StyleProvider.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TTheme } from '../../enums/color';
+import './reset.scss';
+import './style-provider.scss';
+interface Props {
+    children: React.ReactNode;
+    theme: TTheme;
+}
+export declare function StyleProvider({ children, theme }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/styleProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './StyleProvider';

package/dist/enums/color.d.ts

@@ -0,0 +1,13 @@
+export type TTheme = 'blue';
+declare const DColor: {
+    readonly primary: "var(--p)";
+    readonly secondary: "#8c8c8c";
+    readonly positive: "#58c5a6";
+    readonly warning: "#ffb020";
+    readonly danger: "#e53e3e";
+};
+export declare const COLORS: string[];
+export type TColor = (typeof COLORS)[number];
+export { DColor };
+export declare const TOOLTIP_COLORS: readonly ["default", "danger"];
+export type TTooltipColor = (typeof TOOLTIP_COLORS)[number];

package/dist/enums/direction.d.ts

@@ -0,0 +1,2 @@
+export declare const DIRECTIONS: readonly ["top-start", "top", "top-end", "left-start", "left", "left-end", "bottom-start", "bottom", "bottom-end", "right-start", "right", "right-end"];
+export type TDirection = (typeof DIRECTIONS)[number];

package/dist/enums/gap.d.ts

@@ -0,0 +1,2 @@
+export declare const GAPS: readonly ["8px", "4px"];
+export type TGap = (typeof GAPS)[number];

package/dist/enums/size.d.ts

@@ -0,0 +1,10 @@
+export declare const BUTTON_SIZES: readonly ["small", "normal", "large"];
+export type TButtonSize = (typeof BUTTON_SIZES)[number];
+export declare const CHECKBOX_SIZES: readonly [16, 18, 24];
+export type TCheckboxSize = (typeof CHECKBOX_SIZES)[number];
+export declare const CHIP_SIZES: readonly ["small", "normal"];
+export type TChipSize = (typeof CHIP_SIZES)[number];
+export declare const ICON_SIZES: readonly [14, 16, 18, 20, 24, 40, 48];
+export type TIconSize = (typeof ICON_SIZES)[number];
+export declare const MODAL_SIZES: readonly ["xs", "s", "m", "l", "xl"];
+export type TModalSize = (typeof MODAL_SIZES)[number];

package/dist/enums/type.d.ts

@@ -0,0 +1,4 @@
+export declare const INPUT_TYPES: readonly ["text", "password", "number"];
+export type TInputType = (typeof INPUT_TYPES)[number];
+export declare const BUTTON_TYPES: readonly ["button", "input"];
+export type TButtonType = (typeof BUTTON_TYPES)[number];

package/dist/enums/variant.d.ts

@@ -0,0 +1,4 @@
+export declare const BUTTON_VARIANTS: readonly ["default", "default-light", "outline", "text", "color-on-focus"];
+export type TButtonVariant = (typeof BUTTON_VARIANTS)[number];
+export declare const CHIP_VARIANTS: readonly ["default", "outline", "dot"];
+export type TChipVariant = (typeof CHIP_VARIANTS)[number];

package/dist/hooks/useButtonState.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+/**
+ * 버튼 hover/active/focus 상태를 추적할 때 사용.
+ */
+interface IButtonState {
+    isHover: boolean;
+    isActive: boolean;
+    isFocused: boolean;
+}
+declare function useButtonState(): [
+    IButtonState,
+    {
+        setIsHover: React.Dispatch<React.SetStateAction<boolean>>;
+        setIsActive: React.Dispatch<React.SetStateAction<boolean>>;
+        setIsFocused: React.Dispatch<React.SetStateAction<boolean>>;
+    }
+];
+export default useButtonState;

package/dist/hooks/useColor.d.ts

@@ -0,0 +1,4 @@
+declare const useColor: (color?: string) => {
+    keyColor: "var(--p)" | "#8c8c8c" | "#58c5a6" | "#ffb020" | "#e53e3e";
+};
+export default useColor;

package/dist/hooks/useCombineRef.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from "react";
+import { Ref } from 'react';
 /**
  * 파라미터로 들어온 ref들을 generic type을 가진 ref로 바꾸는 hook
  * ex. refs(주로 부모 refs)가 HTMLInputElement인 RefObject일 때,

package/dist/hooks/useCreatePortal.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 interface CreatePortalProps {
     parent: HTMLElement;
     children: React.ReactNode;

package/dist/hooks/useId.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 최대 32자리의 uuid를 생성합니다.
+ * @param length 1 <= lenght <= 32 or undefined
+ * @returns uuid
+ */
+declare function uuidv4(length?: number): string;
+export default uuidv4;

package/dist/index.d.ts

@@ -1 +1,13 @@
-export * from "./components/atoms/button";
+export * from './components/styleProvider';
+export * from './components/atoms/button';
+export * from './components/atoms/checkbox';
+export * from './components/atoms/chip';
+export * from './components/atoms/icon';
+export * from './components/atoms/input';
+export * from './components/atoms/popover';
+export * from './components/atoms/radio';
+export * from './components/atoms/toggle';
+export * from './components/atoms/tooltip';
+export * from './components/molecules/dropdown';
+export * from './components/molecules/modal';
+export * from './components/molecules/pagination';