@qtalo/qt-ui-library 0.1.2 → 0.1.4

package/dist/index.d.ts

@@ -2,9 +2,9 @@ import { ButtonHTMLAttributes } from 'react';
 import { ClassValue } from 'clsx';
 import { ComponentPropsWithoutRef } from 'react';
 import { Context } from 'react';
+import { CSSProperties } from 'react';
 import { ElementType } from 'react';
 import { JSX } from 'react/jsx-runtime';
-import { JSX as JSX_2 } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
@@ -37,12 +37,17 @@ declare type AccordionItemProps = {
 } & ComponentPropsWithoutRef<"div">;
 
 declare type AccordionProps = {
-    children: ReactNode;
+    children: ReactNode | ((state: AccordionState) => ReactNode);
     type?: "single" | "multiple";
     defaultValue?: string | string[];
     className?: string;
 };
 
+declare type AccordionState = {
+    openItems: Set<string>;
+    toggleItem: (value: string) => void;
+};
+
 export declare function AccordionTrigger({ value, children, className, asChild, onClick, ...props }: AccordionTriggerProps): JSX.Element;
 
 declare type AccordionTriggerProps = {
@@ -50,7 +55,7 @@ declare type AccordionTriggerProps = {
     children: ReactNode;
     className?: string;
     asChild?: boolean;
-} & ComponentPropsWithoutRef<"button">;
+} & ComponentPropsWithoutRef<"div">;
 
 export declare function AccountIcon(props: IconProps): JSX.Element;
 
@@ -174,6 +179,7 @@ xs: string;
 sm: string;
 md: string;
 lg: string;
+xl: string;
 };
 }, undefined, "flex shrink-0 items-center justify-center rounded-full leading-none font-semibold select-none", {
 size: {
@@ -181,6 +187,7 @@ xs: string;
 sm: string;
 md: string;
 lg: string;
+xl: string;
 };
 }, undefined, TVReturnType<    {
 size: {
@@ -188,6 +195,7 @@ xs: string;
 sm: string;
 md: string;
 lg: string;
+xl: string;
 };
 }, undefined, "flex shrink-0 items-center justify-center rounded-full leading-none font-semibold select-none", unknown, unknown, undefined>>;
 
@@ -200,6 +208,19 @@ export declare type BadgeProps = React.HTMLAttributes<HTMLDivElement> & {
     className?: string;
 };
 
+/**
+ * Base event detail type.
+ * Base fields shared by all event types (email, message, etc.).
+ */
+export declare type BaseEventDetail = {
+    id?: string;
+    icon: ReactElement<IconProps>;
+    from: string;
+    timestamp: string;
+    subject: string;
+    isPriority: boolean;
+};
+
 export declare function BulkActions({ totalItems, selectedItems, onSelectAll, actions, defaultDensity, onDensityChange, className, }: BulkActionsProps): JSX.Element;
 
 declare type BulkActionsProps = {
@@ -225,6 +246,12 @@ declare type BulkActionsProps = {
     className?: string;
 };
 
+export declare function BulkActionsSkeleton({ className }: BulkActionsSkeletonProps): JSX.Element;
+
+export declare type BulkActionsSkeletonProps = {
+    className?: string;
+};
+
 export declare function Button({ className, children, ...props }: ButtonProps): JSX.Element;
 
 export declare type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -240,6 +267,12 @@ export declare type CalendarDay = {
     isCurrentMonth: boolean;
 };
 
+export declare type CalendarDetail = {
+    summary?: string;
+    priorityText?: string;
+    body: string;
+};
+
 export declare function CalendarIcon(props: IconProps): JSX.Element;
 
 export declare const capitalize: (s: string) => string;
@@ -350,6 +383,14 @@ export declare function CopyIcon(props: IconProps): JSX.Element;
 
 export declare function DarkIcon(props: IconProps): JSX.Element;
 
+declare type DateFormatOptions = {
+    todayAsText?: boolean;
+    showWeekday?: boolean;
+    longMonth?: boolean;
+    withOrdinal?: boolean;
+    includeTime?: boolean;
+};
+
 export declare function DatePicker({ mode, value, defaultValue, onChange, disabled, className, }: DatePickerProps): JSX.Element;
 
 declare type DatePickerProps = {
@@ -442,6 +483,161 @@ export declare type DropdownProps = {
     disabled?: boolean;
 };
 
+/**
+ * Email detail type.
+ * Detail payload for email events.
+ * Represents the content rendered by the email detail component.
+ */
+export declare type EmailDetail = {
+    summary?: string;
+    priorityText?: string;
+    body: string;
+};
+
+export declare const EVENT_CARD_HEIGHT_SIZE: {
+    normal: {
+        style: string;
+        value: number;
+    };
+    compact: {
+        style: string;
+        value: number;
+    };
+};
+
+export declare type EventActions = Partial<Record<EventActionType, ActionConfig>>;
+
+export declare type EventActionType = "fire" | "done" | "link";
+
+export declare function EventCard({ icon, sender, title, content, timestamp, workspace, read, selected, onSelect, checked, onCheckedChange, statusBadges, actions, density, className, style, }: EventCardProps): JSX.Element;
+
+export declare type EventCardProps = {
+    icon: ReactNode;
+    sender: string;
+    title: string;
+    content: string;
+    timestamp: string;
+    workspace: string;
+    read?: boolean;
+    selected?: boolean;
+    onSelect?: () => void;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    statusBadges?: EventStatusBadges;
+    actions?: EventActions;
+    density?: Density;
+    className?: string;
+    style?: React.CSSProperties;
+};
+
+export declare function EventCardSkeleton({ density, className, style, }: EventCardSkeletonProps): JSX.Element;
+
+export declare type EventCardSkeletonProps = {
+    density?: Density;
+    className?: string;
+    style?: CSSProperties;
+};
+
+export declare function EventDetail({ events }: EventDetailProps): JSX.Element | null;
+
+export declare function EventDetailContentCalendar({ detail: { summary, body, priorityText }, className, }: EventDetailContentCalendarProps): JSX.Element;
+
+export declare type EventDetailContentCalendarProps = {
+    detail: EmailDetail;
+    className?: string;
+};
+
+export declare function EventDetailContentEmail({ detail: { summary, body, priorityText }, className, }: EventDetailContentEmailProps): JSX.Element;
+
+export declare type EventDetailContentEmailProps = {
+    detail: EmailDetail;
+    className?: string;
+};
+
+export declare function EventDetailContentHeader({ summary, priorityText, children, className, }: EventDetailContentHeaderProps): JSX.Element;
+
+export declare type EventDetailContentHeaderProps = {
+    summary?: string;
+    priorityText?: string;
+    className?: string;
+    children: ReactNode;
+};
+
+export declare function EventDetailContentMessage({ detail: { groups, summary, priorityText }, className, }: EventDetailContentMessageProps): JSX.Element;
+
+export declare type EventDetailContentMessageProps = {
+    detail: MessageDetail;
+    className?: string;
+};
+
+export declare function EventDetailContentTicket({ detail: { summary, body, priorityText }, className, }: EventDetailContentTicketProps): JSX.Element;
+
+export declare type EventDetailContentTicketProps = {
+    detail: EmailDetail;
+    className?: string;
+};
+
+export declare function EventDetailHeader({ icon, subject, from, timestamp, isPriority, isOpen, isFirstEvent, isSingleEvent, className, }: EventDetailHeaderProps): JSX.Element;
+
+export declare type EventDetailHeaderProps = {
+    icon: ReactElement<IconProps>;
+    subject: string;
+    from: string;
+    timestamp: string;
+    isPriority: boolean;
+    isOpen: boolean;
+    isFirstEvent: boolean;
+    isSingleEvent: boolean;
+    className?: string;
+};
+
+/**
+ * Event detail item type.
+ * Discriminated union representing the supported event detail variants.
+ * The `type` field determines the shape of `detail`.
+ */
+export declare type EventDetailItem = (BaseEventDetail & {
+    type: "email";
+    detail: EmailDetail;
+}) | (BaseEventDetail & {
+    type: "message";
+    detail: MessageDetail;
+}) | (BaseEventDetail & {
+    type: "ticket";
+    detail: TicketDetail;
+}) | (BaseEventDetail & {
+    type: "calendar";
+    detail: CalendarDetail;
+});
+
+export declare function EventDetailPriority({ priorityText, }: EventDetailPriorityProps): JSX.Element;
+
+export declare type EventDetailPriorityProps = {
+    priorityText: string;
+};
+
+export declare type EventDetailProps = {
+    events: EventDetailItem[];
+};
+
+export declare function EventDetailSkeleton({ className }: EventDetailSkeletonProps): JSX.Element;
+
+export declare type EventDetailSkeletonProps = {
+    className?: string;
+};
+
+export declare function EventDetailSummary({ summary }: EventDetailSummaryProps): JSX.Element;
+
+export declare type EventDetailSummaryProps = {
+    summary: string;
+};
+
+export declare type EventStatusBadges = Partial<Record<EventStatusBadgeType, StatusBadgeConfig>>;
+
+export declare type EventStatusBadgeType = "fire" | "insight" | "done";
+
+export declare type EventType = "email" | "message" | "ticket" | "calendar";
+
 export declare function ExternalLinkIcon(props: IconProps): JSX.Element;
 
 declare const FILTER_BUTTON_META: {
@@ -474,6 +670,13 @@ declare type FilterBarProps = {
     className?: string;
 };
 
+export declare function FilterBarSkeleton({ itemCount, className, }: FilterBarSkeletonProps): JSX.Element;
+
+export declare type FilterBarSkeletonProps = {
+    itemCount?: number;
+    className?: string;
+};
+
 export declare function FilterButton({ variant, label, count, selected, icon, classNames, disabled, ...props }: FilterButtonProps): JSX.Element;
 
 declare type FilterButtonClassNames = Partial<{
@@ -509,6 +712,8 @@ export declare function formatDate(date: Date | null): string;
  */
 export declare function formatDateRange(startDate: Date | null, endDate: Date | null): string;
 
+export declare function formatTimestamp(iso: string, options?: DateFormatOptions): string;
+
 /**
  * Generate a full calendar grid with days from previous, current, and next month
  * Returns a flat array of calendar days that always fills complete weeks (multiple of 7)
@@ -563,6 +768,8 @@ declare type IconCountButtonClassNames = Partial<{
     count: string;
 }>;
 
+declare type IconCountButtonOrientation = "vertical" | "horizontal";
+
 export declare type IconCountButtonProps = IconCountButtonVariant & Omit<ButtonProps, "children" | "className"> & {
     icon: ReactElement<IconProps>;
     label: string;
@@ -571,6 +778,13 @@ export declare type IconCountButtonProps = IconCountButtonVariant & Omit<ButtonP
     classNames?: IconCountButtonClassNames;
 };
 
+export declare function IconCountButtonSkeleton({ orientation, className, }: IconCountButtonSkeletonProps): JSX.Element;
+
+export declare type IconCountButtonSkeletonProps = {
+    orientation?: IconCountButtonOrientation;
+    className?: string;
+};
+
 declare const iconCountButtonStyles: TVReturnType<    {
 variant: {
 primary: {};
@@ -689,13 +903,23 @@ export declare function IntegrationBar({ orientation, children, onAddMore, class
 
 declare type IntegrationBarOrientation = "horizontal" | "vertical";
 
+declare type IntegrationBarOrientation_2 = "horizontal" | "vertical";
+
 declare type IntegrationBarProps = {
-    orientation?: IntegrationBarOrientation;
+    orientation?: IntegrationBarOrientation_2;
     children: ReactElement<IconCountButtonProps>[];
     onAddMore: () => void;
     className?: string;
 };
 
+export declare function IntegrationBarSkeleton({ orientation, itemCount, className, }: IntegrationBarSkeletonProps): JSX.Element;
+
+export declare type IntegrationBarSkeletonProps = {
+    orientation?: IntegrationBarOrientation;
+    itemCount?: number;
+    className?: string;
+};
+
 /**
  * Check if date1 is before date2 (ignoring time)
  */
@@ -724,12 +948,63 @@ declare type Listener = (toasts: ToastItem[]) => void;
 
 export declare function LogoIcon(props: IconProps): JSX.Element;
 
+/**
+ * Message type.
+ * Represents an individual message inside a conversation.
+ */
+export declare type Message = {
+    id: string;
+    author: string;
+    timestamp: string;
+    body: string;
+    replies?: MessageReply[];
+    onExternalLinkClick?: () => void;
+    onMarkAsFireClick?: () => void;
+};
+
+/**
+ * Message detail payload.
+ * Detail payload for message events.
+ * Represents a conversation composed of grouped messages.
+ */
+export declare type MessageDetail = {
+    groups: MessageGroup[];
+    summary?: string;
+    priorityText?: string;
+};
+
+/**
+ * Message group type.
+ * Group of messages, typically grouped by date or logical segment.
+ * Some groups may be marked as priority and support navigation.
+ */
+export declare type MessageGroup = {
+    id: string;
+    timestamp: string;
+    messages: Message[];
+    isPriority?: boolean;
+    priorityText?: string;
+};
+
+/**
+ * Message reply type.
+ * Represents a single reply within a threaded message.
+ */
+export declare type MessageReply = {
+    id: string;
+    author: string;
+    timestamp: string;
+    body: string;
+};
+
 export declare function MinusIcon(props: IconProps): JSX.Element;
 
 export declare function MoreIcon(props: IconProps): JSX.Element;
 
 export declare function NormalDensityIcon(props: IconProps): JSX.Element;
 
+export declare function normalizeContent(content: string): string;
+
 export declare function NotFireIcon(props: IconProps): JSX.Element;
 
 export declare function OutlookCalendarIcon(props: IconProps): JSX.Element;
@@ -743,50 +1018,28 @@ export declare function parseDate(dateString: string): Date | null;
 
 export declare function pickColorFromPalette<T>(value: string, palette: readonly T[]): T;
 
-export declare function Pressable({ as: Component, disabled, onPress, className, children, }: PressableProps): JSX.Element;
+export declare function Pressable<T extends ElementType = "div">({ as, disabled, onPress, className, children, ...props }: PressableProps<T>): JSX.Element;
 
-declare type PressableProps = {
-    as?: keyof JSX_2.IntrinsicElements;
+declare type PressableOwnProps = {
     disabled?: boolean;
     onPress?: () => void;
     className?: string;
     children?: ReactNode;
 };
 
-export declare const PREVIEW_CARD_HEIGHT_SIZE: {
-    normal: number;
-    compact: number;
-};
-
-export declare type PreviewActions = Partial<Record<PreviewActionType, ActionConfig>>;
+declare type PressableProps<T extends ElementType = "div"> = PressableOwnProps & {
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, keyof PressableOwnProps | "as">;
 
-export declare type PreviewActionType = "fire" | "done" | "link";
+export declare function ReadIcon(props: IconProps): JSX.Element;
 
-export declare function PreviewCard({ icon, sender, title, content, timestamp, workspace, read, selected, onSelect, checked, onCheckedChange, statuses, actions, density, }: PreviewCardProps): JSX.Element;
+export declare function RichContent({ content, className }: RichContentProps): JSX.Element;
 
-export declare type PreviewCardProps = {
-    icon: ReactNode;
-    sender: string;
-    title: string;
+export declare type RichContentProps = {
     content: string;
-    timestamp: string;
-    workspace: string;
-    read?: boolean;
-    selected?: boolean;
-    onSelect?: () => void;
-    checked?: boolean;
-    onCheckedChange?: (checked: boolean) => void;
-    statuses?: PreviewStatuses;
-    actions?: PreviewActions;
-    density?: Density;
+    className?: string;
 };
 
-export declare type PreviewStatuses = Partial<Record<PreviewStatusType, StatusConfig>>;
-
-export declare type PreviewStatusType = "fire" | "insight" | "done";
-
-export declare function ReadIcon(props: IconProps): JSX.Element;
-
 export declare function SearchIcon(props: IconProps): JSX.Element;
 
 export declare function SearchInput({ value, defaultValue, placeholder, onChange, onClear, disabled, className, }: SearchInputProps): JSX.Element;
@@ -811,6 +1064,11 @@ export declare function SlackIcon(props: IconProps): JSX.Element;
 
 export declare function StatusBadge({ className, label, status, onAction, density, }: StatusBadgeProps): JSX.Element;
 
+declare type StatusBadgeConfig = {
+    label?: string;
+    onClick?: () => void;
+};
+
 export declare type StatusBadgeProps = Omit<BadgeProps, "icon" | "action" | "label"> & Required<VariantProps<typeof statusBadgeStyles>> & {
     label?: ReactNode;
     onAction?: () => void;
@@ -873,11 +1131,6 @@ root: string;
 text: string;
 }, undefined, unknown, unknown, undefined>>;
 
-declare type StatusConfig = {
-    label?: string;
-    onAction?: () => void;
-};
-
 /**
  * Prevents click and keyboard events from bubbling to parent components
  * (e.g. Pressable, Card, ListRow).
@@ -896,6 +1149,12 @@ export declare function SystemIcon(props: IconProps): JSX.Element;
 
 export declare function TeamsIcon(props: IconProps): JSX.Element;
 
+export declare type TicketDetail = {
+    summary?: string;
+    priorityText?: string;
+    body: string;
+};
+
 export declare function toast(content: ReactNode | ShowToastOptions, options?: Omit<ShowToastOptions, "content">): {
     id: `${string}-${string}-${string}-${string}-${string}`;
     dismiss: () => void;