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

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

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+type SliderContextType = {
+    readOnly?: boolean;
+    disabled?: boolean;
+    invert?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    labelAlwaysOn?: boolean;
+    marks?: {
+        value: number;
+        label: string | number | React.ReactNode;
+    }[];
+    markActiveEffect?: boolean;
+    defaultValue?: number[];
+    scale?: (value: number) => number;
+    label?: ((value: number) => string) | null;
+    onChange?: (e: {
+        value: number;
+        idx: number;
+        min: number;
+        max: number;
+        step: number;
+        defaultSetChangeHandler: (curr: number[]) => number[];
+    }) => void;
+    progressRef?: React.RefObject<HTMLDivElement | null>;
+    draggingIndex?: number;
+    setDefaultValue?: React.Dispatch<React.SetStateAction<number[]>>;
+    setDraggingIndex?: React.Dispatch<React.SetStateAction<number | undefined>>;
+};
+export declare const SliderContext: React.Context<SliderContextType>;
+export type SliderProviderProps = React.PropsWithChildren<SliderContextType & {
+    className?: string;
+}>;
+export declare const SliderProvider: (props: SliderProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+import { SliderProviderProps } from './Slider.context';
+type MarkAsProps = {
+    label: string | number | React.ReactNode;
+    active: boolean;
+};
+type MarksProps = React.PropsWithChildren<{
+    className?: string;
+    as?: (props: MarkAsProps) => React.ReactNode;
+}>;
+declare const Marks: (props: MarksProps) => import("react/jsx-runtime").JSX.Element[] | undefined;
+type ThumbAsProps = {
+    hidden: boolean;
+    isDragging: boolean;
+    children: React.ReactNode;
+    labelAlwaysOn?: boolean;
+    value?: string | number;
+};
+type ThumbProps = React.PropsWithChildren<{
+    index?: number;
+    className?: string;
+    as?: (props: ThumbAsProps) => React.ReactNode;
+}>;
+declare const Thumb: (props: ThumbProps) => import("react/jsx-runtime").JSX.Element;
+type ProgressProps = {
+    children: React.ReactNode;
+    color?: React.CSSProperties["color"];
+    className?: string;
+    valueClassName?: string;
+};
+declare const Progress: (props: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+type OmitContext = "progressRef" | "draggingIndex" | "setDefaultValue" | "setDraggingIndex";
+declare const Root: (props: Omit<SliderProviderProps, OmitContext>) => import("react/jsx-runtime").JSX.Element;
+interface ISlider {
+    Root: typeof Root;
+    Progress: typeof Progress;
+    Thumb: typeof Thumb;
+    Marks: typeof Marks;
+}
+declare const _default: ISlider;
+export default _default;

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

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+type LineAsProps = {
+    defaultClassName: string;
+    direction: "row" | "column";
+    contentsPosition: "top" | "bottom" | "left" | "right";
+    index: number;
+};
+type StepperContextType = {
+    activeStep?: number | null;
+    /** linear === false일 경우 onClick이벤트를 통해 active 컨트롤 */
+    linear?: boolean;
+    direction?: "row" | "column";
+    contentsPosition?: "top" | "bottom" | "left" | "right";
+    lineAs?: (props?: LineAsProps) => React.ReactNode;
+    onClick?: (index: number) => void;
+};
+export declare const StepperContext: React.Context<StepperContextType>;
+export type StepperProviderProps = React.PropsWithChildren<StepperContextType & {
+    className?: string;
+}>;
+export declare const StepperProvider: (props: StepperProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { StepperProviderProps } from './Stepper.context';
+type StepsRenderProps = {
+    index: number;
+    active: boolean;
+    defaultClassName: string;
+};
+type StepProps = {
+    className?: string;
+    index?: number;
+    title?: string | number | ((props: StepsRenderProps) => React.ReactNode);
+    desc?: string | number | ((props: StepsRenderProps) => React.ReactNode);
+    point?: string | number | ((props: StepsRenderProps) => React.ReactNode);
+};
+declare const Step: (props: StepProps) => import("react/jsx-runtime").JSX.Element | undefined;
+type OmitContext = "";
+declare const Root: (props: Omit<StepperProviderProps, OmitContext>) => import("react/jsx-runtime").JSX.Element;
+interface IStepper {
+    Root: typeof Root;
+    Step: typeof Step;
+}
+declare const _default: IStepper;
+export default _default;
+export type { StepperProviderProps };

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

@@ -0,0 +1,5 @@
+declare const useTabColors: () => {
+    selected: {};
+    unselected: {};
+};
+export default useTabColors;

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

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+export declare const TabType: readonly ["textLine", "line", "text", "squareLine", "circle", "square", "rounded"];
+type ITabContext = {
+    /** align */
+    align: "start" | "center" | "end";
+    /** direction */
+    direction: "horizontal" | "vertical";
+    /** isFitted */
+    isFitted?: boolean;
+    /** onChange */
+    onChange: (id: string) => void;
+    /** background Color */
+    bg?: string;
+    /** size */
+    size?: "small" | "medium" | "large";
+    /** active */
+    active?: string;
+    /** tabType */
+    tabType?: (typeof TabType)[number];
+};
+export declare const TabsContext: React.Context<ITabContext>;
+export type TabsProviderProps = React.PropsWithChildren<Partial<ITabContext> & {
+    className?: string;
+}>;
+export declare const TabProvider: (props: TabsProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tab/Tab.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { TabsProviderProps } from './Tab.context';
+type PanelProps = React.PropsWithChildren<{
+    className?: string;
+    id?: string;
+    index: number;
+}>;
+declare const Panel: (props: PanelProps) => import("react/jsx-runtime").JSX.Element;
+type PanelsProps = React.PropsWithChildren<{
+    className?: string;
+}>;
+declare const Panels: (props: PanelsProps) => import("react/jsx-runtime").JSX.Element;
+type TabListProps = React.PropsWithChildren<{
+    className?: string;
+}>;
+declare const List: (props: TabListProps) => import("react/jsx-runtime").JSX.Element;
+type TabProps = React.PropsWithChildren<{
+    className?: string;
+    id?: string;
+    index: number;
+    onClick?: (...args: any) => void;
+    isActive?: boolean;
+}>;
+declare const Item: (props: TabProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: (props: TabsProviderProps) => import("react/jsx-runtime").JSX.Element;
+interface ITab {
+    Root: typeof Root;
+    List: typeof List;
+    Item: typeof Item;
+    Panel: typeof Panel;
+    Panels: typeof Panels;
+}
+declare const _default: ITab;
+export default _default;

package/dist/components/Tab/cx.d.ts

@@ -0,0 +1,2 @@
+declare const cx: (...args: import('classnames').ArgumentArray) => string;
+export default cx;

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+type TableVariant = "default" | "bordered" | "striped" | "compact";
+export interface TableContextType {
+    variant?: TableVariant;
+}
+export declare const TableContext: React.Context<TableContextType>;
+export type TableProviderProps = React.PropsWithChildren<TableContextType & {
+    className?: string;
+}>;
+export {};

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { TableProviderProps } from './Table.context';
+import { useRowResize } from './Table.hook';
+type TableRowProps = React.PropsWithChildren<React.JSX.IntrinsicElements["tr"]>;
+declare const Row: (props: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+type TableCellProps = React.PropsWithChildren<{
+    size?: number;
+    isSelected?: boolean;
+} & React.JSX.IntrinsicElements["td"]>;
+declare const Cell: (props: TableCellProps) => import("react/jsx-runtime").JSX.Element;
+type TableBodyProps = React.PropsWithChildren<React.JSX.IntrinsicElements["tbody"]>;
+declare const Body: (props: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
+type TableHeaderCellProps = React.PropsWithChildren<{
+    size?: number;
+} & React.JSX.IntrinsicElements["th"]>;
+declare const HeaderCell: (props: TableHeaderCellProps) => import("react/jsx-runtime").JSX.Element;
+type TableHeaderProps = React.PropsWithChildren<React.JSX.IntrinsicElements["thead"]>;
+declare const Header: (props: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+type TableRootProps = TableProviderProps & React.JSX.IntrinsicElements["table"];
+declare const Root: (props: TableRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ITable {
+    Root: typeof Root;
+    Header: typeof Header;
+    Body: typeof Body;
+    Row: typeof Row;
+    Cell: typeof Cell;
+    HeaderCell: typeof HeaderCell;
+    useRowResize: typeof useRowResize;
+}
+export type { TableRootProps };
+declare const _default: ITable;
+export default _default;

package/dist/components/Table/Table.hook.d.ts

@@ -0,0 +1,6 @@
+import { Table } from '@tanstack/react-table';
+export declare const useRowResize: <TData extends object>(table: Table<TData>) => {
+    columnsSize: number[];
+    isResizing: boolean;
+    handleResize: (columnIndex: number) => void;
+};

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

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export declare const THUMBNAIL_SIZES: {
+    readonly xxs: 40;
+    readonly xs: 48;
+    readonly sm: 56;
+    readonly s: 72;
+    readonly m: 96;
+    readonly l: 120;
+    readonly xl: 160;
+    readonly xxl: 192;
+};
+export type ThumbnailSize = keyof typeof THUMBNAIL_SIZES | number;
+export interface ThumbnailContextType {
+    size?: ThumbnailSize;
+    aspectRatio?: string;
+    variant?: "square" | "circle";
+    objectFit?: "cover" | "contain";
+    isReload?: boolean;
+    onUpload?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onEdit?: (e: React.ChangeEvent<HTMLInputElement>, index?: number) => void;
+    onRemove?: (index?: number) => void;
+}
+export declare const initialState: ThumbnailContextType;
+export declare const ThumbnailContext: React.Context<ThumbnailContextType>;
+export type ThumbnailProviderProps = React.PropsWithChildren<ThumbnailContextType & {
+    className?: string;
+}>;

package/dist/components/Thumbnail/Thumbnail.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+import { THUMBNAIL_SIZES, ThumbnailProviderProps } from './Thumbnail.context';
+import { Icon } from '../Icon/Icon';
+type RemoveButtonProps = {
+    index?: number;
+    iconSize?: number;
+} & React.JSX.IntrinsicElements["div"];
+declare const RemoveButton: (props: RemoveButtonProps) => import("react/jsx-runtime").JSX.Element;
+type EditButtonProps = {
+    index?: number;
+    iconName?: React.ComponentProps<typeof Icon>["name"];
+    iconSize?: number;
+} & React.JSX.IntrinsicElements["div"];
+declare const EditButton: (props: EditButtonProps) => import("react/jsx-runtime").JSX.Element;
+type EmptyImageProps = {
+    iconName?: React.ComponentProps<typeof Icon>["name"];
+    iconSize?: number;
+} & React.JSX.IntrinsicElements["div"];
+declare const EmptyImage: (props: EmptyImageProps) => import("react/jsx-runtime").JSX.Element;
+type UploadProps = React.PropsWithChildren<React.JSX.IntrinsicElements["input"]>;
+declare const Upload: (props: UploadProps) => import("react/jsx-runtime").JSX.Element;
+type ImageProps = React.PropsWithChildren<{
+    index?: number;
+} & React.JSX.IntrinsicElements["img"]>;
+declare const ImageComponent: (props: ImageProps) => import("react/jsx-runtime").JSX.Element;
+type ThumbnailRootProps = ThumbnailProviderProps & React.JSX.IntrinsicElements["div"];
+declare const Root: (props: ThumbnailRootProps) => import("react/jsx-runtime").JSX.Element;
+type IThumbnail = {
+    Root: typeof Root;
+    Image: typeof ImageComponent;
+    Upload: typeof Upload;
+    EmptyImage: typeof EmptyImage;
+    RemoveButton: typeof RemoveButton;
+    EditButton: typeof EditButton;
+    THUMBNAIL_SIZES: typeof THUMBNAIL_SIZES;
+};
+declare const Thumbnail: IThumbnail;
+export type { ThumbnailRootProps };
+export default Thumbnail;

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

@@ -0,0 +1,67 @@
+declare const useTimeInputColors: () => {
+    outlined: {
+        inactive: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        focused: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        readOnly: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        error: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+    };
+    contained: {
+        inactive: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        focused: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        readOnly: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+        error: {
+            backgroundColor: string;
+            color: string;
+            placeholder: string;
+            borderColor: string;
+        };
+    };
+};
+export default useTimeInputColors;

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

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+export type TimeInputContextType = {
+    /** 입력값 */
+    value: string;
+    /** 크기 */
+    size?: "small" | "large";
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 읽기 전용 여부 */
+    readOnly?: boolean;
+    /** focused */
+    focused?: boolean;
+    /** 방향 */
+    direction?: "column" | "row";
+    /** flex basis */
+    flexBasis?: string;
+    /** 입력 요소 참조 */
+    inputRefs?: React.RefObject<HTMLInputElement[]>;
+    /** 상태 */
+    status?: "error" | "warning" | "success";
+    /** variant */
+    variant?: "outlined" | "contained";
+    /** 값 변경 핸들러 */
+    onChange?: (value: {
+        start: string;
+        end: string;
+    }) => void;
+    /** 입력값 변경 처리 */
+    handleChange?: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;
+    /** 포커스 아웃 처리 */
+    handleBlur?: (value: string, max: number, index: number) => void;
+    /** 키 입력 처리 */
+    handleKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>, index: number) => void;
+    /** 포커스 처리 */
+    handleFocus?: () => void;
+};
+export declare const TimeInputContext: React.Context<TimeInputContextType>;
+export type TimeInputProviderProps = React.PropsWithChildren<{
+    value?: string[];
+    type?: "default" | "range";
+    disabled?: boolean;
+    readOnly?: boolean;
+    onChange?: (value: {
+        start: string;
+        end: string;
+    }) => void;
+}>;

package/dist/components/TimeInput/TimeInput.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+import { TimeInputContextType } from './TimeInput.context';
+type InputProps = {
+    index: number;
+    placeholder: string;
+} & React.JSX.IntrinsicElements["input"];
+declare const Input: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
+type TimeRangeProps = React.PropsWithChildren<React.JSX.IntrinsicElements["div"]>;
+declare const TimeRange: (props: TimeRangeProps) => import("react/jsx-runtime").JSX.Element;
+type ColonProps = React.JSX.IntrinsicElements["span"];
+declare const Colon: (props: ColonProps) => import("react/jsx-runtime").JSX.Element;
+type SeparatorProps = React.JSX.IntrinsicElements["span"];
+declare const Separator: (props: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
+type HelperTextProps = React.PropsWithChildren<{
+    className?: string;
+    warningColor?: string;
+    errorColor?: string;
+    successColor?: string;
+    defaultColor?: string;
+    infoColor?: string;
+    size?: number;
+    iconVisible?: boolean;
+}>;
+declare const HelperText: (props: HelperTextProps) => import("react/jsx-runtime").JSX.Element | null;
+type InputWrapperProps = React.PropsWithChildren<React.JSX.IntrinsicElements["div"]>;
+declare const InputWrapper: (props: InputWrapperProps) => import("react/jsx-runtime").JSX.Element;
+type LabelProps = React.PropsWithChildren<{
+    className?: string;
+    focusedColor?: string;
+}>;
+declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
+type RootProps = React.PropsWithChildren<Omit<TimeInputContextType, "inputRefs" | "handleChange" | "handleBlur" | "handleKeyDown"> & {
+    className?: string;
+}>;
+declare const Root: (props: RootProps) => import("react/jsx-runtime").JSX.Element;
+interface ITimeInput {
+    Root: typeof Root;
+    Label: typeof Label;
+    Input: typeof Input;
+    TimeRange: typeof TimeRange;
+    Colon: typeof Colon;
+    Separator: typeof Separator;
+    HelperText: typeof HelperText;
+    InputWrapper: typeof InputWrapper;
+}
+declare const TimeInput: ITimeInput;
+export default TimeInput;

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

@@ -0,0 +1,70 @@
+import { default as React } from 'react';
+export interface EventItem {
+    id: string;
+    startTime: string;
+    endTime?: string;
+    createdAt: string;
+    isAllDay?: boolean;
+    title?: string;
+}
+export type EventItemAsProps<T extends EventItem = EventItem> = {
+    id: string;
+    startTime: string;
+    endTime?: string;
+    title: string;
+    style?: React.CSSProperties;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    ref?: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+} & Omit<T, keyof EventItem>;
+export type EventItemPopperAsProps<T extends EventItem = EventItem> = {
+    id: string;
+    popperRef: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
+    popperStyle: React.CSSProperties;
+    popperAttributes: {
+        [key: string]: string;
+    };
+    title: string;
+    realStartTime?: string;
+    realEndTime?: string;
+    arrowRef: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
+    arrowStyle: React.CSSProperties;
+    arrowAttributes: {
+        [key: string]: string;
+    };
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+} & Omit<T, keyof EventItem>;
+export type WeeklyCalendarContextType<T extends EventItem> = {
+    /** start hour (하루 최소 시간)*/
+    minHour: number;
+    /** end hour (하루 최대 시간) */
+    maxHour: number;
+    /** current date */
+    currentDate?: string;
+    /** date count */
+    columnCount: number;
+    /** min step */
+    step: number;
+    /** Event List */
+    events?: Array<T>;
+    /** 새 일정 생성을 위한 드래그 기능 활성화 */
+    enableCreateByDrag?: boolean;
+    /** 기존 일정 이동을 위한 드래그 기능 활성화 */
+    enableMoveByDrag?: boolean;
+    /** 이벤트 아이템 컴포넌트 */
+    eventItemAs?: (props: EventItemAsProps<T>) => React.ReactNode;
+    /** 이벤트 아이템 popper 컴포넌트 */
+    eventItemPopperAs?: (props: EventItemPopperAsProps<T>) => React.ReactNode;
+    /** 이벤트 아이템 높이 */
+    itemHeight?: number;
+    /** 타입 */
+    type?: "default" | "noLines";
+    /** 툴팁 숨김 지연 시간 */
+    popperHideDelay?: number;
+    /** 툴팁 오프셋 */
+    popperOffset?: [number, number];
+};
+export declare const initialState: WeeklyCalendarContextType<EventItem>;
+export declare const WeeklyCalendarContext: React.Context<WeeklyCalendarContextType<any>>;
+export type WeeklyCalendarProviderProps<T extends EventItem> = React.PropsWithChildren<WeeklyCalendarContextType<T>>;

package/dist/components/WeeklyCalendar/WeeklyCalendar.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { EventItem as EventItemType, WeeklyCalendarProviderProps } from './WeeklyCalendar.context';
+type DateColumnRowProps = {
+    onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+};
+declare const DateColumnRow: (props: DateColumnRowProps) => import("react/jsx-runtime").JSX.Element;
+declare const DateCellRow: () => import("react/jsx-runtime").JSX.Element;
+declare const StandardTime: () => import("react/jsx-runtime").JSX.Element;
+interface TimelinesProps {
+    className?: string;
+    as?: (props: {
+        itemHeight: number;
+        minHour: number;
+        maxHour: number;
+        time: string;
+    }) => React.ReactNode;
+}
+declare const Timelines: (props: TimelinesProps) => import("react/jsx-runtime").JSX.Element;
+type RootProps<T extends EventItemType> = WeeklyCalendarProviderProps<T> & {
+    className?: string;
+};
+declare const Root: <T extends EventItemType>(props: RootProps<T>) => import("react/jsx-runtime").JSX.Element;
+interface IWeeklyCalendar {
+    Root: typeof Root;
+    Timelines: typeof Timelines;
+    StandardTime: typeof StandardTime;
+    DateCellRow: typeof DateCellRow;
+    DateColumnRow: typeof DateColumnRow;
+}
+declare const _default: IWeeklyCalendar;
+export default _default;