@indusaction/cms-design-system 0.1.0 → 0.2.1

package/dist/index.d.ts

@@ -1,5 +1,12 @@
-import React from 'react';
-import { ButtonProps as ButtonProps$1, ThemeConfig } from 'antd';
+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, 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";
@@ -10,12 +17,418 @@ interface ButtonProps extends Omit<ButtonProps$1, "type" | "variant" | "size" |
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
+interface TabsProps extends Omit<TabsProps$1, "type"> {
+    type?: "line" | "card";
+}
+declare const Tabs: React.FC<TabsProps>;
+
+interface DropdownProps extends DropdownProps$1 {
+    children?: React.ReactNode;
+}
+interface DropdownButtonProps extends DropdownButtonProps$1 {
+    children?: React.ReactNode;
+}
+declare const DropdownButton: React.FC<DropdownButtonProps>;
+interface DropdownInterface extends React.FC<DropdownProps> {
+    Button: typeof DropdownButton;
+}
+declare const Dropdown: DropdownInterface;
+
+type TableMode = "client" | "server";
+type TableSortOrder = "ascend" | "descend" | null;
+type TableQuery = {
+    search: string;
+    page: number;
+    pageSize: number;
+    sortField?: React.Key | readonly React.Key[];
+    sortOrder?: TableSortOrder;
+    filters: Record<string, FilterValue | null>;
+};
+type TableSearchConfig = {
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    debounceMs?: number;
+};
+type TableColumnType<T> = ColumnType<T> & {
+    /** Include this column in free-text search. Default: true when `dataIndex` is set. */
+    searchable?: boolean;
+};
+type TableColumnGroupType<T> = Omit<ColumnGroupType<T>, "children"> & {
+    children: TableColumnsType<T>;
+};
+type TableColumnsType<T> = (TableColumnGroupType<T> | TableColumnType<T>)[];
+interface TableProps<T extends object> extends Omit<TableProps$1<T>, "columns" | "onChange" | "pagination"> {
+    columns?: TableColumnsType<T>;
+    /**
+     * `client` (default): search, filters, sort, and pagination run on `dataSource`.
+     * `server`: `dataSource` is the current page only. Pass `pagination.total` from the
+     * API and handle `onQueryChange` to fetch the next page / search / sort / filters.
+     */
+    mode?: TableMode;
+    /** Free-text search, shown on the same row as pagination above the table. Pass `false` to hide it. */
+    search?: boolean | TableSearchConfig;
+    pagination?: false | TablePaginationConfig;
+    onChange?: (pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<T> | SorterResult<T>[], extra: TableCurrentDataSource<T>) => void;
+    /** Fires whenever search, page, page size, sort, or column filters change. */
+    onQueryChange?: (query: TableQuery) => void;
+}
+declare function Table<T extends object>({ columns, dataSource, mode, search, pagination, onChange, onQueryChange, scroll, size, loading, rowKey, ...rest }: TableProps<T>): React.JSX.Element;
+declare namespace Table {
+    var displayName: string;
+}
+
+interface TagProps extends TagProps$1 {
+    children?: React.ReactNode;
+}
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface LinkProps extends LinkProps$1 {
+    children?: React.ReactNode;
+}
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLElement>>;
+
+interface CardProps extends Omit<CardProps$1, "title" | "loading"> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    tags?: React.ReactNode;
+    extraInfo?: React.ReactNode;
+    ctas?: React.ReactNode;
+    layout?: "inline" | "grid";
+    children?: React.ReactNode;
+    /** Replace body content with a details skeleton while data is loading. */
+    loading?: boolean;
+    /** Placeholder field rows shown when `loading` is true. Default: 5 */
+    loadingRows?: number;
+}
+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 */
+    rows?: number;
+    /** Show an avatar + title block above the fields. */
+    avatar?: boolean;
+}
+declare function DetailsSkeleton({ rows, avatar }: DetailsSkeletonProps): React.JSX.Element;
+declare namespace DetailsSkeleton {
+    var displayName: string;
+}
+interface SkeletonInterface extends React.FC<SkeletonProps> {
+    Button: typeof Skeleton$1.Button;
+    Avatar: typeof Skeleton$1.Avatar;
+    Input: typeof Skeleton$1.Input;
+    Image: typeof Skeleton$1.Image;
+    Node: typeof Skeleton$1.Node;
+    Details: typeof DetailsSkeleton;
+}
+declare const Skeleton: SkeletonInterface;
+
+interface ModalProps extends ModalProps$1 {
+    children?: React.ReactNode;
+}
+interface ModalInterface extends React.FC<ModalProps> {
+    info: typeof Modal$1.info;
+    success: typeof Modal$1.success;
+    error: typeof Modal$1.error;
+    warning: typeof Modal$1.warning;
+    warn: typeof Modal$1.warn;
+    confirm: typeof Modal$1.confirm;
+    destroyAll: typeof Modal$1.destroyAll;
+    config: typeof Modal$1.config;
+    useModal: typeof Modal$1.useModal;
+}
+declare const Modal: ModalInterface;
+
+type HeaderBreadcrumb = {
+    title: React.ReactNode;
+    href?: string;
+    onClick?: () => void;
+};
+type HeaderUser = {
+    name: string;
+    role?: string;
+    avatarSrc?: string;
+};
+type HeaderAction = {
+    key: string;
+    label: React.ReactNode;
+    variant?: ButtonVariant;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    href?: string;
+    disabled?: boolean;
+    danger?: boolean;
+};
+interface HeaderProps {
+    /** Page title on the left of the bar. */
+    title?: React.ReactNode;
+    /** Supporting text under the title. `description` is preferred. */
+    description?: React.ReactNode;
+    /** @deprecated Use `description`. */
+    subtitle?: React.ReactNode;
+    breadcrumbs?: HeaderBreadcrumb[];
+    /** Primary CTAs, rendered on the top-right of the bar. */
+    actions?: HeaderAction[];
+    /** Extra nodes after the CTA buttons (filters, custom controls). */
+    extra?: React.ReactNode;
+    /** Slot before the title — typically a mobile menu button. */
+    leading?: React.ReactNode;
+    user?: HeaderUser | null;
+    userMenu?: MenuProps;
+    onLogout?: () => void;
+    sticky?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLElement>>;
+
+declare const indusActionLogo: string;
+
+type SideNavItem = NonNullable<NonNullable<MenuProps["items"]>[number]>;
+interface SideNavUser {
+    name: string;
+    role?: string;
+    avatarSrc?: string;
+}
+interface SideNavProps extends Omit<SiderProps, "children" | "breakpoint"> {
+    items?: MenuProps["items"];
+    menu?: Omit<MenuProps, "items" | "mode">;
+    user?: SideNavUser | null;
+    onLogout?: () => void;
+    logoutLabel?: string;
+    logoSrc?: string;
+    logoAlt?: string;
+    logo?: ReactNode;
+    /**
+     * Below this breakpoint the sider becomes a drawer (phone layout).
+     * Set `false` to always keep the desktop sider.
+     * @default "md"
+     */
+    breakpoint?: SiderProps["breakpoint"] | false;
+    /**
+     * When false, skip the fixed mobile logo bar. Use when a parent header
+     * already provides a menu trigger (for example AppShell).
+     * @default true
+     */
+    showMobileBar?: boolean;
+    /** Replace or hide (`null`) the default mobile menu button. */
+    mobileTrigger?: ReactNode | null;
+    mobileOpen?: boolean;
+    onMobileOpenChange?: (open: boolean) => void;
+}
+declare function SideNav({ items, menu, user, onLogout, logoutLabel, logoSrc, logoAlt, logo, width, theme, collapsed: collapsedProp, defaultCollapsed, onCollapse, collapsible, trigger, style, breakpoint, showMobileBar, mobileTrigger, mobileOpen: mobileOpenProp, onMobileOpenChange, ...siderProps }: SideNavProps): React.JSX.Element;
+declare namespace SideNav {
+    var displayName: string;
+}
+
+type StatusPageStatus = NonNullable<ResultProps["status"]>;
+interface StatusPageProps {
+    status: StatusPageStatus;
+    title?: React.ReactNode;
+    subTitle?: React.ReactNode;
+    actionLabel?: string;
+    /** Click handler for the default action button. */
+    onAction?: () => void;
+    /** If set, the default action button renders as a link. */
+    actionHref?: string;
+    /** Replaces the default action button. */
+    extra?: React.ReactNode;
+    /** Fill the viewport and center the result. Default: true. */
+    fullPage?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function StatusPage({ status, title, subTitle, actionLabel, onAction, actionHref, extra, fullPage, className, style, }: StatusPageProps): React.JSX.Element;
+declare namespace StatusPage {
+    var displayName: string;
+}
+
+type NotFoundPageProps = Omit<StatusPageProps, "status">;
+declare function NotFoundPage({ title, subTitle, actionLabel, actionHref, onAction, extra, ...rest }: NotFoundPageProps): React.JSX.Element;
+declare namespace NotFoundPage {
+    var displayName: string;
+}
+
+type UnauthorizedPageProps = Omit<StatusPageProps, "status">;
+declare function UnauthorizedPage({ title, subTitle, actionLabel, actionHref, onAction, extra, ...rest }: UnauthorizedPageProps): React.JSX.Element;
+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";
         readonly primaryHover: "#6B7BA5";
         readonly primaryActive: "#4A587C";
         readonly primaryLight: "#E8EBF2";
+        readonly accent: "#F69120";
     };
     readonly neutral: {
         readonly white: "#FFFFFF";
@@ -38,13 +451,59 @@ declare const colors: {
         readonly info: "#596993";
     };
 };
+declare const spacing: {
+    readonly none: 0;
+    readonly xxs: 4;
+    readonly xs: 8;
+    readonly sm: 12;
+    readonly md: 16;
+    readonly lg: 24;
+    readonly xl: 32;
+    readonly xxl: 48;
+};
+declare const fontSize: {
+    readonly xxs: 11;
+    readonly xs: 12;
+    readonly sm: 14;
+    readonly md: 16;
+    readonly lg: 20;
+    readonly xl: 24;
+    readonly xxl: 30;
+};
+/** Viewport min-widths. Matches Ant Design's `Grid` / `Sider` breakpoint names. */
+declare const breakpoints: {
+    readonly xs: 480;
+    readonly sm: 576;
+    readonly md: 768;
+    readonly lg: 992;
+    readonly xl: 1200;
+    readonly xxl: 1600;
+};
 type Colors = typeof colors;
-
+type Spacing = typeof spacing;
+type FontSize = typeof fontSize;
+type Breakpoints = typeof breakpoints;
+/**
+ * Seed + map tokens only. Ant Design's algorithm applies these to Button,
+ * Menu, Layout, and every other component — no per-component lists.
+ */
 declare const theme: ThemeConfig;
-
 interface ThemeProviderProps {
     children: React.ReactNode;
 }
-declare function ThemeProvider({ children }: ThemeProviderProps): React.JSX.Element;
+declare function ThemeProvider({ children }: ThemeProviderProps): React.FunctionComponentElement<antd.ConfigProviderProps>;
+
+type IconProps = {
+    size?: number;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare function LogoutIcon({ size, className, style }: IconProps): React.JSX.Element;
+declare function CollapseIcon({ collapsed, size, className, style, }: IconProps & {
+    collapsed?: boolean;
+}): 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 { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type Colors, ThemeProvider, type ThemeProviderProps, colors, 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 };