@qtalo/qt-ui-library 0.1.16 → 0.1.19

package/dist/index.d.ts

@@ -189,7 +189,7 @@ md: string;
 lg: string;
 xl: string;
 };
-}, undefined, "flex shrink-0 items-center justify-center rounded-full leading-none font-semibold select-none", {
+}, undefined, "font-semibold flex shrink-0 items-center justify-center rounded-full leading-none select-none", {
 size: {
 xs: string;
 sm: string;
@@ -205,7 +205,7 @@ 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>>;
+}, undefined, "font-semibold flex shrink-0 items-center justify-center rounded-full leading-none select-none", unknown, unknown, undefined>>;
 
 export declare function Badge({ icon, label, action, className, ...props }: BadgeProps): JSX.Element;
 
@@ -485,7 +485,7 @@ lg: string;
 
 declare type DividerVariants = VariantProps<typeof dividerStyles>;
 
-export declare function Dropdown({ trigger, children, align, side, offsetX, offsetY, disabled, }: DropdownProps): JSX.Element;
+export declare function Dropdown({ trigger, children, align, side, offsetX, offsetY, disabled, openOnHover, open: openControlled, onOpenChange, }: DropdownProps): JSX.Element;
 
 export declare type DropdownAlign = "start" | "end" | "center";
 
@@ -493,6 +493,8 @@ export declare const DropdownContext: Context<DropdownContextValue | null>;
 
 declare type DropdownContextValue = {
     close: () => void;
+    /** Same behavior as opening via hover (clears hover close delay). */
+    open: () => void;
 };
 
 export declare function DropdownMenu({ trigger, children, className, ...props }: DropdownMenuProps): JSX.Element;
@@ -533,6 +535,19 @@ export declare type DropdownProps = {
      */
     offsetY?: number;
     disabled?: boolean;
+    /**
+     * When `true` (default), the menu opens on pointer enter and stays open while
+     * moving between the trigger and the floating content (with a short close delay).
+     * When `false`, only clicking the trigger toggles the menu; click outside still closes.
+     */
+    openOnHover?: boolean;
+    /**
+     * Controlled open state. When set, you must update it in `onOpenChange` (or equivalent)
+     * so the dropdown stays in sync with user interaction.
+     */
+    open?: boolean;
+    /** Notified when the dropdown should open or close (hover, click, outside click, context). */
+    onOpenChange?: (open: boolean) => void;
 };
 
 export declare type DropdownSide = "top" | "bottom";
@@ -554,6 +569,7 @@ export declare type EmailDetail = {
 
 export declare function EmptyBoxIcon({ pathProps, ...props }: IconProps): JSX.Element;
 
+/** @deprecated Use `EVENT_SUMMARY_CARD_HEIGHT_SIZE` from `@ui-types/sizes` instead. */
 export declare const EVENT_CARD_HEIGHT_SIZE: {
     normal: {
         style: string;
@@ -565,12 +581,21 @@ export declare const EVENT_CARD_HEIGHT_SIZE: {
     };
 };
 
+export declare const EVENT_SUMMARY_CARD_HEIGHT_SIZE: {
+    style: string;
+    value: number;
+};
+
+/** @deprecated Use `EventSummaryCard` from `@patterns/event-summary-card/event-summary-card` instead. */
 export declare type EventActions = Partial<Record<EventActionType, ActionConfig>>;
 
+/** @deprecated Use `EventSummaryCard` from `@patterns/event-summary-card/event-summary-card` instead. */
 export declare type EventActionType = "fire" | "done" | "link";
 
+/** @deprecated Use `EventSummaryCard` from `@patterns/event-summary-card/event-summary-card` instead. */
 export declare function EventCard({ icon, service, sender, title, content, timestamp, timestampTooltip, workspace, read, selected, onSelect, checked, onCheckedChange, statusBadges, actions, density, className, style, isPriority, isDone, }: EventCardProps): JSX.Element;
 
+/** @deprecated Use `EventSummaryCard` from `@patterns/event-summary-card/event-summary-card` instead. */
 export declare type EventCardProps = {
     icon: ReactNode;
     service: string;
@@ -602,7 +627,7 @@ export declare type EventCardSkeletonProps = {
     style?: CSSProperties;
 };
 
-export declare function EventDetail({ events, expandedEventIndex }: EventDetailProps): JSX.Element | null;
+export declare function EventDetail({ events, expandedEventIndex, onFireClick, }: EventDetailProps): JSX.Element | null;
 
 export declare function EventDetailContentCalendar({ detail: { summary, body, priorityText, from, to, link, location }, className, }: EventDetailContentCalendarProps): JSX.Element;
 
@@ -618,12 +643,11 @@ export declare type EventDetailContentEmailProps = {
     className?: string;
 };
 
-export declare function EventDetailContentHeader({ summary, priorityText, highlightPriority, children, className, }: EventDetailContentHeaderProps): JSX.Element;
+export declare function EventDetailContentHeader({ summary, priorityText, children, className, }: EventDetailContentHeaderProps): JSX.Element;
 
 export declare type EventDetailContentHeaderProps = {
     summary?: string;
     priorityText?: string;
-    highlightPriority?: boolean;
     className?: string;
     children: ReactNode;
 };
@@ -642,7 +666,7 @@ export declare type EventDetailContentTicketProps = {
     className?: string;
 };
 
-export declare function EventDetailHeader({ icon, subject, from, prefixTimestamp, timestamp, isPriority, isOpen, isFirstEvent, isSingleEvent, className, }: EventDetailHeaderProps): JSX.Element;
+export declare function EventDetailHeader({ icon, subject, from, prefixTimestamp, timestamp, isPriority, isOpen, isFirstEvent, isSingleEvent, className, onFireClick, }: EventDetailHeaderProps): JSX.Element;
 
 export declare type EventDetailHeaderProps = {
     icon: ReactElement<IconProps>;
@@ -655,6 +679,7 @@ export declare type EventDetailHeaderProps = {
     isFirstEvent: boolean;
     isSingleEvent: boolean;
     className?: string;
+    onFireClick: () => void;
 };
 
 /**
@@ -685,6 +710,7 @@ export declare type EventDetailPriorityProps = {
 export declare type EventDetailProps = {
     events: EventDetailItem[];
     expandedEventIndex?: number;
+    onFireClick: () => void;
 };
 
 export declare function EventDetailSkeleton({ className }: EventDetailSkeletonProps): JSX.Element;
@@ -707,10 +733,57 @@ export declare type EventEmptyStateProps = {
     description: ReactNode;
 };
 
+/** @deprecated Use `EventSummaryCard` from `@patterns/event-summary-card/event-summary-card` instead. */
 export declare type EventStatusBadges = Partial<Record<EventStatusBadgeType, StatusBadgeConfig>>;
 
+/** @deprecated Use `EventSummaryCard` from `@patterns/event-summary-card/event-summary-card` instead. */
 export declare type EventStatusBadgeType = "fire" | "insight" | "done";
 
+export declare function EventSummaryCard({ icon, service, sender, title, content, timestamp, workspace, selected, onSelect, actions, className, }: EventSummaryCardProps): JSX.Element;
+
+export declare type EventSummaryCardActions = {
+    fire: EventSummaryCardFireAction;
+    insight?: EventSummaryCardInsight;
+    link: EventSummaryCardLinkAction;
+};
+
+export declare type EventSummaryCardFireAction = {
+    onClick: () => void;
+    active?: boolean;
+};
+
+export declare type EventSummaryCardInsight = {
+    label: string | null;
+};
+
+export declare type EventSummaryCardLinkAction = {
+    tooltip: string;
+    onClick: () => void;
+};
+
+export declare type EventSummaryCardProps = {
+    icon: ReactNode;
+    service: string;
+    sender: string;
+    title: string;
+    content: string;
+    timestamp: string;
+    workspace: string;
+    selected?: boolean;
+    onSelect?: () => void;
+    actions: EventSummaryCardActions;
+    className?: string;
+};
+
+export declare function EventSummaryCardSkeleton({ className, style, }: EventSummaryCardSkeletonProps): JSX.Element;
+
+export declare type EventSummaryCardSkeletonProps = {
+    className?: string;
+    style?: CSSProperties;
+};
+
+export declare function EventSummaryFireButton({ active, onClick, }: Pick<EventSummaryCardFireAction, "active" | "onClick">): JSX.Element;
+
 export declare type EventType = "email" | "message" | "ticket" | "calendar";
 
 export declare function ExternalLinkIcon({ pathProps, ...props }: IconProps): JSX.Element;
@@ -718,6 +791,7 @@ export declare function ExternalLinkIcon({ pathProps, ...props }: IconProps): JS
 declare const FILTER_BUTTON_META: {
     readonly fire: {
         readonly icon: typeof FireIcon;
+        readonly selectedIcon: typeof FireFillIcon;
         readonly label: "Fire";
         readonly iconColor: "text-tertiary-500";
     };
@@ -728,6 +802,7 @@ declare const FILTER_BUTTON_META: {
     };
     readonly insight: {
         readonly icon: typeof InsightIcon;
+        readonly selectedIcon: typeof InsightFillIcon;
         readonly label: "Insights";
         readonly iconColor: "text-primary-600";
     };
@@ -772,6 +847,8 @@ export declare type FilterButtonProps = Omit<ButtonProps, "children" | "classNam
 
 declare type FilterButtonVariant = keyof typeof FILTER_BUTTON_META | "custom";
 
+export declare function FireFillIcon({ pathProps, ...props }: IconProps): JSX.Element;
+
 export declare function FireIcon({ pathProps, ...props }: IconProps): JSX.Element;
 
 /**
@@ -826,6 +903,42 @@ export declare function GmailIcon(props: IconProps): JSX.Element;
 
 export declare function GoogleCalendarIcon(props: IconProps): JSX.Element;
 
+export declare function HelpPanel({ classNames: userClassNames, ...rest }: HelpPanelProps): JSX.Element;
+
+export declare function HelpPanelEngine({ title, items, footer, closeLabel, defaultOpenValue, classNames, }: HelpPanelEngineProps): JSX.Element;
+
+export declare type HelpPanelEngineClassNames = {
+    root?: string;
+    header?: string;
+    title?: string;
+    closeButton?: string;
+    body?: string;
+    accordion?: string;
+    item?: string;
+    itemTrigger?: string;
+    itemContent?: string;
+    footer?: string;
+};
+
+export declare type HelpPanelEngineItem = {
+    value: string;
+    label: ReactNode;
+    content: ReactNode;
+};
+
+export declare type HelpPanelEngineProps = {
+    title: ReactNode;
+    items: HelpPanelEngineItem[];
+    footer?: ReactNode;
+    closeLabel?: string;
+    defaultOpenValue?: string;
+    classNames?: HelpPanelEngineClassNames;
+};
+
+export declare type HelpPanelProps = HelpPanelEngineProps;
+
+export declare function HomeIcon({ pathProps, ...props }: IconProps): JSX.Element;
+
 export declare function Icon({ size, className, viewBox, children, ...props }: IconProps): JSX.Element;
 
 export declare function IconButton({ icon, ...props }: IconButtonProps): JSX.Element;
@@ -960,6 +1073,8 @@ export declare type IconProps = SVGProps<SVGSVGElement> & {
     pathProps?: SVGProps<SVGPathElement>;
 };
 
+export declare function InboxIcon({ pathProps, ...props }: IconProps): JSX.Element;
+
 export declare function InfoTooltip({ className, ...props }: InfoTooltipProps): JSX.Element;
 
 export declare type InfoTooltipProps = TooltipProps;
@@ -978,6 +1093,8 @@ declare type InputProps = {
     className?: string;
 };
 
+export declare function InsightFillIcon({ pathProps, ...props }: IconProps): JSX.Element;
+
 export declare function InsightIcon({ pathProps, ...props }: IconProps): JSX.Element;
 
 export declare function IntegrationBar({ orientation, children, onAddMore, className, }: IntegrationBarProps): JSX.Element;
@@ -1054,6 +1171,8 @@ declare type Listener = (toasts: ToastItem[]) => void;
 
 export declare function LogoIcon({ pathProps, ...props }: IconProps): JSX.Element;
 
+export declare function MailIcon({ pathProps, ...props }: IconProps): JSX.Element;
+
 /**
  * Message type.
  * Represents an individual message inside a conversation.
@@ -1111,6 +1230,113 @@ export declare function normalizeContent(content: string): string;
 
 export declare function NotFireIcon({ pathProps, ...props }: IconProps): JSX.Element;
 
+/**
+ * OnboardingEngine + measured OnboardingCard portaled to `document.body`.
+ * Step visibility and order come from `steps` and `context`.
+ */
+export declare function Onboarding<TContext>({ steps, context, onFinish, }: OnboardingProps<TContext>): JSX.Element;
+
+/**
+ * Presentational onboarding callout: purple card, arrow, and optional actions.
+ * Fully controlled via props — compose with `OnboardingEngine` or any flow logic in your app.
+ */
+export declare function OnboardingCard({ stepLabel, title, description, titleAccessory, primaryAction, secondaryAction, layout, arrowPlacement, arrowWrapperClassName, arrowWrapperStyle, className, cardClassName, }: OnboardingCardProps): JSX.Element;
+
+/** Where the arrow sits relative to the card (LTR: before = left or top, after = right or bottom). */
+export declare type OnboardingCardArrowPlacement = "before" | "after";
+
+export declare type OnboardingCardLayout = "horizontal" | "vertical";
+
+export declare type OnboardingCardProps = {
+    /** Small uppercase line above the title (e.g. progress hint from the app). */
+    stepLabel?: ReactNode;
+    title: ReactNode;
+    description: ReactNode;
+    /** Renders beside the title (e.g. help link). */
+    titleAccessory?: ReactNode;
+    primaryAction?: ReactNode;
+    secondaryAction?: ReactNode;
+    layout: OnboardingCardLayout;
+    /** @default "before" */
+    arrowPlacement?: OnboardingCardArrowPlacement;
+    /** Wraps the arrow only (e.g. horizontal offset for a vertical callout). */
+    arrowWrapperClassName?: string;
+    arrowWrapperStyle?: CSSProperties;
+    className?: string;
+    cardClassName?: string;
+};
+
+/**
+ * Headless onboarding: first step in `steps` that is not dismissed and passes
+ * `isVisible(context)` is the active one. Dismissing does not advance until the
+ * next step’s predicate becomes true.
+ */
+export declare function OnboardingEngine<TContext, TStep extends OnboardingEngineStep<TContext>>({ steps, context, children }: OnboardingEngineProps<TContext, TStep>): JSX.Element;
+
+export declare type OnboardingEngineActions = {
+    dismissCurrentStep: () => void;
+    dismissStep: (id: string) => void;
+    /** Mark every step id as dismissed. */
+    skipAll: () => void;
+    /** Same as `skipAll`. */
+    close: () => void;
+};
+
+export declare type OnboardingEngineChildProps<TContext, TStep extends OnboardingEngineStep<TContext>> = {
+    context: TContext;
+    currentStep: TStep | null;
+    /** Index of `currentStep` in `steps`, or `null`. */
+    currentStepIndex: number | null;
+    dismissedStepIds: ReadonlySet<string>;
+    actions: OnboardingEngineActions;
+};
+
+export declare type OnboardingEngineProps<TContext, TStep extends OnboardingEngineStep<TContext>> = {
+    steps: readonly TStep[];
+    context: TContext;
+    children: (props: OnboardingEngineChildProps<TContext, TStep>) => ReactNode;
+};
+
+/** Step definition: `isVisible` gates eligibility; dismissed steps are skipped in order. */
+export declare type OnboardingEngineStep<TContext = unknown> = {
+    id: string;
+    isVisible: (context: TContext) => boolean;
+};
+
+/** Vertical placement for `layout="horizontal"` callouts beside the target. */
+export declare type OnboardingHorizontalAlign = "target-center" | "viewport-center";
+
+export declare type OnboardingPatternStep<TContext = unknown> = {
+    id: string;
+    targetId: string;
+    isVisible: (context: TContext) => boolean;
+    stepLabel?: ReactNode;
+    title: ReactNode;
+    description: ReactNode;
+    titleAccessory?: ReactNode;
+    layout: OnboardingCardLayout;
+    arrowPlacement?: OnboardingCardArrowPlacement;
+    /**
+     * For `layout="horizontal"`: vertical position of the fixed callout.
+     * @default "target-center"
+     */
+    horizontalAlign?: OnboardingHorizontalAlign;
+    className?: string;
+    cardClassName?: string;
+    arrowWrapperClassName?: string;
+    arrowWrapperStyle?: CSSProperties;
+};
+
+export declare type OnboardingProps<TContext = unknown> = {
+    /**
+     * Flow order follows this array. When the list length or ids change materially,
+     * remount `Onboarding` (e.g. `key`) so dismissal state resets.
+     */
+    steps: readonly OnboardingPatternStep<TContext>[];
+    context: TContext;
+    onFinish?: () => void;
+};
+
 export declare function OutlookCalendarIcon(props: IconProps): JSX.Element;
 
 export declare function OutlookIcon(props: IconProps): JSX.Element;