@passui/react 0.1.16 → 0.1.19

package/README.md

@@ -40,6 +40,105 @@ export function SaveButton() {
 }
 ```
 
+### Numeric controls and separators
+
+`Slider`, `Stepper`, `ProgressView`, and `Divider` provide native foundations
+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"
+
+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>
+    )
+}
+```
+
+Both numeric controls are controlled: the parent owns their value. Stepper
+supports fractional steps and disables actions at its bounds. Slider keeps
+native pointer and keyboard input. ProgressView omits `value` for indeterminate
+progress and honors reduced motion. Divider is decorative by default; pass
+`decorative={false}` to expose a semantic separator.
+
+### Menus and disclosure groups
+
+`Menu` turns the existing `ContextMenuHost` into a declarative button. Mount
+the host once at the app root, then supply menu items wherever an action
+button belongs. Its placement and keyboard behavior are shared with context
+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"
+
+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>
+    )
+}
+```
+
+### Icons and prop types
+
+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"
+
+const settingsAction: IconButtonProps = {
+    label: "Settings",
+    variant: "ghost",
+    size: "icon-sm",
+}
+
+export function SettingsButton() {
+    return <IconButton {...settingsAction}><SettingsIcon /></IconButton>
+}
+```
+
+Hover a prop for its choices and defaults. Named props types are exported
+beside their controls. For a fixed set of picker values, keep your state
+as that literal union (for example, `useState<"personal" | "team">("personal")`)
+so selection callbacks retain the same choices. Existing root icon imports
+continue to work. These additions have not been published yet.
+
+Clipboard actions can use `copyText` from `@passui/react/clipboard`. It
+returns `true` only after a successful write and `false` if unavailable or
+denied. Call it from a user action and show success only when it returns
+`true`; offer manual copying otherwise. It adds no sound or haptic feedback.
+
 See [Installation](https://passui.pherus.org/docs/installation) for the
 root setup, and [Skills](https://passui.pherus.org/docs/skills) to give AI
 agents Passui's rules.
@@ -57,7 +156,9 @@ bun run test
 bun run publish:check
 ```
 
-The package exports TypeScript and TSX source. Your app's bundler must
+The package exports explicit declaration types for editors and TypeScript/TSX
+source for bundlers. `bun run build` generates the declarations before packing.
+Your app's bundler must
 process those files and its stylesheet through Tailwind CSS 4.
 
 The GitHub Actions `publish.yml` workflow publishes from `main` using

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

@@ -0,0 +1,2 @@
+export * from "./platform";
+export * from "./theme";

package/dist/types/src/appearance/platform.d.ts

@@ -0,0 +1,9 @@
+import { type PropsWithChildren } from "react";
+export type PlatformOS = "ios" | "android" | "macos" | "windows" | "linux" | "unknown";
+export declare function detectPlatform(userAgent: string, platform: string, maxTouchPoints: number): PlatformOS;
+export declare function resolvePlatform(override: string | null, userAgent: string, platform: string, maxTouchPoints: number): PlatformOS;
+export declare function PlatformScript({ nonce }: {
+    nonce?: string;
+}): import("react").JSX.Element;
+export declare function PlatformProvider({ children }: PropsWithChildren): import("react").JSX.Element;
+export declare function usePlatform(): PlatformOS;

package/dist/types/src/appearance/theme.d.ts

@@ -0,0 +1,71 @@
+import type { Dispatch, PropsWithChildren, ReactNode, SetStateAction } from "react";
+type ValueObject = {
+    [themeName: string]: string;
+};
+/**
+ * Props for the useTheme hook
+ * @author la niina
+ */
+export type UseThemeProps = {
+    /** List of all available theme names */
+    themes: Array<string>;
+    /** Forced theme name for the current page */
+    forcedTheme?: string | undefined;
+    /** Update the theme */
+    setTheme: Dispatch<SetStateAction<string>>;
+    /** Active theme name */
+    theme?: string | undefined;
+    /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
+    systemTheme?: SystemTheme | undefined;
+};
+export type SystemTheme = "dark" | "light";
+export type Attribute = `data-${string}` | "class";
+export interface ThemeProviderProps extends PropsWithChildren {
+    /** List of all available theme names */
+    themes?: Array<string> | undefined;
+    /** Forced theme name for the current page */
+    forcedTheme?: string | undefined;
+    /** Whether to switch between dark and light themes based on prefers-color-scheme */
+    enableSystem?: boolean | undefined;
+    /** Disable all CSS transitions when switching themes */
+    disableTransitionOnChange?: boolean | undefined;
+    /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
+    enableColorScheme?: boolean | undefined;
+    /** Key used to store theme setting in localStorage */
+    storageKey?: string | undefined;
+    /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
+    defaultTheme?: string | undefined;
+    /** HTML attribute modified based on the active theme. Accepts `class`, `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.), or an array which could include both */
+    attribute?: Attribute | Array<Attribute> | undefined;
+    /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
+    value?: ValueObject | undefined;
+    /** Nonce string to pass to the inline script for CSP headers */
+    nonce?: string | undefined;
+}
+/**
+ * Hook to access the theme context
+ * @returns {UseThemeProps} theme context
+ * @example
+ * const { theme, setTheme } = useTheme()
+ */
+export declare const useTheme: () => UseThemeProps;
+/**
+ * Theme provider component is used to wrap your app &
+ * provide theme context to all components. It can be used to switch
+ * between themes.
+ * @author la niina
+ * @param {ThemeProviderProps} props
+ * @returns {ReactNode} children
+ * @example
+ * <ThemeProvider attribute="class" disableTransitionOnChange>
+ *     <App />
+ * </ThemeProvider>
+ *
+ * @example
+ * <ThemeProvider themes={["light", "queer", "dark", "system"]} defaultTheme="light">
+ *     <App />
+ * </ThemeProvider>
+ */
+export declare const ThemeProvider: (props: ThemeProviderProps) => ReactNode;
+export declare const script: (attribute: Attribute | Array<Attribute>, storageKey: string, defaultTheme: string, forcedTheme: string | undefined, themes: Array<string>, value: ValueObject | undefined, enableSystem: boolean, enableColorScheme: boolean) => void;
+export {};

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

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef } from "react";
+type AmbientProps = ComponentPropsWithoutRef<"section"> & {
+    /** The image whose colors glow behind the content. */
+    src?: string | null;
+};
+/**
+ * Content with its image's colors glowing softly behind it, no card or
+ * edge: a blown-up, blurred copy of the image masked into a circle that
+ * fades into the page, the way Apple lets a photo light its surroundings.
+ */
+export declare function Ambient({ src, className, children, ...props }: AmbientProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export * from "./ambient";

package/dist/types/src/components/button/button-styles.d.ts

@@ -0,0 +1,12 @@
+export type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "accent";
+/** Icon-only buttons use the same sizing contract as Button. */
+export declare const iconButtonSizes: {
+    readonly icon: "size-11 p-0 rounded-full";
+    readonly "icon-xs": "size-8 p-0 rounded-full";
+    readonly "icon-sm": "size-9 p-0 rounded-full";
+    readonly "icon-lg": "size-12 p-0 rounded-full";
+};
+export type IconButtonSize = keyof typeof iconButtonSizes;
+export type ButtonSize = "default" | "xs" | "sm" | "lg" | "icon-full" | IconButtonSize;
+export declare const buttonVariants: Record<ButtonVariant, string>;
+export declare const buttonSizes: Record<ButtonSize, string>;

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

@@ -0,0 +1,30 @@
+import { type ButtonHTMLAttributes } from "react";
+import { type ButtonSize, type ButtonVariant } from "./button-styles";
+export type { ButtonSize, ButtonVariant };
+/**
+ * Each variant has a little depth: a fine highlight along the top edge and
+ * a soft, layered shadow, like a well-made physical key.
+ */
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Visual emphasis: `default` (solid), `accent` (main action),
+     * `secondary` (quiet fill), `outline`, `ghost`, `link`, or `destructive`.
+     * @default "default"
+     */
+    variant?: ButtonVariant;
+    /**
+     * Label sizes: `xs`, `sm`, `default`, `lg`.
+     * Icon sizes: `icon-xs`, `icon-sm`, `icon`, `icon-lg`, `icon-full`.
+     * Prefer IconButton for an icon with a built-in accessible label.
+     * @default "default"
+     */
+    size?: ButtonSize;
+    /** Shows a delayed spinner, keeps the button's width, and prevents repeat presses.
+     * @default false
+     */
+    isPending?: boolean;
+}
+/** Shares native button appearance with semantic links without nesting a button. */
+export declare function buttonStyle({ variant, size, className, }?: Pick<ButtonProps, "variant" | "size" | "className">): string;
+/** A native button with Passui styling, pending feedback, and an HTMLButtonElement ref. */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/src/components/button/icon-button.d.ts

@@ -0,0 +1,10 @@
+import { type ButtonProps } from "./button";
+import type { ButtonVariant, IconButtonSize } from "./button-styles";
+export type { ButtonVariant, IconButtonSize };
+export interface IconButtonProps extends Omit<ButtonProps, "size"> {
+    /** Icon-only actions must have an accessible name. */
+    label: string;
+    size?: IconButtonSize;
+}
+/** An accessible icon-only presentation of Button, sharing its interaction behavior. */
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/src/components/button/pending-spinner.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Centred over the button while it is pending: fades in, spins, and is
+ * sized from the text so it suits every button size.
+ */
+export declare function PendingSpinner(): import("react").JSX.Element;

package/dist/types/src/components/button/use-pending-indicator.d.ts

@@ -0,0 +1,2 @@
+export declare function schedulePendingIndicator(onShow: () => void): () => void;
+export declare function usePendingIndicator(isPending: boolean): boolean;

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

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from "react";
+export type ChipTone = "neutral" | "accent" | "public" | "family" | "friends";
+export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+    /** `neutral`, `accent`, `public`, `family`, or `friends`. @default "neutral" */
+    tone?: ChipTone;
+}
+export declare function Chip({ tone, className, ...props }: ChipProps): import("react").JSX.Element;

package/dist/types/src/components/compact-date-picker/calendar-month.d.ts

@@ -0,0 +1,25 @@
+/** A calendar day, with `month` counted from 1. */
+export interface CalendarDay {
+    year: number;
+    month: number;
+    day: number;
+}
+/** Reads `YYYY-MM-DD`; null for anything else, or a date that doesn't exist. */
+export declare function parseDay(value: string): CalendarDay | null;
+export declare function formatDay({ year, month, day }: CalendarDay): string;
+/** Moves by whole days, across months and years. */
+export declare function addDays(day: CalendarDay, count: number): CalendarDay;
+/** Moves by months, keeping the day where the month allows (31 Jan + 1 is 28 or 29 Feb). */
+export declare function addMonths(day: CalendarDay, count: number): CalendarDay;
+/**
+ * The first day of the week where `locale` is used, 1 (Monday) to 7
+ * (Sunday), from the browser where it knows, else Monday except in the
+ * places that start on Sunday.
+ */
+export declare function firstWeekday(locale: string): number;
+/** Six weeks covering `year`/`month`, starting on `firstDay` (1 to 7). */
+export declare function monthGrid(year: number, month: number, firstDay: number): Array<CalendarDay & {
+    inMonth: boolean;
+}>;
+/** Whether `value` (`YYYY-MM-DD`) lies within the optional bounds. */
+export declare function withinBounds(value: string, min?: string, max?: string): boolean;

package/dist/types/src/components/compact-date-picker/compact-date-picker.d.ts

@@ -0,0 +1,27 @@
+export interface CompactDatePickerProps {
+    /** `YYYY-MM-DD`, or "" when no date is chosen. */
+    value: string;
+    onChange: (value: string) => void;
+    /** Names the button and the calendar for assistive technology. */
+    label: string;
+    locale: string;
+    min?: string;
+    max?: string;
+    /** Shown when no date is chosen. */
+    placeholder?: string;
+    labels: {
+        previousMonth: string;
+        nextMonth: string;
+        /** Offers to remove the date, for optional dates. */
+        clear?: string;
+    };
+    className?: string;
+    /** Prevents opening the date panel. @default false */
+    disabled?: boolean;
+}
+/**
+ * A date as a compact button that opens a month calendar, like SwiftUI's
+ * compact DatePicker: for dates on a calendar, such as an event or an
+ * invoice. For dates people know by heart, like a birthday, use DatePicker.
+ */
+export declare function CompactDatePicker({ value, onChange, label, locale, min, max, placeholder, labels, className, disabled, }: CompactDatePickerProps): import("react").JSX.Element;

package/dist/types/src/components/compact-time-picker/compact-time-picker.d.ts

@@ -0,0 +1,26 @@
+export interface CompactTimePickerProps {
+    /** `HH:MM` on a 24 hour clock, or "" when no time is chosen. */
+    value: string;
+    onChange: (value: string) => void;
+    /** Names the button and the panel for assistive technology. */
+    label: string;
+    locale: string;
+    /** Minutes offered, in steps; an exact time already chosen is kept. */
+    minuteStep?: number;
+    /** Shown when no time is chosen. */
+    placeholder?: string;
+    labels: {
+        hour: string;
+        minute: string;
+        period: string;
+    };
+    className?: string;
+    /** Prevents opening the time panel. @default false */
+    disabled?: boolean;
+}
+/**
+ * A time as a compact button that opens columns of hours and minutes,
+ * like SwiftUI's compact DatePicker for times, on the clock the locale
+ * reads (12 hours with AM and PM, or 24).
+ */
+export declare function CompactTimePicker({ value, onChange, label, locale, minuteStep, placeholder, labels, className, disabled, }: CompactTimePickerProps): import("react").JSX.Element;

package/dist/types/src/components/compact-time-picker/time-value.d.ts

@@ -0,0 +1,18 @@
+/** A time of day on a 24 hour clock. */
+export interface TimeOfDay {
+    hour: number;
+    minute: number;
+}
+/** Reads `HH:MM` (24 hour); null for anything else. */
+export declare function parseTime(value: string): TimeOfDay | null;
+export declare function formatTime({ hour, minute }: TimeOfDay): string;
+/** Whether people where `locale` is used read time on a 12 hour clock. */
+export declare function usesTwelveHours(locale: string): boolean;
+/** The hour as shown on a 12 hour clock (12, 1 to 11) and whether it's after noon. */
+export declare function toTwelveHours(hour: number): {
+    hour: number;
+    pm: boolean;
+};
+export declare function fromTwelveHours(hour: number, pm: boolean): number;
+/** Minutes offered in steps of `step`, keeping `current` when it falls between them. */
+export declare function minuteChoices(step: number, current?: number): number[];

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

@@ -0,0 +1,48 @@
+import type { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react";
+export type ContentViewVariant = keyof typeof variants;
+export type ContentViewHeadingLevel = "h1" | "h2" | "h3";
+type ContentViewProps = ComponentPropsWithoutRef<"section"> & {
+    variant?: ContentViewVariant;
+};
+type RowProps = ComponentPropsWithoutRef<"div">;
+type SectionProps = ComponentPropsWithoutRef<"section">;
+type HeaderProps = PropsWithChildren<{
+    heading: string;
+    p?: string;
+    pClassName?: string;
+    icon?: ReactNode;
+    action?: ReactNode;
+    actionClassName?: string;
+    as?: ContentViewHeadingLevel;
+    className?: string;
+}>;
+type H1Props = ComponentPropsWithoutRef<"h1">;
+type H2Props = ComponentPropsWithoutRef<"h2">;
+type PProps = ComponentPropsWithoutRef<"p">;
+type SpanProps = ComponentPropsWithoutRef<"span">;
+type SubProps = ComponentPropsWithoutRef<"sub">;
+declare const variants: {
+    readonly elevated: string;
+};
+export declare function ContentView({ variant, className, children, ...props }: ContentViewProps): import("react").JSX.Element;
+export declare namespace ContentView {
+    export { Row };
+    export { Section };
+    export { Header };
+    export { Divider };
+    export { H1 };
+    export { H2 };
+    export { P };
+    export { Span };
+    export { Sub };
+}
+declare function Row({ className, children, ...props }: RowProps): import("react").JSX.Element;
+declare function Section({ className, children, ...props }: SectionProps): import("react").JSX.Element;
+declare function Header({ heading, p, pClassName, icon, action, actionClassName, as: Tag, className, children, }: HeaderProps): import("react").JSX.Element;
+declare function Divider(): import("react").JSX.Element;
+declare function H1({ className, children, ...props }: H1Props): import("react").JSX.Element;
+declare function H2({ className, children, ...props }: H2Props): import("react").JSX.Element;
+declare function P({ className, children, ...props }: PProps): import("react").JSX.Element;
+declare function Span({ className, children, ...props }: SpanProps): import("react").JSX.Element;
+declare function Sub({ className, children, ...props }: SubProps): import("react").JSX.Element;
+export {};

package/dist/types/src/components/content-view/index.d.ts

@@ -0,0 +1 @@
+export * from "./content-view";

package/dist/types/src/components/context-menu/conceal-menu-source.d.ts

@@ -0,0 +1,2 @@
+/** Follow-up menus share ownership until the last surface finishes closing. */
+export declare function concealMenuSource(element: HTMLElement, inert: boolean): () => boolean;

package/dist/types/src/components/context-menu/context-menu-host.d.ts

@@ -0,0 +1,2 @@
+/** Renders the open context menu. Mount once, near the app root. */
+export declare function ContextMenuHost(): import("react").JSX.Element;

package/dist/types/src/components/context-menu/context-menu-store.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+import type { MenuRect } from "./menu-reveal";
+export type ContextMenuAlignX = "start" | "end";
+export type ContextMenuAlignY = "top" | "bottom";
+export type ContextMenuEdge = "leading" | "trailing";
+/** One row of a context menu, or a divider between groups of rows. */
+export type ContextMenuItem = {
+    label: string;
+    icon?: ReactNode;
+    onSelect: () => void;
+    destructive?: boolean;
+    disabled?: boolean;
+    /** Marks the current choice, e.g. a note's kind. */
+    checked?: boolean;
+} | {
+    heading: string;
+} | "divider";
+export interface OpenMenu {
+    id: number;
+    anchor: Element | null;
+    x: number;
+    y: number;
+    items: ContextMenuItem[];
+    /** Opened by long-press: bigger rows for fingers. */
+    touch: boolean;
+    /** Which edge of the menu sits at `x`: its left (`start`) or its right (`end`). */
+    alignX: ContextMenuAlignX;
+    /** Which edge of the menu sits at `y`: its top (`top`) or its bottom (`bottom`). */
+    alignY: ContextMenuAlignY;
+    source?: MenuRect;
+    toolbar?: HTMLElement;
+    toolbarRect?: MenuRect;
+    restoreFocus?: boolean;
+}
+/** Opens a menu at a point, such as where a pointer was pressed. */
+export declare function openContextMenu(x: number, y: number, items: ContextMenuItem[], touch?: boolean, anchor?: Element | null): void;
+/**
+ * Opens a second menu where the last one stood, the way an iOS menu swaps
+ * in a submenu: a long list (a note's fonts, its kinds) stays one row in the
+ * first menu instead of making it tall.
+ */
+export declare function openFollowUpMenu(items: ContextMenuItem[]): void;
+/**
+ * Opens a menu from a control, the way a SwiftUI `Menu` does: under it (or
+ * above it), lined up with its leading or trailing edge. Leading and
+ * trailing follow the text direction, so right-to-left languages mirror.
+ * The menu's real size decides where it goes; nothing is guessed.
+ */
+export declare function openMenu(anchor: Element, items: ContextMenuItem[], { edge, above, toolbar, }?: {
+    edge?: ContextMenuEdge;
+    above?: boolean;
+    /** Replace this action group with a horizontally expanding menu surface. */
+    toolbar?: HTMLElement;
+}): void;
+export declare function closeContextMenu(restoreFocus?: boolean): void;
+export declare function subscribeContextMenu(listener: () => void): () => void;
+export declare function getContextMenu(): OpenMenu | null;

package/dist/types/src/components/context-menu/menu-navigation.d.ts

@@ -0,0 +1,6 @@
+export type MenuNavigationKey = "ArrowDown" | "ArrowUp" | "Home" | "End";
+export declare function isMenuNavigationKey(key: string): key is MenuNavigationKey;
+/** Index of the next enabled action in a menu, with wrapping arrow navigation. */
+export declare function nextMenuIndex(key: MenuNavigationKey, current: number, count: number): number;
+/** Finds a matching label after the current action, wrapping at the end. */
+export declare function findMenuTypeaheadIndex(labels: ReadonlyArray<string>, query: string, current: number): number;

package/dist/types/src/components/context-menu/menu-position.d.ts

@@ -0,0 +1,21 @@
+import type { OpenMenu } from "./context-menu-store";
+import type { MenuRect } from "./menu-reveal";
+type MenuAnchor = Pick<OpenMenu, "x" | "y" | "alignX" | "alignY">;
+type MenuSize = Pick<MenuRect, "width" | "height">;
+type MenuBounds = {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+/** Fit within the current visible viewport, including a keyboard or Safari pan. */
+export declare function menuPosition(menu: MenuAnchor, size: MenuSize, bounds: MenuBounds): {
+    left: number;
+    top: number;
+    originX: number;
+    originY: number;
+    maxHeight: number;
+    width: number;
+    height: number;
+};
+export {};

package/dist/types/src/components/context-menu/menu-reveal.d.ts

@@ -0,0 +1,22 @@
+export type MenuRect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/** Animate the material's bounds independently so menu text never stretches. */
+export declare function menuSurfaceReveal(source: MenuRect | undefined, target: MenuRect): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    opacity: number;
+    borderRadius: string;
+} | {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    opacity: number;
+    borderRadius: number;
+};

package/dist/types/src/components/context-menu/use-context-menu.d.ts

@@ -0,0 +1,14 @@
+import { type MouseEvent, type PointerEvent } from "react";
+import { type ContextMenuItem } from "./context-menu-store";
+/**
+ * Right-click on desktop, long-press on touch screens: both open the same
+ * menu of actions. Spread the returned handlers onto the element.
+ */
+export declare function useContextMenu(items: () => ContextMenuItem[]): {
+    onContextMenu(event: MouseEvent): void;
+    onPointerDown(event: PointerEvent): void;
+    onPointerMove(event: PointerEvent): void;
+    onPointerUp: () => void;
+    onPointerCancel: () => void;
+    onClickCapture(event: MouseEvent): void;
+};

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

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+export type ConversationMessage = {
+    id: string;
+    body: string;
+    /** Written by whoever is looking: drawn on the right. */
+    mine: boolean;
+    author?: string;
+    /** Shown beside the other side's messages, like their avatar. */
+    avatar?: ReactNode;
+    createdAt: string;
+};
+/**
+ * A thread of plain-text messages like Messages on iPhone: a day line when
+ * the date changes, back-to-back messages from one side grouped under one
+ * name, theirs on the left with an avatar, yours on the right.
+ */
+declare function Messages({ messages, locale, }: {
+    messages: ConversationMessage[];
+    /** For day names and times; the reader's own by default. */
+    locale?: string;
+}): import("react").JSX.Element;
+type ComposerProps = {
+    onSend: (body: string) => Promise<unknown>;
+    pending?: boolean;
+    maxLength: number;
+    placeholder: string;
+    /** Extra controls under the field, like a status picker. */
+    actions?: ReactNode;
+    /** Names the round Send button for screen readers. */
+    sendLabel: string;
+    /**
+     * Words for the characters left, shown near the limit, such as
+     * (count) => `${count} left`. Without it, just the number shows.
+     */
+    remaining?: (count: number) => string;
+};
+/** A reply field with a round send button; Ctrl/Cmd+Enter sends, and it clears only once the send worked. */
+declare function Composer({ onSend, pending, maxLength, placeholder, actions, sendLabel, remaining, }: ComposerProps): import("react").JSX.Element;
+export declare const Conversation: {
+    Messages: typeof Messages;
+    Composer: typeof Composer;
+};
+export {};

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

@@ -0,0 +1 @@
+export * from "./conversation";

package/dist/types/src/components/date-picker/date-picker.d.ts

@@ -0,0 +1,16 @@
+type DatePickerProps = {
+    value: string;
+    onChange: (value: string) => void;
+    label: string;
+    labels: {
+        day: string;
+        month: string;
+        year: string;
+        invalid: string;
+    };
+    locale: string;
+    max?: string;
+};
+/** Segmented date entry suited to birthdays, without a native calendar dialog. */
+export declare function DatePicker({ value, onChange, label, labels, locale, max }: DatePickerProps): import("react").JSX.Element;
+export {};

package/dist/types/src/components/date-picker/date-value.d.ts

@@ -0,0 +1,2 @@
+/** Returns a date-only value without timezone conversion or date rollover. */
+export declare function dateValue(year: string, month: string, day: string, max?: string): string;