@passui/react 0.1.45 → 0.1.47

package/README.md

@@ -33,10 +33,10 @@ Import the styles once and each control from its own entry point:
 ```
 
 ```tsx
-import { Button } from "@passui/react/button"
+import { Button } from "@passui/react/button";
 
 export function SaveButton() {
-    return <Button variant="accent">Save</Button>
+	return <Button variant="accent">Save</Button>;
 }
 ```
 
@@ -47,31 +47,31 @@ for settings, quantity adjustments, task progress, and layout separation.
 They have individual subpath exports and named TypeScript props.
 
 ```tsx
-import { useState } from "react"
-import { Slider } from "@passui/react/slider"
-import { Stepper } from "@passui/react/stepper"
-import { ProgressView } from "@passui/react/progress-view"
-import { Divider } from "@passui/react/divider"
+import { useState } from "react";
+import { Slider } from "@passui/react/slider";
+import { Stepper } from "@passui/react/stepper";
+import { ProgressView } from "@passui/react/progress-view";
+import { Divider } from "@passui/react/divider";
 
 export function DownloadSettings() {
-    const [volume, setVolume] = useState(50)
-    const [copies, setCopies] = useState(1)
-
-    return (
-        <section className="flex flex-col gap-4">
-            <Slider label="Volume" value={volume} onChange={setVolume} />
-            <Stepper
-                label="Copies"
-                labels={{ decrement: "Fewer copies", increment: "More copies" }}
-                value={copies}
-                onChange={setCopies}
-                min={1}
-                max={10}
-            />
-            <Divider />
-            <ProgressView label="Downloading" value={42} max={100} />
-        </section>
-    )
+	const [volume, setVolume] = useState(50);
+	const [copies, setCopies] = useState(1);
+
+	return (
+		<section className="flex flex-col gap-4">
+			<Slider label="Volume" value={volume} onChange={setVolume} />
+			<Stepper
+				label="Copies"
+				labels={{ decrement: "Fewer copies", increment: "More copies" }}
+				value={copies}
+				onChange={setCopies}
+				min={1}
+				max={10}
+			/>
+			<Divider />
+			<ProgressView label="Downloading" value={42} max={100} />
+		</section>
+	);
 }
 ```
 
@@ -90,22 +90,29 @@ menus. `DisclosureGroup` provides a controlled, accessible expansion row on
 top of `InlineDisclosure`.
 
 ```tsx
-import { useState } from "react"
-import { Menu } from "@passui/react/menu"
-import { DisclosureGroup } from "@passui/react/disclosure-group"
+import { useState } from "react";
+import { Menu } from "@passui/react/menu";
+import { DisclosureGroup } from "@passui/react/disclosure-group";
 
 export function Preferences() {
-    const [advanced, setAdvanced] = useState(false)
-    return (
-        <section>
-            <Menu label="More options" items={[{ label: "Refresh", onSelect: () => {} }]}>
-                More
-            </Menu>
-            <DisclosureGroup label="Advanced" open={advanced} onOpenChange={setAdvanced}>
-                <p>Additional preferences</p>
-            </DisclosureGroup>
-        </section>
-    )
+	const [advanced, setAdvanced] = useState(false);
+	return (
+		<section>
+			<Menu
+				label="More options"
+				items={[{ label: "Refresh", onSelect: () => {} }]}
+			>
+				More
+			</Menu>
+			<DisclosureGroup
+				label="Advanced"
+				open={advanced}
+				onOpenChange={setAdvanced}
+			>
+				<p>Additional preferences</p>
+			</DisclosureGroup>
+		</section>
+	);
 }
 ```
 
@@ -114,17 +121,21 @@ export function Preferences() {
 On this development branch, React icons have a dedicated entry point:
 
 ```tsx
-import { IconButton, type IconButtonProps } from "@passui/react/icon-button"
-import { SettingsIcon } from "@passui/react/icons"
+import { IconButton, type IconButtonProps } from "@passui/react/icon-button";
+import { SettingsIcon } from "@passui/react/icons";
 
 const settingsAction: IconButtonProps = {
-    label: "Settings",
-    variant: "ghost",
-    size: "icon-sm",
-}
+	label: "Settings",
+	variant: "ghost",
+	size: "icon-sm",
+};
 
 export function SettingsButton() {
-    return <IconButton {...settingsAction}><SettingsIcon /></IconButton>
+	return (
+		<IconButton {...settingsAction}>
+			<SettingsIcon />
+		</IconButton>
+	);
 }
 ```
 

package/dist/types/src/components/accordion/accordion.d.ts

@@ -20,4 +20,4 @@ export interface AccordionProps {
     className?: string;
 }
 /** A single-open, collapsible accordion with labelled animated content regions. */
-export declare function Accordion({ items, value, onValueChange, size, className }: AccordionProps): import("react").JSX.Element;
+export declare function Accordion({ items, value, onValueChange, size, className, }: AccordionProps): import("react").JSX.Element;

package/dist/types/src/components/breadcrumb/breadcrumb.d.ts

@@ -16,4 +16,4 @@ export interface BreadcrumbProps {
     size?: BreadcrumbSize;
 }
 /** Ancestors stay links; the final item identifies the current page. */
-export declare function Breadcrumb({ label, items, className, renderLink, size }: BreadcrumbProps): import("react").JSX.Element;
+export declare function Breadcrumb({ label, items, className, renderLink, size, }: BreadcrumbProps): import("react").JSX.Element;

package/dist/types/src/components/inline-disclosure/inline-disclosure.d.ts

@@ -12,4 +12,4 @@ export interface InlineDisclosureProps {
  * instead of jumping. Motion is disabled when the user requests less motion.
  * The content unmounts after its exit animation completes.
  */
-export declare function InlineDisclosure({ open, children, className }: InlineDisclosureProps): import("react").JSX.Element;
+export declare function InlineDisclosure({ open, children, className, }: InlineDisclosureProps): import("react").JSX.Element;

package/dist/types/src/components/popover/anchored-surface.d.ts

@@ -8,6 +8,10 @@ interface AnchoredSurfaceProps extends HTMLAttributes<HTMLDivElement> {
     onClose: (restoreFocus: boolean) => void;
     contentClassName?: string;
 }
-/** Shared material and lifetime for portaled pickers; their content owns selection. */
+/**
+ * Shared material and lifetime for portaled
+ *  pickers; their content owns
+ * selection.
+ * */
 export declare const AnchoredSurface: import("react").ForwardRefExoticComponent<AnchoredSurfaceProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/types/src/components/popover/index.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Popover — a glass surface that springs open from its trigger.
+ *
+ * Compound API (the only API):
+ *
+ * ```tsx
+ * <Popover>
+ *   <Popover.Trigger render={(props) => <Button {...props}>Open</Button>} />
+ *   <Popover.Content origin="top-left" className="top-full left-0 mt-2 w-64 p-4">
+ *     …content…
+ *   </Popover.Content>
+ * </Popover>
+ * ```
+ *
+ * The `Popover.Trigger` clones its child (or uses a `render` prop) and wires
+ * up aria-haspopup, aria-expanded, aria-controls, click + keyboard toggling.
+ * The `Popover.Content` portals out of the authored layout, morphs its glass
+ * surface from the trigger's rect, and keeps itself inside the viewport as
+ * it resizes or scrolls. `origin` picks the corner it grows from; pass
+ * `placement="center"` for a modal center-screen variant.
+ *
+ * State is driven by a small pure machine (`popover.machine.ts`) that
+ * translates directly to a Rust enum — see the architecture plan.
+ */
+export { PopoverRoot as Root } from "./popover-root";
+export { PopoverTrigger as Trigger, type PopoverTriggerRenderProps, } from "./popover-trigger";
+export { PopoverContent as Content, type PopoverOrigin, } from "./popover-content";
+import { PopoverRoot } from "./popover-root";
+import { PopoverTrigger } from "./popover-trigger";
+import { PopoverContent } from "./popover-content";
+/**
+ * Compound Popover. Use as `<Popover>` with `.Trigger` and `.Content` parts,
+ * or import `Root` / `Trigger` / `Content` directly from the barrel.
+ */
+export declare const Popover: typeof PopoverRoot & {
+    Trigger: typeof PopoverTrigger;
+    Content: typeof PopoverContent;
+};
+export type { PopoverRootProps } from "./popover-root";
+export type { PopoverTriggerProps } from "./popover-trigger";
+export type { PopoverContentProps } from "./popover-content";

package/dist/types/src/components/popover/popover-content.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+export type PopoverOrigin = "top-left" | "top-right";
+export interface PopoverContentProps {
+    children: ReactNode;
+    /** Extra classes for the panel (sizing, padding, max-height). */
+    className?: string;
+    /** Accessible name (used when there is no labelledBy). */
+    label?: string;
+    /** ID of a visible heading inside the content. */
+    labelledBy?: string;
+    /** Allow tapping outside to close. Escape always closes. */
+    dismissOnOutsidePress?: boolean;
+    /**
+     * Where the content rests once expanded:
+     * - "anchor" positions relative to the trigger (default)
+     * - "center" floats in the middle of the viewport (modal)
+     */
+    placement?: "anchor" | "center";
+    /**
+     * Which corner the popover grows from when placement="anchor".
+     * top-left: panel's left edge aligns to the trigger's left.
+     * top-right: panel's right edge aligns to the trigger's right.
+     * @default "top-left"
+     */
+    origin?: PopoverOrigin;
+    /**
+     * Gap between the trigger and the panel, in pixels.
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * ARIA role for the panel. Use "menu" for action menus, "dialog"
+     * (the default) for free-form content, "tooltip" for tips.
+     * @default "dialog"
+     */
+    role?: "dialog" | "menu" | "tooltip";
+}
+export declare function PopoverContent({ children, className, label, labelledBy, dismissOnOutsidePress, placement, origin, gap, role, }: PopoverContentProps): import("react").JSX.Element;

package/dist/types/src/components/popover/popover-root.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode, type RefObject } from "react";
+import { type PopoverContextValue } from "../../machines/popover.machine";
+export declare function usePopover(): PopoverContextValue;
+export interface PopoverRootProps {
+    children: ReactNode;
+    /**
+     * Start open (uncontrolled) or set the initial state.
+     * Ignored when `open` is provided.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Controlled open state. When provided, the popover is driven by this
+     * prop: setting it to true opens, false closes. The internal machine
+     * still runs the open/close transitions so the morph can play.
+     */
+    open?: boolean;
+    /** Called when the popover finishes opening or closing. */
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function PopoverRoot({ children, defaultOpen, open, onOpenChange, }: PopoverRootProps): import("react").JSX.Element;
+export type { PopoverContextValue };
+export type { RefObject };

package/dist/types/src/components/popover/popover-trigger.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from "react";
+export type PopoverTriggerRenderProps = {
+    ref: (node: HTMLElement | null) => void;
+    "aria-haspopup": "dialog";
+    "aria-expanded": boolean;
+    "aria-controls": string | undefined;
+    onClick: () => void;
+    onKeyDown: (event: React.KeyboardEvent) => void;
+};
+export interface PopoverTriggerProps {
+    /** The trigger content when using render prop. */
+    children?: ReactNode;
+    /**
+     * Render prop: receives the trigger props (ref, aria, onClick) and
+     * returns the trigger element. This prevents ref-passing conflicts
+     * when multiple triggers exist — borrowed from Base UI.
+     *
+     * If you pass a single element as children instead, it will be
+     * cloned with the trigger props merged in.
+     */
+    render?: (props: PopoverTriggerRenderProps) => ReactNode;
+}
+export declare function PopoverTrigger({ children, render }: PopoverTriggerProps): ReactNode;

package/dist/types/src/components/stepper/rolling-digit.d.ts

@@ -5,7 +5,7 @@ export declare function advanceDigit(position: number, velocity: number, target:
     velocity: number;
 };
 /** Three recycled cells keep the strip continuous through either side of zero. */
-export declare function RollingDigit({ count, place }: {
+export declare function RollingDigit({ count, place, }: {
     count: number;
     place: number;
 }): import("react").JSX.Element;

package/dist/types/src/components/table/table.d.ts

@@ -10,4 +10,4 @@ declare function TableRow({ className, ...props }: React.ComponentProps<"tr">):
 declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
 declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
 declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, };

package/dist/types/src/components/view-controller/view-controller.d.ts

@@ -13,9 +13,9 @@ declare const titleSizes: {
     readonly default: "text-large-title leading-large-title";
     readonly compact: "text-title leading-title font-semibold tracking-tight";
 };
-export declare function ViewController({ heading, className, children }: ViewControllerProps): import("react").JSX.Element;
+export declare function ViewController({ heading, className, children, }: ViewControllerProps): import("react").JSX.Element;
 export declare namespace ViewController {
     export { Heading };
 }
-declare function Heading({ title, description, action, size }: HeadingProps): import("react").JSX.Element;
+declare function Heading({ title, description, action, size, }: HeadingProps): import("react").JSX.Element;
 export {};

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

@@ -16,7 +16,7 @@ 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/popover";
 export * from "./components/search-field/search-field";
 export * from "./components/section/section";
 export * from "./components/inline-disclosure/inline-disclosure";

package/dist/types/src/machines/popover.machine.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Popover state machine — pure function, no React, no DOM.
+ *
+ * Translates directly to a Rust enum with match arms.
+ *
+ * States:
+ *   closed   → nothing visible
+ *   opening  → surface morphing from trigger to content
+ *   open     → content fully visible
+ *   closing  → surface morphing back to trigger
+ *
+ * The OPENED/CLOSED events are fired by onAnimationComplete,
+ * so the machine stays in "opening"/"closing" until the animation
+ * actually finishes — enabling interruptibility (close during open).
+ */
+export type PopoverState = "closed" | "opening" | "open" | "closing";
+export type PopoverEvent = "OPEN" | "OPENED" | "CLOSE" | "CLOSED" | "TOGGLE";
+export declare function popoverMachine(state: PopoverState, event: PopoverEvent): PopoverState;
+export type PopoverContextValue = {
+    state: PopoverState;
+    send: (event: PopoverEvent) => void;
+    /** The trigger element — set by PopoverTrigger, read by PopoverContent for positioning. */
+    triggerRef: React.RefObject<HTMLElement | null>;
+    /** Unique ID for aria-controls + layoutId morphing. */
+    contentId: string;
+    /** Shared layoutId for motion's matched-geometry transition. */
+    surfaceId: string;
+    /** Whether the popover is open or transitioning (not closed). */
+    isPresent: boolean;
+};