@passui/react 0.1.17 → 0.1.20

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
@@ -82,3 +183,41 @@ your user npm configuration.
 ## License
 
 [MIT](./LICENSE)
+
+### Documentation and loading primitives
+
+Import `Accordion`, `ComboBox`, `RadioGroup`, `Breadcrumb`, `Skeleton`,
+`ContentUnavailableView`, `CodeBlock` and `KeyboardShortcut` from their kebab case
+subpaths, such as `@passui/react/combo-box`. Each has a named props type and
+interactive documentation. CodeBlock accepts plain source and optionally a
+highlighter element, keeping syntax engines out of the library dependency graph.
+Shared component styles come from the stylesheet import above.
+
+Stepper places the spoken and rolling value beside its two action segments.
+Its digit columns preserve carries and stop animating under Reduce Motion.
+Compact desktop rows retain larger targets for coarse pointers. Import only
+needed controls and icons through public entries; CSS is preserved while unused
+JavaScript exports can be removed by the bundler.
+
+### Search, selection and motion
+
+`ComboBox` is a searchable `Picker` with optional `onCreate` and a localized
+`createLabel`. `Command` composes grouped search actions; `CommandDialog` adds
+modal focus handling. Shortcut hints are display only; your application owns the
+actual keyboard bindings. Picker, compact calendar and time panels share one
+glass surface that expands from its trigger and restores it after dismissal.
+
+`TextField` and `SecureField` accept `labelPlacement="floating"`. SearchField
+supports `collapsible` for a single pill that expands around its search icon.
+`OneTimeCode` draws cells around one native input, preserving paste and code
+autofill. Your application owns verification and supplies status feedback.
+
+`SloshSlider` and `WakeSlider` take `label`, optional `value` or `defaultValue`,
+and `onChange`. Values run from 0 to 100. Their React-only motion stops at rest
+and respects Reduce Motion. Slosh has `viscosity`, `momentum` and `tilt`; Wake
+has `bars` and `wake`. Their source attribution and MIT notice are included in
+[THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md). ProgressView remains read only
+and shares the liquid fill without acquiring slider behavior.
+
+`AspectRatio` clips images and videos to `ratio` without distorting them. The
+documentation demonstrates equal-area crops in a stable stage.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,25 @@
+# Bencho interaction sources
+
+SloshSlider and WakeSlider adapt sources supplied from [Bencho](https://bencho.dev/),
+provided under the [MIT licence](https://bencho.dev/licence). Motion comments and
+attribution are retained; Passui adds its own tokens, component API and accessibility.
+
+## MIT License — Bencho
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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/accordion/accordion.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+export interface AccordionItem {
+    /** Stable value used to identify the expanded item. */
+    value: string;
+    title: string;
+    content: ReactNode;
+    description?: string;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    items: readonly AccordionItem[];
+    /** The expanded item, or `null` when all items are closed. */
+    value: string | null;
+    /** Selecting the open item reports `null`, so every item can collapse. */
+    onValueChange: (value: string | null) => void;
+    className?: string;
+}
+/** A single-open, collapsible accordion with labelled animated content regions. */
+export declare function Accordion({ items, value, onValueChange, className }: AccordionProps): import("react").JSX.Element;

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/aspect-ratio/aspect-ratio.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from "react";
+export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    /** Width divided by height. @default 1.3333333333333333 */
+    ratio?: number;
+}
+/** A crop frame: size its geometry, while images cover without distortion. */
+export declare function AspectRatio({ ratio, className, style, ...props }: AspectRatioProps): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+export interface BreadcrumbProps {
+    label: string;
+    items: readonly BreadcrumbItem[];
+    className?: string;
+    /** Integrate a client router without nesting interactive elements. */
+    renderLink?: (item: BreadcrumbItem & {
+        href: string;
+    }) => ReactNode;
+}
+/** Ancestors stay links; the final item identifies the current page. */
+export declare function Breadcrumb({ label, items, className, renderLink }: BreadcrumbProps): import("react").JSX.Element;

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,32 @@
+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;
+    /** Layout classes for the content wrapper, such as a full-width disclosure row. */
+    contentClassName?: string;
+}
+/** 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/code-block/code-block.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentProps, type ReactNode } from "react";
+export interface CodeBlockProps extends Omit<ComponentProps<"div">, "children"> {
+    code: string;
+    /** Supply a highlighter's rendered pre/code element; source remains the fallback. */
+    children?: ReactNode;
+    /** Show a nonselectable line gutter. @default true */
+    lineNumbers?: boolean;
+}
+/** Code presentation without shipping a highlighter or formatter to consumers. */
+export declare function CodeBlock({ code, children, lineNumbers, className, ...props }: CodeBlockProps): import("react").JSX.Element;

package/dist/types/src/components/combo-box/combo-box.d.ts

@@ -0,0 +1,9 @@
+import { type PickerOption, type PickerProps } from "../picker/picker";
+export interface ComboBoxOption<T extends string> extends PickerOption<T> {
+}
+export interface ComboBoxProps<T extends string> extends Omit<PickerProps<T>, "searchable" | "options"> {
+    options: readonly ComboBoxOption<T>[];
+    emptyLabel: string;
+}
+/** A searchable Picker, with optional creation from the person's typed query. */
+export declare function ComboBox<T extends string>(props: ComboBoxProps<T>): import("react").JSX.Element;

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

@@ -0,0 +1,18 @@
+import { type ComponentProps } from "react";
+import { KeyboardShortcut } from "../keyboard-shortcut/keyboard-shortcut";
+import { SearchList, SearchListField, SearchListResults, SearchListEmpty, SearchListGroup, SearchListItem } from "../search-list/search-list";
+import { type SheetProps } from "../sheet/sheet";
+export interface CommandProps extends ComponentProps<typeof SearchList> {
+}
+export interface CommandDialogProps extends Omit<SheetProps, "placement"> {
+}
+/** An inline command palette. SearchList owns filtering and keyboard selection. */
+export declare function Command({ className, ...props }: CommandProps): import("react").JSX.Element;
+/** A modal command palette with Sheet's focus isolation and restoration. */
+export declare function CommandDialog({ children, className, ...props }: CommandDialogProps): import("react").JSX.Element;
+export declare function CommandInput({ className, autoFocus, ref: forwardedRef, ...props }: ComponentProps<typeof SearchListField>): import("react").JSX.Element;
+export declare function CommandList({ className, ...props }: ComponentProps<typeof SearchListResults>): import("react").JSX.Element;
+export declare function CommandEmpty({ className, ...props }: ComponentProps<typeof SearchListEmpty>): import("react").JSX.Element;
+export declare function CommandShortcut({ className, ...props }: ComponentProps<typeof KeyboardShortcut>): import("react").JSX.Element;
+export declare function CommandGroup({ className, ...props }: ComponentProps<typeof SearchListGroup>): import("react").JSX.Element;
+export declare function CommandItem({ className, ...props }: ComponentProps<typeof SearchListItem>): 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-unavailable-view/content-unavailable-view.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode, ComponentProps } from "react";
+export interface ContentUnavailableViewProps extends Omit<ComponentProps<"div">, "title"> {
+    title: string;
+    description?: string;
+    icon?: ReactNode;
+    actions?: ReactNode;
+}
+/** A focused empty or unavailable state with an optional next action. */
+export declare function ContentUnavailableView({ title, description, icon, actions, className, ...props }: ContentUnavailableViewProps): import("react").JSX.Element;

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;