@sequenceholdings/atlas-ui 3.3.0 → 3.4.0

package/dist/index.d.ts

@@ -140,6 +140,46 @@ declare interface AppStatusBadgeProps {
     className?: string;
 }
 
+export declare function ArtifactAppShell({ header, status, navigation, footer, children, className, contentClassName, scrollMode, ...props }: ArtifactAppShellProps): JSX.Element;
+
+export declare type ArtifactAppShellProps = ComponentProps<'div'> & {
+    header?: ReactNode;
+    status?: ReactNode;
+    navigation?: ReactNode;
+    footer?: ReactNode;
+    contentClassName?: string;
+    scrollMode?: ArtifactAppShellScrollMode;
+};
+
+export declare type ArtifactAppShellScrollMode = 'document' | 'contained';
+
+export declare function ArtifactOfflineControl({ status, onEnrolledChange, disabled, compact, className, icon, }: {
+    status: ArtifactOfflineUiStatus;
+    onEnrolledChange: (enrolled: boolean) => void;
+    disabled?: boolean;
+    compact?: boolean;
+    className?: string;
+    icon?: ReactNode;
+}): JSX.Element;
+
+export declare interface ArtifactOfflineStatusCopy {
+    title: string;
+    subtitle: string;
+    ariaLabel: string;
+    tone: 'neutral' | 'ready' | 'warning' | 'danger';
+}
+
+export declare interface ArtifactOfflineUiStatus {
+    enrolled: boolean;
+    online: boolean;
+    pending: number;
+    failed: number;
+    syncing: boolean;
+    loading: boolean;
+    updating: boolean;
+    error?: string | null;
+}
+
 /**
  * Button that reflects the lifecycle of an async mutation:
  * idle → pending (spinner) → success/error (auto-resets).
@@ -327,7 +367,7 @@ export declare interface ButtonProps extends React_2.ButtonHTMLAttributes<HTMLBu
 
 export declare const buttonVariants: (props?: ({
     variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | "submit" | null | undefined;
-    size?: "default" | "sm" | "icon" | "lg" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "touch" | "sm" | "icon" | "lg" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | "icon-touch" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare function Calendar({ className, classNames, showOutsideDays, ...props }: React_2.ComponentProps<typeof DayPicker>): JSX.Element;
@@ -1532,6 +1572,8 @@ export declare interface FilterSelectProps<T extends string> {
     onChange: (next: T[]) => void;
 }
 
+export declare function formatArtifactOfflineStatus(status: ArtifactOfflineUiStatus): ArtifactOfflineStatusCopy;
+
 /**
  * Format a byte count to a human-readable string. Matches the
  * conventions users expect in file dialogs: 1024-base, one decimal
@@ -1914,6 +1956,68 @@ declare interface MetricGridProps {
     className?: string;
 }
 
+/**
+ * Viewport width (px) at or below which Atlas may treat the screen as "mobile".
+ * Single source of truth — do not hard-code the breakpoint anywhere else.
+ *
+ * 640px is deliberately a clean phone/tablet divider: it sits above every
+ * phone's portrait width (the largest are ~480px) and below every iPad's
+ * portrait width (the smallest, the Mini, is ~744px), so phones pivot and
+ * tablets stay on desktop. Avoid 768px — that lands exactly on the historical
+ * iPad-portrait width and ambiguously catches the Mini.
+ */
+export declare const MOBILE_BREAKPOINT_PX = 640;
+
+export declare function MobileActionBar({ sticky, className, children, ...props }: MobileActionBarProps): JSX.Element;
+
+export declare type MobileActionBarProps = ComponentProps<'footer'> & {
+    sticky?: boolean;
+};
+
+export declare function MobileAppNav({ items, value, onChange, label, variant, className, ...props }: MobileAppNavProps): JSX.Element;
+
+export declare type MobileAppNavItem = {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    badge?: ReactNode;
+    disabled?: boolean;
+};
+
+export declare const mobileAppNavItemVariants: (props?: ({
+    variant?: "line" | "segmented" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare type MobileAppNavProps = Omit<ComponentProps<'nav'>, 'onChange'> & VariantProps<typeof mobileAppNavItemVariants> & {
+    items: MobileAppNavItem[];
+    value: string;
+    onChange: (value: string) => void;
+    label?: string;
+};
+
+export declare function MobileListRow({ title, titleText, description, leading, trailing, showChevron, className, type, ...props }: MobileListRowProps): JSX.Element;
+
+export declare type MobileListRowProps = Omit<ComponentProps<'button'>, 'title'> & {
+    title: ReactNode;
+    titleText?: string;
+    description?: ReactNode;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    showChevron?: boolean;
+};
+
+export declare function MobilePageHeader({ title, description, leading, actions, onBack, backLabel, sticky, className, ...props }: MobilePageHeaderProps): JSX.Element;
+
+export declare type MobilePageHeaderProps = Omit<ComponentProps<'header'>, 'title'> & {
+    title: string;
+    description?: string;
+    leading?: ReactNode;
+    actions?: ReactNode;
+    onBack?: () => void;
+    backLabel?: string;
+    sticky?: boolean;
+};
+
 export declare function MultiSelect({ label, countLabel, options, selected, onChange, searchPlaceholder, emptyMessage, maxStackedIcons, hideWhenEmpty, modal, className, }: MultiSelectProps): JSX.Element | null;
 
 /**
@@ -2826,7 +2930,7 @@ export declare interface SectionLoadingStateProps {
     label?: string;
 }
 
-export declare function SegmentedControl<T extends string>({ options, value, onChange, className, }: SegmentedControlProps<T>): JSX.Element;
+export declare function SegmentedControl<T extends string>({ options, value, onChange, className, size, }: SegmentedControlProps<T>): JSX.Element;
 
 declare interface SegmentedControlOption<T extends string> {
     value: T;
@@ -2839,6 +2943,7 @@ declare interface SegmentedControlProps<T extends string> {
     value: T;
     onChange: (value: T) => void;
     className?: string;
+    size?: 'default' | 'touch';
 }
 
 export declare const Select: React_2.FC<SelectPrimitive.SelectProps>;
@@ -3917,6 +4022,22 @@ export declare interface UseEditableDraftResult<TDraft> {
     reset: () => void;
 }
 
+/**
+ * Returns `true` only when the viewport is narrow (at or below
+ * {@link MOBILE_BREAKPOINT_PX}) **and** the primary pointer is coarse (touch).
+ *
+ * This is the canonical "show the mobile UI" gate. It is capability-based, not
+ * user-agent-based: a narrow desktop window driven by a mouse stays on desktop,
+ * while a phone/tablet (or an iPad masquerading as desktop in its UA) pivots.
+ * On the server it returns `false` (assume desktop) and re-gates on the client
+ * after hydration; gated surfaces should tolerate a one-frame flash.
+ *
+ * To exercise this locally, use the browser's device toolbar (which emulates a
+ * coarse pointer) — by design, simply dragging a desktop window narrow will not
+ * trigger it.
+ */
+export declare function useIsMobileViewport(): boolean;
+
 /**
  * Optimistic mutation over a family of React Query list caches matched by a
  * partial key. Same lifecycle as `useOptimisticResource` (cancel + snapshot +