@passui/react 0.1.16 → 0.1.19

package/dist/types/src/lib/anchored-placement.d.ts

@@ -0,0 +1,39 @@
+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 declare function placeInViewport({ anchor, viewport, edges }: PlacementFrame, width: number, needed: number, gap?: number): AnchoredPlacement;
+/** `placeInViewport` from live DOM measurements. */
+export declare function placeAnchored(anchor: HTMLElement, width: number, needed: number, gap?: number): AnchoredPlacement;

package/dist/types/src/lib/class-names.d.ts

@@ -0,0 +1,2 @@
+import type { ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/types/src/lib/clipboard.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copies text after a user action. Returns true only after the browser confirms
+ * the write. Returns false when unavailable or denied, so the app can offer
+ * manual copying. This helper never reads the clipboard or adds feedback.
+ */
+export declare function copyText(text: string): Promise<boolean>;

package/dist/types/src/lib/date.d.ts

@@ -0,0 +1,50 @@
+declare const PRESETS: {
+    /** Aug 30, 2026 */
+    PP: {
+        dateStyle: "medium";
+    };
+    /** August 30, 2026 */
+    PPP: {
+        dateStyle: "long";
+    };
+    /** Aug 30, 2026, 2:15 PM */
+    PPp: {
+        dateStyle: "medium";
+        timeStyle: "short";
+    };
+    /** August 30, 2026 at 2:15 PM */
+    PPPp: {
+        dateStyle: "long";
+        timeStyle: "short";
+    };
+    /** Aug 30 */
+    "MMM d": {
+        month: "short";
+        day: "numeric";
+    };
+    /** Aug 30, 14:15 */
+    "MMM d, HH:mm": {
+        month: "short";
+        day: "numeric";
+        hour: "2-digit";
+        minute: "2-digit";
+        hourCycle: "h23";
+    };
+    /** Aug 30, 14:15:09 */
+    "MMM d, HH:mm:ss": {
+        month: "short";
+        day: "numeric";
+        hour: "2-digit";
+        minute: "2-digit";
+        second: "2-digit";
+        hourCycle: "h23";
+    };
+};
+export type DatePreset = keyof typeof PRESETS;
+/** A stored UTC timestamp shown as its UTC wall-clock time, whatever the viewer's timezone. */
+export declare function formatUtc(date: Date | string | number, preset: DatePreset): string;
+/** The viewer's local time of day, like 2:15 PM. */
+export declare function formatTime(date: Date | string | number): string;
+/** "5 minutes ago", "in 30 days": the largest whole unit that fits. */
+export declare function fromNow(date: Date | string | number): string;
+export {};

package/dist/types/src/lib/floating-layers.d.ts

@@ -0,0 +1,8 @@
+export declare const FLOATING_LAYER = "data-floating-layer";
+/** Portals retain the ownership of the control that opened them. */
+export declare function registerFloatingLayer(layer: Element, anchor: Element): () => void;
+export declare function ownsFloatingLayer(container: Element, target: Element | null): boolean;
+/** An element belongs to a surface either directly or through a portaled child layer. */
+export declare function belongsToFloatingSurface(surface: Element, target: Element | null): boolean;
+/** Whether a pointer target is outside both an anchored surface and its nested portals. */
+export declare function isOutsideFloatingSurface(surface: Element | null, anchor: Element, target: EventTarget | null): boolean;

package/dist/types/src/lib/haptics.d.ts

@@ -0,0 +1,8 @@
+/** The feedback kinds the systems share, from a selection tick to an error. */
+export type HapticKind = "selection" | "light" | "medium" | "heavy" | "success" | "warning" | "error";
+/**
+ * Components only ask for feedback; the app decides how it plays on this
+ * device (system haptics, a vibration, or nothing) and whether it's on.
+ */
+export declare function setHapticPlayer(next: (kind: HapticKind) => void): void;
+export declare function haptic(kind: HapticKind): void;

package/dist/types/src/lib/language.d.ts

@@ -0,0 +1,4 @@
+/** A language's name in itself, capitalized: "Français", "中文". */
+export declare function getNativeLanguageName(tag: string): string;
+/** A language's name as read in `displayLocale`: "French" in English. */
+export declare function getLocalizedLanguageName(tag: string, displayLocale: string): string;

package/dist/types/src/lib/range-value.d.ts

@@ -0,0 +1,4 @@
+/** Keep controlled numeric inputs within finite bounds without floating-point drift. */
+export declare function clampRange(value: number, min: number, max: number): number;
+/** The nearest reachable step from min, optionally allowing an exact maximum. */
+export declare function stepRange(value: number, direction: -1 | 1, min: number, max: number, step: number): number;

package/dist/types/src/lib/screen-edges.d.ts

@@ -0,0 +1,12 @@
+export interface ScreenEdges {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/**
+ * How far menus and popovers keep from each side of the screen: clear of
+ * the status bar, gesture bar and notch, and on touch screens a little
+ * further from the glass, as the systems' own menus are.
+ */
+export declare function screenEdges(): ScreenEdges;

package/dist/types/src/lib/shapes.d.ts

@@ -0,0 +1,17 @@
+/** Material 3 expressive outlines: a circle and the scalloped "cookie", "clover", and "sunny" shapes. */
+export declare const shapes: readonly ["circle", "cookie4", "cookie6", "cookie9", "clover", "sunny", 
+/** Reserved for the Pherus mark itself, so it never matches a project's icon. */
+"cookie12"];
+export type Shape = (typeof shapes)[number];
+/**
+ * An SVG path for a Material 3 expressive shape centred on (cx, cy): a circle
+ * whose radius rides a cosine wave, which gives the soft scalloped "cookie",
+ * "clover", and "sunny" outlines. The wave is normalised so every shape fills
+ * the same `r`, keeping icons optically the same size.
+ */
+export declare function shapePath(shape: Shape, cx: number, cy: number, r: number): string;
+/**
+ * The app wide `dualTone` rule dims every svg path for two tone icons; a
+ * drawn shape or illustration opts out with this so its colors stay true.
+ */
+export declare const plainSvg = "cursor-[inherit] [&_path]:opacity-100 [&_path]:transform-none";

package/dist/types/src/motion/transitions.d.ts

@@ -0,0 +1,97 @@
+/** Design-token springs as motion/react transitions. */
+export declare const spring: {
+    readonly smooth: {
+        readonly damping: 26;
+        readonly stiffness: 240;
+        readonly mass: 1;
+        readonly type: "spring";
+    };
+    readonly snappy: {
+        readonly damping: 22;
+        readonly stiffness: 380;
+        readonly mass: 1;
+        readonly type: "spring";
+    };
+    readonly bouncy: {
+        readonly damping: 14;
+        readonly stiffness: 220;
+        readonly mass: 1;
+        readonly type: "spring";
+    };
+};
+export type FloatingPanelSide = "above" | "below";
+/** Anchored panels settle toward their source without shrinking their text. */
+export declare function floatingPanelMotion(side?: FloatingPanelSide): {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly scale: 1;
+        readonly y: number;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly scale: 1;
+        readonly y: 0;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly scale: 1;
+        readonly y: number;
+    };
+    readonly transition: {
+        readonly damping: 26;
+        readonly stiffness: 240;
+        readonly mass: 1;
+        readonly type: "spring";
+        readonly opacity: {
+            readonly duration: 0.16;
+        };
+    };
+};
+/** Default below-anchor presentation, retained for existing consumers. */
+export declare const popoverMotion: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly scale: 1;
+        readonly y: number;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly scale: 1;
+        readonly y: 0;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly scale: 1;
+        readonly y: number;
+    };
+    readonly transition: {
+        readonly damping: 26;
+        readonly stiffness: 240;
+        readonly mass: 1;
+        readonly type: "spring";
+        readonly opacity: {
+            readonly duration: 0.16;
+        };
+    };
+};
+/** Floating bars that rise from the bottom edge. */
+export declare const riseMotion: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly y: 32;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly y: 0;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly y: 24;
+    };
+    readonly transition: {
+        readonly damping: 26;
+        readonly stiffness: 240;
+        readonly mass: 1;
+        readonly type: "spring";
+    };
+};

package/dist/types/src/tokens.d.ts

@@ -0,0 +1 @@
+export * from "@passui/tokens";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@passui/react",
-    "version": "0.1.16",
+    "version": "0.1.19",
     "description": "Passui: native React controls, design tokens, presentation and appearance.",
     "license": "MIT",
     "repository": {
@@ -16,57 +16,208 @@
     "files": [
         "src",
         "README.md",
-        "LICENSE"
+        "LICENSE",
+        "dist/types"
     ],
     "type": "module",
     "exports": {
-        "./table": "./src/components/table/table.tsx",
-        "./search-list": "./src/components/search-list/search-list.tsx",
-        "./profile-image": "./src/components/profile-image/profile-image.tsx",
-        "./popover": "./src/components/popover/popover.tsx",
-        "./sheet": "./src/components/sheet/sheet.tsx",
-        "./use-dismiss": "./src/hooks/use-dismiss.ts",
-        "./toast": "./src/components/toast/toast-store.ts",
-        "./toaster": "./src/components/toast/toaster.tsx",
-        "./tab-view": "./src/components/tab-view/tab-view.tsx",
-        "./sidebar": "./src/components/sidebar/sidebar.tsx",
-        "./icon-button": "./src/components/button/icon-button.tsx",
-        "./secure-field": "./src/components/secure-field/secure-field.tsx",
-        "./text-field": "./src/components/text-field/text-field.tsx",
-        "./text-editor": "./src/components/text-editor/text-editor.tsx",
-        "./button": "./src/components/button/button.tsx",
-        "./toggle": "./src/components/toggle/toggle.tsx",
-        "./cn": "./src/lib/class-names.ts",
-        ".": "./src/index.ts",
+        "./icons": {
+            "types": "./dist/types/src/icons/icons.d.ts",
+            "default": "./src/icons/icons.tsx"
+        },
+        "./clipboard": {
+            "types": "./dist/types/src/lib/clipboard.d.ts",
+            "default": "./src/lib/clipboard.ts"
+        },
+        "./search-field": {
+            "types": "./dist/types/src/components/search-field/search-field.d.ts",
+            "default": "./src/components/search-field/search-field.tsx"
+        },
+        "./picker": {
+            "types": "./dist/types/src/components/picker/picker.d.ts",
+            "default": "./src/components/picker/picker.tsx"
+        },
+        "./segmented-control": {
+            "types": "./dist/types/src/components/segmented-control/segmented-control.d.ts",
+            "default": "./src/components/segmented-control/segmented-control.tsx"
+        },
+        "./table": {
+            "types": "./dist/types/src/components/table/table.d.ts",
+            "default": "./src/components/table/table.tsx"
+        },
+        "./search-list": {
+            "types": "./dist/types/src/components/search-list/search-list.d.ts",
+            "default": "./src/components/search-list/search-list.tsx"
+        },
+        "./profile-image": {
+            "types": "./dist/types/src/components/profile-image/profile-image.d.ts",
+            "default": "./src/components/profile-image/profile-image.tsx"
+        },
+        "./popover": {
+            "types": "./dist/types/src/components/popover/popover.d.ts",
+            "default": "./src/components/popover/popover.tsx"
+        },
+        "./sheet": {
+            "types": "./dist/types/src/components/sheet/sheet.d.ts",
+            "default": "./src/components/sheet/sheet.tsx"
+        },
+        "./use-dismiss": {
+            "types": "./dist/types/src/hooks/use-dismiss.d.ts",
+            "default": "./src/hooks/use-dismiss.ts"
+        },
+        "./toast": {
+            "types": "./dist/types/src/components/toast/toast-store.d.ts",
+            "default": "./src/components/toast/toast-store.ts"
+        },
+        "./toaster": {
+            "types": "./dist/types/src/components/toast/toaster.d.ts",
+            "default": "./src/components/toast/toaster.tsx"
+        },
+        "./tab-view": {
+            "types": "./dist/types/src/components/tab-view/tab-view.d.ts",
+            "default": "./src/components/tab-view/tab-view.tsx"
+        },
+        "./sidebar": {
+            "types": "./dist/types/src/components/sidebar/sidebar.d.ts",
+            "default": "./src/components/sidebar/sidebar.tsx"
+        },
+        "./icon-button": {
+            "types": "./dist/types/src/components/button/icon-button.d.ts",
+            "default": "./src/components/button/icon-button.tsx"
+        },
+        "./secure-field": {
+            "types": "./dist/types/src/components/secure-field/secure-field.d.ts",
+            "default": "./src/components/secure-field/secure-field.tsx"
+        },
+        "./text-field": {
+            "types": "./dist/types/src/components/text-field/text-field.d.ts",
+            "default": "./src/components/text-field/text-field.tsx"
+        },
+        "./text-editor": {
+            "types": "./dist/types/src/components/text-editor/text-editor.d.ts",
+            "default": "./src/components/text-editor/text-editor.tsx"
+        },
+        "./button": {
+            "types": "./dist/types/src/components/button/button.d.ts",
+            "default": "./src/components/button/button.tsx"
+        },
+        "./toggle": {
+            "types": "./dist/types/src/components/toggle/toggle.d.ts",
+            "default": "./src/components/toggle/toggle.tsx"
+        },
+        "./menu": {
+            "types": "./dist/types/src/components/menu/menu.d.ts",
+            "default": "./src/components/menu/menu.tsx"
+        },
+        "./disclosure-group": {
+            "types": "./dist/types/src/components/disclosure-group/disclosure-group.d.ts",
+            "default": "./src/components/disclosure-group/disclosure-group.tsx"
+        },
+        "./slider": {
+            "types": "./dist/types/src/components/slider/slider.d.ts",
+            "default": "./src/components/slider/slider.tsx"
+        },
+        "./stepper": {
+            "types": "./dist/types/src/components/stepper/stepper.d.ts",
+            "default": "./src/components/stepper/stepper.tsx"
+        },
+        "./progress-view": {
+            "types": "./dist/types/src/components/progress-view/progress-view.d.ts",
+            "default": "./src/components/progress-view/progress-view.tsx"
+        },
+        "./divider": {
+            "types": "./dist/types/src/components/divider/divider.d.ts",
+            "default": "./src/components/divider/divider.tsx"
+        },
+        "./cn": {
+            "types": "./dist/types/src/lib/class-names.d.ts",
+            "default": "./src/lib/class-names.ts"
+        },
+        ".": {
+            "types": "./dist/types/src/index.d.ts",
+            "default": "./src/index.ts"
+        },
         "./base.css": "./src/styles/base.css",
         "./utilities.css": "./src/styles/utilities.css",
         "./theme.css": "./src/styles/theme.css",
-        "./tokens": "./src/tokens.ts",
-        "./date-picker": "./src/components/date-picker/date-picker.tsx",
-        "./compact-date-picker": "./src/components/compact-date-picker/compact-date-picker.tsx",
-        "./compact-time-picker": "./src/components/compact-time-picker/compact-time-picker.tsx",
-        "./view-controller": "./src/components/view-controller/index.ts",
-        "./content-view": "./src/components/content-view/index.ts",
-        "./ambient": "./src/components/ambient/index.ts",
-        "./stat-tile": "./src/components/stat-tile/index.ts",
-        "./conversation": "./src/components/conversation/index.ts",
-        "./locale-switcher": "./src/components/locale-switcher/index.ts",
-        "./date": "./src/lib/date.ts",
-        "./language": "./src/lib/language.ts",
-        "./shapes": "./src/lib/shapes.ts",
-        "./appearance": "./src/appearance/index.ts",
-        "./use-media-query": "./src/hooks/use-media-query.ts",
+        "./tokens": {
+            "types": "./dist/types/src/tokens.d.ts",
+            "default": "./src/tokens.ts"
+        },
+        "./date-picker": {
+            "types": "./dist/types/src/components/date-picker/date-picker.d.ts",
+            "default": "./src/components/date-picker/date-picker.tsx"
+        },
+        "./compact-date-picker": {
+            "types": "./dist/types/src/components/compact-date-picker/compact-date-picker.d.ts",
+            "default": "./src/components/compact-date-picker/compact-date-picker.tsx"
+        },
+        "./compact-time-picker": {
+            "types": "./dist/types/src/components/compact-time-picker/compact-time-picker.d.ts",
+            "default": "./src/components/compact-time-picker/compact-time-picker.tsx"
+        },
+        "./view-controller": {
+            "types": "./dist/types/src/components/view-controller/index.d.ts",
+            "default": "./src/components/view-controller/index.ts"
+        },
+        "./content-view": {
+            "types": "./dist/types/src/components/content-view/index.d.ts",
+            "default": "./src/components/content-view/index.ts"
+        },
+        "./ambient": {
+            "types": "./dist/types/src/components/ambient/index.d.ts",
+            "default": "./src/components/ambient/index.ts"
+        },
+        "./stat-tile": {
+            "types": "./dist/types/src/components/stat-tile/index.d.ts",
+            "default": "./src/components/stat-tile/index.ts"
+        },
+        "./conversation": {
+            "types": "./dist/types/src/components/conversation/index.d.ts",
+            "default": "./src/components/conversation/index.ts"
+        },
+        "./locale-switcher": {
+            "types": "./dist/types/src/components/locale-switcher/index.d.ts",
+            "default": "./src/components/locale-switcher/index.ts"
+        },
+        "./date": {
+            "types": "./dist/types/src/lib/date.d.ts",
+            "default": "./src/lib/date.ts"
+        },
+        "./language": {
+            "types": "./dist/types/src/lib/language.d.ts",
+            "default": "./src/lib/language.ts"
+        },
+        "./shapes": {
+            "types": "./dist/types/src/lib/shapes.d.ts",
+            "default": "./src/lib/shapes.ts"
+        },
+        "./appearance": {
+            "types": "./dist/types/src/appearance/index.d.ts",
+            "default": "./src/appearance/index.ts"
+        },
+        "./use-media-query": {
+            "types": "./dist/types/src/hooks/use-media-query.d.ts",
+            "default": "./src/hooks/use-media-query.ts"
+        },
         "./typeset.css": "./src/styles/typeset.css",
         "./styles.css": "./src/styles/styles.css",
-        "./dialog": "./src/components/dialog/index.ts",
-        "./docs": "./src/docs/index.ts"
+        "./dialog": {
+            "types": "./dist/types/src/components/dialog/index.d.ts",
+            "default": "./src/components/dialog/index.ts"
+        },
+        "./inline-disclosure": {
+            "types": "./dist/types/src/components/inline-disclosure/inline-disclosure.d.ts",
+            "default": "./src/components/inline-disclosure/inline-disclosure.tsx"
+        }
     },
     "scripts": {
         "generate": "bun run --cwd ../tokens generate",
         "test": "vitest run",
         "typecheck": "tsc -p tsconfig.json",
         "publish:check": "bun pm pack --dry-run",
-        "build": "bun run generate"
+        "build": "bun run generate && tsc -p tsconfig.build.json",
+        "prepack": "bun run build"
     },
     "packageManager": "bun@1.4.2",
     "peerDependencies": {
@@ -92,6 +243,7 @@
         "clsx": "^2.1.1",
         "tailwind-merge": "^3.7.0",
         "tw-animate-css": "^1.4.0",
-        "@passui/tokens": "^0.1.0"
-    }
+        "@passui/tokens": "^0.1.1"
+    },
+    "types": "./dist/types/src/index.d.ts"
 }

package/src/appearance/platform.tsx

@@ -1,18 +1,6 @@
-import {
-    createContext,
-    useContext,
-    useEffect,
-    useState,
-    type PropsWithChildren,
-} from "react"
+import { createContext, useContext, useEffect, useState, type PropsWithChildren } from "react"
 
-export type PlatformOS =
-    | "ios"
-    | "android"
-    | "macos"
-    | "windows"
-    | "linux"
-    | "unknown"
+export type PlatformOS = "ios" | "android" | "macos" | "windows" | "linux" | "unknown"
 
 const PlatformContext = createContext<PlatformOS>("unknown")
 
@@ -21,12 +9,7 @@ export function detectPlatform(
     platform: string,
     maxTouchPoints: number
 ): PlatformOS {
-    return resolvePlatform(
-        null,
-        userAgent,
-        platform,
-        maxTouchPoints
-    )
+    return resolvePlatform(null, userAgent, platform, maxTouchPoints)
 }
 
 export function resolvePlatform(
@@ -48,8 +31,7 @@ export function resolvePlatform(
 
     if (/android/i.test(userAgent)) return "android"
     if (/iPhone|iPad|iPod/i.test(userAgent)) return "ios"
-    if (platform === "MacIntel" && maxTouchPoints > 1)
-        return "ios"
+    if (platform === "MacIntel" && maxTouchPoints > 1) return "ios"
     if (/Mac/i.test(platform)) return "macos"
     if (/Win/i.test(platform)) return "windows"
     if (/Linux/i.test(platform)) return "linux"
@@ -65,20 +47,11 @@ function initializePlatform(
 ) {
     root.setAttribute(
         "data-os",
-        resolve(
-            root.getAttribute("data-os"),
-            userAgent,
-            platform,
-            maxTouchPoints
-        )
+        resolve(root.getAttribute("data-os"), userAgent, platform, maxTouchPoints)
     )
 }
 
-export function PlatformScript({
-    nonce,
-}: {
-    nonce?: string
-}) {
+export function PlatformScript({ nonce }: { nonce?: string }) {
     return (
         <script
             // Run the library's platform bootstrap before first paint.
@@ -91,11 +64,8 @@ export function PlatformScript({
     )
 }
 
-export function PlatformProvider({
-    children,
-}: PropsWithChildren) {
-    const [platform, setPlatform] =
-        useState<PlatformOS>("unknown")
+export function PlatformProvider({ children }: PropsWithChildren) {
+    const [platform, setPlatform] = useState<PlatformOS>("unknown")
 
     useEffect(() => {
         const resolved = resolvePlatform(
@@ -104,18 +74,11 @@ export function PlatformProvider({
             navigator.platform,
             navigator.maxTouchPoints
         )
-        document.documentElement.setAttribute(
-            "data-os",
-            resolved
-        )
+        document.documentElement.setAttribute("data-os", resolved)
         setPlatform(resolved)
     }, [])
 
-    return (
-        <PlatformContext.Provider value={platform}>
-            {children}
-        </PlatformContext.Provider>
-    )
+    return <PlatformContext.Provider value={platform}>{children}</PlatformContext.Provider>
 }
 
 export function usePlatform() {