luna-components-library 1.1.34 → 1.1.37

package/dist/src/styles.d.ts

@@ -0,0 +1,259 @@
+import { default as React } from 'react';
+import { Size, AnchorVariant, CardPadding, CardShadow, InputSize, InputVariant, ModalSize, PopconfirmPosition, ProgressBarVariant, ToastSeverity, ToastPosition, CornerPosition } from './types';
+export declare const colors: {
+    readonly white: "#ffffff";
+    readonly border: "#e5e7eb";
+    readonly borderInput: "#d1d5db";
+    readonly borderLight: "#f3f4f6";
+    readonly text: "#374151";
+    readonly textSecondary: "#4b5563";
+    readonly textMuted: "#6b7280";
+    readonly textDisabled: "#9ca3af";
+    readonly bgHeader: "#f9fafb";
+    readonly bgHover: "#f3f4f6";
+    readonly bgSelected: "#eff6ff";
+    readonly bgSkeleton: "#f3f4f6";
+    readonly primary: "#2563eb";
+    readonly dark: "#111827";
+};
+export declare const radii: {
+    readonly sm: "0.375rem";
+    readonly md: "0.5rem";
+    readonly lg: "0.75rem";
+    readonly full: "50%";
+    readonly pill: "9999px";
+};
+export declare const fontSizes: {
+    readonly xs: "0.75rem";
+    readonly sm: "0.875rem";
+    readonly base: "1rem";
+    readonly lg: "1.125rem";
+    readonly xl: "1.25rem";
+};
+export declare const fontWeights: {
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+};
+export declare const transitions: {
+    readonly fast: "all 150ms ease-in-out";
+    readonly bg: "background-color 150ms";
+    readonly bgSlow: "background-color 200ms";
+    readonly transform: "transform 200ms";
+    readonly normal: "all 300ms ease-in-out";
+};
+export declare const shadows: {
+    readonly panel: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+    readonly menu: "0 4px 6px -1px rgba(0, 0, 0, 0.1)";
+};
+export declare const zIndices: {
+    readonly panel: 1000;
+    readonly menu: 100;
+};
+export declare const sizeStyles: Record<Size, React.CSSProperties>;
+export declare const sizeClasses: Record<Size, string>;
+export declare const commonStyles: {
+    container: React.CSSProperties;
+    panel: React.CSSProperties;
+    trigger: React.CSSProperties;
+    header: React.CSSProperties;
+    chevron: React.CSSProperties;
+    list: React.CSSProperties;
+    item: (isSelected: boolean, isDisabled: boolean) => React.CSSProperties;
+    chip: React.CSSProperties;
+    icon: React.CSSProperties;
+    checkbox: React.CSSProperties;
+    filterMenu: React.CSSProperties;
+    filterOption: (active: boolean) => React.CSSProperties;
+    pagination: React.CSSProperties;
+    buttonBase: React.CSSProperties;
+    inputWrapper: React.CSSProperties;
+    inputLabel: React.CSSProperties;
+    inputField: React.CSSProperties;
+    popover: React.CSSProperties;
+    floatingButton: React.CSSProperties;
+    card: React.CSSProperties;
+};
+export declare const cardPaddingValues: Record<CardPadding, string>;
+export declare const cardShadowValues: Record<CardShadow, string>;
+export declare const cardStyles: (padding: CardPadding, shadow: CardShadow, styles?: Record<string, React.CSSProperties>) => {
+    container: React.CSSProperties;
+    titleContainer: React.CSSProperties;
+    title: React.CSSProperties;
+    content: React.CSSProperties;
+};
+export declare const dataTableStyles: (styles?: Record<string, React.CSSProperties>) => {
+    container: React.CSSProperties;
+    searchContainer: React.CSSProperties;
+    table: React.CSSProperties;
+    thead: React.CSSProperties;
+    th: React.CSSProperties;
+    td: React.CSSProperties;
+    tr: (clickable: boolean) => React.CSSProperties;
+    pagination: React.CSSProperties;
+    icon: React.CSSProperties;
+    filterMenu: React.CSSProperties;
+    filterOption: (active: boolean) => React.CSSProperties;
+};
+export declare const dropDownStyles: (styles?: Record<string, React.CSSProperties>, disabled?: boolean, isOpen?: boolean, hoverIndex?: number | null, value?: any) => {
+    container: React.CSSProperties;
+    trigger: React.CSSProperties;
+    panel: React.CSSProperties;
+    option: (index: number) => React.CSSProperties;
+    arrow: React.CSSProperties;
+};
+export declare const variantStyles: {
+    readonly primary: {
+        readonly backgroundColor: "#2563eb";
+        readonly color: "#ffffff";
+    };
+    readonly secondary: {
+        readonly backgroundColor: "#4b5563";
+        readonly color: "#ffffff";
+    };
+    readonly outline: {
+        readonly backgroundColor: "transparent";
+        readonly color: "#374151";
+        readonly borderColor: "#d1d5db";
+    };
+    readonly success: {
+        readonly backgroundColor: "#16a34a";
+        readonly color: "#ffffff";
+    };
+    readonly danger: {
+        readonly backgroundColor: "#dc2626";
+        readonly color: "#ffffff";
+    };
+    readonly warning: {
+        readonly backgroundColor: "#eab308";
+        readonly color: "#ffffff";
+    };
+    readonly info: {
+        readonly backgroundColor: "#0891b2";
+        readonly color: "#ffffff";
+    };
+    readonly dark: {
+        readonly backgroundColor: "#111827";
+        readonly color: "#ffffff";
+    };
+    readonly light: {
+        readonly backgroundColor: "#f3f4f6";
+        readonly color: "#111827";
+    };
+    readonly link: {
+        readonly backgroundColor: "transparent";
+        readonly color: "#2563eb";
+        readonly border: "none";
+        readonly padding: 0;
+        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>;
+};
+export declare const multiSelectStyles: (styles?: Record<string, React.CSSProperties>, disabled?: boolean, isOpen?: boolean) => {
+    container: React.CSSProperties;
+    trigger: React.CSSProperties;
+    chevron: React.CSSProperties;
+    panel: React.CSSProperties;
+    header: React.CSSProperties;
+    selectAllWrapper: React.CSSProperties;
+    list: React.CSSProperties;
+    item: (isSelected: boolean, isDisabled: boolean) => React.CSSProperties;
+    checkbox: React.CSSProperties;
+    chip: React.CSSProperties;
+    chipIcon: React.CSSProperties;
+};
+export declare const popconfirmPositionStyles: (pos: PopconfirmPosition) => React.CSSProperties;
+export declare const popconfirmStyles: (styles?: Record<string, React.CSSProperties>, show?: boolean, position?: PopconfirmPosition) => {
+    container: React.CSSProperties;
+    popover: React.CSSProperties;
+    titleWrapper: React.CSSProperties;
+    icon: React.CSSProperties;
+    title: React.CSSProperties;
+    description: React.CSSProperties;
+    actions: React.CSSProperties;
+};
+export declare const preloaderStyles: (zIndex: number, backgroundColor: string, size: number, borderWidth: number, styles?: Record<string, React.CSSProperties>) => {
+    overlay: React.CSSProperties;
+    spinner: React.CSSProperties;
+};
+export declare const progressBarVariantColors: Record<ProgressBarVariant, {
+    bg: string;
+    text: string;
+    track: string;
+}>;
+export declare const progressBarStyles: (styles?: Record<string, React.CSSProperties>, percentage?: number, variant?: ProgressBarVariant) => {
+    container: React.CSSProperties;
+    bar: React.CSSProperties;
+    text: React.CSSProperties;
+};
+export declare const qrCodeStyles: (styles?: Record<string, React.CSSProperties>, bordered?: boolean, cleanBgColor?: string, size?: number, isLoading?: boolean) => {
+    container: React.CSSProperties;
+    image: React.CSSProperties;
+    skeleton: React.CSSProperties;
+};
+export declare const spinnerAnimationStyles = "\n  @keyframes luna-spin { to { transform: rotate(360deg); } }\n  @keyframes luna-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); } }\n  @keyframes luna-pulse { 50% { opacity: .5; } }\n";
+export declare const spinnerSizeValues: Record<Size, string>;
+export declare const spinnerDotSizeValues: Record<Size, string>;
+export declare const spinnerBarSizeValues: Record<Size, {
+    w: string;
+    h: string;
+}>;
+export declare const toastSeverityConfig: Record<ToastSeverity, {
+    bg: string;
+    border: string;
+    text: string;
+    secondaryText: string;
+    icon: string;
+}>;
+export declare const toastPositionStyles: (pos: ToastPosition) => React.CSSProperties;
+export declare const toastStyles: (styles?: Record<string, React.CSSProperties>, severity?: ToastSeverity, position?: ToastPosition, isExiting?: boolean, visible?: boolean) => {
+    container: React.CSSProperties;
+    iconWrapper: React.CSSProperties;
+    content: React.CSSProperties;
+    summary: React.CSSProperties;
+    detail: React.CSSProperties;
+    closeButton: React.CSSProperties;
+};
+export declare const typedStyles: (style?: React.CSSProperties, cursorStyle?: React.CSSProperties, cursorOpacity?: number) => {
+    container: React.CSSProperties;
+    cursor: React.CSSProperties;
+};
+export declare const whatsAppSizes: Record<Size, {
+    button: number;
+    icon: number;
+}>;
+export declare const cornerPositionStyles: (position: CornerPosition) => React.CSSProperties;
+export declare const whatsAppStyles: (styles?: Record<string, React.CSSProperties>, position?: CornerPosition, size?: Size, isHovered?: boolean, zIndex?: number) => {
+    button: React.CSSProperties;
+    tooltip: React.CSSProperties;
+};
+export declare const scrollTopStyles: (styles?: React.CSSProperties, position?: CornerPosition, size?: number, isVisible?: boolean) => React.CSSProperties;
+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 accordionStyles: (isActive: boolean, styles?: Record<string, React.CSSProperties>) => {
+    container: React.CSSProperties;
+    header: React.CSSProperties;
+    content: React.CSSProperties;
+    innerContent: React.CSSProperties;
+    arrow: React.CSSProperties;
+};
+export declare const anchorVariantStyles: (isHovered: boolean) => Record<AnchorVariant, React.CSSProperties>;

package/dist/src/types.d.ts

@@ -0,0 +1,23 @@
+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 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;
+export type CardPadding = OptionalSize;
+export type CardShadow = OptionalSize;
+export type PopconfirmPosition = 'top' | 'bottom' | 'left' | 'right';
+export type ToastSeverity = 'success' | 'info' | 'warn' | 'error';
+export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+export type CornerPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';

package/dist/src/utilities/logger.util.d.ts

@@ -1,3 +1,6 @@
+/**
+ * Utility for logging messages with different levels.
+ */
 export declare const logger: {
     info: (message: string, ...data: any[]) => void;
     warn: (message: string, ...data: any[]) => void;

package/package.json

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