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

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

@@ -0,0 +1,219 @@
+declare const useLabelColors: () => {
+    inherit: {
+        filled: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        outlined: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        outlineBack: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        inverted: {
+            backgroundColor: "#f4f6f8";
+            color: "#454f5b";
+            borderColor: string;
+        };
+    };
+    red: {
+        filled: {
+            backgroundColor: "#f5222d";
+            color: string;
+            borderColor: string;
+        };
+        outlined: {
+            backgroundColor: string;
+            color: "#f5222d";
+            borderColor: "#f5222d";
+        };
+        outlineBack: {
+            backgroundColor: string;
+            color: "#f5222d";
+            borderColor: string;
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        inverted: {
+            backgroundColor: "#ffdbd8";
+            color: "#5c0011";
+            borderColor: string;
+        };
+    };
+    cyanBlue: {
+        filled: {
+            backgroundColor: "#00b8d9";
+            color: string;
+            borderColor: string;
+        };
+        outlined: {
+            backgroundColor: string;
+            color: "#00b8d9";
+            borderColor: "#00b8d9";
+        };
+        outlineBack: {
+            backgroundColor: string;
+            color: "#00b8d9";
+            borderColor: string;
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        inverted: {
+            backgroundColor: "#cafdf5";
+            color: "#00284c";
+            borderColor: string;
+        };
+    };
+    blue: {
+        filled: {
+            backgroundColor: "#0c68e9";
+            color: string;
+            borderColor: string;
+        };
+        outlined: {
+            backgroundColor: string;
+            color: "#0c68e9";
+            borderColor: "#0c68e9";
+        };
+        outlineBack: {
+            backgroundColor: string;
+            color: "#0c68e9";
+            borderColor: string;
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        inverted: {
+            backgroundColor: "#cde9fd";
+            color: "#001941";
+            borderColor: string;
+        };
+    };
+    purple: {
+        filled: {
+            backgroundColor: "#8e33ff";
+            color: string;
+            borderColor: string;
+        };
+        outlined: {
+            backgroundColor: string;
+            color: "#8e33ff";
+            borderColor: "#8e33ff";
+        };
+        outlineBack: {
+            backgroundColor: string;
+            color: "#8e33ff";
+            borderColor: string;
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        inverted: {
+            backgroundColor: "#efd6ff";
+            color: "#120338";
+            borderColor: string;
+        };
+    };
+    gold: {
+        filled: {
+            backgroundColor: "#ffab00";
+            color: string;
+            borderColor: string;
+        };
+        outlined: {
+            backgroundColor: string;
+            color: "#ffab00";
+            borderColor: "#ffab00";
+        };
+        outlineBack: {
+            backgroundColor: string;
+            color: "#ffab00";
+            borderColor: string;
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        inverted: {
+            backgroundColor: "#fff5cc";
+            color: "#623501";
+            borderColor: string;
+        };
+    };
+    lightGreen: {
+        filled: {
+            backgroundColor: "#1cc95c";
+            color: string;
+            borderColor: string;
+        };
+        outlined: {
+            backgroundColor: string;
+            color: "#1cc95c";
+            borderColor: "#1cc95c";
+        };
+        outlineBack: {
+            backgroundColor: string;
+            color: "#1cc95c";
+            borderColor: string;
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        inverted: {
+            backgroundColor: "#d3fcd2";
+            color: "#04503e";
+            borderColor: string;
+        };
+    };
+    deepGreen: {
+        filled: {
+            backgroundColor: "#00a76f";
+            color: string;
+            borderColor: string;
+        };
+        outlined: {
+            backgroundColor: string;
+            color: "#00a76f";
+            borderColor: "#00a76f";
+        };
+        outlineBack: {
+            backgroundColor: string;
+            color: "#00a76f";
+            borderColor: string;
+        };
+        soft: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+        };
+        inverted: {
+            backgroundColor: "#c8fad6";
+            color: "#00373b";
+            borderColor: string;
+        };
+    };
+};
+export default useLabelColors;

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+interface LabelRootProps {
+    variant?: "filled" | "outlined" | "outlineBack" | "soft" | "inverted";
+    color: "inherit" | "red" | "cyanBlue" | "blue" | "purple" | "gold" | "lightGreen" | "deepGreen";
+    text?: string;
+    size?: "medium" | "small" | "xSmall";
+    onClick?: () => void;
+}
+declare const Label: (props: LabelRootProps & React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+export default Label;

package/dist/components/LazyImage/LazyImage.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+type ImageProps = {
+    src: string;
+    rootElemRef?: React.RefObject<HTMLElement>;
+    width?: number;
+    height?: number;
+    ratio: "1:1" | "4:3" | "16:9" | "3:4" | "9:16";
+} & React.ImgHTMLAttributes<HTMLImageElement>;
+declare const LazyImage: ({ rootElemRef: _, ...props }: ImageProps) => import("react/jsx-runtime").JSX.Element;
+export default LazyImage;

package/dist/components/List/List.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { Icon } from '../Icon/Icon';
+type TextProps = {
+    value: string;
+} & React.JSX.IntrinsicElements["div"];
+type BaseListProps = {
+    label: TextProps;
+    direction?: "row" | "column";
+    size?: "s" | "m" | "l";
+} & Omit<React.JSX.IntrinsicElements["div"], "title">;
+type ListProps = ({
+    type: "default";
+    title?: never;
+    icon?: React.ComponentProps<typeof Icon>;
+} & BaseListProps) | ({
+    type: "text" | "contentsHeader";
+    title?: TextProps;
+    icon?: never;
+} & BaseListProps);
+declare const List: (props: ListProps) => import("react/jsx-runtime").JSX.Element;
+export type { ListProps };
+export default List;

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export type DefaultContextType = {
+    [key: string]: string;
+};
+export type MobilePickerContextType<T extends DefaultContextType = DefaultContextType> = {
+    selectedValue: T;
+    itemHeight: number;
+    itemViewCount: number;
+    onChange: React.Dispatch<React.SetStateAction<T>>;
+};
+export declare const MobilePickerContext: React.Context<MobilePickerContextType<any>>;

package/dist/components/MobilePicker/MobilePicker.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+import { DefaultContextType } from './MobilePicker.context';
+type ItemAsProps = {
+    onClick: () => void;
+    isSelected: boolean;
+    defaultClassName: string;
+    defaultStyle: React.CSSProperties;
+};
+type ItemProps = {
+    as?: (props: ItemAsProps) => React.ReactNode;
+    name: string;
+    value: string;
+} & React.JSX.IntrinsicElements["div"];
+declare const Item: (props: ItemProps) => 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 ColumnAsProps = {
+    onWheel: (e: React.WheelEvent) => void;
+    onTouchStart: (e: React.TouchEvent) => void;
+    onTouchMove: (e: React.TouchEvent) => void;
+    onTouchEnd: (e: React.TouchEvent) => void;
+    defaultClassName: string;
+    defaultStyle: React.CSSProperties;
+    children: React.ReactNode;
+};
+type ColumnProps = React.PropsWithChildren<{
+    as?: (props: ColumnAsProps) => React.ReactNode;
+} & React.JSX.IntrinsicElements["div"]>;
+declare const Column: (props: ColumnProps) => 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 RootAsProps = {
+    defaultClassName: string;
+    children: React.ReactNode;
+    divider: React.ReactNode;
+};
+type RootProps<T extends DefaultContextType> = React.PropsWithChildren<{
+    selectedValue: T;
+    onChange: React.Dispatch<React.SetStateAction<T>>;
+    itemHeight?: number;
+    itemViewCount?: number;
+    as?: (props: RootAsProps) => React.ReactNode;
+} & Omit<React.JSX.IntrinsicElements["div"], "onChange">>;
+declare const Root: <T extends DefaultContextType>(props: RootProps<T>) => import("react/jsx-runtime").JSX.Element;
+interface IMobilePicker {
+    Root: typeof Root;
+    Column: typeof Column;
+    Item: typeof Item;
+}
+declare const MobilePicker: IMobilePicker;
+export default MobilePicker;

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+type ModalProps = React.PropsWithChildren<{
+    visible?: boolean;
+    dimmedColor?: "transparent" | "light" | "dark";
+    selector?: string;
+    onClose?: () => void;
+}>;
+declare const Modal: (props: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export default Modal;

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

@@ -0,0 +1,75 @@
+declare const usePaginationColors: () => {
+    selected: {
+        primary: {
+            text: {
+                backgroundColor: "#00a76f";
+                color: string;
+                borderColor: string;
+            };
+            soft: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+            disabled: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        standard: {
+            text: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+            soft: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+            disabled: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+    };
+    unselected: {
+        primary: {
+            text: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+            soft: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+            disabled: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+        standard: {
+            text: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+            soft: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+            disabled: {
+                backgroundColor: string;
+                color: string;
+                borderColor: string;
+            };
+        };
+    };
+};
+export default usePaginationColors;

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

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export type PaginationContextType = {
+    colorType: "primary" | "standard";
+    variant: "text" | "soft";
+    size: "medium" | "small";
+    shapeType?: "square" | "round";
+    disabled?: boolean;
+    offset?: number;
+    limit?: number;
+    total: number;
+    currentPage: number;
+    pageCount: number;
+    onClick: ({ offset, limit }: {
+        offset: number;
+        limit: number;
+    }) => void;
+};
+export declare const PaginationContext: React.Context<PaginationContextType>;

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

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { PaginationContextType } from './Pagination.context';
+declare const Next: () => import("react/jsx-runtime").JSX.Element;
+declare const Prev: () => import("react/jsx-runtime").JSX.Element;
+type PageItemProps = {
+    active: boolean;
+    onClick: (page: number) => void;
+    page: number;
+};
+declare const PageItem: (props: PageItemProps) => import("react/jsx-runtime").JSX.Element;
+type PageListProps = {
+    itemAs?: ({ page, active, onClick, }: {
+        page: number;
+        active: boolean;
+        onClick: (page: number) => void;
+    }) => React.ReactNode;
+};
+declare const PageList: (props: PageListProps) => import("react/jsx-runtime").JSX.Element | null;
+type RootProps = {} & Omit<PaginationContextType, "currentPage">;
+declare const Root: (props: React.PropsWithChildren<RootProps>) => import("react/jsx-runtime").JSX.Element;
+interface IPagination {
+    Root: typeof Root;
+    Next: typeof Next;
+    Prev: typeof Prev;
+    PageItem: typeof PageItem;
+    PageList: typeof PageList;
+}
+declare const _default: IPagination;
+export default _default;

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

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export type PopupContextType = {
+    id: string;
+    bodyScroll?: boolean;
+    dimmedDisabled?: boolean;
+};
+export declare const PopupContext: React.Context<PopupContextType>;

package/dist/components/Popup/Popup.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+import { PopupContextType } from './Popup.context';
+declare const usePopup: () => {
+    id: string;
+    controlAttr: {
+        hide: {
+            readonly popoverTargetAction: "hide" | "show" | "toggle" | undefined;
+            readonly popoverTarget: string;
+        };
+        toggle: {
+            readonly popoverTargetAction: "hide" | "show" | "toggle" | undefined;
+            readonly popoverTarget: string;
+        };
+        show: {
+            readonly popoverTargetAction: "hide" | "show" | "toggle" | undefined;
+            readonly popoverTarget: string;
+        };
+    };
+    ref: React.RefObject<HTMLDivElement | null>;
+    show: () => void | undefined;
+    hide: () => void | undefined;
+    toggle: () => boolean | undefined;
+};
+type PopupDimmedProps = React.JSX.IntrinsicElements["button"];
+declare const Dimmed: (props: PopupDimmedProps) => import("react/jsx-runtime").JSX.Element;
+type PopupContentsProps = React.PropsWithChildren<React.JSX.IntrinsicElements["div"]>;
+declare const Contents: (props: PopupContentsProps) => import("react/jsx-runtime").JSX.Element;
+type PopupLayerProps = React.PropsWithChildren<Omit<React.JSX.IntrinsicElements["div"], "id" | "popover">>;
+declare const Layer: (props: PopupLayerProps) => import("react/jsx-runtime").JSX.Element;
+type PopupRootProps = React.PropsWithChildren<PopupContextType>;
+declare const Root: (props: PopupRootProps) => import("react/jsx-runtime").JSX.Element;
+interface IPopup {
+    Root: typeof Root;
+    Layer: typeof Layer;
+    Dimmed: typeof Dimmed;
+    Contents: typeof Contents;
+    usePopup: typeof usePopup;
+}
+declare const Popup: IPopup;
+export type { PopupRootProps };
+export default Popup;

package/dist/components/QRCode/QRCode.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+type QRCodeProps = {
+    link: string;
+    className?: string;
+    ref?: React.Ref<QRCodeRef>;
+};
+export type QRCodeRef = {
+    copy: () => Promise<void>;
+};
+declare const QRCode: (props: QRCodeProps) => import("react/jsx-runtime").JSX.Element;
+export default QRCode;

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

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+interface ScrollCalendarContextType {
+    isDragging: boolean;
+    hasMoved: boolean;
+    startX: number;
+    setIsDragging: (isDragging: boolean) => void;
+    setHasMoved: (hasMoved: boolean) => void;
+    setStartX: (startX: number) => void;
+    columnWidth?: number;
+    bodyRef?: React.RefObject<HTMLDivElement | null>;
+    columnWrapRef?: React.RefObject<HTMLDivElement | null>;
+}
+export declare const ScrollCalendarContext: React.Context<ScrollCalendarContextType>;
+export {};

package/dist/components/ScrollCalendar/ScrollCalendar.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { default as dayjs } from 'dayjs';
+interface ScrollCalendarProps {
+    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[];
+    dateClassName?: string;
+    textClassName?: string;
+}
+interface BodyProps {
+    className?: string;
+    columnWrapClassName?: string;
+    columnRender: () => React.ReactNode;
+}
+interface RootProps {
+    children: React.ReactNode;
+    columnWidth?: number;
+}
+declare const ScrollCalendar: {
+    Column: (props: ScrollCalendarProps) => import("react/jsx-runtime").JSX.Element;
+    Body: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
+    Root: (props: RootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default ScrollCalendar;

package/dist/components/ScrollSpy/ScrollSpy.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export declare function useScrollSpy(containerEl: React.RefObject<HTMLElement | null>["current"], spyRefEls: React.RefObject<HTMLElement | null>["current"][], returnType?: "id"): string | null;
+export declare function useScrollSpy(containerEl: React.RefObject<HTMLElement | null>["current"], spyRefEls: React.RefObject<HTMLElement | null>["current"][], returnType?: "index"): number | null;
+interface IScrollSpy {
+    useScrollSpy: typeof useScrollSpy;
+}
+declare const _default: IScrollSpy;
+export default _default;

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

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export type SheetContextType = {
+    drag?: boolean;
+    direction?: "top" | "bottom" | "left" | "right";
+    open?: boolean;
+    dragElastic?: number | {
+        top?: number;
+        bottom?: number;
+        left?: number;
+        right?: number;
+    };
+    dragConstraints?: {
+        top?: number;
+        bottom?: number;
+        left?: number;
+        right?: number;
+    };
+    dragDirectionLock?: boolean;
+    dragMomentum?: boolean;
+    handleClose?: () => void;
+};
+export declare const SheetContext: React.Context<SheetContextType>;

package/dist/components/Sheet/Sheet.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { HTMLMotionProps } from 'framer-motion';
+import { SheetContextType } from './Sheet.context';
+declare const Dimmed: () => import("react/jsx-runtime").JSX.Element | null;
+type SheetContentProps = React.PropsWithChildren<HTMLMotionProps<"div">>;
+declare const Content: (props: SheetContentProps) => import("react/jsx-runtime").JSX.Element;
+type SheetRootProps = React.PropsWithChildren<SheetContextType>;
+declare const Root: (props: SheetRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ISheet {
+    Root: typeof Root;
+    Content: typeof Content;
+    Dimmed: typeof Dimmed;
+}
+declare const Sheet: ISheet;
+export type { SheetRootProps };
+export default Sheet;

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

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+type SliderProps = {
+    readOnly?: boolean;
+    disabled?: boolean;
+    invert?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    color?: React.CSSProperties["color"];
+    labelAlwaysOn?: boolean;
+    marks?: {
+        value: number;
+        label: string | number | React.ReactNode;
+    }[];
+    scale?: (value: number) => number;
+    label?: ((value: number) => string) | null;
+};
+type SingleProps = {
+    defaultValue?: number;
+    thumbChildren?: React.ReactNode;
+    onChange?: (value: number) => void;
+} & SliderProps;
+declare const Single: (props: SingleProps) => import("react/jsx-runtime").JSX.Element;
+type DualProps = {
+    defaultValue?: [number, number];
+    thumbChildren?: [React.ReactNode?, React.ReactNode?];
+    onChange?: (value: [number, number]) => void;
+} & SliderProps;
+declare const Dual: (props: DualProps) => import("react/jsx-runtime").JSX.Element;
+interface ISlider {
+    Single: typeof Single;
+    Dual: typeof Dual;
+}
+declare const _default: ISlider;
+export default _default;