@passui/react 0.0.0-stage → 0.1.14

package/src/hooks/use-minimize-on-scroll.ts

@@ -0,0 +1,92 @@
+import { useEffect, useState } from "react"
+import { minimizeDecision } from "./scroll/minimize-decision"
+
+/**
+ * Minimized while you scroll down through content, restored when you scroll
+ * back up or reach the top: iOS 26's `tabBarMinimizeBehavior(.onScrollDown)`.
+ * Listens to every scroll container, since each screen scrolls its own pane.
+ */
+export function useMinimizeOnScroll() {
+    const [minimized, setMinimized] = useState(false)
+    useEffect(() => {
+        const anchors = new WeakMap<Element, number>()
+        let intent: number | null = null
+        const onIntent = () => {
+            intent = performance.now()
+        }
+        const onKey = (event: KeyboardEvent) => {
+            if (
+                [
+                    "ArrowDown",
+                    "ArrowUp",
+                    "PageDown",
+                    "PageUp",
+                    "Home",
+                    "End",
+                    " ",
+                ].includes(event.key)
+            )
+                onIntent()
+        }
+        const onPointer = (event: PointerEvent) => {
+            if (event.buttons === 1) onIntent()
+        }
+        const onScroll = (event: Event) => {
+            const pane =
+                event.target instanceof Element
+                    ? event.target
+                    : document.scrollingElement
+            if (
+                !pane ||
+                pane.closest(
+                    "[role=dialog], [data-floating-layer]"
+                ) ||
+                pane.scrollHeight <= pane.clientHeight + 1
+            )
+                return
+            const top = pane.scrollTop
+            const userDriven =
+                intent !== null &&
+                performance.now() - intent < 2000
+            const anchor = anchors.get(pane) ?? 0
+            const next = minimizeDecision(
+                top,
+                anchor,
+                userDriven
+            )
+            if (next !== null) setMinimized(next)
+            if (next !== null || !userDriven)
+                anchors.set(pane, top)
+        }
+        document.addEventListener("touchmove", onIntent, {
+            passive: true,
+        })
+        document.addEventListener("wheel", onIntent, {
+            passive: true,
+        })
+        document.addEventListener("pointermove", onPointer, {
+            passive: true,
+        })
+        document.addEventListener("keydown", onKey)
+        document.addEventListener("scroll", onScroll, {
+            capture: true,
+            passive: true,
+        })
+        return () => {
+            document.removeEventListener("scroll", onScroll, {
+                capture: true,
+            })
+            document.removeEventListener(
+                "touchmove",
+                onIntent
+            )
+            document.removeEventListener("wheel", onIntent)
+            document.removeEventListener(
+                "pointermove",
+                onPointer
+            )
+            document.removeEventListener("keydown", onKey)
+        }
+    }, [])
+    return [minimized, setMinimized] as const
+}

package/src/hooks/use-visual-viewport.ts

@@ -0,0 +1,76 @@
+import { useLayoutEffect, useState } from "react"
+import { viewportMetrics } from "./viewport/viewport-metrics"
+import type { ViewportMetrics } from "./viewport/types"
+export type { ViewportMetrics } from "./viewport/types"
+
+/** Measures once per frame, including Android resize and Safari viewport panning. */
+export function useVisualViewport(): ViewportMetrics | null {
+    const [metrics, setMetrics] =
+        useState<ViewportMetrics | null>(null)
+    useLayoutEffect(() => {
+        const viewport = window.visualViewport
+        let baseline = {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        }
+        let frame = 0
+        const measure = () => {
+            cancelAnimationFrame(frame)
+            frame = requestAnimationFrame(() => {
+                const active = document.activeElement
+                const editing = !!active?.matches(
+                    "input:not([type=button]):not([type=checkbox]):not([type=radio]), textarea, [contenteditable=true]"
+                )
+                const width =
+                    viewport?.width ?? window.innerWidth
+                const height =
+                    viewport?.height ?? window.innerHeight
+                if (
+                    Math.abs(baseline.width - width) > 80 ||
+                    !editing
+                )
+                    baseline = {
+                        width,
+                        height: window.innerHeight,
+                    }
+                const next = viewportMetrics(
+                    {
+                        width,
+                        height,
+                        layoutHeight: window.innerHeight,
+                        top: viewport?.offsetTop ?? 0,
+                        left: viewport?.offsetLeft ?? 0,
+                        editing,
+                    },
+                    baseline
+                )
+                setMetrics((previous) =>
+                    previous &&
+                    Object.entries(next).every(
+                        ([key, value]) =>
+                            previous[
+                                key as keyof ViewportMetrics
+                            ] === value
+                    )
+                        ? previous
+                        : next
+                )
+            })
+        }
+        measure()
+        viewport?.addEventListener("resize", measure)
+        viewport?.addEventListener("scroll", measure)
+        window.addEventListener("resize", measure)
+        document.addEventListener("focusin", measure)
+        document.addEventListener("focusout", measure)
+        return () => {
+            cancelAnimationFrame(frame)
+            viewport?.removeEventListener("resize", measure)
+            viewport?.removeEventListener("scroll", measure)
+            window.removeEventListener("resize", measure)
+            document.removeEventListener("focusin", measure)
+            document.removeEventListener("focusout", measure)
+        }
+    }, [])
+    return metrics
+}

package/src/hooks/viewport/types.ts

@@ -0,0 +1,19 @@
+export type ViewportInput = {
+    width: number
+    height: number
+    top: number
+    left: number
+    layoutHeight: number
+    editing: boolean
+}
+export type ViewportMetrics = {
+    width: number
+    height: number
+    top: number
+    left: number
+    keyboardOpen: boolean
+}
+export type ViewportBaseline = {
+    width: number
+    height: number
+}

package/src/hooks/viewport/viewport-metrics.ts

@@ -0,0 +1,25 @@
+import type {
+    ViewportBaseline,
+    ViewportInput,
+    ViewportMetrics,
+} from "./types"
+
+/** A resized WebView and Safari's overlaid keyboard share one visible rectangle. */
+export function viewportMetrics(
+    input: ViewportInput,
+    baseline: ViewportBaseline
+): ViewportMetrics {
+    const visibleHeight = Math.min(
+        input.height,
+        Math.max(0, input.layoutHeight - input.top)
+    )
+    return {
+        width: input.width,
+        height: visibleHeight,
+        top: input.top,
+        left: input.left,
+        keyboardOpen:
+            input.editing &&
+            baseline.height - visibleHeight > 120,
+    }
+}

package/src/icons/icons.tsx

@@ -0,0 +1,298 @@
+import {
+    Add01Icon,
+    AiMagicIcon,
+    AlarmClockIcon,
+    Alert02Icon,
+    ArrowDown01Icon,
+    ArrowLeft01Icon,
+    ArrowRight01Icon,
+    ArrowUp01Icon,
+    BirthdayCakeIcon,
+    Book02Icon,
+    BookOpen01Icon,
+    BubbleChatIcon,
+    Calendar03Icon,
+    Camera01Icon,
+    Cancel01Icon,
+    CheckListIcon,
+    CheckmarkBadge01Icon,
+    CheckmarkCircle02Icon,
+    Clock01Icon,
+    Comment01Icon,
+    Copy01Icon,
+    Cursor01Icon,
+    Delete02Icon,
+    Download01Icon,
+    DragDropVerticalIcon,
+    Eraser01Icon,
+    FavouriteIcon,
+    Folder01Icon,
+    FileImportIcon,
+    FullScreenIcon,
+    Globe02Icon,
+    GoBackward15SecIcon,
+    GoForward30SecIcon,
+    CanvasIcon as HugeCanvasIcon,
+    HeadphonesIcon as HugeHeadphonesIcon,
+    HighlighterIcon as HugeHighlighterIcon,
+    PauseIcon as HugePauseIcon,
+    PlayIcon as HugePlayIcon,
+    RedoIcon as HugeRedoIcon,
+    RepeatIcon as HugeRepeatIcon,
+    StarIcon as HugeStarIcon,
+    ThumbsUpIcon as HugeThumbsUpIcon,
+    UndoIcon as HugeUndoIcon,
+    Image01Icon,
+    Invoice03Icon,
+    LayoutGridIcon,
+    LeftToRightListBulletIcon,
+    Link01Icon,
+    Location01Icon,
+    LockIcon as LockIconSvg,
+    Mic01Icon,
+    Moon02Icon,
+    MoreHorizontalIcon,
+    Mortarboard01Icon,
+    NextIcon,
+    NfcIcon,
+    Note01Icon,
+    NotebookIcon,
+    Notification03Icon,
+    PaintBrush02Icon,
+    PanelLeftIcon,
+    PencilEdit02Icon,
+    PencilIcon,
+    Pin02Icon,
+    PreviousIcon,
+    PrinterIcon,
+    QrCodeIcon,
+    QuillWrite02Icon,
+    ScanIcon,
+    Search01Icon,
+    SearchAddIcon,
+    Settings02Icon,
+    Share08Icon,
+    Store01Icon,
+    Task01Icon,
+    Tick02Icon,
+    Time04Icon,
+    Touch01Icon,
+    UnfoldMoreIcon,
+    UserAdd01Icon,
+    UserMultipleIcon,
+    ViewIcon,
+    ViewOffSlashIcon,
+    Wallet01Icon,
+} from "@hugeicons/core-free-icons"
+import {
+    HugeiconsIcon,
+    type IconSvgElement,
+} from "@hugeicons/react"
+import type { SVGProps } from "react"
+import { cn } from "../lib/class-names"
+
+export type IconProps = Omit<
+    SVGProps<SVGSVGElement>,
+    "ref"
+> & {
+    size?: number
+    strokeWidth?: number
+}
+
+/** Hugeicons (stroke rounded), sized and weighted for the Notables UI. */
+function icon(svg: IconSvgElement, displayName: string) {
+    const Icon = ({
+        size = 20,
+        strokeWidth = 1.6,
+        ...props
+    }: IconProps) => (
+        <HugeiconsIcon
+            icon={svg}
+            size={size}
+            strokeWidth={strokeWidth}
+            aria-hidden="true"
+            {...props}
+        />
+    )
+    Icon.displayName = displayName
+    return Icon
+}
+
+/** A filled variant for toggled states (hearted, starred). */
+function toggleIcon(
+    svg: IconSvgElement,
+    displayName: string
+) {
+    const Base = icon(svg, displayName)
+    const Icon = ({
+        filled = false,
+        className,
+        ...props
+    }: IconProps & { filled?: boolean }) => (
+        <Base
+            className={cn(
+                filled && "[&_path]:fill-current",
+                className
+            )}
+            {...props}
+        />
+    )
+    Icon.displayName = displayName
+    return Icon
+}
+
+export const NoteIcon = icon(Note01Icon, "NoteIcon")
+export const JournalIcon = icon(NotebookIcon, "JournalIcon")
+export const PenIcon = icon(PencilEdit02Icon, "PenIcon")
+export const StoryIcon = icon(QuillWrite02Icon, "StoryIcon")
+export const BookIcon = icon(BookOpen01Icon, "BookIcon")
+export const ArticleIcon = icon(Book02Icon, "ArticleIcon")
+export const CanvasIcon = icon(HugeCanvasIcon, "CanvasIcon")
+export const LessonIcon = icon(
+    Mortarboard01Icon,
+    "LessonIcon"
+)
+export const PlanIcon = icon(CheckListIcon, "PlanIcon")
+export const MicIcon = icon(Mic01Icon, "MicIcon")
+export const GlobeIcon = icon(Globe02Icon, "GlobeIcon")
+export const ChecklistIcon = icon(
+    CheckmarkCircle02Icon,
+    "ChecklistIcon"
+)
+export const DrawIcon = icon(PencilIcon, "DrawIcon")
+export const ShareIcon = icon(Share08Icon, "ShareIcon")
+export const SearchIcon = icon(Search01Icon, "SearchIcon")
+export const ChevronLeftIcon = icon(
+    ArrowLeft01Icon,
+    "ChevronLeftIcon"
+)
+export const ChevronRightIcon = icon(
+    ArrowRight01Icon,
+    "ChevronRightIcon"
+)
+export const ChevronUpIcon = icon(
+    ArrowUp01Icon,
+    "ChevronUpIcon"
+)
+export const ChevronDownIcon = icon(
+    ArrowDown01Icon,
+    "ChevronDownIcon"
+)
+export const CloseIcon = icon(Cancel01Icon, "CloseIcon")
+export const PlusIcon = icon(Add01Icon, "PlusIcon")
+export const LinkIcon = icon(Link01Icon, "LinkIcon")
+export const CommentIcon = icon(Comment01Icon, "CommentIcon")
+export const TrashIcon = icon(Delete02Icon, "TrashIcon")
+export const PinIcon = icon(Pin02Icon, "PinIcon")
+export const SidebarIcon = icon(PanelLeftIcon, "SidebarIcon")
+export const SettingsIcon = icon(
+    Settings02Icon,
+    "SettingsIcon"
+)
+export const DragHandleIcon = icon(
+    DragDropVerticalIcon,
+    "DragHandleIcon"
+)
+export const VisibleIcon = icon(ViewIcon, "VisibleIcon")
+export const HiddenIcon = icon(ViewOffSlashIcon, "HiddenIcon")
+export const CheckIcon = icon(Tick02Icon, "CheckIcon")
+export const InvoiceIcon = icon(Invoice03Icon, "InvoiceIcon")
+export const QrCodeGlyph = icon(QrCodeIcon, "QrCodeGlyph")
+export const WalletIcon = icon(Wallet01Icon, "WalletIcon")
+export const ScanCodeIcon = icon(ScanIcon, "ScanCodeIcon")
+export const VerifiedIcon = icon(
+    CheckmarkBadge01Icon,
+    "VerifiedIcon"
+)
+export const WarningIcon = icon(Alert02Icon, "WarningIcon")
+export const PrintIcon = icon(PrinterIcon, "PrintIcon")
+export const ImportIcon = icon(FileImportIcon, "ImportIcon")
+export const DownloadIcon = icon(
+    Download01Icon,
+    "DownloadIcon"
+)
+export const PlayIcon = icon(HugePlayIcon, "PlayIcon")
+export const PauseIcon = icon(HugePauseIcon, "PauseIcon")
+export const SkipBackIcon = icon(
+    GoBackward15SecIcon,
+    "SkipBackIcon"
+)
+export const SkipForwardIcon = icon(
+    GoForward30SecIcon,
+    "SkipForwardIcon"
+)
+export const PreviousTrackIcon = icon(
+    PreviousIcon,
+    "PreviousTrackIcon"
+)
+export const NextTrackIcon = icon(NextIcon, "NextTrackIcon")
+export const HeadphonesIcon = icon(
+    HugeHeadphonesIcon,
+    "HeadphonesIcon"
+)
+export const HighlighterIcon = icon(
+    HugeHighlighterIcon,
+    "HighlighterIcon"
+)
+export const ChaptersIcon = icon(
+    LeftToRightListBulletIcon,
+    "ChaptersIcon"
+)
+export const SleepIcon = icon(Moon02Icon, "SleepIcon")
+export const ExpandIcon = icon(FullScreenIcon, "ExpandIcon")
+export const SparkleIcon = icon(AiMagicIcon, "SparkleIcon")
+export const BellIcon = icon(Notification03Icon, "BellIcon")
+export const BusinessIcon = icon(Store01Icon, "BusinessIcon")
+export const CalendarIcon = icon(
+    Calendar03Icon,
+    "CalendarIcon"
+)
+export const BirthdayIcon = icon(
+    BirthdayCakeIcon,
+    "BirthdayIcon"
+)
+export const AlarmIcon = icon(AlarmClockIcon, "AlarmIcon")
+export const RepeatIcon = icon(HugeRepeatIcon, "RepeatIcon")
+export const UndoIcon = icon(HugeUndoIcon, "UndoIcon")
+export const RedoIcon = icon(HugeRedoIcon, "RedoIcon")
+export const PointerIcon = icon(Cursor01Icon, "PointerIcon")
+export const EraserIcon = icon(Eraser01Icon, "EraserIcon")
+export const TouchIcon = icon(Touch01Icon, "TouchIcon")
+export const BubbleIcon = icon(BubbleChatIcon, "BubbleIcon")
+export const BrushIcon = icon(PaintBrush02Icon, "BrushIcon")
+export const LayoutIcon = icon(LayoutGridIcon, "LayoutIcon")
+export const ZoomIcon = icon(SearchAddIcon, "ZoomIcon")
+export const SelectorIcon = icon(
+    UnfoldMoreIcon,
+    "SelectorIcon"
+)
+export const MoreIcon = icon(MoreHorizontalIcon, "MoreIcon")
+export const PeopleIcon = icon(UserMultipleIcon, "PeopleIcon")
+export const AddPersonIcon = icon(
+    UserAdd01Icon,
+    "AddPersonIcon"
+)
+export const ClockIcon = icon(Clock01Icon, "ClockIcon")
+export const LocationIcon = icon(
+    Location01Icon,
+    "LocationIcon"
+)
+export const TaskIcon = icon(Task01Icon, "TaskIcon")
+export const FolderIcon = icon(Folder01Icon, "FolderIcon")
+export const RecentIcon = icon(Time04Icon, "RecentIcon")
+export const ThumbsUpIcon = toggleIcon(
+    HugeThumbsUpIcon,
+    "ThumbsUpIcon"
+)
+export const HeartIcon = toggleIcon(
+    FavouriteIcon,
+    "HeartIcon"
+)
+export const StarIcon = toggleIcon(HugeStarIcon, "StarIcon")
+
+// Wallet: adding, copying and protecting cards.
+export const CameraIcon = icon(Camera01Icon, "CameraIcon")
+export const CopyIcon = icon(Copy01Icon, "CopyIcon")
+export const LockIcon = icon(LockIconSvg, "LockIcon")
+export const NfcReadIcon = icon(NfcIcon, "NfcReadIcon")
+export const PhotoIcon = icon(Image01Icon, "PhotoIcon")

package/src/index.ts

@@ -0,0 +1,78 @@
+export * from "./components/button/button"
+export * from "./components/text-field/text-field"
+export * from "./components/secure-field/secure-field"
+export * from "./components/text-editor/text-editor"
+export * from "./components/tab-view/tab-view"
+export * from "./components/profile-image/profile-image"
+export * from "./components/search-list/search-list"
+export * from "./components/table/table"
+export * from "./components/button/icon-button"
+export * from "./components/chip/chip"
+export * from "./components/context-menu/context-menu-host"
+export {
+    type ContextMenuItem,
+    type ContextMenuAlignX,
+    type ContextMenuAlignY,
+    type ContextMenuEdge,
+    closeContextMenu,
+    openContextMenu,
+    openFollowUpMenu,
+    openMenu,
+} from "./components/context-menu/context-menu-store"
+export * from "./components/context-menu/use-context-menu"
+export * from "./components/dialog/dialog-host"
+export {
+    type ConfirmOptions,
+    confirmDialog,
+} from "./components/dialog/dialog-store"
+export * from "./components/labeled-content/labeled-content"
+export * from "./components/picker/picker"
+export * from "./components/popover/popover"
+export * from "./components/search-field/search-field"
+export * from "./components/section/section"
+export * from "./components/segmented-control/segmented-control"
+export * from "./components/sheet/sheet"
+export * from "./components/sidebar/sidebar"
+export * from "./components/status-indicator/status-indicator"
+export * from "./components/swatch-picker/swatch-picker"
+export * from "./components/tab-bar/tab-bar"
+export {
+    type ToastOptions,
+    type ToastTone,
+    toast,
+} from "./components/toast/toast-store"
+export * from "./components/toast/toaster"
+export * from "./components/toggle/toggle"
+export * from "./components/tooltip/tooltip-host"
+export * from "./hooks/use-anchored-placement"
+export * from "./hooks/use-dismiss"
+export * from "./hooks/use-media-query"
+export * from "./hooks/use-minimize-on-scroll"
+export * from "./icons/icons"
+export * from "./lib/anchored-placement"
+export * from "./lib/class-names"
+export * from "./lib/haptics"
+export * from "./lib/screen-edges"
+export * from "./motion/transitions"
+export * from "./appearance"
+
+export * from "./components/date-picker/date-picker"
+export * from "./components/compact-date-picker/compact-date-picker"
+export * from "./components/compact-time-picker/compact-time-picker"
+
+export { Dialog } from "./components/dialog"
+export type {
+    DialogPresentation,
+    DialogTone,
+} from "./components/dialog/dialog"
+export type {
+    ContentViewHeadingLevel,
+    ContentViewVariant,
+} from "./components/content-view/content-view"
+export type { StatTileTone } from "./components/stat-tile/stat-tile"
+
+export * from "./hooks/use-visual-viewport"
+
+export { registerFloatingLayer } from "./lib/floating-layers"
+
+export * from "./hooks/use-minimize-on-scroll"

package/src/lib/anchored-placement.ts

@@ -0,0 +1,92 @@
+import { screenEdges } from "./screen-edges"
+
+export interface AnchoredPlacement {
+    left: number
+    width: number
+    top?: number
+    bottom?: number
+    /** Opens upward, so motion should grow from the bottom edge. */
+    above: boolean
+    /**
+     * Set when the chosen side has less room than the panel needs: the
+     * panel scrolls inside this height instead of crossing the edge.
+     */
+    maxHeight?: number
+}
+
+/** The measurements placement decides on, so the math stays testable. */
+export interface PlacementFrame {
+    anchor: { top: number; bottom: number; left: number }
+    viewport: { width: number; height: number }
+    edges: {
+        top: number
+        right: number
+        bottom: number
+        left: number
+    }
+}
+
+/**
+ * Places a panel of `width` under its anchor, or above it when there's
+ * less than `needed` height below and more room above, kept inside the
+ * screen's safe edges.
+ */
+export function placeInViewport(
+    { anchor, viewport, edges }: PlacementFrame,
+    width: number,
+    needed: number,
+    gap = 6
+): AnchoredPlacement {
+    const fitted = Math.min(
+        width,
+        viewport.width - edges.left - edges.right
+    )
+    const left = Math.min(
+        Math.max(edges.left, anchor.left),
+        viewport.width - fitted - edges.right
+    )
+    const roomBelow =
+        viewport.height - anchor.bottom - gap - edges.bottom
+    const roomAbove = anchor.top - gap - edges.top
+    const above = roomBelow < needed && roomAbove > roomBelow
+    const room = above ? roomAbove : roomBelow
+    const placement: AnchoredPlacement = {
+        left,
+        width: fitted,
+        above,
+        ...(above
+            ? { bottom: viewport.height - anchor.top + gap }
+            : { top: anchor.bottom + gap }),
+    }
+    if (room < needed) placement.maxHeight = room
+    return placement
+}
+
+/** `placeInViewport` from live DOM measurements. */
+export function placeAnchored(
+    anchor: HTMLElement,
+    width: number,
+    needed: number,
+    gap = 6
+): AnchoredPlacement {
+    const rect = anchor.getBoundingClientRect()
+    const viewport = window.visualViewport
+    return placeInViewport(
+        {
+            anchor: {
+                top: rect.top,
+                bottom: rect.bottom,
+                left: rect.left,
+            },
+            viewport: {
+                width: viewport?.width ?? window.innerWidth,
+                height:
+                    viewport?.height ?? window.innerHeight,
+            },
+            edges: screenEdges(),
+        },
+        width,
+        needed,
+        gap
+    )
+}