dst-rg 1.0.0 → 1.0.1

package/dist/index.d.ts

@@ -0,0 +1,504 @@
+import * as React$1 from 'react';
+import React__default, { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { inputProps } from '@/components/Input/_.types';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { textAreaProps } from '@/components/TextArea/_.types';
+
+type QAItem = {
+    question: React__default.ReactNode;
+    answer: React__default.ReactNode;
+};
+interface AccordionDemoProps {
+    type?: "single" | "multiple";
+    collapsible?: boolean;
+    items: QAItem[];
+    accordionClassName?: string;
+    itemClassName?: string;
+    questionClassName?: string;
+    answerClassName?: string;
+    iconOpen?: React__default.ComponentType<React__default.SVGProps<SVGSVGElement>>;
+    iconClosed?: React__default.ComponentType<React__default.SVGProps<SVGSVGElement>>;
+}
+
+declare function AccordionDemo({ type, collapsible, items, accordionClassName, itemClassName, questionClassName, answerClassName, iconClosed, iconOpen }: Readonly<AccordionDemoProps>): React$1.JSX.Element;
+
+type Position = "none" | "top" | "topstart" | "topcenter" | "topend" | "bottom" | "bottomstart" | "bottomcenter" | "bottomend" | "left" | "leftstart" | "leftcenter" | "leftend" | "right" | "rightstart" | "rightcenter" | "rightend";
+interface TooltipWrapperProps {
+    children: ReactNode;
+    content: string;
+    description?: string;
+    className?: string;
+    contentClassName?: string;
+    descriptionClassName?: string;
+    sideOffset?: number;
+    position?: Position;
+    dir?: "rtl" | "ltr";
+}
+
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type AvatarType = "single" | "group" | "labled";
+type TooltipDirection = "rtl" | "ltr";
+interface AvatarProps {
+    type?: AvatarType;
+    size?: AvatarSize;
+    imgList?: Image[];
+    img?: Image;
+    showAmount?: number;
+    showAddBtn?: boolean;
+    addBtnAction?: () => void;
+    notifyIcon?: React.ReactNode;
+    notifyColor?: string;
+    title?: string;
+    description?: string;
+    iconBorder?: boolean;
+    tooltip?: {
+        content: string;
+        description?: string;
+        className?: string;
+        contentClassName?: string;
+        descriptionClassName?: string;
+        sideOffset?: number;
+        position?: Position;
+        dir?: TooltipDirection;
+    };
+}
+interface Image {
+    src?: string;
+    icon?: React.ReactNode;
+    label?: string;
+    backUpSrc?: string;
+    description?: string;
+    alt?: string;
+}
+
+declare const Avatar: ({ type, size, imgList, img, showAmount, showAddBtn, notifyColor, notifyIcon, title, description, iconBorder, tooltip, addBtnAction, }: AvatarProps) => React$1.JSX.Element;
+
+type BadgeProps = {
+    className?: string;
+    size?: "sm" | "md" | "lg";
+    type?: "pillColor" | "pillOutline" | "badgeColor" | "badgeModern";
+    color?: "gray" | "brand" | "error" | "success" | "grayBlue" | "blueLight" | "blue" | "indigo" | "purple" | "pink" | "orange";
+    dir?: "ltr" | "rtl";
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    closable?: boolean;
+    onClose?: () => void;
+};
+
+declare function Badge({ className, size, type, color, dir, icon, closable, onClose, children, ...props }: Readonly<BadgeProps>): React$1.JSX.Element;
+
+interface BreadcrumbTypes {
+    link?: string;
+    title: string;
+}
+interface BreadcrumbProps {
+    breadCrumbLink: BreadcrumbTypes[];
+    type?: "slash" | "chevron";
+    dir?: "rtl" | "ltr";
+    navClassName?: string;
+    listClassName?: string;
+    listItemClassName?: string;
+    linkClassName?: string;
+    separatorClassName?: string;
+}
+
+declare const Breadcrumb: React.FC<BreadcrumbProps>;
+
+type ButtonProps = {
+    variant?: "primary" | "secondaryGray" | "secondaryColor" | "tertiaryGray" | "tertiaryColor" | "linkGray" | "linkColor";
+    size?: "sm" | "md" | "lg" | "xl" | "2xl";
+    fullWidth?: boolean;
+    loading?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    onClick?: () => void;
+    asChild?: boolean;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    type?: "button" | "submit" | "reset";
+};
+
+declare const Button: React__default.FC<ButtonProps>;
+
+interface CommonCheckboxProps$3 {
+    id?: string;
+    name: string;
+    checkboxIndex?: number;
+    checked?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    size?: "sm" | "md" | "lg";
+    type?: "radio" | "checkbox";
+    disabled?: boolean;
+}
+interface CheckboxProps extends CommonCheckboxProps$3 {
+    defaultChecked?: boolean;
+    label?: string;
+    value?: string;
+    onClick?: () => void;
+    children?: React.ReactNode;
+    isIndeterminate?: boolean;
+}
+
+declare const Checkbox: ({ size, children, id, disabled, checkboxIndex, isIndeterminate, checked, onChange, onClick, defaultChecked, name, label, ...props }: Readonly<CheckboxProps>) => React$1.JSX.Element;
+
+interface CommonCheckboxProps$2 {
+    id?: string;
+    checkboxIndex?: number;
+    checked?: boolean;
+    size?: "sm" | "md";
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    inputProps?: object;
+    type?: "radio" | "checkbox";
+    disabled?: boolean;
+}
+interface paymentCardProps$1 extends CommonCheckboxProps$2 {
+    title: string;
+    description: string;
+    value?: string;
+    footer: ReactNode;
+    icon: ReactNode;
+    name?: string;
+    cardOnclick?: () => void;
+}
+
+declare const PaymentCard: ({ size, title, description, checked, disabled, id, value, footer, icon, type, onChange, name, cardOnclick, inputProps, checkboxIndex, }: Readonly<paymentCardProps$1>) => React$1.JSX.Element;
+
+interface CommonCheckboxProps$1 {
+    id?: string;
+    checkboxIndex?: number;
+    checked?: boolean;
+    size?: "sm" | "md";
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    inputProps?: object;
+    type?: "radio" | "checkbox";
+    disabled?: boolean;
+}
+interface PlanCardProps extends CommonCheckboxProps$1 {
+    value?: string;
+    price: string;
+    per: string;
+    title: string;
+    description: string;
+    hasHeader?: boolean;
+    headerTitle?: string;
+    badgeContent?: ReactNode;
+    defaultChecked?: boolean;
+    label?: string;
+    name?: string;
+    onClick?: () => void;
+    onCardClick?: () => void;
+    children?: React.ReactNode;
+    isIndeterminate?: boolean;
+}
+
+declare const PlanCard: ({ hasHeader, per, size, title, description, price, badgeContent, checked, disabled, type, name, value, onChange, onCardClick, id, checkboxIndex, }: Readonly<PlanCardProps>) => React$1.JSX.Element;
+
+interface CommonCheckboxProps {
+    id?: string;
+    checkboxIndex?: number;
+    checked?: boolean;
+    size?: "sm" | "md";
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    inputProps?: object;
+    type?: "radio" | "checkbox";
+    disabled?: boolean;
+}
+interface paymentCardProps extends CommonCheckboxProps {
+    description: string;
+    value?: string;
+    name?: string;
+    userFullName: string;
+    cardOnclick?: () => void;
+    inputProps?: object;
+    username: string;
+}
+
+declare const UserCard: ({ size, description, checked, disabled, id, value, type, onChange, name, inputProps, username, checkboxIndex, userFullName, cardOnclick, }: Readonly<paymentCardProps>) => React$1.JSX.Element;
+
+interface DropdownWrapperProps {
+    children: React.ReactNode;
+    toggleBtn: ButtonProps;
+    direction?: "down" | "up" | "left" | "right";
+    alignment?: "left" | "right" | "top" | "bottom";
+    dropDownClassName?: string;
+    autoAdjust?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+
+declare const Dropdown: ({ children, toggleBtn, direction, alignment, dropDownClassName, autoAdjust, open: openProp, onOpenChange, }: DropdownWrapperProps) => React$1.JSX.Element;
+
+type AcceptableExtension = "png" | "jpg" | "jpeg" | "svg" | "gif" | "webp" | "pdf" | "docx" | "xlsx" | "mp4" | "mp3" | "wav";
+interface UploadItemProps {
+    id: number;
+    title: string;
+    progressValue?: number;
+    description: string;
+    percentage?: number;
+    error: boolean;
+    size: string;
+    icon?: React.ReactNode;
+    status: string;
+}
+interface FileUploaderProps {
+    icon?: React.ReactNode;
+    mainText: string;
+    subText: string;
+    formatText: string;
+    acceptableFormats?: AcceptableExtension[] | AcceptableExtension | "";
+    disable?: boolean;
+    items?: UploadItemProps[];
+    loadType?: "progressBar" | "progressFill";
+    multiItem?: boolean;
+    onDelete: (id: number) => void;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+declare const FileUploader: ({ icon, mainText, subText, formatText, acceptableFormats, disable, items, loadType, multiItem, onChange, onDelete, }: FileUploaderProps) => React$1.JSX.Element;
+
+interface ImageMagnifyProps {
+    /** Image source URL */
+    src: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Zoom level multiplier (e.g., 2 = 200% zoom) */
+    zoom?: number;
+    /** Size of the magnifying lens in pixels (square) */
+    lensSize?: number;
+    /** Additional CSS class name */
+    className?: string;
+    /** Tailwind classes applied when lens is visible */
+    lensVisibleClassName?: string;
+    /** Tailwind classes applied when zoom pane is visible */
+    zoomPaneVisibleClassName?: string;
+    /** Position of the zoom pane relative to the image */
+    zoomPanePosition?: 'right' | 'left';
+    /** Enable touch toggle functionality on mobile devices */
+    touchToggle?: boolean;
+    /** Custom zoom pane size in pixels (optional) */
+    zoomPaneSize?: number;
+    /** Zoom mode: 'pane' for separate zoom pane, 'inline' for zoom directly on image */
+    zoomMode?: 'pane' | 'inline';
+}
+
+declare function ImageMagnify({ src, alt, zoom, lensSize, className, lensVisibleClassName, zoomPaneVisibleClassName, touchToggle, zoomPaneSize, zoomPanePosition, zoomMode, }: ImageMagnifyProps): any;
+
+declare const Input: ({ size, type, inputType, disabled, id, label, required, destructive, destructiveText, hintText, placeholder, helpIcon, icon, leadingTextValue, className, trailingDropdownOptions, trailingDropdownDefault, onChange, value, tooltipProps, trailingButtonText, name, labelClass, labelStarClass, shabaLabelSize, autoFocus, ...props }: Readonly<inputProps>) => any;
+
+interface MessageProps {
+    variant?: "primary" | "gray" | "white";
+    sender: "user" | "admin";
+    senderName: string;
+    message?: string;
+    children?: React.ReactNode;
+    avatar?: React.ReactElement<typeof Avatar> | null;
+    date: string;
+    className?: string;
+    dir?: "rtl" | "ltr";
+}
+
+declare const Message: ({ variant, sender, senderName, message, children, avatar, date, className, dir, }: MessageProps) => React$1.JSX.Element;
+
+interface MetricProps {
+    title?: string;
+    value: string;
+    description?: string;
+    icon?: React__default.ReactNode;
+    statistic?: React__default.ReactNode;
+    chartImg?: React__default.ReactNode;
+    chartPosition?: "side" | "bottom";
+    actionBtns?: React__default.ReactNode[];
+    toggleBtn: React__default.ReactNode;
+    iconPosition?: "topWithTitle" | "topAlone" | "iconSide" | "hidden";
+    statisticPosition?: "row-between" | "row-next" | "row-below";
+    dir?: "rtl" | "ltr";
+    iconType?: "success" | "notification" | "secondary";
+    titleType?: "normal" | "bold";
+}
+
+declare const Metrics: ({ title, value, description, icon, iconType, statistic, chartImg, chartPosition, actionBtns, toggleBtn, iconPosition, statisticPosition, titleType, }: MetricProps) => any;
+
+type modalVariantProps = {
+    size?: "sm" | "md" | "lg";
+    overflow?: "hidden" | "auto";
+    closeHandler: () => void;
+    children: React.ReactNode;
+    modalTitle?: string;
+    closeIconStroke?: string;
+    position?: "center" | "bottom";
+    showModal: boolean;
+    icon?: React.ReactNode;
+    headerIconDir?: "flex-col" | "flex-row";
+    modalContentStyle?: string;
+    showCloseIcon?: boolean;
+};
+
+declare const Modal: ({ children, closeHandler, size, modalTitle, overflow, closeIconStroke, position, icon, headerIconDir, showModal, modalContentStyle, showCloseIcon, }: modalVariantProps) => any;
+
+type PaginationType = "default" | "card-minimal-right-aligned" | "card-minimal-left-aligned" | "card-minimal-center-aligned" | "card-button-group-right-aligned" | "card-button-group-left-aligned" | "card-button-group-center-aligned";
+type PaginationProps = {
+    currentPage: number;
+    totalPages: number;
+    onPageChange?: (page: number) => void;
+    type?: PaginationType;
+    className?: string;
+    justifyClassName?: string;
+    activeClassName?: string;
+    previousClassName?: string;
+    nextClassName?: string;
+    prevIcon?: ReactNode;
+    nextIcon?: ReactNode;
+    firstIcon?: ReactNode;
+    lastIcon?: ReactNode;
+    showFirstLast?: boolean;
+    dir?: string;
+    hasText?: boolean;
+    labels?: {
+        next: string;
+        prev: string;
+        first: string;
+        last: string;
+        page: string;
+        of: string;
+    };
+} & React.ComponentProps<"nav">;
+
+declare const Pagination: ({ currentPage, totalPages, onPageChange, type, dir, className, activeClassName, previousClassName, nextClassName, prevIcon, nextIcon, firstIcon, lastIcon, showFirstLast, labels, hasText, ...props }: PaginationProps & {
+    type?: string;
+}) => React$1.JSX.Element;
+
+interface SliderProps extends ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+    defaultValue?: [number, number];
+    className?: string;
+    trackClassName?: string;
+    rangeClassName?: string;
+    thumbClassName?: string;
+    showValue?: boolean;
+    valueClassName?: string;
+    isPercentage?: boolean;
+    valuePosition?: "top" | "bottom";
+    min?: number;
+    max?: number;
+    onValueChange?: (value: [number, number]) => void;
+    dir?: "ltr" | "rtl";
+}
+
+declare function PriceSlider({ defaultValue, min, max, className, trackClassName, rangeClassName, thumbClassName, showValue, valueClassName, isPercentage, valuePosition, dir, onValueChange, ...props }: Readonly<SliderProps>): React$1.JSX.Element;
+
+declare const Progress: React$1.ForwardRefExoticComponent<any>;
+
+type RadioProps = {
+    id?: string;
+    name: string;
+    className?: string;
+    value: string;
+    disabled?: boolean;
+    checked?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    size?: "sm" | "md";
+    children?: React.ReactNode;
+    cardOnclick?: () => void;
+};
+
+declare const Radio: ({ name, value, checked, onChange, size, disabled, className, children, id, ...props }: Readonly<RadioProps>) => React$1.JSX.Element;
+
+type configProps = {
+    label?: string;
+    name: string;
+    errorText?: string;
+    hintText?: string;
+    isRequiredInput?: boolean;
+    canSelectZero?: boolean;
+};
+type selectPropsType = {
+    config: configProps;
+    isLoading?: boolean;
+    disabled?: boolean;
+    className?: string;
+    tooltipClass?: string;
+    tooltipTitle?: string | React.ReactNode;
+    selectedValueLabel: string;
+    onChange: (value: any) => void;
+    options: {
+        title: string;
+        value: number;
+    }[];
+    buttonClass?: string;
+    contentClass?: string;
+    labelClass?: string;
+    labelStarClass?: string;
+};
+
+declare const Select: ({ config, isLoading, disabled, className, tooltipClass, tooltipTitle, selectedValueLabel, onChange, options, buttonClass, contentClass, labelClass, labelStarClass }: selectPropsType) => React$1.JSX.Element;
+
+interface SwitchProps extends React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+    thumbClassName?: string;
+    label?: string;
+    labelClassName?: string;
+    description?: string;
+    descriptionClassName?: string;
+    onToggle: () => void;
+}
+
+declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<any>>;
+
+interface TabsProps extends React.ComponentProps<typeof TabsPrimitive.Root> {
+    direction?: "vertical" | "horizontal";
+    dir?: "rtl" | "ltr";
+}
+
+declare const Tabs: (({ className, direction, dir, ...props }: Readonly<TabsProps>) => React$1.JSX.Element) & {
+    List: any;
+    Trigger: any;
+    Content: any;
+};
+
+type TagProps = {
+    pin?: boolean;
+    number?: number;
+    checkbox?: string;
+    checkboxIndex?: number;
+    avatar?: string;
+    className?: string;
+    size?: "sm" | "md" | "lg";
+    dir?: "ltr" | "rtl";
+    children?: React.ReactNode;
+    icon?: "x-close";
+};
+
+declare const Tag: ({ className, size, number, pin, avatar, children, checkbox, dir, icon, checkboxIndex, ...props }: Readonly<TagProps>) => React$1.JSX.Element;
+
+declare const TextArea: ({ row, label, required, destructive, disabled, destructiveText, hintText, placeholder, helpIcon, onChange, id, tooltipProps, className, value, name, labelClass, labelStarClass, autoFocus, ...props }: Readonly<textAreaProps>) => React$1.JSX.Element;
+
+type ToastPosition = "top-left" | "top-center" | "top-right" | "middle-center" | "bottom-left" | "bottom-center" | "bottom-right";
+interface ToastContainerProps {
+    type?: "success" | "error" | "info" | "warning";
+    duration?: number;
+    animation?: "fade" | "slide" | "scale";
+    position?: ToastPosition;
+    showProgress?: boolean;
+}
+type ToastOptions = ToastContainerProps & {
+    message: string;
+};
+
+declare const ToastContainer: ({ type, position, duration, animation, showProgress, }: ToastContainerProps) => React$1.JSX.Element;
+
+declare function setToastDefaults(options: Partial<Omit<ToastOptions, "message">>): void;
+declare function toast(options: ToastOptions): void;
+declare function toast(message: string): void;
+declare namespace toast {
+    var success: (message: string, opts?: Partial<ToastOptions>) => void;
+    var error: (message: string, opts?: Partial<ToastOptions>) => void;
+    var info: (message: string, opts?: Partial<ToastOptions>) => void;
+    var warning: (message: string, opts?: Partial<ToastOptions>) => void;
+}
+
+declare const TooltipWrapper: ({ children, content, description, className, contentClassName, descriptionClassName, sideOffset, position, dir, }: TooltipWrapperProps & {
+    dir?: "rtl" | "ltr";
+}) => React$1.JSX.Element;
+
+export { AccordionDemo, Avatar, Badge, Breadcrumb, Button, Checkbox, Dropdown, FileUploader, ImageMagnify, Input, Message, Metrics, Modal, Pagination, PaymentCard, PlanCard, PriceSlider, Progress, Radio, Select, Switch, Tabs, Tag, TextArea, ToastContainer, TooltipWrapper, UserCard, setToastDefaults, toast };