@martinsura/ui 0.1.2 → 0.1.4

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as react from 'react';
-import { ComponentType, ReactElement, ReactNode } from 'react';
+import { ComponentType, ReactElement, ReactNode, RefObject } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import * as _tabler_icons_react from '@tabler/icons-react';
 
@@ -51,7 +51,7 @@ type IconProps = {
     className?: string;
 };
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "primary" | "danger" | "success" | "ghost" | null | undefined;
+    variant?: "link" | "text" | "default" | "primary" | "danger" | "success" | "subtle" | "ghost" | null | undefined;
     size?: "small" | "middle" | "large" | null | undefined;
     block?: boolean | null | undefined;
     shape?: "circle" | "default" | "round" | null | undefined;
@@ -71,17 +71,33 @@ type ButtonProps = {
     iconType?: UiIconType;
     iconPosition?: "left" | "right";
     block?: boolean;
+    fullWidthOnMobile?: boolean;
     size?: ButtonSize;
     iconSize?: number;
     confirm?: ConfirmOptions;
     shape?: "default" | "circle" | "round";
+    iconOnly?: boolean;
     classNames?: {
         icon?: string;
         content?: string;
         spinner?: string;
     };
 };
-declare const Button: ({ variant, size, shape, block, iconPosition, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ variant, size, shape, block, fullWidthOnMobile, iconPosition, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+type ConfirmButtonProps = {
+    text?: string;
+    children?: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    icon?: ComponentType<IconProps>;
+    className?: string;
+    confirm: ConfirmOptions;
+};
+declare const ConfirmButton: (props: ConfirmButtonProps) => react_jsx_runtime.JSX.Element;
 
 type InputFieldProps = {
     children: ReactNode;
@@ -139,7 +155,23 @@ type TextInputProps = {
         error?: string;
     };
 };
-declare const TextInput: ({ size, password, newPassword, ...props }: TextInputProps) => react_jsx_runtime.JSX.Element;
+declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
+
+type TextareaProps = {
+    label?: string;
+    placeholder?: string;
+    value?: string | null;
+    onChange?: (value: string) => void;
+    rows?: number;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    error?: ReactNode;
+    customError?: ReactNode;
+    errorName?: string;
+    noMargin?: boolean;
+};
+declare const Textarea: ({ rows, ...props }: TextareaProps) => react_jsx_runtime.JSX.Element;
 
 type NumberInputProps = {
     label?: string;
@@ -185,6 +217,28 @@ type CheckboxInputProps = {
 };
 declare const CheckboxInput: ({ value, ...props }: CheckboxInputProps) => react_jsx_runtime.JSX.Element;
 
+type RadioOption<T extends string = string> = {
+    label: ReactNode;
+    value: T;
+    description?: ReactNode;
+    disabled?: boolean;
+};
+type RadioGroupProps<T extends string = string> = {
+    label?: string;
+    value?: T | null;
+    onChange?: (value: T) => void;
+    options: RadioOption<T>[];
+    direction?: "row" | "column";
+    required?: boolean;
+    disabled?: boolean;
+    error?: ReactNode;
+    customError?: ReactNode;
+    errorName?: string;
+    className?: string;
+    noMargin?: boolean;
+};
+declare const RadioGroup: <T extends string = string>({ direction, ...props }: RadioGroupProps<T>) => react_jsx_runtime.JSX.Element;
+
 type SwitchInputProps = {
     label?: string;
     value?: boolean | null;
@@ -247,6 +301,30 @@ type ColorInputProps = {
 };
 declare const ColorInput: ({ size, placeholder, presets, allowClear, variant, showAlpha, ...props }: ColorInputProps) => react_jsx_runtime.JSX.Element;
 
+type SearchInputProps = {
+    label?: string;
+    value?: string | null;
+    onChange?: (value: string) => void;
+    onClear?: () => void;
+    placeholder?: string;
+    className?: string;
+    error?: ReactNode;
+    customError?: ReactNode;
+    errorName?: string;
+    noMargin?: boolean;
+};
+declare const SearchInput: ({ ...props }: SearchInputProps) => react_jsx_runtime.JSX.Element;
+
+type InlineEditProps = {
+    label?: ReactNode;
+    value?: string | null;
+    placeholder?: string;
+    multiline?: boolean;
+    onSave?: (value: string) => void;
+    className?: string;
+};
+declare const InlineEdit: ({ value, placeholder, multiline, onSave, label, className }: InlineEditProps) => react_jsx_runtime.JSX.Element;
+
 type TableSize = "small" | "middle" | "large";
 type ColumnType = "date" | "datetime" | "yes/no" | "boolean" | "dot";
 type TableColumn<T> = {
@@ -333,6 +411,7 @@ type GridProps<T, TSortField = never, TFilter extends object = Record<string, ne
     selection?: GridSelection<T>;
     onRowClick?: (item: T) => void;
     verticalBorders?: boolean;
+    attachedTop?: boolean;
     showPageNumberChanger?: boolean;
     showPageSizeChanger?: boolean;
     className?: string;
@@ -504,6 +583,64 @@ type DrawerContextValue = {
 };
 declare function useDrawer(): DrawerContextValue;
 
+type ModalPlacement = "center" | "fullscreen";
+type ModalSize = "small" | "middle" | "large" | "auto";
+type ModalProps = {
+    isOpen: boolean;
+    onClose: (saved: boolean) => void;
+    children: ReactNode;
+    placement?: ModalPlacement;
+    size?: ModalSize;
+    width?: number | string;
+    maxWidth?: number | string;
+    closeOnEscape?: boolean;
+    closeOnOverlayClick?: boolean;
+    showCloseButton?: boolean;
+    hideHeader?: boolean;
+    destroyOnClose?: boolean;
+    preventClose?: boolean;
+    beforeClose?: () => boolean | Promise<boolean>;
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    className?: string;
+    classNames?: {
+        overlay?: string;
+        panel?: string;
+        header?: string;
+        title?: string;
+        closeButton?: string;
+        body?: string;
+        loading?: string;
+        footer?: string;
+    };
+};
+declare const Modal: ({ placement, size, width, maxWidth, closeOnEscape, closeOnOverlayClick, showCloseButton, hideHeader, destroyOnClose, preventClose, beforeClose, initialFocusRef, ...props }: ModalProps) => react.ReactPortal | null;
+
+type ModalTitleProps = {
+    children: ReactNode;
+};
+declare const ModalTitle: ({ children }: ModalTitleProps) => null;
+
+type ModalFooterProps = {
+    children: ReactNode;
+    align?: "left" | "center" | "right";
+};
+declare const ModalFooter: ({ children, align }: ModalFooterProps) => null;
+
+type ModalContentProps = {
+    children: ReactNode;
+    loading?: boolean;
+};
+declare const ModalContent: ({ loading, children }: ModalContentProps) => react_jsx_runtime.JSX.Element;
+
+type ModalContextValue = {
+    close: () => void;
+    saveAndClose: (message?: string) => void;
+    setTitle: (title: string) => void;
+    setFooter: (footer: ReactNode) => void;
+    setLoading: (loading: boolean) => void;
+};
+declare function useModal(): ModalContextValue;
+
 type PanelProps = {
     title?: string;
     children?: ReactNode;
@@ -524,24 +661,95 @@ type PanelProps = {
 };
 declare const Panel: ({ variant, inner, ...props }: PanelProps) => react_jsx_runtime.JSX.Element;
 
+type ToolbarProps = {
+    children?: ReactNode;
+    start?: ReactNode;
+    end?: ReactNode;
+    wrapped?: boolean;
+    inset?: boolean;
+    className?: string;
+    classNames?: {
+        start?: string;
+        end?: string;
+    };
+};
+declare const Toolbar: ({ children, start, end, wrapped, inset, className, classNames }: ToolbarProps) => react_jsx_runtime.JSX.Element;
+declare const ActionBar: ({ children, start, end, wrapped, inset, className, classNames }: ToolbarProps) => react_jsx_runtime.JSX.Element;
+
+type SectionHeaderProps = {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+};
+declare const SectionHeader: ({ title, subtitle, actions, className }: SectionHeaderProps) => react_jsx_runtime.JSX.Element;
+
+type PageHeaderProps = {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    breadcrumbs?: ReactNode;
+    actions?: ReactNode;
+    extra?: ReactNode;
+    className?: string;
+};
+declare const PageHeader: ({ title, subtitle, breadcrumbs, actions, extra, className }: PageHeaderProps) => react_jsx_runtime.JSX.Element;
+
+type EntityHeaderProps = {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    avatarName?: string;
+    icon?: ComponentType<IconProps>;
+    meta?: ReactNode;
+    tags?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+};
+declare const EntityHeader: ({ title, subtitle, avatarName, icon: Icon, meta, tags, actions, className }: EntityHeaderProps) => react_jsx_runtime.JSX.Element;
+
+type FormActionsProps = {
+    children: ReactNode;
+    align?: "left" | "center" | "right" | "between";
+    className?: string;
+};
+declare const FormActions: ({ children, align, className }: FormActionsProps) => react_jsx_runtime.JSX.Element;
+
+type FormSectionProps = {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    children: ReactNode;
+    className?: string;
+};
+declare const FormSection: ({ title, description, actions, children, className }: FormSectionProps) => react_jsx_runtime.JSX.Element;
+declare const Fieldset: ({ title, description, actions, children, className }: FormSectionProps) => react_jsx_runtime.JSX.Element;
+
 type TabOption<T extends string = string> = {
     label: React.ReactNode;
     value: T;
+    icon?: React.ReactNode;
+    badge?: React.ReactNode;
+    disabled?: boolean;
 };
+type TabsVariant = "segmented" | "underline" | "cards";
+type TabsSize = "small" | "middle" | "large";
 type TabsProps<T extends string = string> = {
     options: TabOption<T>[];
     value: T;
     onChange: (value: T) => void;
     block?: boolean;
+    variant?: TabsVariant;
+    size?: TabsSize;
     className?: string;
     classNames?: {
         list?: string;
         tab?: string;
         activeTab?: string;
         inactiveTab?: string;
+        icon?: string;
+        badge?: string;
     };
 };
-declare const Tabs: <T extends string = string>({ block, ...props }: TabsProps<T>) => react_jsx_runtime.JSX.Element;
+declare const Tabs: <T extends string = string>({ block, variant, size, ...props }: TabsProps<T>) => react_jsx_runtime.JSX.Element;
 
 type TagColor = "geekblue" | "blue" | "green" | "cyan" | "red" | "volcano" | "orange" | "gold" | "purple" | "magenta" | "gray" | "default";
 type TagVariant = "outlined" | "filled";
@@ -849,7 +1057,7 @@ declare const useNotification: () => {
 type EmptyProps = {
     text?: string;
     description?: string;
-    icon?: React.FC<{
+    icon?: ComponentType<{
         size?: number | string;
         strokeWidth?: number;
         className?: string;
@@ -859,6 +1067,58 @@ type EmptyProps = {
 };
 declare const Empty: ({ text, description, icon: Icon, className, size, }: EmptyProps) => react_jsx_runtime.JSX.Element;
 
+type EmptyStateProps = {
+    text?: string;
+    description?: string;
+    icon?: EmptyProps["icon"];
+    size?: "default" | "compact";
+    primaryActionText?: string;
+    onPrimaryAction?: () => void;
+    secondaryActionText?: string;
+    onSecondaryAction?: () => void;
+    extra?: ReactNode;
+    className?: string;
+    classNames?: {
+        actions?: string;
+        extra?: string;
+    };
+};
+declare const EmptyState: ({ primaryActionText, onPrimaryAction, secondaryActionText, onSecondaryAction, extra, className, classNames, ...props }: EmptyStateProps) => react_jsx_runtime.JSX.Element;
+
+type StatTrendDirection = "up" | "down" | "neutral";
+type StatCardProps = {
+    label: string;
+    value: ReactNode;
+    description?: ReactNode;
+    icon?: ComponentType<IconProps>;
+    trend?: {
+        value: ReactNode;
+        direction?: StatTrendDirection;
+        label?: string;
+    };
+    footer?: ReactNode;
+    className?: string;
+};
+declare const StatCard: ({ label, value, description, icon: Icon, trend, footer, className }: StatCardProps) => react_jsx_runtime.JSX.Element;
+
+type DescriptionItem = {
+    label: ReactNode;
+    value: ReactNode;
+    span?: 1 | 2 | 3;
+};
+type DescriptionListProps = {
+    items: DescriptionItem[];
+    columns?: 1 | 2 | 3;
+    className?: string;
+};
+declare const DescriptionList: ({ items, columns, className }: DescriptionListProps) => react_jsx_runtime.JSX.Element;
+type KeyValueProps = {
+    label: ReactNode;
+    value: ReactNode;
+    className?: string;
+};
+declare const KeyValue: ({ label, value, className }: KeyValueProps) => react_jsx_runtime.JSX.Element;
+
 type PrettyProps = {
     data: unknown;
     className?: string;
@@ -875,6 +1135,13 @@ type SkeletonProps = {
 };
 declare const Skeleton: ({ active, title, paragraph, className, }: SkeletonProps) => react_jsx_runtime.JSX.Element;
 
+type SkeletonTableProps = {
+    rows?: number;
+    columns?: number;
+    className?: string;
+};
+declare const SkeletonTable: ({ rows, columns, className }: SkeletonTableProps) => react_jsx_runtime.JSX.Element;
+
 type DropdownDivider = {
     divider: true;
     visible?: boolean;
@@ -938,6 +1205,29 @@ type TooltipProps = {
 };
 declare const Tooltip: ({ title, children, placement, open: controlledOpen, onOpenChange, maxWidth, className, contentClassName, arrow, classNames, }: TooltipProps) => react_jsx_runtime.JSX.Element;
 
+type StepperItem = {
+    title: ReactNode;
+    description?: ReactNode;
+    status?: "complete" | "current" | "upcoming";
+};
+type StepperProps = {
+    items: StepperItem[];
+    className?: string;
+};
+declare const Stepper: ({ items, className }: StepperProps) => react_jsx_runtime.JSX.Element;
+
+type TimelineItem = {
+    title: ReactNode;
+    description?: ReactNode;
+    time?: ReactNode;
+    color?: "primary" | "success" | "danger" | "warning" | "neutral";
+};
+type TimelineProps = {
+    items: TimelineItem[];
+    className?: string;
+};
+declare const Timeline: ({ items, className }: TimelineProps) => react_jsx_runtime.JSX.Element;
+
 declare const uiTheme: {
     colors: {
         primary: {
@@ -1191,4 +1481,4 @@ type UiThemeConfig = {
 };
 declare function initUI(config?: UiThemeConfig): void;
 
-export { ActiveTag, type ActiveTagProps, Alert, type AlertProps, type AlertType, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, Button, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, ColorInput, type ColorInputProps, type ColumnType, type ConfirmOptions, DateInput, type DateInputProps, Drawer, DrawerContent, DrawerFooter, type DrawerPlacement, type DrawerProps, DrawerTitle, Dropdown, type DropdownOption, type DropdownPlacement, type DropdownProps, Empty, type EmptyProps, ErrorProvider, FilterCheckboxInput, FilterDateInput, type FilterDateRangeGroup, FilterDateRangePopover, type FilterDescriptor, FilterNumberInput, type FilterSelectGroupItem, FilterSelectGroupPopover, FilterSelectInput, FilterTextInput, FlagTag, type FlagTagProps, Grid, type GridApiQuery, type GridColumn, GridFilters, type GridHandle, type GridProps, type GridState, HtmlInput, type HtmlInputProps, type IconProps, InputError, InputField, InputLabel, MultiSelectInput, type MultiSelectInputProps, type NotificationOptions, NotificationProvider, type NotificationType, NumberInput, type NumberInputProps, Panel, type PanelProps, Popconfirm, type PopconfirmProps, Pretty, type PrettyProps, SelectInput, type SelectInputProps, ServerError, type ServerErrorValue, Skeleton, type SkeletonProps, SortDirection, Spinner, type SpinnerColor, type SpinnerProps, SwitchInput, type SwitchInputProps, type TabOption, Table, type TableColumn, type TableProps, type TableSize, Tabs, type TabsProps, Tag, type TagProps, TextInput, type TextInputProps, Tooltip, type TooltipPlacement, type TooltipProps, type UiColor, type UiDefaultIconType, type UiIconType, type UiSize, type UiThemeConfig, type UploadConfig, UploadInput, type UploadInputProps, type UploadItem, UploadProvider, type UploadStatus, getIcon, initUI, notification, registerIcons, uiTheme, useDrawer, useGrid, useNotification, useUploadConfig };
+export { ActionBar, ActiveTag, type ActiveTagProps, Alert, type AlertProps, type AlertType, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, Button, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, ColorInput, type ColorInputProps, type ColumnType, ConfirmButton, type ConfirmButtonProps, type ConfirmOptions, DateInput, type DateInputProps, type DescriptionItem, DescriptionList, type DescriptionListProps, Drawer, DrawerContent, DrawerFooter, type DrawerPlacement, type DrawerProps, DrawerTitle, Dropdown, type DropdownOption, type DropdownPlacement, type DropdownProps, Empty, type EmptyProps, EmptyState, type EmptyStateProps, EntityHeader, type EntityHeaderProps, ErrorProvider, Fieldset, FilterCheckboxInput, FilterDateInput, type FilterDateRangeGroup, FilterDateRangePopover, type FilterDescriptor, FilterNumberInput, type FilterSelectGroupItem, FilterSelectGroupPopover, FilterSelectInput, FilterTextInput, FlagTag, type FlagTagProps, FormActions, type FormActionsProps, FormSection, type FormSectionProps, Grid, type GridApiQuery, type GridColumn, GridFilters, type GridHandle, type GridProps, type GridState, HtmlInput, type HtmlInputProps, type IconProps, InlineEdit, type InlineEditProps, InputError, InputField, InputLabel, KeyValue, type KeyValueProps, Modal, ModalContent, ModalFooter, type ModalPlacement, type ModalProps, type ModalSize, ModalTitle, MultiSelectInput, type MultiSelectInputProps, type NotificationOptions, NotificationProvider, type NotificationType, NumberInput, type NumberInputProps, PageHeader, type PageHeaderProps, Panel, type PanelProps, Popconfirm, type PopconfirmProps, Pretty, type PrettyProps, RadioGroup, type RadioGroupProps, type RadioOption, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SelectInput, type SelectInputProps, ServerError, type ServerErrorValue, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, SortDirection, Spinner, type SpinnerColor, type SpinnerProps, StatCard, type StatCardProps, type StatTrendDirection, Stepper, type StepperItem, type StepperProps, SwitchInput, type SwitchInputProps, type TabOption, Table, type TableColumn, type TableProps, type TableSize, Tabs, type TabsProps, type TabsSize, type TabsVariant, Tag, type TagProps, TextInput, type TextInputProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, Toolbar, type ToolbarProps, Tooltip, type TooltipPlacement, type TooltipProps, type UiColor, type UiDefaultIconType, type UiIconType, type UiSize, type UiThemeConfig, type UploadConfig, UploadInput, type UploadInputProps, type UploadItem, UploadProvider, type UploadStatus, getIcon, initUI, notification, registerIcons, uiTheme, useDrawer, useGrid, useModal, useNotification, useUploadConfig };