@indusaction/cms-design-system 0.2.0 → 0.2.1

package/dist/index.d.cts

@@ -1,11 +1,12 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, CSSProperties } from 'react';
 import * as antd from 'antd';
-import { ButtonProps as ButtonProps$1, TabsProps as TabsProps$1, DropdownProps as DropdownProps$1, TablePaginationConfig, TagProps as TagProps$1, CardProps as CardProps$1, SkeletonProps as SkeletonProps$1, Skeleton as Skeleton$1, ModalProps as ModalProps$1, Modal as Modal$1, MenuProps, SiderProps, ResultProps, ThemeConfig } from 'antd';
+import { ButtonProps as ButtonProps$1, TabsProps as TabsProps$1, DropdownProps as DropdownProps$1, TablePaginationConfig, TagProps as TagProps$1, CardProps as CardProps$1, StatisticProps, SkeletonProps as SkeletonProps$1, Skeleton as Skeleton$1, ModalProps as ModalProps$1, Modal as Modal$1, MenuProps, SiderProps, ResultProps, AlertProps, notification, message, ThemeConfig } from 'antd';
 export { MenuProps, ModalFuncProps, TabPaneProps } from 'antd';
 import { DropdownButtonProps as DropdownButtonProps$1 } from 'antd/es/dropdown';
 import { TableProps as TableProps$1, ColumnGroupType, ColumnType } from 'antd/es/table';
 import { FilterValue, SorterResult, TableCurrentDataSource } from 'antd/es/table/interface';
 import { LinkProps as LinkProps$1 } from 'antd/es/typography/Link';
+import * as antd_es_alert_Alert from 'antd/es/alert/Alert';
 
 type ButtonVariant = "primary" | "default" | "dashed" | "link" | "text";
 type ButtonSize = "large" | "middle" | "small";
@@ -103,6 +104,132 @@ interface CardProps extends Omit<CardProps$1, "title" | "loading"> {
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 
+type MetricCardVariant = "solid" | "outlined" | "tinted";
+type MetricCardLayout = "vertical" | "horizontal";
+type MetricCardSize = "small" | "default" | "large";
+type MetricCardStatus = "primary" | "success" | "warning" | "error" | "info" | "neutral";
+interface MetricCardProps {
+    title: ReactNode;
+    value?: number | string | null;
+    description?: ReactNode;
+    variant?: MetricCardVariant;
+    layout?: MetricCardLayout;
+    size?: MetricCardSize;
+    status?: MetricCardStatus;
+    color?: string;
+    textColor?: string;
+    icon?: ReactNode;
+    prefix?: StatisticProps["prefix"];
+    suffix?: StatisticProps["suffix"];
+    precision?: StatisticProps["precision"];
+    formatter?: StatisticProps["formatter"];
+    groupSeparator?: StatisticProps["groupSeparator"];
+    decimalSeparator?: StatisticProps["decimalSeparator"];
+    loading?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const MetricCard: React.ForwardRefExoticComponent<MetricCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ChartDatum {
+    label: string;
+    value: number;
+    id?: string;
+    color?: string;
+}
+interface GroupedChartDatum {
+    label: string;
+    values: Record<string, number>;
+    id?: string;
+}
+interface ColumnChartProps {
+    data: ChartDatum[] | GroupedChartDatum[];
+    mode?: "basic" | "stacked" | "grouped";
+    seriesColors?: readonly string[];
+    showLegend?: boolean;
+    height?: number;
+    color?: string;
+    ariaLabel?: string;
+    formatValue?: (value: number) => string;
+    style?: CSSProperties;
+}
+declare function ColumnChart({ data, mode, seriesColors, showLegend, height, color, ariaLabel, formatValue, style, }: ColumnChartProps): React.JSX.Element;
+
+interface BarChartProps {
+    data: ChartDatum[] | GroupedChartDatum[];
+    mode?: "basic" | "stacked" | "grouped";
+    seriesColors?: readonly string[];
+    showLegend?: boolean;
+    height?: number;
+    color?: string;
+    ariaLabel?: string;
+    formatValue?: (value: number) => string;
+    style?: CSSProperties;
+}
+declare function BarChart({ data, mode, seriesColors, showLegend, height, color, ariaLabel, formatValue, style, }: BarChartProps): React.JSX.Element;
+
+interface DonutChartProps {
+    data: ChartDatum[];
+    height?: number;
+    centerLabel?: string;
+    ariaLabel?: string;
+    showLegend?: boolean;
+    formatValue?: (value: number) => string;
+    style?: CSSProperties;
+}
+declare function DonutChart({ data, height, centerLabel, ariaLabel, showLegend, formatValue, style, }: DonutChartProps): React.JSX.Element;
+
+interface TimeSeriesDatum {
+    date: string;
+    value: number;
+    series?: string;
+    id?: string;
+}
+interface TimeSeriesChartProps {
+    data: TimeSeriesDatum[];
+    type?: "line" | "area" | "step";
+    smooth?: boolean;
+    height?: number;
+    colors?: readonly string[];
+    ariaLabel?: string;
+    showLegend?: boolean;
+    formatValue?: (value: number) => string;
+    formatDate?: (date: string) => string;
+    threshold?: number;
+    thresholdLabel?: string;
+    style?: CSSProperties;
+}
+declare function TimeSeriesChart({ data, type, smooth, height, colors: seriesColors, ariaLabel, showLegend, formatValue, formatDate, threshold, thresholdLabel, style, }: TimeSeriesChartProps): React.JSX.Element;
+declare const LineChart: typeof TimeSeriesChart;
+type LineChartProps = TimeSeriesChartProps;
+
+interface BulletDatum {
+    label: string;
+    value: number;
+    target: number;
+    ranges?: number[];
+    max?: number;
+    id?: string;
+}
+interface BulletChartProps {
+    data: BulletDatum[];
+    height?: number;
+    ariaLabel?: string;
+    formatValue?: (value: number) => string;
+    style?: CSSProperties;
+}
+declare function BulletChart({ data, height, ariaLabel, formatValue, style, }: BulletChartProps): React.JSX.Element;
+
+interface HistogramChartProps {
+    data: number[];
+    bins?: "auto" | number;
+    height?: number;
+    color?: string;
+    ariaLabel?: string;
+    style?: CSSProperties;
+}
+declare function HistogramChart({ data, bins, height, color, ariaLabel, style, }: HistogramChartProps): React.JSX.Element;
+
 type SkeletonProps = SkeletonProps$1;
 interface DetailsSkeletonProps {
     /** Number of label/value placeholder rows. Default: 5 */
@@ -256,6 +383,45 @@ declare namespace UnauthorizedPage {
     var displayName: string;
 }
 
+type InlineAlertType = "success" | "info" | "warning" | "error";
+type InlineAlertVariant = "outlined" | "filled";
+interface InlineAlertProps extends Omit<AlertProps, "variant"> {
+    type?: InlineAlertType;
+    variant?: InlineAlertVariant;
+    showIcon?: boolean;
+}
+declare const InlineAlert: React.ForwardRefExoticComponent<InlineAlertProps & React.RefAttributes<antd_es_alert_Alert.AlertRef>>;
+type ToastApi = ReturnType<typeof message.useMessage>[0];
+type ToastConfig = Parameters<ToastApi["open"]>[0];
+type ToastTypeMethod = ToastApi["success"];
+type AntNotificationConfig = Parameters<ReturnType<typeof notification.useNotification>[0]["open"]>[0];
+type NotificationPlacement = NonNullable<AntNotificationConfig["placement"]>;
+interface NotificationConfig extends Omit<AntNotificationConfig, "btn"> {
+    actions?: ReactNode;
+    btn?: ReactNode;
+}
+type NotificationApi = Omit<ReturnType<typeof notification.useNotification>[0], "open" | "success" | "error" | "info" | "warning"> & {
+    open: (config: NotificationConfig) => void;
+    success: (config: NotificationConfig) => void;
+    error: (config: NotificationConfig) => void;
+    info: (config: NotificationConfig) => void;
+    warning: (config: NotificationConfig) => void;
+};
+type NotificationTypeMethod = NotificationApi["success"];
+interface NotificationContextValue {
+    toast: ToastApi;
+    notify: NotificationApi;
+}
+interface NotificationProviderProps {
+    children: ReactNode;
+}
+declare const useNotification: () => NotificationContextValue;
+declare const useNotifications: () => NotificationContextValue;
+interface NotificationProviderComponent extends React.FC<NotificationProviderProps> {
+    Alert: typeof InlineAlert;
+}
+declare const NotificationProvider: NotificationProviderComponent;
+
 declare const colors: {
     readonly brand: {
         readonly primary: "#596993";
@@ -338,5 +504,6 @@ declare function CollapseIcon({ collapsed, size, className, style, }: IconProps
 }): React.JSX.Element;
 declare function MenuIcon({ size, className, style }: IconProps): React.JSX.Element;
 declare function CloseIcon({ size, className, style }: IconProps): React.JSX.Element;
+declare function DownloadIcon({ size, className, style }: IconProps): React.JSX.Element;
 
-export { type Breakpoints, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, CloseIcon, CollapseIcon, type Colors, type DetailsSkeletonProps, Dropdown, type DropdownButtonProps, type DropdownInterface, type DropdownProps, type FontSize, Header, type HeaderAction, type HeaderBreadcrumb, type HeaderProps, type HeaderUser, Link, type LinkProps, LogoutIcon, MenuIcon, Modal, type ModalInterface, type ModalProps, NotFoundPage, type NotFoundPageProps, SideNav, type SideNavItem, type SideNavProps, type SideNavUser, Skeleton, type SkeletonInterface, type SkeletonProps, type Spacing, StatusPage, type StatusPageProps, type StatusPageStatus, Table, type TableColumnGroupType, type TableColumnType, type TableColumnsType, type TableMode, type TableProps, type TableQuery, type TableSearchConfig, type TableSortOrder, Tabs, type TabsProps, Tag, type TagProps, ThemeProvider, type ThemeProviderProps, UnauthorizedPage, type UnauthorizedPageProps, breakpoints, colors, fontSize, indusActionLogo, spacing, theme };
+export { BarChart, type BarChartProps, type Breakpoints, BulletChart, type BulletChartProps, type BulletDatum, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type ChartDatum, CloseIcon, CollapseIcon, type Colors, ColumnChart, type ColumnChartProps, type DetailsSkeletonProps, DonutChart, type DonutChartProps, DownloadIcon, Dropdown, type DropdownButtonProps, type DropdownInterface, type DropdownProps, type FontSize, type GroupedChartDatum, Header, type HeaderAction, type HeaderBreadcrumb, type HeaderProps, type HeaderUser, HistogramChart, type HistogramChartProps, InlineAlert, type InlineAlertProps, type InlineAlertType, type InlineAlertVariant, LineChart, type LineChartProps, Link, type LinkProps, LogoutIcon, MenuIcon, MetricCard, type MetricCardLayout, type MetricCardProps, type MetricCardSize, type MetricCardStatus, type MetricCardVariant, Modal, type ModalInterface, type ModalProps, NotFoundPage, type NotFoundPageProps, type NotificationApi, type NotificationConfig, type NotificationContextValue, type NotificationPlacement, NotificationProvider, type NotificationProviderComponent, type NotificationProviderProps, type NotificationTypeMethod, SideNav, type SideNavItem, type SideNavProps, type SideNavUser, Skeleton, type SkeletonInterface, type SkeletonProps, type Spacing, StatusPage, type StatusPageProps, type StatusPageStatus, Table, type TableColumnGroupType, type TableColumnType, type TableColumnsType, type TableMode, type TableProps, type TableQuery, type TableSearchConfig, type TableSortOrder, Tabs, type TabsProps, Tag, type TagProps, ThemeProvider, type ThemeProviderProps, TimeSeriesChart, type TimeSeriesChartProps, type TimeSeriesDatum, type ToastApi, type ToastConfig, type ToastTypeMethod, UnauthorizedPage, type UnauthorizedPageProps, breakpoints, colors, fontSize, indusActionLogo, spacing, theme, useNotification, useNotifications };

package/dist/index.d.ts

@@ -1,11 +1,12 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, CSSProperties } from 'react';
 import * as antd from 'antd';
-import { ButtonProps as ButtonProps$1, TabsProps as TabsProps$1, DropdownProps as DropdownProps$1, TablePaginationConfig, TagProps as TagProps$1, CardProps as CardProps$1, SkeletonProps as SkeletonProps$1, Skeleton as Skeleton$1, ModalProps as ModalProps$1, Modal as Modal$1, MenuProps, SiderProps, ResultProps, ThemeConfig } from 'antd';
+import { ButtonProps as ButtonProps$1, TabsProps as TabsProps$1, DropdownProps as DropdownProps$1, TablePaginationConfig, TagProps as TagProps$1, CardProps as CardProps$1, StatisticProps, SkeletonProps as SkeletonProps$1, Skeleton as Skeleton$1, ModalProps as ModalProps$1, Modal as Modal$1, MenuProps, SiderProps, ResultProps, AlertProps, notification, message, ThemeConfig } from 'antd';
 export { MenuProps, ModalFuncProps, TabPaneProps } from 'antd';
 import { DropdownButtonProps as DropdownButtonProps$1 } from 'antd/es/dropdown';
 import { TableProps as TableProps$1, ColumnGroupType, ColumnType } from 'antd/es/table';
 import { FilterValue, SorterResult, TableCurrentDataSource } from 'antd/es/table/interface';
 import { LinkProps as LinkProps$1 } from 'antd/es/typography/Link';
+import * as antd_es_alert_Alert from 'antd/es/alert/Alert';
 
 type ButtonVariant = "primary" | "default" | "dashed" | "link" | "text";
 type ButtonSize = "large" | "middle" | "small";
@@ -103,6 +104,132 @@ interface CardProps extends Omit<CardProps$1, "title" | "loading"> {
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 
+type MetricCardVariant = "solid" | "outlined" | "tinted";
+type MetricCardLayout = "vertical" | "horizontal";
+type MetricCardSize = "small" | "default" | "large";
+type MetricCardStatus = "primary" | "success" | "warning" | "error" | "info" | "neutral";
+interface MetricCardProps {
+    title: ReactNode;
+    value?: number | string | null;
+    description?: ReactNode;
+    variant?: MetricCardVariant;
+    layout?: MetricCardLayout;
+    size?: MetricCardSize;
+    status?: MetricCardStatus;
+    color?: string;
+    textColor?: string;
+    icon?: ReactNode;
+    prefix?: StatisticProps["prefix"];
+    suffix?: StatisticProps["suffix"];
+    precision?: StatisticProps["precision"];
+    formatter?: StatisticProps["formatter"];
+    groupSeparator?: StatisticProps["groupSeparator"];
+    decimalSeparator?: StatisticProps["decimalSeparator"];
+    loading?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const MetricCard: React.ForwardRefExoticComponent<MetricCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ChartDatum {
+    label: string;
+    value: number;
+    id?: string;
+    color?: string;
+}
+interface GroupedChartDatum {
+    label: string;
+    values: Record<string, number>;
+    id?: string;
+}
+interface ColumnChartProps {
+    data: ChartDatum[] | GroupedChartDatum[];
+    mode?: "basic" | "stacked" | "grouped";
+    seriesColors?: readonly string[];
+    showLegend?: boolean;
+    height?: number;
+    color?: string;
+    ariaLabel?: string;
+    formatValue?: (value: number) => string;
+    style?: CSSProperties;
+}
+declare function ColumnChart({ data, mode, seriesColors, showLegend, height, color, ariaLabel, formatValue, style, }: ColumnChartProps): React.JSX.Element;
+
+interface BarChartProps {
+    data: ChartDatum[] | GroupedChartDatum[];
+    mode?: "basic" | "stacked" | "grouped";
+    seriesColors?: readonly string[];
+    showLegend?: boolean;
+    height?: number;
+    color?: string;
+    ariaLabel?: string;
+    formatValue?: (value: number) => string;
+    style?: CSSProperties;
+}
+declare function BarChart({ data, mode, seriesColors, showLegend, height, color, ariaLabel, formatValue, style, }: BarChartProps): React.JSX.Element;
+
+interface DonutChartProps {
+    data: ChartDatum[];
+    height?: number;
+    centerLabel?: string;
+    ariaLabel?: string;
+    showLegend?: boolean;
+    formatValue?: (value: number) => string;
+    style?: CSSProperties;
+}
+declare function DonutChart({ data, height, centerLabel, ariaLabel, showLegend, formatValue, style, }: DonutChartProps): React.JSX.Element;
+
+interface TimeSeriesDatum {
+    date: string;
+    value: number;
+    series?: string;
+    id?: string;
+}
+interface TimeSeriesChartProps {
+    data: TimeSeriesDatum[];
+    type?: "line" | "area" | "step";
+    smooth?: boolean;
+    height?: number;
+    colors?: readonly string[];
+    ariaLabel?: string;
+    showLegend?: boolean;
+    formatValue?: (value: number) => string;
+    formatDate?: (date: string) => string;
+    threshold?: number;
+    thresholdLabel?: string;
+    style?: CSSProperties;
+}
+declare function TimeSeriesChart({ data, type, smooth, height, colors: seriesColors, ariaLabel, showLegend, formatValue, formatDate, threshold, thresholdLabel, style, }: TimeSeriesChartProps): React.JSX.Element;
+declare const LineChart: typeof TimeSeriesChart;
+type LineChartProps = TimeSeriesChartProps;
+
+interface BulletDatum {
+    label: string;
+    value: number;
+    target: number;
+    ranges?: number[];
+    max?: number;
+    id?: string;
+}
+interface BulletChartProps {
+    data: BulletDatum[];
+    height?: number;
+    ariaLabel?: string;
+    formatValue?: (value: number) => string;
+    style?: CSSProperties;
+}
+declare function BulletChart({ data, height, ariaLabel, formatValue, style, }: BulletChartProps): React.JSX.Element;
+
+interface HistogramChartProps {
+    data: number[];
+    bins?: "auto" | number;
+    height?: number;
+    color?: string;
+    ariaLabel?: string;
+    style?: CSSProperties;
+}
+declare function HistogramChart({ data, bins, height, color, ariaLabel, style, }: HistogramChartProps): React.JSX.Element;
+
 type SkeletonProps = SkeletonProps$1;
 interface DetailsSkeletonProps {
     /** Number of label/value placeholder rows. Default: 5 */
@@ -256,6 +383,45 @@ declare namespace UnauthorizedPage {
     var displayName: string;
 }
 
+type InlineAlertType = "success" | "info" | "warning" | "error";
+type InlineAlertVariant = "outlined" | "filled";
+interface InlineAlertProps extends Omit<AlertProps, "variant"> {
+    type?: InlineAlertType;
+    variant?: InlineAlertVariant;
+    showIcon?: boolean;
+}
+declare const InlineAlert: React.ForwardRefExoticComponent<InlineAlertProps & React.RefAttributes<antd_es_alert_Alert.AlertRef>>;
+type ToastApi = ReturnType<typeof message.useMessage>[0];
+type ToastConfig = Parameters<ToastApi["open"]>[0];
+type ToastTypeMethod = ToastApi["success"];
+type AntNotificationConfig = Parameters<ReturnType<typeof notification.useNotification>[0]["open"]>[0];
+type NotificationPlacement = NonNullable<AntNotificationConfig["placement"]>;
+interface NotificationConfig extends Omit<AntNotificationConfig, "btn"> {
+    actions?: ReactNode;
+    btn?: ReactNode;
+}
+type NotificationApi = Omit<ReturnType<typeof notification.useNotification>[0], "open" | "success" | "error" | "info" | "warning"> & {
+    open: (config: NotificationConfig) => void;
+    success: (config: NotificationConfig) => void;
+    error: (config: NotificationConfig) => void;
+    info: (config: NotificationConfig) => void;
+    warning: (config: NotificationConfig) => void;
+};
+type NotificationTypeMethod = NotificationApi["success"];
+interface NotificationContextValue {
+    toast: ToastApi;
+    notify: NotificationApi;
+}
+interface NotificationProviderProps {
+    children: ReactNode;
+}
+declare const useNotification: () => NotificationContextValue;
+declare const useNotifications: () => NotificationContextValue;
+interface NotificationProviderComponent extends React.FC<NotificationProviderProps> {
+    Alert: typeof InlineAlert;
+}
+declare const NotificationProvider: NotificationProviderComponent;
+
 declare const colors: {
     readonly brand: {
         readonly primary: "#596993";
@@ -338,5 +504,6 @@ declare function CollapseIcon({ collapsed, size, className, style, }: IconProps
 }): React.JSX.Element;
 declare function MenuIcon({ size, className, style }: IconProps): React.JSX.Element;
 declare function CloseIcon({ size, className, style }: IconProps): React.JSX.Element;
+declare function DownloadIcon({ size, className, style }: IconProps): React.JSX.Element;
 
-export { type Breakpoints, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, CloseIcon, CollapseIcon, type Colors, type DetailsSkeletonProps, Dropdown, type DropdownButtonProps, type DropdownInterface, type DropdownProps, type FontSize, Header, type HeaderAction, type HeaderBreadcrumb, type HeaderProps, type HeaderUser, Link, type LinkProps, LogoutIcon, MenuIcon, Modal, type ModalInterface, type ModalProps, NotFoundPage, type NotFoundPageProps, SideNav, type SideNavItem, type SideNavProps, type SideNavUser, Skeleton, type SkeletonInterface, type SkeletonProps, type Spacing, StatusPage, type StatusPageProps, type StatusPageStatus, Table, type TableColumnGroupType, type TableColumnType, type TableColumnsType, type TableMode, type TableProps, type TableQuery, type TableSearchConfig, type TableSortOrder, Tabs, type TabsProps, Tag, type TagProps, ThemeProvider, type ThemeProviderProps, UnauthorizedPage, type UnauthorizedPageProps, breakpoints, colors, fontSize, indusActionLogo, spacing, theme };
+export { BarChart, type BarChartProps, type Breakpoints, BulletChart, type BulletChartProps, type BulletDatum, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type ChartDatum, CloseIcon, CollapseIcon, type Colors, ColumnChart, type ColumnChartProps, type DetailsSkeletonProps, DonutChart, type DonutChartProps, DownloadIcon, Dropdown, type DropdownButtonProps, type DropdownInterface, type DropdownProps, type FontSize, type GroupedChartDatum, Header, type HeaderAction, type HeaderBreadcrumb, type HeaderProps, type HeaderUser, HistogramChart, type HistogramChartProps, InlineAlert, type InlineAlertProps, type InlineAlertType, type InlineAlertVariant, LineChart, type LineChartProps, Link, type LinkProps, LogoutIcon, MenuIcon, MetricCard, type MetricCardLayout, type MetricCardProps, type MetricCardSize, type MetricCardStatus, type MetricCardVariant, Modal, type ModalInterface, type ModalProps, NotFoundPage, type NotFoundPageProps, type NotificationApi, type NotificationConfig, type NotificationContextValue, type NotificationPlacement, NotificationProvider, type NotificationProviderComponent, type NotificationProviderProps, type NotificationTypeMethod, SideNav, type SideNavItem, type SideNavProps, type SideNavUser, Skeleton, type SkeletonInterface, type SkeletonProps, type Spacing, StatusPage, type StatusPageProps, type StatusPageStatus, Table, type TableColumnGroupType, type TableColumnType, type TableColumnsType, type TableMode, type TableProps, type TableQuery, type TableSearchConfig, type TableSortOrder, Tabs, type TabsProps, Tag, type TagProps, ThemeProvider, type ThemeProviderProps, TimeSeriesChart, type TimeSeriesChartProps, type TimeSeriesDatum, type ToastApi, type ToastConfig, type ToastTypeMethod, UnauthorizedPage, type UnauthorizedPageProps, breakpoints, colors, fontSize, indusActionLogo, spacing, theme, useNotification, useNotifications };