@weing-dev/ui-kit-primitive 0.0.1 → 0.0.2

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/components/Accordion/Accordion.context.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+type IAccordionRootVariant = "contained" | "outlined" | "adaptived" | "sideLined" | "bottomLined" | "shadow" | "unset";
+type IAccordionRootState = {
+    open?: boolean;
+    disabled?: boolean;
+    autoClosed?: boolean;
+    id?: string;
+    variant?: IAccordionRootVariant;
+    transition?: boolean | {
+        /** 0.25s => 2500 */
+        duration?: number;
+        timingFC?: React.CSSProperties["transitionTimingFunction"];
+    };
+    onClick?: (e?: React.MouseEvent<HTMLInputElement>) => void;
+    onChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;
+    ["#triggerRef"]?: React.RefObject<HTMLInputElement | null>;
+    ["#firstClick"]?: boolean;
+};
+export declare const AccordionRootContext: React.Context<IAccordionRootState>;
+export type AccordionsRootProviderProps = React.PropsWithChildren<IAccordionRootState & {
+    className?: string;
+}>;
+export declare const AccordionRootProvider: (props: AccordionsRootProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { AccordionsRootProviderProps } from './Accordion.context';
+type ItemProps = React.PropsWithChildren<{
+    className?: string;
+}>;
+declare const Item: (props: ItemProps) => import("react/jsx-runtime").JSX.Element;
+type AsProps = {
+    id?: string;
+    open?: boolean;
+    disabled?: boolean;
+};
+type TriggerProps = React.PropsWithChildren<{
+    as?: (props: AsProps) => React.ReactNode;
+    className?: string;
+}>;
+declare const Trigger: (props: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: (props: Omit<AccordionsRootProviderProps, "#triggerRef" | "#firstClick">) => import("react/jsx-runtime").JSX.Element;
+interface IAccordion {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Item: typeof Item;
+}
+declare const _default: IAccordion;
+export default _default;

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+type GroupProps = React.PropsWithChildren<{
+    className?: string;
+    itemClassName?: string;
+    max?: number;
+    total?: number;
+    itemSize?: number;
+    restCounterProps?: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
+}>;
+declare const Group: (props: GroupProps) => import("react/jsx-runtime").JSX.Element;
+type AsProps = {
+    isError: boolean;
+    nameAbbreviation: boolean;
+    abbreviateName: (name: string) => string;
+    src?: string;
+    alt?: string;
+    textColor: string;
+    abberviateDefaultClassName: string;
+    imgDefaultClassName: string;
+    onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+};
+type ItemProps = {
+    className?: string;
+    variant?: "square" | "rounded" | "circle";
+    nameAbbreviation?: boolean;
+    size?: number;
+    as?: (props: AsProps) => React.ReactNode;
+} & React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
+declare const Item: (props: ItemProps) => import("react/jsx-runtime").JSX.Element;
+interface IAvatar {
+    Item: typeof Item;
+    Group: typeof Group;
+}
+declare const _default: IAvatar;
+export default _default;

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+type BadgeProps = {
+    dot?: boolean;
+    max?: number;
+    badgeColor?: React.CSSProperties["backgroundColor"];
+    value?: number | string | null;
+};
+export type BadgeRenderProps = {
+    defaultClassName?: string;
+} & BadgeProps;
+export type BadgeRootProps = React.PropsWithChildren<{
+    className?: string;
+    overlap?: "square" | "circle" | null;
+    as?: (props: BadgeRenderProps) => React.ReactNode;
+} & BadgeProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+declare const Badge: (props: BadgeRootProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+export default Badge;

package/dist/components/BarCode/BarCode.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export type BarcodeActions = {
+    copy: () => Promise<void>;
+    download: () => void;
+};
+type BarCodeProps = {
+    value: string;
+    className?: string;
+    ref?: React.Ref<BarcodeActions>;
+    type?: "EAN13" | "EAN8";
+};
+declare const BarCode: (props: BarCodeProps) => import("react/jsx-runtime").JSX.Element;
+export default BarCode;

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+type EllipsisProps = {
+    className?: string;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+};
+declare const Ellipsis: (props: EllipsisProps) => import("react/jsx-runtime").JSX.Element;
+type SeparatorProps = {
+    className?: string;
+};
+declare const Separator: (props: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
+type AsProps = {
+    className?: string;
+    href?: string;
+    focused?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+};
+type LinkProps = React.PropsWithChildren<{
+    as?: (props: AsProps) => React.ReactNode;
+} & AsProps>;
+declare const Link: (props: LinkProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+type ListProps = React.PropsWithChildren<{
+    className?: string;
+    separator?: React.ReactElement;
+}>;
+declare const List: (props: ListProps) => import("react/jsx-runtime").JSX.Element;
+interface IBreadcrumb {
+    List: typeof List;
+    Link: typeof Link;
+    Separator: typeof Separator;
+    Ellipsis: typeof Ellipsis;
+}
+declare const _default: IBreadcrumb;
+export default _default;

package/dist/components/Button/Button.colors.d.ts

@@ -0,0 +1,295 @@
+declare const useButtonColors: (shapeType?: "square" | "round") => {
+    primary: {
+        contained: {
+            backgroundColor: "#00a76f";
+            color: "#ffffff";
+            borderColor: string;
+            hover: {
+                backgroundColor: "#007867";
+                color: "#ffffff";
+                borderColor: string;
+            };
+        };
+        outlined: {
+            backgroundColor: string;
+            color: "#00a76f";
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: "#00a76f";
+                borderColor: "#00a76f";
+            };
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        text: {
+            backgroundColor: string;
+            color: "#00a76f";
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+    } | {
+        contained: {
+            backgroundColor: "#00a76f";
+            color: "#ffffff";
+            borderColor: string;
+            hover: {
+                backgroundColor: "#007867";
+                color: "#ffffff";
+                borderColor: string;
+            };
+        };
+        outlined: {
+            backgroundColor: string;
+            color: "#00a76f";
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: "#00a76f";
+                borderColor: string;
+            };
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        text: {
+            backgroundColor: string;
+            color: "#00a76f";
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+    };
+    inherit: {
+        contained: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        outlined: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        text: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+    } | {
+        contained: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        outlined: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        text: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+    };
+    disabled: {
+        contained: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        outlined: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        text: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+    } | {
+        contained: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        outlined: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        text: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+    };
+    red: {
+        contained: {
+            backgroundColor: "#f5222d";
+            color: "#ffffff";
+            borderColor: string;
+            hover: {
+                backgroundColor: "#b71d18";
+                color: string;
+                borderColor: string;
+            };
+        };
+        outlined: {
+            backgroundColor: string;
+            color: "#f5222d";
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: "#f5222d";
+                borderColor: "#f5222d";
+            };
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        text: {
+            backgroundColor: string;
+            color: "#f5222d";
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: "#b71d18";
+                borderColor: string;
+            };
+        };
+    } | {
+        contained: {
+            backgroundColor: "#f5222d";
+            color: "#ffffff";
+            borderColor: string;
+            hover: {
+                backgroundColor: "#b71d18";
+                color: string;
+                borderColor: string;
+            };
+        };
+        outlined: {
+            backgroundColor: string;
+            color: "#f5222d";
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: "#f5222d";
+                borderColor: string;
+            };
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        text: {
+            backgroundColor: string;
+            color: "#f5222d";
+            borderColor: string;
+            hover: {
+                backgroundColor: string;
+                color: "#b71d18";
+                borderColor: string;
+            };
+        };
+    };
+};
+export default useButtonColors;

package/dist/components/Button/Button.context.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+type Variant = "outlined" | "contained" | "soft" | "text";
+type ButtonContextType = {
+    /** Color Type */
+    shapeType: "square" | "round";
+    colorType: "primary" | "inherit" | "red";
+    variant: Variant;
+    isLoading: boolean;
+    spinner?: React.ReactNode;
+    loadingText: string;
+    size?: "small" | "medium" | "large";
+    disabled?: boolean;
+    isFitted?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+export declare const initialState: ButtonContextType;
+export declare const ButtonContext: React.Context<ButtonContextType>;
+export type ButtonProviderProps = React.PropsWithChildren<Partial<ButtonContextType>> & {
+    className?: string;
+};
+export declare const ButtonProvider: (props: ButtonProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { Icon as IconComponent } from '../Icon/Icon';
+import { ButtonProviderProps } from './Button.context';
+type TextProps = React.PropsWithChildren<{
+    className?: string;
+}>;
+declare const Text: (props: TextProps) => import("react/jsx-runtime").JSX.Element;
+type IconProps = React.PropsWithChildren<React.ComponentProps<typeof IconComponent>> & {
+    className?: string;
+};
+declare const Icon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** 버튼 컴포넌트 */
+declare const Root: (props: ButtonProviderProps & {
+    radius?: number;
+    rounded?: boolean;
+    circle?: boolean;
+} & React.JSX.IntrinsicElements["button"]) => import("react/jsx-runtime").JSX.Element;
+interface IButton {
+    Text: typeof Text;
+    Icon: typeof Icon;
+    Root: typeof Root;
+}
+declare const _default: IButton;
+export default _default;

package/dist/components/Button/Button.type.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+declare const colorType: readonly ["cyan"];
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    colorType?: (typeof colorType)[number];
+    size?: "small" | "medium" | "large" | "xLarge";
+    outlined?: "squared" | "rounded";
+    maxWidth?: number | string;
+    circle?: boolean;
+};
+export {};

package/dist/components/Calendar/Calendar.context.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+import { LangType } from './dayjs.util';
+type CalendarContextType = {
+    addWeek: (val?: number) => void;
+    subtractWeek: (val?: number) => void;
+    addMonth: (val?: number) => void;
+    subtractMonth: (val?: number) => void;
+    /** 컬럼 선택시 핸들러 */
+    handleDatePress?: (date: string | string[]) => void;
+    /** 현재 날짜 */
+    currentDate?: string;
+    /** 월 첫 날 (현재 날짜 기준) */
+    currentMonthFirst?: string;
+    /** 주차 첫 날 (현재 날짜 기준) */
+    currentWeekFirst?: string;
+    /** 주말 노출 여부 */
+    isWeekend: boolean;
+    /** 평일 노출 여부 */
+    isWeekDay: boolean;
+    /** 월요일부터 시작 여부 */
+    isMondayStart: boolean;
+    /** 캘린더 타입 */
+    calendarType?: "week" | "month";
+    /** 언어 설정 */
+    lang?: LangType;
+    /** 선택 불가 날짜 목록 */
+    excludeDates?: string[];
+    /** 선택된 날짜 */
+    selectedDate?: string | string[];
+    /** min Date (최소 일자)*/
+    minDate?: string;
+    /** max Date (최대 일자) */
+    maxDate?: string;
+};
+export declare const CalendarContext: React.Context<CalendarContextType>;
+export type CalendarProviderProps = React.PropsWithChildren<{
+    /** 컬럼 선택시 핸들러 */
+    handleDatePress?: (date: string | string[]) => void;
+    currentDate?: string;
+    isWeekend?: boolean;
+    isWeekDay?: boolean;
+    isMondayStart?: boolean;
+    calendarType?: "week" | "month";
+    /** 선택 불가 날짜 목록 */
+    excludeDates?: string[];
+    /** 언어 설정 */
+    lang?: LangType;
+    /** 선택된 날짜 */
+    selectedDate?: string | string[];
+    /** min Date (최소 일자)*/
+    minDate?: string;
+    /** max Date (최대 일자) */
+    maxDate?: string;
+}>;
+export declare const CalendarProvider: (props: CalendarProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Calendar/Calendar.d.ts

@@ -0,0 +1,72 @@
+import { default as React } from 'react';
+import { default as dayjs } from 'dayjs';
+import { CalendarProviderProps } from './Calendar.context';
+type AsBodyProps = {
+    columns: dayjs.Dayjs[];
+    className?: string;
+    columnRender: () => React.ReactNode;
+};
+type ColumnAsProps = {
+    date: string;
+    visible: boolean;
+    className?: string;
+    selected: boolean;
+    onClick?: (date: string) => void;
+    disabled: boolean;
+    between: boolean;
+    both: boolean;
+    start: boolean;
+    end: boolean;
+    columns: dayjs.Dayjs[];
+};
+type CalendarBodyProps = {
+    as?: (props: AsBodyProps) => React.ReactNode;
+    className?: string;
+    /** 이전, 다음달 채울지 여부 */
+    isFill?: boolean;
+    /** column className */
+    columnClassName?: string;
+    columnAs?: (props: ColumnAsProps) => React.ReactNode;
+};
+declare const Body: (props: CalendarBodyProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+type AsDirectionProps = {
+    disabled?: boolean;
+};
+type DirectionButtonProps = {
+    as?: (props: AsDirectionProps) => React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    moveValue?: number;
+};
+declare const Next: (props: DirectionButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Prev: (props: DirectionButtonProps) => import("react/jsx-runtime").JSX.Element;
+type AsDayTextProps = {
+    columns: (string | undefined)[];
+};
+type DayTextListProps = React.PropsWithChildren<{
+    as?: (props: AsDayTextProps) => React.ReactNode;
+    /** dayColumn */
+    column?: React.ReactElement;
+    className?: string;
+}>;
+declare const DayTextList: (props: DayTextListProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+type HeaderDateProps = {
+    className?: string;
+    format?: string;
+};
+declare const HeaderDate: (props: HeaderDateProps) => import("react/jsx-runtime").JSX.Element;
+type RootProps = CalendarProviderProps & {
+    currentDate?: string;
+    className?: string;
+};
+declare const Root: (props: RootProps) => import("react/jsx-runtime").JSX.Element;
+interface ICalendar {
+    Root: typeof Root;
+    HeaderDate: typeof HeaderDate;
+    DayTextList: typeof DayTextList;
+    Prev: typeof Prev;
+    Next: typeof Next;
+    Body: typeof Body;
+}
+declare const _default: ICalendar;
+export default _default;