luna-components-library 1.1.34 → 1.1.37

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

@@ -1,14 +1,14 @@
 import { default as React } from 'react';
+import { Styles } from '../types';
+type AccordionElements = 'container' | 'header' | 'content' | 'arrow' | 'innerContent';
 export type AccordionProps = {
-    active: boolean;
-    onClick: () => void;
-    header: React.ReactNode;
-    content: React.ReactNode;
+    title: React.ReactNode;
+    children: React.ReactNode;
+    defaultActive?: boolean;
+    active?: boolean;
+    onClick?: () => void;
+    styles?: Styles<AccordionElements>;
     className?: string;
-    containerClassName?: string;
-    headerClassName?: string;
-    contentClassName?: string;
-    style?: React.CSSProperties;
 };
-declare const Accordion: ({ active, onClick, header, content, className, containerClassName, headerClassName, contentClassName, style }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+declare const Accordion: ({ title, children, defaultActive, active: externalActive, onClick, className, styles, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 export default Accordion;

package/dist/src/components/Anchor.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
-export type AnchorVariant = 'none' | 'primary' | 'secondary' | 'outline';
-export type AnchorSize = 'sm' | 'md' | 'lg';
+import { Size, AnchorVariant } from '../types';
+export type { AnchorVariant };
+export type AnchorSize = Size;
 export type AllAnchorProps = React.ComponentPropsWithoutRef<'a'>;
 export type AnchorProps = {
     children?: React.ReactNode;
@@ -8,12 +9,9 @@ export type AnchorProps = {
     size?: AnchorSize;
     href?: string;
     className?: string;
-    containerClassName?: string;
-    variantClassName?: string;
-    sizeClassName?: string;
     target?: string;
     rel?: string;
     style?: React.CSSProperties;
 };
-declare const Anchor: ({ children, variant, size, href, className, containerClassName, variantClassName, sizeClassName, target, rel, style, ...props }: AnchorProps & AllAnchorProps) => import("react/jsx-runtime").JSX.Element;
+declare const Anchor: ({ children, variant, size, href, className, target, rel, style, ...props }: AnchorProps & AllAnchorProps) => import("react/jsx-runtime").JSX.Element;
 export default Anchor;

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

@@ -1,18 +1,19 @@
 import { default as React } from 'react';
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'link';
-export type ButtonSize = 'sm' | 'md' | 'lg';
+import { ClassNames, Styles, ButtonVariant, ButtonSize } from '../types';
+export type { ButtonVariant, ButtonSize };
 export type AllButtonProps = React.ComponentPropsWithoutRef<'button'>;
+export type ButtonClassNames = ClassNames<'button' | 'container' | 'variant' | 'size'>;
+export type ButtonStyles = Styles<'button'>;
 export type ButtonProps = {
     children: React.ReactNode;
     variant?: ButtonVariant;
     size?: ButtonSize;
-    onClick?: () => void;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     disabled?: boolean;
+    classNames?: ButtonClassNames;
+    styles?: ButtonStyles;
     className?: string;
-    containerClassName?: string;
-    variantClassName?: string;
-    sizeClassName?: string;
     style?: React.CSSProperties;
 };
-declare const Button: ({ children, variant, size, onClick, disabled, className, containerClassName, variantClassName, sizeClassName, style, ...props }: AllButtonProps & ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ children, variant, size, onClick, disabled, classNames, styles, className, style: extraStyle, ...props }: AllButtonProps & ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/src/components/Card.d.ts

@@ -1,15 +1,18 @@
 import { default as React } from 'react';
-export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
-export type CardShadow = 'none' | 'sm' | 'md' | 'lg';
+import { CardPadding, CardShadow } from '../types';
+export type { CardPadding, CardShadow };
 export type CardProps = {
     children: React.ReactNode;
-    title?: string;
+    title?: React.ReactNode;
     className?: string;
-    containerClassName?: string;
-    titleClassName?: string;
     padding?: CardPadding;
     shadow?: CardShadow;
-    style?: React.CSSProperties;
+    styles?: {
+        container?: React.CSSProperties;
+        titleContainer?: React.CSSProperties;
+        title?: React.CSSProperties;
+        content?: React.CSSProperties;
+    };
 };
-declare const Card: ({ children, title, className, containerClassName, titleClassName, padding, shadow, style, }: CardProps) => import("react/jsx-runtime").JSX.Element;
+declare const Card: ({ children, title, className, padding, shadow, styles, }: CardProps) => import("react/jsx-runtime").JSX.Element;
 export default Card;

package/dist/src/components/DataTable.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { ClassNames, Styles } from '../types';
+export type DataTableColumn = {
+    key: string;
+    label: React.ReactNode;
+    sortable?: boolean;
+    filterable?: boolean;
+    filterOptions?: {
+        label: string;
+        value: any;
+    }[];
+    render?: (value: any, row: any) => React.ReactNode;
+};
+export type DataTableTexts = {
+    showing?: string;
+    results?: string;
+    prev?: string;
+    next?: string;
+    noData?: string;
+    filterPlaceholder?: string;
+};
+export type DataTableClassNames = ClassNames<'container' | 'table' | 'thead' | 'tbody' | 'tr' | 'th' | 'td' | 'pagination' | 'searchContainer'>;
+export type DataTableStyles = Styles<'container' | 'table' | 'thead' | 'tbody' | 'tr' | 'th' | 'td'>;
+export type DataTableProps = {
+    columns: DataTableColumn[];
+    data: any[];
+    pagination?: boolean;
+    pageSize?: number;
+    selectable?: boolean;
+    onSelectionChange?: (selectedRows: any[]) => void;
+    onRowClick?: (row: any) => void;
+    onRowDoubleClick?: (row: any) => void;
+    searchable?: boolean;
+    texts?: DataTableTexts;
+    classNames?: DataTableClassNames;
+    styles?: DataTableStyles;
+    className?: string;
+};
+declare const DataTable: ({ columns, data, pagination, pageSize, selectable, onSelectionChange, onRowClick, onRowDoubleClick, searchable, texts, classNames, styles, className, }: DataTableProps) => import("react/jsx-runtime").JSX.Element;
+export default DataTable;

package/dist/src/components/DropDown.d.ts

@@ -1,19 +1,21 @@
 import { default as React } from 'react';
-type DropDownOption = {
-    value: string;
+import { ClassNames, Styles } from '../types';
+export type DropDownOption = {
+    value: string | number;
     label: React.ReactNode;
 };
+export type DropDownClassNames = ClassNames<'container' | 'trigger' | 'panel' | 'option'>;
+export type DropDownStyles = Styles<'container' | 'trigger' | 'panel' | 'option'>;
 export type DropDownProps = {
-    toggle: React.ReactNode;
-    options: React.ReactNode[] | DropDownOption[];
-    selected: React.ReactNode;
-    onChange: (value: React.ReactNode) => void;
+    options: (string | number | DropDownOption)[];
+    value?: string | number | React.ReactNode;
+    onChange: (value: any) => void;
+    placeholder?: string;
+    toggle?: React.ReactNode;
+    classNames?: DropDownClassNames;
+    styles?: DropDownStyles;
+    disabled?: boolean;
     className?: string;
-    containerClassName?: string;
-    dropdownClassName?: string;
-    optionsContainerClassName?: string;
-    optionClassName?: string;
-    style?: React.CSSProperties;
 };
-declare const DropDown: ({ toggle, options, selected, onChange, className, containerClassName, dropdownClassName, optionsContainerClassName, optionClassName, style }: DropDownProps) => import("react/jsx-runtime").JSX.Element;
+declare const DropDown: ({ options, value, onChange, placeholder, toggle, classNames, styles, disabled, className, }: DropDownProps) => import("react/jsx-runtime").JSX.Element;
 export default DropDown;

package/dist/src/components/Input.d.ts

@@ -1,9 +1,11 @@
 import { default as React } from 'react';
-export type InputVariant = 'none' | 'primary' | 'secondary' | 'outline' | 'danger' | 'success';
-export type InputSize = 'sm' | 'md' | 'lg' | 'xl';
+import { ClassNames, Styles, InputVariant, InputSize } from '../types';
+export type { InputVariant, InputSize };
 export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' | 'color' | 'file' | 'hidden' | 'image' | 'range' | 'reset' | 'submit';
-export type AllInputProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'onChange'>;
-export type InputProps = {
+export type AllInputProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'onChange' | 'value'>;
+export type InputClassNames = ClassNames<'container' | 'input' | 'label'>;
+export type InputStyles = Styles<'container' | 'input' | 'label'>;
+type InputCommonProps = {
     children?: React.ReactNode;
     variant?: InputVariant;
     inputSize?: InputSize;
@@ -16,15 +18,22 @@ export type InputProps = {
     disabled?: boolean;
     required?: boolean;
     readOnly?: boolean;
+    mask?: string;
+    maskChar?: string;
+    useCurrency?: boolean;
+    currency?: string;
+    locale?: string;
+    minFractionDigits?: number;
+    maxFractionDigits?: number;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    classNames?: InputClassNames;
+    styles?: InputStyles;
     className?: string;
-    containerClassName?: string;
-    inputClassName?: string;
-    variantClassName?: string;
-    sizeClassName?: string;
     style?: React.CSSProperties;
     id?: string;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
+    name?: string;
 };
-declare const Input: ({ children, variant, type, inputSize, placeholder, value, onChange, onFocus, onBlur, disabled, required, readOnly, className, containerClassName, inputClassName, variantClassName, sizeClassName, style, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: InputProps & AllInputProps) => import("react/jsx-runtime").JSX.Element;
+export type InputProps = InputCommonProps;
+declare const Input: ({ children, variant, type, inputSize, placeholder, value: controlledValue, onChange, onFocus, onBlur, disabled, required, readOnly, id, name, mask, maskChar, useCurrency, currency, locale, minFractionDigits, maxFractionDigits, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, classNames, styles, className: extraClassName, style: extraStyle, ...props }: InputProps & AllInputProps) => import("react/jsx-runtime").JSX.Element;
 export default Input;

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
+import { ModalSize } from '../types';
 export interface ModalProps {
     /** Whether the modal is visible */
     show: boolean;

package/dist/src/components/MultiSelect.d.ts

@@ -0,0 +1,26 @@
+import { ClassNames, Styles } from '../types';
+export type MultiSelectOption = {
+    label: string;
+    value: any;
+    disabled?: boolean;
+};
+export type MultiSelectClassNames = ClassNames<'container' | 'trigger' | 'label' | 'panel' | 'header' | 'filterInput' | 'list' | 'item' | 'chip' | 'chipIcon'>;
+export type MultiSelectStyles = Styles<'container' | 'trigger' | 'panel' | 'header' | 'item' | 'chip'>;
+export type MultiSelectProps = {
+    options: MultiSelectOption[];
+    value: any[];
+    onChange: (value: any[]) => void;
+    id?: string;
+    placeholder?: string;
+    display?: 'comma' | 'chip';
+    filter?: boolean;
+    filterPlaceholder?: string;
+    selectAll?: boolean;
+    maxSelectedLabels?: number;
+    classNames?: MultiSelectClassNames;
+    styles?: MultiSelectStyles;
+    disabled?: boolean;
+    className?: string;
+};
+declare const MultiSelect: ({ options, value, onChange, id, placeholder, display, filter, filterPlaceholder, selectAll, maxSelectedLabels, classNames, styles, disabled, className, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelect;

package/dist/src/components/Popconfirm.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { ClassNames, Styles, PopconfirmPosition } from '../types';
+export type PopconfirmClassNames = ClassNames<'container' | 'popover' | 'title' | 'description' | 'actions' | 'okButton' | 'cancelButton'>;
+export type PopconfirmStyles = Styles<'container' | 'popover' | 'title' | 'description'>;
+export type PopconfirmProps = {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    onConfirm: () => void;
+    onCancel?: () => void;
+    okText?: string;
+    cancelText?: string;
+    position?: PopconfirmPosition;
+    children: React.ReactElement;
+    classNames?: PopconfirmClassNames;
+    styles?: PopconfirmStyles;
+    disabled?: boolean;
+    className?: string;
+};
+declare const Popconfirm: ({ title, description, onConfirm, onCancel, okText, cancelText, position, children, classNames, styles, disabled, className, }: PopconfirmProps) => import("react/jsx-runtime").JSX.Element;
+export default Popconfirm;

package/dist/src/components/Preloader.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 export type PreloaderProps = {
     /** Loading state - if true, preloader is shown */
     isLoading?: boolean;
-    /** Duration in milliseconds before auto-hide */
+    /** Duration in milliseconds before auto-hide (only for internal state) */
     duration?: number;
     /** Background color overlay */
     backgroundColor?: string;
@@ -21,7 +21,10 @@ export type PreloaderProps = {
     /** Callback when preloader finishes */
     onComplete?: () => void;
     /** Custom inline styles */
-    style?: React.CSSProperties;
+    styles?: {
+        overlay?: React.CSSProperties;
+        spinner?: React.CSSProperties;
+    };
 };
-declare const Preloader: ({ isLoading: externalLoading, duration, backgroundColor, accentColor, size, borderWidth, className, spinnerClassName, zIndex, onComplete, style }: PreloaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Preloader: ({ isLoading: externalLoading, duration, backgroundColor, accentColor, size, borderWidth, className, spinnerClassName, zIndex, onComplete, styles }: PreloaderProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Preloader;

package/dist/src/components/ProgressBar.d.ts

@@ -1,17 +1,27 @@
 import { default as React } from 'react';
-export type ProgressBarVariant = 'primary' | 'success' | 'warning' | 'danger' | 'dark' | 'light';
+import { ProgressBarVariant } from '../types';
+export type { ProgressBarVariant };
 export type ProgressBarProps = {
+    /** The current progress value */
     progress: number;
-    max: number;
-    min: number;
-    'aria-label': string;
-};
-export type ProgressBarPropsWithClassName = ProgressBarProps & {
-    className?: React.CSSProperties;
-    style?: React.CSSProperties;
-    containerClassName?: string;
-    barClassName?: string;
+    /** Maximum value (default: 100) */
+    max?: number;
+    /** Minimum value (default: 0) */
+    min?: number;
+    /** Accessibility label */
+    'aria-label'?: string;
+    /** Color variant */
     variant?: ProgressBarVariant;
+    /** Whether to show the percentage text */
+    showPercentage?: boolean;
+    /** Custom className for the container */
+    className?: string;
+    /** Custom styles */
+    styles?: {
+        container?: React.CSSProperties;
+        bar?: React.CSSProperties;
+        text?: React.CSSProperties;
+    };
 };
-declare const ProgressBar: ({ progress, max, min, "aria-label": ariaLabel, className, style, containerClassName, barClassName, variant }: ProgressBarPropsWithClassName) => import("react/jsx-runtime").JSX.Element;
+declare const ProgressBar: ({ progress, max, min, "aria-label": ariaLabel, variant, showPercentage, className, styles, }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
 export default ProgressBar;

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

@@ -0,0 +1,16 @@
+import { ClassNames, Styles } from '../types';
+export type QRCodeClassNames = ClassNames<'container' | 'image'>;
+export type QRCodeStyles = Styles<'container' | 'image'>;
+export type QRCodeProps = {
+    value: string;
+    size?: number;
+    color?: string;
+    bgColor?: string;
+    bordered?: boolean;
+    classNames?: QRCodeClassNames;
+    styles?: QRCodeStyles;
+    errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+    className?: string;
+};
+declare const QRCode: ({ value, size, color, bgColor, bordered, classNames, styles, errorCorrectionLevel, className, }: QRCodeProps) => import("react/jsx-runtime").JSX.Element;
+export default QRCode;

package/dist/src/components/ScrollTop.d.ts

@@ -1,31 +1,13 @@
 import { default as React } from 'react';
+import { CornerPosition } from '../types';
 export type ScrollTopProps = {
-    /** Scroll position threshold to show the button (in pixels) */
     threshold?: number;
-    /** Custom className for the button */
     className?: string;
-    /** Custom icon/content for the button */
     children?: React.ReactNode;
-    /** Position of the button */
-    position?: 'bottom-right' | 'bottom-left' | 'bottom-center' | 'top-right' | 'top-left' | 'top-center';
-    /** Size of the button */
-    size?: 'sm' | 'md' | 'lg';
-    /** Shape of the button */
-    shape?: 'circle' | 'square' | 'rounded';
-    /** Whether to show the button initially */
-    showInitially?: boolean;
-    /** Custom scroll behavior */
+    position?: CornerPosition;
+    size?: number;
     scrollBehavior?: 'auto' | 'smooth';
-    /** Custom styles */
-    style?: React.CSSProperties;
-    /** Callback when button is clicked */
-    onClick?: () => void;
-    /** Callback when visibility changes */
-    onVisibilityChange?: (isVisible: boolean) => void;
-    /** Element ID or selector to check visibility for showing the button */
-    targetElement?: string;
-    /** Percentage of page scroll to show the button (0-100) */
-    scrollPercentage?: number;
+    styles?: React.CSSProperties;
 };
-declare const ScrollTop: ({ threshold, className, children, position, size, shape, showInitially, scrollBehavior, style, onClick, onVisibilityChange, targetElement, scrollPercentage, }: ScrollTopProps) => import("react/jsx-runtime").JSX.Element;
+declare const ScrollTop: ({ threshold, className, children, position, size, scrollBehavior, styles, }: ScrollTopProps) => import("react/jsx-runtime").JSX.Element;
 export default ScrollTop;

package/dist/src/components/Spinner.d.ts

@@ -1,14 +1,13 @@
 import { default as React } from 'react';
-export type SpinnerSize = 'sm' | 'md' | 'lg';
+import { Size } from '../types';
+export type SpinnerSize = Size;
 export type SpinnerType = 'circle' | 'dots' | 'pulse' | 'bars';
 export type SpinnerProps = {
     className?: string;
-    containerClassName?: string;
-    dotClassName?: string;
-    barClassName?: string;
     size?: SpinnerSize;
     type?: SpinnerType;
+    color?: string;
     style?: React.CSSProperties;
 };
-declare const Spinner: ({ className, containerClassName, dotClassName, barClassName, size, type, style }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+declare const Spinner: ({ className, size, type, color, style, }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export default Spinner;

package/dist/src/components/Toast.d.ts

@@ -0,0 +1,17 @@
+import { ClassNames, Styles, ToastSeverity, ToastPosition } from '../types';
+export type ToastClassNames = ClassNames<'container' | 'content' | 'icon' | 'summary' | 'detail' | 'closeButton'>;
+export type ToastStyles = Styles<'container' | 'content' | 'summary' | 'detail'>;
+export type ToastProps = {
+    visible: boolean;
+    severity?: ToastSeverity;
+    summary?: string;
+    detail?: string;
+    life?: number;
+    onClose: () => void;
+    position?: ToastPosition;
+    classNames?: ToastClassNames;
+    styles?: ToastStyles;
+    className?: string;
+};
+declare const Toast: ({ visible, severity, summary, detail, life, onClose, position, classNames, styles, className, }: ToastProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Toast;

package/dist/src/components/Typed.d.ts

@@ -12,10 +12,8 @@ type TypedProps = {
     loop?: boolean;
     showCursor?: boolean;
     className?: string;
-    containerClassName?: string;
-    typedClassName?: string;
-    cursorClassName?: string;
     style?: TypedStyle;
+    cursorStyle?: CSSProperties;
 };
-declare const Typed: ({ strings, typeSpeed, backSpeed, backDelay, startDelay, loop, showCursor, className, containerClassName, typedClassName, cursorClassName, style, }: TypedProps) => import("react/jsx-runtime").JSX.Element;
+declare const Typed: ({ strings, typeSpeed, backSpeed, backDelay, startDelay, loop, showCursor, className, style, cursorStyle, }: TypedProps) => import("react/jsx-runtime").JSX.Element;
 export default Typed;

package/dist/src/components/WhatsApp.d.ts

@@ -1,29 +1,29 @@
 import { default as React } from 'react';
+import { Size, CornerPosition } from '../types';
 export interface WhatsAppProps {
     /** Phone number for WhatsApp (with country code, without + or spaces) */
     phone?: string;
     /** Default message to send */
     message?: string;
     /** Position of the button */
-    position?: 'bottom-right' | 'bottom-left' | 'bottom-center' | 'top-right' | 'top-left' | 'top-center';
+    position?: CornerPosition;
     /** Size of the button */
-    size?: 'sm' | 'md' | 'lg';
+    size?: Size;
     /** Show tooltip on hover */
     showTooltip?: boolean;
     /** Tooltip text */
     tooltipText?: string;
-    /** Custom className for the button */
+    /** Custom className */
     className?: string;
-    /** Custom className for the tooltip */
-    tooltipClassName?: string;
     /** Custom styles */
-    style?: React.CSSProperties;
+    styles?: {
+        button?: React.CSSProperties;
+        tooltip?: React.CSSProperties;
+    };
     /** Callback when button is clicked */
     onClick?: () => void;
     /** Z-index for the button */
     zIndex?: number;
-    /** Whether to open in new tab */
-    openInNewTab?: boolean;
 }
-declare const WhatsApp: ({ phone, message, position, size, showTooltip, tooltipText, className, tooltipClassName, style, onClick, zIndex, openInNewTab }: WhatsAppProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const WhatsApp: ({ phone, message, position, size, showTooltip, tooltipText, className, styles, onClick, zIndex, }: WhatsAppProps) => import("react/jsx-runtime").JSX.Element | null;
 export default WhatsApp;

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

@@ -11,3 +11,8 @@ export { default as ScrollTop } from './ScrollTop';
 export { default as WhatsApp } from './WhatsApp';
 export { default as Modal } from './Modal';
 export { default as Input } from './Input';
+export { default as DataTable } from './DataTable';
+export { default as Toast } from './Toast';
+export { default as MultiSelect } from './MultiSelect';
+export { default as Popconfirm } from './Popconfirm';
+export { default as QRCode } from './QRCode';

package/dist/src/demo.d.ts

@@ -1,2 +1 @@
-declare const DemoApp: () => import("react/jsx-runtime").JSX.Element;
-export default DemoApp;
+export {};