@ship-it-ui/ui 0.0.4 → 0.0.5

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import { ClassValue } from 'clsx';
 export { ClassValue } from 'clsx';
 import * as react from 'react';
-import { useEffect, KeyboardEvent, RefObject, ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, Ref, LabelHTMLAttributes, FC, SVGAttributes } from 'react';
+import { useEffect, KeyboardEvent, RefObject, ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, Ref, LabelHTMLAttributes, FC, SVGAttributes, MouseEventHandler } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
@@ -154,6 +154,7 @@ declare function useTheme(): {
 declare const buttonStyles: (props?: ({
     variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive" | "success" | "link" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
+    density?: "comfortable" | "touch" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonStyles> {
@@ -174,6 +175,7 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
 declare const iconButtonStyles: (props?: ({
     variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive" | "success" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
+    density?: "comfortable" | "touch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, VariantProps<typeof iconButtonStyles> {
     /** The glyph or icon node to render. Pure decoration — set `aria-label` for screen readers. */
@@ -248,6 +250,11 @@ declare const FAB: react.ForwardRefExoticComponent<FABProps & react.RefAttribute
 interface CheckboxProps extends Omit<RadixCheckbox.CheckboxProps, 'asChild' | 'children'> {
     /** Optional inline label rendered to the right of the box. */
     label?: ReactNode;
+    /**
+     * `'comfortable'` (default) renders the desktop checkbox. `'touch'` bumps the
+     * box to 22×22 inside a 44pt-min row so the whole label is tappable.
+     */
+    density?: 'comfortable' | 'touch';
 }
 /**
  * Tri-state checkbox. Set `checked="indeterminate"` for the dash-mark state used
@@ -287,6 +294,7 @@ declare function Field({ label, hint, error, required, className, children, ...p
 declare const inputWrapperStyles: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
     tone?: "default" | "err" | null | undefined;
+    density?: "comfortable" | "touch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputWrapperStyles> {
     /** Element rendered to the left of the input (an `IconGlyph`, `@`, etc.). */
@@ -305,6 +313,12 @@ interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
     shortcut?: string;
     /** Pixel width or any CSS length. Defaults to `360px`. */
     width?: number | string;
+    /**
+     * `'comfortable'` (default) renders the desktop 36px-tall pill. `'touch'`
+     * bumps to 44pt for thumb tapping and removes the kbd shortcut by default
+     * (consumers can still pass `shortcut` explicitly).
+     */
+    density?: 'comfortable' | 'touch';
 }
 /**
  * The hero search field — taller than a regular Input, with a leading magnifying-glass
@@ -432,6 +446,11 @@ interface SwitchProps extends Omit<RadixSwitch.SwitchProps, 'asChild' | 'childre
     label?: ReactNode;
     /** Visual size. Default `md`. */
     size?: 'sm' | 'md';
+    /**
+     * `'comfortable'` (default) renders the desktop switch. `'touch'` swaps to the
+     * mobile track/thumb dimensions (50×30) for thumb-friendly toggling.
+     */
+    density?: 'comfortable' | 'touch';
 }
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -494,6 +513,7 @@ declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttri
 declare const cardStyles: (props?: ({
     variant?: "ghost" | "default" | "elevated" | null | undefined;
     interactive?: boolean | null | undefined;
+    density?: "comfortable" | "touch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof cardStyles> {
     /** Render a header row with this title (and optional `actions`). */
@@ -577,6 +597,11 @@ interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
      * Mirrors the `Tag` API — pass `onRemove` and the X is rendered automatically.
      */
     onRemove?: () => void;
+    /**
+     * `'comfortable'` (default) renders the desktop chip at 26px tall.
+     * `'touch'` swaps to a roomier 32px chip with larger text for mobile filter strips.
+     */
+    density?: 'comfortable' | 'touch';
     children: ReactNode;
 }
 /**
@@ -743,19 +768,39 @@ interface DialogProps extends RadixDialog.DialogProps {
 }
 declare function Dialog({ title, description, footer, width, children, ...rootProps }: DialogProps): react_jsx_runtime.JSX.Element;
 
-type DrawerSide = 'left' | 'right';
+type DrawerSide = 'left' | 'right' | 'bottom';
 interface DrawerProps extends RadixDialog.DialogProps {
     /** Side the drawer slides in from. */
     side?: DrawerSide;
     /** Title rendered in the drawer header (with built-in close button). */
     title?: ReactNode;
-    /** Width override. Defaults to 420. */
+    /**
+     * Width override. Defaults to 420 for left/right sides; ignored for `bottom`
+     * (a bottom sheet always spans the full viewport width).
+     */
     width?: number | string;
+    /**
+     * Height override for the `bottom` side. Pass a number (px) or any CSS length
+     * (e.g. `'85vh'`). Defaults to `'85vh'` — leaves a 15vh peek of the underlying
+     * surface, matching iOS bottom-sheet conventions.
+     */
+    height?: number | string;
+    /**
+     * Show the drag-handle pill at the top of the sheet. Defaults to `true` for
+     * `side="bottom"`, ignored for left/right. The handle is visual only — full
+     * gesture-driven dismissal is left to consumer code (Radix Dialog already
+     * handles ESC, overlay click, and focus trap).
+     */
+    handle?: boolean;
     children?: ReactNode;
 }
 /**
  * Side-panel overlay. Same focus-trap + ESC + backdrop semantics as Dialog,
  * just slid in from the side.
+ *
+ * `side="bottom"` produces a mobile bottom sheet: full-width, rounded top
+ * corners (`--radius-m-sheet`), slide-up animation, and an optional drag
+ * handle (`handle`, defaults to `true`).
  */
 declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -1387,6 +1432,25 @@ interface HealthScoreProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
 }
 declare const HealthScore: react.ForwardRefExoticComponent<HealthScoreProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * LargeTitle — iOS-style oversized headline block. Renders an optional eyebrow
+ * (small uppercase mono label) above a 30px headline, with an optional trailing
+ * slot (typically an avatar or icon button) on the right.
+ *
+ * Place at the top of a scrolling screen. Pair with `<Topbar density="touch" />`
+ * for the scroll-revealing pattern: hide the Topbar title until the LargeTitle
+ * scrolls under the bar.
+ */
+interface LargeTitleProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Headline text. */
+    title: ReactNode;
+    /** Optional eyebrow label rendered above the title. Small, uppercase, mono. */
+    eyebrow?: ReactNode;
+    /** Optional right-aligned slot (avatar, settings button, etc.). */
+    trailing?: ReactNode;
+}
+declare const LargeTitle: react.ForwardRefExoticComponent<LargeTitleProps & react.RefAttributes<HTMLElement>>;
+
 /**
  * Menubar — desktop-style horizontal menu strip (File, Edit, View, …) built on
  * Radix Menubar. Owns ARIA + keyboard semantics; ShipIt owns styling.
@@ -1538,6 +1602,25 @@ interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'>, Va
 }
 declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * PullToRefresh — controlled visual indicator for the pull-to-refresh
+ * interaction. Renders the rotating arrow + state label that appears at the
+ * top of a scrolling list as the user pulls.
+ *
+ * This is the *visual* primitive only. The gesture (touch tracking, threshold
+ * detection, async refresh) is left to the consumer because that wiring is
+ * app-specific (router refresh, query invalidation, route reload, etc.). Pass
+ * the current `state` and the indicator updates to match.
+ */
+type PullToRefreshState = 'idle' | 'pulling' | 'ready' | 'loading';
+interface PullToRefreshProps extends HTMLAttributes<HTMLDivElement> {
+    /** Current state. Drive this from your gesture handler. */
+    state?: PullToRefreshState;
+    /** Override the default state label. */
+    label?: ReactNode;
+}
+declare const PullToRefresh: react.ForwardRefExoticComponent<PullToRefreshProps & react.RefAttributes<HTMLDivElement>>;
+
 /**
  * Sidebar — primary app navigation column. A simple flex column with the
  * panel background and a right border. Compose with `<NavItem>` and
@@ -1663,6 +1746,43 @@ interface StepperProps extends HTMLAttributes<HTMLOListElement> {
 }
 declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLOListElement>>;
 
+/**
+ * TabBar — mobile bottom navigation. Renders an evenly-spaced row of items
+ * (typically 4–5) with optional `elevated` styling for one center action.
+ *
+ * Active state can be controlled (`value` + `onValueChange`) or uncontrolled
+ * (`defaultValue`). The bar sits at the bottom of the screen; pair with
+ * `pb-[env(safe-area-inset-bottom)]` on the surrounding scroll container to
+ * respect the iOS home indicator.
+ */
+interface TabBarItem {
+    /** Stable identifier — what `value` / `onValueChange` reference. */
+    id: string;
+    /** Short label rendered under the icon. */
+    label: ReactNode;
+    /** Glyph node — pass an SVG, IconGlyph, or string emoji. */
+    icon: ReactNode;
+    /** Optional unread / count badge rendered top-right of the icon. */
+    badge?: ReactNode;
+    /**
+     * Render this slot as an elevated pill (the center "Ask"-style action). Only
+     * one item should set this true. Disables the active-color treatment for
+     * this slot since it's always the focal action.
+     */
+    elevated?: boolean;
+    disabled?: boolean;
+}
+interface TabBarProps extends Omit<HTMLAttributes<HTMLElement>, 'defaultValue'> {
+    items: TabBarItem[];
+    /** Controlled active item id. */
+    value?: string;
+    /** Uncontrolled initial active item id. */
+    defaultValue?: string;
+    /** Fired when a tab is activated. */
+    onValueChange?: (id: string) => void;
+}
+declare const TabBar: react.ForwardRefExoticComponent<TabBarProps & react.RefAttributes<HTMLElement>>;
+
 /**
  * Tabs — two visual styles built on Radix Tabs.
  *
@@ -1763,17 +1883,43 @@ interface ActivityTimelineProps extends HTMLAttributes<HTMLOListElement> {
 declare const ActivityTimeline: react.ForwardRefExoticComponent<ActivityTimelineProps & react.RefAttributes<HTMLOListElement>>;
 
 /**
- * Topbar — slim header strip across the top of an app surface. The title
- * lives on the left, the rest of the row is yours via `actions` (search,
- * settings, avatar, etc.).
+ * Topbar — slim header strip across the top of an app surface.
+ *
+ * Default (`density="comfortable"`) renders the 52px desktop header with a
+ * title on the left and `actions` on the right. Pass `density="touch"` for the
+ * 56px mobile page-header variant that adds an optional `back` button and an
+ * `eyebrow` line (small uppercase mono label) above the title — the same shape
+ * the Mobile Library uses as its in-app nav bar.
  */
 interface TopbarProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /** Title rendered on the left. */
     title?: ReactNode;
+    /**
+     * Eyebrow label rendered above the title (small uppercase mono). Touch density
+     * only — silently ignored on desktop density to avoid two header tiers stacking.
+     */
+    eyebrow?: ReactNode;
     /** Left-of-title slot — typically a logo or breadcrumbs. */
     leading?: ReactNode;
-    /** Right-side action group. Rendered with `gap-3`. */
+    /**
+     * Renders the back-arrow button at the start (before `leading`). Pass
+     * `back={true}` for the declarative form and wire the handler via `onBack`,
+     * or pass `back={handler}` directly. Touch-density only; ignored on
+     * desktop density.
+     */
+    back?: boolean | MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Handler for the back button when `back={true}`. Ignored when `back` is
+     * itself a function — in that case `back` is the handler.
+     */
+    onBack?: MouseEventHandler<HTMLButtonElement>;
+    /** Right-side action group. Rendered with `gap-3` (desktop) or `gap-1` (touch). */
     actions?: ReactNode;
+    /**
+     * `'comfortable'` (default) → desktop 52px header. `'touch'` → mobile 56px
+     * page-header with optional back button + eyebrow.
+     */
+    density?: 'comfortable' | 'touch';
 }
 declare const Topbar: react.ForwardRefExoticComponent<TopbarProps & react.RefAttributes<HTMLElement>>;
 
@@ -1871,4 +2017,4 @@ interface WizardDialogProps {
 }
 declare const WizardDialog: react.ForwardRefExoticComponent<WizardDialogProps & react.RefAttributes<HTMLDivElement>>;
 
-export { type ActivityActor, type ActivityEvent, ActivityTimeline, type ActivityTimelineProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, AlertDialogRoot, AlertDialogTrigger, type AlertProps, type AlertTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, type BannerTone, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, type CalendarProps, Card, CardLink, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, ContextMenu, ContextMenuContent, ContextMenuItem, type ContextMenuItemProps, ContextMenuPortal, ContextMenuRoot, ContextMenuSeparator, ContextMenuTrigger, Crumb, type CrumbProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogOverlay, DialogPortal, type DialogProps, DialogRoot, DialogTrigger, Dots, type DotsProps, Drawer, type DrawerProps, type DrawerSide, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuTrigger, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FAB, type FABProps, Field, type FieldProps, FileChip, type FileChipProps, type FilterFacet, type FilterFacetOption, FilterPanel, type FilterPanelProps, type FilterPanelValue, HealthScore, type HealthScoreBreakdownEntry, type HealthScoreProps, HoverCard, HoverCardContent, HoverCardPortal, type HoverCardProps, HoverCardRoot, HoverCardTrigger, IconButton, type IconButtonProps, Input, type InputProps, Kbd, type KbdProps, MenuCheckboxItem, MenuItem, type MenuItemProps, MenuSeparator, Menubar, MenubarContent, MenubarItem, type MenubarItemProps, MenubarMenu, MenubarSeparator, MenubarTrigger, NavBar, type NavBarItem, type NavBarOrientation, type NavBarProps, NavItem, type NavItemProps, NavSection, type NavSectionProps, type NormalizedOption, OTP, type OTPHandle, type OTPProps, OnboardingChecklist, type OnboardingChecklistProps, type OnboardingItem, type OnboardingItemStatus, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, RadialProgress, type RadialProgressProps, type RadialTone, Radio, RadioGroup, type RadioGroupProps, type RadioProps, ScrollArea, type ScrollAreaProps, type ScrollAreaType, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectTrigger, SelectValue, Sheet, type SheetProps, Sidebar, type SidebarProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineProps, Spinner, type SpinnerProps, SplitButton, type SplitButtonProps, StatCard, type StatCardProps, type StatTrend, StatusDot, type StatusDotProps, type StatusState, type StepState, Stepper, type StepperProps, type StepperStep, Switch, type SwitchProps, Tab, type TabProps, Tabs, TabsContent, TabsList, type TabsProps, type TabsVariantProps, Tag, type TagProps, Textarea, type TextareaProps, type Theme, Timeline, type TimelineEvent, type TimelineEventTone, TimelineItem, type TimelineItemProps, type TimelineProps, ToastCard, type ToastInput, ToastProvider, type ToastVariant, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, Topbar, type TopbarProps, Tree, type TreeItem, type TreeProps, type UseControllableStateProps, type UseKeyboardListOptions, type UseKeyboardListResult, type WizardContext, WizardDialog, type WizardDialogProps, type WizardStep, badgeStyles, buttonStyles, cardStyles, cn, filterCommandItems, formatRelative, iconButtonStyles, useControllableState, useDisclosure, useEscape, useIsomorphicLayoutEffect, useKeyboardList, useOutsideClick, useTheme, useToast };
+export { type ActivityActor, type ActivityEvent, ActivityTimeline, type ActivityTimelineProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, AlertDialogRoot, AlertDialogTrigger, type AlertProps, type AlertTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, type BannerTone, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, type CalendarProps, Card, CardLink, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, ContextMenu, ContextMenuContent, ContextMenuItem, type ContextMenuItemProps, ContextMenuPortal, ContextMenuRoot, ContextMenuSeparator, ContextMenuTrigger, Crumb, type CrumbProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogOverlay, DialogPortal, type DialogProps, DialogRoot, DialogTrigger, Dots, type DotsProps, Drawer, type DrawerProps, type DrawerSide, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuTrigger, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FAB, type FABProps, Field, type FieldProps, FileChip, type FileChipProps, type FilterFacet, type FilterFacetOption, FilterPanel, type FilterPanelProps, type FilterPanelValue, HealthScore, type HealthScoreBreakdownEntry, type HealthScoreProps, HoverCard, HoverCardContent, HoverCardPortal, type HoverCardProps, HoverCardRoot, HoverCardTrigger, IconButton, type IconButtonProps, Input, type InputProps, Kbd, type KbdProps, LargeTitle, type LargeTitleProps, MenuCheckboxItem, MenuItem, type MenuItemProps, MenuSeparator, Menubar, MenubarContent, MenubarItem, type MenubarItemProps, MenubarMenu, MenubarSeparator, MenubarTrigger, NavBar, type NavBarItem, type NavBarOrientation, type NavBarProps, NavItem, type NavItemProps, NavSection, type NavSectionProps, type NormalizedOption, OTP, type OTPHandle, type OTPProps, OnboardingChecklist, type OnboardingChecklistProps, type OnboardingItem, type OnboardingItemStatus, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, PullToRefresh, type PullToRefreshProps, type PullToRefreshState, RadialProgress, type RadialProgressProps, type RadialTone, Radio, RadioGroup, type RadioGroupProps, type RadioProps, ScrollArea, type ScrollAreaProps, type ScrollAreaType, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectTrigger, SelectValue, Sheet, type SheetProps, Sidebar, type SidebarProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineProps, Spinner, type SpinnerProps, SplitButton, type SplitButtonProps, StatCard, type StatCardProps, type StatTrend, StatusDot, type StatusDotProps, type StatusState, type StepState, Stepper, type StepperProps, type StepperStep, Switch, type SwitchProps, Tab, TabBar, type TabBarItem, type TabBarProps, type TabProps, Tabs, TabsContent, TabsList, type TabsProps, type TabsVariantProps, Tag, type TagProps, Textarea, type TextareaProps, type Theme, Timeline, type TimelineEvent, type TimelineEventTone, TimelineItem, type TimelineItemProps, type TimelineProps, ToastCard, type ToastInput, ToastProvider, type ToastVariant, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, Topbar, type TopbarProps, Tree, type TreeItem, type TreeProps, type UseControllableStateProps, type UseKeyboardListOptions, type UseKeyboardListResult, type WizardContext, WizardDialog, type WizardDialogProps, type WizardStep, badgeStyles, buttonStyles, cardStyles, cn, filterCommandItems, formatRelative, iconButtonStyles, useControllableState, useDisclosure, useEscape, useIsomorphicLayoutEffect, useKeyboardList, useOutsideClick, useTheme, useToast };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { ClassValue } from 'clsx';
 export { ClassValue } from 'clsx';
 import * as react from 'react';
-import { useEffect, KeyboardEvent, RefObject, ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, Ref, LabelHTMLAttributes, FC, SVGAttributes } from 'react';
+import { useEffect, KeyboardEvent, RefObject, ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, AnchorHTMLAttributes, Ref, LabelHTMLAttributes, FC, SVGAttributes, MouseEventHandler } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
@@ -154,6 +154,7 @@ declare function useTheme(): {
 declare const buttonStyles: (props?: ({
     variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive" | "success" | "link" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
+    density?: "comfortable" | "touch" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonStyles> {
@@ -174,6 +175,7 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
 declare const iconButtonStyles: (props?: ({
     variant?: "primary" | "secondary" | "ghost" | "outline" | "destructive" | "success" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
+    density?: "comfortable" | "touch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, VariantProps<typeof iconButtonStyles> {
     /** The glyph or icon node to render. Pure decoration — set `aria-label` for screen readers. */
@@ -248,6 +250,11 @@ declare const FAB: react.ForwardRefExoticComponent<FABProps & react.RefAttribute
 interface CheckboxProps extends Omit<RadixCheckbox.CheckboxProps, 'asChild' | 'children'> {
     /** Optional inline label rendered to the right of the box. */
     label?: ReactNode;
+    /**
+     * `'comfortable'` (default) renders the desktop checkbox. `'touch'` bumps the
+     * box to 22×22 inside a 44pt-min row so the whole label is tappable.
+     */
+    density?: 'comfortable' | 'touch';
 }
 /**
  * Tri-state checkbox. Set `checked="indeterminate"` for the dash-mark state used
@@ -287,6 +294,7 @@ declare function Field({ label, hint, error, required, className, children, ...p
 declare const inputWrapperStyles: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
     tone?: "default" | "err" | null | undefined;
+    density?: "comfortable" | "touch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputWrapperStyles> {
     /** Element rendered to the left of the input (an `IconGlyph`, `@`, etc.). */
@@ -305,6 +313,12 @@ interface SearchInputProps extends InputHTMLAttributes<HTMLInputElement> {
     shortcut?: string;
     /** Pixel width or any CSS length. Defaults to `360px`. */
     width?: number | string;
+    /**
+     * `'comfortable'` (default) renders the desktop 36px-tall pill. `'touch'`
+     * bumps to 44pt for thumb tapping and removes the kbd shortcut by default
+     * (consumers can still pass `shortcut` explicitly).
+     */
+    density?: 'comfortable' | 'touch';
 }
 /**
  * The hero search field — taller than a regular Input, with a leading magnifying-glass
@@ -432,6 +446,11 @@ interface SwitchProps extends Omit<RadixSwitch.SwitchProps, 'asChild' | 'childre
     label?: ReactNode;
     /** Visual size. Default `md`. */
     size?: 'sm' | 'md';
+    /**
+     * `'comfortable'` (default) renders the desktop switch. `'touch'` swaps to the
+     * mobile track/thumb dimensions (50×30) for thumb-friendly toggling.
+     */
+    density?: 'comfortable' | 'touch';
 }
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -494,6 +513,7 @@ declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttri
 declare const cardStyles: (props?: ({
     variant?: "ghost" | "default" | "elevated" | null | undefined;
     interactive?: boolean | null | undefined;
+    density?: "comfortable" | "touch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof cardStyles> {
     /** Render a header row with this title (and optional `actions`). */
@@ -577,6 +597,11 @@ interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
      * Mirrors the `Tag` API — pass `onRemove` and the X is rendered automatically.
      */
     onRemove?: () => void;
+    /**
+     * `'comfortable'` (default) renders the desktop chip at 26px tall.
+     * `'touch'` swaps to a roomier 32px chip with larger text for mobile filter strips.
+     */
+    density?: 'comfortable' | 'touch';
     children: ReactNode;
 }
 /**
@@ -743,19 +768,39 @@ interface DialogProps extends RadixDialog.DialogProps {
 }
 declare function Dialog({ title, description, footer, width, children, ...rootProps }: DialogProps): react_jsx_runtime.JSX.Element;
 
-type DrawerSide = 'left' | 'right';
+type DrawerSide = 'left' | 'right' | 'bottom';
 interface DrawerProps extends RadixDialog.DialogProps {
     /** Side the drawer slides in from. */
     side?: DrawerSide;
     /** Title rendered in the drawer header (with built-in close button). */
     title?: ReactNode;
-    /** Width override. Defaults to 420. */
+    /**
+     * Width override. Defaults to 420 for left/right sides; ignored for `bottom`
+     * (a bottom sheet always spans the full viewport width).
+     */
     width?: number | string;
+    /**
+     * Height override for the `bottom` side. Pass a number (px) or any CSS length
+     * (e.g. `'85vh'`). Defaults to `'85vh'` — leaves a 15vh peek of the underlying
+     * surface, matching iOS bottom-sheet conventions.
+     */
+    height?: number | string;
+    /**
+     * Show the drag-handle pill at the top of the sheet. Defaults to `true` for
+     * `side="bottom"`, ignored for left/right. The handle is visual only — full
+     * gesture-driven dismissal is left to consumer code (Radix Dialog already
+     * handles ESC, overlay click, and focus trap).
+     */
+    handle?: boolean;
     children?: ReactNode;
 }
 /**
  * Side-panel overlay. Same focus-trap + ESC + backdrop semantics as Dialog,
  * just slid in from the side.
+ *
+ * `side="bottom"` produces a mobile bottom sheet: full-width, rounded top
+ * corners (`--radius-m-sheet`), slide-up animation, and an optional drag
+ * handle (`handle`, defaults to `true`).
  */
 declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -1387,6 +1432,25 @@ interface HealthScoreProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
 }
 declare const HealthScore: react.ForwardRefExoticComponent<HealthScoreProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * LargeTitle — iOS-style oversized headline block. Renders an optional eyebrow
+ * (small uppercase mono label) above a 30px headline, with an optional trailing
+ * slot (typically an avatar or icon button) on the right.
+ *
+ * Place at the top of a scrolling screen. Pair with `<Topbar density="touch" />`
+ * for the scroll-revealing pattern: hide the Topbar title until the LargeTitle
+ * scrolls under the bar.
+ */
+interface LargeTitleProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Headline text. */
+    title: ReactNode;
+    /** Optional eyebrow label rendered above the title. Small, uppercase, mono. */
+    eyebrow?: ReactNode;
+    /** Optional right-aligned slot (avatar, settings button, etc.). */
+    trailing?: ReactNode;
+}
+declare const LargeTitle: react.ForwardRefExoticComponent<LargeTitleProps & react.RefAttributes<HTMLElement>>;
+
 /**
  * Menubar — desktop-style horizontal menu strip (File, Edit, View, …) built on
  * Radix Menubar. Owns ARIA + keyboard semantics; ShipIt owns styling.
@@ -1538,6 +1602,25 @@ interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'>, Va
 }
 declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * PullToRefresh — controlled visual indicator for the pull-to-refresh
+ * interaction. Renders the rotating arrow + state label that appears at the
+ * top of a scrolling list as the user pulls.
+ *
+ * This is the *visual* primitive only. The gesture (touch tracking, threshold
+ * detection, async refresh) is left to the consumer because that wiring is
+ * app-specific (router refresh, query invalidation, route reload, etc.). Pass
+ * the current `state` and the indicator updates to match.
+ */
+type PullToRefreshState = 'idle' | 'pulling' | 'ready' | 'loading';
+interface PullToRefreshProps extends HTMLAttributes<HTMLDivElement> {
+    /** Current state. Drive this from your gesture handler. */
+    state?: PullToRefreshState;
+    /** Override the default state label. */
+    label?: ReactNode;
+}
+declare const PullToRefresh: react.ForwardRefExoticComponent<PullToRefreshProps & react.RefAttributes<HTMLDivElement>>;
+
 /**
  * Sidebar — primary app navigation column. A simple flex column with the
  * panel background and a right border. Compose with `<NavItem>` and
@@ -1663,6 +1746,43 @@ interface StepperProps extends HTMLAttributes<HTMLOListElement> {
 }
 declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLOListElement>>;
 
+/**
+ * TabBar — mobile bottom navigation. Renders an evenly-spaced row of items
+ * (typically 4–5) with optional `elevated` styling for one center action.
+ *
+ * Active state can be controlled (`value` + `onValueChange`) or uncontrolled
+ * (`defaultValue`). The bar sits at the bottom of the screen; pair with
+ * `pb-[env(safe-area-inset-bottom)]` on the surrounding scroll container to
+ * respect the iOS home indicator.
+ */
+interface TabBarItem {
+    /** Stable identifier — what `value` / `onValueChange` reference. */
+    id: string;
+    /** Short label rendered under the icon. */
+    label: ReactNode;
+    /** Glyph node — pass an SVG, IconGlyph, or string emoji. */
+    icon: ReactNode;
+    /** Optional unread / count badge rendered top-right of the icon. */
+    badge?: ReactNode;
+    /**
+     * Render this slot as an elevated pill (the center "Ask"-style action). Only
+     * one item should set this true. Disables the active-color treatment for
+     * this slot since it's always the focal action.
+     */
+    elevated?: boolean;
+    disabled?: boolean;
+}
+interface TabBarProps extends Omit<HTMLAttributes<HTMLElement>, 'defaultValue'> {
+    items: TabBarItem[];
+    /** Controlled active item id. */
+    value?: string;
+    /** Uncontrolled initial active item id. */
+    defaultValue?: string;
+    /** Fired when a tab is activated. */
+    onValueChange?: (id: string) => void;
+}
+declare const TabBar: react.ForwardRefExoticComponent<TabBarProps & react.RefAttributes<HTMLElement>>;
+
 /**
  * Tabs — two visual styles built on Radix Tabs.
  *
@@ -1763,17 +1883,43 @@ interface ActivityTimelineProps extends HTMLAttributes<HTMLOListElement> {
 declare const ActivityTimeline: react.ForwardRefExoticComponent<ActivityTimelineProps & react.RefAttributes<HTMLOListElement>>;
 
 /**
- * Topbar — slim header strip across the top of an app surface. The title
- * lives on the left, the rest of the row is yours via `actions` (search,
- * settings, avatar, etc.).
+ * Topbar — slim header strip across the top of an app surface.
+ *
+ * Default (`density="comfortable"`) renders the 52px desktop header with a
+ * title on the left and `actions` on the right. Pass `density="touch"` for the
+ * 56px mobile page-header variant that adds an optional `back` button and an
+ * `eyebrow` line (small uppercase mono label) above the title — the same shape
+ * the Mobile Library uses as its in-app nav bar.
  */
 interface TopbarProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /** Title rendered on the left. */
     title?: ReactNode;
+    /**
+     * Eyebrow label rendered above the title (small uppercase mono). Touch density
+     * only — silently ignored on desktop density to avoid two header tiers stacking.
+     */
+    eyebrow?: ReactNode;
     /** Left-of-title slot — typically a logo or breadcrumbs. */
     leading?: ReactNode;
-    /** Right-side action group. Rendered with `gap-3`. */
+    /**
+     * Renders the back-arrow button at the start (before `leading`). Pass
+     * `back={true}` for the declarative form and wire the handler via `onBack`,
+     * or pass `back={handler}` directly. Touch-density only; ignored on
+     * desktop density.
+     */
+    back?: boolean | MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Handler for the back button when `back={true}`. Ignored when `back` is
+     * itself a function — in that case `back` is the handler.
+     */
+    onBack?: MouseEventHandler<HTMLButtonElement>;
+    /** Right-side action group. Rendered with `gap-3` (desktop) or `gap-1` (touch). */
     actions?: ReactNode;
+    /**
+     * `'comfortable'` (default) → desktop 52px header. `'touch'` → mobile 56px
+     * page-header with optional back button + eyebrow.
+     */
+    density?: 'comfortable' | 'touch';
 }
 declare const Topbar: react.ForwardRefExoticComponent<TopbarProps & react.RefAttributes<HTMLElement>>;
 
@@ -1871,4 +2017,4 @@ interface WizardDialogProps {
 }
 declare const WizardDialog: react.ForwardRefExoticComponent<WizardDialogProps & react.RefAttributes<HTMLDivElement>>;
 
-export { type ActivityActor, type ActivityEvent, ActivityTimeline, type ActivityTimelineProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, AlertDialogRoot, AlertDialogTrigger, type AlertProps, type AlertTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, type BannerTone, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, type CalendarProps, Card, CardLink, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, ContextMenu, ContextMenuContent, ContextMenuItem, type ContextMenuItemProps, ContextMenuPortal, ContextMenuRoot, ContextMenuSeparator, ContextMenuTrigger, Crumb, type CrumbProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogOverlay, DialogPortal, type DialogProps, DialogRoot, DialogTrigger, Dots, type DotsProps, Drawer, type DrawerProps, type DrawerSide, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuTrigger, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FAB, type FABProps, Field, type FieldProps, FileChip, type FileChipProps, type FilterFacet, type FilterFacetOption, FilterPanel, type FilterPanelProps, type FilterPanelValue, HealthScore, type HealthScoreBreakdownEntry, type HealthScoreProps, HoverCard, HoverCardContent, HoverCardPortal, type HoverCardProps, HoverCardRoot, HoverCardTrigger, IconButton, type IconButtonProps, Input, type InputProps, Kbd, type KbdProps, MenuCheckboxItem, MenuItem, type MenuItemProps, MenuSeparator, Menubar, MenubarContent, MenubarItem, type MenubarItemProps, MenubarMenu, MenubarSeparator, MenubarTrigger, NavBar, type NavBarItem, type NavBarOrientation, type NavBarProps, NavItem, type NavItemProps, NavSection, type NavSectionProps, type NormalizedOption, OTP, type OTPHandle, type OTPProps, OnboardingChecklist, type OnboardingChecklistProps, type OnboardingItem, type OnboardingItemStatus, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, RadialProgress, type RadialProgressProps, type RadialTone, Radio, RadioGroup, type RadioGroupProps, type RadioProps, ScrollArea, type ScrollAreaProps, type ScrollAreaType, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectTrigger, SelectValue, Sheet, type SheetProps, Sidebar, type SidebarProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineProps, Spinner, type SpinnerProps, SplitButton, type SplitButtonProps, StatCard, type StatCardProps, type StatTrend, StatusDot, type StatusDotProps, type StatusState, type StepState, Stepper, type StepperProps, type StepperStep, Switch, type SwitchProps, Tab, type TabProps, Tabs, TabsContent, TabsList, type TabsProps, type TabsVariantProps, Tag, type TagProps, Textarea, type TextareaProps, type Theme, Timeline, type TimelineEvent, type TimelineEventTone, TimelineItem, type TimelineItemProps, type TimelineProps, ToastCard, type ToastInput, ToastProvider, type ToastVariant, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, Topbar, type TopbarProps, Tree, type TreeItem, type TreeProps, type UseControllableStateProps, type UseKeyboardListOptions, type UseKeyboardListResult, type WizardContext, WizardDialog, type WizardDialogProps, type WizardStep, badgeStyles, buttonStyles, cardStyles, cn, filterCommandItems, formatRelative, iconButtonStyles, useControllableState, useDisclosure, useEscape, useIsomorphicLayoutEffect, useKeyboardList, useOutsideClick, useTheme, useToast };
+export { type ActivityActor, type ActivityEvent, ActivityTimeline, type ActivityTimelineProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, AlertDialogRoot, AlertDialogTrigger, type AlertProps, type AlertTone, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, type BannerTone, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, type CalendarProps, Card, CardLink, type CardLinkProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, ContextMenu, ContextMenuContent, ContextMenuItem, type ContextMenuItemProps, ContextMenuPortal, ContextMenuRoot, ContextMenuSeparator, ContextMenuTrigger, Crumb, type CrumbProps, DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogOverlay, DialogPortal, type DialogProps, DialogRoot, DialogTrigger, Dots, type DotsProps, Drawer, type DrawerProps, type DrawerSide, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRoot, DropdownMenuTrigger, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FAB, type FABProps, Field, type FieldProps, FileChip, type FileChipProps, type FilterFacet, type FilterFacetOption, FilterPanel, type FilterPanelProps, type FilterPanelValue, HealthScore, type HealthScoreBreakdownEntry, type HealthScoreProps, HoverCard, HoverCardContent, HoverCardPortal, type HoverCardProps, HoverCardRoot, HoverCardTrigger, IconButton, type IconButtonProps, Input, type InputProps, Kbd, type KbdProps, LargeTitle, type LargeTitleProps, MenuCheckboxItem, MenuItem, type MenuItemProps, MenuSeparator, Menubar, MenubarContent, MenubarItem, type MenubarItemProps, MenubarMenu, MenubarSeparator, MenubarTrigger, NavBar, type NavBarItem, type NavBarOrientation, type NavBarProps, NavItem, type NavItemProps, NavSection, type NavSectionProps, type NormalizedOption, OTP, type OTPHandle, type OTPProps, OnboardingChecklist, type OnboardingChecklistProps, type OnboardingItem, type OnboardingItemStatus, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, Progress, type ProgressProps, PullToRefresh, type PullToRefreshProps, type PullToRefreshState, RadialProgress, type RadialProgressProps, type RadialTone, Radio, RadioGroup, type RadioGroupProps, type RadioProps, ScrollArea, type ScrollAreaProps, type ScrollAreaType, SearchInput, type SearchInputProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, type SelectProps, SelectRoot, SelectTrigger, SelectValue, Sheet, type SheetProps, Sidebar, type SidebarProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineProps, Spinner, type SpinnerProps, SplitButton, type SplitButtonProps, StatCard, type StatCardProps, type StatTrend, StatusDot, type StatusDotProps, type StatusState, type StepState, Stepper, type StepperProps, type StepperStep, Switch, type SwitchProps, Tab, TabBar, type TabBarItem, type TabBarProps, type TabProps, Tabs, TabsContent, TabsList, type TabsProps, type TabsVariantProps, Tag, type TagProps, Textarea, type TextareaProps, type Theme, Timeline, type TimelineEvent, type TimelineEventTone, TimelineItem, type TimelineItemProps, type TimelineProps, ToastCard, type ToastInput, ToastProvider, type ToastVariant, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, Topbar, type TopbarProps, Tree, type TreeItem, type TreeProps, type UseControllableStateProps, type UseKeyboardListOptions, type UseKeyboardListResult, type WizardContext, WizardDialog, type WizardDialogProps, type WizardStep, badgeStyles, buttonStyles, cardStyles, cn, filterCommandItems, formatRelative, iconButtonStyles, useControllableState, useDisclosure, useEscape, useIsomorphicLayoutEffect, useKeyboardList, useOutsideClick, useTheme, useToast };