@dybo-ai/design 1.3.0 → 2.0.0

package/dist/index.d.cts

@@ -22,7 +22,7 @@ interface IInputProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 declare function Input({ label, error, className, id, ...props }: IInputProps): react.JSX.Element;
 
-type BadgeStatus = "brand" | "resolved" | "high" | "medium" | "success" | "warning" | "danger";
+type BadgeStatus = "brand" | "resolved" | "high" | "medium" | "success" | "warning" | "danger" | "soon";
 interface IBadgeProps extends HTMLAttributes<HTMLSpanElement> {
     status?: BadgeStatus;
 }
@@ -125,12 +125,15 @@ declare function NavItem({ label, href, active, icon, onClick, className, }: INa
 declare function NavSection({ label }: INavSectionProps): react.JSX.Element;
 
 type ColumnAlign = "left" | "right" | "center";
+type SortDirection = "asc" | "desc";
 interface IColumn<TRow = Record<string, unknown>> {
     key: string;
     label: string;
     align?: ColumnAlign;
     format?: (value: unknown, row: TRow) => ReactNode;
     className?: string;
+    /** Renders the arrows-up-down affordance and calls `onSort` on click. */
+    sortable?: boolean;
 }
 interface IDataTableProps<TRow extends Record<string, unknown> = Record<string, unknown>> {
     columns: IColumn<TRow>[];
@@ -139,8 +142,14 @@ interface IDataTableProps<TRow extends Record<string, unknown> = Record<string,
     onRowClick?: (row: TRow) => void;
     emptyMessage?: string;
     className?: string;
+    /** Search/filter/CTA row rendered above the table, inside the same wrapper. */
+    toolbar?: ReactNode;
+    /** Controlled sort state — the table has no sort logic of its own. */
+    sortColumn?: string;
+    sortDirection?: SortDirection;
+    onSort?: (key: string) => void;
 }
-declare function DataTable<TRow extends Record<string, unknown>>({ columns, rows, rowKey, onRowClick, emptyMessage, className, }: IDataTableProps<TRow>): react.JSX.Element;
+declare function DataTable<TRow extends Record<string, unknown>>({ columns, rows, rowKey, onRowClick, emptyMessage, className, toolbar, sortColumn, sortDirection, onSort, }: IDataTableProps<TRow>): react.JSX.Element;
 
 interface ITab {
     key: string;
@@ -224,4 +233,375 @@ interface ILoginCardProps {
 }
 declare function LoginCard({ logo, subtitle, children, className, }: ILoginCardProps): react.JSX.Element;
 
-export { Alert, type AlertVariant, AppShell, Badge, type BadgeStatus, Button, type ButtonSize, type ButtonVariant, Card, type ColumnAlign, DataTable, Drawer, type IAlertProps, type IAppShellProps, type IBadgeProps, type IButtonProps, type ICardProps, type IColumn, type IDataTableProps, type IDrawerProps, type IIconRailItemProps, type IIconRailProps, type IInputProps, type ILoginCardProps, type IModalProps, type INavItemProps, type INavSectionProps, type INavTab, type INavTabsProps, type IOverviewField, type IOverviewFieldProps, type IOverviewGridProps, type IPriorityBadgeProps, type IScopeTab, type IScopeTabsProps, type ISelectOption, type ISelectProps, type ISidebarProps, type ISidebarUser, type ITab, type ITabsProps, type ITicketStatusBadgeProps, type ITopBarProps, IconRail, IconRailItem, Input, LoginCard, Modal, NavItem, NavSection, NavTabs, OverviewField, OverviewGrid, PriorityBadge, type PriorityLevel, ScopeTabs, Select, Sidebar, Tabs, type TicketStatus, TicketStatusBadge, TopBar };
+interface IOrgEntitySelectorProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    label: string;
+}
+declare function OrgEntitySelector({ label, className, ...props }: IOrgEntitySelectorProps): react.JSX.Element;
+
+type ThemeMode = "light" | "dark";
+interface IThemeToggleProps {
+    theme: ThemeMode;
+    onChange: (theme: ThemeMode) => void;
+    className?: string;
+}
+declare function ThemeToggle({ theme, onChange, className }: IThemeToggleProps): react.JSX.Element;
+
+type AvatarSize = "sm" | "md";
+type AvatarShape = "circle" | "square";
+interface IAvatarProps {
+    initials: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    onClick?: () => void;
+    className?: string;
+}
+declare function Avatar({ initials, size, shape, onClick, className, }: IAvatarProps): react.JSX.Element;
+
+interface INotificationsButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    unread?: boolean;
+}
+declare function NotificationsButton({ unread, className, ...props }: INotificationsButtonProps): react.JSX.Element;
+
+interface IPlatformSwitcherApp {
+    icon: ReactNode;
+    title: string;
+    description: string;
+    href: string;
+}
+interface IPlatformSwitcherProps {
+    apps: IPlatformSwitcherApp[];
+    open: boolean;
+    onToggle: () => void;
+    className?: string;
+}
+declare function PlatformSwitcher({ apps, open, onToggle, className }: IPlatformSwitcherProps): react.JSX.Element;
+
+interface IUnderlineTab {
+    key: string;
+    label: string;
+    disabled?: boolean;
+}
+interface IUnderlineTabsProps {
+    tabs: IUnderlineTab[];
+    active: string;
+    onChange: (key: string) => void;
+    className?: string;
+}
+/** Secondary page-wide nav for when the page already has an H1 and doesn't need pill weight. */
+declare function UnderlineTabs({ tabs, active, onChange, className }: IUnderlineTabsProps): react.JSX.Element;
+
+interface IFilterPillOption {
+    value: string;
+    label: string;
+}
+interface IFilterPillsProps {
+    options: IFilterPillOption[];
+    active: string;
+    onChange: (value: string) => void;
+    className?: string;
+}
+/** Nested sub-filter inside an already-active tab (e.g. underline tab -> pill sub-filter). */
+declare function FilterPills({ options, active, onChange, className }: IFilterPillsProps): react.JSX.Element;
+
+interface IPaginationProps {
+    page: number;
+    pageCount: number;
+    pageSize: number;
+    total: number;
+    pageSizeOptions?: number[];
+    onPageChange: (page: number) => void;
+    onPageSizeChange?: (size: number) => void;
+    className?: string;
+}
+declare function Pagination({ page, pageCount, pageSize, total, pageSizeOptions, onPageChange, onPageSizeChange, className, }: IPaginationProps): react.JSX.Element;
+
+type EmptyStateVariant = "simple" | "rich" | "table-row";
+interface IEmptyStateProps {
+    variant?: EmptyStateVariant;
+    icon?: ReactNode;
+    title?: string;
+    description?: string;
+    className?: string;
+}
+declare function EmptyState({ variant, icon, title, description, className, }: IEmptyStateProps): react.JSX.Element;
+
+type KpiCardVariant = "ghost" | "tile";
+interface IKpiCardProps {
+    label: string;
+    value: ReactNode;
+    icon?: ReactNode;
+    variant?: KpiCardVariant;
+    className?: string;
+}
+declare function KpiCard({ label, value, icon, variant, className, }: IKpiCardProps): react.JSX.Element;
+
+interface IKpiGridCell {
+    label: string;
+    value: ReactNode;
+    sublabel?: string;
+}
+interface IKpiGridProps {
+    cells: IKpiGridCell[];
+    className?: string;
+}
+declare function KpiGrid({ cells, className }: IKpiGridProps): react.JSX.Element;
+
+interface IKpiStripItem {
+    icon: ReactNode;
+    label: string;
+    value: ReactNode;
+    delta?: string;
+}
+interface IKpiStripProps {
+    items: IKpiStripItem[];
+    className?: string;
+}
+declare function KpiStrip({ items, className }: IKpiStripProps): react.JSX.Element;
+
+interface IViewToggleOption {
+    value: string;
+    icon: ReactNode;
+    label: string;
+}
+interface IViewToggleProps {
+    value: string;
+    options: IViewToggleOption[];
+    onChange: (value: string) => void;
+    className?: string;
+}
+declare function ViewToggle({ value, options, onChange, className }: IViewToggleProps): react.JSX.Element;
+
+interface IMetadataBadgeProps {
+    label: string;
+    value: string;
+    className?: string;
+}
+declare function MetadataBadge({ label, value, className }: IMetadataBadgeProps): react.JSX.Element;
+
+interface IToastProps {
+    open: boolean;
+    message: ReactNode;
+    icon?: ReactNode;
+    className?: string;
+}
+declare function Toast({ open, message, icon, className }: IToastProps): react.JSX.Element | null;
+
+type BannerVariant = "warning" | "blocking-error";
+interface IBannerProps {
+    variant: BannerVariant;
+    title: ReactNode;
+    description?: ReactNode;
+    items?: ReactNode[];
+    className?: string;
+}
+/**
+ * Persistent, page-level surface — distinct from `Alert` (transient, inline).
+ * `warning` is amber and non-blocking; `blocking-error` is red and reserved for a
+ * state that actually blocks the action (see the house rule: two feedback colors,
+ * never mixed — the title/body text stays `foreground`, red lives only in the icon
+ * and border, since `--destructive` in small text fails AA contrast).
+ */
+declare function Banner({ variant, title, description, items, className }: IBannerProps): react.JSX.Element;
+
+type AccordionVariant = "plain" | "panel";
+interface IAccordionProps {
+    question: ReactNode;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    variant?: AccordionVariant;
+    className?: string;
+}
+declare function Accordion({ question, children, defaultOpen, variant, className, }: IAccordionProps): react.JSX.Element;
+
+interface IReadOnlyFieldProps {
+    label: string;
+    value: string;
+    className?: string;
+}
+declare function ReadOnlyField({ label, value, className }: IReadOnlyFieldProps): react.JSX.Element;
+
+type SearchIconPosition = "left" | "right";
+interface ISearchFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+    iconPosition?: SearchIconPosition;
+}
+declare function SearchField({ iconPosition, className, ...props }: ISearchFieldProps): react.JSX.Element;
+
+interface IDateRangeTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    label: string;
+}
+declare function DateRangeTrigger({ label, className, ...props }: IDateRangeTriggerProps): react.JSX.Element;
+
+interface IUploadDropzoneProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    label?: string;
+    error?: boolean;
+}
+declare function UploadDropzone({ label, error, className, ...props }: IUploadDropzoneProps): react.JSX.Element;
+
+type StepStatus = "empty" | "partial" | "extracting" | "filled";
+interface IStep {
+    key: string;
+    label: string;
+    sublabel?: string;
+    icon?: ReactNode;
+    status?: StepStatus;
+}
+interface IStepNavigatorProps {
+    title: string;
+    steps: IStep[];
+    activeKey: string;
+    onStepClick?: (key: string) => void;
+    progressPercent: number;
+    progressLabel?: string;
+    onSaveExit?: () => void;
+    onContinue?: () => void;
+    continueLabel?: string;
+    className?: string;
+}
+declare function StepNavigator({ title, steps, activeKey, onStepClick, progressPercent, progressLabel, onSaveExit, onContinue, continueLabel, className, }: IStepNavigatorProps): react.JSX.Element;
+
+interface IDocumentTypeOption {
+    key: string;
+    label: string;
+    icon: ReactNode;
+    disabled?: boolean;
+}
+interface IDocumentTypeGridProps {
+    options: IDocumentTypeOption[];
+    value: string;
+    onChange: (key: string) => void;
+    className?: string;
+}
+declare function DocumentTypeGrid({ options, value, onChange, className }: IDocumentTypeGridProps): react.JSX.Element;
+
+interface IFilePreviewCardProps {
+    fileName: string;
+    uploadedBy: string;
+    uploadedAt: string;
+    imageSrc?: string;
+    onPrev?: () => void;
+    onNext?: () => void;
+    hasPrev?: boolean;
+    hasNext?: boolean;
+    className?: string;
+}
+declare function FilePreviewCard({ fileName, uploadedBy, uploadedAt, imageSrc, onPrev, onNext, hasPrev, hasNext, className, }: IFilePreviewCardProps): react.JSX.Element;
+
+interface IFileReviewRowProps {
+    fileName: string;
+    fileSize: string;
+    fileType: string;
+    classification: string;
+    location: string;
+    status: ReactNode;
+    onView?: () => void;
+    onChangeLocation?: () => void;
+    onApprove?: () => void;
+    onReject?: () => void;
+    className?: string;
+}
+declare function FileReviewRow({ fileName, fileSize, fileType, classification, location, status, onView, onChangeLocation, onApprove, onReject, className, }: IFileReviewRowProps): react.JSX.Element;
+
+interface IRejectionReason {
+    key: string;
+    label: string;
+}
+interface IRejectionReasonPanelProps {
+    reasons: IRejectionReason[];
+    selectedReasons: string[];
+    onToggleReason: (key: string) => void;
+    note: string;
+    onNoteChange: (note: string) => void;
+    onCancel: () => void;
+    onConfirm: () => void;
+    className?: string;
+}
+declare function RejectionReasonPanel({ reasons, selectedReasons, onToggleReason, note, onNoteChange, onCancel, onConfirm, className, }: IRejectionReasonPanelProps): react.JSX.Element;
+
+type QueueStatus = "processing" | "pending" | "editing" | "failed";
+interface IQueueStatusBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    status: QueueStatus;
+}
+/** Entity/document processing state — its own family, never mixed with priority or ticket status. */
+declare function QueueStatusBadge({ status, className, children, ...props }: IQueueStatusBadgeProps): react.JSX.Element;
+
+interface ITicketCardField {
+    label: string;
+    value: string;
+}
+interface ITicketCardProps {
+    id: string;
+    signals?: ReactNode;
+    priority?: ReactNode;
+    status?: ReactNode;
+    fields: ITicketCardField[];
+    selected?: boolean;
+    closed?: boolean;
+    href?: string;
+    onClick?: () => void;
+    className?: string;
+}
+/** Canonical badge order: #id [channel] … [unread] [SLA] [priority] [status] — pass
+ *  transient signals via `signals`, permanent state via `priority`/`status`. */
+declare function TicketCard({ id, signals, priority, status, fields, selected, closed, href, onClick, className, }: ITicketCardProps): react.JSX.Element;
+
+interface IChatMessage {
+    id: string | number;
+    author: string;
+    initials: string;
+    timestamp: string;
+    body: string;
+    mine: boolean;
+}
+interface IChatThreadProps {
+    messages: IChatMessage[];
+    className?: string;
+}
+/** Whoever is viewing the screen appears on the right (`--mine`); the other party
+ *  on the left — so in the client's own view the client is on the right, and in the
+ *  operator's view the operator is on the right. */
+declare function ChatMessage({ author, initials, timestamp, body, mine }: IChatMessage): react.JSX.Element;
+declare function ChatThread({ messages, className }: IChatThreadProps): react.JSX.Element;
+
+interface IInternalNoteCardProps {
+    author: string;
+    timestamp: string;
+    children: ReactNode;
+    className?: string;
+}
+/** Visible operator-only, amber tint to differentiate from client-facing chat. */
+declare function InternalNoteCard({ author, timestamp, children, className, }: IInternalNoteCardProps): react.JSX.Element;
+
+interface IChannelBadgeProps {
+    icon: ReactNode;
+    label: string;
+    className?: string;
+}
+declare function ChannelBadge({ icon, label, className }: IChannelBadgeProps): react.JSX.Element;
+
+type SignalVariant = "message" | "sla";
+interface ISignalBadgeProps {
+    variant: SignalVariant;
+    children: ReactNode;
+    className?: string;
+}
+/** Transient auxiliary signal (unread count, SLA countdown) — never mixed with
+ *  priority or ticket status on the same pill. */
+declare function SignalBadge({ variant, children, className }: ISignalBadgeProps): react.JSX.Element;
+
+interface ICategoryLabelProps {
+    label: string;
+    /** Any CSS color — sets the leading dot via the `--lbl-c` custom property. */
+    color?: string;
+    className?: string;
+}
+declare function CategoryLabel({ label, color, className }: ICategoryLabelProps): react.JSX.Element;
+
+interface ILinkedAppIndicatorProps {
+    icon?: ReactNode;
+    appName?: string;
+    className?: string;
+}
+/** Table-cell indicator for an item connected to an external integration. */
+declare function LinkedAppIndicator({ icon, appName, className }: ILinkedAppIndicatorProps): react.JSX.Element;
+
+export { Accordion, type AccordionVariant, Alert, type AlertVariant, AppShell, Avatar, type AvatarShape, type AvatarSize, Badge, type BadgeStatus, Banner, type BannerVariant, Button, type ButtonSize, type ButtonVariant, Card, CategoryLabel, ChannelBadge, ChatMessage, ChatThread, type ColumnAlign, DataTable, DateRangeTrigger, DocumentTypeGrid, Drawer, EmptyState, type EmptyStateVariant, FilePreviewCard, FileReviewRow, FilterPills, type IAccordionProps, type IAlertProps, type IAppShellProps, type IAvatarProps, type IBadgeProps, type IBannerProps, type IButtonProps, type ICardProps, type ICategoryLabelProps, type IChannelBadgeProps, type IChatMessage, type IChatThreadProps, type IColumn, type IDataTableProps, type IDateRangeTriggerProps, type IDocumentTypeGridProps, type IDocumentTypeOption, type IDrawerProps, type IEmptyStateProps, type IFilePreviewCardProps, type IFileReviewRowProps, type IFilterPillOption, type IFilterPillsProps, type IIconRailItemProps, type IIconRailProps, type IInputProps, type IInternalNoteCardProps, type IKpiCardProps, type IKpiGridCell, type IKpiGridProps, type IKpiStripItem, type IKpiStripProps, type ILinkedAppIndicatorProps, type ILoginCardProps, type IMetadataBadgeProps, type IModalProps, type INavItemProps, type INavSectionProps, type INavTab, type INavTabsProps, type INotificationsButtonProps, type IOrgEntitySelectorProps, type IOverviewField, type IOverviewFieldProps, type IOverviewGridProps, type IPaginationProps, type IPlatformSwitcherApp, type IPlatformSwitcherProps, type IPriorityBadgeProps, type IQueueStatusBadgeProps, type IReadOnlyFieldProps, type IRejectionReason, type IRejectionReasonPanelProps, type IScopeTab, type IScopeTabsProps, type ISearchFieldProps, type ISelectOption, type ISelectProps, type ISidebarProps, type ISidebarUser, type ISignalBadgeProps, type IStep, type IStepNavigatorProps, type ITab, type ITabsProps, type IThemeToggleProps, type ITicketCardField, type ITicketCardProps, type ITicketStatusBadgeProps, type IToastProps, type ITopBarProps, type IUnderlineTab, type IUnderlineTabsProps, type IUploadDropzoneProps, type IViewToggleOption, type IViewToggleProps, IconRail, IconRailItem, Input, InternalNoteCard, KpiCard, type KpiCardVariant, KpiGrid, KpiStrip, LinkedAppIndicator, LoginCard, MetadataBadge, Modal, NavItem, NavSection, NavTabs, NotificationsButton, OrgEntitySelector, OverviewField, OverviewGrid, Pagination, PlatformSwitcher, PriorityBadge, type PriorityLevel, type QueueStatus, QueueStatusBadge, ReadOnlyField, RejectionReasonPanel, ScopeTabs, SearchField, type SearchIconPosition, Select, Sidebar, SignalBadge, type SignalVariant, StepNavigator, type StepStatus, Tabs, type ThemeMode, ThemeToggle, TicketCard, type TicketStatus, TicketStatusBadge, Toast, TopBar, UnderlineTabs, UploadDropzone, ViewToggle };