@lateralus-ai/shipping-ui 2.0.0-dev.3 → 2.0.0-dev.30

package/dist/components/Entry.d.ts

@@ -1,13 +1,33 @@
 import { ReactNode } from 'react';
-export type EntryType = "chat" | "issue";
-export type EntryState = "idle" | "selected";
+export type EntryVariant = "chat" | "issue" | "report";
+/** @deprecated Prefer `EntryVariant`. */
+export type EntryType = EntryVariant;
+export type EntryState = "idle" | "active";
 export type EntryProps = {
-    type: EntryType;
+    /** Visual type — drives the default leading icon. */
+    variant?: EntryVariant;
+    /** @deprecated Use `variant`. */
+    type?: EntryVariant;
     state?: EntryState;
-    title: string;
-    subtitle?: string;
-    meta?: ReactNode;
+    title?: ReactNode;
+    /** Secondary line — excerpt, metadata, or highlighted query match. */
+    subtitle?: ReactNode;
+    /** Unread count badge in the title row (Figma red pill). */
+    count?: number;
+    /** Trailing actions (e.g. ellipsis menu). Shown on hover / when forced. */
+    trailing?: ReactNode;
+    /** Override the default variant icon. */
+    icon?: ReactNode;
     onClick?: () => void;
     className?: string;
+    /** @deprecated Use `count` or `trailing`. */
+    meta?: ReactNode;
 };
-export declare const Entry: ({ type, state, title, subtitle, meta, onClick, className, }: EntryProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * List entry row — Figma `Entry` (389:10001).
+ * Shared by search results and activity lists.
+ *
+ * Renders a `div` (not `<button>`) so trailing controls can be real buttons
+ * without nested-button issues. Whole-row click uses `onClick` + keyboard.
+ */
+export declare const Entry: ({ variant, type, state, title, subtitle, count, trailing, icon, onClick, className, meta, }: EntryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PageHeader.d.ts

@@ -0,0 +1,41 @@
+import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
+export type PageHeaderCrumb = {
+    label: string;
+    /** Renders a real `<a href>` so native browser controls work. */
+    href: string;
+    /**
+     * Optional SPA handler. Callers should `preventDefault` only for unmodified
+     * primary clicks; modifier / middle-click keep native anchor behavior.
+     */
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+};
+export type PageHeaderProps = {
+    /** Leading icon (Figma 24×24). */
+    icon?: ReactNode;
+    /** Standard title, or current (last) segment when `crumbs` is set. */
+    title: ReactNode;
+    /**
+     * Parent breadcrumb links. When present, renders Nested: icon + parents + `/`
+     * + current `title` (non-link).
+     */
+    crumbs?: PageHeaderCrumb[];
+    /** Right-hand actions slot (buttons, menus, etc.). */
+    actions?: ReactNode;
+    className?: string;
+};
+export type PageHeaderShellProps = ComponentPropsWithoutRef<"div">;
+export type PageHeaderBodyProps = ComponentPropsWithoutRef<"div">;
+/**
+ * Page title row — Figma `Header` (389:8850).
+ * Variants: Standard (icon + title) | Nested (icon + crumb trail).
+ */
+declare function PageHeaderRoot({ icon, title, crumbs, actions, className, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+/** Flex column shell — pin header, scroll body (avoids brittle CSS sticky). */
+declare function PageHeaderShell({ className, ...props }: PageHeaderShellProps): import("react/jsx-runtime").JSX.Element;
+/** Scrollable page content under a pinned PageHeader. */
+declare function PageHeaderBody({ className, ...props }: PageHeaderBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare const PageHeader: typeof PageHeaderRoot & {
+    Shell: typeof PageHeaderShell;
+    Body: typeof PageHeaderBody;
+};
+export {};

package/dist/components/ScrollableList.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef } from 'react';
+export type ScrollableListProps = ComponentPropsWithoutRef<"div">;
+export type ScrollableListHeaderProps = ComponentPropsWithoutRef<"div">;
+export type ScrollableListBodyProps = ComponentPropsWithoutRef<"div">;
+/**
+ * Fill-height list chrome — Figma `Table` (6154:152285).
+ * Outer grey-100 frame + header slot + internally scrolling grey-50 body.
+ * Column layout and rows are caller-owned children.
+ */
+declare function ScrollableListRoot({ className, ...props }: ScrollableListProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Column title bar. Default left padding aligns with a 24px leading icon +
+ * 8px gap + 8px row padding (Figma). Override `className` when rows have no icon.
+ */
+declare function ScrollableListHeader({ className, ...props }: ScrollableListHeaderProps): import("react/jsx-runtime").JSX.Element;
+/** Internally scrolling row region. */
+declare function ScrollableListBody({ className, ...props }: ScrollableListBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare const ScrollableList: typeof ScrollableListRoot & {
+    Header: typeof ScrollableListHeader;
+    Body: typeof ScrollableListBody;
+};
+export {};

package/dist/components/Tabs.d.ts

@@ -1,20 +1,20 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 export type TabsType = "tabs" | "pills";
+/** Soft = search filters (filled idle, light accent active). Solid = list filters (grey-100 idle, blue-600 active). */
+export type TabsAppearance = "soft" | "solid";
 export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
     type?: TabsType;
+    /** Only applies when `type="pills"`. Defaults to `soft`. */
+    appearance?: TabsAppearance;
 };
-export declare const Tabs: ({ type, className, children, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ type, appearance, className, children, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
 export declare const TabsList: import('react').ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
-    /** Optional count badge (pill variant / search filters). */
-    count?: number;
     children: ReactNode;
 };
 export declare const TabsTrigger: import('react').ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & {
-    /** Optional count badge (pill variant / search filters). */
-    count?: number;
     children: ReactNode;
 } & import('react').RefAttributes<HTMLButtonElement>>;
 export type TabsContentProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;

package/dist/components/index.d.ts

@@ -4,9 +4,11 @@ export { InputType, type InputTypeProps, type InputTypeKind, type InputTypeState
 export { Chip, type ChipProps, type ChipVariant } from './Chip';
 export { Checkbox, type CheckboxProps } from './Checkbox';
 export { Tab, type TabProps, type TabState } from './Tab';
-export { Tabs, TabsList, TabsTrigger, TabsContent, type TabsProps, type TabsListProps, type TabsTriggerProps, type TabsContentProps, type TabsItem, type TabsType, } from './Tabs';
+export { Tabs, TabsList, TabsTrigger, TabsContent, type TabsProps, type TabsListProps, type TabsTriggerProps, type TabsContentProps, type TabsItem, type TabsType, type TabsAppearance, } from './Tabs';
 export { Header, type HeaderProps, type HeaderVariant } from './Header';
-export { Entry, type EntryProps, type EntryType, type EntryState } from './Entry';
+export { PageHeader, type PageHeaderProps, type PageHeaderCrumb, type PageHeaderShellProps, type PageHeaderBodyProps, } from './PageHeader';
+export { ScrollableList, type ScrollableListProps, type ScrollableListHeaderProps, type ScrollableListBodyProps, } from './ScrollableList';
+export { Entry, type EntryProps, type EntryType, type EntryState, type EntryVariant } from './Entry';
 export { EmptyState, type EmptyStateProps } from './EmptyState';
 export { Modal, ModalTrigger, ModalClose, ModalPortal, ModalOverlay, ModalContent, ModalTitle, ModalDescription, ModalHeaderSlot, ModalBody, type ModalProps, type ModalOverlayProps, type ModalContentProps, type ModalTitleProps, type ModalDescriptionProps, type ModalBodyProps, } from './Modal';
 export { ModalPanel } from './ModalPanel';

package/dist/domain/Filters/FilterDropdown.d.ts

@@ -0,0 +1,119 @@
+import { ComponentType, CSSProperties, ReactNode } from 'react';
+import { FilterPillAppearance } from './FilterPill';
+/** One selectable row at a leaf list. */
+export type FilterOption = {
+    value: string;
+    label: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+};
+export type FilterSelectionMode = "multi" | "single";
+/**
+ * Recursive submenu: options leaf, nested folders, or custom panel (e.g. date range).
+ */
+export type FilterSubmenuContent = {
+    type: "options";
+    /** Key into `selectedValuesBySelectionKey` / `onSelectOption` */
+    selectionKey: string;
+    /** `multi` (default) toggles; `single` is exclusive — still one check slot reserved. */
+    selectionMode?: FilterSelectionMode;
+    options: FilterOption[];
+} | {
+    type: "nested";
+    items: FilterNestedItem[];
+} | {
+    type: "custom";
+    render: () => ReactNode;
+};
+export type FilterNestedItem = {
+    id: string;
+    label: string;
+    content: FilterSubmenuContent;
+};
+/** Left-column row that opens a (possibly nested) submenu panel. */
+export type FilterCategorySubmenuRow = {
+    kind?: "submenu";
+    id: string;
+    label: string;
+    content: FilterSubmenuContent;
+};
+/**
+ * Options rendered inline in the first panel (no chevron / second column).
+ * Mix with submenu rows for hybrid menus (e.g. Status submenu + Sort by flat).
+ */
+export type FilterCategoryInlineOptionsRow = {
+    kind: "inline-options";
+    id: string;
+    /** Small section header above the options (e.g. "Sort by"). */
+    title?: string;
+    selectionKey: string;
+    selectionMode?: FilterSelectionMode;
+    options: FilterOption[];
+};
+/** First-panel row: label + Switch (no right panel). */
+export type FilterCategoryToggleRow = {
+    kind: "toggle";
+    id: string;
+    label: string;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+};
+export type FilterCategoryRow = FilterCategorySubmenuRow | FilterCategoryInlineOptionsRow | FilterCategoryToggleRow;
+type ResolvedSubmenuView = {
+    kind: "folders";
+    items: FilterNestedItem[];
+    trail: string[];
+} | {
+    kind: "options";
+    selectionKey: string;
+    selectionMode: FilterSelectionMode;
+    options: FilterOption[];
+    trail: string[];
+} | {
+    kind: "custom";
+    render: () => ReactNode;
+    trail: string[];
+};
+/** Walk `path` (folder ids) from `content` to the current view. */
+export declare function resolveSubmenuView(content: FilterSubmenuContent, path: string[]): ResolvedSubmenuView;
+export type FilterDropdownProps = {
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    /**
+     * First panel rows — mix freely:
+     * submenu (chevron + second panel), inline-options (flat list), toggle (Switch).
+     */
+    categoryRows: FilterCategoryRow[];
+    selectedValuesBySelectionKey: Record<string, string[] | undefined>;
+    /**
+     * Fired when an option is activated. For `multi`, consumers typically toggle;
+     * for `single`, replace the selection with `[optionValue]`.
+     */
+    onSelectOption: (selectionKey: string, optionValue: string) => void;
+    onResetAll: () => void;
+    resetAllLabel?: string;
+    /** When false, hides the Reset all footer. Default true. */
+    showResetAll?: boolean;
+    activeFilterCount: number;
+    getOptionLabelStyle?: (selectionKey: string, optionValue: string) => CSSProperties | undefined;
+    zIndexClass?: string;
+    /** Replace the default FilterPill trigger. */
+    trigger?: ReactNode;
+    /** Passed to the default FilterPill when `trigger` is omitted. */
+    triggerAppearance?: FilterPillAppearance;
+    /**
+     * Which side the options panel attaches to the category column.
+     * Carets stay on the right of category rows either way.
+     */
+    submenuSide?: "left" | "right";
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+};
+/**
+ * Filters trigger + popover. First panel supports hybrid rows: submenus,
+ * inline option lists, and Switch toggles. Submenus open a second column.
+ */
+export declare function FilterDropdown({ align, sideOffset, categoryRows, selectedValuesBySelectionKey, onSelectOption, onResetAll, resetAllLabel, showResetAll, activeFilterCount, getOptionLabelStyle, zIndexClass, trigger, triggerAppearance, submenuSide, open: openControlled, onOpenChange, className, }: FilterDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/domain/Filters/FilterPill.d.ts

@@ -1,6 +1,23 @@
-export type FilterPillIndicator = "on" | "off";
-export type FilterPillProps = {
-    indicator?: FilterPillIndicator;
-    className?: string;
+import { ButtonHTMLAttributes } from 'react';
+export type FilterPillAppearance = "filled" | "ghost";
+export type FilterPillProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    /** When > 0, shows the orange count badge. */
+    activeFilterCount?: number;
+    /**
+     * `filled` — grey idle / blue when active (Figma default).
+     * `ghost` — white idle and active; only hover changes surface color.
+     */
+    appearance?: FilterPillAppearance;
 };
-export declare const FilterPill: ({ indicator, className }: FilterPillProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Filter trigger — Figma Filter Pill (6154:149608 / 6154:149599).
+ */
+export declare const FilterPill: import('react').ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    /** When > 0, shows the orange count badge. */
+    activeFilterCount?: number;
+    /**
+     * `filled` — grey idle / blue when active (Figma default).
+     * `ghost` — white idle and active; only hover changes surface color.
+     */
+    appearance?: FilterPillAppearance;
+} & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/domain/Filters/FilterPills.d.ts

@@ -0,0 +1,18 @@
+import { FilteredPillProps } from './FilteredPill';
+export type FilterPillsItem = {
+    key: string;
+    label: string;
+    onRemove: () => void;
+    removeAriaLabel?: string;
+    classNames?: FilteredPillProps["classNames"];
+};
+export type FilterPillsProps = {
+    chips: FilterPillsItem[];
+    className?: string;
+};
+/**
+ * Partner row for FilterDropdown — active filter pills.
+ * Always renders the row wrapper (even when empty) so sibling filter
+ * triggers can stay pinned with `ml-auto` / flex layouts.
+ */
+export declare const FilterPills: ({ chips, className }: FilterPillsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/domain/Filters/FilteredPill.d.ts

@@ -1,8 +1,18 @@
-export type FilteredPillState = "idle" | "hover";
 export type FilteredPillProps = {
-    label?: string;
-    count?: number;
-    state?: FilteredPillState;
+    label: string;
+    onRemove: () => void;
+    removeAriaLabel?: string;
     className?: string;
+    /** Optional tone overrides. Prefer default beige unless a product needs a custom tone. */
+    classNames?: {
+        root?: string;
+        label?: string;
+        remove?: string;
+    };
 };
-export declare const FilteredPill: ({ label, count, state, className, }: FilteredPillProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Active filter value pill — Figma Filtered (6154:149787).
+ * Clear control on the left, label on the right. Max 300px with ellipsis;
+ * full label in a tooltip on hover.
+ */
+export declare const FilteredPill: ({ label, onRemove, removeAriaLabel, className, classNames, }: FilteredPillProps) => import("react/jsx-runtime").JSX.Element;

package/dist/domain/Filters/formatActiveFilterChipLabel.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Format the user-visible label for an active-filter chip (audit-prep rules).
+ *
+ * - 0 selected → "" (caller should not render)
+ * - 1 selected → `<filterName> (<value>)`
+ * - 2 selected → `<filterName> (<v1>, <v2>)`
+ * - 3+ selected → `<filterName> (<v1>, <v2>...)` (literal `...`)
+ *
+ * `selectedLabels` are already human-readable, in selection order.
+ */
+export declare function formatActiveFilterChipLabel(filterName: string, selectedLabels: string[]): string;

package/dist/domain/Filters/index.d.ts

@@ -1,3 +1,8 @@
-export { FiltersBar, type FiltersBarFilters, type FiltersBarProps, type FiltersBarTabs } from './FiltersBar';
-export { FilteredPill, type FilteredPillProps, type FilteredPillState } from './FilteredPill';
-export { FilterPill, type FilterPillIndicator, type FilterPillProps } from './FilterPill';
+export { FiltersBar, type FiltersBarFilters, type FiltersBarProps, type FiltersBarTabs, } from './FiltersBar';
+export { FilteredPill, type FilteredPillProps, } from './FilteredPill';
+export { FilterPill, type FilterPillAppearance, type FilterPillProps, } from './FilterPill';
+export { FilterPills, type FilterPillsItem, type FilterPillsProps, } from './FilterPills';
+export { FilterDropdown, resolveSubmenuView, type FilterCategoryInlineOptionsRow, type FilterCategoryRow, type FilterCategorySubmenuRow, type FilterCategoryToggleRow, type FilterDropdownProps, type FilterNestedItem, type FilterOption, type FilterSelectionMode, type FilterSubmenuContent, } from './FilterDropdown';
+export { formatActiveFilterChipLabel } from './formatActiveFilterChipLabel';
+/** @deprecated Use `activeFilterCount` on FilterPill instead. */
+export type FilterPillIndicator = "on" | "off";