luna-components-library 1.1.39 → 1.1.41

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

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

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

@@ -1,11 +1,11 @@
 import { default as React } from 'react';
-import { Size, AnchorVariant } from '../types';
-export type { AnchorVariant };
+import { Size, StandardVariant } from '../types';
+export type { StandardVariant as AnchorVariant };
 export type AnchorSize = Size;
 export type AllAnchorProps = React.ComponentPropsWithoutRef<'a'>;
 export type AnchorProps = {
     children?: React.ReactNode;
-    variant?: AnchorVariant;
+    variant?: StandardVariant;
     size?: AnchorSize;
     href?: string;
     className?: string;

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

@@ -1,19 +1,22 @@
 import { default as React } from 'react';
-import { ClassNames, Styles, ButtonVariant, ButtonSize } from '../types';
-export type { ButtonVariant, ButtonSize };
+import { StandardVariant, ButtonSize } from '../types';
+export type { StandardVariant, ButtonSize };
 export type AllButtonProps = React.ComponentPropsWithoutRef<'button'>;
-export type ButtonClassNames = ClassNames<'button' | 'container' | 'variant' | 'size'>;
-export type ButtonStyles = Styles<'button'>;
+export type ButtonClassNames = Partial<Record<'button' | 'container' | 'variant' | 'size', string>>;
+export type ButtonStyles = Partial<Record<'button' | 'container' | 'variant' | 'size', React.CSSProperties>>;
 export type ButtonProps = {
-    children: React.ReactNode;
-    variant?: ButtonVariant;
+    children?: React.ReactNode;
+    variant?: StandardVariant;
     size?: ButtonSize;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     disabled?: boolean;
+    rounded?: boolean;
+    icon?: React.ReactNode;
+    iconPosition?: 'left' | 'right';
     classNames?: ButtonClassNames;
     styles?: ButtonStyles;
     className?: string;
     style?: React.CSSProperties;
 };
-declare const Button: ({ children, variant, size, onClick, disabled, classNames, styles, className, style: extraStyle, ...props }: AllButtonProps & ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ children, variant, size, onClick, disabled, rounded, icon, iconPosition, classNames, styles, className, style: extraStyle, ...props }: AllButtonProps & ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

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

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { ClassNames, Styles } from '../types';
 export type DataTableColumn = {
     key: string;
     label: React.ReactNode;
@@ -19,8 +18,31 @@ export type DataTableTexts = {
     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 DataTableClassNames = {
+    container?: string;
+    table?: string;
+    thead?: string;
+    tbody?: string;
+    tr?: string;
+    th?: string;
+    td?: string;
+    pagination?: string;
+    searchContainer?: string;
+};
+export type DataTableStyles = {
+    container?: React.CSSProperties;
+    searchContainer?: React.CSSProperties;
+    table?: React.CSSProperties;
+    thead?: React.CSSProperties;
+    tbody?: React.CSSProperties;
+    th?: React.CSSProperties;
+    td?: React.CSSProperties;
+    tr?: React.CSSProperties;
+    pagination?: React.CSSProperties;
+    icon?: React.CSSProperties;
+    filterMenu?: React.CSSProperties;
+    filterOption?: React.CSSProperties;
+};
 export type DataTableProps = {
     columns: DataTableColumn[];
     data: any[];

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

@@ -1,11 +1,22 @@
 import { default as React } from 'react';
-import { ClassNames, Styles } from '../types';
 export type DropDownOption = {
     value: string | number;
-    label: React.ReactNode;
+    label?: React.ReactNode;
+    text?: React.ReactNode;
+};
+export type DropDownClassNames = {
+    container?: string;
+    trigger?: string;
+    panel?: string;
+    option?: string;
+};
+export type DropDownStyles = {
+    container?: React.CSSProperties;
+    trigger?: React.CSSProperties;
+    panel?: React.CSSProperties;
+    option?: React.CSSProperties;
+    arrow?: React.CSSProperties;
 };
-export type DropDownClassNames = ClassNames<'container' | 'trigger' | 'panel' | 'option'>;
-export type DropDownStyles = Styles<'container' | 'trigger' | 'panel' | 'option'>;
 export type DropDownProps = {
     options: (string | number | DropDownOption)[];
     value?: string | number | React.ReactNode;
@@ -17,5 +28,5 @@ export type DropDownProps = {
     disabled?: boolean;
     className?: string;
 };
-declare const DropDown: ({ options, value, onChange, placeholder, toggle, classNames, styles, disabled, className, }: DropDownProps) => import("react/jsx-runtime").JSX.Element;
+declare const DropDown: ({ options, value, onChange, placeholder, toggle, className, styles, disabled, }: DropDownProps) => import("react/jsx-runtime").JSX.Element;
 export default DropDown;

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

@@ -1,13 +1,13 @@
 import { default as React } from 'react';
-import { ClassNames, Styles, InputVariant, InputSize } from '../types';
-export type { InputVariant, InputSize };
+import { InputSize, StandardVariant } from '../types';
+export type { StandardVariant, 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' | 'value'>;
-export type InputClassNames = ClassNames<'container' | 'input' | 'label'>;
-export type InputStyles = Styles<'container' | 'input' | 'label'>;
+export type InputClassNames = Record<'container' | 'input' | 'label', string>;
+export type InputStyles = Record<'container' | 'input' | 'label', React.CSSProperties>;
 type InputCommonProps = {
     children?: React.ReactNode;
-    variant?: InputVariant;
+    variant?: StandardVariant;
     inputSize?: InputSize;
     type?: InputType;
     placeholder?: string;
@@ -17,6 +17,9 @@ type InputCommonProps = {
     onBlur?: () => void;
     disabled?: boolean;
     required?: boolean;
+    isRequired?: boolean;
+    icon?: React.ReactNode;
+    iconPosition?: 'left' | 'right';
     readOnly?: boolean;
     mask?: string;
     maskChar?: string;
@@ -35,5 +38,5 @@ type InputCommonProps = {
     name?: string;
 };
 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;
+declare const Input: ({ children, variant, type, inputSize, placeholder, value: controlledValue, onChange, onFocus, onBlur, disabled, required, isRequired, icon, iconPosition, 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/MultiSelect.d.ts

@@ -1,11 +1,34 @@
-import { ClassNames, Styles } from '../types';
+import { default as React } from 'react';
 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 MultiSelectClassNames = {
+    container?: string;
+    trigger?: string;
+    label?: string;
+    panel?: string;
+    header?: string;
+    filterInput?: string;
+    list?: string;
+    item?: string;
+    chip?: string;
+    chipIcon?: string;
+};
+export type MultiSelectStyles = {
+    container?: React.CSSProperties;
+    trigger?: React.CSSProperties;
+    chevron?: React.CSSProperties;
+    panel?: React.CSSProperties;
+    header?: React.CSSProperties;
+    selectAllWrapper?: React.CSSProperties;
+    list?: React.CSSProperties;
+    item?: React.CSSProperties;
+    checkbox?: React.CSSProperties;
+    chip?: React.CSSProperties;
+    chipIcon?: React.CSSProperties;
+};
 export type MultiSelectProps = {
     options: MultiSelectOption[];
     value: any[];
@@ -22,5 +45,5 @@ export type MultiSelectProps = {
     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;
+declare const MultiSelect: ({ options, value, onChange, id, placeholder, display, filter, filterPlaceholder, selectAll, maxSelectedLabels, classNames, styles, disabled, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

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

@@ -1,7 +1,23 @@
 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'>;
+import { PopconfirmPosition } from '../types';
+export type PopconfirmClassNames = {
+    container?: string;
+    popover?: string;
+    title?: string;
+    description?: string;
+    actions?: string;
+    okButton?: string;
+    cancelButton?: string;
+};
+export type PopconfirmStyles = {
+    container?: React.CSSProperties;
+    popover?: React.CSSProperties;
+    titleWrapper?: React.CSSProperties;
+    icon?: React.CSSProperties;
+    title?: React.CSSProperties;
+    description?: React.CSSProperties;
+    actions?: React.CSSProperties;
+};
 export type PopconfirmProps = {
     title: React.ReactNode;
     description?: React.ReactNode;

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

@@ -1,6 +1,13 @@
-import { ClassNames, Styles } from '../types';
-export type QRCodeClassNames = ClassNames<'container' | 'image'>;
-export type QRCodeStyles = Styles<'container' | 'image'>;
+import { default as React } from 'react';
+export type QRCodeClassNames = {
+    container?: string;
+    image?: string;
+};
+export type QRCodeStyles = {
+    container?: React.CSSProperties;
+    image?: React.CSSProperties;
+    skeleton?: React.CSSProperties;
+};
 export type QRCodeProps = {
     value: string;
     size?: number;

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

@@ -1,6 +1,21 @@
-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'>;
+import { default as React } from 'react';
+import { ToastSeverity, ToastPosition } from '../types';
+export type ToastClassNames = {
+    container?: string;
+    content?: string;
+    icon?: string;
+    summary?: string;
+    detail?: string;
+    closeButton?: string;
+};
+export type ToastStyles = {
+    container?: React.CSSProperties;
+    iconWrapper?: React.CSSProperties;
+    content?: React.CSSProperties;
+    summary?: React.CSSProperties;
+    detail?: React.CSSProperties;
+    closeButton?: React.CSSProperties;
+};
 export type ToastProps = {
     visible: boolean;
     severity?: ToastSeverity;

package/dist/src/styles.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { Size, AnchorVariant, CardPadding, CardShadow, InputSize, InputVariant, ModalSize, PopconfirmPosition, ProgressBarVariant, ToastSeverity, ToastPosition, CornerPosition } from './types';
+import { Size, StandardVariant, CardPadding, CardShadow, InputSize, ModalSize, PopconfirmPosition, ProgressBarVariant, ToastSeverity, ToastPosition, CornerPosition } from './types';
 export declare const colors: {
     readonly white: "#ffffff";
     readonly border: "#e5e7eb";
@@ -14,7 +14,23 @@ export declare const colors: {
     readonly bgSelected: "#eff6ff";
     readonly bgSkeleton: "#f3f4f6";
     readonly primary: "#2563eb";
+    readonly primaryHover: "#1d4ed8";
+    readonly secondary: "#4b5563";
+    readonly secondaryHover: "#6d737c";
+    readonly success: "#16a34a";
+    readonly successHover: "#15803d";
+    readonly danger: "#dc2626";
+    readonly dangerHover: "#b91c1c";
+    readonly warning: "#f59e0b";
+    readonly warningHover: "#d97706";
+    readonly info: "#0ea5e9";
+    readonly infoHover: "#0891b2";
+    readonly light: "#f9fafb";
+    readonly lightHover: "#f3f4f6";
     readonly dark: "#111827";
+    readonly darkHover: "#1f2937";
+    readonly whatsapp: "#25D366";
+    readonly whatsappHover: "#128C7E";
 };
 export declare const radii: {
     readonly sm: "0.375rem";
@@ -67,6 +83,7 @@ export declare const commonStyles: {
     filterOption: (active: boolean) => React.CSSProperties;
     pagination: React.CSSProperties;
     buttonBase: React.CSSProperties;
+    anchorBase: React.CSSProperties;
     inputWrapper: React.CSSProperties;
     inputLabel: React.CSSProperties;
     inputField: React.CSSProperties;
@@ -125,11 +142,11 @@ export declare const variantStyles: {
         readonly color: "#ffffff";
     };
     readonly warning: {
-        readonly backgroundColor: "#eab308";
+        readonly backgroundColor: "#f59e0b";
         readonly color: "#ffffff";
     };
     readonly info: {
-        readonly backgroundColor: "#0891b2";
+        readonly backgroundColor: "#0ea5e9";
         readonly color: "#ffffff";
     };
     readonly dark: {
@@ -137,7 +154,7 @@ export declare const variantStyles: {
         readonly color: "#ffffff";
     };
     readonly light: {
-        readonly backgroundColor: "#f3f4f6";
+        readonly backgroundColor: "#f9fafb";
         readonly color: "#111827";
     };
     readonly link: {
@@ -148,23 +165,11 @@ export declare const variantStyles: {
         readonly textDecoration: "underline";
     };
 };
-export declare const variantClasses: {
-    readonly primary: "bg-blue-600 text-white hover:bg-blue-700";
-    readonly secondary: "bg-gray-600 text-white hover:bg-gray-700";
-    readonly outline: "border border-gray-300 text-gray-700 hover:bg-gray-50";
-    readonly success: "bg-green-600 text-white hover:bg-green-700";
-    readonly danger: "bg-red-600 text-white hover:bg-red-700";
-    readonly warning: "bg-yellow-500 text-white hover:bg-yellow-600";
-    readonly info: "bg-cyan-600 text-white hover:bg-cyan-700";
-    readonly dark: "bg-gray-900 text-white hover:bg-gray-800";
-    readonly light: "bg-gray-100 text-gray-900 hover:bg-gray-200";
-    readonly link: "text-blue-600 hover:text-blue-800 hover:underline";
-};
 export declare const inputStyles: (styles?: Record<string, React.CSSProperties>, extraStyle?: React.CSSProperties, inputSize?: InputSize, readOnly?: boolean, disabled?: boolean) => {
     container: React.CSSProperties;
     label: React.CSSProperties;
     input: React.CSSProperties;
-    variants: Record<InputVariant, React.CSSProperties>;
+    variants: Record<StandardVariant, React.CSSProperties>;
 };
 export declare const multiSelectStyles: (styles?: Record<string, React.CSSProperties>, disabled?: boolean, isOpen?: boolean) => {
     container: React.CSSProperties;
@@ -248,7 +253,7 @@ export declare const scrollTopStyles: (styles?: React.CSSProperties, position?:
 export declare const modalSizeClasses: Record<ModalSize, string>;
 export declare const modalOverlayClasses: (show: boolean, animation: boolean, className: string) => string;
 export declare const modalDialogClasses: (size: ModalSize, centered: boolean, dialogClassName: string) => string;
-export declare const anchorBaseStyles: (variant: AnchorVariant, isHovered: boolean, size: Size) => React.CSSProperties;
+export declare const anchorBaseStyles: (variant: StandardVariant, isHovered: boolean, size: Size) => React.CSSProperties;
 export declare const accordionStyles: (isActive: boolean, styles?: Record<string, React.CSSProperties>) => {
     container: React.CSSProperties;
     header: React.CSSProperties;
@@ -256,4 +261,4 @@ export declare const accordionStyles: (isActive: boolean, styles?: Record<string
     innerContent: React.CSSProperties;
     arrow: React.CSSProperties;
 };
-export declare const anchorVariantStyles: (isHovered: boolean) => Record<AnchorVariant, React.CSSProperties>;
+export declare const standardVariantStyles: (isHovered: boolean) => Record<StandardVariant, React.CSSProperties>;

package/dist/src/types.d.ts

@@ -1,17 +1,8 @@
-import { default as React } from 'react';
-export type ClassNames<T extends string> = {
-    [K in T]?: string;
-};
-export type Styles<T extends string> = {
-    [K in T]?: React.CSSProperties;
-};
 export type Size = 'sm' | 'md' | 'lg';
 export type ExtendedSize = Size | 'xl';
 export type OptionalSize = Size | 'none';
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'link';
+export type StandardVariant = 'none' | 'primary' | 'secondary' | 'outline' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'link';
 export type ButtonSize = Size;
-export type AnchorVariant = 'none' | 'primary' | 'secondary' | 'outline';
-export type InputVariant = 'none' | 'primary' | 'secondary' | 'outline' | 'danger' | 'success';
 export type ProgressBarVariant = 'primary' | 'success' | 'warning' | 'danger' | 'dark' | 'light';
 export type InputSize = ExtendedSize;
 export type ModalSize = ExtendedSize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-components-library",
-  "version": "1.1.39",
+  "version": "1.1.41",
   "description": "A React component library with TypeScript support",
   "main": "dist/luna-components-library.js",
   "module": "dist/luna-components-library.js",