@mahatisystems/mahati-ui-components 0.1.2 → 0.2.0

package/dist/index.d.mts

@@ -1,22 +1,19 @@
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
-import * as React from 'react';
-import React__default from 'react';
+import React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "danger" | null | undefined;
+    size?: "default" | "sm" | "md" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
-interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
 }
-declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-declare const cardVariants: (props?: ({
-    variant?: "default" | "outline" | "elevated" | "subtle" | "figma" | null | undefined;
-    size?: "default" | "sm" | "lg" | "figma" | null | undefined;
-} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
-interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'>, VariantProps<typeof cardVariants> {
+type CardVariant = 'default' | 'elevated' | 'outline' | 'subtle' | 'figma';
+type CardSize = 'default' | 'sm' | 'lg' | 'figma';
+interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
     title?: string;
     cardContent?: React.ReactNode;
     cardBackContent?: React.ReactNode;
@@ -26,16 +23,26 @@ interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'
     borderRadius?: string;
     defaultOpen?: boolean;
     onFlip?: (isFlipped: boolean) => void;
+    variant?: CardVariant;
+    size?: CardSize;
+    className?: string;
+    children?: React.ReactNode;
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 
+type MahatiModalSize = "default" | "sm" | "md" | "lg" | "xl";
 type MahatiModalProps = {
     isOpen: boolean;
     onClose: () => void;
     title?: string;
     subtitle?: string;
-    children?: React__default.ReactNode;
+    size?: MahatiModalSize;
+    children?: React.ReactNode;
     className?: string;
+    width?: string | number;
+    height?: string | number;
+    margin?: string | number;
+    position?: "center" | "bottom-right" | "top-left" | "top-right" | "bottom-left" | "top-center" | "bottom-center" | "center-left" | "center-right";
     primaryAction?: {
         label?: string;
         onClick?: () => void;
@@ -45,48 +52,125 @@ type MahatiModalProps = {
         label?: string;
         onClick?: () => void;
     };
-    headerIcon?: React__default.ReactNode;
+    headerIcon?: React.ReactNode;
     showDivider?: boolean;
 };
-declare function Modal({ isOpen, onClose, title, subtitle, children, className, primaryAction, secondaryAction, headerIcon, showDivider, }: MahatiModalProps): React__default.JSX.Element | null;
+declare function Modal({ isOpen, onClose, title, subtitle, children, className, width: customWidth, height, margin, primaryAction, secondaryAction, headerIcon, showDivider, position, size, }: MahatiModalProps): React.JSX.Element | null;
 declare namespace Modal {
     var displayName: string;
 }
 
+declare const chartVariants: (props?: ({
+    variant?: "default" | "elevated" | "filled" | "flat" | "card" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+interface MahatiChartProps extends VariantProps<typeof chartVariants> {
+    type?: 'line' | 'bar' | 'pie' | 'doughnut' | 'polarArea' | 'radar';
+    data: any;
+    options?: any;
+    className?: string;
+}
+declare const ChartInterface: React.ForwardRefExoticComponent<MahatiChartProps & React.RefAttributes<HTMLDivElement>>;
+
 interface FormContainerProps {
-    children: React__default.ReactNode;
-    onSubmit?: (e: React__default.FormEvent) => void;
+    children: React.ReactNode;
+    onSubmit?: (e: React.FormEvent) => void;
     className?: string;
 }
-declare const FormContainer: React__default.FC<FormContainerProps>;
+declare const FormContainer: React.FC<FormContainerProps>;
 
 interface InputProps {
     type?: string;
     name?: string;
     placeholder: string;
-    onChange: (e: React__default.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     hasError?: boolean;
     errorMessage?: string;
     value?: string;
     className?: string;
 }
-declare const Input: React__default.FC<InputProps>;
+declare const Input: React.FC<InputProps>;
 
-interface Tab {
+interface Tab$1 {
     id?: string;
     label: string;
-    icon?: React__default.ReactNode;
-    content: React__default.ReactNode;
+    icon?: React.ReactNode;
+    content: React.ReactNode;
     disabled?: boolean;
 }
 interface MahatiTabbedInterfaceProps {
-    tabs: Tab[];
+    tabs: Tab$1[];
     variant?: "basic" | "pill" | "dark" | "underline" | "shadow" | "glass" | "gradient" | "square";
     defaultActiveTab?: number;
     className?: string;
     onTabChange?: (tabIndex: number) => void;
 }
-declare const TabbedInterface: React__default.FC<MahatiTabbedInterfaceProps>;
+declare const TabbedInterface$1: React.FC<MahatiTabbedInterfaceProps>;
+
+interface Tab {
+    label: string;
+    content: React.ReactNode;
+    icon?: React.ReactNode;
+}
+interface TabbedInterfaceProps {
+    tabs: Tab[];
+    variant?: "underline" | "pill" | "outline" | "filled" | "gradient" | "shadow" | "glass" | "dark";
+    onTabChange?: (label: string) => void;
+    /**
+     * When true, tab headers are draggable.
+     * Use with onReorderTabs to actually reorder parent state.
+     */
+    draggableTabs?: boolean;
+    /**
+     * Called when a tab is dropped on another tab.
+     * fromIndex: index of dragged tab
+     * toIndex: index of drop target
+     */
+    onReorderTabs?: (fromIndex: number, toIndex: number) => void;
+    /**
+     * Layout of the tabs:
+     * - "horizontal": tabs above content (default)
+     * - "vertical": tabs beside the content
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * For vertical orientation, which side the tab list sits on:
+     * - "left": tabs on the left, content on the right (default)
+     * - "right": content on the left, tabs on the right
+     */
+    verticalPosition?: "left" | "right";
+    /**
+     * When true, show a small close icon in the tab header,
+     * like browser tabs. When false, do not render it at all.
+     */
+    showTabCloseIconInHeader?: boolean;
+    /**
+     * If header close icon is shown, where to place it?
+     * - "left": at the left edge (with padding)
+     * - "right": at the right edge (with padding)
+     */
+    tabCloseIconPosition?: "left" | "right";
+    /**
+     * Content of the header close icon.
+     * Defaults to "×" but can be "-" or any ReactNode (e.g. an SVG icon).
+     */
+    tabCloseIconContent?: React.ReactNode;
+    /**
+     * Called when the header close icon is clicked for a given index.
+     * Parent decides how to remove/close the tab.
+     */
+    onCloseTab?: (index: number) => void;
+    /**
+     * Font control props:
+     * User can pass "sans", "serif", "mono", "poppins",
+     * or full Tailwind class like "font-[Poppins]".
+     */
+    tabHeaderFont?: string;
+    tabContentFont?: string;
+    sectionTitleFont?: string;
+    sectionDescriptionFont?: string;
+}
+declare const TabbedInterface: React.FC<TabbedInterfaceProps>;
 
 interface TableProps$1 {
     headers: {
@@ -102,7 +186,7 @@ interface TableProps$1 {
     setLimit?: (limit: number) => void;
     totalCount?: number;
     highlightRowColor?: string;
-    actions?: (row: unknown) => React__default.ReactNode;
+    actions?: (row: unknown) => React.ReactNode;
     paginationRequired?: boolean;
     paginationPosition?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
     onDownloadPDF?: (data: any[], headers: any[]) => void;
@@ -113,7 +197,7 @@ interface TableProps$1 {
     searchModeOptions?: ("startsWith" | "includes")[];
     onResetSearch?: () => void;
 }
-declare const Table: React__default.FC<TableProps$1>;
+declare const Table$1: React.FC<TableProps$1>;
 
 interface TableProps {
     headers: {
@@ -128,24 +212,55 @@ interface TableProps {
     limit?: number;
     setLimit?: (limit: number) => void;
     totalCount?: number;
-    highlightRowColor?: string;
-    actions?: (row: unknown) => React__default.ReactNode;
     paginationRequired?: boolean;
     paginationPosition?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+    highlightRowColor?: string;
+    actions?: (row: unknown) => React.ReactNode;
     onDownloadPDF?: (data: any[], headers: any[]) => void;
     onDownloadExcel?: (data: any[], headers: any[]) => void;
     searchable?: boolean;
     searchTerm?: string;
-    onSearch?: (term: string, mode: "startsWith" | "includes") => void;
+    onSearch?: (term: string, mode?: "startsWith" | "includes") => void;
     searchModeOptions?: ("startsWith" | "includes")[];
     onResetSearch?: () => void;
+    /**
+     * summary = "single"  => only one row summary open at a time
+     * summary = "multi"   => multiple rows can be expanded
+     * undefined / omitted => no summary drawers
+     */
+    summary?: "single" | "multi";
+    /** which key in data row contains the summary text/content (default: "summary") */
+    summaryKey?: string;
+    /** which key in data row contains title field, e.g. name (default: "name") */
+    summaryTitleField?: string;
+    /**
+     * When true, any cell whose header.key === (summaryColumnKey || summaryKey)
+     * will be rendered as a truncated summary column with ellipsis and hover full text.
+     */
+    summaryColumn?: boolean;
+    /** Key to treat as summary column; falls back to summaryKey if not provided */
+    summaryColumnKey?: string;
+    /** Max length before truncating summary column text (default: 120) */
+    summaryColumnMaxLength?: number;
+    /**
+     * Keys of columns where text should be truncated with ellipsis and show full text on hover.
+     * Example: ["summary"] or ["email", "summary", "createdAt"]
+     */
+    textWrapColumns?: string[];
+    /** Global default max length for truncated text (for textWrapColumns) */
+    textWrapMaxLength?: number;
+    /**
+     * Per-column max length overrides for textWrapColumns (and summary column).
+     * Example: { email: 40, summary: 200 }
+     */
+    textWrapColumnMaxLengths?: Record<string, number>;
 }
-declare const TableTailwind: React__default.FC<TableProps>;
+declare const Table: React.FC<TableProps>;
 
 interface TooltipProps {
     text?: string;
     position?: "top" | "right" | "bottom" | "left";
-    children: React__default.ReactNode;
+    children: React.ReactNode;
     variant?: "default" | "transparent";
     className?: string;
     textColor?: string;
@@ -157,18 +272,184 @@ interface TooltipProps {
         height?: number;
     };
     animation?: {
-        component: React__default.ComponentType<any>;
+        component: React.ComponentType<any>;
         props?: any;
         triggerDelay?: number;
     };
 }
-declare const Tooltip: React__default.FC<TooltipProps>;
+declare const Tooltip: React.FC<TooltipProps>;
+
+interface CalendarDate {
+    year: number;
+    month: number;
+    day: number;
+}
+interface CalendarTime {
+    hour: number;
+    minute: number;
+    period: "AM" | "PM";
+}
+interface CalendarDateRange {
+    start: CalendarDate | null;
+    end: CalendarDate | null;
+}
+type CalendarSize = "small" | "medium" | "large" | "extra-large";
+interface CalendarProps {
+    value?: CalendarDate | null;
+    onChange?: (date: CalendarDate | null, dateString?: string) => void;
+    enableRangeSelection?: boolean;
+    rangeValue?: CalendarDateRange;
+    onRangeChange?: (range: CalendarDateRange) => void;
+    enableTimeSelection?: boolean;
+    timeValue?: CalendarTime | null;
+    onTimeChange?: (time: CalendarTime) => void;
+    showTimeFormatToggle?: boolean;
+    timeFormat?: "12h" | "24h";
+    onTimeFormatChange?: (format: "12h" | "24h") => void;
+    autoHide?: boolean;
+    showTodayButton?: boolean;
+    showClearButton?: boolean;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    onShow?: () => void;
+    onHide?: () => void;
+    icon?: React.ReactNode;
+    showIcon?: boolean;
+    size?: CalendarSize;
+    navButtonLayout?: {
+        width?: number;
+        height?: number;
+    };
+    navButtonStyles?: {
+        borderRadius?: number;
+        backgroundColor?: string;
+    };
+    navArrowLayout?: {
+        width?: number;
+        height?: number;
+        aspectRatio?: string;
+    };
+    navArrowStyles?: {
+        backgroundImage?: string;
+        backgroundColor?: string;
+        backgroundPosition?: string;
+        backgroundSize?: string;
+        backgroundRepeat?: string;
+    };
+    timeButtonLayout?: {
+        width?: number;
+        height?: number;
+    };
+    timeButtonStyles?: {
+        backgroundColor?: string;
+        borderRadius?: number;
+    };
+    timeButtonHoverGradient?: {
+        gradientStart?: string;
+        gradientEnd?: string;
+        gradientAngle?: number;
+    };
+    dateFieldLayout?: {
+        width?: number;
+        height?: number;
+    };
+    dateFieldStyles?: {
+        borderRadius?: number;
+        backgroundColor?: string;
+    };
+    todayButtonLayout?: {
+        width?: number;
+        height?: number;
+    };
+    todayButtonStyles?: {
+        backgroundColor?: string;
+        borderRadius?: number;
+    };
+    todayButtonHoverGradient?: {
+        gradientStart?: string;
+        gradientEnd?: string;
+        gradientAngle?: number;
+    };
+    clearButtonLayout?: {
+        width?: number;
+        height?: number;
+    };
+    clearButtonStyles?: {
+        backgroundColor?: string;
+        borderRadius?: number;
+    };
+    confirmTimeButtonLayout?: {
+        width?: number;
+        height?: number;
+    };
+    confirmTimeButtonStyles?: {
+        backgroundColor?: string;
+        borderRadius?: number;
+    };
+    confirmTimeButtonHoverGradient?: {
+        gradientStart?: string;
+        gradientEnd?: string;
+        gradientAngle?: number;
+    };
+    timeSelectLayout?: {
+        width?: number;
+        height?: number;
+    };
+    timeSelectStyles?: {
+        borderRadius?: number;
+        backgroundColor?: string;
+        borderColor?: string;
+        borderWidth?: number;
+    };
+    timeFormatToggleLayout?: {
+        width?: number;
+        height?: number;
+    };
+    timeFormatToggleStyles?: {
+        borderRadius?: number;
+        backgroundColor?: string;
+    };
+    previewTextStyles?: {
+        color?: string;
+        fontFamily?: string;
+        fontSize?: number;
+        fontWeight?: number;
+    };
+    globalTypography?: {
+        fontFamily?: string;
+        fontSize?: number;
+        fontWeight?: number;
+        fontStyle?: string;
+        lineHeight?: string;
+    };
+    calendarContainerLayout?: {
+        width?: number;
+        height?: number;
+    };
+    calendarContainerStyles?: {
+        borderRadius?: number;
+    };
+    enableYearDropdown?: boolean;
+    showDateFormatSelector?: boolean;
+    dateFormat?: string;
+    onDateFormatChange?: (format: string) => void;
+    showTimeZoneSelector?: boolean;
+    timeZoneFormat?: string;
+    onTimeZoneFormatChange?: (format: string) => void;
+    blockDateConfig?: {
+        startDate: CalendarDate;
+        days: number;
+    };
+}
+declare const Calendar: React.FC<CalendarProps>;
 
 interface DropdownProps {
     options: string[];
     onSelect: (option: string) => void;
     variant?: "basic" | "outline" | "pill" | "dark" | "underline" | "shadow" | "glass" | "gradient";
+    className?: string;
 }
-declare const Dropdown: React__default.FC<DropdownProps>;
+declare const Dropdown: React.FC<DropdownProps>;
 
-export { Button as MahatiButton, Card as MahatiCard, Dropdown as MahatiDropdown, FormContainer as MahatiFormContainer, Input as MahatiInput, Modal as MahatiModal, TabbedInterface as MahatiTabbedInterface, Table as MahatiTable, TableTailwind as MahatiTableTailwind, Tooltip as MahatiTooltip };
+export { type CalendarDate, type CalendarDateRange, type CalendarTime, Button as MahatiButton, Calendar as MahatiCalendar, Card as MahatiCard, ChartInterface as MahatiChart, Dropdown as MahatiDropdown, FormContainer as MahatiFormContainer, Input as MahatiInput, Modal as MahatiModal, TabbedInterface$1 as MahatiTabbedInterface, TabbedInterface as MahatiTabbedInterfaceTailwind, Table$1 as MahatiTable, Table as MahatiTableTailwind, Tooltip as MahatiTooltip };